CURSO APP

INVENTOR

INTRODUO
PLATAFORMA

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

O APP Inventor uma plataforma para o desenvolvimento de aplicativos para celulares com o sistema
operacional Android. Foi desenvolvida pelo Google, mas a partir de 2010 passou a ser continuada pelo MIT
Lab. Embora j exista h cinco anos, poucos profissionais da rea de informtica tm conhecimento sobre o
APP Inventor. O sistema est disponvel no link http://ai2.appinventor.mit.edu, lembrando que para ter
acesso a plataforma necessria uma conta Google, caso j possua utilize-a no momento em que acessar
APP Inventor.
Dentro da plataforma existem duas abas:
Aba designer responsvel pela construo do layout e insero dos componentes que faro parte do seu
aplicativo.

Figura 01: Aba designer.

Na aba Blocks feita a parte lgica e funcional do aplicativo, mas no se assuste, voc no ter que
aprender aqueles cdigos das linguagens de programao. Toda a programao feita com blocos que dizem
o que eles realizam, funciona como um quebra-cabea. Para nos ajudar somente blocos corretos podem ser
encaixados.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 02: Aba blocks.

Na aba designer voc ir encontrar quatro colunas; a primeira esquerda, chamada Palette, possui
todos os componentes que podem ser utilizados dentro do programa como botes, caixas de texto, que so
elementos visveis; e cmera, gravador de udio, que so elementos no-visveis. No decorrer do curso
vamos aprender a lidar com esses elementos.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 03: Palette na aba designer

A segunda coluna uma tela que simula um dispositivo mvel, onde possvel adicionar ou remover
os elementos da sua aplicao, acompanhar como os mesmos ficaro posicionados e modific-los.

Figura 04: Viewer

Na terceira coluna so listados todos os componentes que voc inserir na sua tela atual, na mesma
ordem em que foram inseridos na tela. Ainda nessa mesma coluna logo abaixo so mostrados tambm os
arquivos de mdia externos que voc pode adicionar ao projeto, basta fazer um upload para o aplicativo,
veremos como fazer isso, fique tranquilo.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 05: Components e media

E por ltimo a coluna de propriedades, quando um elemento selecionado na tela do simulador ou
na rea de componentes vista anteriormente, suas caractersticas so apresentadas nesta coluna, como: cor
de fundo, largura, altura, visibilidade entre outras. As propriedades variam de elemento para elemento.

Figura 06: properties

Esse curso, que ser de nvel bsico, est dividido em dez tpicos, em cada um deles iremos construir
passo a passo um aplicativo. O aplicativo que vamos desenvolver vai se chamar Agenda de Compromissos,
mas fique vontade para chama-lo como quiser. Ao termino do nosso curso voc dever chegar a esse
resulta final.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 07: Projeto final

O projeto consistir de uma agenda onde ser cadastrado um compromisso que poder ser
visualizado em uma outra tela da aplicao. Para o nvel bsico ns s vamos poder colocar um compromisso
e futuramente no nvel intermedirio incrementaremos a aplicao com o cadastro de vrios compromissos,
uma notificao para lembrar o usurio e outras funes que o APP Inventor nos disponibiliza.
Como sero feito nossos testes? Existem algumas maneiras de testar o aplicativo que est sendo
construdo, vou citar trs. 1- Emulador: voc pode fazer o download e instalao de um emulador Android
em seu computador, porm no adotaremos esse mtodo aqui no curso, pois este emulador, alm de um
pouco pesado em pcs mais fracos, no fcil de ser instalado, e como ns queremos simplificar seu
aprendizado esse no seria um caminho vivel. 2- Atravs do build do seu APP: aps terminar sua aplicao
voc pode ir ao menu conforme mostra a figura abaixo:

Figura 08: build projeto

Selecionando a opo destacada voc ter um arquivo no formato .apk que poder ser instalado em
seu smartphone. Iremos utilizar esta tcnica, mas no para efetuar teste durante o desenvolvimento do
aplicativo, pois perderamos muito tempo fazendo o download a cada modificao no projeto.
3- Finalmente a que iremos usar! E mais fcil de todas. O MIT criou um aplicativo (construdo no
prprio APP Inventor) onde possvel conectar com a plataforma do APP Inventor e acompanhar as

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

alteraes em tempo real. Este aplicativo facilmente encontrado na loja de aplicativos do Google. Basta
pesquisar o seguinte nome: mit ai2 companion.

Figura 09: MIT AI2 Companion

A conexo com a plataforma muito simples, clique em connect no menu superior e escolha a
opo AI Companion.

Figura 10: Conexo com AI2 Companion

Depois ser exibida uma caixa com um QR Code, onde voc pode passar o scanner do prprio
aplicativo ou ainda digitar os 6 caracteres que aparecem ao lado e clicar no boto amarelo, aguardar alguns
segundos, e pronto: voc poder acompanhar em tempo real o seu projeto.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com

Curso APP Inventor Brasil

Figura 11: caixa de dialogo

No prximo tpico vamos comear a desenvolver nossa agenda, e nos aprofundaremos em todos
os assuntos apresentados aqui.

APP Inventor Brasil

contato.appinventorbrasil@gmail.com