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-inventor-for-android.html

IniciandoVá ao site: appinventor.mit.edu/

Use sua conta do google para logar.

Tela de desenvolvimentoAo 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ão-visí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 fornece funções para HTTP GET, POST, PUT.

TelaAgora 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).

PropriedadesCada 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 e manipulação de uma variável.

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 - CalculadoraAgora 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 - CalculadoraNa á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 - CalculadoraNa 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 mdcFaremos 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 mdcPara 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 mdcPara 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ízesAgora, 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ízesNa 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ízesPara 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ízesPrimeiro, 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ízesNo 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.