Você está na página 1de 86

AULA 01 .......................................................................................................

1 - Introduo ao App Inventor .............................................................................. 6


1.1 - Primeiros Passos ............................................................................................. 6
1.2 - Interface de produo .................................................................................... 9

AULA 02 ..................................................................................................... 13

2 - Nosso primeiro App ..........................................................................................14


2.1 - App Bateria_Eletronica .............................................................................. 15
2.2 - Criao do App passo a passo ....................................................................... 15
2.3 - Programando nosso novo App ...................................................................... 24

AULA 03 ..................................................................................................... 29
3 - Diferentes modos de testar a Aplicao........................................................... 30
3.1 - Emulador .......................................................................................................33

AULA 04 ..................................................................................................... 37
4 - Verificao de condies e variveis................................................................ 38

AULA 05 ..................................................................................................... 51
5 - Criando um cardpio mobile ............................................................................ 52

AULA 06 ..................................................................................................... 69

6 - Activity Starter, TinyDB e Clock ....................................................................... 70


6.1 - Novos componentes ......................................................................................70
6.2 - Projeto final ..................................................................................................70

Bibliografia ................................................................................................ 85

Imagens ................................................................................................................86

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 01
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Ol! Seja bem-vindo ao curso de Desenvolvimento de aplicativos


com App Inventor! Neste captulo, voc ver todo o funcionamento
da interface on-line do App Inventor para desenvolvimento de
aplicativos em plataforma Android. Conhecer, tambm, como
intuitivo o aprendizado desta poderosa ferramenta Open Source
(cdigo aberto) desenvolvida pelo MIT (Massachusetts Institute
of Technology).

1 - Introduo ao App Inventor

1.1 - Primeiros Passos


Para utilizar a ferramenta App Inventor, voc necessariamente dever possuir uma conta Google (a mesma utilizada
para o Gmail). Caso voc no possua uma conta, acesse o link a seguir:
https://accounts.google.com/SignUp?continue=https%3A%2F%2Faccounts.google.
com%2FManageAccount&hl=EN
O App Inventor funciona como um software de criao de aplicativos, porm todo o processo de criao dos
aplicativos ser feito via browser (Ex.: Chrome Preferencialmente , Firefox etc.). Esse web app (software online)
deve ser acessado no seguinte endereo:
http://appinventor.mit.edu/explore/.

Fig. 1.1 - Pgina inicial do site do App Inventor

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Como voc pode ver, o site do App Inventor bem simples e objetivo. Nele voc encontrar
todos os pr-requisitos exigidos pelo sistema e saber como adequar sua mquina para rodar a
aplicao. Tudo isso acessando o menu verde Start.
Ao clicar em Create, no canto superior direito da tela, automaticamente voc ser levado para
a pgina de login do Google. Insira seus dados de login e senha e aceite os termos de utilizao
e integrao a contas Google do App Inventor.

Fig. 1.2 - Integrao da conta Google com o App Inventor

Fig. 1.3 - Termos de servio do App Inventor

Aps aceitar os termos de servio, o sistema o levar para a interface de desenvolvimento


(ambiente de trabalho), como nas imagens a seguir.
O App Inventor convidar voc a responder um questionrio. Faa isso, se quiser. Se optar
por fazer, clique em Take Survey Now. Se quiser responder posteriormente, clique em Take
Survey Later. Se deseja no responder e no receber novamente esse convite, clique em Never
Take Survey.

Fig. 1.4 - Convite para responder a um questionrio

A prxima tela ser uma mensagem de boas-vindas.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 1.5 - Tela de Incio

Clique no canto superior esquerdo no boto Start New Project e ver a seguinte tela.

Fig. 1.6 - Nomeando seu primeiro projeto

Nomeie seu projeto como Eletronic_Drum ou Bateria_Eletronica e clique em OK.


Observao: para nomear um projeto, voc dever seguir as regras de nomenclatura do
App Inventor, e no poder utilizar acentos ou espaos entre palavras. Se o nome do seu
projeto for uma palavra composta, como Bateria Eletronica, utilize a forma utilizada anterior
Bateria_Eletronica.
A seguir, veja a tela da interface de produo (Designer) do App Inventor e, posteriormente,
falaremos sobre todas as possibilidades que ela nos traz.

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Fig. 1.7 - Interface de produo

1.2 - Interface de produo


A interface de produo (Designer) do App Inventor dividida em sete setores cujas funes so distintas. Veja
a seguir.

Fig. 1.8 - Setores de produo na Interface do App Inventor

Chamaremos de setores os menus da interface de produo (Designer) para que voc grave
na memria as funes que cada um representa. Falaremos agora, brevemente, sobre cada
um deles.
O Setor 1 (verde) o nosso menu principal. nele que iniciamos um novo projeto, salvamos um projeto,
conectamos nosso projeto com um emulador (para testes de visualizao), compilamos um projeto (salvar o projeto
como uma aplicao Android do tipo .apk) e tambm que encontramos nosso menu Help (Ajuda) para suprir nossas
dvidas;
No Setor 2 (rosa), encontramos o nome do nosso projeto esquerda e tambm os botes de gerenciamento
de telas (visualizaes) Screen1. Uma mesma aplicao poder ter diversas telas e ser nesse boto que faremos a
migrao entre elas. A seguir, temos o boto Add Screen para incluirmos no projeto uma nova tela e, posteriormente,
o boto Remove Screen para remover.
No canto superior esquerdo, temos dois importantes botes do App Inventor: Designer e Blocks.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

O boto Designer ativa a interface inicial (visual) do projeto, cujos setores estamos enumerando agora. O boto
Blocks (blocos) ativa o nosso ambiente de programao por de blocos, cuja tela voc v a seguir.

Fig. 1.9 - Ambiente de programao - Blocks

O ambiente bem parecido com nossa interface de produo (Designer), porm ser aqui que faremos toda a
programao dos nossos componentes da aplicao.
Explicaremos, posteriormente, esse ambiente (Blocks), quando j estivermos entendendo um pouco mais sobre
lgica de programao.
Voltemos ao ambiente Designer (interface de produo).
O Setor 3 (azul escuro) certamente o crebro do nosso projeto. Nele se encontram todas as possibilidades
do projeto, como utilizar um boto, uma imagem, um som etc.
Para a visualizao do projeto, temos o Setor 4 (laranja), no qual podemos ver tudo o que inserido no
projeto, a fim de arquitetarmos em tempo real nossas funcionalidades.
No Setor 5 (lils), vemos os componentes inseridos no projeto e tambm podemos renome-los para nossa
melhor compreenso.
No Setor 6 (verde escuro), encontramos as propriedades do componente selecionado, ou seja, se estivermos
com o componente Button selecionado na tela de visualizao (Setor 4), automaticamente veremos as propriedades
desse componente e poderemos alter-las.
No Setor 7 (azul claro), gerenciamos nossas mdias. nele que fazemos o upload (envio) de arquivos de
imagens (formatos .png e .jpg), sons (somente arquivos .mp3) e vdeos (somente arquivos .mp4).
Agora que voc conhece um pouco da interface grfica, vamos aprender na prtica como utiliz-la. Dessa forma,
construiremos nossa primeira aplicao.

10

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Veja no prximo captulo como fazer.

Fig. 1.10 - Tela de boas-vindas

A seguir, veja a tela inicial contendo projetos j feitos e o acesso criao de novos projetos. Em
seu primeiro acesso, obviamente, sua lista estar vazia, mas esse s o comeo!

DESENVOLVIMENTO
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
- GOOGLE INVENTOR

11

12

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 02
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Nesta segunda aula, daremos incio ao nosso to esperado


primeiro aplicativo!

2 - Nosso primeiro App

