Tutorial App Inventor

Artur Galeno
Tayn Gonalves

Instituto Federal de Educao, Cincia e Tecnologia do Maranho

Dezembro/2013

1. Introduo
O objetivo deste tutorial introduzir o leitor ao App Inventor e gui-lo na criao de um
aplicativo simples, cobrindo as funcionalidades bsicas da plataforma. O aplicativo usado como
exemplo ser para clculo de IMC (ndice de Massa Corprea), e informar ao usurio se o seu
IMC est acima ou abaixo do normal, ou normal. Espera-se que ao fim deste tutorial o leitor
tenha um bom entendimento do App Inventor, e autonomia para explorar as funcionalidades
no contempladas neste tutorial.
O App Inventor uma plataforma para criao de aplicativos Android baseada na web, que
prov uma interface visual com o objetivo de permitir que qualquer pessoa, mesmo sem um
profundo conhecimento de codificao, possa construir aplicativos Android. O App Inventor
um exemplo do conceito PaaS (Platform as a Service/Plataforma como servio) da
Computao Distribuda, pois a plataforma oferecida como um servio e est disponvel para
uso, bastando apenas que o usurio tenha um computador conectado internet e um browser.
A plataforma dividida em duas partes: App Inventor Designer, para a construo da interface
grfica da aplicao, e o App Inventor Block Editor, para associar aes aos componentes da
interface.
2. Histrico
A primeira verso trial do App Inventor foi lanada em Julho de 2010, apenas por convite. E a
verso pblica foi lanada em Dezembro de 2010. Inicialmente a plataforma pertencia e era
mantido pela Google, que abriu mo do projeto em 2011. Atualmente o App Inventor mantido
pelo MIT (Massachusetts Institute of Technology). Para desenvolver o App Inventor, a Google
se baseou em pesquisas anteriores em computao educacional e na experincia anterior da
empresa em desenvolvimento em ambientes computacionais online.
O App Inventor utiliza um editor baseado em blocos que feito a partir da biblioteca Open
Blocks para Java, a qual distribuda pelo STEP (Scheller Teacher Education Program) do
MIT. O STEP fruto da tese de mestrado de Ricarose Roque e distribuda sob a licena de
software livre do MIT.
Todo o ciclo de pesquisas que permitiram que o App Inventor existisse fruto de mais de 40
anos de pesquisa do MIT, e incluem outros projetos tais como Logo, StarLogo TNT e Scratch.

3. AppInventor e os conceitos de Computao nas Nuvens e Computao Mvel

Computao nas nuvens um paradigma em que determinada tarefa executada via Internet
(por isso o termo Nuvem), como por exemplo edio de texto (Google Docs), armazenamento
de arquivos (Dropbox), e o prpio AppIventor, que permite a edio de um aplicativo.
Quando essa tecnologia surgiu, vislumbrava-se que em determinado momento, os
computadores pessoais no iriam precisar de mais nada instalado ou armazenado localmente,
seria necessrio apenas acesso a internet para que dessa forma os servios fossem
acessados remotamente. Dessa maneira os computadores iriam precisar de menos potncia, e
at mesmo, apenas do monitor e dos perifricos, pois todas as aplicaes seriam executadas
no servidor. E outra grande vantagem que a tecnologia permite o acesso de qualquer local,
tendo em vista as condies ideais, dessa maneira o usurio no fica preso a uma plataforma e
nem a apenas uma mquina.
Atualmente a computao nas nuvens esbarrou em alguns problemas, como a questo da
segurana na internet, e da estabilidade e velocidade da conexo. Ainda assim, a tecnologia se
mostra estabilizada no mercado e com aceitabilidade perante os usurios. Sendo utilizada para
diversos fins, conforme citado.
O AppIventor aplica bem os conceitos da computao nas nuvens permitindo que o usurio
possa acessar e programar seu projeto de modo independente de plataforma, e independente
do local, oferecendo ao usurio mais flexibilidade ainda ao construir aplicativos. E aplicando
bem o seu prprio proposito de permitir que pessoas sem conhecimento em programao
construa um aplicativo, pois ao oferecer uma ferramenta nas nuvens retira do usurio a
necessidade de fazer toda configurao do ambiente de desenvolvimento.
Em relao a computao mvel o AppIventor aplica seus princpios, pois permite a
descentralizao do desenvolvimento, a diversificao da plataforma de desenvolvimento,
necessita de conectividade constante para utilizao e oferece simplicidade para o usurio.

