APP INVENTOR

APP INVENTOR
Exercício 1
 Exercício 1
O Objetivo é 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".

Abra a ferramenta do App Inventor e crie um novo projeto.

Nome do projeto  PROJETO_1

Anotações:

App Inventor Página 2

Na tela de Design, vamos iniciar alterando as propriedades da screen1

Parte 1 - 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" (rolável)
pois esta vai permitir colocar o
alinhamento do ecrã centrado
segundo a vertical.
Seguidamente colocar as
opções:

PROPRIEDADES ALTERADAS:

Alinhamento horizontal
Centro
Alinhamento vertical
Centro
Cor de fundo
Cinza claro
Orientação da tela
Sensor
Titulo
PROJETO 1

NOTA: As demais propriedades devem ficar como estão por default (padrão), mas
sendo que muitas são de personalização, fica ao critério de cada um.

Ecrã - tela de display, monitor.

App Inventor Página 3

IMPORTANTE: A propriedade “Orientação da Tela =
“sensor””, permite que quando o aplicativo seja
instalado no celular/smartfhone, o movimento de
retrato e paisagem feito no celular, o aplicativo
acompanhe a orientação.

Parte 2 – Na guia paleta, na opção Organização (layout), adicione o componente

Organização Vertical (VerticalArragement), a screen1 (a tela). “Arraste” para a tela
Início.

Anotações:

App Inventor Página 4

Parte 3 – Selecione o
componente “Organização
Vertical” e na guia de
propriedades, faça as alterações
abaixo:

PROPRIEDADES ALTERADAS:

Alinhamento horizontal
Centro
Alinhamento vertical
Centro
Altura
Preencher principal
Largura
Preencher principal

Tela com o componente “organização Tela com o componente “organização

Vertical” Vertical” com as propriedades alteradas

App Inventor Página 5

Parte 4 – Agora vamos adicionar na tela de início os componentes Legenda (Label)
e dois botões (button) que se encontram na guia Paleta em Interface do usuário.

Importante: Quanto
um componente esta
abaixo de outro com
um pequeno avanço,
significa que foi
introduzido dentro
deste, e que depende
dele.

Anotações:

App Inventor Página 6

Parte 5 – Alterando as
propriedades do objeto
Legenda.

PROPRIEDADES ALTERADAS:

Fonte Negrito
Selecionada
Tamaho da Fonte
18.0
Texto
Nenhum Botão Selecionado
Alinhamento do Texto
Centro

Resultado no Visualizador.

App Inventor Página 7

Parte 6 – Alterando as
propriedades do objeto
Botão1.

PROPRIEDADES ALTERADAS:

Cor de Fundo
Vermelho
Tamaho da Fonte
18.0
Forma
Arredondado
Texto
Botão A
Alinhamento do Texto
Centro

Resultado no Visualizador.

App Inventor Página 8

Parte 7 – Alterando as
propriedades do objeto
Botão2.

PROPRIEDADES ALTERADAS:

Cor de Fundo
Azul
Tamaho da Fonte
18.0
Forma
Arredondado
Texto
Botão B
Alinhamento do Texto
Centro
Cor do Texto
Branco

Resultado no Visualizador.

App Inventor Página 9

Parte 8 – Construção dos blocos de programação

Para iniciarmos a programação dos blocos, vamos sair da tela Designer (desenho)
para a tela Blocos.

Vamos começar pelo botão1 (Botão A)

Na guia Blocos, selecione o Botão 1, no visualizador, “arraste” o primeiro bloco para

a área de programação.

Anotações:

App Inventor Página 10

Também Na guia Blocos, selecione a legenda1, no visualizador, “arraste” o sétimo
bloco para a área de programação, encaixando na segunda linha. (observe a figura
abaixo)

Agora vamos utilizar um bloco de texto que está na guia Blocos / Texto / bloco de
texto e “arrastar” para a área de programação, encaixando no final da segunda
linha do bloco. (observe a figura abaixo)

Digite neste último bloco inserido a mensagem: “Botão A Pressionado”

Anotações:

App Inventor Página 11

Repetindo a mesma operação do Botão 1 para o Botão 2, teremos então na área de
programação o seguinte resultado.

O resultado em nosso simulador.

App Inventor Página 12