Minicurso de App Inventor
1 gostou1,399 visualizações
O documento descreve como usar a ferramenta Google App Inventor para criar aplicativos Android sem programação. Ele explica o que é o App Inventor, por que usá-lo, o que pode ser criado e não pode ser criado com ele. Também fornece instruções passo a passo para criar três aplicativos simples: um que mostra uma saudação, uma calculadora básica e um jogo de pintura.
Minicurso de App Inventor
- 2. O que é o App Inventor?!
- 3. Google App Inventor é uma ferramenta desenvolvida pela Google que permite a criação de aplicativos para smartphones que rodam o sistema operacional Android, sem que seja necessário conhecimento em programação. O App Inventor O que é o App Inventor?
- 5. Por que utilizar o App Inventor? A maioria das pessoas dizem que o App Inventor é fácil de usar por causa de seu visual e sua interface do tipo clique-e-arraste. Mas o que isso significa? Porque que o App Inventor é tão fácil de usar? ✓ Você não precisa lembrar das instruções ou saber programação. ✓ Você monta sua aplicação a partir de um conjunto de opções. ✓ Como em um quebra cabeças, apenas alguns blocos vão ligar-se ao outro. ✓ Você lidar com eventos diretamente.
- 6. Qual é a melhor forma de validar sua ideia sem gastar muita grana? Criando um Protótipo e testando!
- 7. O que posso fazer com App Inventor? Você pode construir diferentes tipos de aplicativos com o App Inventor. Use sua imaginação e você poderá criar todos os tipos de diversão ou aplicativos úteis. ✓ Jogos. ✓ Aplicativos educacionais. ✓ Aplicativos para geolocalização (GPS). ✓ Aplicativos que controlam robôs. ✓ Aplicativos para a Web e muito mais!!!!!
- 9. O que não podemos criar com App Inventor? ✓ Não é um substituto para a linguagem de programação de aplicativos para o Android. ✓ Não é voltada para criação de jogos e aplicativos comerciais. ✓ As aplicações estão longe de ser bonitas, mas são funcionais.
- 10. Então é fácil...
- 11. Por que é tão fácil? ✓ Nenhuma sintaxe: a linguagem de blocos elimina a necessidade de lembrar e digitar código. ✓ Tudo está à frente: Componentes funções estão em gavetas. Basta encontrar, arrastar e soltar. ✓ Componentes de alto nível: possui uma grande biblioteca. ✓ Concreto: menos abstratos que muitas linguagens. ✓ Na Web: caso tenha celular Android, não precisará instalar nada no computador.
- 14. AppInvento r Interfaces para desenvolvimento Interface para o "designer" do aplicativo
- 15. Módulo Interface (Designer - Palette)
- 16. Paleta de componentes Interfaces para desenvolvimento
- 17. Módulo Interface (Designer - Palette)
- 18. Interfaces para desenvolvimento Tela principal ou tela do aplicativo
- 19. Componentes e suas propriedades Interfaces para desenvolvimento
- 20. Menu superior Menu Connect Escolha da interface Interfaces para desenvolvimento
- 21. AppInvento r Interface de programação por meio de blocos de código Interfaces para desenvolvimento
- 29. AppInvento r Blocos de comando Interfaces para desenvolvimento
- 30. ✓ Observe também, que os comandos funcionam como um quebra-cabeças!!!! ✓ Todas as instruções que serão passadas ao aplicativos são "encaixadas" umas nas outras, formando um bloco maior!!! Interfaces para desenvolvimento
- 31. O que são eventos? ✓ Simplificadamente, vamos definir "evento" como sendo uma ação a ser realizada pelo usuário ou pelo dispositivo. ✓ Um exemplo bem comum, que utilizaremos praticamente em todo o curso é o evento de clicar em um botão:
- 32. ✓ Resposta à ação do usuário: Botão pressionado. ✓ Externos: SMS recebido, GPS ou acelerômetro. ✓ Internos: Relógios ✓ De Inicialização: quando uma janela acaba de ser aberta. ✓ De Animação: Colisões de objetos que ocorrem entre si. Eventos podem ser gerador por:
- 34. Antes de iniciarmos... 1. Celular com Android 4.0 ou superior 2. Conta de e-mail da Google (gmail) 3. Aplicativo MIT AI2 Companion instalado no celular 4. Aplicativo leitor de QR-Code instalado no celular 5. Conexão com internet 6. Simulador MIT_App_Inventor_Tools_2.3 instalado no computador
- 35. AppInvento r Acessando a plataforma 1. Abra o navegador Chrome e digite: http://appinventor.mit.edu/ 2. No canto superior direito, clique em
- 36. 1. Antes de iniciarmos, é necessário aceitar os termos de permissão do aplicativo!! 2. Entre com seu email (gmail) e senha. 3. Na tela seguinte, clique em Allow (Permitir)!! Acessando a plataforma
- 42. Digite seu nome: Agora vamos começar a programar nossos blocos!! Meu primeiro programa Clique aqui
- 47. Vamos testar nosso app clicando em Connect e depois em Emulator Meu primeiro programa
- 48. AppInvento r Adicionando uma saudação: Meu primeiro programa
- 49. O que você acha de melhorarmos um pouco esse app? Meu primeiro programa
- 53. Dê uma melhorada em seu app e tente deixa-lo assim: Agora teste o seu aplicativo no simulador!!!! Meu primeiro programa
- 54. Para uma melhor experiência, recomendo o uso de um celular real, em substituição ao emulador. Clique em Reset Connection: E depois em AI Companion no seu celular e faça a leitura do QR Code. Meu primeiro programa
- 58. AppInvento r Deixe a tela principal com os seguintes elementos: Observe que para esse novo projeto, utilizaremos uma ferramenta para o arranjo horizontal dos botões. Calculadora simples
- 59. AppInvento r A ideia é a seguinte: ✓ Vamos digitar dois números nos campos 1 e 2. ✓ Quando apertar a operação desejada, o resultado aparece na 1ª linha (Resultado). Calculadora simples
- 60. Altere para o modo de blocos, para começarmos a dar forma à nossa aplicação: Associe o evento clique dos botões p/ ler os números digitados, realizar a operação e exibir o resultado. Calculadora simples
- 61. Juntando tudo, fica assim: Agora teste sua aplicação. Se tudo estiver ok, repita o procedimento para os outros 3 botões. Calculadora simples
- 63. AppInvento r Para finalizar, vamos adicionar um botão para limpar os campos de digitação: Com um código simples, limpamos os campos: Calculadora simples
- 64. Desafio: fazer os demais botões funcionar! Calculadora simples
- 65. 3º Projeto Pintando o sete!!
- 66. Pintando o sete Agora vamos construir um app para o brincar um pouco com o colega do lado.
- 67. Primeiro vamos adicionar três botões. Escolha um layout horizontal e alinhe os botões dentro dele!! Mude a cor e o nome de cada um deles. Agora adicione um Canvas à tela principal: Pintando o sete
- 68. Adicione outros 2 botões abaixo do Canvas. Se tudo deu certo, sua tela deverá ficar assim: Pintando o sete
- 69. Agora vamos configurar os botões. Mas antes, vamos adicionar mais dois elementos à minha tela: Depois selecione Camera e solte em qualquer lugar na tela Pintando o sete
- 70. antes, vamosAgora vamos configurar os botões. Mas adicionarmaisdoiselementosà minha tela: Primeiroselecione ImagePicker,arrastee coloque-oaoladodo botão Pintando o sete
- 71. Renomeie o ImagePicker e sua tela ficará assim: Retorne à interface de Blocks e vamos configurar os três botões e também o evento que acontece quando desenhamos na tela. Pintando o sete
- 72. Primeiro o botão limpar: O botão p/ selecionar a imagem é o ImagePicker: Pintando o sete Quando clicamos em tirar foto, iniciamos a câmera: Depois de fotografar, mudamos o Canvas:
- 73. Quase pronto!!! Agora vamos configurar o que acontece quando desenhamos na tela. Primeiro escolhemos Canvas1.Dragged e configuramos: Pintando o sete
- 74. Finalmente, escolhemos o Canvas1.Touched Prontinho!! Agora é só diversão!!! Pintando o sete
- 75. Desafio Final Criar um aplicativo/jogo funcional que envolva tudo o que foi demonstrado
- 76. Minicurso criado com base nas seguintes referências: ✓ MIT App Inventor. Disponível em: http://appinventor.mit.edu/explore/about-us.html. ✓ Prof. Sérgio Souza Costa ✓ Prof. Pedro Clarindo da Silva Neto