Livro_App-Inventor_MC

Prévia do material em texto

3DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
AULA 01 .......................................................................................................5
1 - Introdução ao App Inventor ..............................................................................6
1.1 - Primeiros Passos .............................................................................................6
1.2 - Interface de produção ....................................................................................9
AULA 02 .....................................................................................................13
2 - Nosso primeiro App ..........................................................................................14
2.1 - App “Bateria_Eletronica” ..............................................................................15
2.2 - Criação do App passo a passo .......................................................................15
2.3 - Programando nosso novo App ......................................................................24
AULA 03 .....................................................................................................29
3 - Diferentes modos de testar a Aplicação...........................................................30
3.1 - Emulador .......................................................................................................33
AULA 04 .....................................................................................................37
4 - Verifi cação de condições e variáveis ................................................................38
AULA 05 .....................................................................................................51
5 - Criando um cardápio mobile ............................................................................52
AULA 06 .....................................................................................................69
6 - Activity Starter, TinyDB e Clock .......................................................................70
6.1 - Novos componentes ......................................................................................70
6.2 - Projeto fi nal ..................................................................................................70
Bibliografi a ................................................................................................85
Imagens ................................................................................................................86
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR4 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS
 GOOGLE INVENTOR
Olá! Seja bem-vindo ao curso de Desenvolvimento de aplicativos 
com App Inventor! Neste capítulo, você verá todo o funcionamento 
da interface on-line do App Inventor para desenvolvimento de 
aplicativos em plataforma Android. Conhecerá, também, como é 
intuitivo o aprendizado desta poderosa ferramenta Open Source 
(código aberto) desenvolvida pelo MIT (Massachusetts Institute 
of Technology).
 GOOGLE INVENTOR
AULA 01
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR6 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
1 - Introdução 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ê não 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 criação de aplicativos, porém todo o processo de criação dos 
aplicativos será feito via browser (Ex.: Chrome – Preferencialmente –, Firefox etc.). Esse web app (software online) 
deve ser acessado no seguinte endereço: 
http://appinventor.mit.edu/explore/.
Fig. 1.1 - Página inicial do site do App Inventor
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 7
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 máquina para rodar a 
aplicação. Tudo isso acessando o menu verde Start.
Ao clicar em Create, no canto superior direito da tela, automaticamente você será levado para 
a página de login do Google. Insira seus dados de login e senha e aceite os termos de utilização 
e integração a contas Google do App Inventor.
 
Fig. 1.2 - Integração da conta Google com o App Inventor
 
Fig. 1.3 - Termos de serviço do App Inventor
Após aceitar os termos de serviço, 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 questionário. Faça isso, se quiser. Se optar 
por fazer, clique em Take Survey Now. Se quiser responder posteriormente, clique em Take 
Survey Later. Se deseja não responder e não receber novamente esse convite, clique em Never 
Take Survey.
Fig. 1.4 - Convite para responder a um questionário
A próxima tela será uma mensagem de boas-vindas.
EXCEL AVANÇADO 20138 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 1.5 - Tela de Início
Clique no canto superior esquerdo no botão 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.
Observação: para nomear um projeto, você deverá seguir as regras de nomenclatura do 
App Inventor, e não poderá utilizar acentos ou espaços 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 produção (Designer) do App Inventor e, posteriormente, 
falaremos sobre todas as possibilidades que ela nos traz.
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 9DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 1.7 - Interface de produção
1.2 - Interface de produção
A interface de produção (Designer) do App Inventor é dividida em sete setores cujas funções são distintas. Veja 
a seguir.
Fig. 1.8 - Setores de produção na Interface do App Inventor
Chamaremos de setores os menus da interface de produção (Designer) para que você grave 
na memória as funções 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 visualização), “compilamos” um projeto (salvar o projeto 
como uma aplicação Android do tipo .apk) e também que encontramos nosso menu Help (Ajuda) para suprir nossas 
dúvidas;
•	 No Setor 2 (rosa), encontramos o nome do nosso projeto à esquerda e também os botões de gerenciamento 
de telas (visualizações) Screen1. Uma mesma aplicação poderá ter diversas telas e será nesse botão que faremos a 
migração entre elas. A seguir, temos o botão Add Screen para incluirmos no projeto uma nova tela e, posteriormente, 
o botão Remove Screen para remover.
No canto superior esquerdo, temos dois importantes botões do App Inventor: Designer e Blocks.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR10
O botão Designer ativa a interface inicial (visual) do projeto, cujos setores estamos enumerando agora. O botão 
Blocks (blocos) ativa o nosso ambiente de programação por de blocos, cuja tela você vê a seguir.
Fig. 1.9 - Ambiente de programação - Blocks
O ambiente é bem parecido com nossa interface de produção (Designer), porém será aqui que faremos toda a 
programação dos nossos componentes da aplicação.
Explicaremos, posteriormente, esse ambiente (Blocks), quando já estivermos entendendo um pouco mais sobre 
lógicade programação.
Voltemos ao ambiente Designer (interface de produção).
•	 O Setor 3 (azul escuro) é certamente o cérebro do nosso projeto. Nele se encontram todas as possibilidades 
do projeto, como utilizar um botão, uma imagem, um som etc.
•	 Para a visualização 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 (lilás), vemos os componentes inseridos no projeto e também podemos renomeá-los para nossa 
melhor compreensão.
•	 No Setor 6 (verde escuro), encontramos as propriedades do componente selecionado, ou seja, se estivermos 
com o componente Button selecionado na tela de visualização (Setor 4), automaticamente veremos as propriedades 
desse componente e poderemos alterá-las.
•	 No Setor 7 (azul claro), gerenciamos nossas mídias. É nele que fazemos o upload (envio) de arquivos de 
imagens (formatos .png e .jpg), sons (somente arquivos .mp3) e vídeos (somente arquivos .mp4).
Agora	que	você	conhece	um	pouco	da	 interface	gráfica,	vamos	aprender	na	prática	como	utilizá-la.	Dessa	 forma,	
construiremos nossa primeira aplicação.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 11DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Veja no próximo capítulo como fazer.
Fig. 1.10 - Tela de boas-vindas
A seguir, veja a tela inicial contendo projetos já feitos e o acesso à criação de novos projetos. Em 
seu primeiro acesso, obviamente, sua lista estará vazia, mas esse é só o começo!
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
12 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS
 GOOGLE INVENTOR
