Uma introduo ao App

Inventor

O App Inventor possui uma interface baseada na web altamente visual,

possibilitando a criao de um aplicativo para o seu dispositivo Android.
Seu ambiente visual envolve a juno de blocos de instrues codificadas
por cores; facilitando, dessa forma, seu uso.
Torna relativamente fcil a construo de um aplicativo simples e, com um
pouco de prtica, de aplicativos complexos

Interface de programao visual do Google, o App Inventor fruto de

pesquisa e desenvolvimento no MIT.
App Inventor e os projetos nos quais se baseia foram construdos por teorias
de aprendizagem construtivistas, que salientam que a programao pode
ser um veculo para se engajar idias poderosas atravs de uma
aprendizagem ativa.

Google acredita no App Inventor

App Inventor vai abrir portas para que as pessoas se tornem criadoras de
tecnologia e no apenas consumidoras:
"Muitas pessoas possuem um dispositivo mvel e acesso Internet sempre a
alcance. App Inventor para Android d a todos, independentemente da
experincia de programao, a oportunidade de controlar e remodelar a
sua experincia de comunicao".
Traduo livre de http://googleblog.blogspot.com/2010/07/app-inventorfor-android.html

Iniciando
V ao site: appinventor.mit.edu/
Use sua conta do google para logar.

Tela de desenvolvimento
Ao lado est a tela
de desenvolvimento
do App Inventor. Ela
composta por
duas grandes reas,
a de designer e a
de
blocos.
Detalharemos cada
uma delas.
Iniciaremos com rea
de
designer,
ilustrada ao lado.

User Interface

Button (boto): Muitos aspectos da sua aparncia

pode ser alterado, bem como se clicvel
(Ativado), pode ser alterado no Designer ou no
Editor de blocos;
CheckBox - Caixa de seleo que gera um evento
quando o usurio clica nela. Existem muitas
propriedades que afetam a sua aparncia, elas
podem ser definidas tanto no Editor de Designer
quanto no Editor de blocos;
Clock - Componente no-visvel que pode servir
como relgio do telefone, timer ou ser usado para
realizar clculos de tempo;

User Interface

Image - Componente para exibir imagens. Pode ser

especificado no Designer ou no Editor de blocos;
Label - Exibe um pedao de texto que
especificado atravs das propriedade Text;
ListPicker - Definir a propriedade ShowFilterBar
para true (verdadeira), far com que uma lista se
torne pesquisvel. Possui outras propriedades
que afetam a aparncia de um boto
(TextAlignment, BackgroundColor etc) e se esse
boto pode ser clicado (habilitado);

User Interface

Notifier - Componente de notificao que exibe

dilogos de alerta, mensagens e alertas
temporrios. Alm disso, cria entradas de registro
Android;
PasswordTextBox - Uma caixa para digitar senhas.
o mesmo que o componente de caixa de texto
normal, apenas no exibe os caracteres escritos
pelo utilizador;
Slider - uma barra de progresso;
TextBox - Caixa para que o usurio insira texto
(campo de texto);
WebViewer - Componente para visualizar pgina
web.

Layout

HorizontalArrangement - Elemento de
formatao no qual os componentes devem
ser exibidos da esquerda para a direita;
TableArrangement - Elemento de formatao
no qual os componentes devem ser exibidos
na forma de tabela;
VerticalArrangement
Elemento
de
formatao no qual os componentes devem
ser exibidos de cima para baixo.

Media

Camcorder - Um componente para gravar vdeos;

Player - Componente multimdia que reproduz

udio e controles de vibrao;

Camera - Componente para fotografar;

ImagePicker - Quando o usurio escolhe um
ImagePicker, a galeria de imagens do dispositivo
aparece e o usurio pode escolher uma imagem;

Sound - Um componente multimdia que reproduz

arquivos de som ou, opcionalmente, vibra pelo
nmero de milissegundos especificados no Editor
de blocos;

Media

SoundRecorder - Componente multimdia que

grava o udio;
SpeechRecognizer - Componente que utiliza o
reconhecimento de voz para converter a fala em
texto;
TextToSpeech - Componente que l um texto e o
converte em mensagem falada;
VideoPlayer - Componente capaz de exibir vdeos.

Drawing and Animation

Ball - Um sprite, que deve ser colocado em

um Canvas, onde ele poder reagir a toques e
ser arrastado, alm de interagir com outros
sprites e mover-se de acordo com seus
valores de propriedade;
Canvas - Um painel retangular bidimensional
sensvel ao toque no qual um desenho pode
ser feito e sprites podem ser movidos.
ImageSprite - Um sprite que pode ser
colocado em um Canvas.

Sensors

AccelerometerSensor - Componente no-visvel,

que pode detectar e medir a acelerao do
dispositivo;
BarcodeScanner - Componente para usar o scanner
de cdigo de barras para ler um cdigo de barras;
LocationSensor
Componente
no-visvel
fornecendo informaes de localizao, incluindo a
longitude, latitude, altitude (se suportado pelo
dispositivo) e endereo;
OrientationSensor- Componente no-visvel que
fornece informaes sobre orientao fsica do
dispositivo.

Social

ContactPicker - Um boto que, quando clicado,

exibe uma lista dos contatos para escolha;
EmailPicker - um tipo de campo de texto;
PhoneCall - Componente no-visvel que faz uma
chamada telefnica para o nmero especificado na
propriedade PhoneNumber;
PhoneNumberPicker - Um boto que, quando
clicado, exibe uma lista contendo os nmeros de
telefone dos contatos;
Sharing - Componente no-visvel, que permite o
compartilhamento de arquivos e/ou mensagens
entre o seu aplicativo e outros aplicativos instalados
em um dispositivo;

Social

Texting - Um componente que, quando o mtodo

SendMessage chamado, envia uma mensagem de
texto especificado na propriedade Message para o
nmero de telefone especificado na propriedade
PhoneNumber;
Twitter - Um componente no-visvel que permite a
comunicao com o Twitter.

Storage

FusiontablesControl - Um componente novisvel, que se comunica com o Google Fusion

Tables;
TinyDB - Componente no-visvel que armazena
dados para um aplicativo;
TinyWebDB - Componente no-visvel que se
comunica com um servio Web para armazenar
e recuperar informaes.

Connectivity

ActivityStarter - Um componente que pode iniciar

uma actividade usando o mtodo startActivity;
BluetoothClient - Cliente;
BluetoothServer - Servidor;
Web - Componente no-visvel
funes para HTTP GET, POST, PUT.

que

fornece

Tela
Agora que conhecemos os componentes que
podem ser usados, falaremos sobre a tela.
A imagem ao lado, ainda na parte de
designer, representa a tela do aplicativo.
Assim,
voc
dever
arrastar
os
componentes necessrios ao seu aplicativo
para ela. Os componentes no visveis,
ainda que no apaream na tela, tambm
devem ser arrastados para ela. Voc pode
dispor os componentes visveis da forma
que quiser utilizando os componentes de
layout para isso.

Componentes
aqui que estaro os componentes presentes no
seu aplicativo (os que voc arrastou para a
tela). possvel renome-los e delet-los.
DICA: Nomeao dos componentes importante!
Um nome auto-explicativo far com que voc
saiba utiliz-los corretamente na parte da
programao em si (na rea de blocos).

Propriedades
Cada
componente
possui
propriedades
especficas como tamanho, nome de exibio
(para um boto ou um label, por exemplo),
tamanho, se so visveis ou no etc.
Essas propriedade no so inalterveis uma vez
definidas, pois muitas delas podem ser
alteradas na parte do Editor de Blocos (rea de
blocos, a ser explicada em breve).

Adicionar tela e mudar de rea

Acima temos a barra superior. Nela fica exibido o nome que voc escolheu
para o aplicativo, em qual tela do aplicativo se est trabalhando e o
boto para adicionar ou remover uma tela.
Alm disso, na extrema direita esto os botes de Designer e Blocks,
atravs deles que voc troca entre as reas de designar e programao
dos blocos. At agora temos discutido a parte de Designer. Vamos ento
conhecer um pouco sobre a parte de Blocks.

Blocks
Por fim, temos a rea de blocos. nela que se dar a especificao
do comportamento do aplicativo.
DICA: Adicione primeiro todos os componentes na rea de designer
antes de comear a parte de blocos!

Blocos: Control
Os Control blocks so os
blocos responsveis por
realizar o controle de
eventos. Por exemplo,
temos IF THEN (se tal
coisa ocorrer, ento faa
isso),
o
WHILE
DO
(enquanto alguma coisa
estiver
ocorrendo/for
verdadeira, faa isso) etc.

Blocos: Logic
Esses so os blocos responsveis
por auxiliar operaes lgicas.
Comparao entre nmeros (se
so iguais, maiores, menores
etc). Tambm temos operadores
importantes como AND, OR e
NOT. Alm do TRUE e FALSE.

Blocos: Math
Esses blocos contm as operaes
matemticas
como
adio,
subtrao,
diviso
e
multiplicao. Alm de calcular
raiz
de
um
nmero
ou
proporcionar nmeros aleatrios
ou apenas um nmero especfico.

Blocos: Text
Blocos responsveis por realizar
manipulaes ou operao com
texto. Possibilita comparao
entre textos, unio de textos ou
simplesmente a adio de um
texto.

Blocos: List
Blocos responsveis por realizar
manipulaes ou operao com
listas. Possibilita criao de
listas, adio de um item a uma
lista, verificar se uma lista est
vazia etc.

Blocos: Colors
Blocos contendo cores. Permite
tambm a criao de uma cor
diferente das exibidas, por meio
da ajuda de uma lista e de
nmeros.

Blocos: Variables
Responsveis pelo criao
manipulao de uma varivel.

Blocos
Alm
dos
blocos
discutidos, cada um dos
componentes
possui
seus prprios Blocos.
Clique no bloco e
arraste-os para a parte
de Viewer.
DICA: Voc tambm pode
usar a tecla tab do
teclado e digitar o bloco
que deseja.

Exemplo 1 - Calculadora
Agora que voc j conhece como funciona o App Inventor, vamos fazer
alguns exemplos.
Para nosso primeiro exemplo, criaremos uma calculadora.
Nossa calculadora, recebe dois nmeros e uma operao (podendo ser de
soma, adio, subtrao ou diviso), e retorna o resultado equivalente.
Com os conhecimentos aprendidos, voc consegue imaginar como fazer
uma?

Exemplo 1 - Calculadora
Na
rea
de
designer,
adicionamos dois campos de
texto
(para
receber
os
nmeros de entrada) e quatro
botes
dispostos
horizontalmente(responsveis
por uma das operao - o
texto no boto indica qual).
Alm disso, 2 labels: um
contendo o texto resultado:
e outro para exibir o
resultado propriamente dito
(ambos os labels dispostos
horizontalmente).

Exemplo 1 - Calculadora
Na parte da programao,
temos
quatro
blocos,
especificando o que ocorre
quando se escolhe cada um
dos botes. Quando se clica
no boto de multiplicar, ele
mudar o texto no label que
nomeamos como resultado
para o resultado da operao
de multiplicao entre o
texto contido no 1 e 2
campo de texto (se forem
nmeros). E assim por
diante.

Exemplo 2 - Calculo de mdc

Faremos agora um aplicativo que recebe dois nmeros e calcula o
mdc entre eles.
Com os conhecimentos aprendidos, voc consegue imaginar como
faz-lo?

Exemplo 2 - Calculo de mdc

Para o designer desse,
precisamos
de
2
arranjos
horizontais
contendo um label e
um campo de texto
(para receber os dois
nmeros) e um boto.
Alm disso, de um
arranjo horizontal que
ficar
incialmente
invisvel,
este
contendo dois labels e
ser responsvel por
exibir o resultado.

Exemplo 2 - Calculo de mdc

Para calcular o mdc,
criamos 3 variveis:
a, b e mdc. a
recebe o valor do 1
nmero e b do 2
(contidos nos campos
de texto 1 e 2).
Ento, utilizamos o
algoritmo de Euclides
para
realizar
o
clculo.

Exemplo 3 - Calculo de razes

Agora, vamos fazer um aplicativo calcula as razes de uma funo do 2
grau.
Ele recebe o valor dos coeficientes a, b e c de uma funo na forma ax +
bx + c, com a diferente de 0, e retorna o valor das razes.

Exemplo 3 - Calculo de razes

Na parte de designer,
adicionamos um label para
as instrues. Trs arranjos
horizontais compostos por
label e campo de texto
(para receber os valores) e
um boto para calcular
razes. Alm disso, mais
dois arranjos horizontais
com 2 labels, para exibir o
resultados das razes (e
colocamos sua visibilidade
para invisvel).

