App Inventor – Invente suas próprias aplicações para Android

Introdução

De uns tempos pra cá o mundo está cada vez mais embarcado em dispositivos móveis, a onda é estar conectado o tempo todo, ligado a todo instante às novidades e ao que acontece mundo afora. Esse avanço da área mobile abriu novas áreas no desenvolvimento de softwares, engenheiros e programadores estão cada vez empenhados em explorar essa nova perspectiva.

Com isso, a tendência que se tinha de ter celulares cada vez menores foi deixada de lado e tomou um rumo totalmente ao contrário: aparelhos maiores para ter uma melhor usabilidade ao navegar na internet, com teclados qwerty e telas grandes. Para gerenciar tudo isso, investiu-se muito nos sistemas operacionais: Android, iOS, Bada, Windows Mobile e Windows Phone. Este último com uma parceria entre a Microsoft e a Nokia, que deixou o Symbian de lado para usar o novo S.O. da Microsoft.

A coisa cresceu tanto que o Google, que leva o Android à frente, desenvolveu uma ferramenta que permite que não só desenvolvedores possam explorar essa área, mas sim qualquer pessoa, que nem precisam conhecer uma linguagem de programação. A ideia é que qualquer usuário se torne um “desenvolvedor”. É necessário algum conhecimento em lógica, claro, e para quem conhece programação será mais fácil.

O App Inventor pode ser mais poderoso do que se possa imaginar a primeira vista, só depende da imaginação e raciocínio lógico de quem está usando. Na verdade, o que você faz é mais uma montagem de software do que um desenvolvimento propriamente dito, mas mesmo assim dá para se construir muita coisa interessante.

O App Inventor é gratuito e para usá-lo basta ter uma conta no Google (alguém hoje ainda não tem?).

Primeiro passo

Para começar acesse http://appinventor.googlelabs.com/about/ e clique em “Get Started

É necessário ter o Java instalado na máquina. Você pode instalar também um emulador do Android, para facilitar na hora de testar os apps. Os links  para baixar estão logo abaixo:

Windows: http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe

Linux: http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1_all.deb

MacOS: http://dl.google.com/appinventor/installers/mac/AppInventor_Setup_v_1.1.dmg

Conhecendo a ferramenta

Na parte superior da tela clique em “My Projects”, crie um novo projeto em “New” e dê um nome para seu projeto (aqui chamei de ProjetoTutorial).  A tela do projeto é dividida em quatro partes, conforme mostra a figura 1.

figura 1

Em “Palette” (paleta de componentes) você tem todos os componentes que podem ser usados, como campos de inserção, texto, imagem etc.. Na coluna “Viewer” é mostrada como está a tela da sua aplicação. A coluna “Components” exibe a árvore de componentes da sua aplicação. Clicando em um componente são exibidas as propriedades que ele possui na coluna mais a direita, em “Properties”, e no fim do box Components tem as opções de deletar e renomear o componente. Abaixo desse box, em “Media”, são mostrados os arquivos de mídia que foram adicionados (imagens, vídeos, músicas etc).

Um pouco acima dessas “partes” da tela do AppInventor é importante destacar o botão “Save” e o botão “Checkpoint”. O primeiro serve para salvar o que está sendo feito (claro!) e o segundo serve para se criar um checkpoint no seu projeto (lembra do Super Mario World?), se você fizer alguma besteira no projeto lá na frente é possível voltar a um checkpoint.

Para adicionar um componente na sua aplicação é simples, você só precisar arrastá-lo da paleta de componentes para o display que está na Viewer. Sugiro colocar alguns componentes no display e ir “brincando” com eles, vendo suas propriedades, alterando cor, enfim, fique a vontade.

Para adicionar um arquivo de som, por exemplo, arraste o componente para a viewer. Clique sobre ele na aba Components e depois clique em “Source” > “Add”. Selecione o arquivo e clique ok. (a figura 2 mostra como fazer).

figura 2

Note que nem todos os componentes são visíveis! Alguns componentes, como os de som, bluetooth e banco de dados, por exemplo, não são vísiveis na tela da aplicação. Vou continuar o ProjetoTutorial e mostrar algumas coisas básicas.

