APP

Inventor

Por

Natlia Cardoso Gonalves

Programao em Microinformtica
Turma A
Jean Carlos Costa
 O QUE O APPINVENTOR?

Criado em 1960 por Seymour Papert e o grupo MIT, o APP Inventor uma
ferramenta de programao visual para o desenvolvimento de aplicativos para
Android.
Com o intuito de engajar pessoas sem conhecimento prvio em programao
em um aprendizado ativo, a ferramenta utiliza o mtodo baseado em blocos.
Isso significa que o usurio ir desenvolver aplicativos pela edio e
ordenao de comandos pr-estabelecidos como os mostrados na Figura 1.

Figura 1 Paleta de comandos de internface de usurio. Fonte:Autora (2017).

ESTUDO DE CASO: ONDE EST MEU CARRO?

Esse aplicativo foi projetado para localizar o carro estacionado. Com ele,
voc aperta um boto quando estaciona e o Android utiliza o sensor de
localizao para gravar a coordenada GPS. Depois, ao reabrir o aplicativo, ele
d direes para chegar ao local informado.

PROJETANDO OS COMPONENTES

Na interface do usurio Onde est meu carro? necessrio rtulos (labels)

para nomear os campos de localizao atual e localizao futura, alm de
botes para gravar a localizao e mostrar as direes. Alm disso, faz uso de
um pequeno banco de dados e o sensor de localizao para armazenamento e
indicao de direes. O layout final da interface pode ser visualizado na
Figura 2.

1
 NOTA
Repare que os todos as labels foram renomeados de acordo com sua funo.
Isso ir ajudar no momento em que for adicionar os comandos por blocos.

Figura 2 Interface do usurio. Fonte: Adaptado pela autora (2017)

ADICIONANDO FUNES

Boto Lembrar minha posio atual

Deseja-se que ao acionar o GPS do aparelho a localizao aparea na
interface de usurio. Isso indica que o sensor de localizao realizou a leitura
e habilita o boto Lembrar minha posio atual. A Figura 3 indica como
ficam os blocos de comandos, sendo a primeira parte a aquisio de dados
pelo sensor e a segunda parte a indicao.

Figura 3 Blocos para o boto Lembrar minha posio. Fonte: Adaptado

pela autora (2017)

2
 Armazenando no banco de dados
desejvel que o usurio possa fechar e reabrir o aplicativo sem perder as
informaes da localizao do carro armazenadas na etapa anterior. Para isso,
utiliza-se do TinyDB para armazenar assim que o boto Lembrar minha
posio atual acionado. A Figura 4 mostra como seriam a disposio dos
blocos para a funo de armazenamento.

Figura 4 Blocos para armazenar. Fonte: Adpatado pela Autora.(2017)

Recuperando do banco de dados

Da mesma forma se o aplicativo for fechado, possvel recuperar os dados
armazenados. A Figura 5 mostra a disposio dos blocos para a recuperao
dos dados.

Figura 5 Blocos recuperando os dados armazenados. Fonte: Adaptado pela

Autora (2017)

Boto Indicar direes

Quando o usurio clica em Indicar direes o aplicativo dever abrir o
Google Maps e mostrar na tela as direes atuais do usurio e o caminho at

3
 as direes armazenadas. Para isso, far com que o aplicativo acesse o
seguinte site:<https://www.google.com/maps?saddr=37.82557,-
122.478988&daddr=37.81079,-122.4771>
Devemos modificar o parmetro saddr para o endereo atual e o daddr para
as coordenadas de destino. A figura 6 mostra como realizado a insero das
coordenadas e apresentao no Google Maps.

Figura 6 Blocos para mostrar a direo para a posio lembrada. Fonte:

Adaptado pela autora (2017)

Pronto! Agora o aplicativo j est funcional conforme a proposta inicial.

QUAIS OS PR-REQUISITOS PARA SE TRABALHAR COM O

APPINVENTOR?

Para se trabalhar com o App Invetor pelo computador deve ter os seguintes
requisitos mnimos para o sistema operacional:
Macintosh (with Intel processor): Mac OS X 10.5, 10.6+;
Windows: Windows XP, Windows Vista, Windows 7+;
GNU/Linux: Ubuntu 8+, Debian 5+ .

NOTA
GNU/Linux live development s funcionam com uma conexo WiFi entre o
computador e o aparelho Android.

E os seguintes requisitos mnimos quanto ao navegador:

Mozilla Firefox 3.6 ou verso superior;
Apple Safari 5.0 ou verso superior;
Google Chrome 4.0 ou verso superior.

NOTA
No caso do Firefox com a extenso NoScript, essa dever ser desligada.

Para o uso no celular ou tablet, deve-se ter o Android Operating System 2.3
(Gingerbread) ou uma verso superior. Independente do modelo, deve-se
ainda possuir um carto SD (fsico ou virtual) instalado. Alguns modelos
como Sansung, Dell ou HTC requerem a instalao adicional de um software
especfico do fabricante. Detalhes quanto a esses requisitos podem ser

4
 consultados no site <http://appinventor.mit.edu/explore/content/system-
requirements.html>.