Nesta segunda aula, daremos início ao nosso tão esperado 
primeiro aplicativo! 
 GOOGLE INVENTOR
AULA 02
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR14 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
2 - Nosso primeiro App
Antes de iniciarmos nossa criação, vamos falar um pouco sobre Lógica de Programação. Muitos têm pavor da palavra 
programação, como se ela quisesse dizer “Bicho de Sete Cabeças”. Entretanto, isso não é verdade. 
Prova disso é que todos nós somos programadores natos. Sim, você ouviu bem! Desde muito pequenos, aprendemos 
a programar tudo o que fazemos, em nosso cérebro, seja quando estamos aprendendo a caminhar ou dar nossos 
primeiros passos. Ou seja, usamos a programação mesmo em uma tarefa simples que fazemos todos os dias, como 
escovar os dentes.
Veja	como	funciona	nossa	programação	diária	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 são 
nossos componentes. Depois, temos que saber o que fazer com eles, ou seja, quais são nossas ações. Em seguida, 
fazemos da seguinte forma:
1. Pegamos a escova de dente;
2. Abrimos a torneira para sair a água;
3. Molhamos a escova de dente;
4. Fechamos torneira;
5. Pegamos a pasta de dente;
6. Colocamos pasta de dente na escova;
7. Fechamos o tubo da pasta de dente;
8. Guardamos o tubo da pasta de dente;
9. Escovamos os dentes;
10. Abrimos novamente a torneira;
11. Enxaguamos a boca e lavamos a escova;
12. Fechamos a torneira;
13. Guardamos a escova de dentes;
14. Pegamos uma toalha;
15. Enxugamos o rosto e as mãos na toalha;
16. Penduramos a toalha.
Descrita dessa forma, uma simples atividade como a de escovar os dentes demonstra o quanto nossa vida depende 
dessa lógica de programação. Na concepção de aplicativos, não é diferente. Temos de saber o que fazer, com o que, 
quando e para quê. Isso é Lógica de Programação.
Agora que você compreende um pouco mais sobre Lógica de Programação, vamos iniciar a criação 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	gráfi	ca	do	seu	App	(como	ele	será	visto).	Você	deverá	também	estabelecer	um	fl	uxo	sobre	o	
funcionamento da aplicação, desde a abertura dele ao fechamento. Veremos na prática como isso funciona.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 15
2.1 - App “Bateria_Eletronia”
Primeiramente, devemos saber como funciona uma bateria eletrônica 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 botões, sendo eles Chimbal, Caixa, Tom1, 
Prato e Bumbo. A ideia é que, quando clicarmos nesses botões, eles emitam seu respectivo som. 
Utilizaremos imagens e sons para esse nosso projeto. Todos os arquivos estão no link a seguir:
h t t p s : / / w w w . d r o p b o x . c o m / s h / 6 x t d 2 1 3 p 9 v f h 4 9 y /
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 não consiga acessar o link	ou	tenha	difi	culdades	para	baixar	os	arquivos,	peça	para	seu	
professor os arquivos solicitados.
Agora vamos abrir o App Inventor no computador e começar a criar.
2.2 - Criação do App passo a passo
Como visto no capítulo 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 
produção. Caso não tenha criado um projeto, clique em New project e nomeie como “Bateria_
Eletronica” seu novo projeto.
 
EXCEL AVANÇADO 201316 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 2.2 - Nomeando o projeto
Agora, vamos prosseguir com o passo a passo da criação. Neste momento, atente-se apenas 
a repetir os passos solicitados.
Vejamos nossa primeira tela de produção.
 