Primeiramente, coloque um componente de layout Horizontal Arrangement que fica na aba Screen Arrangement, isso vai dizer como seus componentes ficarão organizados na tela, neste caso, os componentes que forem colocados dentro do Horizontal Arrangement ficarão um ao lado do outro (em linha horizontal).  Agora arraste um TextBox e depois um Button para dentro do HorizontalArrangement1. Para facilitar o entendimento, vou renomear os componentes HorizontalArrangement1, TextBox1 e Button1 para ArrangementHello, tbInputNome e btHello, respectivamente.

Adicione outro Horizontal Arrangement abaixo do que foi criado antes e coloque um componente Label dentro dele (renomei o Label para lbMensagem). Se quiser altere as propriedades de cor, tamanho de fonte etc. Pronto, feito isso já temos um mínimo para entrar no Blocks Editor, que é onde fica toda a lógica da aplicação e comunicação com banco de dados.

O que a aplicação que montamos até agora vai fazer é pegar o nome digitado no textBox e exibir uma mensagem “Bom dia, fulano!” no componente Label.

Clique em “Open the Blocks Editor” e dê as confirmações necessárias para que o editor abra. Na figura 3 você pode ver os componentes de lógica e controle da aplicação (à esquerda da imagem) e os componentes do seu projeto (à direita).

figura 3

Vamos montar o código! A ideia aqui é a mesma: arrastar um componente para a área central da tela. Monte seus componentes da seguinte forma:

figura 4

Traduzindo o “código” acima, o que fizemos foi o seguinte:

Quando clicar no botão btHello altere o texto do label lbMensagem para “Bom Dia, ” + texto digitado no campo tbInputNome.

Para quem é desenvolvedor é muito simples entender a lógica dos componentes acima. Para quem não é, mas tem conhecimentos de lógica, vai ser fácil “pegar” a ideia.

E agora, como rodar minha aplicação? Existem três caminhos para isso:

1. Conectar o seu aparelho Android ao computador e testar o aplicativo diretamente nele.

2. Baixar o aplicativo (um arquivo .apk), copiar esse arquivo para o seu aparelho e instalá-lo como outro qualquer.

3. Você pode testar no emulador do Android.

Aqui eu testei no emulador mesmo.

figura 5

No Blocks, clique em “Connect to Device” para conectar-se a seu aparelho ou em “New Emulator” se quiser testar no emulador. No caso de testar no emulador, após o emulador iniciar o Android, selecione o emulador em “connect to device”. Quando conectar vai aparecer um ícone de um celular com uma seta (ambos em cor verde). Volte na tela do navegador (onde você estava montando os componentes na tela) e vá agora em “Package for Phone” > “Download to Connected Phone”. Pronto, isso já vai instalar o seu app no emulador do Android.

figura 6

Depois desse primeiro momento, vamos incrementar um pouco nosso app. Pegue um arquivo de som qualquer (de preferência um de duração bem curta) e adicione-o a sua aplicação. No Blocks Editor, vá até seu componente de som e arraste o componente “call <nome_do_seu_som>.play” para dentro do componente de click do botão btHello.

figura 7

A lógica da aplicação não se altera em nada com isso, só muda que agora, quando clicar no botão, ele vai emitir um som (além de alterar o texto).

Bom, a primeira parte do tutorial está feita. Na segunda parte vou mostrar como fazer uma aplicação um pouco mais elaborada, inclusive com utilização de um banco de dados.

iNté+

9 comments so far

  1. lukasraizdesign on

    Muito interessante vou criar o meu….valew

  2. eric on

    Como eu faço para ver o código fonte do meu projeto?

  3. alessandro on

    Muito legal vou tentar criar um.

  4. Tiago on

    tem limite para dados no editor de blocos? pq ta dando erro direto, tenho que voltar mas quando tenho muitos dados da erro novamnete. obrigado…

  5. mactev on

    valew espero um dia poder te ajudar tanbem

  6. Nádia on

    Olá! Obrigada pela dica! Tem como criar tipo um histórico de strings?

    • Thiago P. on

      Nádia, na verdade o App Inventor já foi descontinuado há algum tempo. =/


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: