Tutorial App Inventor

Para entrar na app abra: http://ai2.appinventor.mit.edu

Capítulos
Conceitos básicos............................................................................................................................................................2
Teclas/operações úteis de controle:................................................................................................................................2
Ferramentas da página:...................................................................................................................................................2
Criar layout/organização:................................................................................................................................................4
Propriedades de um objeto:............................................................................................................................................5
Objeto Imagem/Image:...................................................................................................................................................5
Copiar/Colar objetos:.......................................................................................................................................................6
Objeto Botão/Button:......................................................................................................................................................7
Editar Imagem:................................................................................................................................................................ 7
Esconder Imagem:...........................................................................................................................................................8
Renomear objetos:..........................................................................................................................................................9
Código do programa:.......................................................................................................................................................9
Instalar o Assistente AI ou MIT AI2 Companion (Google Play):......................................................................................12
Como fazer um programa apk:......................................................................................................................................13
Botão com imagem:.......................................................................................................................................................13
Objeto Legenda/Label:..................................................................................................................................................14
Formatar o Ecrã/Screen:................................................................................................................................................14
Objeto Som/Sound:.......................................................................................................................................................15
Programação do projeto 2:............................................................................................................................................16
Objeto reconhecedor de voz:........................................................................................................................................16
Objeto Pintura:..............................................................................................................................................................17
Objeto Bola/Sprite:........................................................................................................................................................18
Como fazer um programa em Inglês/Português?..........................................................................................................20
Objeto Temporizador:...................................................................................................................................................20
Variáveis:....................................................................................................................................................................... 21
Valores matemáticos:....................................................................................................................................................21
Instruções de controle:..................................................................................................................................................21

1
Blocos com variáveis e instruções de controle:.............................................................................................................22
Objeto Imagem:.............................................................................................................................................................24
Objeto Imagem:.............................................................................................................................................................24

Conceitos básicos
O App Inventor é uma plataforma web que permite através de blocos de programação criar programas para android,
com um mínimo de codificação. É simples e intuitivo.

Para que isto seja possível temos que ter uma conta Google e entrar nela, caso contrário não vai funcionar.

Voltar ao índice
Teclas/operações úteis de controle:
BLE – Botão lado esquerdo do rato

BLD – Botão lado direito do rato

Del - apaga um objeto

Voltar ao índice
Ferramentas da página:
Paleta de Objetos - Os objetos são os componentes que iremos colocar no layout (aspeto gráfico da aplicação)

Visualizador – É o nosso ambiente de trabalho, onde vamos criar o layout da aplicação

2
Componentes – são os objetos que colocamos no layout

Propriedades – são as propriedades de cada objeto. Podemos mudar a cor, posição, forma …

Editor de Ecrãs ou Blocos – são as duas formas de programação que temos, o Editor de ecrãs onde construímos o
layout e o editor de Blocos onde damos instruções aos objetos como se vão relacionar entre si (programação).

3
A seguir vamos fazer um pequeno programa e em cada passo vou explicar o componente ou tarefa que vamos
precisar ou executar. Cada tarefa vai estar referenciada no índice, para que mais tarde se possa localizar com
facilidade.

Projeto 1 – utilização de botões e imagens

Após entrar na sua conta Google e no website do Mit App Inventor2, vamos criar um novo projeto com o nome
projeto1

Voltar ao índice
Criar layout/organização:
O Layout é onde colocamos os nossos objetos e é a primeira operação que devemos fazer porque determinará a
forma como se vão apresentar os objetos no ecrã.

Há 4 tipos diferentes, vamos escolher a Organização Vertical

Arrasta com o BLE o objeto OrganizaçãoVertical para o ambiente de trabalho.

O quadrado que aparece no ecrã vai ser um contentor que vai

receber outros objetos e organiza-los de forma vertical. Para isso
temos que alterar as suas propriedades

