Tutorial de Programao Android Lio 1

Atualmente o Android o sistema operativo mvel mais usado no mundo.

Em 2013 estava presente em cada 4 de 5 smartphones, possuindo 81% do
mercado.
O Android tem ferramentas de fcil compreenso para que qualquer pessoa
com um mnimo conhecimento de programao possa criar uma aplicao.
Assim, rapidamente foi aumentando o nmero de aplicaes na "play store"
da google, onde qualquer pessoa pode colocar a sua aplicao disponivel
gratuitamente, ou para venda.
Os utilizadores de arduino rapidamente se aperceberam da possibilidade de
interagir no arduino atravs de um dispositivo mvel com android,
permitindo criar inmeras aplicaes atravs desta interao.
MIT App Inventor
A ferramenta mais fcil de utilizar para que algum com mnimo
conhecimento de programao possa criar uma aplicao o MIT "App
Inventor".
Esta ferramenta, faculta um editor de interface grfico atravs do simples
"arrasto" de componentes, como o caso de botes, labels, recursos, listas,
etc...
Para utilizadores mais avanados, tem ainda um editor de blocos prprogramados que permitem executar tarefas, sem ser necessrio criar um
cdigo escrito.

Blocos
Os blocos da ferramenta "MIT App Inventor", so parecidos com um puzzle,
encaixando uns nos outros criando um conjunto de regras e operaes que
so desenvolvidas ao longo da utilizao da aplicao criada.
Para que as regras e operaes sejam realizadas necessrio que o

utilizador da aplicao interaja com esta atravs do interface grfico. A so

colocados os elementos de entrada e saida de informaes.

Utilizao da ferramenta MIT App Inventor 2

A ferramenta "MIT App Inventor 2", uma plataforma utilizada via
navegador de internet. Ateno que tem apenas suporte para o "Firefox" e
"Chrome".
Para iniciar a sua utilizao, aceder ao site:
http://appinventor.mit.edu/explore/
necessrio criar uma conta para a sua utilizao ou ento, para quem tem
um endereo de e-mail gmail, basta ter sesso inicializada no chrome,
aceder ao site e clicar no boto "Create" no canto superior esquerdo. O
mesmo serve para quem no tem conta no gmail, basta clicar no boto
"Create" e seguir todos os passos com ateno.

Tutorial de Programao Android Lio 2

