O documento descreve como criar aplicativos para Android usando o App Inventor 2. Ele explica o que é o App Inventor 2, como instalá-lo e utilizá-lo, dá um exemplo de aplicação criada com ele e instruções para como criar um aplicativo semelhante.

1. Programação 1
IFES, SERRA-ES.
App Inventor 2
André Felipe Santos Martins

2. Programação 1
IFES, SERRA-ES.
Sumário
1. O que é o App Inventor 2................................................. 3
2. Como instalar e Utilizar.................................................... 4
3. Exemplo de aplicação .................................................... 11
4. Criando um App semelhante ........................................ 14

3. Programação 1
IFES, SERRA-ES.
1. O que é o App Inventor 2
Conhecido como MIT App Inventor, o App Inventor é uma
aplicação de código aberto criada pela Google lançada 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 gráfica, que permite ao
usuário programar por meio de blocos visuais, que serão
posteriormente executados em um dispositivo android.
Na criação do App Inventor o Google deu bastante atenção à
informação educativa e também em ambientes de desenvolvimento
Online.

4. Programação 1
IFES, SERRA-ES.
2. Como instalar e Utilizar
Para que tu possas iniciar o desenvolvimento no App Inventor,
apenas é necessário ter instalado Chrome ou Firefox no seu
computador. Então 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.

5. Programação 1
IFES, SERRA-ES.
Após 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 estão propriedades
do elemento selecionado, que podem ser alterados conforme
desejado. Na aba components estão todos os componentes que
foram arrastados para a tela.

6. Programação 1
IFES, SERRA-ES.
Faremos aqui um exemplo onde o usuário digita algum texto
na textbox, clica no botão 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 variáveis. Para isso, na
acaba de componentes, apenas selecione o componente e clique
em “Rename”, digite o novo nome e confirme.

7. Programação 1
IFES, SERRA-ES.
Após adicionar os elementos e mudar o nome para o
desejado, para iniciar a desenvolver a parte lógica é necessário ir
para a área de blocos, clicando no botão “Blocks” no canto superior
direito, acima da aba de propriedades.
Nessa área, na aba “Blocks” é onde ficam todos os blocos da
área lógica do aplicativo. Para iniciar o desenvolvimento é
necessário apenas que selecione o que deseja ser usado e arrastar

8. Programação 1
IFES, SERRA-ES.
para o quadro branco. Organizando de forma lógica os passos a
serem seguidos.
Nesse exemplo os seguintes blocos/eventos foram feitos:
 Quando clicar no botão:
 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, é necessário baixar o driver aiStarter. Após
o download, é necessário fazer a instalação. Ao finalizar a
instalação só é necessário abrir o ícone do aiStarter na área de
trabalho. Então, na página do App Inventor clicar em Connect ->
Emulator. Assim o emulador irá iniciar.
Todavia, a melhor opção 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 código QR a ser lido é encontrado ao clicar em Connect ->
Al Companion.

9. Programação 1
IFES, SERRA-ES.
Após a leitura do código, o que foi desenvolvido no App
Inventor vai automaticamente ser executado no aparelho. E assim
pode ser testado.

10. Programação 1
IFES, SERRA-ES.
E como foi demonstrado, está tudo funcionando corretamente
nesse teste.
O App Inventor possui muitos elementos e pode sim ter
aplicações 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).

11. Programação 1
IFES, SERRA-ES.
3. Exemplo de aplicação
Como exemplo de aplicação, desenvolvi um cronômetro. O
CronôDroid.
O app tem um uso bem simples, sendo que ao clicar em
Iniciar o cronômetro começa a contar.

12. Programação 1
IFES, SERRA-ES.
Ao clicar em volta, é criada uma lista de voltas, que são
usadas para marcar voltas ou algum tempo específico desejado.
Ao clicar em parar o contador para, e o botão torna-se em “Zerar”.
Ao clicar em zerar o contador é zerado e todas as voltas são
apagadas.