Fig. 2.3 - Ambiente de criação
Nosso primeiro passo será estabelecer nosso layout (disposição dos objetos). Para isso, 
faremos o seguinte;
Clique na seção Layout, localizada no Setor 3 do nosso ambiente de produção.
Em seguida, clique, arraste e solte, para o Setor 4 (visualização), o componente 
TableArrangement.	Sua	tela	deverá	fi	car	como	na	imagem	a	seguir.
Fig. 2.4 - Componente TableArrangement
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 17DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Esse componente é utilizado para estabelecer um layout (disposição 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 número 2. No campo Rows (linhas), coloque também 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 próximo passo será inserir os botões 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 seção User interface (interface do usuário), e depois clique e arraste para dentro do 
componente TableArrangement o componente Button (Botão). Faça isso novamente com mais três botões.
Sua	tela	deverá	ficar	como	a	imagema	seguir.
 
Fig. 2.6 - Componente Button inserido dentro do componente TableArrangement
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR18
Com o componente Button1 selecionado, vá até o menu Propriedades e encontre o campo Text. Observe que, 
nesse campo, já há uma informação inserida, o texto “Text for Button1”. Perceba que esse texto aparece sobre nosso 
Button1 no Setor 4 (visualização). 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 inserção de imagem para os botões Button2, Button3 e Button4. 
Lembre-se	de	sempre	selecionar	o	botão	que	você	deseja	configurar.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 19DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Após	confi	gurar	os	botões,	sua	tela	deverá	fi	car	como	na	fi	gura	a	seguir:
 
Fig.	2.9	-	Botões	confi	gurados	com	imagens
O próximo passo será inserir nosso último botão (Bumbo). Perceba que esse botão é maior e 
ocupará todo o restante de nossa tela. Dessa forma, nosso botão será inserido fora do componente 
TableArrangement.
No menu Palette (paleta), na seção User interface, clique, arraste e solte o componente 
Button dentro do espaço 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 DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR20
Agora, vamos alterar as propriedades do componente Button5,	como	fizemos	com	os	botões	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	botões	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 
próximos 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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 21
Faça	isso	com	todos	os	componentes	e	sua	tela	deverá	ficar	como	a	figura	a	seguir.
Fig. 2.13 - Componentes renomeados
Nosso	próximo	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 conteúdo 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 inserção é o mesmo dos botões anteriores.
Após 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 próximo passo será inserir os componentes de som (Sound) em nosso projeto. Diferentemente do 
componente Button, o componente Sound	fica	dentro	da	seção	Media, no menu Palette. Após encontrá-lo, clique 
sobre ele, segure-o e arraste-o até o Setor 4. Observe que o componente Sound não é um objeto visual e, neste caso, 
ele aparecerá abaixo da nossa visualização Screen1 como Non-visible components (componentes não visíveis).
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR22
Após 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 inserção 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 são apenas duas: MinimumInterval (intervalo 
mínimo), 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 estão na pasta Bateria_Eletronica/sons/.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 23
Nosso próximo passo será renomear os componentes de som. Proceda com os passos a seguir:
•	 Renomeie o componente Sound1 para chimbal_sound;
•	 Renomeie o componente Sound2 para caixa_sound; 
•	 Renomeie o componente Sound3 para tom1_sound;
•	 Renomeie o componente Sound4 para prato_sound;
•	 Renomeie o componente Sound5 para bumbo_sound.
Sua	tela	deverá	fi	car	como	a	fi	gura	a	seguir.
Fig. 2.17 - Componentes de som renomeados
Aqui, termina a inserção de conteúdo do nosso aplicativo. Agora, vamos para a tão esperada programação. 
Veja a seguir.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR24 EXCEL AVANÇADO 2013DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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 programação do nosso App, ativando as funções que cada objeto terá 
na aplicação.
Veja	na	fi	gura	a	seguir	o	ambiente	Blocks. Lembre-se de que, para ativá-lo, basta clicar no Setor 2, no botão Blocks.
Fig. 2.18 - Ambiente Blocks
Devemos, neste momento, nos atentarmos apenas a duas coisas: à seção Built-in,	 cujas	 ramifi	cações	
são tipos de códigos utilizados, e, mais abaixo, à seção Screen1, que contém todos os componentes 
inseridos anteriormente. 
Lembre-se do que foi dito no início deste material: sempre devemos saber o que vamos fazer e também 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 botão CHIMBAL, devemos ativar o Play do áudio respectivo, no caso “hihat.mp3”;
•	 Ao clicar (ou tocar com o dedo) no botão CAIXA, devemos ativar o Play do áudio respectivo, no caso “snare.mp3”; 
•	 Ao clicar (ou tocar com o dedo) no botão TOM 1, devemos ativar o Play do áudio respectivo, no caso “tom1.mp3”;
•	 Ao clicar (ou tocar com o dedo) no botão PRATO, devemos ativar o Play do áudio respectivo, no caso “crash.mp3”; 
•	 Ao clicar (ou tocar com o dedo) no botão 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.
 
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013 25DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 2.19 - Componente do tipo Button Chimbal selecionado
Note que o elemento selecionado é um botão (Button). O sistema coloca à frente dele um ícone 
que lembra um botão. Quando esse tipo de elemento é selecionado, o sistema automaticamente 
nos dá diversas opções de ação (Functions ou funções). No caso, precisamos da função de clique 
(.click). Nesse caso, devemos selecionar essa opção (primeira da lista).
Sua	tela	deverá	fi	car	como	a	fi	gura	a	seguir.
 
Fig. 2.20 - Componente Button Chimbal com acão de clique
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR26
Faça	isso	com	os	demais	componentes	do	tipo	“Botão”	e	sua	tela	deverá	fi	car	como	a	fi	gura	a	seguir.
Fig. 2.21 - Componentes do tipo Button com funções de clique
As próximas ações que devemos incluir estarão conectadas às ações anteriores. Observe que os 
blocos inseridos até o momento são como peças de um quebra-cabeças, cujo formato se encaixa 
exatamente às funções que iremos inserir.
Agora, as ações ocorrerão 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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 27DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Note que, agora, as ações apresentadas pelo sistema são outras, pois se trata de um componente de áudio. Precisamos 
da ação de Play (.play) para tocarmos nosso áudio. Essa ação aparece em segundo lugar na lista. Clique, segure e 
arraste essa ação de Play até a ação de clique do componente em questão (Chimbal).	Conecte,	como	a	figura	seguinte.
 
Fig. 2.23 - Ação de .play do componente Sound conectado à ação .click
Muito bem! Agora, faça o mesmo com os outros componentes de áudio, conectando as ações .play às ações .click 
de cada um, respectivamente.
Sua	tela	deverá	ficar	como	na	figura	a	seguir:
Fig. 2.24 - Ação de .play dos componentes Sound conectados à ação .click
Com	 isso,	 finalizamos	 as	 ações	 referentes	 ao	 conteúdo	 do	 nosso	 App.	 Agora,	 estamos	 prontos	 para	 testar.	
Veremos como instalar o emulador no próximo capítulo e também como testar nosso aplicativo diretamente em um 
smartphone Android. 
28 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS
 GOOGLE INVENTOR
Agora que já conseguimos criar nosso primeiro aplicativo, chegou 
a	tão	esperada	hora	de	o	testarmos	para	podermos	confi	rmar	se	
tudo está funcionando corretamente, que é exatamente o que 
faremos nesta aula.
 GOOGLE INVENTOR
AULA 03
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR30 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
3 - Diferentes modos de testar a Aplicação
O site do App Inventor nos traz três opções de teste para as aplicações criadas dentro do ambiente de produção. 
Fig. 3.1 - Opções para testar a aplicação do App Inventor
A primeira opção, e também a mais recomendada pelo App Inventor, é o teste via wi-fi		 diretamente em um 
dispositivo Android. Essa opção é a mais recomenda, pois nela você terá a verdadeira impressão que um usuário 
Android	terá	quando	o	aplicativo	estiver	pronto,	ou	seja,	é	um	teste	muito	fi	el.	Com	o	teste	diretamente	no	dispositivo	
Android,	você	terá	condições	de	avaliar	se	o	projeto	visual	está	fl	uido	e	se	o	processamento	da	aplicação	feita	pelo	
smartphone corresponde ao esperado. Sem contar que somente nessa opção você terá condições reais de tocar na tela 
do dispositivo. 
Para poder efetuar esse teste, primeiramente será necessário possuir um dispositivo Android. Será necessário 
também 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
Também será possível efetuar o download por meio do QRCODE a seguir (é necessário possuir um leitor QRCODE 
em seu smartphone):
Fig. 3.2 - Download do MIT AI2 Companion via QRCODE
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 31
Após instalar o aplicativo MIT AI2 Companion no smartphone,	verifi	que	se	seu	computador,	
no qual o App Inventor está sendo executado, e seu smartphone estão utilizando a mesma rede 
wi-fi		(requisito mínimo). Somente assim será possível efetuar esse teste.
Agora	que	tudo	está	confi	gurado,	vamos	voltar	ao	ambiente	de	produção	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 produção. 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 botão AI Companion, o sistema automaticamente vai gerar um 
código, que poderá ser lido via QRCODE no aplicativo MIT AI2 Companion, em seu smartphone. 
Você poderá digitá-lo também dentro da aplicação.
Veja,	 na	 fi	gura	 seguinte,	 a	 aplicação	 aberta	 no	 smartphone com a opção via digitação do 
código gerado.
Fig. 3.4 - Acessando o teste no smartphone via código “connect with code”
EXCEL AVANÇADO 201332 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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	situações,	o	resultado	é	o	mesmo,	como	você	pode	ver	na	fi	gura	a	seguir.
Fig.	3.6	-	Testando	a	aplicação	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 aplicação. 
O	teste	você	confere	na	fi	gura	a	seguir.
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 33DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
 
Fig. 3.7 - Testando a aplicação diretamente no smartphone via USB
3.1 - Emulador
Podemos também testar a aplicação diretamente no computador com o uso do emulador fornecido pelo MIT. O 
emulador se chama aiStarter e as informações de instalação podem ser encontradas no link a seguir:
http://appinventor.mit.edu/explore/ai2/setup-emulator.html
Nesse link, você encontrará informações de instalação nas plataformas MacOs, Windows e Linux. Será necessário 
efetuar o download do pacote de instalação do aiStarter (emulador). Caso o emulador não esteja instalado na sua 
máquina	ou	caso	você	sinta	dificuldades	para	efetuar	a	instalação,	peça	ajuda	e	maiores	informações	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 aplicação com o emulador instalado
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR34
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 imagensa seguir.
Observação: o processo de carregamento do emulador pode levar de 1 a 2 minutos. 
 
Fig. 3.10 - Emulador iniciando o Android
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 35DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Em seguida desbloqueie o Android (emulador) para que a aplicação possa ser inicializada.
Fig. 3.11 - Desbloqueio do Android no emulador
Pronto! O próximo passo é testar nossa aplicação no emulador. Clique nos botões da bateria 
eletrônica	e	verifi	que	se	estão	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	 criação	 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 capítulos a seguir.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
36 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS
 GOOGLE INVENTOR
Nesta aula, aprofundaremos ainda mais nossos estudos em 
programação para a criação aplicativos mobile.
 GOOGLE INVENTOR
AULA 04
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR38 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
4 - Verifi cação de condições e variáveis
Em programação, utilizamos em determinados momentos algumas estruturas de seleção e também fazemos 
verifi	cações.	Estruturas	de	seleções	são	algumas	perguntas	que	podemos	fazer	para	o	nosso	código.	
Veja um exemplo:
Vamos supor que precisamos fazer um suco de laranja e, por algum equívoco, compramos também, junto ao nosso 
pacote de laranjas, uma lima da pérsia (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 pérsia. O teste mais óbvio será provar as frutas. Assim, 
identifi	caremos	a	lima	da	pérsia	como	a	mais	azeda	e	a	excluiremos	da	produção	do	suco.	Nesse	nosso	caso	específi	co,	
fi	zemos	a	verifi	cação	na	condição	da	fruta.	Se	for	azeda,	excluímos;	do	contrário,	selecionamos.
Assim também funciona em programação. Temos alguns elementos capazes de testar nossa ação (funções) de diversas 
maneiras. Iremos citar algumas maneiras pertinentes ao nosso aprendizado inicial, mas antes falaremos um pouco sobre 
as variáveis.
As variáveis são como caixas, na qual guardamos “coisas” e “ações”. Em programação, utilizamos o termo “carregar” 
algo em determinada variável.
Para entendermos como funciona a variável, vamos a um exemplo simples e prático.
Supondo que teremos que carregar alguns sacos de cimento em um percurso de 10 metros lineares utilizando uma 
carriola (ferramenta de construção civil), teremos a quantidade de sacos de cimento como nossa variável, ou seja, nosso 
peso pode variar. Com base nessa variável (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 condição, de que falamos anteriormente, é a condição IF (se), uma maneira de, por meio da programação, 
perguntar algo para alguma coisa (exemplo da fruta: SE fosse azeda, excluía; do contrário, selecionava).
O contrário da condição IF é a condição ELSE (mais), que, apesar da tradução literal, serve para dar uma nova opção 
para	uma	ação	específi	ca.	Se	fôssemos	utilizar	a	condição	ELSE no exemplo anterior (suco), faríamos o seguinte: se a 
fruta for azeda, faça uma limonada; do contrário, faça o suco de laranja. Compreenderam? Vamos entender na prática.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 39
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 seção 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
EXCEL AVANÇADO 201340 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Nas	propriedades	do	componente,	confi	gure	o	MinimumInterval para o valor “0” (zero). No 
campo Source,	encontre	o	áudio	específi	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 programação Blocks. Sua tela deverá aparecer como na imagem a seguir.
Fig. 4.4 - Ambiente de programação Blocks
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 41DESENVOLVIMENTO DE APLICATIVOS - 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 ação wrong.play, como na imagem a seguir. 
Fig. 4.5 - Ação .play no novo componente de áudio
Ao incluir a ação de “play” no ambiente de programação, o App Inventor irá sinalizar como um erro, mas não se 
preocupe:	trata-se	apenas	de	uma	mensagem	sinalizando	a	não	existência	de	“pai”	para	a	ação	específica.
O áudio “wrong.mp3” refere-se ao som de “Erro”, como uma campainha. A ideia é tocá-lo quando nossa condição 
for	contrária	à	condição	atual.	Até	o	momento,	não	fizemos	nenhuma	verificação	no	nosso	código,	apenas	mandamos	
o App Inventor tocar os áudios quando os botões forem clicados.
Para	efetuar	uma	verificação	no	código,	primeiramente	vamos	focar	no	clique	do	botão	Chimbal. Criaremos duas 
variáveis, que serão “Tocar” e “naoTocar”. Existem regras de nomenclatura para a criação de variáveis, dentre elas o 
fato de não utilizar acentos e não haver espaços entre as palavras.
Para criar uma variável, no menu Blocks, selecione a seção Variables. Clique em Inicialize global Name to, como 
na imagem seguinte.
Fig. 4.6 - Criando uma variável local
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR42
Perceba que o bloco da variável pode ser renomeado no campo Name. Clique e renomeie sua variável para o valor 
Tocar. Aproveite para reorganizar seus blocos no ambiente de programação, como na imagem a seguir.
Fig. 4.7 - Renomeando a variável local
Agora, “falaremos” para o nosso código que a variável local Tocar tem como valor a lógica True (verdadeiro). Para 
isso, vá até o menu lateral esquerdo, na seção Logic, e clique no valor True. Arraste e conecte a variável Tocar, como 
na imagem a seguir.
Fig. 4.8 - Valor True para a variável Tocar
Agora, faremos a inclusão de uma nova variável com o nome de naoTocar, cujo valor é contrário à variável Tocar. 
Ou seja, colocaremos o valor False.	Veja	na	figura	a	seguir	como	seu	código	deverá	ficar.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 43DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 4.9 - Nova variável naoTocar com valor False
 Agora, vamos incluir a condição IF em nosso código. Para isso, vá até o menu lateral esquerdo, 
na seção Control, e selecione a condição IF,	como	na	fi	gura	a	seguir.
 
Fig. 4.10 - Adicionando o bloco IF ao código
Vamos, agora, utilizar um bloco de comparação matemática em nosso código que funciona assim: 
elemento “A” pode ser igual, diferente, maior, menor, maior igual ou menor igual ao elemento “B”. 
Para entender melhor, no menulateral, na seção Math (matemática), selecione o segundo bloco 
que	aparece	na	lista,	como	na	fi	gura	a	seguir.	Aproveite	para	reorganizar	seu	código,	separando	o	
botão de clique do componente Chimbal mais acima da tela.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR44
Fig. 4.11 - Adicionando a comparação matemática
Agora,	 precisamos	 entender	 o	 processo	 de	 condicional	 no	 código.	 Queremos	 verificar	 se	 as	 variáveis	 criadas	
são True ou False.	 Tudo	 isso	 será	 feito	 dentro	 da	 nossa	 ação	 de	 clique,	 afinal	 é	 nela	 que	 a	 verificação	 será	
feita. Observe que, no bloco IF,	 existem	 duas	 conexões,	 uma	 fará	 a	 verificação	 e	 a	 outra	 conectará	 a	 ação	 que	
será feita. Nesse caso, desconecte a ação de .play do botão de clique e conecte-a no nosso IF,	 como	 na	 figura	 
a seguir.
Fig. 4.12 - Reconectando a ação de play à condicional criada
O próximo passo é arrastar nossa condicional para dentro do nosso clique, carregando a ação de .play que acabamos 
de	reconectar.	Veja	a	figura	a	seguir.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 45
Fig. 4.13 - Conectando a condicional criada com o antigo clique
Depois disso, devemos conectar nossa comparação matemática ao nosso IF, que agora está dentro da ação de clique. 
Veja	na	figura	a	seguir	como	deverá	ficar	sua	programação.
 
Fig. 4.14 - Conectando a comparação matemática ao nosso IF
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR46
Você se lembra de que, anteriormente, havíamos falado sobre a condicional ELSE, que seria 
contrária à condicional IF? Pois é, vamos implementá-la no código. 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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 47
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 ação de play
Para que nosso conjunto de ações funcione, precisamos completar nossa comparação matemática. Podemos resolvê-
la de diversas maneiras, por isso a programação é tão interessante, pois é pura criatividade. 
Vamos incluir mais dois novos blocos. O primeiro deles será o bloco GET (obter), que está dentro da seção Variables, 
localizada no menu lateral esquerdo da tela. Veja a imagem a seguir.
 
Fig. 4.18 - Adicionando o bloco SET na programação
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR48 EXCEL AVANÇADO 2013DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
O bloco GET faz referência às variáveis criadas, podendo ser Tocar ou naoTocar.	Confi	gure	o	bloco	GET com a 
variável Tocar por meio do seletor existente.
 
Fig. 4.19 - Carregando a variável Tocar dentro do bloco GET
Conecte o bloco GET,	no	primeiro	valor	que	está	vazio,	no	bloco	de	comparação	matemática,	como	na	fi	gura	a	seguir.
Fig. 4.20 - Conectando a variável Tocar com GET à comparação matemática
Agora, inclua um novo bloco GET	 na	 programação.	 Desta	 vez,	 confi	gure-a	 com	 a	 variável	 naoTocar. Na 
sequência,	 conecte-a	 ao	 segundo	 campo	 da	 comparação	 matemática.	 Sua	 tela	 deverá	 fi	car	 como	 a	 fi	gura	
a seguir.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013 49DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Fig. 4.21 - Conectando a variável naoTocar com GET à comparação matemática
Observe que, nesse momento, já não haverá mais nenhuma mensagem de erro na tela, pois 
sua ação (função) está correta. Porém, vamos analisar a nossa comparação matemática imposta 
na	verifi	cação	IF.
Note que estamos querendo saber nessa comparação SE a variável Tocar é IGUAL ( = ) 
à variável naoTocar. Lembre-se de que, ao criarmos as variáveis, determinamos valores para 
elas, sendo que a variável Tocar tem o valor True e a variável naoTocar tem o valor False. Ou 
seja,	elas	NÃO	são	iguais.	Neste	caso,	nossa	verifi	cação	IF não foi validada, sendo a condição 
ELSE favorável. Conclusão: 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 aplicação. Caso tenha dúvidas, peça ajuda para seu professor.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR50
Viram	como	ficou?	Muito	bem!	Agora	vamos	alterar	a	nossa	comparação	matemática	e	verificar	se	a	variável	Tocar 
é DIFERENTE ( ≠ ) da variável naoTocar, alterando o seletor da comparação matemática para o símbolo ≠. Veja a 
imagem a seguir.
 
Fig.	4.22	-	Reconfigurando	a	comparação	matemática
Note	que,	ao	configurar	o	valor	da	comparação	matemática	para	≠, você fez a seguinte pergunta para a programação 
da	verificação	IF: se a variável Tocar for DIFERENTE ( ≠ ) da variável naoTocar, toque o áudio chimbal_sound. 
Neste	caso,	a	verificação	foi	favorável	ao	IF. Sendo assim, note que, ao emular o aplicativo, o som Chimbal será tocado 
corretamente, e não mais o áudio “wrong.mp3”.
Faça	 agora	 esse	 mesmo	 conjunto	 de	 verificações	 e	 comparações	 para	 os	 outros	 componentes	 de	 clique	
em sua programação. Aproveite para alternar os valores das comparações matemática e, assim, efetuar 
novos testes.
Sua	tela	poderá	ficar	como	na	figura	a	seguir.
 
Fig.	4.23	-	Condicionais	e	verificações	inseridas	em	todos	os	componentes	de	clique
Parabéns! Você acaba de se aprofundar ainda mais no mundo da programação e na criação de aplicativos mobile. 
Pratique, tente novas ações e experiências para aprimorar ainda mais seu conhecimento.
DESENVOLVIMENTO DE APLICATIVOS
 GOOGLE INVENTOR
Hoje, vamos criar um novo aplicativo. Será um cardápio 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 monetários também.
 GOOGLE INVENTOR
AULA 05
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR52 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
5 - Criando um cardápio 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 não consiga efetuar o download das imagens pelo link, peça para seu Instrutor os arquivos solicitados.
Vamos para o App Inventor iniciar um novo projeto. Nomeie o projeto como Cardapio_Mobile (sem espaços entre 
as palavras e sem acentos).
Fig. 5.1 - Novo projeto - Cardápio Mobile
Nosso cardápio consiste em termos quatro telas (Screens) em um mesmo projeto. Para isso, clique no Setor 2, 
no botão Add Screen. Repita o procedimento até possuirmos quatro telas, que serão: Screen1, Screen2, Screen3 
e Screen4.
Selecione a Screen1,	como	na	fi	gura	a	seguir.
Fig. 5.2 - Seelcionando a Screen1
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 53
A Screen1 será a nossa tela de apresentação (início) e as demais telas serão nossos pratos 
selecionados. Para o desenvolvimento dessa aplicação, 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 ações.
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	 configurar	 o	 valor	 de	
BackgroundColor da Screen1 para None.
Fig. 5.4 - BackgroundImage da Screen1
O próximo passo será incluir o componente Listpicker. Clique e arraste para a Screen1. Note 
que o componente Listpicker	se	comporta	como	um	botão	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. 
EXCEL AVANÇADO 201354 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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 próximas telas.
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 55DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Selecione a Screen2. 
 
Fig. 5.7 - Selecionando a Screen2
Na Screen2, vamos inserir um botão e, posteriormente, uma imagem. Para o botão, renomeie o texto para “Clique 
para voltar”. Para o width do botão, insira o valor Fill parent e, para o heigth, o valor Automatic.
Sua Screen2	deverá	ficar	assim.
Fig. 5.8 - Inserindo um botão na Screen2
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR56
Acima do botão 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.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 57DESENVOLVIMENTO 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	botão	inserido	anteriormente	está	no	rodapé	da	nossa	tela.
Fig. 5.12 - Componentes Image e Button inseridos na Screen2
Agora, faça o mesmo com a Screen3 e com a Screen4, porém, 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 INVENTOR58
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 variável. Vamos nomeá-la como listaCardapio.
Fig. 5.13 - Variavel listaCardapio criada na Screen1
Agora, vamos utilizar o bloco Make a list, localizado na seção Lists, e conectá-lo com a nossa variável listaCardapio. 
Como teremos uma lista com três 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 três itens à variável listaCardapio
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 59
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 variável com os valores necessários para ser utilizada no componente Listpicker.
Será preciso carregar nossa variável logo na inicialização do aplicativo, para que nossos seletores estejam ativos (lista 
de opções).
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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR60
Esse bloco fará o carregamento da seleção 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 próximo passo será conectar a variável listaCardápio ao Listpicker. Utilize o bloco GET, 
como	na	fi	gura	a	seguir.
Fig. 5.18 - Conectando a variável ao bloco Set Listpicker1 elements to
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 61
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 opções, o App Inventor retorna para a tela inicial, pois ainda não implementamos 
a ação após o objeto selecionado.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR62 EXCEL AVANÇADO 2013DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013 63DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Esse bloco corresponde ao objeto clicado no Listpicker (objeto selecionado). Neste bloco, 
faremos	 a	 seguinte	 verifi	cação	 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 condição 
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 comparação de texto, 
como	na	fi	gura	a	seguir.
Fig. 5.24 - Inserindo comparação de texto aos nossos IF e ELSE
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR64
Sua	tela	deverá	fi	car	como	na	fi	gura	a	seguir.
Fig. 5.25 - Comparação de texto inserida aos nossos IF e ELSE
Note	que	o	seletor	de	comparação	de	texto	deverá	fi	car	com	o	valor	IGUAL ( = ).
Lembre-se de que queremos comparar o valor do texto recebido na seleção do Listpicker com 
o valor inserido no campo posterior. Dessa forma, insira o bloco Listpicker.Selection em cada 
campo	inicial	da	nossa	comparação	de	texto.	Sua	tela	deverá	fi	car	como	a	fi	gura	a	seguir.
Fig. 5.26 -Variável listaCardapio inserida na comparação de texto
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 65
Agora, nos campos restantes, vamos inserir os valores de comparação, que são: 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, porém ainda não inserimos as ações para cada uma delas. Agora é simples: 
vamos inserir o bloco Open another screen sreen name em cada uma das ações Then dos nossos IF e ELSE. Para 
isso, localize o bloco Open another screen screen name, que está na seção Control, no menu lateral esquerdo.
Fig. 5.28 - Bloco Open another screen screen name
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS- GOOGLE INVENTOR66
Insira os blocos Open another screen screen name para cada uma das ações 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 inserção de mais três blocos de texto, cada um contendo a informação referente à tela que vamos 
migrar após a validação 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	ações	de	troca	de	tela,	como	na	figura	a	seguir.
Fig. 5.30 - Blocos de texto com os valores conectados
Ótimo! Aqui terminamos a programação da nossa Screen1. Agora, vamos programar os cliques dos botões das telas 
Screen2, Screen3 e Screen4.
Selecione a Screen2 no botão 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. 
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013 67DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Perceba que estamos programando o retorno para a Screen1 após o clique no botão 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 referência 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 Cardápio Mobile. 
68 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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	xação	do	conteúdo.
 GOOGLE INVENTOR
AULA 06
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR70 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
6 - Activity Starter, TinyDB e Clock
Faremos agora um novo e último projeto. Neste projeto, você conhecerá três novos componentes non-visibles 
(invisíveis) na interface Designer, porém são componentes muito importantes e de enorme utilidade em projetos que 
necessitam de atividades nativas do sistema operacional Android, bem como em automação de projetos.
6.1 - Novos componentes
O Activity Starter é um componente responsável por integrar ações nativas do Android (do sistema operacional) 
com as ações do usuário.
O componente TinyDB é o banco de dados da aplicação. Ele é capaz de indexar informações dentro da aplicação para 
que ela consuma os dados salvos. Os dados são salvos com chaves (tags), dessa forma é possível consumir dados de 
diversas chaves em determinadas situações.
O componente Clock é responsável pela automação da aplicação. É a persistência automatizada, podendo ser utilizado 
como uma espécie de timer para determinadas ações dentro da aplicação.
6.2 - Projeto fi nal
Nosso	 projeto	 fi	nal	 tem	 como	objetivo	 consumir	 dados	 inseridos	 na	 aplicação,	 gravar	 automaticamente	 os	 dados	
inseridos e acessar uma função nativa do sistema operacional. Faremos um App de pesquisa nas redes sociais. Teremos 
auxílio de um componente que estamos vendo pela primeira vez, cujo nome é TextBox, que possibilita a chamada 
(utilização) do teclado virtual (função nativa) na inserção 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 não for possível acessar o link, peça para o seu educador disponibilizar os arquivos.
Primeiramente, inicie um novo projeto com o nome Search_Social. 
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 71
Fig. 6.1 - Novo projeto Search Social
O próximo passo será inserimos, com o auxílio do menu lateral, à esquerda da interface de 
produção 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
EXCEL AVANÇADO 201372 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Faremos a inserção de quatro botões dentro do TableArrangement, respeitando as 
disposições	 impostas	 de	 duas	 colunas	 e	 duas	 linhas.	 Confi	gure	 os	 botões	 com	 o	width no 
tamanho de 160 pixels e o height com 160 pixels também. Lembre-se de remover os textos-
padrão dos botões inseridos. Veja a seguir.
 
Fig. 6.3 - Botões inseridos
Agora, vamos inserir as respectivas imagens referentes aos botões. Fique à vontade para 
posicioná-las. Veja a seguir.
Fig. 6.4 - Imagens dos botões inseridas
EXCEL AVANÇADO 2013 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 73DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Agora, vamos inserir o componente TextBox acima do nosso TableArrangement.	Para	as	configurações	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	opção.	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 inserção do componente Activity 
Starter, facilmente encontrado no menu lateral da seção Conectivity. Arraste-o para a interface de produção. Nas 
configurações,	preencheremos	apenas	o	campo	referente	à	seção	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 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR74
Agora, faremos a inserção do componente TinyDB (banco de dados), que será encontrado na seção Storage. 
Arraste-o	para	a	interface	de	produção.	Nesse	componente,	não	será	necessário	efetuar	nenhuma	configuração.
Fig. 6.7 - TinyDB inserido
O próximo componente a ser inserido será o Clock. Ele é encontrado na seção Storage. Arraste-o para a interface 
de	produção	e	mantenha	as	configurações-padrão	do	componente.
 
Fig. 6.8 - Componente Clock inserido
Termina aqui nosso trabalho na interface Designer. Vamos para a interface Blocks para editarmos 
nossa programação.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 75DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Com a interface de Blocks aberta, devemos primeiramente interpretar as funções .click que 
teremos. Serão quatro ações, uma para cada botão inserido - Button1, Button2, Button3 e 
Button4.	Insira	as	ações,	conforme	a	fi	gura	a	seguir.
 
Fig. 6.9 - Ações de clique inseridas
Agora, faremos a inserção do componente Set ActivityStarter1.DataUri to. Faremos a 
inserção desse componente em todas as ações de clique inseridas. Note que essa ação está ligada 
ao componente ActivityStarter, ou seja, para inserir as ações, 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 INVENTOR76
O próximo passo será inserir um bloco do tipo Text com a ação Join (juntar) em cada um dos componentes Set 
recém-inseridos.	Sua	tela	deverá	ficar	como	a	figura	a	seguir.
Fig. 6.11 - Blocos Join conectados aos blocos Set
Faremos a inserção de um bloco de texto editável para cada primeira conexão dos blocos Join inseridos anteriormente. 
Veja	como	deverá	ficar.
Fig. 6.12 - Blocos Text conectadosaos blocos Join
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 77
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 referência ao ícone da rede social Facebook. Já o Button2 faz referência ao Twitter e 
os Button3 e Button4 fazem referência 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 botão.
•	 Button1 - https://www.facebook.com/search.php?q=
•	 Button2 - https://twitter.com/search?q=
•	 Button3 - https://www.youtube.com/results?search_query=
•	 Button4 - 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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR78
Acabamos de descrever um link para cada rede social clicada. Agora, faremos a inserção 
da programação 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 conexões e elas são obrigatórias. Faremos a 
inserção de um bloco Text na conexão Value e novamente vamos inserir o bloco TextBox1, 
desta vez nas conexões valueToStore. Insira, no bloco Text, o texto Search (procurar).
 
Fig. 6.16 - Blocos Text e TextBox1 conectados ao .StoreValue do banco de dados
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 79
Agora, faremos a inserção do bloco responsável por inicializar a ação 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 função de clique, mandando e recebendo informações do banco de dados, porém ainda temos 
que	confi	gurar	outras	ações	ligadas	à	inicialização	do	nosso	App	e	também	ligadas	à	nossa	persistência	automatizada,	
responsável 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 INVENTOR80 EXCEL AVANÇADO 2013DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
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
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR EXCEL AVANÇADO 2013 81DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
Agora, vamos programar o componente Clock1 com a ação .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 é responsável pelo nosso salvamento automático, ou seja, 
ele fará o salvamento automático das nossas informações no banco de dados. Conecte a esse 
componente o bloco Call TinyDB1.StoreValue.
Fig. 6.22 - Call TyniDB1 .StoreValue conectado
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTORDESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR82
Na sequência, vamos conectar um bloco de Text, cujo texto será novamente Search. Logo 
abaixo, na conexão 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	programação.	Agora,	devemos	testar	nossa	aplicação	e	ver	o	que	
ela é capaz de fazer.
Fig. 6.24 - Testando a aplicação
Se você seguiu corretamente os passos, sua aplicação deverá agir da seguinte forma:
Ao inserir uma palavra simples ou composta no componente TextBox1 e, posteriormente, clicar 
em um dos botões, automaticamente sua aplicação acionará um recurso nativo do seu smartphone, 
o browser de navegação. 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 
informações automaticamente em nosso banco TinyDB1. Faça diversas pesquisas em seu novo 
aplicativo para compreender melhor seu funcionamento.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 83DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
6.3 - Conclusão
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 informações atualizadas sobre essa valiosa ferramenta de criação.
84 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 85
Bibliografi a
Júlio Battisti MCSE, MCSA, MCDBAeE MCSD, Windows Server 2003 – Curso Completo
Sites:
Disponível em: <http://technet.microsoft.com/pt-br/library/jj648426.aspx#WDS_ - 
InstallingWindowsDeploymentServices>. Acesso em 16 de Out. de 2014.
Disponível em: <http://juliobattisti.com.br/tutoriais/ricardogerhard/activedirectory002.
asp>. Acesso em: 16 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/library/hh831484> Acesso em: 16 de 
Out. de 2014.
Disponível em: <http://www.linhadecodigo.com.br/artigo/2422/o-que-e-o-active-
directory.aspx> Acesso em: 18 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/dd723678(v=ws.10).
aspx> Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/hh831440.aspx - 
Applocker> Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/cc753109(v=ws.10).
aspx> Acesso em: 19 de Out. de 2014.
Disponível	 em:	 <https://www.microsoft.com/learning/pt-br/mcsa-certifi	cation.aspx>	
Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/hh831531.aspx - hyper-v
Disponível em: <http://www.tecmundo.com.br/web/1624-o-que-e-virtualizacao-.
htm> Acesso em: 19 de Out. de 2014.
Disponível em: <http://pt.wikipedia.org/wiki/Virtualiza%C3%A7%C3%A3o> Acesso 
em: 19 de Out. de 2014.
Disponível	 em:	 <http://www.profi	ssionaisti.com.br/2014/07/o-que-e-virtualizacao/>	
Acesso em: 19 de Out. de 2014.
Disponível em: <http://www.infowester.com/virtualizacao.php> Acesso em: 19 de 
Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/magazine/2009.gr.map.aspx> 
Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/hh831656.aspx - Storage 
Migration> Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/jj860433.aspx - Migração 
de vm e armazenamento> Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/jj134230.aspx - VLAN> 
Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/hh144972.aspx - VDI e MED-V> 
Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/gg610625.aspx - Nuvem 
privada> Acesso em: 19 de Out. de 2014.
Disponível em: <http://technet.microsoft.com/pt-br/library/jj860425.aspx - Nuvem 
privada> Acesso em: 19 de Out. de 2014.
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR86
Disponívelem: <http://pt.wikipedia.org/wiki/Computa%C3%A7%C3%A3o_em_nuvem> Acesso em: 19 de Out. de 
2014.
Disponível em: <http://www.microsoft.com/pt-BR/download/details.aspx?id=30652 - Windows ADK> Acesso em: 19 
de Out. de 2014.
Disponível 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.