Tutorial App Inventor

DP.FR.
49
STATUS - ESCOLA PROFISSIONAL LOUSÃ
CURSO: Programador Informático – 1º ano
DISCIPLINA: PROGRAMACAO PARA DISPOSITIVOS MOVEIS
MÓDULO/UFCD: Design e desenvolvimento de aplicações móveis / 9976
ANO LETIVO: 2020_/2021_
Tutorial App Inventor
Tutorial de Programação Android – Lição 1
Atualmente o Android é o sistema operativo móvel mais usado no mundo.

Em 2013 estava presente em cada 4 de 5 smartphones, possuindo 81% do mercado.
O Android tem ferramentas de fácil compreensão para que qualquer pessoa com um mínimo
conhecimento de programação possa criar uma aplicação. Assim, rapidamente foi aumentando o número
de aplicações na "play store" da google, onde qualquer pessoa pode colocar a sua aplicação disponivel
gratuitamente, ou para venda.
Os utilizadores de arduino rapidamente se aperceberam da possibilidade de interagir no arduino através
de um dispositivo móvel com android, permitindo criar inúmeras aplicações através desta interação.
MIT App Inventor
A ferramenta mais fácil de utilizar para que alguém com mínimo conhecimento de programação possa
criar uma aplicação é o MIT "App Inventor".
Esta ferramenta, faculta um editor de interface gráfico através do simples "arrasto" de componentes,
EmeQuatro - Educação e Serviços, Lda.

STATUS - Escola Profissional Lousã - Rua Dr. Henrique Figueiredo, 3200-235 LOUSÃ
Tel. 239991649 https://status.edu.pt/
Contribuinte nº 503765457
como é o caso de botões, labels, recursos, listas, etc...
Para utilizadores mais avançados, tem ainda um editor de blocos pré-programados que permitem executar
tarefas, sem ser necessário criar um código escrito.
Blocos
Os blocos da ferramenta "MIT App Inventor", são parecidos com um puzzle, encaixando uns nos outros
criando um conjunto de regras e operações que são desenvolvidas ao longo da utilização da aplicação
criada.
Para que as regras e operações sejam realizadas é necessário que o utilizador da aplicação interaja com
esta através do interface gráfico. Aí são colocados os elementos de entrada e saida de informações.
Utilização da ferramenta “MIT App Inventor 2”
A ferramenta "MIT App Inventor 2", é uma plataforma utilizada via navegador de internet. Atenção que
tem apenas suporte para o "Firefox" e "Chrome".
Para iniciar a sua utilização, aceder ao site:
http://appinventor.mit.edu/explore/
É necessário criar uma conta para a sua utilização ou então, para quem tem um endereço de e-mail gmail,
basta ter sessão inicializada no chrome, aceder ao site e clicar no botão "Create" no canto superior
esquerdo. O mesmo serve para quem não tem conta no gmail, basta clicar no botão "Create" e seguir
todos os passos com atenção.

Ambiente MIT App Inventor 2
A ferramenta funciona como uma cloud (armazena os projetos criados num servidor próprio, não
precisando ser guardados no computador).
A ferramenta tem uma barra de tarefas no topo, onde aparecem dois menus muito importantes, "Project" e
"Build". O menu "Project" permite criar um projeto novo, abrir um projeto previamente guardado e
guardar um projeto. No caso do menu "Build", este permite essencialmente a criação de um ficheiro de
instalação da aplicação criada, que será depois guardado no disco do computador (normalmente na pasta
de transferências).
Criar um novo projeto

Para criar um novo projeto, no menu "Project" carregar em "New ...", aparecendo uma janela para ser
escrito o nome que vamos dar ao projeto.
Após escrever o nome do projeto, carregar "Ok", para seguir para a página de desenho da interface da
aplicação.
A página de desenho da interface da aplicação é constituída por 4 zonas fundamentais, a "Palette", a

"Viewer", a "Components" e a "Properties".

Na zona "Palette", podem encontrar-se todos os tipos de componentes de uma aplicação, como é o caso
dos botões, as listas, as caixas de seleção, as etiquetas, etc...
Na zona "Viewer", a qual imita um ecrã de um dispositivo Android, pode ver-se o aspeto, da futura
aplicação e podemos arrastar da "Palette", os componentes para o ecrã do "Viewer".
Na zona "Components", podem encontrar a lista de componentes que já colocamos na nossa aplicação,
numa forma de hierarquia, vendo que componente depende de qual.
Na zona "Properties",podem definir-se todas as propriedades de um componente, por exemplo, se for um

botão, vamos à lista de componentes ou ao ecrã, e seleccionamos o botão que queremos alterar,
aparecendo na zona de propriedades, todas as propriedades do mesmo, permitindo alterar a cor, o texto, a
posição, o tamanho,etc...

No canto superior direito estão dois botões que permitem mudar da página de desenho de interface para a
página de edição de blocos.
Na página de edição de blocos, existem duas zonas fundamentais, a zona "Blocks" e a zona "Viewer".
Neste caso os blocos vão substituir o código escrito, e estes estão agrupados em vários conjuntos,
dependendo do tipo:
-- Control - blocos de controlo (se isto acontecer então acontece aquilo - IF THEN)
-- Logic - blocos logicos (Verdadeiro ou Falso)
-- Math - blocos matemáticos (somas, subtrações,etc...)
-- Text - blocos de texto (inserir, alterar, guardar um texto)
-- Lists - blocos de listas (criar listas de opções)
-- Colors - blocos de cores (alterar a cor de um componente ou texto)
-- Variables - blocos de variáveis (criar variaveis)
-- Procedures - blocos de procedimentos (quando algo acontece é realizada uma ação)
Existem mais do que este conjunto, pois cada componente do interface, por exemplo um botão, também
tem os seus próprios blocos.

Os blocos podem ser vistos como puzzles, que encaixados uns nos outros criam um conjunto sequencial
de operações.
Exemplo 1 – Sem Hardware