COMO FEITO O EMPACOTAMENTO E COMPARTILHAMENTO

DE APPS ATRAVS DA FERRAMENTA?

EMPACOTAMENTO

O empacotamento serve para que o aplicativo criado funcione em um

dispositivo sem a necessidade do App Inventor Companion Application, ou
seja, como qualquer outro aplicativo que se tenha instalado. Para isso, deve-se
publicar o aplicativo.
Aps clicar em PUBLISH, aparecer uma janela (Figura 7) onde deve-se
selecionar uma imagem para o aplicativo. Os demais campos (tutorial,
crditos e descrio) so opcionais.

Figura 7 Publicao do aplicativo na galeria. Fonte: Autora (2017)

COMPARTILHANDO O APLICATIVO

Pode-se compartilhar o aplicativo de duas formas: como executvel ou

somente o bloco de comandos.
Para compartilhar o aplicativo como executvel (.apkf file) basta selecionar
em BUILD >> APP (save.apk to my computer) como indicado na Figura 8.

5
 Figura 8 Compartilhando aplicativos. Fonte: Autora (2017)

Esse arquivo poder ser compartilhado por email ou mesmo enviado para
uma nuvem. Outra forma de compartilhamento atravs de um QR code. No
entanto, somente aparelhos que tenham scaners podem realizar o download
por esse mtodo.

NOTA
Deve-se certificar que o aparelho em que ser realizado o download do
arquivo permite a instalao de outras fontes alm da loja Android. Do
contrrio, no funcionar.

Caso seja desejado apenas o compartilhamento do cdigo em blocos, isso

poder ser feito para um projetos especfico ou para todos os projetos criados.
No primeiro caso, selecione o projeto desejado pela checkbox ao lado do
nome e em seguida, na aba PROJECTS, selecione Export selected project
(.aia) to my computer (Veja a Figura 9). No segundo caso, selecione a opo
Export all projects.

Figura 9 Compartilhando os cdigo de blocos. Fonte: Autora (2017)

O QUE SO O DESIGNER E BLOCKS EDITOR DA

FERRAMENTA?

DESIGNER

Designer ou Component Designer a seo onde esto os elementos de

combinao para a criao da interface grfica do aplicativo, como se fossem
ingredientes de uma receita. A Figura 10 mostra como o ambiente na Web.

6
 Figura 10 O designer do App Inventor. Fonte: Autora (2017)

O Desginer dividido em reas:

Viewer (localizado no centro da janela):

onde os componentes sero arranjados para que o
aplicativo tenha o aspecto desejado pelo usurio.
Contudo, necessrio realizar a confirmao pelo
emulador ou aparelho com Android;
Paleta (localizada a esquerda do Viewer):
lista os componentes organizados por sees;
Componentes (localizado a direita do
Viewer): lista os componentes que esto sendo
utilizados na construo do aplicativo;
Media (localizado abaixo do Componentes):
lista as mdias (som e imagens) que esto sendo
utilizados;
Propriedades (localizado a direita de
Componentes): so detalhes de um determinado
componente selecionado, os quais podem ser
editados.

EDITOR DE BLOCOS

O editor de blocos o local onde o usurio ir dar

instrues aos componentes do que fazer e quando
fazer. A Figura 11 mostra como o ambiente de
programao por blocos.

7
 Figura 11 Editor de blocos do App Inventor. Fonte:
http://ai2.appinventor.mit.edu/. Visualizado em: 19 de fevereiro de 2017.

Uma das vantangens do App Inventor que os blocos possuem um formato

especfico. De modo que um comando s pode ser conectado a outro que
possua um encaixe compatvel, tal qual um quebra cabea (veja a Figura 12).
Assim, a ferramenta impede a ocorrncia de erros.

Figura 12 Opes de comando para o componente de som.Fonte:

http://ai2.appinventor.mit.edu/. Visualizado em: 19 de fevereiro de 2017.

MIT AI COMPANION-WIFI CONNECT TO DEVICE

possvel desenvolver o aplicativon em um computador e test-lo em um

aparelho Android. Para isso basta baixar o aplicativo Mit AI2 Companion e
conectar ambos via Wi-Fi. Na pgina de desenvolvimento, clique em
CONNECT >>ALL COMPANION como mostra a Figura 13.

8
 Figura 13 Conexo entre computador e aparelho Android. Fonte:
<http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html>. Visualizado
em 19 de fevereiro de 2017.

Uma caixa de dilogo similar a Figura 14 ir aparecer com o cdigo. O

mesmo dever ser infomado no aparelho na janela apropriada.

Figura 14 Cdigo para conexo entre computador e aparelho Android.

Fonte: <http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html>.
Visualizado em 19 de fevereiro de 2017.

REFERNCIAS

[1] TECHNOLOGY, Massachusetts Institute Of. MIT APP INVENTOR

2. Disponvel em: <http://appinventor.mit.edu/>. Acesso em: 19 fev.
2017.

[2] WOLBER, David et al. App Inventor 2: Create Your Own Android
Apps 2. 2. ed. Sebastopol: O'reilly Media, 2014. 360 p.