4. Preparando o ambiente
Acesse appinventor.mit.edu [Figura 1]. Na tela inicial podemos escolher entre: Teach para
explorar recursos educacionais, Explore para explorar informaes e tutoriais e Invent para
iniciar a criao de aplicativos. Neste tutorial usaremos apenas as duas ltimas opes.
Inicialmente, clique em Explore para realizar a preparao do ambiente.

Figura 1

Em seguida, clique na aba Setup [Figura 2].

Figura 2

A preparao do ambiente dividida em 2 etapas: verificar se o ambiente Java est

corretamente instalado e instalar o aplicativo do App Inventor, conforme vemos na tela do
Setup [Figura 3].

Figura 3

Clique na etapa 1 (Prepare your system), que testar se o ambiente Java est funcionando na
mquina. Se o Java estiver funcionando, um pequeno aplicativo de bloco de notas ser aberto
[Figura 4]. Caso contrrio preciso realizar a instalao da mquina virtual Java.

Figura 4

Na segunda etapa feita a instalao do software do App Inventor. Esse software

responsvel por disponibilizar um emulador de um sistema Android para que os aplicativos
possam ser testados na prpria mquina. Selecione o arquivo adequado para o Sistema
Operacional da sua mquina [Figura 5] e faa o download e a instalao.

Figura 5

Aps a instalao voc pode clicar no boto Invent your own apps now para comear a criar
seus aplicativos. Para iniciar preciso logar com uma conta do google, caso no possua uma
necessrio criar. A primeira tela aps o login a de Meus projetos [Figura 6]. Crie um novo
projeto com o nome IMC e estamos prontos para comear a produzir.

Figura 6

5. Criando a interface grfica

A criao da interface grfica a primeira parte do desenvolvimento com o App Inventor. Para
tanto temos o ambiente de Design [Figura 7].

Figura 7

Na parte esquerda da tela est a Paleta de componentes, que contm componentes visuais
(botes, caixas de texto, etc) e no visuais (elementos para arranjo de tela, sensores, etc).
Para adicionar componentes interface basta arrast-los da paleta para dentro do
Visualizador, que possui uma tela central imitando a tela de um dispositivo Android.
medida que elementos vo sendo inseridos na tela, eles aparecem na seo Componentes.
Para alterar as propriedades de um componente basta selecion-lo na lista de componentes e
suas propriedades so habilitadas na parte direira da tela, na seo Propriedades.
Uma boa prtica renomear os componentes medida que so inseridos na tela. Arraste da
Paleta para a tela principal um componente Label, que servir como ttulo e um Table
Arrangement (submenu Screen Arrangement) que servir para nos ajudar a organizar a tela.
Renomeie o Label para lblTitulo e o Table Arrangement para tblTelaPrincipal. Alm disso mude
o texto do componente Screen1, atravs do atributo Title, de Screen1 para IMC.
A tela dever ficar como na Figura 8:

Figura 8

Mude os atributos do componente tblTelaPrincipal conforme valores abaixo:

Collums (Colunas)

Rows (Linhas)

Weight (Largura)

Fill parent

O valor Fill Parent indica que a largura do componente ser igual ao espao disponvel no
componente pai. Nesse caso a tabela ser da largura da tela. Para lblTitulo o atributo weight
tambm deve estar como Fill Parent, o atributo Text como Calculo de IMC e o atributo
TextAligment como Center, para que o texto fique centralizado.
Para a coluna da esquerda da tabela arraste um componente Image e dois componentes Label.
Para coluna da direita arraste um Label e dois TextBox. Arraste um Button e depois um Label
para qualquer rea da tela abaixo da tabela. Este ltimo Label servir para exibir o resultado,
portanto apague o texto contido nele atravs da propriedade texto, ele ficar invisvel na tela.
Vamos utilizar a imagem mostrada na Figura 9 para o componente Image. Antes precisamos
fazer o upload do arquivo atravs do parmetro Picture do componente Image. Outra opo
fazer o upload atravs da seo Mdia, dentro da seo Componentes. Qualquer outra mdia

