Uma introdução ao App
Inventor
O App Inventor possui uma interface baseada na web altamente visual,
possibilitando a criação de um aplicativo para o seu dispositivo Android.
Seu ambiente visual envolve a junção de blocos de instruções codificadas
por cores; facilitando, dessa forma, seu uso.
Torna relativamente fácil a construção de um aplicativo simples e, com um
pouco de prática, de aplicativos complexos
Interface de programação visual do Google, o App Inventor é fruto de
pesquisa e desenvolvimento no MIT.
App Inventor e os projetos nos quais se baseia foram construídos por teorias
de aprendizagem construtivistas, que salientam que a programação pode
ser um veículo para se engajar idéias poderosas através de uma
aprendizagem ativa.
Google acredita no App Inventor
App Inventor vai abrir portas para que as pessoas se tornem criadoras de
tecnologia e não apenas consumidoras:
"Muitas pessoas possuem um dispositivo móvel e acesso à Internet sempre a
alcance. App Inventor para Android dá a todos, independentemente da
experiência de programação, a oportunidade de controlar e remodelar a
sua experiência de comunicação".
Tradução 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 (botão): Muitos aspectos da sua aparência
pode ser alterado, bem como se é clicável
(Ativado), pode ser alterado no Designer ou no
Editor de blocos;
CheckBox - Caixa de seleção que gera um evento
quando o usuário clica nela. Existem muitas
propriedades que afetam a sua aparência, elas
podem ser definidas tanto no Editor de Designer
quanto no Editor de blocos;
Clock - Componente não-visível que pode servir
como relógio do telefone, timer ou ser usado para
realizar cálculos de tempo;
User Interface
•
•
•
Image - Componente para exibir imagens. Pode ser
especificado no Designer ou no Editor de blocos;
Label - Exibe um pedaço de texto que é
especificado através das propriedade “Text”;
ListPicker - Definir a propriedade “ShowFilterBar”
para true (verdadeira), fará com que uma lista se
torne “pesquisável”. Possui outras propriedades
que afetam a aparência de um botão
(TextAlignment, BackgroundColor etc) e se esse
botão pode ser clicado (habilitado);
User Interface
•
•
•
•
•
Notifier - Componente de notificação que exibe
diálogos de alerta, mensagens e alertas
temporários. Além disso, cria entradas de registro
Android;
PasswordTextBox - Uma caixa para digitar senhas. É
o mesmo que o componente de caixa de texto
normal, apenas não exibe os caracteres escritos
pelo utilizador;
Slider - É uma barra de progresso;
TextBox - Caixa para que o usuário insira texto
(campo de texto);
WebViewer - Componente para visualizar página
web.
Layout
•
•
HorizontalArrangement - Elemento de
formatação no qual os componentes devem
ser exibidos da esquerda para a direita;
TableArrangement - Elemento de formatação
no qual os componentes devem ser exibidos
na forma de tabela;
VerticalArrangement
Elemento
de
formatação no qual os componentes devem
ser exibidos de cima para baixo.
Media
•
•
•
•
•
Camcorder - Um componente para gravar vídeos;
Camera - Componente para fotografar;
ImagePicker - Quando o usuário escolhe um
ImagePicker, a galeria de imagens do dispositivo
aparece e o usuário pode escolher uma imagem;
Player - Componente multimídia que reproduz
áudio e controles de vibração;
Sound - Um componente multimídia que reproduz
arquivos de som ou, opcionalmente, vibra pelo
número de milissegundos especificados no Editor
de blocos;
Media
•
•
•
•
SoundRecorder - Componente multimídia 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 vídeos.
Drawing and Animation
•
•
•
Ball - Um sprite, que deve ser colocado em
um Canvas, onde ele poderá reagir a toques e
ser arrastado, além de interagir com outros
sprites e mover-se de acordo com seus
valores de propriedade;
Canvas - Um painel retangular bidimensional
sensível 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 não-visível,
que pode detectar e medir a aceleração do
dispositivo;
BarcodeScanner - Componente para usar o scanner
de código de barras para ler um código de barras;
LocationSensor
Componente
não-visível
fornecendo informações de localização, incluindo a
longitude, latitude, altitude (se suportado pelo
dispositivo) e endereço;
OrientationSensor- Componente não-visível que
fornece informações sobre orientação física do
dispositivo.
Social
•
•
•
•
•
ContactPicker - Um botão que, quando clicado,
exibe uma lista dos contatos para escolha;
EmailPicker - É um tipo de campo de texto;
PhoneCall - Componente não-visível que faz uma
chamada telefónica para o número especificado na
propriedade PhoneNumber;
PhoneNumberPicker - Um botão que, quando
clicado, exibe uma lista contendo os números de
telefone dos contatos;
Sharing - Componente não-visível, 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 método
SendMessage é chamado, envia uma mensagem de
texto especificado na propriedade Message para o
número de telefone especificado na propriedade
PhoneNumber;
Twitter - Um componente não-visível que permite a
comunicação com o Twitter.
Storage
•
•
•
FusiontablesControl - Um componente nãovisível, que se comunica com o Google Fusion
Tables;
TinyDB - Componente não-visível que armazena
dados para um aplicativo;
TinyWebDB - Componente não-visível que se
comunica com um serviço Web para armazenar
e recuperar informações.
Connectivity
•
•
•
•
ActivityStarter - Um componente que pode iniciar
uma actividade usando o método startActivity;
BluetoothClient - Cliente;
BluetoothServer - Servidor;
Web - Componente não-visível que
funções para HTTP GET, POST, PUT.
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 necessários ao seu aplicativo
para ela. Os componentes não visíveis,
ainda que não apareçam na tela, também
devem ser arrastados para ela. Você pode
dispor os componentes visíveis da forma
que quiser utilizando os componentes de
layout para isso.
Componentes
É aqui que estarão os componentes presentes no
seu aplicativo (os que você arrastou para a
tela). É possível renomeá-los e deletá-los.
DICA: Nomeação dos componentes é importante!
Um nome auto-explicativo fará com que você
saiba utilizá-los corretamente na parte da
programação em si (na área de blocos).
Propriedades
Cada
componente
possui
propriedades
específicas como tamanho, nome de exibição
(para um botão ou um label, por exemplo),
tamanho, se são visíveis ou não etc.
Essas propriedade não são inalteráveis 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
botão para adicionar ou remover uma tela.
Além disso, na extrema direita estão os botões de Designer e Blocks, é
através deles que você troca entre as áreas de designar e programação
dos blocos. Até agora temos discutido a parte de Designer. Vamos então
conhecer um pouco sobre a parte de Blocks.
Blocks
Por fim, temos a área de blocos. É nela que se dará a especificação
do comportamento do aplicativo.
DICA: Adicione primeiro todos os componentes na área de designer
antes de começar a parte de blocos!
Blocos: Control
Os Control blocks são os
blocos responsáveis por
realizar o controle de
eventos. Por exemplo,
temos IF THEN (se ‘tal
coisa’ ocorrer, então faça
isso),
o
WHILE
DO
(enquanto ‘alguma coisa’
estiver
ocorrendo/for
verdadeira, faça isso) etc.
Blocos: Logic
Esses são os blocos responsáveis
por auxiliar operações lógicas.
Comparação entre números (se
são iguais, maiores, menores
etc). Também temos operadores
importantes como AND, OR e
NOT. Além do TRUE e FALSE.
Blocos: Math
Esses blocos contém as operações
matemáticas
como
adição,
subtração,
divisão
e
multiplicação. Além de calcular
raiz
de
um
número
ou
proporcionar números aleatórios
ou apenas um número específico.
Blocos: Text
Blocos responsáveis por realizar
manipulações ou operação com
texto. Possibilita comparação
entre textos, união de textos ou
simplesmente a adição de um
texto.
Blocos: List
Blocos responsáveis por realizar
manipulações ou operação com
listas. Possibilita criação de
listas, adição de um item a uma
lista, verificar se uma lista está
vazia etc.
Blocos: Colors
Blocos contendo cores. Permite
também a criação de uma cor
diferente das exibidas, por meio
da ajuda de uma lista e de
números.
Blocos: Variables
Responsáveis pelo criação
manipulação de uma variável.
e
Blocos
Além
dos
blocos
discutidos, cada um dos
componentes
possui
seus próprios Blocos.
Clique no bloco e
arraste-os para a parte
de Viewer.
DICA: Você também 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 números e uma operação (podendo ser de
soma, adição, subtração ou divisão), 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
números de entrada) e quatro
botões
dispostos
horizontalmente(responsáveis
por uma das operação - o
texto no botão indica qual).
Além 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 programação,
temos
quatro
blocos,
especificando o que ocorre
quando se escolhe cada um
dos botões. Quando se clica
no botão de multiplicar, ele
mudará o texto no label que
nomeamos como “resultado”
para o resultado da operação
de multiplicação entre o
texto contido no 1º e 2º
campo de texto (se forem
números). E assim por
diante.
Exemplo 2 - Calculo de mdc
Faremos agora um aplicativo que recebe dois números 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
números) e um botão.
Além disso, de um
arranjo horizontal que
ficará
incialmente
invisível,
este
contendo dois labels e
será responsável por
exibir o resultado.
Exemplo 2 - Calculo de mdc
Para calcular o mdc,
criamos 3 variáveis:
a, b e mdc. “a”
recebe o valor do 1º
número e b do 2º
(contidos nos campos
de texto 1 e 2).
Então, utilizamos o
algoritmo de Euclides
para
realizar
o
cálculo.
Exemplo 3 - Calculo de raízes
Agora, vamos fazer um aplicativo calcula as raízes de uma função do 2º
grau.
Ele recebe o valor dos coeficientes a, b e c de uma função na forma ax² +
bx + c, com “a” diferente de 0, e retorna o valor das raízes.
Exemplo 3 - Calculo de raízes
Na parte de designer,
adicionamos um label para
as instruções. Três arranjos
horizontais compostos por
label e campo de texto
(para receber os valores) e
um botão para “calcular
raízes”. Além disso, mais
dois arranjos horizontais
com 2 labels, para exibir o
resultados das raízes (e
colocamos sua visibilidade
para invisível).
Exemplo 3 - Calculo de raízes
Para entender o cálculo aqui é
preciso ter em mente como
se faz o cálculo matemático
das raízes de uma equação 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 código?
Exemplo 3 - Calculo de raízes
Primeiro, inicializamos seis variáveis: a, b, c, delta, r1 e r2. Claramente,
a, b e c serão os coeficientes da equação. Delta será o delta necessário
para o cálculo. E, r1 e r2 serão os nossos resultados (equivalente ao x' e
x'').Assim, quando o botão 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 equação do 2º grau, "a" deve ser diferente de zero e
portando, só realizaremos o cálculo se essa condição 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 raízes
No caso de “a” diferente de zero, iremos fazer os cálculos. Assim, nosso
delta será b² - 4*a*c. Depois tiramos a raiz de delta. Calculamos então
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 visível.
Exemplo 4 - Investigar triângulos
Nosso exemplo agora é um aplicativo que realiza a avaliação de três
números para indicar:
(i) se formam um triângulo;
(ii) sua classificação quanto aos lados (equilátero, isósceles ou escaleno);
(iii) sua classificação quanto aos ângulos (acutângulo, retângulo ou
obtusângulo).
Exemplo 4 - Investigar triângulos
Adicionamos
alguns
labels
com
informações sobre o
aplicativo, 3 arranjos
horizontais
para
receber os números a
serem investigados e
um
botão.
Além
disso,
3
arranjos
horizontais invisíveis
inicialmente
que
serão
responsáveis
por
exibir
o
resultado.
Exemplo 4 - Investigar triângulos
Primeiramente, adicionamos 6 variáveis: x, y, z, maiorLado, lado1 e
lado2.
Quando o botão é clicado, x, y e z receberão os valores contidos nos
campos de texto 1, 2 e 3 respectivamente. Então o algoritmo
verifica se algum dos três valores é menor ou igual a zero (já que
não pode haver um triângulo 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 números não formam um triângulo.
Exemplo 4 - Investigar triângulos
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), também não
é possível que formem um triângulo.
Caso contrário, eles formam um triângulo e então 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
então que x é o maior lado (testamos isso para os outros casos
também).
Exemplo 4 - Investigar triângulos
Então, se o quadrado do maior lado for MAIOR que a soma dos
quadrados os outros lados, o triângulo é obtusângulo. Se o
quadrado do maior lado for IGUAL a soma dos quadrados os outros
lados, o triângulo é retângulo. Se o quadrado do maior lado for
MENOR a soma dos quadrados os outros lados, o triângulo é
acutângulo.
Para a classificação quanto aos lados, verificamos se todos os lados
são iguais (get global x = get global y AND get global y = get global
z), nesse caso, ele é equilátero. 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 é Isósceles. Caso contrário, é
escaleno.
...
-
Dúvidas;
-
Sugestões;
-
Ideias para projetos.