13. Programação 1
IFES, SERRA-ES.
Link para teste: https://goo.gl/kTNaiw

14. Programação 1
IFES, SERRA-ES.
4. Criando um App semelhante
O primeiro passo para criar um App semelhante ao CronôDroid é
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 são posicionados
dentro dele.
Apenas clique e arraste-o pela tela. Ele é representado por um
painel em branco na tela.

15. Programação 1
IFES, SERRA-ES.
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 botões para dentro do
painelBotoes. Em cada botão 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%.

16. Programação 1
IFES, SERRA-ES.
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 botão, com a
propriedade Width em 100%.
Após esse novo botão vamos inserir um novo elemento cahamdo
ListView, que é um elemento para fazer a exibição de listas, no
qual, usaremos para contar as voltas do cronômetro.
O resultado é o seguinte:

17. Programação 1
IFES, SERRA-ES.
Por fim vamos alterar o label de cada botão, 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 não é visível. Ele
será utilizado para fazer a contagem usando o timer. O relógio tem
uma propriedade chamada TimerInterval que deve ser setada em
100.
Após isso, verifique se os nomes de cada elemento
corresponde ao meu exemplo, assim podemos prosseguir para a
parte lógica.

18. Programação 1
IFES, SERRA-ES.
 Parte Lógica
Dando inicio na parte logica da aplicação, a primeira coisa que fiz
foi declarar as váriaveis 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 concatenação do tempo
das variaveis min, seg e mili.

19. Programação 1
IFES, SERRA-ES.
 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 inicialização de
tela, para que o Timer esteja parado e o botão volta desativado
enquanto o cronômetro não está a correr.
O próximo passo foi implementar o clique do botão de
iniciar(btnStart), que usa o bloco seguinte:
A sequencia de eventos é a seguinte:
 Seta a propriedade Text do botão btnCleanReset para
“PARAR”, para ficar mais claro ao usuário onde clicar para
que o cronômetro pare.
 Alterar a propriedade TimerEnabled do relógio para True,
assim o timer começa a correr, acionando os eventos que
veremos a seguir.
 Seta o botão btnVolta como ativado, para que o usuário possa
clicar e marcar voltas, adicionando-as na lista.

20. Programação 1
IFES, SERRA-ES.
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(função), onde é feita
a contagem e OrganizeTime é a função que organiza o label do
cronômetro a ser exibido na tela.
Na função GetTimeRunning está toda a lógica 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.

21. Programação 1
IFES, SERRA-ES.
A função OrganizeTime simplesmente faz uma concatenação
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 variável tempo
é setado na label txtClock para que seja exibido na tela o valor
atual.

22. Programação 1
IFES, SERRA-ES.
Para o evento do botão btnVolta foi utilizado os seguintes
blocos.
Esse evento é responsável por concatenar um novo tempo a string
timeToShow. Sendo que os tempos tem de ficar separados por
vírgula para ter uma quebra de linha, visualmente na lista.

23. Programação 1
IFES, SERRA-ES.
Para o evento do botão btnCleanReset, foram utilizados os
seguintes blocos.
Aqui foi utilizado uma lógica simples na qual, a primeira vez
que o botão é apertado, o botão de volta é desativado, o label do
botão é alterado para “ZERAR” e o Timer é parado.
Caso haja um segundo clique seguido no botão, caso o Timer
esteja parado, a condição do If é verdadeira todas as variaveis
globais são zeradas para o estado inicial.

24. Programação 1
IFES, SERRA-ES.

25. Programação 1
IFES, SERRA-ES.
Como resultado final temos o conjunto de blocos na pagina anterior, e o
aplicativo com o seguinte visual.
As questões de cores, tamanhos, posições e entre outras questões
visuais vão de cada pessoa. Todas elas podem ser alteradas nas
propriedades de cada elemento, podendo varias de pessoa para pessoa sem
problemas. O importante para que o aplicativo funcione corretamente está na
parte lógica.