Antes de iniciarmos nossa criao, vamos falar um pouco sobre Lgica de Programao. Muitos tm pavor da palavra
programao, como se ela quisesse dizer Bicho de Sete Cabeas. Entretanto, isso no verdade.
Prova disso que todos ns somos programadores natos. Sim, voc ouviu bem! Desde muito pequenos, aprendemos
a programar tudo o que fazemos, em nosso crebro, seja quando estamos aprendendo a caminhar ou dar nossos
primeiros passos. Ou seja, usamos a programao mesmo em uma tarefa simples que fazemos todos os dias, como
escovar os dentes.
Veja como funciona nossa programao diria de escovar os dentes. Primeiramente, verifi camos no banheiro se
temos tudo de que precisamos, ou seja, uma pia, gua, escova de dente, pasta de dente e toalha de rosto. Esses so
nossos componentes. Depois, temos que saber o que fazer com eles, ou seja, quais so nossas aes. Em seguida,
fazemos da seguinte forma:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Pegamos a escova de dente;


Abrimos a torneira para sair a gua;
Molhamos a escova de dente;
Fechamos torneira;
Pegamos a pasta de dente;
Colocamos pasta de dente na escova;
Fechamos o tubo da pasta de dente;
Guardamos o tubo da pasta de dente;
Escovamos os dentes;
Abrimos novamente a torneira;
Enxaguamos a boca e lavamos a escova;
Fechamos a torneira;
Guardamos a escova de dentes;
Pegamos uma toalha;
Enxugamos o rosto e as mos na toalha;
Penduramos a toalha.

Descrita dessa forma, uma simples atividade como a de escovar os dentes demonstra o quanto nossa vida depende
dessa lgica de programao. Na concepo de aplicativos, no diferente. Temos de saber o que fazer, com o que,
quando e para qu. Isso Lgica de Programao.
Agora que voc compreende um pouco mais sobre Lgica de Programao, vamos iniciar a criao do nosso primeiro
aplicativo (App).
O primeiro passo para quem vai construir um aplicativo idealiz-lo, ou seja, visualizar mentalmente ou por meio de
rascunhos toda a interface grfi ca do seu App (como ele ser visto). Voc dever tambm estabelecer um uxo sobre o
funcionamento da aplicao, desde a abertura dele ao fechamento. Veremos na prtica como isso funciona.

14

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

2.1 - App Bateria_Eletronia


Primeiramente, devemos saber como funciona uma bateria eletrnica para, assim, imaginarmos
como ser o nosso aplicativo.
Fizemos um arquivo wireframe, como se fosse um rascunho do que ser nosso App. Veja na
imagem a seguir.

Fig. 2.1 - Wireframe do projeto

Nesse wireframe, podemos ver que teremos cinco botes, sendo eles Chimbal, Caixa, Tom1,
Prato e Bumbo. A ideia que, quando clicarmos nesses botes, eles emitam seu respectivo som.
Utilizaremos imagens e sons para esse nosso projeto. Todos os arquivos esto no link a seguir:
https://www.dropbox.com/sh/6xtd213p9vfh49y/
AAA0ooqL09h84dNfVHPOhrn_a?dl=0
Ao abrir o link, clique em Baixar. Guarde o local no qual o arquivo foi salvo, encontre-o em seu
computador, clique sobre o arquivo e descompacte o arquivo.
Caso no consiga acessar o link ou tenha difi culdades para baixar os arquivos, pea para seu
professor os arquivos solicitados.
Agora vamos abrir o App Inventor no computador e comear a criar.

2.2 - Criao do App passo a passo


Como visto no captulo anterior, para criamos um aplicativo, devemos iniciar um projeto no
App Inventor.
Acesse o link http://appinventor.mit.edu e clique em Create. Se voc tiver acessado
recentemente o App Inventor, ao acess-lo novamente, ele automaticamente j estar logado
em sua conta. Se o sistema pedir, entre com seus dados de acesso de sua conta Google.
Ao entrar no ambiente, clique no projeto criado anteriormente para ser levado interface de
produo. Caso no tenha criado um projeto, clique em New project e nomeie como Bateria_
Eletronica seu novo projeto.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

15

Fig. 2.2 - Nomeando o projeto

Agora, vamos prosseguir com o passo a passo da criao. Neste momento, atente-se apenas
a repetir os passos solicitados.
Vejamos nossa primeira tela de produo.

Fig. 2.3 - Ambiente de criao

Nosso primeiro passo ser estabelecer nosso layout (disposio dos objetos). Para isso,
faremos o seguinte;
Clique na seo Layout, localizada no Setor 3 do nosso ambiente de produo.
Em seguida, clique, arraste e solte, para o Setor 4 (visualizao), o componente
TableArrangement. Sua tela dever fi car como na imagem a seguir.

Fig. 2.4 - Componente TableArrangement

16

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Esse componente utilizado para estabelecer um layout (disposio dos elementos) no formato de tabela, para que
consigamos inserir nossos objetos iniciais.
Agora, com o componente selecionado (TableArrangement), v at o Setor 6 (Propriedades) e escreva, no
campo Columns (colunas), o nmero 2. No campo Rows (linhas), coloque tambm o valor 2. No campo Width
(largura), selecione o valor Fill parent (Preencher pai), que significa estabelecer para a largura o tamanho da largura
da tela. Clique em OK. Em seguida, configure o campo Height (altura) com o valor Automatic e clique em OK.
Sua tela dever ficar como a imagem a seguir.

Fig. 2.5 - Configurando as propriedades do TableArrangement

O prximo passo ser inserir os botes dentro do nosso TabletArrangement. Lembre-se de que ele possui duas
colunas e duas linhas, ou seja, ele funciona como um container capaz de abrigar quatro componentes.
Clique no Setor 3, na seo User interface (interface do usurio), e depois clique e arraste para dentro do
componente TableArrangement o componente Button (Boto). Faa isso novamente com mais trs botes.
Sua tela dever ficar como a imagem a seguir.

Fig. 2.6 - Componente Button inserido dentro do componente TableArrangement

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

17

Com o componente Button1 selecionado, v at o menu Propriedades e encontre o campo Text. Observe que,
nesse campo, j h uma informao inserida, o texto Text for Button1. Perceba que esse texto aparece sobre nosso
Button1 no Setor 4 (visualizao). Apague-o e, depois, v at o campo Image (imagem) e clique para alterar o valor.
Em seguida, clique em Upload file (enviar arquivo). Ao clicar, o sistema abrir um campo para upload de uma nova
imagem (media). Sua tela dever aparecer como na imagem a seguir.

Fig. 2.7 - Enviando uma imagem

Clique em Choose file (escolher arquivo), encontre o arquivo chimbal_active.png, que dever estar dentro da
pasta Bateria_Eletronica/imagens/, e depois clique em OK.
Sua tela dever aparecer como a figura a seguir.

Fig. 2.8 - Imagem enviada

Agora, vamos repetir os passos anteriores de insero de imagem para os botes Button2, Button3 e Button4.
Lembre-se de sempre selecionar o boto que voc deseja configurar.

18

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Aps confi gurar os botes, sua tela dever fi car como na fi gura a seguir:

Fig. 2.9 - Botes confi gurados com imagens

O prximo passo ser inserir nosso ltimo boto (Bumbo). Perceba que esse boto maior e
ocupar todo o restante de nossa tela. Dessa forma, nosso boto ser inserido fora do componente
TableArrangement.
No menu Palette (paleta), na seo User interface, clique, arraste e solte o componente
Button dentro do espao em branco que restou na nossa Screen1. Sua tela dever fi car como
a fi gura a seguir.

Fig. 2.10 - Novo component Button5 inserido

DESENVOLVIMENTO
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
- GOOGLE INVENTOR

19

Agora, vamos alterar as propriedades do componente Button5, como fizemos com os botes anteriores, voc ainda
se lembra? A primeira delas ser apagar o texto no campo Text; a segunda ser alterar a largura (Width) para o valor
Fit to parent e a terceira ser configurar o valor da altura (Height) para o valor Automatic.
Agora, vamos efetuar o upload correspondente ao componente do Button5 (Bumbo), cuja imagem ser bumbo_
active.png. Encontre o arquivo e configure-o, como feito nos botes anteriores.
Sua tela dever ficar como a figura a seguir.

Fig. 2.11 - Novo component Button5 configurado

Perfeito! Agora, vamos renomear nossos componentes para que tenhamos um maior e melhor controle sobre nossos
prximos passos.
Clique em cada um dos componentes localizados no Setor 5 (Components) e, em seguida, clique em Rename
(renomear). Note que uma nova tela aparecer, conforme a imagem a seguir.

