Tutorial App Inventor PDF

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".
EmeQuatro - Educação e Serviços, Lda.

STATUS - Escola Profissional Lousã - Rua Dr. Henrique Figueiredo, 3200-235 LOUSÃ
Tel. 239991649 https://status.edu.pt/ direcao@status.edu.pt
Contribuinte nº 503765457
Esta ferramenta, faculta um editor de interface gráfico através do simples "arrasto" de
componentes, 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.

-- 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ô.
-- 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 PDF

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 PDF

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

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

Na zona "Components", podem encontrar a lista de componentes que já colocamos na nossa

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

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

Relativamente à propriedades deste:

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

Seguidamente devem ser adicionados dois VerticalArrengement e um WebViewer, os quais podem

É 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

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

Relativamente às propriedades deste:

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

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.

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

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