Escolar Documentos
Profissional Documentos
Cultura Documentos
ndice
1.
3.
4.
Requisitos do sistema
Computador e sistema operacional:
Macintosh (com processador Intel): Mac OS X 10.5, ou superior.
Windows: Windows XP, Windows Vista, Windows 7.
GNU/Linux: Ubuntu 8+, Debian 5+
Navegador
Mozilla Firefox 3.6 ou superior
o
Observao: Se voc utiliza o Firefox com a extenso NoScript, ter que desabilitar esta
extenso. Veja a observao na pgina de Soluo de Problemas do site do App Inventor.
Este teste deveria baixar da Web e executar um arquivo (notepad.jnlp) que criar uma janela chamada
"Notepad"/"Bloco de notas" na qual voc pode introduzir um texto.
Dependendo de seu navegador, talvez voc precise abrir manualmente o arquivo jnlp aps o download
para execut-lo.
Se o teste der certo, feche o Notepad e continue.
Se o Notepad no for executado, significa que o teste falhou.
No tente utilizar App Inventor se o teste tiver falhado. Consulte, a seguir, as possveis solues.
6. Se solicitado, digite sua senha para confirmar que voc realmente deseja instalar o software.
Clique em OK.
7. O instalador confirmar que o pacote de instalao App Inventor foi instalado.
Algo no funciona bem? Visite a pgina de resoluo de problemas, ou consulte o Frum de Usurios do
App Inventor para obter ajuda.
10
11
Drivers do Windows
Drivers do Windows para dispositivos Android
O software de configurao do App Inventor inclui drivers para os telefones Android mais comuns:
1. T-Mobile G1* / ADP1
2. T-Mobile myTouch 3G* / Google Ion / ADP2
3. Verizon Droid (no Droid X)
4. Nexus One
5. Nexus S
Para os telefones que no apaream na lista, ter que obter e instalar os drivers manualmente.
Se seu telefone estiver entre eles, os drivers devem ser instalados junto com o software de
configurao do App Inventor. Para os outros dispositivos, voc dever obter e instalar os drivers de
USB do fabricante. Em qualquer caso, antes de continuar com o processo, bom verificar a instalao
dos drivers como se descreve a seguir:
Algo no funciona bem? Visite a pgina de resoluo de problemas, ou consulte o Frum de Usurios
do App Inventor para obter ajuda.
Voc encontrar os links para os drivers de inmeros dispositivos Android em
http://developer.android.com/sdk/oem-usb.html. Se seu dispositivo no estiver dentre eles,
recomendamos que visite o site do fabricante para obter informaes sobre como instalar os
drivers, ou consultar os seguintes recursos:
Grupo do Google Android Developers e Grupo do Google Android Beginners: Faa uma pesquisa
utilizando termos como "Android SDK", "drivers", "install" e o nome de seu dispositivo
12
2. Nesse diretrio, digite o comando "dir" e verifique se um dos arquivos que aparece listado
adb.exe. Se no aparecer, temos duas situaes: ou no est no diretrio correto ou o
software no foi instalado.
3. Conecte seu telefone em uma das portas USB de seu computador, assegurando-se de que o
telefone indica USB conectado e depurao USB conectada.
4. Digite o comando "adb devices". Deveria aparecer a mensagem "daemon not running", seguido
de "daemon stated successfully" e depois "list of devices attached". Se aparecer um dispositivo
na lista, algo como HT99TP800054, significa que o telefone est conectado e a comunicao com
o computador funciona, portanto os drivers esto bem instalados.
5. Se pelo contrrio, a lista de dispositivos estiver vazia, voc necessitar de drivers adicionais ou
ter que instalar os existentes manualmente.
6. Se ainda estiver bloqueado, este manual, embora seja especfico do Lenovo IdeaPad, oferece
boas dicas: : Guide to editing the adb_ini configuration file.
13
Dica: Tente desconectar e conecte novamente o telefone porta usb de seu computador e
utilize o comando "adb devices" de novo, antes de acessar ou instalar os drivers do
dispositivo, j que s vezes isto basta para que a conexo funcione.
Outros problemas
Se os drivers tiverem sido instalados e o telefone aparece na lista de "adb devices" e mesmo assim
o App Inventor no consegue se conectar, pea ajuda no frum do App Inventor em App Inventor
Forum. Alguns dispositivos podem necessitar de passos extras ou talvez exista ainda outro
problema. Se voc encontrar (ou solucionar) um problema com outros dispositivos, por favor,
publique-o no Frum para que outros usurios do App Inventor possam ser beneficiar da sua
experincia.
Algo no funciona bem? Visite a pgina de Soluo de Problemas em TroubleshootingPageou
consulte o Frum de Usurios do App Inventor em App Inventor User Forumpara obter ajuda.
14
7. Internet
8. Uma conta de Gmail para se registrar no App Inventor. Caso ainda no possua uma, crie
neste
linkuma
conta
gratuita
de
Gmail
(https://accounts.google.com/SignUp?service=mail&continue=http%3A%2F%2Fmail.google.
com%2Fmail%2F<mpl=default&hl=pt-BR).
OBSERVAO:
Estas instrues vo tir-lo da pgina de instrues quando voc for para o App
Inventor.Assegure-se de retornar e seguir o ETAPA4 das Instrues para conectar o
dispositivo ou o emulador.
15
O navegador abrir um site chamado Designer no qual voc deve selecionar os componentes para o app e
desenhar a interface de usurio, conforme imagem a seguir:
16
17
Alm do Designer, voc ter que inicializar o Blocks Editor (Editor de Blocos), no qual se configura o
comportamento do app. Esse um aplicativo separado, que executado em uma outra e prpria janela.
Portanto, voc precisar ter duas janelas abertas para desenhar seu app. Estas duas janelas esto
vinculadas: as mudanas realizadas no Designer aparecero imediatamente no Blocks Editor.
Talvez aparea uma mensagem pedindo para aceitar o arquivo do Blocks Editor.Clique "save", "allow",
"keep", ou qualquer outro tipo de boto de aceitao, como OK,que aparecer (isso depender de seu
computador e navegador).Se voc for usurio do Windows, siga as instrues sugeridas pelo assistente de
instalao automtica.
18
A grande "tela" em branco que aparece direita a rea de trabalho (work rea) onde voc colocar os
blocos para construir o programa.
esquerda, h trs paletas de opes de menu chamadas "Built-In", "My Blocks" e "Advanced", cada uma
com caixas onde so armazenados conjuntos de blocos.Clicando em uma caixa, possvel ver todos os
blocos armazenados nela.Voc pode descer a tela para ver mais blocos.
A opo Built-Incontm os blocos padro disponveis para qualquer aplicativo que for construdo por
exemplo, Definition, Text, Lists etc (Definio, Texto, Lista, etc.).Os blocos da opo My Blocks so blocos
especficos vinculados ao conjunto de componentes que voc selecionou para seu app.A paleta Advanced
contm blocos para a criao de apps de nvel mdio ou avanado com uma lgica mais complexa.
19
O aplicativo Designer executado a partir do seu navegador e o Blocks Editor uma aplicao do Java;
porm, esto vinculados um ao outro.
Portanto, mesmo que voc feche a janela do Blocks Editor, toda a informao do Blocks Editor ser
armazenada no Designer. Assim, ao clicar no boto "Open the Blocks Editor" (abrir o Blocks Editor),
baixado um novo arquivo .jnlp no seu computador e voc dever abri-lo novamente.Ao abrir o novo
Blocks Editor, aparecer todos os blocos que voc tiver programado antes de fech-lo.
medida que voc for construindo seu app, pode ir testando-o no emulador ou no dispositivo Android. Se
tiver um tablet ou telefone Android e quiser utiliz-lo enquanto desenvolve seu app, observe o ETAPA 4A
mais a seguir.
Se no tiver um dispositivo Android, voc pode ver seu app enquanto o desenvolve no emulador de tela
que vem com o App Inventor (que j foi instalado durante a instalao App Inventor).Para construir com o
emulador, observe a ETAPA 4B na sequncia.
Na prxima etapa, configure tanto um dispositivo Android quanto o emulador para conect-lo ao App
Inventor e poder ver seu app enquanto estiver desenvolvendo-o.
20
Wi-Fi: o modo mais simples de conectar seu dispositivo Android ao seu computador e funciona
bem em grande parte das situaes de trabalho. Problemas podem surgir quando a rede Wi-Fi local
no tiver capacidade para suportar muitas conexes. Tal situao passvel de ocorrer, por
exemplo, em um laboratrio ou uma sala de aula, onde podem haver muitos alunos e uma
capacidade limitada de conexes e, normalmente, precisaria de duas por aluno uma para o
computador, outra para o dispositivo. Uma outra situao seria uma conferncia em um hotel,
onde as conexes wireless so, por vezes, restritas.
USB: a conexo por cabo USB no apresenta esses problemas mas voc precisa realizar uma
configurao. Isso no muito difcil em um sistema Mac ou GNU/Linux. Por sua vez, em sistemas
Windows, voc precisar instalar um driver e para cada fabricante, tipicamente, h um driver
diferente. Isso pode ser aceito em um laboratrio de escolar onde a maioria dos computadores e
dispositivos so de um mesmo fabricante e voc tem tempo para configurar no decorrer do curso.
Mas, se voc tiver que configurar rapidamente vrios dispositivos diferentes, ser melhor utilizar o
Wi-Fi.
Dispositivo conectado? Voc j est preparado para criar seu primeiro app! Na sequncia, apresentamos
o dois modos de realizar a conexo vamos chama-los de ETAPA 4A-1 e 4A-2.
21
22
Soluo de problemas:
Voc deve utilizar a ltima verso do app AICompanion do MIT.Se tentar utilizar uma verso antiga do app
AICompanion com o App Inventor, aparecer uma mensagem pedindo para atualiz-la.
Se tiver problemas para se conectar seguindo as instrues para conexes sem fios, assegure-se de que seu
telefone est utilizando a Wi-Fi e no a rede celular.Em alguns dispositivos, mesmo se a Wi-Fiestiver
habilitada, o telefone continua usando a rede celular de dados para se conectar Internet.
Se isto acontecer, desabilite a rede celular de dados(da operadora celular de seu dispositivo) no menu de
configurao de seu dispositivo Android.
23
drivers
no
Windows
aqui
24
ATENO USURIO DO WINDOWS: Voc precisar instalar os drivers de USB correspondentes no seu
computador. Geralmente cada modelo requer drivers especficos (Mais informaes sobre os drivers:
http://appinventor.mit.edu/explore/content/windows-drivers.html)
25
Se seu telefone est com a tela bloqueada, desbloqueia-a como voc faria normalmente para rodar um
aplicativo. Agora conecte o telefone ao computador atravs do cabo USB. Aparecero duas mensagens de
estado na rea de notificaes na parte superior da tela do telefone:
"USB Conectado" ou USB Connected indica que o telefone est conectado ao computador.
Observao: se voc no tiver certeza da verso do Sistema Android que roda no seu dispositivo, v a
Configurao e clique em Sobre o dispositivo. A verso Android aparecer listada (note que em
algumas verses muito antigas do Android, a informao sobre a verso aparecer como verso do
Firmware).
Se seu dispositivo tiver uma verso Android 4.2.2 ou superior, voc dever instalar uma nova verso do
aplicativo ADB do App Inventorem seu computador (veja aqui: http://appinventor.mit.edu/explore/step4a-21-installing-updated-adb-software.html)
26
Em alguns telefones como o DroidX, voc tambm pode alterar este parmetro a partir da notificao na
parte superior da tela:
Clique em S Carga.
27
A conexo pode levar alguns minutos. Uma vez estabelecida, a seta deixar de se mexer e ficar verde e,ao
olhar na tela do telefone, ver um gatinho (partindo do princpio que voc iniciou a partir do tutorial
HelloPurr). o incio de seu aplicativo!
A configurao foi concluda! Parabns! Voc j est preparado para criar seu primeiro app!
Passo 1
Abra o Blocks Editore clique no boto"New Emulator", na parte superior da janela.
28
Passo 2
Aparecer uma notificao informando que o Emulator est sendo inicializado e pedindo para ser paciente,
pois o processo pode levar alguns minutos.
Passo 3
Inicialmente, o Emulator aparecer com uma tela preta (Figura 1). Espere at que o Emulator esteja
preparado, com um fundo de tela colorida (Figura 2).Mesmo quando j tiver aparecido o fundo, voc ter
que esperar at que o dispositivo emulado conclua a preparao do carto SD: aparecer uma notificao
na parte superior da tela enquanto o carto preparado.
Pode ser que voc precise usar o mouse na tela do telefone emulado para desbloquear o dispositivo,
arrastando o boto verde para a direita (Figura 3).
29
#1
#2
#3
Passo 4
O Emulator funciona emulando um telefone, mas com algumas limitaes (por exemplo, no pode
rotacionar o emulador como faria com um telefone). Uma vez desbloqueado o emulador, clique no boto
"Connect the Device..." Quando o cone ficar verde, o emulador estar conectado.
Pronto!A configurao foi concluda! Voc j est preparado para criar seu primeiro app!
30
1.
Soluo de problemas
Esta pgina descreve alguns dos problemas mais comuns com o App Inventor e, medida que novos
problemas surgirem, sero acrescentados nessa lista. Porm, para consultar a ajuda mais atualizada, visite
o Frum do App Inventorpara aprender com outros usurios.
31
Clique nela e abra-a com o Installer. Pode ser que o computador alerte de que est instalando um pacote
de um desenvolvedor desconhecido, mas continue com o processo clicando em OK/Aceitar. O instalador vai
se abrir e mostrar a seguinte mensagem de boas-vindas: "Welcome to the App Inventor setup installer".
Ateno: Se seu Mac no tem o Java 1.6 instalado, o Java 1.5 deveria funcionar, mas prefervel usar a
verso 1.6.
32
33
34
Normalmente este problema causado pelos firewalls. Se seu computador est executando um firewall,
desative-o. Este problema ocorre no Firefox quando se utiliza a extenso de Noscript Application
Boundaries Enforcer extension (ABE) (http://noscript.net/abe/). Voc tem que desabilitar a extenso: Abra
as opes de Noscript, v guia Avanadas e desmarque a opo "Enable ABE".
Quando clico em "Open the Blocks Editor" para abri-lo, parece que algo
est sendo baixado, mas depois no acontece nada.
Na realidade, o que baixado um arquivo .jnlp que pede ao navegador para inicializar o Block Editor. O
mais provvel que seu navegador no esteja configurado para iniciar arquivos .jnlp automaticamente,
portanto, voc ter de inicializ-lo de forma manual. Normalmente basta clicar no arquivo descarregado,
mas depende do navegador. Alguns navegadores lhe permitem estabelecer preferncias para inicializar o
arquivo automaticamente em futuras ocasies.
35
Salve o arquivo.
Reinicialize o udev (reload udev)
Retorne a sua conta de usurio local (exit)
Por ltimo, talvez seja necessrio reinicializar toda a mquina.
36
37
38
Uso do emulador
Utilizo um Mac, o emulador no abre e no h mensagem de erro.
H um problema de autorizaes no Mac de uso compartilhado que faz com que a primeira pessoa que se
conecta possa usar o emulador, mas as seguintes no. Se for isto que estiver ocorrendo, voc pode
solucion-lo entrando como administrador e eliminando o diretrio /tmp/android.
Este passo ter que ser repetido com cada pessoa nova que entrar.
39
40
Verifique se seu telefone tem um carto SD e que o mesmo no est cheio. O App Inventor
utiliza o carto SD para armazenar temporariamente as imagens e o telefone necessita ter um
carto SD para executar o App Inventor.
Assegure-se de que o modo de conexo USB de seu telefone no est usando o carto SD. Por
exemplo, no Droid, voc deve definir o modo de conexo em "somente carga".
Se aparecer uma mensagem de erro sobre armazenamento externo, voc deve verificar se
seu telefone no est configurado em modo Armazenamento em Massa: clique no boto
Incio para ir tela de incio de seu telefone; depois clique nos botes Menu e
Configurao e, por ltimo, em Conectar ao PC. Depois, clique em Tipo de Conexo e
escolha "Somente Carga. Assegure-se de que as outras opes no esto selecionadas:
especialmente importante que as opes "Unidade de Disco" ou "Armazenamento em Massa"
NO estejam selecionadas (esses termos podem variar dependendo do aparelho e da verso
do Android).
Tente desconectar e conectar novamente o telefone e depois clique no boto "Connect to
Device ".
Se tambm no funcionar, feche o Block Editor e atualize a janela do navegador.
Depois,reinicialize o Block Editor, conecte o telefone e verifique se funciona.
SE no funcionar, tente empacotar e baixar o app. Inicialize o app que descarregou, sem estar
conectado ao Block Editor e verifique se aparece a imagem no telefone. Se a imagem
aparecer,voc ter que continuar desenvolvendo o seu app sem que ela aparea no telefone.
Voc somente ver seu app funcionando perfeitamente quando estiver empacotado e baixado,
mas no enquanto voc estiver desenvolvendo-o conectado ao Block Editor. Consulte outros
usurios sobre isso no Frum de App Inventor.
Se a imagem tambm no aparecer no aplicativo empacotado, voc pode comear a suspeitar
que haja algo errado com o arquivo de imagem. Talvez, no seja realmente um arquivo de
imagem: tente abri-lo com um software grfico. Talvez no esteja em um formato que o App
Inventor possa processar: o App Inventor suporta imagens JPG, PNG ou GIF. Talvez o arquivo
seja muito grande: tente utilizar um software grfico para reduzi-la a menos de 300K.
Se nada disto funcionar, pea ajuda no frum de discusso de usurios em: Configurar e
Conectar seu Telefone.
Dica: s vezes, voc pode ver notificaes informando que o telefone est ficando sem espao
de armazenamento, utilizando a Ponte de Depurao (Android Debug Bridge) do Android
para examinar o log do sistema Android.
41
42
servio que algum est executando. Se no tiver nenhum dado associado com o app no dispositivo (por
exemplo, no TinyDB), a soluo mais fcil eliminar o app do dispositivo e instalar a nova verso. Se voc
precisar preservar os dados associados com o app e tiver uma cpia do Keystore que foi usado para
empacotar o app que j est instalado, olhe abaixo para ver como carregar o antigo Keystore para o novo
servio.
43
Estou perdido!
Pea ajuda a outros usurios no Frum do App Inventor.
HelloPurr
Criao de seu primeiro aplicativo: HelloPurr
Agora que voc configurou seu computador e seu dispositivo e aprendeu como funcionam o Designer e o
Blocks Editor ,voc est pronto para completar seu aplicativo HelloPurr.
Aqui voc precisa ter o Designer aberto no navegador, o Blocks Editor aberto em outra janela (que
aparecer em forma de um cone de uma xcara de caf do Java na sua barra de tarefas) e o dispositivo
escolhido - telefone ou emulador Android - conectado ao Blocks Editor .
(Consulte as instrues de configurao se tudo no estiver funcionando.)
Foto do gatinho
Som de miado
44
O navegador abrir o Designer, conforme imagem abaixo, onde so selecionados os componentes para o
app.
45
46
Os componentes Components (nmero 2) tm propriedades que podem ser ajustadas para alterar a
aparncia do componente no app. Para ver e alterar as propriedades de um componente Properties
(nmero 3) primeiro selecione o componente desejado na lista de componentes.
os
componentes
estabelecer
suas
Queremos que o HelloPurr tenha um componente de boto que tenha o arquivo kitty.png que foi
descarregado anteriormente como propriedade de imagem. Ento, para isso voc dever realizar as
seguintes aes:
Passo 1.
Arraste da paleta "Basic" o componente "Button"e solte naScreen1 (tela 1 - como na figura a seguir,
nmero 1).Para fazer com que este boto tenha a imagem de um gato, no
painel Properties (propriedades), sob "Image" (imagem), clique no texto "None..." e depois em Upload
new.... Uma janela aparecer para que voc escolha o arquivo da imagem. Clique em "Browse" e depois
navegue at a localizao do arquivo de imagen kitty.pngque voc baixou anteriormente (nmero 3).
Clique no arquivo kitty.pnge, depois, clique em "Open" e "OK".
47
Passo 2.
Modifique o texto do boto que voc criou. Apague o texto "Text for Button1" que aparece sob a
propriedade Text, Deixe em branco a propriedade de texto do boto de forma que nada aparecer escrito
junto a foto do gato. Se assim for feitp, isso o que deveria aparecer no Designer:
48
Se a foto do gato no aparecer por inteiro, voc pode corrigir este defeito ajustando as propriedades de
altura e largura em Height and Width para "FillParent". Para fazer isso, clique na opo Component,
v para o lado direito do painel de Properties (propriedades), desa a tela at aparecer o campo Width
e clique sobre a palavra Automatic..." para ativar uma lista drop down. Escolha "FillParent". Faa o mesmo
para o campo Height.
Passo 3.
Arraste da paleta "Basic" o componente "Label" (etiqueta) e solte no Viwer (visor nmero 1), colocandoo sob a imagem do gatinho.
49
Passo 4.
Na paleta, clique na caixa Media (mdia) e arraste o componente "Sound" (som) soltando-o no visor
(nmero 1).Porm, independentemente de onde voc soltar o arquivo, ele aparecer na parte inferior do
visor marcado como "Non-visible components" (componentes no visveis).No painel Media clique em
Add... (adicionar nmero 2). Carregue o arquivo meow.mp3 neste projeto (nmero 3).
No painel Properties (propriedades), clique no texto"None..." (nenhum), para alterar a propriedade
Source (fonte) do componente Sound1 para o arquivo meow.mp3 (nmero 4).
50
51
52
Agora voc pode ver que o bloco de comando est no bloco gerenciador de eventos. Este
conjunto de blocos significa: quando Button1 clicado, Som1 reproduzido. O gerenciador de
eventos como uma categoria de ao (ex., um boto ser clicado) e o comando especifica o tipo
da ao, e os detalhes da ao (ex., reproduzir som, reproduzir som especfico).
Voc pode ler mais acerca de como os blocos funcionam aqui: Entendendo os blocos.
Tente! Quando voc clicar no boto, voc deveria ouvir o gato miar. Parabns, seu primeiro app
est sendo executado!
Manual de instalao do App Inventor
53
Nota: h uma questo conhecida com o componente Sound em alguns dispositivos. Se voc vir
"OS Error" e o som no for reproduzido, ou for reproduzido com muito atraso, volte para o
Designer e tente usar o componente Player (encontrado sob Media) em vez do componente
Sound.
Volte ao Designer e selecione "Package for Phone" (empacotar para telefone) no canto superior
direito da pgina do Designer. O App Inventor apresentar trs opes de empacotamento:
54
55
O bloco Sound1.Vibrate tem um encaixe aberto, o que significa que voc deve encaixar algo
nele para especificar mais acerca de qual deve ser seu comportamento. Nesse caso, queremos
especificar a durao da vibrao. A unidade de nmeros dada em milhares de segundos
(milisegundos): para fazer o telefone vibrar por meio segundo, devemos encaixar um valor de 500
milisegundos.
V para a paleta Built-In, submenu Math, arraste o bloco Number (nmero) e solte-o no
encaixe aberto do bloco Sound1.Vibrate.
Depois que encaixar o bloco Number, clique no nmero "123". O nmero ficar iluminado em
preto e voc pode digitar 500 no seu teclado.
56
Feito! Note que o cone amarelo de ateno se foi: o bloco no tem mais um componente
faltando.
Agora conecte seu telefone e toque a imagem do gato na tela. O telefone deveria vibrar e miar ao
mesmo tempo.
Reviso
Estas so as principais ideias que estudamos at agora
Voc constri apps seleccionando componentes (ingredientes) e dizendo a eles o que fazer e quando
fazer.
Voc usa o Designe para seleccionar componentes e definir as propiedades de cada um. Alguns
componentes so visveis, outros no.
Voc pode adicionar mdias (sons e imagens) a apps carregando-os de seu computador.
Voc usa o Blocks Editor para asociar blocos que definem o comportamento dos componentes.
Blocos when ...do ... definem gerenciadores de eventos, que dizem aos componentes o que fazer
quando algo acontece.
Blocos call ... informam aos componentes que devem fazer coisas.
57
Ou baixe o apk
Prximos passos
Agora que voc conhece o bsico sobre como o App Inventor funciona, recomendamos que voc:
Ou, se voc estiver usando o emulador e quiser comear a usar seu telefone, voc pode configurar
seu dispositivo Android para construir apps.
58
Algo no est funcionando direito? Visite a pgina de resoluo de problemas page, ou confira o
Frum do Usurio de App Inventor para obter ajuda.
59