O primeiro exemplo de aplicação consiste, em entender com executar uma ação, sendo esta consequência
de uma ação anterior, ou seja, quando um botão for carregado, o texto apresentado numa label vai alterar.
A aplicação consiste em dois botões, botão A e botão B, e numa label, na qual, inicialmente vai estar o
texto "Nenhum Botão Pressionado". Quando se pressionar o botão A, o texto da Label vai mudar para
"Botão A pressionado" e no B "Botão B pressionado".
Desenho do Layout (Designer)
Primeiro de tudo, devemos selecionar o "Screen1" na tabela de componentes para definirmos quais as
suas propriedades.
Inicialmente, remover, nas propriedades do Screen 1 a opção "Scrollable" pois esta vai permitir colocar o
alinhamento do ecrã centrado segundo a vertical. Seguidamente colocar as opções:
-- AlignHorizontal: Center (Centra os componentes segundo a horizontal)
-- AlignVertical: Center (Centra os componentes segundo a vertical)
-- BackgroundColor: Light Gray (Cor de fundo)
-- ScreenOrientation: Sensor (Como se comporta o ecrã, neste caso se rodar-mos o dispositivo móvel, o
ecrã roda, acompanhando o movimento.
-- Title: Início
NOTA: As opções não referidas, devem ficar como estão por defeito, mas sendo que muitas são de
personalização, fica ao critério de cada um.

Adicionar um "VerticalArrangement" ao screen, bastando ir à tab "Layout" da Palette, e arrastando para o
screen o "VerticalArrangement".
Relativamente à propriedades deste:

-- AlignHorizontal: Center
-- AlignVertical: Center
-- Width: Fill Parent
-- Height: Fill Parent
Seguidamente devem ser adicionados uma label e dois botões, os quais podem ser encontrados na tab
"User Interface" da Palette. Estes deve ser colocados dentro do Verticalarrengement, aparecendo as
dependencias nos componentes como pode ser observado na imagem à direita.
NOTA: Quando um componente esta abaixo de outro com um pequeno avanço, quer dizer que está
introduzido dentro deste, e que depende dele.

Propriedades:
Label1:
-- Ativar a opção "FontBold"
-- FontSize: 18.0
-- Text: Nenhum Botao Pressionado
-- TextAlignment: center
-- Width: Fill Parent...
-- Height: Automatic...
Button1:
-- BackgroundColor: Red
-- FontSize: 18.0
-- Text: Botao A
-- TextColor: White
Button2:
-- BackgroundColor: Blue
-- FontSize: 18.0
-- Text: Botao B
-- TextColor: White

Construção de Blocos (Blocks)
Para iniciar, começando pelo botão 1, colocar no viewer o bloco [when Button1.Click do] que pode ser
encontrado na Palette->Screen1->Verticalarrengement1->Button1.
Depois, vamos encaixar do lado direito nesse bloco, um bloco que define a label e lhe permite alterar o
texto, bloco [set Label1.Text to] que está em Palette->Screen1->Verticalarrengement1->Label1.
No final vamos utilizar um bloco de texto [" "] que esta na tab Text, como observado na figura à direita e
como car nele o texto "Botao A pressionado".
O mesmo deve ser feito para o Botão dois, sendo que desta vez o bloco do botão deve ser adquirido na
Palette->Screen1->Verticalarrengement1->Button2.
Para o botão B o texto da label será ""Botao B pressionado"
Exemplo 2 – Sem Hardware

O segundo exemplo de aplicação consiste, em entender como executar uma ação com base em variáveis,
fazendo uma alteração de uma variável com base no click de um botão.
A aplicação consiste em três botões, botão "Somar 1", botão "Subtrair 1" e botão "Multiplicar por 2", e
numa label, na qual, será mostrada uma variável, que inicialmente vai estar com o valor "0". Quando se
pressionar o botão "Somar 1", a Label vai mostrar a operação matemática executada, por exemplo, se a
Label mostra o valor "0" e carregarmos uma vez no botão "Somar 1", ela vai passar a ter o valor "1", e
assim sucessivamente com o resto dos botões.

suas propriedades.
-- BackgroundColor: Light Gray (Cor de fundo)
-- ScreenOrientation: Sensor (Como se comporta o ecrã, neste caso se rodar-mos o dispositivo móvel, o
ecrã roda, acompanhando o movimento.
-- Title: Início
Adicionar um "VerticalArrangement" ao screen, bastando ir à tab "Layout" da Palette, e arrastando para o
screen o "VerticalArrangement".

Seguidamente devem ser adicionados uma Label, um HorizontalArrengement e um botões, os quais

podem ser encontrados na Palette. Estes deve ser colocados dentro do VerticalArrengement, aparecendo
as dependências nos componentes como pode ser observado na imagem à direita, tendo em conta que a
ordem, começando em cima é Label -> HorizontalArrengement -> Botão.
NOTA: Quando um componente esta abaixo de outro com um pequeno avanço, quer dizer que está
introduzido dentro deste, e que depende dele.

Seguidamente são colocados dois botões dentro do HorizontalArrangement, e são definidas as
propriedades dos 5 componentes.
Label1:
-- FontSize: 20.0
-- Text: 0
-- TextAlignment: Center
-- Height: Fill Parent...
HorizontalArrangement1:
Button1:
-- BackgroundColor: Yellow
-- FontSize: 20.0
-- Text: Multiplicar por 2
-- TextColor: Black
Button2:
-- BackgroundColor: Red
-- FontSize: 20.0
-- Text: Somar 1
-- TextColor: Black
Button3:
-- BackgroundColor: Blue
-- FontSize: 20.0

-- Text: Subtrair 1
-- TextColor: Black

Primeiro deve criar-se uma variável, ou seja, um local onde vamos guardar o valor que será mostrado no
ecrã (Label).
Para tal deve ir-se a Blocks->built-in->Variables, que se encontra no lado esquerdo, e adicionar o bloco
"initialize global NAME to", e ligado a esse bloco, vamos colocar o bloco "0" que pode ser encontrado
em Blocks->built-in->Math.
No bloco "initialize global NAME to", onde está escrito NAME vamos dar um nome à variável, por
exemplo "numero" e o bloco "0" deixa-se ficar a 0 pois queremos que quando o programa inicia apareça
na label 0.
Finalmente é necessário criar os eventos que fazem com que os cálculos sejam feitos, neste caso:

-- Somar 1 ao valor guardado na variável;
-- Subtrair 1 ao valor guardado na variável;
-- Multiplicar por 2 o valor da variável.
Começando pela soma, que é representada pelo botão 2, inserir os seguintes blocos, como apresentado na
figura à direita:
-- Blocks->Screen1->VerticalArrangement1->HorizontalArrangement1->Button2 BLOCO: "when
Button2.Click do"
-- Blocks->built-in->Variables BLOCO: "set ... to"
-- Blocks->built-in->Math BLOCO: " ... + ... "
-- Blocks->built-in->Variables BLOCO: "get ..."
-- Blocks->built-in->Math BLOCO: "0" ( colocar 1, em vez de zero)
-- Blocks->Screen1->VerticalArrangement1->Label BLOCO: "Set Label1.Text to"
-- Blocks->built-in->Variables BLOCO: "get ..."
Para o botão 3 (subtração) em vez do bloco " ... + ... ", usar o " ... - ... " e no botão 1 (multiplicação) usar "
... x ... ".
A lógica da união dos blocos pode ser vista na figura à direita.
Exemplo soma: Quando o botão da soma é pressionado, ao valor apresentado no ecrã é somado 1 e depois
o resultado dessa soma é apresentado no ecrã.
Exemplo 3 -Com Hardware (com transmissão de video)

O terceiro exemplo de aplicação consiste, em criar uma interface de controlo num smartphone android de
modo a controlar um robô.
A aplicação consiste em diversos botões, que quando pressionados mandam uma mensagem para o
arduino de modo a que um movimento seja realizado pelo robô.
suas propriedades.
-- BackgroundColor: White (Cor de fundo)
-- ScreenOrientation:Landscape.
-- Title: Controlo Remoto
Adicionar um "HorizontalArrangement" ao screen, bastando ir à tab "Layout" da Palette, e arrastando

para o screen o "HorizontalArrangement".


Adicionar um "BluetoothClient" ao screen, bastando ir à tab "Connectivity" da Palette, e arrastando para
o screen o "BluetoothClient".
Seguidamente devem ser adicionados dois VerticalArrengement e um WebViewer, os quais podem ser
encontrados na Palette. Estes deve ser colocados dentro do HorizontalArrengement. O WebViewer deve
ficar no meio dos dois VerticalArrengement .
NOTA: A ordem deve ser, começando da esquerda para a direita -> VerticalArrengement2 ->
WebViewer1 -> VerticalArrengement1.
É necessário definir o Height dos Vertical arrangement para "Fill Parent".
Seguidamente são adicionados os componentes de input, um "ListPicker", um botão e 4 canvas.

O "ListPicker" e os canvas 1 e 2 são colocados no "VerticalArrangement" da esquerda e os restantes
componentes no da Direita, como pode ser visto na imagem.
Propriedades dos componentes:
ListPicker1:
-- Enabled: Checar a box
-- FontSize: 14.0
-- Text: Ligar
-- TextColor: Black
-- Width: 80 pixels..
-- Height: 40 pixels..
Button1:
-- FontSize: 14.0
-- Text: Desligar
-- TextColor: Black
-- Width: 80 pixels..
-- Height: 40 pixels..

Para definir as propriedades dos "Canvas" é necessário fazer upload das imagens que vão ser associadas
aos mesmos. Para tal, no canto inferior direito existe a tabela de "media" onde está disponivel o botão
upload.
Canvas1:
-- BackgroundColor: White
-- BackgroundImage: "Frente.png"
-- Width: 80 Pixels ..
-- Height: 80 Pixels ..
Canvas2:
-- BackgroundImage: "Tras.png"
Canvas3:
-- BackgroundImage: "Esquerda.png"
Canvas4:
-- BackgroundImage: "Direita.png"

Download Imagens para Canvas
Base de dados de imagens

Download
No final, na tabela de componentes, os componentes devem aparecer com a hierarquia apresentada na

imagem.

Tendo em conta as competências adquiridas, nas primeiras lições de programação Android, devem ser
construidos os blocos da mesma forma que estes são apresentados nas figuras seguintes.
Blocos para criar lista de dispositivos bluetooth e ligar e desligar o comando.

Blocos para enviar ações através do bluetooth para o arduino.
Exemplo 4 -Com Hardware

O quarto exemplo de aplicação consiste, em criar uma interface de controlo num smartphone android de
modo a controlar um robô. A aplicação consiste em diversos botões, que quando pressionados mandam
uma mensagem para o arduino de modo a que um movimento seja realizado pelo robô.

Primeiro deve ser selecionado o "Screen1" na tabela de componentes para se definir as propriedades.
Remover nas propriedades do Screen 1 a opção "Scrollable" pois esta vai permitir colocar o alinhamento
do ecrã centrado segundo a vertical. De seguida colocar as opções:
- AlignHorizontal: Center (Centra os componentes segundo a horizontal)
- AlignVertical: Center (Centra os componentes segundo a vertical)
- BackgroundColor: White (Cor de fundo)
- ScreenOrientation:Landscape.
- Title: Controlo Remoto
Adicionar um "HorizontalArrangement" ao screen, selecionar na tab "Layout" da Palette, e arrastar para o

screen o "HorizontalArrangement".
Relativamente às propriedades deste:

- AlignHorizontal: Center
- AlignVertical: Center
- Width: Fill Parent
- Height: Fill Parent
Adicionar um "BluetoothClient" ao screen, selecionar na tab "Connectivity" da Palette, e arrastar para o

screen o "BluetoothClient".

De seguida devem ser adicionados dois VerticalArrengement e um tableArrangement os quais podem ser
encontrados na Palette. Estes devem ser colocados dentro do HorizontalArrengement. O
tableArrangement deve ficar no meio dos dois VerticalArrengement .
NOTA:
A ordem deve ser, começando da esquerda para a direita -> VerticalArrengement2 -> tableArrangement
->VerticalArrengement1.
É necessário definir o Height dos Vertical arrangement para "Fill Parent".

De seguida são adicionados os componentes de input, um "ListPicker", um botão e 4 canvas.
O "ListPicker" e os canvas 1 e 2 são colocados no "VerticalArrangement" da esquerda e os restantes
componentes no da Direita, como pode ser visto na imagem.
Propriedades dos componentes:
ListPicker1:
- Enabled: Checar a box
- FontSize: 14.0
- Text: Ligar
- TextAlignment: Center
- TextColor: Black
- Width: 80 pixels..
- Height: 40 pixels..
Button1:
- FontSize: 14.0
- Text: Desligar
- TextColor: Black
- Width: 80 pixels..
- Height: 40 pixels..

Para definir as propriedades dos "Canvas" é necessário fazer upload das imagens que vão ser associadas
aos mesmos. Para tal, no canto inferior direito existe a tabela de "media" onde está disponivel o botão
upload.
Canvas1:
- BackgroundColor: White
- BackgroundImage: "Frente.png"
- Width: 80 Pixels ..
- Height: 80 Pixels ..
Canvas2:
- BackgroundImage: "Tras.png"
Canvas3:
- BackgroundImage: "Direita.png"
Canvas4:
- BackgroundImage: "Esquerda.png"
Download Imagens para Canvas
Base de dados de imagens

download
De seguida são adicionados os componentes de comando da garra.

Devem ser selecionados 4 "button" e arrastar para o tableArrangement.
Propriedades dos "button"
Button2:
- FontSize: 14.0
- Text: Abrir Garra
- TextColor: Black
- Width: 80 pixels.
- Height: 40 pixels.
Button3:
- FontSize: 14.0

- Text: Fechar Garra
- TextColor: Black
- Width: 80 pixels.
Button4:
- FontSize: 14.0
- Text: Braço Avançar
- TextColor: Black
- Width: 80 pixels.
Button5:
- FontSize: 14.0
- Text: Braço Recuar
- TextColor: Black
- Width: 80 pixels.
No final, na tabela de componentes, os componentes devem aparecer com a hierarquia apresentada na

imagem.

Blocos para criar lista de dispositivos bluetooth, ligar e desligar o comando e controlar a garra.

Boa sorte
Rui Duarte


Tutorial App Inventor

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial App Inventor

Enviado por

Direitos autorais:

Formatos disponíveis

DP.FR.

STATUS - ESCOLA PROFISSIONAL LOUSÃ

CURSO: Programador Informático – 1º ano

DISCIPLINA: PROGRAMACAO PARA DISPOSITIVOS MOVEIS

MÓDULO/UFCD: Design e desenvolvimento de aplicações móveis / 9976

ANO LETIVO: 2020_/2021_

Tutorial App Inventor

Tutorial de Programação Android – Lição 1

Atualmente o Android é o sistema operativo móvel mais usado no mundo.

EmeQuatro - Educação e Serviços, Lda.

Utilização da ferramenta “MIT App Inventor 2”

EmeQuatro - Educação e Serviços, Lda.

Criar um novo projeto

A página de desenho da interface da aplicação é constituída por 4 zonas fundamentais, a "Palette", a

EmeQuatro - Educação e Serviços, Lda.

Na zona "Properties",podem definir-se todas as propriedades de um componente, por exemplo, se for um

EmeQuatro - Educação e Serviços, Lda.

EmeQuatro - Educação e Serviços, Lda.

Exemplo 1 – Sem Hardware

EmeQuatro - Educação e Serviços, Lda.

Relativamente à propriedades deste:

EmeQuatro - Educação e Serviços, Lda.

EmeQuatro - Educação e Serviços, Lda.

Exemplo 2 – Sem Hardware

EmeQuatro - Educação e Serviços, Lda.

Relativamente à propriedades deste:

Seguidamente devem ser adicionados uma Label, um HorizontalArrengement e um botões, os quais

EmeQuatro - Educação e Serviços, Lda.

EmeQuatro - Educação e Serviços, Lda.

Construção de Blocos (Blocks)

EmeQuatro - Educação e Serviços, Lda.

A lógica da união dos blocos pode ser vista na figura à direita.

Exemplo 3 -Com Hardware (com transmissão de video)

Adicionar um "HorizontalArrangement" ao screen, bastando ir à tab "Layout" da Palette, e arrastando

Relativamente à propriedades deste:

EmeQuatro - Educação e Serviços, Lda.

É necessário definir o Height dos Vertical arrangement para "Fill Parent".

Seguidamente são adicionados os componentes de input, um "ListPicker", um botão e 4 canvas.

Propriedades dos componentes:

EmeQuatro - Educação e Serviços, Lda.

EmeQuatro - Educação e Serviços, Lda.

Base de dados de imagens

No final, na tabela de componentes, os componentes devem aparecer com a hierarquia apresentada na

Construção de Blocos (Blocks)

EmeQuatro - Educação e Serviços, Lda.

Exemplo 4 -Com Hardware

Desenho do Layout (Designer)

Adicionar um "HorizontalArrangement" ao screen, selecionar na tab "Layout" da Palette, e arrastar para o

Relativamente às propriedades deste:

Adicionar um "BluetoothClient" ao screen, selecionar na tab "Connectivity" da Palette, e arrastar para o

EmeQuatro - Educação e Serviços, Lda.

É necessário definir o Height dos Vertical arrangement para "Fill Parent".

EmeQuatro - Educação e Serviços, Lda.

Propriedades dos componentes:

EmeQuatro - Educação e Serviços, Lda.

Download Imagens para Canvas

Base de dados de imagens

De seguida são adicionados os componentes de comando da garra.

Propriedades dos "button"

EmeQuatro - Educação e Serviços, Lda.

No final, na tabela de componentes, os componentes devem aparecer com a hierarquia apresentada na

EmeQuatro - Educação e Serviços, Lda.

EmeQuatro - Educação e Serviços, Lda.