Crie seu app para smartphones Android
Mesmo sem entender de programação é possível fazer aplicativos para a plataforma do Google com o App Inventor 
Basta ter uma boa ideia para criar um app bem-sucedido para Android com o serviço online App Inventor. Ele permite montar aplicativos trocando o código-fonte por blocos de ações com acesso a recursos como os dados das ligações e a agenda do usuário. Neste tutorial, usaremos o App Inventor para criar um aplicativo simples, que exibe o resultado de uma busca predefinida no Twitter. Pronto para seu primeiro app?
1 Preparação
Antes de tudo, prepare o micro para rodar o app inventor. instale o Java e acesse a página de verificação do App Inventor. Pressione o botão Launch e espere aparecer um aplicativo de exemplo, que é um simples bloco de notas. Se rodar direitinho, o micro está pronto.
2 Criação do projeto
Acesse o site do App Inventor (http://appinventor.googlelabs.com) e clique em My Projects > New e dê um nome para seu projeto. a tela que aparece a seguir é dividida em quatro partes. À esquerda, em Palette, estão os componentes que podem ser adicionados à interface. A seção Viewer mostra a interface como será exibida no smartphone. Depois, temos a listagem dos componentes já utilizados (Components) e as propriedades do componente selecionado (Properties).
3 Primeiros componentes
Arraste três componentes da seção Palette para a área de interface, posicionando um Button e um Labelno topo da tela. abra, na seção Palette, o item Social. arraste o componente Twitter para a área de interface. Note que ele não aparece na tela, mas abaixo.
1 Preparação
Antes de tudo, prepare o micro para rodar o app inventor. instale o Java e acesse a página de verificação do App Inventor. Pressione o botão Launch e espere aparecer um aplicativo de exemplo, que é um simples bloco de notas. Se rodar direitinho, o micro está pronto.
2 Criação do projeto
Acesse o site do App Inventor (http://appinventor.googlelabs.com) e clique em My Projects > New e dê um nome para seu projeto. a tela que aparece a seguir é dividida em quatro partes. À esquerda, em Palette, estão os componentes que podem ser adicionados à interface. A seção Viewer mostra a interface como será exibida no smartphone. Depois, temos a listagem dos componentes já utilizados (Components) e as propriedades do componente selecionado (Properties).
3 Primeiros componentes
Arraste três componentes da seção Palette para a área de interface, posicionando um Button e um Labelno topo da tela. abra, na seção Palette, o item Social. arraste o componente Twitter para a área de interface. Note que ele não aparece na tela, mas abaixo.
4 Programação estilo Lego
Pressione o botão Open The Blocks Editor para ver a janela de criação do "código". Depois, acesse a guia Built-In e clique em Definition. Arraste o item Def Variable As para a seção da direita da tela. A seguir, clique na opção Text e arraste o primeiro item, encaixando-o ao Def Variable As. Clique, no bloco, no texto Variable, e o altere para TextoTweets.
5 Bloco do Twitter
O próximo bloco trata da ação quando o botão é pressionado. Passe à guia My Blocks e clique no itemButton1. Arraste o bloco Button1. Click para o lado direito. Agora, clique no item do Twitter1 e arraste o bloco Twitter1.SearchTwitter, encaixando-o dentro do Button1.Click. Volte à guia Built-In e clique emText. Arraste um bloco Text, encaixando-o à direita de Twitter1.SearchTwitter. Troque o texto do blocoText para o que será buscado no Twitter, por exemplo, @_INFO.
6 Dê um laço
O terceiro bloco faz o tratamento dos resultados da busca. Como é mais complexo, vamos criá-lo em dois passos. Primeiro, passe à guia My Blocks e clique em Twitter. Arraste o itemTwitter1.SearchSuccessful para a direita. Dentro desse item vão dois blocos. O primeiro é o ForEach, que está dentro de Control, na guia Built-In. Já o segundo bloco é o Set Label1.Text, que está em My Blocks > Label1. Por fim, acesse My Blocks > My Definitions e arraste o item global TextoTweets, encaixando-o à direita de Set Label1.Text.
Pressione o botão Open The Blocks Editor para ver a janela de criação do "código". Depois, acesse a guia Built-In e clique em Definition. Arraste o item Def Variable As para a seção da direita da tela. A seguir, clique na opção Text e arraste o primeiro item, encaixando-o ao Def Variable As. Clique, no bloco, no texto Variable, e o altere para TextoTweets.
5 Bloco do Twitter
O próximo bloco trata da ação quando o botão é pressionado. Passe à guia My Blocks e clique no itemButton1. Arraste o bloco Button1. Click para o lado direito. Agora, clique no item do Twitter1 e arraste o bloco Twitter1.SearchTwitter, encaixando-o dentro do Button1.Click. Volte à guia Built-In e clique emText. Arraste um bloco Text, encaixando-o à direita de Twitter1.SearchTwitter. Troque o texto do blocoText para o que será buscado no Twitter, por exemplo, @_INFO.
6 Dê um laço
O terceiro bloco faz o tratamento dos resultados da busca. Como é mais complexo, vamos criá-lo em dois passos. Primeiro, passe à guia My Blocks e clique em Twitter. Arraste o itemTwitter1.SearchSuccessful para a direita. Dentro desse item vão dois blocos. O primeiro é o ForEach, que está dentro de Control, na guia Built-In. Já o segundo bloco é o Set Label1.Text, que está em My Blocks > Label1. Por fim, acesse My Blocks > My Definitions e arraste o item global TextoTweets, encaixando-o à direita de Set Label1.Text.
7 Tratamento de textos
Para o último bloco do programa, falta tratar o resultado da busca, transformando-o em texto. Para isso, acesse My Blocks > My Definitions e arraste o item Set Global TextoTweets para dentro do ForEach. Passe à Built-In > Text e arraste o item Join, grudando-o ao lado de Set Global TextoTweets. O item Join tem dois espaços para blocos. Adicione mais um Join no segundo espaço. Agora, na ordem dos espaços de Join, adicione os itens My Blocks > My Definitions > Global TextoTweets, My Blocks > My Definitions > Item e Built-In > Text > Text. Neste último bloco, mude seu texto para \n\n.
8 Hora de testar
Aplicativo pronto, hora de testar usando um emulador. Clique em New Emulator e desbloqueie o smartphone virtual arrastando o ícone de cadeado. Espere a mensagem de criação de cartão SD desaparecer. Volte à janela dos blocos e clique em Connect To Device, selecionando o item do emulador na lista. O programa deve ser carregado no emulador. Pressione o botão e verifique se a busca no Twitter é feita corretamente.
9 Distribuição
Para gerar um pacote que pode ser instalado no telefone e enviado para os amigos, clique no botãoPackage For Phone, que fica na janela do projeto. Escolha a opção Download To This Computer. Será gerado um pacote com a extensão APK. Por enquanto, ainda não é possível enviar os aplicativos criados com o App Inventor direto para o Android Market, mas o Google promete essa possibilidade para breve.
Para o último bloco do programa, falta tratar o resultado da busca, transformando-o em texto. Para isso, acesse My Blocks > My Definitions e arraste o item Set Global TextoTweets para dentro do ForEach. Passe à Built-In > Text e arraste o item Join, grudando-o ao lado de Set Global TextoTweets. O item Join tem dois espaços para blocos. Adicione mais um Join no segundo espaço. Agora, na ordem dos espaços de Join, adicione os itens My Blocks > My Definitions > Global TextoTweets, My Blocks > My Definitions > Item e Built-In > Text > Text. Neste último bloco, mude seu texto para \n\n.
8 Hora de testar
Aplicativo pronto, hora de testar usando um emulador. Clique em New Emulator e desbloqueie o smartphone virtual arrastando o ícone de cadeado. Espere a mensagem de criação de cartão SD desaparecer. Volte à janela dos blocos e clique em Connect To Device, selecionando o item do emulador na lista. O programa deve ser carregado no emulador. Pressione o botão e verifique se a busca no Twitter é feita corretamente.
9 Distribuição
Para gerar um pacote que pode ser instalado no telefone e enviado para os amigos, clique no botãoPackage For Phone, que fica na janela do projeto. Escolha a opção Download To This Computer. Será gerado um pacote com a extensão APK. Por enquanto, ainda não é possível enviar os aplicativos criados com o App Inventor direto para o Android Market, mas o Google promete essa possibilidade para breve.
Comentários