Minicurso sobre a construção de aplicativos móveis para Android.

1. Prof. Leinylson Fontinele
Oficinas
Profissionalizantes

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. Porque
utilizá-lo?

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!!!!!

8. É melhor
do que
programar
?

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.

13. Vamos
explorar...

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:

33. Vamos programar?!

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

37. Acessando a plataforma

38. 1º Projeto
Saudação

39. Meu primeiro programa

40. Meu primeiro programa

41. Meu primeiro programa

42. Digite seu nome:
Agora vamos começar a
programar nossos blocos!!
Meu primeiro programa
Clique aqui

43. Meu primeiro programa

44. Meu primeiro programa

45. Meu primeiro programa

46. Meu primeiro programa

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

50. AppInvento
r
Meu primeiro programa

51. Meu primeiro programa

52. 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

55. Meu primeiro programa

56. 2º Projeto
Calculadora simples!

57. Calculadora simples

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

62. 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