App Inventor 2

Sumrio

1. O que o App Inventor 2 ................................................. 3

2. Como instalar e Utilizar .................................................... 4
3. Exemplo de aplicao .................................................... 11
4. Criando um App semelhante ........................................ 14
 1. O que o App Inventor 2

Conhecido como MIT App Inventor, o App Inventor uma

aplicao de cdigo aberto criada pela Google lanada em 15 de
Dezembro de 2010, e hoje mantida pelo Massachusetts Institute of
Technology (MIT).

Com ele os programadores iniciantes podem criar aplicativos

para o SO Android. Utilizando uma interface grfica, que permite ao
usurio programar por meio de blocos visuais, que sero
posteriormente executados em um dispositivo android.

Na criao do App Inventor o Google deu bastante ateno

informao educativa e tambm em ambientes de desenvolvimento
Online.
 2. Como instalar e Utilizar

Para que tu possas iniciar o desenvolvimento no App Inventor,

apenas necessrio ter instalado Chrome ou Firefox no seu
computador. Ento acesse esse LINK e clique em Projects -> Start
a new Project, digite um nome para seu novo projeto e a tela inicial
de desenvolvimento ir abrir.
 Aps teu novo projedo ser criado, tu podes iniciar o
desenvolvimento, simplesmente selecionando elementos na Aba
Pallete no lado esquerdo da tela e arrastando para dentro da tela.

Na aba Properties do lado direito da tela esto propriedades

do elemento selecionado, que podem ser alterados conforme
desejado. Na aba components esto todos os componentes que
foram arrastados para a tela.
 Faremos aqui um exemplo onde o usurio digita algum texto
na textbox, clica no boto e altera o valor da label para o texto
digitado, em seguida apaga o que est digitado na textbox.
Iniciando por alterar o nome das variveis. Para isso, na
acaba de componentes, apenas selecione o componente e clique
em Rename, digite o novo nome e confirme.
 Aps adicionar os elementos e mudar o nome para o
desejado, para iniciar a desenvolver a parte lgica necessrio ir
para a rea de blocos, clicando no boto Blocks no canto superior
direito, acima da aba de propriedades.

Nessa rea, na aba Blocks onde ficam todos os blocos da

rea lgica do aplicativo. Para iniciar o desenvolvimento
necessrio apenas que selecione o que deseja ser usado e arrastar
para o quadro branco. Organizando de forma lgica os passos a
serem seguidos.

Nesse exemplo os seguintes blocos/eventos foram feitos:

Quando clicar no boto:
Setar valor da saida como o valor que foi digitado
Setar valor da textbox como vazio

Tudo pronto, vamos para a etapa de testes! Para usar um

emulador no windows, necessrio baixar o driver aiStarter. Aps
o download, necessrio fazer a instalao. Ao finalizar a
instalao s necessrio abrir o cone do aiStarter na rea de
trabalho. Ento, na pgina do App Inventor clicar em Connect ->
Emulator. Assim o emulador ir iniciar.

Todavia, a melhor opo para testar o aplicativo utilizando

um aparelho android. Para isso s instalar este App no seu
dispositivo android, e ao abri-lo, selecionar para ler um codigo QR.
O cdigo QR a ser lido encontrado ao clicar em Connect ->
Al Companion.
 Aps a leitura do cdigo, o que foi desenvolvido no App
Inventor vai automaticamente ser executado no aparelho. E assim
pode ser testado.
 E como foi demonstrado, est tudo funcionando corretamente
nesse teste.

O App Inventor possui muitos elementos e pode sim ter

aplicaes muito mais complexas desenvolvidas nele. Visto que o
que fizemos aqui foi apenas um exemplo.

Para gerar o .apk do aplicativo, s clicar em Build >

App(Save .apk on my computer).
 3. Exemplo de aplicao

Como exemplo de aplicao, desenvolvi um cronmetro. O

CronDroid.

O app tem um uso bem simples, sendo que ao clicar em

Iniciar o cronmetro comea a contar.
 Ao clicar em volta, criada uma lista de voltas, que so
usadas para marcar voltas ou algum tempo especfico desejado.

Ao clicar em parar o contador para, e o boto torna-se em Zerar.

Ao clicar em zerar o contador zerado e todas as voltas so
apagadas.
 4. Criando um App semelhante

O primeiro passo para criar um App semelhante ao CronDroid

cirar um novo projeto.

Com um novo projeto criado, o

primeiro elemento a ser adicionado
o HorizontalArrangement, que um
elemento de layout utilizado para
organizar outros elementos de forma
horizontal, que so posicionados
dentro dele.

Apenas clique e arraste-o pela tela. Ele representado por um

painel em branco na tela.
 Na aba de componentes vamos renomea-lo para
painelBotoes. Na aba de propriedades vamos alterar a
prorpriedade AlignHorizontal para center e a propriedade Width
para 100%.

Agora vamos arrastar dois botes para dentro do