Ambiente MIT App Inventor 2
A ferramenta funciona como uma cloud (armazena os projetos criados num
servidor prprio, no 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 criao de um

ficheiro de instalao da aplicao criada, que ser depois guardado no

disco do computador (normalmente na pasta de transferncias).

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.
Aps escrever o nome do projeto, carregar "Ok", para seguir para a pgina
de desenho da interface da aplicao.

A pgina de desenho da interface da aplicao constituda 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 aplicao, como o caso dos botes, as listas, as caixas de seleo, as
etiquetas, etc...
Na zona "Viewer", a qual imita um ecr de um dispositivo Android, pode verse o aspeto, da futura aplicao 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 aplicao, 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 boto, vamos lista de componentes
ou ao ecr, e seleccionamos o boto que queremos alterar, aparecendo na
zona de propriedades, todas as propriedades do mesmo, permitindo alterar
a cor, o texto, a posio, o tamanho,etc...

No canto superior direito esto dois botes que permitem mudar da pgina
de desenho de interface para a pgina de edio de blocos.
Na pgina de edio de blocos, existem duas zonas fundamentais, a zona
"Blocks" e a zona "Viewer".
Neste caso os blocos vo substituir o cdigo escrito, e estes esto
agrupados em vrios conjuntos, dependendo do tipo:
-- Control - blocos de controlo (se isto acontecer ento acontece aquilo - IF
THEN)
-- Logic - blocos logicos (Verdadeiro ou Falso)
-- Math - blocos matemticos (somas, subtraes,etc...)
-- Text - blocos de texto (inserir, alterar, guardar um texto)
-- Lists - blocos de listas (criar listas de opes)
-- Colors - blocos de cores (alterar a cor de um componente ou texto)
-- Variables - blocos de variveis (criar variaveis)
-- Procedures - blocos de procedimentos (quando algo acontece realizada
uma ao)
Existem mais do que este conjunto, pois cada componente do interface, por
exemplo um boto, tambm tem os seus prprios blocos.

Os blocos podem ser vistos como puzzles, que encaixados uns nos outros
criam um conjunto sequencial de operaes.

Tutorial de Programao Android Lio 3

Exemplo 1 Sem Hardware
O primeiro exemplo de aplicao consiste, em entender com executar uma
ao, sendo esta consequncia de uma ao anterior, ou seja, quando um
boto for carregado, o texto apresentado numa label vai alterar.
A aplicao consiste em dois botes, boto A e boto B, e numa label, na
qual, inicialmente vai estar o texto "Nenhum Boto Pressionado". Quando se
pressionar o boto A, o texto da Label vai mudar para "Boto A pressionado"
e no B "Boto 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 opo "Scrollable"
pois esta vai permitir colocar o alinhamento do ecr centrado segundo a
vertical. Seguidamente colocar as opes:
-- 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 rodarmos o dispositivo mvel, o ecr roda, acompanhando o movimento.
-- Title: Incio

NOTA: As opes no referidas, devem ficar como esto por defeito, mas
sendo que muitas so de personalizao, fica ao critrio 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 botes, 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

avano, quer dizer que est introduzido dentro deste, e que depende dele.

Propriedades:
Label1:
-- Ativar a opo "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...

Construo de Blocos (Blocks)

Para iniciar, comeando pelo boto 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 Boto dois, sendo que desta vez o bloco do
boto deve ser adquirido na Palette->Screen1->Verticalarrengement1>Button2.
Para o boto B o texto da label ser ""Botao B pressionado"

Tutorial de Programao Android Lio 4

Exemplo 2 Sem Hardware
O segundo exemplo de aplicao consiste, em entender como executar uma
ao com base em variveis, fazendo uma alterao de uma varivel com
base no click de um boto.

A aplicao consiste em trs botes, boto "Somar 1", boto "Subtrair 1" e
boto "Multiplicar por 2", e numa label, na qual, ser mostrada uma
varivel, que inicialmente vai estar com o valor "0". Quando se pressionar o
boto "Somar 1", a Label vai mostrar a operao matemtica executada,
por exemplo, se a Label mostra o valor "0" e carregarmos uma vez no boto
"Somar 1", ela vai passar a ter o valor "1", e assim sucessivamente com o
resto dos botes.
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 opo "Scrollable"
pois esta vai permitir colocar o alinhamento do ecr centrado segundo a
vertical. Seguidamente colocar as opes:
-- 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 rodarmos o dispositivo mvel, o ecr roda, acompanhando o movimento.
-- Title: Incio
NOTA: As opes no referidas, devem ficar como esto por defeito, mas
sendo que muitas so de personalizao, fica ao critrio 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, um

HorizontalArrengement e um botes, os quais podem ser encontrados na
Palette. Estes deve ser colocados dentro do VerticalArrengement,
aparecendo as dependncias nos componentes como pode ser observado
na imagem direita, tendo em conta que a ordem, comeando em cima
Label -> HorizontalArrengement -> Boto.
NOTA: Quando um componente esta abaixo de outro com um pequeno
avano, quer dizer que est introduzido dentro deste, e que depende dele.

Seguidamente so colocados dois botes dentro do HorizontalArrangement,

e so definidas as propriedades dos 5 componentes.
Label1:
-- Ativar a opo "FontBold"
-- FontSize: 20.0
-- Text: 0
-- TextAlignment: Center

-- Width: Fill Parent...

-- Height: Fill Parent...
HorizontalArrangement1:
-- AlignHorizontal: Center
-- AlignVertical: Center
Button1:
-- BackgroundColor: Yellow
-- Ativar a opo "FontBold"
-- FontSize: 20.0
-- Text: Multiplicar por 2
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button2:
-- BackgroundColor: Red
-- Ativar a opo "FontBold"
-- FontSize: 20.0
-- Text: Somar 1
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button3:
-- BackgroundColor: Blue
-- Ativar a opo "FontBold"
-- FontSize: 20.0
-- Text: Subtrair 1
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...

Construo de Blocos (Blocks)

Primeiro deve criar-se uma varivel, 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->builtin->Math.
No bloco "initialize global NAME to", onde est escrito NAME vamos dar um
nome varivel, por exemplo "numero" e o bloco "0" deixa-se ficar a 0 pois
queremos que quando o programa inicia aparea na label 0.

Finalmente necessrio criar os eventos que fazem com que os clculos

sejam feitos, neste caso:
-- Somar 1 ao valor guardado na varivel;
-- Subtrair 1 ao valor guardado na varivel;
-- Multiplicar por 2 o valor da varivel.
Comeando pela soma, que representada pelo boto 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 boto 3 (subtrao) em vez do bloco " ... + ... ", usar o " ... - ... " e no
boto 1 (multiplicao) usar " ... x ... ".
A lgica da unio dos blocos pode ser vista na figura direita.
Exemplo soma: Quando o boto da soma pressionado, ao valor
apresentado no ecr somado 1 e depois o resultado dessa soma
apresentado no ecr.