Exemplo 3 - Calculo de razes

Para entender o clculo aqui
preciso ter em mente como
se faz o clculo matemtico
das razes de uma equao
do segundo grau. Lembre-se
que delta b - 4*a*c e que
x = (-b + sqrt(delta))/2*a
x = (-b - sqrt(delta))/2*a.
Tendo
isso
em
mente,
consegue entender o cdigo?

Exemplo 3 - Calculo de razes

Primeiro, inicializamos seis variveis: a, b, c, delta, r1 e r2. Claramente,
a, b e c sero os coeficientes da equao. Delta ser o delta necessrio
para o clculo. E, r1 e r2 sero os nossos resultados (equivalente ao x' e
x'').Assim, quando o boto for clicado, saberemos que nosso "a" ser
igual ao valor que est no 1 campo de texto, b ser o valor do 2, e "c"
o do 3.
Como uma equao do 2 grau, "a" deve ser diferente de zero e
portando, s realizaremos o clculo se essa condio for respeitada (ou
seja, "if get global a =! 0"). Se o "a" for 0, o aplicativo ir apenas
informar isso (Else, set Label6.Text to "coeficiente a deve ser
diferente de 0").

Exemplo 3 - Calculo de razes

No caso de a diferente de zero, iremos fazer os clculos. Assim, nosso
delta ser b - 4*a*c. Depois tiramos a raiz de delta. Calculamos ento
r1 como (-b + delta)/2*a e r2 como (-b - delta)/2*a j que nosso
delta aqui equivale a raiz de delta.
Por fim, colocamos os resultados nos labels correspondentes e tornamos
o arranjo horizontal deles visvel.

Exemplo 4 - Investigar tringulos

Nosso exemplo agora um aplicativo que realiza a avaliao de trs
nmeros para indicar:
(i) se formam um tringulo;
(ii) sua classificao quanto aos lados (equiltero, issceles ou
escaleno);
(iii) sua classificao quanto aos ngulos (acutngulo, retngulo ou
obtusngulo).

Exemplo 4 - Investigar tringulos

Adicionamos
alguns
labels
com
informaes sobre o
aplicativo, 3 arranjos
horizontais
para
receber os nmeros a
serem investigados e
um
boto.
Alm
disso,
3
arranjos
horizontais invisveis
inicialmente
que
sero
responsveis
por
exibir
o
resultado.

Exemplo 4 - Investigar tringulos

Primeiramente, adicionamos 6 variveis: x, y, z, maiorLado, lado1 e
lado2.
Quando o boto clicado, x, y e z recebero os valores contidos nos
campos de texto 1, 2 e 3 respectivamente. Ento o algoritmo
verifica se algum dos trs valores menor ou igual a zero (j que
no pode haver um tringulo com lados negativos ou nulos). Ou
seja, se get global x <= 0 OR get global y <= 0 OR get global z <= 0,
saberemos que os nmeros no formam um tringulo.

Exemplo 4 - Investigar tringulos

Caso nenhum dos lados seja menor ou igual a zero, se a soma de um
dos lados for maior que a soma dois outros dois lados (get global x
> get global y + get global z OR get global y > get global x + get
global z OR get global z > get global y + get global x), tambm no
possvel que formem um tringulo.
Caso contrrio, eles formam um tringulo e ento podemos
classific-lo. Encontramos o maior lado testando se (get global x =>
get global y e get global x => get global z), sabemos nesse caso
ento que x o maior lado (testamos isso para os outros casos
tambm).

Exemplo 4 - Investigar tringulos

Ento, se o quadrado do maior lado for MAIOR que a soma dos
quadrados os outros lados, o tringulo obtusngulo. Se o
quadrado do maior lado for IGUAL a soma dos quadrados os outros
lados, o tringulo retngulo. Se o quadrado do maior lado for
MENOR a soma dos quadrados os outros lados, o tringulo
acutngulo.
Para a classificao quanto aos lados, verificamos se todos os lados
so iguais (get global x = get global y AND get global y = get global
z), nesse caso, ele equiltero. Se pelo menos dois dos lados
forem iguais (get global x = get global y OR get global x = get
global z OR get global y = get global z ), ele Issceles. Caso
contrrio, escaleno.

...
-

Dvidas;

Sugestes;

Ideias para projetos.