Criando Aplicativos Android com App
Inventor
Sumário 1. Requisitos do sistema ........................................................................................................................................ 4 2. Verifique sua configuração do Java .................................................................................................................... 4 3. Instale o software de configuração do App Inventor ..................................................................................... 5 3.1. Instalação do software de configuração do App Inventor no Mac OS X ................................................... 5 3.2. Instalação do software de configuração do App Inventor no GNU/Linux..................................................... 7 3.3. Instalação do software de configuração do App Inventor no Windows ................................................... 8 4. Configure seu telefone Android......................................................................................................................... 9 4.1. Conexão a um celular ou um tablet .......................................................................................................... 9 4.2. Conexão ao emulador ............................................................................................................................. 12 4.3. Resolução de problemas de conexão com o telefone ............................................................................ 13 5. Conhecendo o App Inventor .......................................................................................................................... 16 5.1 o ambiente do app inventor ................................................................................................................... 16 5.2 Construção do aplicativo........................................................................................................................ 17 5.3 projetando os componentes .................................................................................................................. 17 6. Construindo um label.................................................................................................................................... 19 7. Construindo um botão .................................................................................................................................. 19 8. Adicionando o som “meow” ........................................................................................................................... 20 9. Adicionando comportamento aos componentes ........................................................................................... 20 10. Fazendo o gato miar .................................................................................................................................... 21 11. Empacotando o projeto ............................................................................................................................... 23 12. Passo a Passo 1º Aplicativo.......................................................................................................................... 23 12.1. Calculadora ............................................................................................................................................ 24 12.1. Estrutura de Seleção .............................................................................................................................. 24 12.2. ListPicker ................................................................................................................................................ 25 12.3 Implementando Mapas .......................................................................................................................... 26
Apostila App Inventor
2
12.4. Utilizando Activity Starter...................................................................................................................... 27 12.5. Trabalhando com dados da internet (APIs) ........................................................................................... 27 12.6. Comunicação Http ................................................................................................................................. 28 12.7. Banco de dados TinyDB ......................................................................................................................... 29 12.8. Automatizando processo de persistência de dados dentro de um aplicativo ...................................... 30 13. Colocando o aplicativo no Google Play .................................................................................................... 31 Referência ....................................................................................................................................................... 31
Apostila App Inventor
3
1. Requisitos do sistema Computador e sistema operacional: Macintosh (com processador Intel): Mac OS X 10.5, 10.6, 10.7 e superiores Windows: Windows XP, Windows Vista, Windows sete GNU/Linux: Urutu 8+, Debian 5+Navegador Mozilla Firefox 3.6 ou superior O Nota: Se utilizar Firefox com a extensão No Script, terá que desabilitar essa extensão. Veja observação na página de resolução de problemas do site do App Inventor. Apple Safari 5.0 ou superior Google Chrome 4.0 ou superior Microsoft Internet Explorer 7 ou superior Observação: Para verificar a versão do seu navegador, clique em "Ferramentas" (no Chrome, no ícone da chave inglesa) e depois em "Sobre".
2. Verifique sua configuração do Java Seu computador deve ter o Java 6 (também chamado Java 1.6) instalado. Você pode baixá-lo aqui http://www.java.com. Verifique sua configuração do Java fazendo os dois testes abaixo: Visite a página de verificação do Java. Você verá uma mensagem que indica que o Java funciona e que a versão é Java 1.6. Observação: Você tem que permitir que seu computador execute o Java quando aparecer uma mensagem pop-up no canto superior da página. Execute a verificação do Java de App Inventor clicando neste link. Será verificado se seu navegador está corretamente configurado para executar Java e se seu computador pode lançar aplicativos com o Java Web Start. O App Inventor não funcionará no seu computador se algum destes testes falharem. Não tente utilizar App Inventor até que o problema não seja solucionado. Se o Java continuar sem funcionar corretamente mesmo depois de instalar a última versão, tente o seguinte: 1. Habilite Java através do seu navegador web 2. Habilite Java através do Painel de controle do Java Plug-in 3. Apague a cache de seu navegador web
Apostila App Inventor
4
4. Firefox 3.6 e superiores requerem a atualização 10 de Java 6 ou superiores 5. Java e navegador Google Chrome 6. Configurações de sistema suportadas
3. Instale o software de configuração do App Inventor Para poder utilizar o App Inventor, você precisa instalar previamente certo software no seu computador. O software que precisa está incluído no pacote chamado "App Inventor Setup" ou configuração do App Inventor. Siga as instruções para realizar a instalação no seu sistema operacional e depois configure seu telefone Android.
3.1. Instalação do software de configuração do App Inventor no Mac OS X O App Inventor possui várias partes diferentes que trabalham juntas. Estas partes se encontram em diferentes lugares: nos servidores do Google, no seu computador e no seu telefone. Para instalar as partes que se executam no seu computador, baixe e execute o pacote "App Inventor Setup". Este documento explica como fazer. Baixe o instalador. Para isso, clique na palavra “download” nesta página. Clique em AppInventorSetup.pkg para inicializar o instalador. Clique em continuar.
Apostila App Inventor
5
Leia e aceite o acordo de licença de software. Na tela de instalação padrão, clique em instalar. Não altere a localização da instalação.
Se for solicitado, introduza sua senha para confirmar que realmente quer instalar o software. Clique em OK. O instalador confirmará que o pacote App Inventor Setup foi instalado.
Localização do software de configuração Na maioria dos casos, o App Inventor é capaz de localizar sozinho o software instalado. Mas se for solicitada a localização deste, o caminho que deve ser introduzido é /Applications/Appinventor/commands-for-Appinventor Algo não funciona bem? Visite a página de resolução de problemas, ou consulte o Fórum de Usuários do App Inventor para obter ajuda.
Apostila App Inventor
6
3.2. Instalação do software de configuração do App Inventor no GNU/Linux Você vai precisar de privilégios para fazer a instalação.
Para sistemas que podem instalar pacotes Debian Use estas instruções para sistemas que podem instalar pacotes Debian (Debian ou Ubuntu): Baixe o pacote "Appinventor Setup installer Debian". Para isso, clique na frase “Appinventor Setup installer Debian package” nesta página. Trata-se de um arquivo chamado appinventor- setup_1.1_all.deb (de uns 86 Megabytes). É um arquivo instalador de pacotes Debian. O lugar de instalação no seu computador dependerá da configuração de seu navegador. Normalmente, irá para sua pasta de Downloads. Se seu sistema pode instalar pacotes, basta clicar no arquivo do pacote. Se seu sistema não suporta instaladores de pacotes através de clique, navegue até o diretório onde está o arquivo e execute o comando sudo dpkg --install appinventor-setup_1.1_all.deb . Em qualquer um dos dois casos, talvez você deva se assegurar que o arquivo.deb e o diretório no qual se encontra tem autorização de leitura e execução para todos os usuários. Em alguns sistemas, sudo não tem privilégios predeterminados para a leitura e execução de todos os arquivos. O software será instalado em /usr/google/appinventor-setup. Também terá que configurar seu sistema para que detecte seu dispositivo. Consulte as instruções para desenvolvedores do Android em Configurar um dispositivo para desenvolvimentos. Siga as instruções no passo "configurar seu sistema para que detecte seu dispositivo" no ponto" se você desenvolve com Ubuntu Linux".
Para outros sistemas GNU/Linux Baixe o arquivo "Appinventor Setup installer tar". Para isso, clique na frase “Appinventor Setup installer tar file” nesta página. Trata-se de um arquivo chamado appinventor-setup_1.1.tar.gz (de uns 86 Megabytes). É um arquivo tar comprimido com Gzip. Instale os arquivos seguindo o método apropriado para seu sistema operacional. É necessário extrair o diretório appinventor-setup_1.1/appinventor, que deve ser salvo no caminho /usr/google/appinventor. Se você tiver instalado corretamente, terá o arquivo /usr/google/appinventor/commands-for-Appinventor/adb.
Apostila App Inventor
7
Localização do diretório de configuração Na maioria dos casos, o App Inventor é capaz de localizar o software de configuração instalado por si mesmo. Se perguntar pela localização do software, o caminho do diretório que precisa ser introduzido é /usr/google/appinventor/commands-for-Appinventor Algo não funciona bem? Visite a página de resolução de problemas, ou consulte o Fórum de Usuários do App Inventor para obter ajuda.
3.3. Instalação do software de configuração do App Inventor no Windows A instalação do software de configuração do App Inventor para Windows consta de duas partes: A instalação do pacote de software de configuração do App Inventor. Este passo é o mesmo para todos os dispositivos Android, e para Windows XP, Vista e 7. A instalação dos drivers do Windows para seu telefone Android.
Instalação do pacote de software de configuração do App Inventor Recomendamos que faça a instalação a partir de uma conta com privilégios de administrador. Assim será instalado o software para todos os usuários do computador. Se não tiver privilégios de administrador, a instalação deverá funcionar da mesma forma, mas só será possível utilizar o App Inventor a partir da conta que você usar para instalá-lo. Baixe o instalador. Para isso, clique na palavra “download” nesta página. Localize o arquivo AppInventor_Setup_Installer_v_1_2.exe (~92 MB) na sua pasta de Downloads ou Desktop. O local onde o arquivo estará no seu computador dependerá da configuração de seu navegador. Abra o arquivo. Siga os passos do instalador. Não altere a localização da instalação, mas procure lembrar o diretório de instalação, porque talvez precise comprovar o driver. O diretório variará dependendo de sua versão do Windows e se você se registrou ou não como administrador.
Localização do software de configuração Na maioria dos casos, o App Inventor é capaz de localizar sozinho o software de configuração. Mas se for solicitada a localização do software, o caminho que tem que introduzir é C:\Program Files\Appinventor\commands-for-Appinventor. Se estiver utilizando uma versão de 64-bits, deverá digitar Arquivos de Programa (x86) em vez de Arquivos de Programa. Além disso, se você não instalar o software como administrador, será instalado no seu diretório local em vez de em C:\Arquivos de Programa. Deverá pesquisar para averiguar o nome do caminho correto.
Apostila App Inventor
8
Drivers do telefone O software de configuração 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 não apareçem na lista, você terá que obter e instalar os drivers manualmente. Em alguns casos, os drivers do Windows não são instalados automaticamente e terá que instalar os drivers manualmente. Algo não funciona bem? Visite a página de resolução de problemas, ou consulte o Fórum de Usuários do App Inventor para obter ajuda.
4. Configure seu telefone Android Siga um destes passos, dependendo se quiser fazer o desenvolvimento em um telefone Android ou no emulador:
4.1. Conexão a um celular ou um tablet Nesta seção, asseguraremos que seu telefone está pronto para ser usado com o App Inventor. Comprovaremos vários parâmetros e nos asseguraremos que estão configurados corretamente e, depois, conectaremos o telefone ao computador através de um cabo USB. Se seu sistema é Windows, talvez precise instalar os drivers de seu telefone. Você encontrará as instruções para a instalação de drivers no Windows aqui.
Telefones compatíveis Há centenas de modelos de telefones Android diferentes e constantemente aparecem outros novos. Alguns inclusive não conhecemos. Aqui oferecemos uma lista de telefones feita por usuários de terminais que funcionam corretamente com o App Inventor: http://bit.ly/AppInvDevices. Observação 1: Alguns destes telefones requerem instalação de drivers para funcionar em computadores com o Windows. Mais informações disponíveis aqui. Observação 2: Independentemente do modelo, seu telefone deverá ter um cartão SD instalado ou não funcionará. O App Inventor utiliza o cartão SD para armazenar todos os arquivos multimídia (som, imagem, vídeo).
Apostila App Inventor
9
Inclusive se seu telefone Android não aparecer na lista, é provável que funcione com o App Inventor, mas não podemos garanti-lo. Siga as instruções desta página e se tiver algum problema, consulte a página de resolução de problemas, pesquise no Fórum de Usuários do App Inventor dentro de "Configurar e conectar seu telefone" ajuda de outros usuários que estiverem usando o mesmo telefone que o seu.
Comprove a configuração de seu telefone Para preparar seu telefone para que funcione com o App Inventor, siga os passos abaixo: Clique no botão Início para ir à tela de início de seu telefone. Clique no botão Menu, depois em Configuração e em Aplicativos. Se seu telefone tiver um parâmetro chamado Fontes Desconhecidas, assegure-se que esteja ativado. Clique em Desenvolvimento. Assegure-se que os parâmetros Depuração USB ou USB Debugging e Stay Awake estão ativados.
Se seu telefone estiver com a tela bloqueada, desbloqueia-a como você faria normalmente para executar um aplicativo. Agora conecte o telefone ao computador através do cabo USB. Aparecerão duas mensagens de estado na área de notificações na parte superior da tela do telefone: "USB Conectado" significa que o telefone está conectado ao computador. A "Depuração USB" permite o App Inventor controlar o telefone no computador.
Apostila App Inventor
10
Configuração de armazenamento USB Se ao conectar o telefone ao computador através do cabo USB aparecer uma notificação de "Ativar Armazenamento USB", não clique no botão. Se fizer isso, clique novamente para desativá-lo.
Se aparecer uma mensagem de erro sobre o armazenamento externo, deve comprovar que seu telefone não está configurado em modo Armazenamento Massivo. Para isso: 1. Clique no botão Início para ir à tela de início de seu telefone. 2. Clique n botão Menu, depois em Configuração e Conectar ao PC. 3. Clique em Tipo de Conexão e escolha "Só Carregar". Assegure-se de não selecionar as outras opções. É especialmente importante que as opções "Unidade de Disco" ou "Armazenamento Massivo" NÃO estejam selecionadas (as palavras concretas podem variar dependendo do telefone e da versão do Android). Em alguns telefones como o DroidX, também pode alterar este parâmetro a partir da notificação na parte superior da tela: 1. Abra o painel de notificações da parte superior da tela. 2. Clique em USB Conectado. 3. Clique em Só Carga.
Como conectar seu telefone Abra o Editor de Blocos se ainda não o tiver aberto. Conecte o telefone ao computador com o cabo USB e clique em "Conectar a Dispositivo..." na parte superior da janela do Editor de Blocos. Você verá uma lista drop-down na qual aparecerá seu telefone identificado por seu tipo de modelo (p. ex. HT94LLZ00001). Clique sobre ele. Verá uma seta amarela animada que se movimenta para frente e para trás para indicar que o App Inventor está se conectando ao telefone.
Apostila App Inventor
11
Para conectar: Clique no texto "Connect to Device...." Selecione o número de modelo do telefone. Você verá uma seta amarela animada. A conexão pode demorar alguns minutos. Uma vez estabelecida, a seta deixará de se movimentar e ficará verde. Se olhar na tela do telefone, verá um gatinho (assumindo que você iniciou o tutorial de HelloPurr). É o início de seu aplicativo!
4.2. Conexão ao emulador Se for a primeira vez que utiliza o Emulador, siga os passos abaixo: 1. Abra o Editor de Blocos e clique no botão "New Emulator" na parte superior da janela.
2. Aparecerá uma notificação de que o emulador está sendo inicializado e para ser paciente, já que pode demorar alguns minutos.
Apostila App Inventor
12
3. Inicialmente, o emulador aparecerá com uma tela preta (#1). Espere até o emulador estar pronto e, com um fundo de tela colorido (#2). Inclusive quando já tiver aparecido o fundo, terá que esperar até que o telefone emulado acabe de preparar o cartão SD: aparecerá uma notificação na parte superior da tela do telefone enquanto o cartão está sendo preparado. Pode ser que precise usar o mouse na tela do telefone emulada para desbloquear o dispositivo arrastando o botão verde à direita (#3).
#1
#2
#3
4. O emulador funciona como um telefone com algumas limitações (por ex., não pode "agitar" o emulador como faria com um telefone). Uma vez desbloqueado o emulador, clique no botão "Connect the Device..." e no emulador. Quando o ícone do telefone ficar verde, o emulador está conectado.
Pronto!
4.3. Resolução de problemas de conexão com o telefone Se o Editor de Blocos não puder conectar com seu telefone, pode testar os conselhos abaixo para solucionar o problema.
Apostila App Inventor
13
1. Você pode abrir o emulador? Clique no botão "New emulator" do Editor de Blocos, situado justo ao lado do botão "Connect to Device....". Você pode obter mais informações sobre como inicializar um novo emulador aqui. A inicialização de um novo emulador pode demorar um pouco, deixe alguns minutos para que inicialize.
Assim que o emulador estiver completamente aberto, procure o emulador na lista drop-down. Se encontrar o emulador na lista drop-down, clique no texto "emulator" e conecte-se ao emulador. Você precisa desbloquear o telefone arrastando a barra de desbloqueio na tela do telefone. Se tiver conseguido conectar o emulador, passe ao Passo 2. Se aparecer uma mensagem de erro dizendo que o App Inventor não pode encontrar a localização correta, com certeza significa que instalou mal o Software de Configuração do App Inventor. Siga estas instruções e instale o software novamente. 2. Comprove a configuração de seu telefone Verifique se seu telefone celular tem o Modo Depuração USB ativado. Siga estas instruções para configurar corretamente os parâmetros de seu telefone. Se puder abrir um emulador, mas não puder conectá-lo ao telefone celular, provavelmente o Modo Depuração USB está desativado. Se tiver um Nexus One/S, Droid X, ou outro modelo de telefone posterior, necessitará realizar uns passos extras para configurar seu telefone. Leia a seção "Detalhes para Vários Modelos de Telefones" em configuração do telefone. Também pode consultar a lista de telefones compatíveis feita por usuários e outras soluções alternativas aqui. Assegure-se que seu telefone está corretamente configurado antes de conectá-lo ao computador.
Apostila App Inventor
14
3. Desconecte o telefone e conecte-o novamente. Depois de alterar a configuração, desconecte o telefone e o cabo USB de seu computador e conecte-o novamente. Às vezes é um problema de comunicação entre o telefone, o cabo e o computador. Assegurese que o Modo Depuração USB está ativado antes de conectar o telefone ao computador. 4. O seu telefone tem um cartão SD? Se seu telefone não tem cartão SD, o App Inventor não poderá se conectar ao telefone. Comprove que seu telefone tem um cartão SD. 5. Feche o Editor de Blocos e abra-o novamente Às vezes o Editor de Blocos não atualiza a informação corretamente. Feche o Editor de Blocos (não se preocupe, mesmo fechando o Editor, os blocos não serão apagados). Abra novamente o Editor de Blocos clicando no "Open the Blocks Editor" no canto superior direito do Desenhador. Quando clicar novamente no botão será baixado um arquivo.jnlp no seu computador. Abra o arquivo e inicialize o Editor de Blocos.
Assegure-se que o Modo Depuração USB está ativado antes de conectar o telefone ao computador.
6. Comprove o driver do Windows (só para usuários de PC) Procure o modelo de seu telefone na lista e siga estas instruções para comprovar o driver do Windows. Leia a segunda seção, Comprovação da instalação do driver, para se assegurar que o driver do Windows funciona corretamente. Tente desconectar e conecte novamente o telefone à porta usb de seu computador e utilize o comando "adb devices" novamente, antes de acessar ou instalar os drivers do dispositivo, já que às vezes com isto é suficiente para que a conexão funcione. 7. Reinstale o Java Às vezes ao reinstalar o Java o problema é solucionado. Seu computador tem que ter o Java 6 (também chamado Java 1.6) instalado. Pode baixá-lo aqui http://www.java.com. 8. Comprove sua configuração de antivírus/firewall/segurança Se seu computador tiver uma proteção antivírus ou firewall muito restrita, alguns dos componentes do Software de Configuração do App Inventor poderiam não funcionar corretamente. Altere os parâmetros de segurança e tente reinstalar o Software de Configuração do App Inventor aqui.
Apostila App Inventor
15
Ainda não consegue conectar seu telefone? Dê uma olhada na página de resolução de problemas, ou consulte o Fórum de Usuários do App Inventor para obter ajuda. Talvez encontre a solução na página Graybutton.
5. Conhecendo o App Inventor 5.1 o ambiente do app inventor Você poderá começar a usar o App Inventor usando as orientações de instalação fornecidas no site do MIT, em http://www.appinventor.mit.edu/ O aplicativo roda através de um navegador, mas alguns ajustes serão necessários, inclusive o download de alguns arquivos para seu desktop e adaptações para rodar o mesmo em seu celular. O aplicativo App Inventor possui três partes, a saber: O Component Designer, mostrado na parte esquerda da figura 3, que roda em uma janela de seu navegador. É usado para selecionar componentes para a aplicação e ajustar suas propriedades. O Blocks Editor, que roda em uma janela separada do Component Designer. Pode ser posicionado ao lado do primeiro, se necessário. É usado para criar comportamento para os componentes, que são os blocos. Um telefone celular com sistema operacional Android. Caso não o tenha, poderá usar os emuladores que fazem parte da instalação completa do App Inventor. A figura 3 abaixo mostra todos os componentes do sistema.
Figura 3 – Acima, o Component Designer, o Bloks Editor e um emulador do telefone com Sistema Operacional Android.
Apostila App Inventor
16
5.2 Construção do aplicativo Após ter instalado o App Inventor segundo as recomendações do MIT Labs, a primeira janela que se abre é a do Component Designer. Quando ela estiver aberta, clique no botão Blocks Editor, acima na janela. Se a sua instalação estiver correta, após chamar o Java Web Start, o editor de blocos será aberto em uma nova janela. Nele poderemos observar dois botões como abaixo mostrado (Figura 4).
Figura 4 – Você deverá plugar um telefone ao seu computador ou então abrir um emulador. Escolha New emulator neste segundo caso e, quando ele estiver operacional, click em Conect to Device, para que seu programa possa rodar nele. Se tudo correr bem, seu ambiente de desenvolvimento deverá estar como na figura 3, porém vazio.
5.3 projetando os componentes A primeira coisa a usar é o Component Designer. Os componentes são os elementos que você irá combinar para desenvolver uma aplicação. Alguns são simples, como o componente Label1, que mostra textos na tela, ou Button, que você aperta para iniciar uma ação. Outros componentes são mais elaborados, como a gaveta (canvas) Drawing, que pode guardar imagens paradas ou animadas, um acelerômetro, um sensor de movimento capaz de detectar se você movimenta ou balança o telefone, ou componentes que recebem e enviam mensagens, tocam músicas e vídeo, obtém informações de web sites e assim por diante. Quando você abrir o Designer, ele aparecerá como na figura 4 abaixo.
Figura 5 – O Component Designer do App Inventor
Apostila App Inventor
17
O Designer é dividido em várias áreas: Bem ao centro está o componente denominado Viewer. É o local onde você coloca os componentes e os arranja de modo a formar o aspecto visual do aplicativo. Ele mostra uma imagem aproximada de como ficará a aplicação no final. Por exemplo, um texto poderá ficar até bem comportado neste ambiente, mas poderá ficar quebrado no aplicativo real. Para acompanhar seu trabalho em tempo real, você deverá ter a conexão com seu celular já estabelecida ou então já ter escolhido o emulador. À esquerda do Wiewer está a Palheta, que contém uma lista de componentes que você poderá escolher. A palheta é dividida em seções e, no ponto em que está na figura, as gavetas estão fechadas e não mostram seu conteúdo integral. Clicando nas gavetas, poderemos ver estes componentes. Observe que nos pontos de interrogação (?) temos uma ajuda completa sobre os componentes. Clicando por exemplo em Twitter, teremos a tela de ajuda: A non-visible component that enables communication with Twitter. Methods are included to enabling searching (SearchTwitter) or logging into (Authorize) Twitter. Once a user has authorized their Twitter account (and the authorization has been confirmed successful by the IsAuthorized event), many more operations are available: Setting the status of the logged-in user (SetStatus) Directing a message to a specific user (DirectMessage) Receiving the most recent messages directed to the logged-in user (RequestDirectMessages) Following a specific user (Follow) Ceasing to follow a specific user (StopFollowing) Getting a list of users following the logged-in user (RequestFollowers) Getting the most recent messages of users followed by the logged-in user (RequestFriendTimeline) Getting the most recent mentions of the logged-in user (RequestMentions)
You must obtain a Comsumer Key and Consumer Secret for Twitter authorization specific to your app from http://twitter.com/oauth_clients/new More information
À direita da tela, onde está escrito Components, temos a lista destes componentes com suas propriedades. Observe que este ambiente está funcionado como serviço, SaaS, um dos elementos da Computação em Nuvem, como já vimos em aulas anteriores. Em meu caso em especial, o ambiente de desenvolvimento está registrado nos servidores do MIT, como se pode ver em http://beta.appinventor.mit.edu/#1723267, sendo 1723267 meu número de registro. Experimente transferir o componente Screen1 para a área de desenvolvimento e analise detalhadamente suas propriedades. A metodologia se parece muito com o desenvolvimento de interfaces no Visual Basic. Para desenvolver o aplicativo HelloPurr, iremos precisar de dois componentes visíveis, o componente Label1 com o texto “Aperte o Gato” (Pet the Kitt) e um componente Button que deverá conter a imagem de um gato. Nós também iremos precisar de um componente invisível do tipo “Sound”, que se encontra na gaveta “Media” e que saberá como produzir sons, no caso o miado do gato. Teremos também de selecionar um componente denominado “AccelerometerSensor”, situado na gaveta “Sensor”, e que irá vibrar quando o telefone for sacudido.
Apostila App Inventor
18
6. Construindo um label O primeiro componente incorporado na palheta é Label1, que ocupa a 5ª posição dos componentes básicos (Gaveta Basic). Mude a cor de fundo do elemento clicando na propriedade BackgroundColor, selecionando Blue, azul, e mude a cor do texto para Yellow, amarelo. Aumente o tamanho da fonte para 20. Veja o resultado no emulador. O resultado destas alterações está mostrado na figura 6 abaixo:
Figura 6 – O App Inventor mostrando o componente Label, após ajustes. As operações realizadas até agora retratam o estado do sistema.
7. Construindo um botão A figura do gato é construída por meio de um botão normal, que em seguida é alterado para conter a imagem do gato. Para isto, vamos obter primeiro o botão, indo para a gaveta de componentes básicos e arrastando Button para a palheta. É este botão que usaremos para colocar nele a imagem do gato e fazer com que ela reaja ao ser clicada, fazendo “miau...”. Para isto, baixe a imagem do gato indo ao site do autor do livro, David Wolber, em http://examples.oreilly.com/0636920016632/ Nos diretórios que surgem, baixe apenas o arquivo zipado, que contém todos os programas do livro. A pasta CH01_HelloPurr é a que nos interessa no momento, pois contém a imagem do gato, kitty.png, e o miado do mesmo, meow.mp3.
Apostila App Inventor
19
Vá ao aplicativo e, nas propriedades do botão instalado, clique em Image e procure por kitty.png. Faça o upload desta imagem. Ela deverá aparecer no botão conforme mostrado na figura 7 abaixo. Você poderá observar que, sobre a imagem, ainda está escrito “Pet the kitty”, texto que pode ser alterado ou deletado, como quiser.
8. Adicionando o som “meow” Vamos adicionar o pequeno arquivo em mp3 com o som do miado do gato, que deverá ser ouvido quando clicarmos na imagem do mesmo. O procedimento é semelhante ao anterior, mas deveremos ir para a gaveta Media da tela principal do App Inventor. Arraste o componente de som e coloque-o no Wiewer, a tela principal.
Figura 7 – O aplicativo com um Label e um Botão, com a imagem escolhida. Onde quer que você coloque este componente, ele ficará no local destinado aoscomponentes invisíveis, ao pé da tela do Viewer. Componentes invisíveis como este participam do programa, mas não aparecem quando o mesmo é executado. Clique em Sound1 para ver as propriedades do componente. Ajuste o item Source para meow.mp3. Agora, tanto kitty.png como meow.mp3 deverão aparecer na seção Media do Designer. A Tabela 1 nos mostra os componentes que foram usados até agora nesta aplicação:
Tabela 1 – Os componentes usados até agora no aplicativo HelloPurr.
9. Adicionando comportamento aos componentes Abra o Editor de Blocos na parte direita do menu superior. Examine o Editor de Blocos. É ele que dá vida ao aplicativo. Nós iremos dizer ao componente Kitty Button para emitir um som quando clicarmos nele.
Apostila App Inventor
20
10. Fazendo o gato miar Na parte esquerda da janela vemos os botões “Built-in” e “My Blocks”. Clique em “My Blocks” e verá uma gaveta que se abre mostrando todos os seus componentes que foram criados no Designer: Button1, Label1, Screen1 e Sound1. Portanto, clique na gaveta para Button1. Seus componentes se abrem, mostrando uma seleção de blocos que você poderá usar para dizer ao botão o que ele deverá fazer, iniciando com Button1.Click ao alto, como mostrado na figura 8:
Figura 8 – Clicando em Button1 podemos abrir todas as suas propriedades. Clique no botão Button1.Click, arrastando-o para o espaço de trabalho. Observe atentamente este botão e verá que nele está escrito “When Button1.Click do”, em que a palavra when está em letra de tamanho menor que Button1.Click. Blocos nos quais encontra-se escrita a palavra when são denominados “Event Handlers”, e especificam o que o evento deverá fazer quando um determinado evento acontece. Em nosso caso, o evento desejado está relacionado à figura do gato, que na verdade é um botão. Desejamos que esta ação provoque um som, o miado do gato. A figura abaixo ilustra o processo: When Button1.Click do call.Sound1.Play Podemos notar que o método Click atua sobre o objeto Button1, e o método Play sobre o objeto Sound. Teste sua aplicação em tempo real e verá o resultado da animação referente a este pequeno trecho de código.
Apostila App Inventor
21
Como complemento a esta altura, poderemos fazer o telefone vibrar e, ao mesmo tempo, o gato miar. Este fato está indicado na figura 9 abaixo.
Figura 8 – Acima, quando clicarmos na figura do gato no emulador, um som será ouvido.
Figura 9 – A figura 9 mostrando as duas chamadas: Sound1.Play e Sound1.Vibrate A vibração do telefone é conseguida expandindo a área Sensors da palheta de componentes. Poderemos arrastar então o AccelerometerSensor para a o ambiente de composição, conforme indicado na figura 10, o que fará emissão do som quando o telefone for sacudido.
Apostila App Inventor
22
Figura 10: O acelerômetro, invisível no ambiente de composição, completa o projeto.
11. Empacotando o projeto O App Inventor é uma ferramenta de computação em nuvem, significando que seu aplicativo fica hospedado online em um servidor do MIT Labs à medida que você vai trabalhando. Portanto, se você fechar o App Inventor, o aplicativo estará lá quando você retornar, não sendo necessário salvar coisa alguma em sua máquina. Isto permite também testar seu programa no seu telefone (teste ao vivo). Mas se você desconectar seu telefone do App Inventor, o aplicativo irá parar, pois ele não foi instalado realmente. Você poderá, no entanto rodar o aplicativo em qualquer telefone, mesmo desconectado do App Inventor. Neste caso basta configurar seu telefone fora do Android Market. Vá para Settings Applications, marcando a caixa junto a Unknown Sources (encontre estes termos correspondentes em Português, se for o caso).
Vá então ao ambiente de desenvolvimento (Designer) e clique no botão superior, “Package for Phone”, e selecione “Download to Connected Phone.” Você verá as palavras “Saving” e “Packaging”, um processo que demora cerca de um minuto. Para compartilhar seu programa com alguém, clique em “Package for Phone” e selecione “Download to this Computer”. Isto criará um arquivo com a extensão.apk em seu computador, e você poderá fazer um upload dele de modo que fique accessível na Web. Após isto, seu programa estará pronto para rodar no seu celular.
12. Passo a Passo 1º Aplicativo Criando primeiro aplicativo - Acesse appinventor.mit.edu - Clique em
- Clique em NEW e de o nome de Meow - Faça o download dos arquivos em http://cidadeelshadai.com.br/cursolivre/android/meow.zip - Arraste o Button1 retire o texto em PROPERTIES - Em PROPERTIES do botão clique em IMAGE e faça o upload da imagem - Arras te o componente SOUND que se encontra na paleta MEDIA, selecione PROPERTIES, SOURCE e faça o upload do meow.mp3.
Apostila App Inventor
23
- Abra o BLOCKS EDITOR - Aguarde carregar o projeto inicial - Para certifica que ele carregou o projeto em questão clique em MY BLOCKS e veja se os componentes inseridos no viewer estão presentes. - Em MY BLOCKS clique em Button1 e carregue o Bloco Button1.Click - Carregue o bloco Sound1.Play para dentro do bloco Button1.Click - Clique no botão NEW EMULATOR. Aguarde ele carregar - Em segui clique em Connect to Device e selecione o emulador criado para enviar o aplicado para ele - Aguarde o aplicativo abrir e pode testar!
12.1. Calculadora - Insira duas TEXBOX - SCREEN ARRENGEMENT - Insira 4 Botões - Renomeie os Botões e TEXTBOX - Abra o BLOCKS EDITOR - Inserira o Bloco do TxtNum1.text e TxtNum2.text - BUILT-IN, MATH e arrastar o bloco de soma, colocar o TxtNum1 e TxtNum 2 dentro do bloco soma - Insira o Label1.text - Coloque o bloco de soma dentro da Label1 - Insira o Button1.Click - Coloque o bloco Label1 dentro do Button.Click - Faça o mesmo para as outas operações
12.1. Estrutura de Seleção - Entre em BUILT-IN, CONTROL, arraste o bloco IF - Entre em BUILT-IN, MATH, arraste o Bloco IS A NUMBER? - Em MY BLOCKS, arraste o bloco TxtNum1.Text - Coloque o TxtNum1.text ligado no bloco IS A NUMBER? E o bloco IS A NUMBER? Ligado no bloco IF. - Faça o mesmo para o TxtNum2.Text e deixe conforme a figura abaixo.
Apostila App Inventor
24
12.2. ListPicker - Faça o Download da imagem em http://cidadeelshadai.com.br/cursolivre/android/br-tour.zip - Arraste o componente IMAGE - Em PROPERTIES, PICTURE faça o upload da imagem baixada - Arraste o componente LISTPICKER - Altere o texto do LISTPICKER para “Selecione a Cidade”. Altere a propriedade Width para FillParent, assim o botão irá se ajustar na tela na posição que ela estiver sendo utilizada - Abra o BLOCKS EDITOR - Clique em MY BLOCKS - BUILT-IN, DEFINITION, VARIABLE e coloque o nome nesta variável de listadecidades - BUILT-IN, LISTs, arraste o bloco MAKE A LIST - Adicione 3 textos que serão os três pontos turísticos que iremos inserir. Coloque os três pontos na ordem, Cristo Redentor, Jardim Botânico, Elevador Lacerda. - Clique em MY BLOCKS, LISTPICKER, adicione o bloco Listpicker1.Elements - Clique em MYBLOCKS, MY DEFINITIONS, adicione o bloco global listadecidades dentro do bloco Listpicker1.Elements - Ainda em MYBLOCKS, clique em Screen1, e adicione o bloco Screen1.Initialize - Coloque o bloco ListPicker1.Elements dentro do bloco Screen1.Initialize
Apostila App Inventor
25
12.3 Implementando Mapas - Em Other Stuff adicione o componente Activity Starter - Selecione o componente ActivityStarter1 - Em PROPERTIES, ACTION adicione o texto android.intent.action.VIEW - Em ActivityClass adicione o texto com.google.android.maps.MapsActivity - Em ActivityPackage adicione o texto com.google.android.apps.maps - Em MY BLOCKS, clique em ListPicker1, adicione o bloco ListPicker1.AfterPicking, ou seja depois que n贸s selecionamos, vamos fazer uma determinada atividades - Clique em ActivityStarter1 e adicione o bloco ActivityStarter1.DataUri dentro do bloco ListPicker1, adicione o bloco ListPicker1.AfterPicking - Em Built-in clique Text e adicione o bloco make text dentro do ActivityStarter1.DataUri - Adicione um bloco de texto dentro do bloco make text, altere o texto para geo:0,0?q= (a pesquisa vai ser igual a cidade selecionada) - Em MY BLOCKS ListPicker1 e adicione o bloco ListPicker1.Selection dentro do make text - Em MY BLOCKS, ActivityStarter1, adicione o bloco ActivityStarter1.StartActivity dentro do bloco ListPicker1.AfterPicking
Apostila App Inventor
26
12.4. Utilizando Activity Starter http://beta.appinventor.mit.edu/learn/reference/other/activitystarter.html Como inicializar a própria aplicação, uma câmera, um mapa entre outros componentes.
12.5. Trabalhando com dados da internet (APIs) - Inserir um TextBox para fazer a pesquisa - Inserir um Botão - Inserir uma Label para mostrar a cotação financeira - Hint é o que aparece em cinza antes de escrever o texto - No botão escreva o texto "Clique aqui para pesquisar" - Retire o texto da Label1 - Clique em Other Stuff e adicione o componente Web. Este componente será responsável para acessar a Internet e coletar os dados para serem manipulados.
Apostila App Inventor
27
12.6. Comunicação Http - Abra o aplicativo Cotação Financeira - Abra o Blocks Editor - Adicione o Botão Pesquisar Cotação - Adicione o bloco webYahooFinance.URL que estão dentro do webYahooFinance - Adicione um texto, make text dentro do webYahooFinance.URL - Adicione um texto dentro do make text com o link http://finance.yahoo.com/d/quotes.csv?f=l1&s= - Adicione o bloco txtPesquisaCotacao.Text dentro do Make Text. Esta opção é para capturar no aplicativo a cotação desejada que seja procurada no Yahoo Finance
- Vamos pedir para que esse componente seja executado pelo método GET - Adicione o bloco webYahooFinance.Get dentro do botão Pesquisa Cotação - Adicione o bloco webYahooFinance.GotText que está dentro do webYahooFinance Esse bloco vai verificar se os dados coletados e conexão realizada foi com sucesso retornando o código 200 - Vamos fazer um controle, se o código de resposta for 200 ele mostra para o usuário o resultado - Adicione um bloco IF - Em Built-in adicione um bloco de = que está na opção LOGIC Se o responseCode = 200 lblRespostaCotacao.text mostra a resposta do resposnseContent
Apostila App Inventor
28
- Vamos testar! Digite o código Appel AAPL ou da Google GOOG - Vamos implementar com um IF ELSE - Se o teste for verdadeiro executa uma ação - Senão ele exibe a mensagem. Não foi possível completar a requisição
12.7. Banco de dados TinyDB Como salvar dados dentro do aplicativo? Vamos criar um aplicativo de notas para aprender este conceito. - Insira uma TextBox - Retire a Hint da txtBox em Properties - Selecione Multiline - Width deixe Fill Parent e Height deixe com 300px - Para que possamos salvar os dados vamos inserir um botão e coloque o text dele de "Salvar" - Insira uma Label para mostrar o que deve ser clicado para armazenar - Coloque os seguintes nomes nos componentes: txtNotas btnsalvar lblConfirmacao - Insira o componente Tiny MDB para salvar os dados - Vamos renomear o componente Tiny DB para dbNotas - Vamos abrir o Blocks Editor - Toda vez que botão salvar for clicado nós vamos guarda os dados dentro do banco - Insira os blocos: btnSalvar.Click txtNotas.text dbNotas.StoreValue - Deixe conforme o bloco abaixo
- Insira um bloco de texto - Coloque o texto notas
Apostila App Inventor
29
- Coloque este bloco ligado em dbNotas.StoreValue em tag. Esta opção vai definir a chave de identificação no banco de dados - Vamos inserir o bloco lblConfirmacao.Text, e ligar um bloco de texto para mostrar a mensagem "Nota Armazenada com Sucesso"
Toda vez que esse aplicativo for iniciado será necessário que os dados sejam recuperados no banco de dados. Então toda vez que a tela for inicializada o aplicativo deve recuperar o texto dentro do banco de dados e colocar dentro do txtNotas - Vamos inserir o seguintes blocos abaixo:
O bloco dbNotas.GetValue vai capturar o texto armazenado no banco de dados pela sua chave. Para isso foi inserido um bloco de texto com o valor notas, que foi a mesma chave definida na gravação dos dados.
12.8. Automatizando processo de persistência de dados dentro de um aplicativo - Como salvar os dados automaticamente? - Abra o aplicativo de notas - Remova o botão salvar - Para que possamos salvar automaticamente os dados vamos adicionar o componente clock, a partir do Clock1 os dados serão salvos automaticamente em um intervalo de 1000 milissegundos - Adicione o bloco Clock1.Timer. A cada 1 segundo os dados serão validados e gravados - Adicione o bloco dbNotas.StoreValue. Adicione uma caixa de texto para a chave nota e um txtNota.text que será onde os dados a serem salvos serão inseridos.
Apostila App Inventor
30
- Adicione o bloco Clock1.Now, que irá retornar a hora atual. Adicione a label confirmação para o texto dela para o horário de agora. - A função Clock1.Now irá retornar um tipo de dado não compatível com o texto, dando um erro. Para isso é necessário formatar o Clock1.Now para texto. Adicione um bloco que formate esses dados para texto. Adicione o bloco Clock1.FormateDateTime.
13. Colocando o aplicativo no Google Play https://play.google.com/apps/publish/signup/
Referência David Wolber, Hal Abelson, Ellen Spertus & Liz Looney, “App Inventor – Create Your Own Android Apps”, O´Reilly Ed., USA, 2011.
Apostila App Inventor
31