Fig. 2.12 - Renomeando componentes

20

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Faa isso com todos os componentes e sua tela dever ficar como a figura a seguir.

Fig. 2.13 - Componentes renomeados

Nosso prximo passo ser configurar o background (imagem de fundo) do nosso componente Screen1.
No Setor 5, selecione o componente Screen1, que diz respeito a todo o contedo do nosso aplicativo. Agora, v at
o Setor 6 (propriedades) e altere o valor do campo BackgroundImage. Clique em Upload File... e encontre no seu
computador a imagem bg2.png . Note que o procedimento de insero o mesmo dos botes anteriores.
Aps inserir a imagem do background, sua tela dever ficar como na figura a seguir.

Fig. 2.14 - Configurando imagem de fundo do componente Screen1

timo! Nosso prximo passo ser inserir os componentes de som (Sound) em nosso projeto. Diferentemente do
componente Button, o componente Sound fica dentro da seo Media, no menu Palette. Aps encontr-lo, clique
sobre ele, segure-o e arraste-o at o Setor 4. Observe que o componente Sound no um objeto visual e, neste caso,
ele aparecer abaixo da nossa visualizao Screen1 como Non-visible components (componentes no visveis).

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

21

Aps inserido o componente Sound1, sua tela dever fi car como a fi gura a seguir.

Fig. 2.15 - Componente Sound1 inserido

Repita o passo anterior mais quatro vezes, totalizando a insero de cinco novos componentes
de som (Sound), sendo Sound2, Sound3, Sound4 e Sound5.
Sua tela dever fi car assim

Fig. 2.16 - Componentes de som inseridos

As propriedades dos componentes de som so apenas duas: MinimumInterval (intervalo


mnimo), que diz respeito ao intervalo de tempo (pausa) entre dois sons, e Source (fonte), no qual
iremos efetuar o upload dos nossos arquivos de udio (.mp3). No caso do MinimumInterval,
vamos confi gurar todos os nossos componentes de som com o intervalo 0 (zero).
Com o componente Sound1 selecionado, vamos clicar em Source, em propriedades, e depois
em Upload File... . Encontraremos em nosso computador o arquivo de udio hihat.mp3 e
faremos upload dele.
Em seguida, vamos fazer o mesmo procedimento com os demais componentes de som. Para
o componente Sound2, selecionaremos o arquivo snare.mp3; para o componente Sound3,
selecionaremos o arquivo tom1.mp3; para o componente Sound4, selecionaremos o arquivo
crash.mp3 e, fi nalmente, para o componente Sound5, selecionaremos o arquivo kick.mp3.
Todos os arquivos esto na pasta Bateria_Eletronica/sons/.

22

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Nosso prximo passo ser renomear os componentes de som. Proceda com os passos a seguir:




Renomeie
Renomeie
Renomeie
Renomeie
Renomeie

o
o
o
o
o

componente
componente
componente
componente
componente

Sound1
Sound2
Sound3
Sound4
Sound5

para
para
para
para
para

chimbal_sound;
caixa_sound;
tom1_sound;
prato_sound;
bumbo_sound.

Sua tela dever fi car como a fi gura a seguir.

Fig. 2.17 - Componentes de som renomeados

Aqui, termina a insero de contedo do nosso aplicativo. Agora, vamos para a to esperada programao.
Veja a seguir.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

23

2.3 - Programando nosso novo App


Como voc j sabe, temos dois tipos de ambientes no App Inventor: o ambiente Designer, no qual estivemos at
o momento, e o ambiente Blocks, que conheceremos agora.
no ambiente Blocks que faremos toda a programao do nosso App, ativando as funes que cada objeto ter
na aplicao.
Veja na fi gura a seguir o ambiente Blocks. Lembre-se de que, para ativ-lo, basta clicar no Setor 2, no boto Blocks.

Fig. 2.18 - Ambiente Blocks

Devemos, neste momento, nos atentarmos apenas a duas coisas: seo Built-in, cujas ramifi caes
so tipos de cdigos utilizados, e, mais abaixo, seo Screen1, que contm todos os componentes
inseridos anteriormente.
Lembre-se do que foi dito no incio deste material: sempre devemos saber o que vamos fazer e tambm com quem
ou com o que vamos fazer. No nosso caso, especifi camente, temos que fazer o seguinte:




Ao clicar (ou tocar com o dedo) no boto CHIMBAL, devemos ativar o Play do udio respectivo, no caso hihat.mp3;
Ao clicar (ou tocar com o dedo) no boto CAIXA, devemos ativar o Play do udio respectivo, no caso snare.mp3;
Ao clicar (ou tocar com o dedo) no boto TOM 1, devemos ativar o Play do udio respectivo, no caso tom1.mp3;
Ao clicar (ou tocar com o dedo) no boto PRATO, devemos ativar o Play do udio respectivo, no caso crash.mp3;
Ao clicar (ou tocar com o dedo) no boto BUMBO, devemos ativar o Play do udio respectivo, no caso kick.mp3.

Faremos isso da seguinte maneira: encontre e selecione no menu lateral o componente Chimbal, conforme
fi gura seguinte.

24

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.19 - Componente do tipo Button Chimbal selecionado

Note que o elemento selecionado um boto (Button). O sistema coloca frente dele um cone
que lembra um boto. Quando esse tipo de elemento selecionado, o sistema automaticamente
nos d diversas opes de ao (Functions ou funes). No caso, precisamos da funo de clique
(.click). Nesse caso, devemos selecionar essa opo (primeira da lista).
Sua tela dever fi car como a fi gura a seguir.

Fig. 2.20 - Componente Button Chimbal com aco de clique

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

25

Faa isso com os demais componentes do tipo Boto e sua tela dever fi car como a fi gura a seguir.

Fig. 2.21 - Componentes do tipo Button com funes de clique

As prximas aes que devemos incluir estaro conectadas s aes anteriores. Observe que os
blocos inseridos at o momento so como peas de um quebra-cabeas, cujo formato se encaixa
exatamente s funes que iremos inserir.
Agora, as aes ocorrero nos componentes de som, cujo cone lembra um alto-falante. Observe.
Clique no componente de som chimbal_sound e ver a tela a seguir.

Fig. 2.22 - Componente do tipo Sound Chimbal selecionado

26

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Note que, agora, as aes apresentadas pelo sistema so outras, pois se trata de um componente de udio. Precisamos
da ao de Play (.play) para tocarmos nosso udio. Essa ao aparece em segundo lugar na lista. Clique, segure e
arraste essa ao de Play at a ao de clique do componente em questo (Chimbal). Conecte, como a figura seguinte.

Fig. 2.23 - Ao de .play do componente Sound conectado ao .click

Muito bem! Agora, faa o mesmo com os outros componentes de udio, conectando as aes .play s aes .click
de cada um, respectivamente.
Sua tela dever ficar como na figura a seguir:

Fig. 2.24 - Ao de .play dos componentes Sound conectados ao .click

Com isso, finalizamos as aes referentes ao contedo do nosso App. Agora, estamos prontos para testar.
Veremos como instalar o emulador no prximo captulo e tambm como testar nosso aplicativo diretamente em um
smartphone Android.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

27

28

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 03
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Agora que j conseguimos criar nosso primeiro aplicativo, chegou


a to esperada hora de o testarmos para podermos confi rmar se
tudo est funcionando corretamente, que exatamente o que
faremos nesta aula.

3 - Diferentes modos de testar a Aplicao

O site do App Inventor nos traz trs opes de teste para as aplicaes criadas dentro do ambiente de produo.

Fig. 3.1 - Opes para testar a aplicao do App Inventor