Voltar ao índice
Propriedades de um objeto:
No lado direito da página temos o menu de propriedades. Com um objeto selecionado, que neste caso é o nosso
contentor/layout, vamos escolher um tamanho vertical e horizontal de forma a ocupar toda a área do ecrã:

4
 O objeto é a OrganizaçãoVertical1, vamos na propriedade da
Altura e escolhemos o preencher principal.

Depois fazemos o mesmo para a Largura, preencher

principal.

Vamos também alterar a cor de fundo

Repare que em Componentes temos o nosso layout

Voltar ao índice
Objeto Imagem/Image:
Arraste um componente imagem para o ambiente de trabalho. Clica no menu do lado esquerdo em Interface de
Usuário e escolhe o objeto imagem.

Agora vamos alterar as propriedades do layout, clica na OrganizaçãoVertical1, depois em alinhamento horizontal e
escolhe centro:

Agora vamos alterar as propriedades da imagem, clica no objeto imagem e:

5
Voltar ao índice
Copiar/Colar objetos:
Agora vamos adicionar outra imagem, mas como a formatação da imagem (propriedades) é idêntica à anterior,
vamos clicar na imagem1 fazer Ctrl+C e Ctrl+V para duplicar a imagem que automaticamente ficará com o nome de
imagem2.

Arraste um com

Voltar ao índice

6
Objeto Botão/Button:
Vamos colocar dois botões no projeto, um de cada vez, arrastando o objeto botão para a área de trabalho:

Alteres as propriedades Texto de cada botão de forma a ter o de

cima com o texto=ON e o de baixo com o texto=OFF

PROPRIEDADE BOTÕES NO ECRÃ

Voltar ao índice
Editar Imagem:
Agora vamos à propriedade da imagem1, Imagem e enviamos a imagem da LuzApagada.png

Clica em enviar ficheiro, depois em explorar, procura a imagem e depois em Abrir e depois novamente em Ok

Faz o mesmo com a segunda imagem para a luz acesa.

7
Voltar ao índice
Esconder Imagem:
Agora vamos esconder a primeira imagem, tirando o visto da opção visível. No ecrã fica só a luz acesa:

Voltar ao índice
Renomear objetos:
Para ser mais fácil a programação vamos renomear os objetos que temos,

imagem1 = imgLuzOff na parte inferior da lista de componentes temos os botões de

imagem2 = imgLuzOn

botao1 = btOn

botao2 = btOff

Depois de selecionar o objeto, clica em Renomear e

coloca o novo nome, para cada um dos objetos

que criamos de acordo com a tabela anterior.

8
Ficamos com os seguintes objetos:

Voltar ao índice
Código do programa:
Vamos à página Blocos, botão no canto superior direito da página,

A programação é feita com blocos de instruções, a mais comum é o evento clique porque é com esse evento que nós
damos instruções no android.

Neste programa queremos que quando a lâmpada está apagada, ao clicar no botão btOn a imagem da lâmpada
mude para acesa e vice versa.

Vamos ao botão btOn e arrastamos o clique para a Visualização

A seguir vamos clicar no objeto imgLuzOff e procurar o comando que muda a imagem para Visível, e arrastamos para
encaixar dentro do comando clique que já temos no visualizador.

9
Agora clicamos em Internos Lógica e

arrastamos o verdadeiro para o último

encaixe do comando anterior

Com esta operação conseguimos ligar a luz porque a imagem da lâmpada ligada vai ficar visível. Mas temos que
colocar a imagem da lâmpada desliga com a propriedade visível = false. Para isso podemos repetir as ações
anteriores e ajusta por baixo do comando da imgLuzOn o comando para a imgLuzOff ou podemos copiar e colar esse
comando e depois alterar as variáveis:

Agora vamos encaixar o comando por baixo do outro e alterar os valores

Neste momento temos um comando clique que tem duas instruções