necessria para a aplicao, como outras imagens e sons, precisam tambm ser carregados e
aparecero a seo mdia.

Figura 9

Finalmente, renomeie os elementos e mude o texto de cada um conforme a Figura 10.

Figura 10

Nossa interface est pronta, agora associaremos aes aos componentes da tela. Para iniciar
clique no boto Open the Blocks Editor no canto esquerdo superior da tela, e uma aplicao
Java ser iniciada.
6. Adicionando aes aos objetos da interface

A programao no App Inventor feita atravs do Blocks Editor [Figura 11]. A programao no
App Inventor baseada em blocos que so combinados entre si. Para us-los basta arrastar do
menu esquerdo (que possui 3 abas de componentes) para o centro da tela, onde a
montagem ser feita. Na parte superior direita temos os controles do emulador, que serviro
para que possamos testar a nossa aplicao.

Figura 11

A parte mais importante do Blocks Editor o menu dos blocos, que possui 3 abas:

Built-in: blocos genricos necessrios a qualquer aplicao;

My blocks: blocos associados aos elementos definidos nesta aplicao;

Advanced: mais opes de blocos para os componentes utilizados nesta aplicao;

Na Figura 12 podemos visualizar as duas abas mais usadas, Built-in e My Blocks, que sero
usadas neste tutorial. Para a aba Built-In est selecionado submenu Text, por isso os blocos
apresentados na imagem so relativos a texto. Na aba My Blocks est selecionado o
componente BtnCalcular, por isso temos blocos que representam aes relacionadas a botes,
como Click.

Figura 12

Inicialmente definiremos uma varivel para armazenar o clculo do IMC. Na aba Built-In, no
susbmenu Definition usamos o bloco def variable as para fazer isso. O valor atribudo zero
atravs do bloco number do submenu Math. O resultado o bloco mostrado na Figura 13.

Figura 13

O clculo do IMC feito atravs da frmula: IMC = M / A, onde M = massa corporal e A =

altura. Para calcular o IMC usaremos os blocos mostrados na Figura 14. Usamos a funo expt
para elevar o valor contido no componente txtAltura ao quadrado e ento dividimos o valor
contido em txtPeso pelo valor obtido. Por fim armazenamos o resultado na varivel resultado.

Figura 14

Aps descobrir o valor do IMC precisamos exibir a mensagem adequada ao valor obtido.
Usaremos os sequintes intervalos:
IMC < 18.5

Magro

18.5 > IMC <25

Saudvel

IMC > 25

Acima do peso

Precisamos usar condies para exibir a mensagem correta. Os blocos condicinais esto
disponveis no submenu Control. Ainda, para expressar o intervalo de valores para que uma
pessoa esteja saudvel usamos o bloco and, disponvel no submenu Logic. Como resultado
temos a estrutura de blocos mostrada na Figura 15.

Figura 15

Por fim devemos associar tudo isso ao click do boto Calcular. Para isso usamos o bloco
When btnCalcular.Click do disponvel na aba My Blocks. O resultado mostrado na Figura
16.

Figura 16

Finalmente iremos testar o aplicativo. Clique no boto New Emulator no canto superior direito
da tela. A mensagem mostrada na Figura 17 aparecer.

Figura 17

Assim que o emulador estiver pronto ele aparecer na tela, conforma Figura 18.

Figura 18

Clique em Connect to a device e selecione o emulador recm-aberto. Uma seta amarela

indicar enquanto o arquivo transferido para emulador, conforma Figura 19.

Figura 19

Finalmente podemos testar a aplicao conforme Figura 20.

Figura 20

Figura 20

Para testar o aplicativo no seu dispositivo Android basta retornar tela de design e utilizar a
opo Package fo phone, mostrada na Figura 21.

Figura 21