Transferir como PDF, PPTX
Carregado porLeinylson Fontinele
Minicurso de App Inventor
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.
Mais conteúdo relacionado
Semelhante a Minicurso de App Inventor
Minicurso de App Inventor
- 1.
- 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?
- 4.
- 5. Por que utilizaro 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 é amelhor forma de validar sua ideia sem gastar muita grana? Criando um Protótipo e testando!
- 7. O que possofazer 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!!!!!
- 8.
- 9. O que nãopodemos 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.
- 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.
- 13.
- 14. AppInvento r Interfaces para desenvolvimento Interfacepara o "designer" do aplicativo
- 15. Módulo Interface (Designer- Palette)
- 16. Paleta de componentes Interfaces paradesenvolvimento
- 17. Módulo Interface (Designer- Palette)
- 18. Interfaces para desenvolvimento Telaprincipal ou tela do aplicativo
- 19. Componentes e suas propriedades Interfaces paradesenvolvimento
- 20. Menu superior Menu Connect Escolhada interface Interfaces para desenvolvimento
- 21. AppInvento r Interface de programaçãopor meio de blocos de código Interfaces para desenvolvimento
- 29. AppInvento r Blocos de comando Interfaces paradesenvolvimento
- 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ãoeventos? ✓ 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:
- 33.
- 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 deiniciarmos, é 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
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Digite seu nome: Agoravamos começar a programar nossos blocos!! Meu primeiro programa Clique aqui
- 43.
- 44.
- 45.
- 46.
- 47. Vamos testar nossoapp clicando em Connect e depois em Emulator Meu primeiro programa
- 48. AppInvento r Adicionando uma saudação: Meuprimeiro programa
- 49. O que vocêacha de melhorarmos um pouco esse app? Meu primeiro programa
- 50.
- 51.
- 52.
- 53. Dê uma melhoradaem seu app e tente deixa-lo assim: Agora teste o seu aplicativo no simulador!!!! Meu primeiro programa
- 54. Para uma melhorexperiê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
- 55.
- 56.
- 57.
- 58. AppInvento r Deixe a telaprincipal 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 omodo 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, ficaassim: Agora teste sua aplicação. Se tudo estiver ok, repita o procedimento para os outros 3 botões. Calculadora simples
- 62.
- 63. AppInvento r Para finalizar, vamosadicionar um botão para limpar os campos de digitação: Com um código simples, limpamos os campos: Calculadora simples
- 64. Desafio: fazer osdemais botões funcionar! Calculadora simples
- 65. 3º Projeto Pintando osete!!
- 66. Pintando o sete Agoravamos construir um app para o brincar um pouco com o colega do lado.
- 67. Primeiro vamos adicionartrê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 2botões abaixo do Canvas. Se tudo deu certo, sua tela deverá ficar assim: Pintando o sete
- 69. Agora vamos configuraros 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 vamosconfigurar os botões. Mas adicionarmaisdoiselementosà minha tela: Primeiroselecione ImagePicker,arrastee coloque-oaoladodo botão Pintando o sete
- 71. Renomeie o ImagePickere 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ãolimpar: 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!!! Agoravamos configurar o que acontece quando desenhamos na tela. Primeiro escolhemos Canvas1.Dragged e configuramos: Pintando o sete
- 74. Finalmente, escolhemos oCanvas1.Touched Prontinho!! Agora é só diversão!!! Pintando o sete
- 75. Desafio Final Criar umaplicativo/jogo funcional que envolva tudo o que foi demonstrado
- 76. Minicurso criado combase 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