painelBotoes. Em cada boto a propriedade Width deve ser setada
para 50%, resultando no seguinte:

Agora vamos adicionar um novo elemento de layout chamado

VerticalArrangement, que serve para organizar elementos dentro
dele de forma vertical. Vamos renomear esse painel para
painelCronometro e setar suas propriedades AlignHorizontal para
center, AlignVertical para Top e Width para 100%.
 Agora, dentro do painelCronograma vamos inserir um label,
que um elemento de texto, que servira de contador. Vamos
renomear o label para txtClock. Esse label deve ter as seguintes
propriedades setadas:
FontBold: Checado
FontSize: 45
Text: 00:00:00
TextAlign: Center

Logo abaixo do painelCronometro vamos inserir um boto, com a

propriedade Width em 100%.
Aps esse novo boto vamos inserir um novo elemento cahamdo
ListView, que um elemento para fazer a exibio de listas, no
qual, usaremos para contar as voltas do cronmetro.
O resultado o seguinte:
 Por fim vamos alterar o label de cada boto, na propriedade
Text, como na imagem seguinte. O tamanho e estilo da fonte
encontram-se todas na aba de propriedades, como mostrado
anteriormente.

Por fim temos que adicionar um novo elemento chamado

Clock que se encontra na aba Sensors da palheta. Basta arrastar
para tela que ele ser adicionado. Esse elemento no visvel. Ele
ser utilizado para fazer a contagem usando o timer. O relgio tem
uma propriedade chamada TimerInterval que deve ser setada em
100.

Aps isso, verifique se os nomes de cada elemento

corresponde ao meu exemplo, assim podemos prosseguir para a
parte lgica.
 Parte Lgica

Dando inicio na parte logica da aplicao, a primeira coisa que fiz

foi declarar as vriaveis globais, como seguinte:

Sendo:
min, seg e mili relativos ao tempo, e seriam usados para
contar e atualizar a label do cronograma.
volta utilizada para contar a quantidade de voltas
tempo que seria o texto equivalente a concatenao do tempo
das variaveis min, seg e mili.
 timeToShow, o conjunto de todos os tempos a serem
mostrados na lista, separados por virgula, que faz a quebra de
linha na tela.

Em seguida, o primeiro evento que usei foi o de inicializao de

tela, para que o Timer esteja parado e o boto volta desativado
enquanto o cronmetro no est a correr.

O prximo passo foi implementar o clique do boto de

iniciar(btnStart), que usa o bloco seguinte:

A sequencia de eventos a seguinte:

Seta a propriedade Text do boto btnCleanReset para

PARAR, para ficar mais claro ao usurio onde clicar para
que o cronmetro pare.
Alterar a propriedade TimerEnabled do relgio para True,
assim o timer comea a correr, acionando os eventos que
veremos a seguir.
Seta o boto btnVolta como ativado, para que o usurio possa
clicar e marcar voltas, adicionando-as na lista.
 Quando setamos a propriedade do relogio TimerEnabled como
true, um evento iniciado, e nele que fazemos a contagem do
tempo, como demonstrado no bloco a seguir.

Onde GetTimeRunning uma procedure(funo), onde feita

a contagem e OrganizeTime a funo que organiza o label do
cronmetro a ser exibido na tela.

Na funo GetTimeRunning est toda a lgica de contagem.

Onde mili sempre incrementada em +1, e caso seja maior que 9,
ela volta a 0 e incrementa 1 a seg e assim sucessivamente,
efetuando toda a contagem.
 A funo OrganizeTime simplesmente faz uma concatenao
de texto do tempo. Verificando se o numero tem apenas um
algarismo para colocar o zero na frente, para ficar visualmente
melhor. Ex: 01:10:01

Como ltimo passo do evento Timer, o valor da varivel tempo

setado na label txtClock para que seja exibido na tela o valor
atual.
 Para o evento do boto btnVolta foi utilizado os seguintes
blocos.

Esse evento responsvel por concatenar um novo tempo a string

timeToShow. Sendo que os tempos tem de ficar separados por
vrgula para ter uma quebra de linha, visualmente na lista.
 Para o evento do boto btnCleanReset, foram utilizados os
seguintes blocos.

Aqui foi utilizado uma lgica simples na qual, a primeira vez

que o boto apertado, o boto de volta desativado, o label do
boto alterado para ZERAR e o Timer parado.
Caso haja um segundo clique seguido no boto, caso o Timer
esteja parado, a condio do If verdadeira todas as variaveis
globais so zeradas para o estado inicial.
 Como resultado final temos o conjunto de blocos na pgina anterior, e o
aplicativo com o seguinte visual.

As questes de cores, tamanhos, posies e entre outras questes

visuais vo de cada pessoa. Todas elas podem ser alteradas nas
propriedades de cada elemento, podendo variar de pessoa para pessoa sem
problemas. O importante para que o aplicativo funcione corretamente est na
parte lgica.