Livro App-Inventor MC PDF

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 - Verificaçã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 final ..................................................................................................70
Bibliografia ................................................................................................ 85
Imagens ................................................................................................................86
DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 3

4 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 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).
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

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.

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.
8 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
- 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.

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ógica de 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.

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
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
- GOOGLE INVENTOR 11
AULA 02
GOOGLE INVENTOR
Nesta segunda aula, daremos início ao nosso tão esperado

primeiro aplicativo!
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.

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

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
16 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
- 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 imagem a seguir.
Fig. 2.6 - Componente Button inserido dentro do componente TableArrangement

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.

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
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
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

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

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

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.

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.

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).
Fig. 2.20 - Componente Button Chimbal com acão de clique
DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
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

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.

AULA 03
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.
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

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”

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.
32 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
- 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

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.
Observação: o processo de carregamento do emulador pode levar de 1 a 2 minutos.
Fig. 3.10 - Emulador iniciando o Android

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
DESENVOLVIMENTO
DE APLICATIVOS
DE APLICATIVOS
- GOOGLE INVENTOR
AULA 04
GOOGLE INVENTOR
Nesta aula, aprofundaremos ainda mais nossos estudos em

programação para a criação aplicativos mobile.
4 - Verificaçã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.

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

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
40 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 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 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

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.

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 menu lateral, 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
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.

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

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

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

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.

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
EXCEL
DE APLICATIVOS
AVANÇADO 2013
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.

AULA 05
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.
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

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 confi gurar 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.

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.
54 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
- 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

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.

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.

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

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

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,
Fig. 5.18 - Conectando a variável ao bloco Set Listpicker1 elements to

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.

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

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,

Fig. 5.24 - Inserindo comparação de texto aos nossos IF e ELSE
DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
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

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

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.

Perceba que estamos programando o retorno para a Screen1 após o clique no botão Clique
para voltar.
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.
DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
AULA 06
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.
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 final
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.

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

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
72 DESENVOLVIMENTO
EXCEL
DE APLICATIVOS
AVANÇADO 2013
- 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

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.

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

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 conectados aos blocos Join

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

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

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

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

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
EXCEL
DE APLICATIVOS
AVANÇADO 2013
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.

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.

Bibliografia
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/>
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>
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>
Disponível em: <http://technet.microsoft.com/pt-br/hh144972.aspx - VDI e MED-V>
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.

Disponível em: <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.

Livro App-Inventor MC PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Livro App-Inventor MC PDF

Caricato da

Copyright:

Formati disponibili

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

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 3

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

1.1 - Primeiros Passos

Fig. 1.1 - Página inicial do site do App Inventor

6 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE 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

Fig. 1.4 - Convite para responder a um questionário

A próxima tela será uma mensagem de boas-vindas.

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 7

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

A seguir, veja a tela da interface de produção (Designer) do App Inventor e, posteriormente,

1.2 - Interface de produção

Fig. 1.8 - Setores de produção na Interface do App Inventor

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 9

Fig. 1.9 - Ambiente de programação - Blocks

Voltemos ao ambiente Designer (interface de produção).

10 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 1.10 - Tela de boas-vindas

Nesta segunda aula, daremos início ao nosso tão esperado

1. Pegamos a escova de dente;

14 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.1 - Wireframe do projeto

2.2 - Criação do App passo a passo

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 15

Fig. 2.3 - Ambiente de criação

Fig. 2.4 - Componente TableArrangement

Fig. 2.5 - Configurando as propriedades do TableArrangement

Fig. 2.6 - Componente Button inserido dentro do componente TableArrangement

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 17

Fig. 2.7 - Enviando uma imagem

Fig. 2.8 - Imagem enviada

18 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.9 - Botões confi gurados com imagens

Fig. 2.10 - Novo component Button5 inserido

Fig. 2.11 - Novo component Button5 configurado

Fig. 2.12 - Renomeando componentes

20 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.13 - Componentes renomeados

Fig. 2.14 - Configurando imagem de fundo do componente Screen1

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 21

Fig. 2.15 - Componente Sound1 inserido

Fig. 2.16 - Componentes de som inseridos

As propriedades dos componentes de som são apenas duas: MinimumInterval (intervalo

22 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

• Renomeie o componente Sound1 para chimbal_sound;

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

Fig. 2.17 - Componentes de som renomeados

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 23

Fig. 2.18 - Ambiente Blocks

24 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.20 - Componente Button Chimbal com acão de clique

Fig. 2.21 - Componentes do tipo Button com funções de clique

Fig. 2.22 - Componente do tipo Sound Chimbal selecionado

26 DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR

Fig. 2.23 - Ação de .play do componente Sound conectado à ação .click

DESENVOLVIMENTO DE APLICATIVOS - GOOGLE INVENTOR 27

Agora que já conseguimos criar nosso primeiro aplicativo, chegou