A primeira opo, e tambm a mais recomendada pelo App Inventor, o teste via wi-fi diretamente em um
dispositivo Android. Essa opo a mais recomenda, pois nela voc ter a verdadeira impresso que um usurio
Android ter quando o aplicativo estiver pronto, ou seja, um teste muito fi el. Com o teste diretamente no dispositivo
Android, voc ter condies de avaliar se o projeto visual est uido e se o processamento da aplicao feita pelo
smartphone corresponde ao esperado. Sem contar que somente nessa opo voc ter condies reais de tocar na tela
do dispositivo.
Para poder efetuar esse teste, primeiramente ser necessrio possuir um dispositivo Android. Ser necessrio
tambm efetuar o download do aplicativo MIT AI2 Companion, facilmente encontrado no link a seguir, que o levar
para o ambiente de download da Google Play (acesse diretamente de um dispositivo Android):
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
Tambm ser possvel efetuar o download por meio do QRCODE a seguir ( necessrio possuir um leitor QRCODE
em seu smartphone):

Fig. 3.2 - Download do MIT AI2 Companion via QRCODE

30

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Aps instalar o aplicativo MIT AI2 Companion no smartphone, verifi que se seu computador,
no qual o App Inventor est sendo executado, e seu smartphone esto utilizando a mesma rede
wi-fi (requisito mnimo). Somente assim ser possvel efetuar esse teste.
Agora que tudo est confi gurado, vamos voltar ao ambiente de produo em que nosso projeto
est aberto. Com o aplicativo MIT AI2 Companion aberto em seu smartphone, vamos clicar
em CONECT, localizado no Setor 1 da interface de produo. Posteriormente, vamos clicar em
AI Companion.
Veja a fi gura a seguir.

Fig. 3.3 - Acessando teste wi-fi via AI Companion

Observe que, ao clicar no boto AI Companion, o sistema automaticamente vai gerar um


cdigo, que poder ser lido via QRCODE no aplicativo MIT AI2 Companion, em seu smartphone.
Voc poder digit-lo tambm dentro da aplicao.
Veja, na fi gura seguinte, a aplicao aberta no smartphone com a opo via digitao do
cdigo gerado.

Fig. 3.4 - Acessando o teste no smartphone via cdigo connect with code

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

31

Veja, a seguir, a tela com o leitor QRCODE ativado no smartphone.

Fig. 3.5 - Acessando o teste no smartphone via QRCODE scan QR code

Em ambas as situaes, o resultado o mesmo, como voc pode ver na fi gura a seguir.

Fig. 3.6 - Testando a aplicao diretamente no smartphone via wi-fi

Esse mesmo teste via smartphone pode ser feito via USB. Para isso, voc precisar de
um smartphone Android, um cabo USB conectado no computador no qual o App Inventor
estiver sendo executado (com os drivers reconhecidos pelo computador), e com o modo de
armazenamento ativo no celular. Para efetuar esse teste, clique em CONECT e, depois, em
USB. Aguarde o processamento e visualize a sua aplicao.
O teste voc confere na fi gura a seguir.

32

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Fig. 3.7 - Testando a aplicao diretamente no smartphone via USB

3.1 - Emulador
Podemos tambm testar a aplicao diretamente no computador com o uso do emulador fornecido pelo MIT. O
emulador se chama aiStarter e as informaes de instalao podem ser encontradas no link a seguir:
http://appinventor.mit.edu/explore/ai2/setup-emulator.html
Nesse link, voc encontrar informaes de instalao nas plataformas MacOs, Windows e Linux. Ser necessrio
efetuar o download do pacote de instalao do aiStarter (emulador). Caso o emulador no esteja instalado na sua
mquina ou caso voc sinta dificuldades para efetuar a instalao, pea ajuda e maiores informaes para seu Instrutor.
Depois de instalado o aiStarter, para efetuar o teste com o emulador, volte ao App Inventor, clique em CONECT
e depois em Emulador, como na figura a seguir.

Fig. 3.8 - Testando a aplicao com o emulador instalado

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

33

Se tudo estiver devidamente instalado, o App Inventor abrir uma mensagem de carregamento do emulador.

Fig. 3.9 - Emulador sendo iniciado

Posteriormente, voc ver o emulador na tela do seu computador, conforme as imagens a seguir.
Observao: o processo de carregamento do emulador pode levar de 1 a 2 minutos.

Fig. 3.10 - Emulador iniciando o Android

34

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Em seguida desbloqueie o Android (emulador) para que a aplicao possa ser inicializada.

Fig. 3.11 - Desbloqueio do Android no emulador

Pronto! O prximo passo testar nossa aplicao no emulador. Clique nos botes da bateria
eletrnica e verifi que se esto funcionando. Se tudo estiver certo, para cada clique voc ter um
som correspondente.

Fig. 3.12 - Aplicativo Android sendo testado no emulador

Muito bem! Chegamos ao fi nal da nossa primeira criao de um aplicativo utilizando o


App Inventor.
Voc acaba de criar um aplicativo simples e de conhecer um pouco mais dessa ferramenta
poderosa que o App Inventor. Vamos continuar nossa caminhada e conhecer muito mais sobre
desenvolvimento de aplicativos Android nos captulos a seguir.

DESENVOLVIMENTO
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
- GOOGLE INVENTOR

35

36

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 04
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Nesta aula, aprofundaremos ainda mais nossos estudos em


programao para a criao aplicativos mobile.

4 - Verificao de condies e variveis

Em programao, utilizamos em determinados momentos algumas estruturas de seleo e tambm fazemos


verifi caes. Estruturas de selees so algumas perguntas que podemos fazer para o nosso cdigo.
Veja um exemplo:
Vamos supor que precisamos fazer um suco de laranja e, por algum equvoco, compramos tambm, junto ao nosso
pacote de laranjas, uma lima da prsia (parecida com uma laranja).
Nesse caso, teremos que fazer algum teste em todas as frutas que compramos para saber se o que estamos
selecionando para o nosso suco uma laranja ou uma lima da prsia. O teste mais bvio ser provar as frutas. Assim,
identifi caremos a lima da prsia como a mais azeda e a excluiremos da produo do suco. Nesse nosso caso especfi co,
fi zemos a verifi cao na condio da fruta. Se for azeda, exclumos; do contrrio, selecionamos.
Assim tambm funciona em programao. Temos alguns elementos capazes de testar nossa ao (funes) de diversas
maneiras. Iremos citar algumas maneiras pertinentes ao nosso aprendizado inicial, mas antes falaremos um pouco sobre
as variveis.
As variveis so como caixas, na qual guardamos coisas e aes. Em programao, utilizamos o termo carregar
algo em determinada varivel.
Para entendermos como funciona a varivel, vamos a um exemplo simples e prtico.
Supondo que teremos que carregar alguns sacos de cimento em um percurso de 10 metros lineares utilizando uma
carriola (ferramenta de construo civil), teremos a quantidade de sacos de cimento como nossa varivel, ou seja, nosso
peso pode variar. Com base nessa varivel (peso), podemos determinar a velocidade com que levaremos os sacos de
cimento: quanto mais peso, menos velocidade em detrimento da difi culdade imposta.
bvio que, para melhor entendermos essas estruturas, teremos que praticar bastante.
A primeira condio, de que falamos anteriormente, a condio IF (se), uma maneira de, por meio da programao,
perguntar algo para alguma coisa (exemplo da fruta: SE fosse azeda, exclua; do contrrio, selecionava).
O contrrio da condio IF a condio ELSE (mais), que, apesar da traduo literal, serve para dar uma nova opo
para uma ao especfi ca. Se fssemos utilizar a condio ELSE no exemplo anterior (suco), faramos o seguinte: se a
fruta for azeda, faa uma limonada; do contrrio, faa o suco de laranja. Compreenderam? Vamos entender na prtica.

38

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Para isso, voltemos ao App Inventor, no ambiente Designer. Com nosso projeto Bateria_
Eletronica aberto, inclua um novo udio no projeto, utilizando o componente Sound, facilmente
encontrado dentro da seo Media. Veja a fi gura a seguir.

Fig.4.1 - Incluindo novo componente de som (Sound)

Renomeie o componente para wrong, como na fi gura a seguir.

Fig. 4.2 - Renomeando o componente de udio

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

39

Nas propriedades do componente, confi gure o MinimumInterval para o valor 0 (zero). No


campo Source, encontre o udio especfi co com o nome de wrong.mp3. O udio encontra-se
na pasta Sons, cujo download foi efetuado.

Fig. 4.3 - Enviando novo udio para o projeto

