Escolar Documentos
Profissional Documentos
Cultura Documentos
Tutorial Inventor PDF
Tutorial Inventor PDF
49
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".
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.
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.
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).
Após escrever o nome do projeto, carregar "Ok", para seguir para a página de desenho da interface
da aplicação.
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 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.
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.
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.
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
-- TextAlignment: center
-- TextColor: White
-- Width: Fill Parent...
-- Height: Automatic...
Button2:
-- BackgroundColor: Blue
-- FontSize: 18.0
-- Text: Botao B
-- TextAlignment: center
-- TextColor: White
-- Width: Fill Parent...
-- Height: Automatic...
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"
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".
NOTA: Quando um componente esta abaixo de outro com um pequeno avanço, quer dizer que está
introduzido dentro deste, e que depende dele.
Label1:
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: 0
-- TextAlignment: Center
-- Width: Fill Parent...
-- Height: Fill Parent...
HorizontalArrangement1:
-- AlignHorizontal: Center
-- AlignVertical: Center
Button1:
-- BackgroundColor: Yellow
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: Multiplicar por 2
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button2:
-- BackgroundColor: Red
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: Somar 1
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button3:
-- BackgroundColor: Blue
-- Ativar a opção "FontBold"
-- FontSize: 20.0
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:
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 ... ".
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ã.
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.
NOTA: A ordem deve ser, começando da esquerda para a direita -> VerticalArrengement2 ->
WebViewer1 -> VerticalArrengement1.
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
-- TextAlignment: Center
-- TextColor: Black
-- Width: 80 pixels..
-- Height: 40 pixels..
Canvas1:
-- BackgroundColor: White
-- BackgroundImage: "Frente.png"
-- Width: 80 Pixels ..
-- Height: 80 Pixels ..
Canvas2:
-- BackgroundColor: White
-- BackgroundImage: "Tras.png"
-- Width: 80 Pixels ..
-- Height: 80 Pixels ..
Canvas3:
-- BackgroundColor: White
-- BackgroundImage: "Esquerda.png"
-- Width: 80 Pixels ..
-- Height: 80 Pixels ..
Canvas4:
-- BackgroundColor: White
-- BackgroundImage: "Direita.png"
-- Width: 80 Pixels ..
-- Height: 80 Pixels ..
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.
NOTA:
A ordem deve ser, começando da esquerda para a direita -> VerticalArrengement2 ->
tableArrangement ->VerticalArrengement1.
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
- TextAlignment: Center
- TextColor: Black
- Width: 80 pixels..
- Height: 40 pixels..
Canvas1:
- BackgroundColor: White
- BackgroundImage: "Frente.png"
- Width: 80 Pixels ..
- Height: 80 Pixels ..
Canvas2:
- BackgroundColor: White
- BackgroundImage: "Tras.png"
- Width: 80 Pixels ..
- Height: 80 Pixels ..
Canvas3:
- BackgroundColor: White
- BackgroundImage: "Direita.png"
- Width: 80 Pixels ..
- Height: 80 Pixels ..
Canvas4:
- BackgroundColor: White
- BackgroundImage: "Esquerda.png"
- Width: 80 Pixels ..
- Height: 80 Pixels ..
Button2:
- FontSize: 14.0
- Text: Abrir Garra
- TextAlignment: Center
- TextColor: Black
- Width: 80 pixels.
- Height: 40 pixels.
Button3:
- FontSize: 14.0
Button4:
- FontSize: 14.0
- Text: Braço Avançar
- TextAlignment: Center
- TextColor: Black
- Width: 80 pixels.
- Height: 40 pixels.
Button5:
- FontSize: 14.0
- Text: Braço Recuar
- TextAlignment: Center
- TextColor: Black
- Width: 80 pixels.
- Height: 40 pixels.
Blocos para criar lista de dispositivos bluetooth, ligar e desligar o comando e controlar a garra.