Em programação na linguagem Python, poderíamos dizer que fizemos uma função com duas instruções:

def btOn.Click():
imgLuzOn.visible=true
imgLuzOn.visible=false

10
Agora para terminar o exercício temos que fazer o mesmo para o outro botão, mas como já temos este botão feito,
podemos volta a copiar e colar o bloco todo quando btOn.clique e alterar os valores:

Voltar ao índice
Instalar o Assistente AI ou MIT AI2 Companion (Google Play):
Para testar se o programa funciona, podemos usar o nosso telemóvel android, para isso vamos ao Google Play e
instamos o programa MIT AI2 Companion.

Após a instalação temos que autorizar a app a usar a câmara do telemóvel.

Vamos fazer um scan QR code que é o mais simples.

Para isso vamos ao menu Conectar e escolhemos a opção assistente AI que vai fazer aparecer o código QR que deve
ser lido pelo telemóvel:

11
Após o código QR ter sido lido,

Voltar ao índice
Como fazer um programa apk:
O apk é o formato de instalação do android, portanto se fizermos um apk vamos poder instalar a nossa app no
android. Para isso vamos ao menu Compilar e escolhemos a opção apk

O programa vais se compilado, que é a palavra que usamos em programação para dizer que estamos a criar o código
máquina para o dispositivo (computador, android,…) e depois guardamos em disco o ficheiro .apk, ou descarregamos
para o android com o código QR. Este link, só vai estar disponível por 2 horas.

Para ler o código QR terá que instalar um leitor QR a partir do Google Play.

12
Quando clicar no link que aparece, após a leitura do código QR, o android pergunta se quer baixar o ficheiro, faz um
alerta que o ficheiro pode danificar o seu telemóvel, pois ele não sabe que ficheiro é esse, mas nós sabemos. Depois
de baixar, diz que quer abrir o ficheiro, a seguir ele pergunta se quer instalar, diz que sim e o programa é instalado
no telemóvel.

O telemóvel pode querer enviar um relatório, porque não conhece o programador, mas como foi feito por nós não
há necessidade de enviar dados para ninguém. Após testar o programa pode desinstala-lo.

Projeto 2 – utilização de ficheiros Mp3 e botão com img

Neste projeto vamos usar um botão com imagem, sem texto, e um ficheiro Mp3.

Voltar ao índice
Botão com imagem:
Arraste um botão para o Visualizador

Apague o texto do botão e importe a imagem da abelha

Voltar ao índice
Objeto Legenda/Label:
O objeto legenda mostra uma linha de texto no ecrã. Arraste uma legenda para o visualizador:

Formate a legenda com os seguintes parâmetros:

13
 e

Voltar ao índice
Formatar o Ecrã/Screen:
Apesar de não termos inserido um layout, podemos formatar o ecrã com várias opções. Neste momento apenas
precisamos de colocar os objetos centrados, para isso clicamos em Screen1, nos componentes e depois nas
propriedades alteramos o alinhamento horizontal:

Voltar ao índice
Objeto Som/Sound:
A paleta tem vários tipos de objetos, divididos por categorias

14
 Vamos ao menu Multimédia e arrastamos um objeto Som para o visualizador:

Vai aparecer em baixo do telemóvel, porque é um objeto “sem visualização”,

isto é, existe no projeto, mas não tem uma forma visual, como o botão ou a
legenda. Podemos, no entanto usa-lo.

Para isso vamos clicar no Som1, ir às propriedades e enviar o ficheiro som

abelha.mp3 para ficar associado ao Som1.

Voltar ao índice
Programação do projeto 2:
Agora passamos aos Blocos e vamos programar o código deste projeto.

O que pretendemos é que quando clicamos na imagem da abelha (botão), o som da abelha se ouça. Vamos arrastar
o objeto botão1.clique para o visualizador e a seguir colocar o som1.tocar encaixado no botão1:

Agora experimente a sua aplicação no telemóvel.