Agora que voc j enviou o udio wrong.mp3 para o novo componente de som, vamos
para o ambiente de programao Blocks. Sua tela dever aparecer como na imagem a seguir.

Fig. 4.4 - Ambiente de programao Blocks

40

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Note que, ao rolar os elementos localizados esquerda de sua tela, voc encontrar o componente de som wrong.
Clique sobre ele e selecione a ao wrong.play, como na imagem a seguir.

Fig. 4.5 - Ao .play no novo componente de udio

Ao incluir a ao de play no ambiente de programao, o App Inventor ir sinalizar como um erro, mas no se
preocupe: trata-se apenas de uma mensagem sinalizando a no existncia de pai para a ao especfica.
O udio wrong.mp3 refere-se ao som de Erro, como uma campainha. A ideia toc-lo quando nossa condio
for contrria condio atual. At o momento, no fizemos nenhuma verificao no nosso cdigo, apenas mandamos
o App Inventor tocar os udios quando os botes forem clicados.
Para efetuar uma verificao no cdigo, primeiramente vamos focar no clique do boto Chimbal. Criaremos duas
variveis, que sero Tocar e naoTocar. Existem regras de nomenclatura para a criao de variveis, dentre elas o
fato de no utilizar acentos e no haver espaos entre as palavras.
Para criar uma varivel, no menu Blocks, selecione a seo Variables. Clique em Inicialize global Name to, como
na imagem seguinte.

Fig. 4.6 - Criando uma varivel local

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

41

Perceba que o bloco da varivel pode ser renomeado no campo Name. Clique e renomeie sua varivel para o valor
Tocar. Aproveite para reorganizar seus blocos no ambiente de programao, como na imagem a seguir.

Fig. 4.7 - Renomeando a varivel local

Agora, falaremos para o nosso cdigo que a varivel local Tocar tem como valor a lgica True (verdadeiro). Para
isso, v at o menu lateral esquerdo, na seo Logic, e clique no valor True. Arraste e conecte a varivel Tocar, como
na imagem a seguir.

Fig. 4.8 - Valor True para a varivel Tocar

Agora, faremos a incluso de uma nova varivel com o nome de naoTocar, cujo valor contrrio varivel Tocar.
Ou seja, colocaremos o valor False. Veja na figura a seguir como seu cdigo dever ficar.

42

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.9 - Nova varivel naoTocar com valor False

Agora, vamos incluir a condio IF em nosso cdigo. Para isso, v at o menu lateral esquerdo,
na seo Control, e selecione a condio IF, como na fi gura a seguir.

Fig. 4.10 - Adicionando o bloco IF ao cdigo

Vamos, agora, utilizar um bloco de comparao matemtica em nosso cdigo que funciona assim:
elemento A pode ser igual, diferente, maior, menor, maior igual ou menor igual ao elemento B.
Para entender melhor, no menu lateral, na seo Math (matemtica), selecione o segundo bloco
que aparece na lista, como na fi gura a seguir. Aproveite para reorganizar seu cdigo, separando o
boto de clique do componente Chimbal mais acima da tela.

DESENVOLVIMENTO
DE APLICATIVOS
- GOOGLE INVENTOR
DESENVOLVIMENTO
DE APLICATIVOS
- GOOGLE INVENTOR

43

Fig. 4.11 - Adicionando a comparao matemtica

Agora, precisamos entender o processo de condicional no cdigo. Queremos verificar se as variveis criadas
so True ou False. Tudo isso ser feito dentro da nossa ao de clique, afinal nela que a verificao ser
feita. Observe que, no bloco IF, existem duas conexes, uma far a verificao e a outra conectar a ao que
ser feita. Nesse caso, desconecte a ao de .play do boto de clique e conecte-a no nosso IF, como na figura
a seguir.

Fig. 4.12 - Reconectando a ao de play condicional criada

O prximo passo arrastar nossa condicional para dentro do nosso clique, carregando a ao de .play que acabamos
de reconectar. Veja a figura a seguir.

44

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.13 - Conectando a condicional criada com o antigo clique

Depois disso, devemos conectar nossa comparao matemtica ao nosso IF, que agora est dentro da ao de clique.
Veja na figura a seguir como dever ficar sua programao.

Fig. 4.14 - Conectando a comparao matemtica ao nosso IF

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

45

Voc se lembra de que, anteriormente, havamos falado sobre a condicional ELSE, que seria
contrria condicional IF? Pois , vamos implement-la no cdigo. Para isso, note que, no bloco
IF, existe um cone em azul. Clique nele e selecione o valor ELSE. Arraste-o para a direita do
pop-up, como na imagem a seguir.

Fig. 4.15 - Implementando a condicional IF com ELSE

Note que sua condicional agora est composta por IF e ELSE.

Fig. 4.16 - Condicional IF com ELSE

46

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, arraste o bloco .play do componente wrong criado anteriormente para dentro da condicional ELSE e conecte,
como na fi gura a seguir.

Fig. 4.17 - Condiciona ELSE com ao de play

Para que nosso conjunto de aes funcione, precisamos completar nossa comparao matemtica. Podemos resolvla de diversas maneiras, por isso a programao to interessante, pois pura criatividade.
Vamos incluir mais dois novos blocos. O primeiro deles ser o bloco GET (obter), que est dentro da seo Variables,
localizada no menu lateral esquerdo da tela. Veja a imagem a seguir.

Fig. 4.18 - Adicionando o bloco SET na programao

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

47

O bloco GET faz referncia s variveis criadas, podendo ser Tocar ou naoTocar. Confi gure o bloco GET com a
varivel Tocar por meio do seletor existente.

Fig. 4.19 - Carregando a varivel Tocar dentro do bloco GET

Conecte o bloco GET, no primeiro valor que est vazio, no bloco de comparao matemtica, como na fi gura a seguir.

Fig. 4.20 - Conectando a varivel Tocar com GET comparao matemtica

Agora, inclua um novo bloco GET na programao. Desta vez, confi gure-a com a varivel naoTocar. Na
sequncia, conecte-a ao segundo campo da comparao matemtica. Sua tela dever fi car como a fi gura
a seguir.

48

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 4.21 - Conectando a varivel naoTocar com GET comparao matemtica

Observe que, nesse momento, j no haver mais nenhuma mensagem de erro na tela, pois
sua ao (funo) est correta. Porm, vamos analisar a nossa comparao matemtica imposta
na verifi cao IF.
Note que estamos querendo saber nessa comparao SE a varivel Tocar IGUAL ( = )
varivel naoTocar. Lembre-se de que, ao criarmos as variveis, determinamos valores para
elas, sendo que a varivel Tocar tem o valor True e a varivel naoTocar tem o valor False. Ou
seja, elas NO so iguais. Neste caso, nossa verifi cao IF no foi validada, sendo a condio
ELSE favorvel. Concluso: ao efetuar o teste no emulador ou no smartphone, note que o udio
wrong.mp3 ser tocado. Vamos testar? Proceda com os passos aprendidos anteriormente para
emular a sua aplicao. Caso tenha dvidas, pea ajuda para seu professor.

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

49

Viram como ficou? Muito bem! Agora vamos alterar a nossa comparao matemtica e verificar se a varivel Tocar
DIFERENTE ( ) da varivel naoTocar, alterando o seletor da comparao matemtica para o smbolo . Veja a
imagem a seguir.

Fig. 4.22 - Reconfigurando a comparao matemtica

Note que, ao configurar o valor da comparao matemtica para , voc fez a seguinte pergunta para a programao
da verificao IF: se a varivel Tocar for DIFERENTE ( ) da varivel naoTocar, toque o udio chimbal_sound.
Neste caso, a verificao foi favorvel ao IF. Sendo assim, note que, ao emular o aplicativo, o som Chimbal ser tocado
corretamente, e no mais o udio wrong.mp3.
Faa agora esse mesmo conjunto de verificaes e comparaes para os outros componentes de clique
em sua programao. Aproveite para alternar os valores das comparaes matemtica e, assim, efetuar
novos testes.
Sua tela poder ficar como na figura a seguir.

Fig. 4.23 - Condicionais e verificaes inseridas em todos os componentes de clique

