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.

12.
Vamos
explorar...

13.
AppInvento
r
Interfaces para desenvolvimento
Interface para o "designer" do aplicativo

14.
Módulo Interface (Designer - Palette)

15.
Paleta de
componentes
Interfaces para desenvolvimento

16.
Módulo Interface (Designer - Palette)

17.
Interfaces para desenvolvimento
Tela principal
ou tela do
aplicativo

18.
Componentes
e suas
propriedades
Interfaces para desenvolvimento

19.
Menu superior
Menu Connect
Escolha da interface
Interfaces para desenvolvimento

20.
AppInvento
r
Interface de programação por meio de blocos de código
Interfaces para desenvolvimento

21.
AppInvento
r
Blocos de
comando
Interfaces para desenvolvimento

22.
✓ 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

23.
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:

24.
✓ 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:

25.
Vamos programar?!

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

27.
AppInvento
r
Acessando a plataforma
1. Abra o navegador Chrome e digite:
http://appinventor.mit.edu/
2. No canto superior direito, clique em

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

29.
Acessando a plataforma

30.
1º Projeto
Saudação

31.
Meu primeiro programa

32.
Meu primeiro programa

33.
Meu primeiro programa

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

35.
Meu primeiro programa

36.
Meu primeiro programa

37.
Meu primeiro programa

38.
Meu primeiro programa

39.
Vamos testar nosso app clicando
em Connect e depois em Emulator
Meu primeiro programa

40.
AppInvento
r
Adicionando uma saudação:
Meu primeiro programa

41.
O que você acha
de melhorarmos
um pouco esse
app?
Meu primeiro programa

42.
AppInvento
r
Meu primeiro programa

43.
Meu primeiro programa

44.
Meu primeiro programa

45.
Dê uma melhorada em seu app e tente deixa-lo assim:
Agora teste o seu aplicativo no simulador!!!!
Meu primeiro programa

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

47.
Meu primeiro programa

48.
2º Projeto
Calculadora simples!

49.
Calculadora simples

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

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

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

53.
Juntando tudo, fica assim:
Agora teste sua aplicação. Se tudo estiver ok, repita
o procedimento para os outros 3 botões.
Calculadora simples

54.
Calculadora simples

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

56.
Desafio: fazer os demais botões funcionar!
Calculadora simples

57.
3º Projeto
Pintando o sete!!

58.
Pintando o sete
Agora vamos construir um app para o brincar um pouco
com o colega do lado.

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

60.
Adicione outros 2 botões abaixo
do Canvas. Se tudo deu certo, sua
tela deverá ficar assim:
Pintando o sete

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

62.
antes, vamosAgora vamos configurar os botões.
Mas adicionarmaisdoiselementosà
minha tela:
Primeiroselecione
ImagePicker,arrastee
coloque-oaoladodo botão
Pintando o sete

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

64.
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:

65.
Quase pronto!!! Agora vamos configurar o que acontece
quando desenhamos na tela.
Primeiro escolhemos Canvas1.Dragged e configuramos:
Pintando o sete

66.
Finalmente, escolhemos o Canvas1.Touched
Prontinho!! Agora é só diversão!!!
Pintando o sete

67.
Desafio Final
Criar um aplicativo/jogo
funcional que envolva tudo o
que foi demonstrado

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