15
Projeto 3 – Fale comigo - Talk to me
No visualizador, coloque um botão e escreva o texto Fale comigo

Voltar ao índice
Objeto reconhecedor de voz:
No menu Multimédia da Paleta, arraste um objeto reconhecedor de voz

Agora vamos passar para os Blocos e programar o botão1

Coloque um botão1.clique no visualizador e depois encaixe o ReconhecedorDeVoz1.ObterTexto dentro do clique do

botão1

Agora experimente o programa, e veja se consegue chamar o serviço de reconhecimento de texto da Google.

Projeto 4 – Bola solta

Neste projeto vamos trabalhar com um sprite que é um objeto animado, neste caso uma bola, que vai rodar no ecrã,
em função do movimento do telemóvel.

A primeira tarefa é bloquear o ecrã para que não aumente de tamanho, para isso vamos à opção de rolável e
retiramos o visto.

16
Voltar ao índice
Objeto Pintura:
No menu de desenho e animação temos o objeto pintura que segundo a sua descrição é:

Vamos arrastar um objeto Pintura para a visualização:

Agora vamos às propriedades da Pintura e vamos mudar o seu tamanho para que ocupe o ecrã todo:

opção % com 100%

17
Voltar ao índice
Objeto Bola/Sprite:
Um sprite é uma imagem com várias imagens dentro delas, isto permite que um programa que reconheça o strite
possa usar cada uma dessas imagens em função ou do movimento ou do tempo. Neste exemplo vamos usar a bola
que está definida no menu:

Arrastamos a bola para dentro do objeto Pintura e alteramos algumas propriedades da bola:

Passamos agora para a programação:

Coloquemos os primeiros blocos que vão fazer o primeiro movimento da bola

18
Para colocar as variáveis de direção e velocidade, podemos colocar durante 3 segundo o rato sobre o nome da
variável que queremos que vai aparecer um menu com as opções para podermos agarrar e colocar nos blocos:

Agora vamos fazer uma opção para quando nós clicarmos na bola e arrastarmos ela no ecrã, para dar outra direção:

Estas duas opções, a primeira que vai dar o movimento inicial e automático e a segunda que vai ser a alteração do
movimento dado pelo utilizador, são relativas ao movimento da bola.

O que acontece quando chega a uma das laterais? Temos que fazer código para que a bola possa continuar a se
movimentar:

Experimente agora o seu programa no android.

Voltar ao índice
Como fazer um programa em Inglês/Português?
Suponha que gostaria de fazer um projeto que está em Inglês. O problema é que os comandos e objetos estão em
Inglês e o seu ambiente de trabalho no Mit está em Português.

Para resolver este problema, vá ao menu superior do Mit onde está Português e escolha English

19
Após uns segundos o seu projeto aparece com o ambiente de trabalho em Inglês e agora já pode segui um PDF ou
YouTube de um projeto na Internet feito em Inglês. Após terminar o projeto, passe para Português e veja quais
foram os comandos utilizados. Com o tempo você vai aprender os comandos em Português sem ter que fazer a
alteração de Linguagem.

Projeto contador
Vamos fazer um contador que vai ser ligado ao temporizador. A cada segundo será decrementado de 1 (x-1) o valor
que está no label/legenda.

Vamos colocar os seguintes objetos, Botão, Legenda e um Temporizador

Voltar ao índice
Objeto Temporizador:
Arraste um temporizador para o projeto. O temporizador está nos sensores. Verifique que a propriedade intervalo de
tempo do temporizador está a 1000 milissegundos, que corresponde a 1 segundo.

Passemos agora para a programação de blocos.

Voltar ao índice
Variáveis:
A variável é uma zona de memória onde guardamos dados no computador. Ela pode ser global e vista em todo o
programa, ou pode ser local, isto é, só é vista dentro do bloco onde está definida (por exemplo o x ou y no caso da
posição do objeto). Vamos fazer uma variável global temporizador e vamos atribuir um valor de 10:

Voltar ao índice
Valores matemáticos:
O primeiro elemento do separador matemática é um objeto onde podemos dar um valor que pretendemos. Usamos
este objeto para inicializar as variáveis.

Voltar ao índice

20
Instruções de controle:
As instruções de controle servem para controlar o fluxo do programa. Vou explicar cada uma delas com exemplos
matemáticos e à medida que formos precisando vamos voltar aqui para ver como funcionam:

Instrução condicional Se/Então/Senão

Nesta instrução o programa pode ter 1 ou 2 saídas que dependem do resultado de uma pergunta/condição

Se x>5
(V) Então “faz qualquer coisa”

Nota: Se o x for <=5 então continua para frente não faz nada, só temos 1 saída

Se x>5
(V) Então “faz qualquer coisa”
(F) Senão “faz outra coisa”

Nota: Se o x for >5 faz a primeira instrução, caso contrário fará a 2ª. Neste exemplo temos
sempre saídas possíveis.

Aqui temos o chamado if ou se encadeado, isto é, a instrução pode ter várias saídas, por
exemplo um menu
1 – Abre
2 – Fecha
3 – Sai
Teremos 3 saídas então usamos esta instrução

Instruções de ciclo

As instruções de ciclo servem para repetir tarefas que podem ser ou iguais ou parecidas. Por exemplo lavar 10 pratos
é a mesma tarefa, só que com pratos diferentes em cada iteração (nome que se dá ao ciclo).

Há três tipos de ciclo:

Ciclo Para/For

Para i=1 até 10 faz - ciclo finito porque 10-1+1=10 faz 10x
o que queremos. Agora em Inglês, se fosse

For i=5 to 10 do - o ciclo iria se repetir 10-5+1=6 x (numa

primeira abordagem pensaríamos em 5x por isso é que é
bom aplicar esta regra do último-primeiro+1)

Ciclo Para Cada/For each

21
Este ciclo é parecido com o anterior, mas é usado num conjunto de elementos de forma a passar por todos os
elementos. Ex: frutas={banana, laranja, abacaxi, morango}

Para cada fruta em frutas faz “Diz o nome da fruta” - fruta é uma variável local que é vai conter em cada iteração
um dos elementos do conjunto frutas.

Ciclo Enquanto

É um ciclo não finito, pode ser infinito ou ter um certo número indeterminado de iterações.
Porque indeterminado? Porque para parar o ciclo vamos testar uma condição como
fizemos no Se/Então. Neste caso a variável de teste chama-se testar.

Enquanto x>0 faz

“mostra o valor de x”

x=x-1

Nota: Repare que nos ciclos anteriores não se controla a variável de ciclo, mas aqui estamos a controlar para
diminuir o valor de x e numa certa altura ele ser 0 e sair do ciclo.

Voltar ao índice
Blocos com variáveis e instruções de controle:
Agora no seu projeto e recorrendo aos controles internos, faça os seguintes blocos e teste o programa no android.

22
Explicação:

Para controlar a quantidade de vezes que vamos ver o temporizador, ele foi inicializado com o valor de 10

Para controlar o clock1, temos que habilitar o clock apenas quando clicarmos no botão. Para isso fez-se uma variável
booleana, com o valor inicial de falso. Só passa a verdadeiro quando clicamos no botão.

Quando o programa começa, as duas variáveis são inicializadas e o clock1 como tem uma condição Se que depende
do inicia, não vai executar as restantes instruções, apenas quando clicarmos no botão e inicia for True.

Quando inicia passa a true, o clock 1 já vai fazer o então e

Mostra o valor no label

Compara o temporizador com 0 para saber se continua ou para o programa.

23
Voltar ao índice
Objeto Imagem:
Arraste um com

Voltar ao índice
Objeto Imagem:
Arraste um com

24