Parabns! Voc acaba de se aprofundar ainda mais no mundo da programao e na criao de aplicativos mobile.
Pratique, tente novas aes e experincias para aprimorar ainda mais seu conhecimento.
50

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 05
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Hoje, vamos criar um novo aplicativo. Ser um cardpio mobile,


muito til nos dias de hoje e, ainda assim, muito pouco utilizado.
Veja essa oportunidade de aprender como uma possibilidade
de criar algo que, se bem lapidado, poder ser comercializado
futuramente e trazer valores monetrios tambm.

5 - Criando um cardpio mobile

Para criar nosso novo aplicativo, utilizaremos novas imagens, que podem ser baixadas no link a seguir:
https://www.dropbox.com/sh/3cd8znn2zqzigc3/AAC3MtJDn5OFS_r9I2O_t6Sqa?dl=0
Caso no consiga efetuar o download das imagens pelo link, pea para seu Instrutor os arquivos solicitados.
Vamos para o App Inventor iniciar um novo projeto. Nomeie o projeto como Cardapio_Mobile (sem espaos entre
as palavras e sem acentos).

Fig. 5.1 - Novo projeto - Cardpio Mobile

Nosso cardpio consiste em termos quatro telas (Screens) em um mesmo projeto. Para isso, clique no Setor 2,
no boto Add Screen. Repita o procedimento at possuirmos quatro telas, que sero: Screen1, Screen2, Screen3
e Screen4.
Selecione a Screen1, como na fi gura a seguir.

Fig. 5.2 - Seelcionando a Screen1

52

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

A Screen1 ser a nossa tela de apresentao (incio) e as demais telas sero nossos pratos
selecionados. Para o desenvolvimento dessa aplicao, vamos utilizar um importante componente
do App Inventor, o Listpicker, que capaz de gerar uma lista de objetos que podem ser
clicados e direcionar para novas telas ou novas aes.
Primeiramente, vamos confi gurar nossa tela inicial. Na Screen1, adicione como
backgroundImage (em propriedades) a imagem cheffmenu.png, como na fi gura a seguir.

Fig. 5.3 - Inserindo backgroundImage na Screen1

Sua Screen1 dever fi car como na fi gura a seguir. Lembre-se de confi gurar o valor de
BackgroundColor da Screen1 para None.

Fig. 5.4 - BackgroundImage da Screen1

O prximo passo ser incluir o componente Listpicker. Clique e arraste para a Screen1. Note
que o componente Listpicker se comporta como um boto ao ser inserido na tela. Confi gure-o
com width Fill Parent e height Automatic. Limpe o texto no campo Texto das propriedades do
Listpicker e insira uma imagem cujo nome cliqueaqui.png.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

53

Fig. 5.5 - Inserindo imagem no Listpicker

Sua tela dever fi car como na fi gura a seguir.

Fig. 5.6 - Imagem inserida no Listpicker

Lembre-se de editar o valor de BackgroundColor do Listpicker para None (nenhum).


Agora, vamos inserir as demais imagens nas prximas telas.

54

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Selecione a Screen2.

Fig. 5.7 - Selecionando a Screen2

Na Screen2, vamos inserir um boto e, posteriormente, uma imagem. Para o boto, renomeie o texto para Clique
para voltar. Para o width do boto, insira o valor Fill parent e, para o heigth, o valor Automatic.
Sua Screen2 dever ficar assim.

Fig. 5.8 - Inserindo um boto na Screen2

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

55

Acima do boto inserido, arraste o componente Image e configure-o com width Fill parent e height
800 pixels.

Fig. 5.9 - Inserindo Image na Screen2

Nas propriedades do componente Image, no campo Picture, insira a imagem exemplo_a.png.

Fig. 5.10 - Fazendo upload da imagem no componente Image

Sua tela dever ficar como na figura a seguir.

56

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 5.11 - Imagem inserida no componente Image

Observe que a rolagem da tela foi ativada, pois temos uma imagem com altura maior do que a
Screen. Role at o fi nal e note que nosso boto inserido anteriormente est no rodap da nossa tela.

Fig. 5.12 - Componentes Image e Button inseridos na Screen2

Agora, faa o mesmo com a Screen3 e com a Screen4, porm, para a Screen3, utilize a imagem
exemplo_b.png. Para a Screen4, utilize a imagem exemplo_c.png. Lembre-se de sempre
adicionar primeiro o componente Button na tela e, posteriormente, o componente Image acima
do Button.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

57

Agora que voc j inseriu as imagens e os componentes, vamos program-los. Selecione a Screen1 e o ambiente
Blocks referente a ela.
A primeira coisa que devemos fazer criar uma varivel. Vamos nome-la como listaCardapio.

Fig. 5.13 - Variavel listaCardapio criada na Screen1

Agora, vamos utilizar o bloco Make a list, localizado na seo Lists, e conect-lo com a nossa varivel listaCardapio.
Como teremos uma lista com trs exemplos, clique no cone azul do bloco Make a list e insira mais um item, como na
figura a seguir.

Fig. 5.14 - Conectando bloco Make a list com trs itens varivel listaCardapio

58

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, temos que inserir para cada item do bloco Make a list um bloco de texto. Edite cada bloco com os valores:
Exemplo A, Exemplo B e Exemplo C, respectivamente. Sua tela dever ficar como na figura a seguir.

Fig. 5.15 - Inserindo blocos de texto no bloco Make a list

Agora, j temos nossa varivel com os valores necessrios para ser utilizada no componente Listpicker.
Ser preciso carregar nossa varivel logo na inicializao do aplicativo, para que nossos seletores estejam ativos (lista
de opes).
Selecione o componente Screen1, clique no bloco When Screen1 inicialize e arraste-o, como na figura a seguir.

Fig. 5.16 - Inserindo o bloco When Screen1 inicialize

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

59

Esse bloco far o carregamento da seleo de objetos do Listpicker. Para isso, selecione o
componente Listpicker, arraste-o e conecte ao bloco Set Listpicker1 elements to o bloco
When Screen1 inicialize, como na fi gura a seguir.

Fig. 5.17 - Conectando o bloco Set Listpicker1 elements to ao When Screen1 inicialize

O prximo passo ser conectar a varivel listaCardpio ao Listpicker. Utilize o bloco GET,
como na fi gura a seguir.

Fig. 5.18 - Conectando a varivel ao bloco Set Listpicker1 elements to

60

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Neste momento, efetue um teste com o emulador ou com um dispositivo smartphone e verifi que se o funcionamento
est como nas fi guras a seguir.

Fig. 5.19 - Emulando o aplicativo

Fig. 5.20 - Listpicker no emulador

Note que, ao clicar na tela inicial, automaticamente voc levado para o Listpicker, como na imagem anterior.
Repare que, ao clicar em uma das opes, o App Inventor retorna para a tela inicial, pois ainda no implementamos
a ao aps o objeto selecionado.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

61

Agora, com o componente Listpicker selecionado, arraste para o ambiente Blocks o bloco When Listpicker1
.AfterPicking.

Fig. 5.21 - Selecionando o bloco When Listipker1.AfterPicking

Fig. 5.22 - Bloco When Listipker1 .AfterPicking inserido

62

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Esse bloco corresponde ao objeto clicado no Listpicker (objeto selecionado). Neste bloco,
faremos a seguinte verifi cao com IF/ELSE: se o texto referente ao clique retornar o valor
Exemplo A, vamos para a Screen2; se retornar o texto Exemplo B, vamos para a Screen3; se
retornar o texto Exemplo C, vamos para a Screen4. Primeiramente, vamos inserir uma condio
IF dentro do bloco When Listipker1.AfterPicking e dentro dela vamos implementar mais dois
ELSE/IF, como na fi gura a seguir.

Fig. 5.23 - Inserindo condicional ELSE/IF dentro do bloco When Listipker1 .AfterPicking

Precisaremos conectar em nossas condicionais IF e ELSE/IF um bloco de comparao de texto,


como na fi gura a seguir.

Fig. 5.24 - Inserindo comparao de texto aos nossos IF e ELSE

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

63

Sua tela dever fi car como na fi gura a seguir.

Fig. 5.25 - Comparao de texto inserida aos nossos IF e ELSE

Note que o seletor de comparao de texto dever fi car com o valor IGUAL ( = ).
Lembre-se de que queremos comparar o valor do texto recebido na seleo do Listpicker com
o valor inserido no campo posterior. Dessa forma, insira o bloco Listpicker.Selection em cada
campo inicial da nossa comparao de texto. Sua tela dever fi car como a fi gura a seguir.

Fig. 5.26 -Varivel listaCardapio inserida na comparao de texto

64

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, nos campos restantes, vamos inserir os valores de comparao, que so: Exemplo A, Exemplo B e Exemplo
C. Utilize o bloco Text. Sua tela dever fi car como a fi gura a seguir.

Fig. 5.27 - Comparando o texto da variavel recebida com o texto inserido

J temos nossas condicionais inseridas, porm ainda no inserimos as aes para cada uma delas. Agora simples:
vamos inserir o bloco Open another screen sreen name em cada uma das aes Then dos nossos IF e ELSE. Para
isso, localize o bloco Open another screen screen name, que est na seo Control, no menu lateral esquerdo.

Fig. 5.28 - Bloco Open another screen screen name

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

65

Insira os blocos Open another screen screen name para cada uma das aes Then dos nossos IF e ELSE. Sua
tela dever ficar como a figura a seguir.

Fig. 5.29 - Blocos Open another screen screen name inseridos

Agora, faremos a insero de mais trs blocos de texto, cada um contendo a informao referente tela que vamos
migrar aps a validao dos IF/ELSE. O primeiro deles ser o texto Screen2, o segundo o texto Screen3 e, por
ltimo, o texto Screen4. Conecte os blocos de texto criados s aes de troca de tela, como na figura a seguir.

Fig. 5.30 - Blocos de texto com os valores conectados

timo! Aqui terminamos a programao da nossa Screen1. Agora, vamos programar os cliques dos botes das telas
Screen2, Screen3 e Screen4.
Selecione a Screen2 no boto correspondente localizado no Setor 2. Agora, com o componente Button1 selecionado,
insira um bloco .click na tela. Posteriormente, voc dever inserir um bloco Open another screen screen name e
preench-lo com um bloco de texto cujo valor ser Screen1.

66

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Perceba que estamos programando o retorno para a Screen1 aps o clique no boto Clique
para voltar.
Sua tela dever fi car como a fi gura a seguir.

Fig. 5.31 - Clique do componente Button1 confi gurado

Repita esses passos nas telas Screen3 e Screen4, fazendo sempre a mesma referncia no
bloco de Text para o valor Screen1 (retornar para a Screen1).
Perfeito! Agora, podemos efetuar nosso teste fi nal no emulador ou smartphone e verifi car o
funcionamento do nosso novo aplicativo Cardpio Mobile.

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

67

68

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

AULA 06
DESENVOLVIMENTO DE APLICATIVOS
GOOGLE INVENTOR

Nesta aula, faremos o fechamento do curso de App Inventor.


muito importante que voc recorde os passos anteriores e os repita
diversas vezes para a fi xao do contedo.

6 - Activity Starter, TinyDB e Clock

Faremos agora um novo e ltimo projeto. Neste projeto, voc conhecer trs novos componentes non-visibles
(invisveis) na interface Designer, porm so componentes muito importantes e de enorme utilidade em projetos que
necessitam de atividades nativas do sistema operacional Android, bem como em automao de projetos.

6.1 - Novos componentes


O Activity Starter um componente responsvel por integrar aes nativas do Android (do sistema operacional)
com as aes do usurio.
O componente TinyDB o banco de dados da aplicao. Ele capaz de indexar informaes dentro da aplicao para
que ela consuma os dados salvos. Os dados so salvos com chaves (tags), dessa forma possvel consumir dados de
diversas chaves em determinadas situaes.
O componente Clock responsvel pela automao da aplicao. a persistncia automatizada, podendo ser utilizado
como uma espcie de timer para determinadas aes dentro da aplicao.

6.2 - Projeto final


Nosso projeto fi nal tem como objetivo consumir dados inseridos na aplicao, gravar automaticamente os dados
inseridos e acessar uma funo nativa do sistema operacional. Faremos um App de pesquisa nas redes sociais. Teremos
auxlio de um componente que estamos vendo pela primeira vez, cujo nome TextBox, que possibilita a chamada
(utilizao) do teclado virtual (funo nativa) na insero de texto.
Neste novo desenvolvimento, voc utilizar novas imagens, que podem ser baixados no link a seguir:
https://www.dropbox.com/sh/66yvxt8eg6oeva8/AADVb6ZXLTwUo-8AWVsAtIt6a?dl=0
Se no for possvel acessar o link, pea para o seu educador disponibilizar os arquivos.
Primeiramente, inicie um novo projeto com o nome Search_Social.

70

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 6.1 - Novo projeto Search Social

O prximo passo ser inserimos, com o auxlio do menu lateral, esquerda da interface de
produo do App Inventor, o componente TableArrangement. Vamos confi gur-lo com duas
colunas e duas linhas. Confi gure o width com o valor Fill parent e o height com valor Automatic,
como na imagem a seguir.

Fig. 6.2 - TableArrangement

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

71

Faremos a insero de quatro botes dentro do TableArrangement, respeitando as


disposies impostas de duas colunas e duas linhas. Confi gure os botes com o width no
tamanho de 160 pixels e o height com 160 pixels tambm. Lembre-se de remover os textospadro dos botes inseridos. Veja a seguir.

Fig. 6.3 - Botes inseridos

Agora, vamos inserir as respectivas imagens referentes aos botes. Fique vontade para
posicion-las. Veja a seguir.

Fig. 6.4 - Imagens dos botes inseridas

72

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

Agora, vamos inserir o componente TextBox acima do nosso TableArrangement. Para as configuraes desse
componente, insira, no campo Hint, o texto search here. O width dever estar com Fill parent e o height com 100
pixels. Para o BackgroundColor, configure a cor Light Gray. Perceba que temos um checkbox com os dizeres
Multiline (multilinhas). Clique e selecione essa opo. Sua tela dever ficar como a imagem a seguir.

Fig. 6.5 - TextBox inserido e configurado

Agora, vamos inserir os componentes non-visibles. Faremos, primeiramente, a insero do componente Activity
Starter, facilmente encontrado no menu lateral da seo Conectivity. Arraste-o para a interface de produo. Nas
configuraes, preencheremos apenas o campo referente seo Action com o valor android.intent.action.VIEW
(escrito exatamente dessa forma). Veja como sua tela dever ficar na figura a seguir.

Fig. 6.6 - Activity Starter inserido

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

73

Agora, faremos a insero do componente TinyDB (banco de dados), que ser encontrado na seo Storage.
Arraste-o para a interface de produo. Nesse componente, no ser necessrio efetuar nenhuma configurao.

Fig. 6.7 - TinyDB inserido

O prximo componente a ser inserido ser o Clock. Ele encontrado na seo Storage. Arraste-o para a interface
de produo e mantenha as configuraes-padro do componente.

Fig. 6.8 - Componente Clock inserido

Termina aqui nosso trabalho na interface Designer. Vamos para a interface Blocks para editarmos
nossa programao.

74

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Com a interface de Blocks aberta, devemos primeiramente interpretar as funes .click que
teremos. Sero quatro aes, uma para cada boto inserido - Button1, Button2, Button3 e
Button4. Insira as aes, conforme a fi gura a seguir.

Fig. 6.9 - Aes de clique inseridas

Agora, faremos a insero do componente Set ActivityStarter1.DataUri to. Faremos a


insero desse componente em todas as aes de clique inseridas. Note que essa ao est ligada
ao componente ActivityStarter, ou seja, para inserir as aes, primeiramente devemos clicar
nesse componente. Sua tela dever fi car como a fi gura a seguir.

Fig. 6.10 - Blocos Set conectados aos cliques

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

75

O prximo passo ser inserir um bloco do tipo Text com a ao Join (juntar) em cada um dos componentes Set
recm-inseridos. Sua tela dever ficar como a figura a seguir.

Fig. 6.11 - Blocos Join conectados aos blocos Set

Faremos a insero de um bloco de texto editvel para cada primeira conexo dos blocos Join inseridos anteriormente.
Veja como dever ficar.

Fig. 6.12 - Blocos Text conectados aos blocos Join

76

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, no conector que sobrou do bloco Join, vamos inserir o bloco TextBox1.text em cada um deles, como na
figura a seguir.

Fig. 6.13 - Blocos TextBox1 conectados aos blocos Join

Perceba que Button1 faz referncia ao cone da rede social Facebook. J o Button2 faz referncia ao Twitter e
os Button3 e Button4 fazem referncia ao YouTube e ao Google Plus, respectivamente. Agora, vamos editar os
blocos Text inseridos, sendo que cada um ter um texto diferente. Veja a seguir os textos que devem ser inseridos em
cada boto.



Button1
Button2
Button3
Button4

https://www.facebook.com/search.php?q=
https://twitter.com/search?q=
https://www.youtube.com/results?search_query=
https://plus.google.com/s/

Veja a seguir como deve ficar a estrutura.

Fig. 6.14 - Textos inseridos nos blocos Text

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

77

Acabamos de descrever um link para cada rede social clicada. Agora, faremos a insero
da programao do nosso banco de dados. Utilizaremos o bloco Call TinyDB1.StoreValue
conectado ao nosso bloco ActivityStarter1. Para encontrar esse bloco, lembre-se de manter
selecionado o componente TinyDB1. Veja a fi gura a seguir.

Fig. 6.15 - Bloco Call TinyDB1.StoreValue conectado

Como voc pode ver, esse bloco possui duas conexes e elas so obrigatrias. Faremos a
insero de um bloco Text na conexo Value e novamente vamos inserir o bloco TextBox1,
desta vez nas conexes valueToStore. Insira, no bloco Text, o texto Search (procurar).

Fig. 6.16 - Blocos Text e TextBox1 conectados ao .StoreValue do banco de dados

78

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, faremos a insero do bloco responsvel por inicializar a ao do ActivityStarter. Esse bloco se chama Call
ActivityStarter.StartActivity. Vamos conect-lo logo abaixo do bloco Call TinyDB1.StoreValue. Lembre-se de
selecionar o componente ActivityStarter1.

Fig. 6.17 - Bloco .StartActivity conectado

Aqui terminamos nossa funo de clique, mandando e recebendo informaes do banco de dados, porm ainda temos
que confi gurar outras aes ligadas inicializao do nosso App e tambm ligadas nossa persistncia automatizada,
responsvel por gravas nossos dados no banco automaticamente, de 1 em 1 segundo.
Selecione a Screen1 e, em seguida, encontre o bloco When Screen1 initialize. Coloque-o no ambiente Blocks.
Agora, conecte o bloco Set TextBox1.Text ao bloco inserido anteriormente. Voc dever ter a seguinte tela.

Fig. 6.18 - Set TextBox1.Text conectado

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

79

Conecte agora o bloco Call TinyDB1.GetValue ao bloco inserido anteriormente.

Fig. 6.19 - Get TinyDB1 .GetValue conectado

Note que esse bloco traz, j conectado com ele, um bloco Text. Vamos inserir mais um e vamos edit-los com os
textos Search e Search here, respectivamente.

Fig. 6.20 - Get TinyDB1 .GetValue com tags confi guradas

80

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Agora, vamos programar o componente Clock1 com a ao .Timer. Selecione o componente


Clock1 e, em seguida, o bloco When Clock1.Timer.

Fig. 6.21 - Inicializando o componente Clock1

Lembre-se de que esse componente responsvel pelo nosso salvamento automtico, ou seja,
ele far o salvamento automtico das nossas informaes no banco de dados. Conecte a esse
componente o bloco Call TinyDB1.StoreValue.

Fig. 6.22 - Call TyniDB1 .StoreValue conectado

DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANADO 2013
- GOOGLE INVENTOR

81

Na sequncia, vamos conectar um bloco de Text, cujo texto ser novamente Search. Logo
abaixo, na conexo ValueToStore, o bloco TextBox1.Text, como na fi gura a seguir.

Fig. 6.23 - Blocos Text e TextBox1 .Text conectados

Com isso, fi nalizamos nossa programao. Agora, devemos testar nossa aplicao e ver o que
ela capaz de fazer.

Fig. 6.24 - Testando a aplicao

Se voc seguiu corretamente os passos, sua aplicao dever agir da seguinte forma:
Ao inserir uma palavra simples ou composta no componente TextBox1 e, posteriormente, clicar
em um dos botes, automaticamente sua aplicao acionar um recurso nativo do seu smartphone,
o browser de navegao. Ao retornar do browser para o aplicativo, note que a pesquisa inserida
anteriormente est mantida no TextBox1, pois temos o componente Clock1, que salva nossas
informaes automaticamente em nosso banco TinyDB1. Faa diversas pesquisas em seu novo
aplicativo para compreender melhor seu funcionamento.

82

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

6.3 - Concluso
Aqui termina nosso curso de desenvolvimento de aplicativos com o App Inventor. Note que voc aprendeu diversos
recursos e poder us-los de maneiras distintas. Navegue sempre pelo site do App Inventor para acompanhar tutoriais
e informaes atualizadas sobre essa valiosa ferramenta de criao.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

83

84

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Bibliograa

Jlio Battisti MCSE, MCSA, MCDBAeE MCSD, Windows Server 2003 Curso Completo
Sites:
Disponvel em: <http://technet.microsoft.com/pt-br/library/jj648426.aspx#WDS_ InstallingWindowsDeploymentServices>. Acesso em 16 de Out. de 2014.
Disponvel em: <http://juliobattisti.com.br/tutoriais/ricardogerhard/activedirectory002.
asp>. Acesso em: 16 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/library/hh831484> Acesso em: 16 de
Out. de 2014.
Disponvel em: <http://www.linhadecodigo.com.br/artigo/2422/o-que-e-o-activedirectory.aspx> Acesso em: 18 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/dd723678(v=ws.10).
aspx> Acesso em: 19 de Out. de 2014.
Disponvel
em:
<http://technet.microsoft.com/pt-br/library/hh831440.aspx
Applocker> Acesso em: 19 de Out. de 2014.

Disponvel em: <http://technet.microsoft.com/pt-br/library/cc753109(v=ws.10).


aspx> Acesso em: 19 de Out. de 2014.
Disponvel em: <https://www.microsoft.com/learning/pt-br/mcsa-certifi cation.aspx>
Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/hh831531.aspx - hyper-v
Disponvel em: <http://www.tecmundo.com.br/web/1624-o-que-e-virtualizacao-.
htm> Acesso em: 19 de Out. de 2014.
Disponvel em: <http://pt.wikipedia.org/wiki/Virtualiza%C3%A7%C3%A3o> Acesso
em: 19 de Out. de 2014.
Disponvel em: <http://www.profi ssionaisti.com.br/2014/07/o-que-e-virtualizacao/>
Acesso em: 19 de Out. de 2014.
Disponvel em: <http://www.infowester.com/virtualizacao.php> Acesso em: 19 de
Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/magazine/2009.gr.map.aspx>
Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/hh831656.aspx - Storage
Migration> Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/jj860433.aspx - Migrao
de vm e armazenamento> Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/jj134230.aspx - VLAN>
Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/hh144972.aspx - VDI e MED-V>
Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/gg610625.aspx - Nuvem
privada> Acesso em: 19 de Out. de 2014.
Disponvel em: <http://technet.microsoft.com/pt-br/library/jj860425.aspx - Nuvem
privada> Acesso em: 19 de Out. de 2014.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

85

Disponvel em: <http://pt.wikipedia.org/wiki/Computa%C3%A7%C3%A3o_em_nuvem> Acesso em: 19 de Out. de


2014.
Disponvel em: <http://www.microsoft.com/pt-BR/download/details.aspx?id=30652 - Windows ADK> Acesso em: 19
de Out. de 2014.
Disponvel em: <http://www.microsoft.com/en-us/download/details.aspx?id=40843 - System Center Virtual Machine
Manager> Acesso em: 19 de Out. de 2014.

Imagens:
A responsabilidade pelos direitos autorais das imagens desta obra do autor.

86

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR