Como desenvolver aplicações para Android com HTML, CSS e Javascript

Recentemente escrevi um post tratando dos mais diversos frameworks para desenvolvimento mobile para as mais variadas plataformas. Desde soluções conhecidíssimas como os frameworks nativos até soluções mais exóticas visando aumento de produtividade, principalmente no que tange desenvolver uma só vez e fazer build para mais de uma plataforma. O post de hoje trata justamente sobre isso, e se enganou quem pensou que eu ia usar o Corona SDK, cujos posts estão espalhados por este blog. O post de hoje vai para todos aqueles webdesigners que sonharam em ter aplicações desenvolvidas para dispositivos móveis mas que não entendem bulhufas de Java, Objective-C e muito menos Lua. Que tal desenvolvermos para 7 plataformas diferentes com apenas três siglas mágicas: HTML, CSS e JS!

PhoneGap

PhoneGap

Em 2009 três amigos desenvolvedores da empresa Nitobi, criaram um fork do Apache chamado Callback, que visava ser um container web para dispositivos móveis e ao mesmo tempo um framework web. A idéia dos três amigos era que qualquer desenvolvedor web que conhecesse HTML + CSS + JS pudessem desenvolver sistemas para dispositivos móveis acessando os recursos dos dispositivos através de um intrincado framework JS + poderosos recursos nativos que eles tiveram de desenvolver com C++ e Objective-C. Pois bem, muito tempo depois o tal projeto se tornou o que hoje chamamos de PhoneGap, o Apache Callback se tornou o Apache Cordova e a Nitobi foi comprada pela Adobe (essa é pra quem achava que a Adobe estava fora da briga mobile…). Hoje o projeto é mantido por várias empresas como Adobe, RIM, Microsoft e IBM, que ajudam a escrever os algoritmos de comunicação com seus dispositivos e o projeto tornou-se open-source, gratuito e suporta hoje as plataformas Android, iOS, Windows Phone 7, Bada, WebOS, BlackBerry e Symbian.

PhoneGap permite aos desenvolvedores criarem aplicações de acordo com as normas das lojas de aplicativos de forma extremamente rápida usando APIs de comunicação com os hardwares dos aparelhos, e se mantém através de doações de usuários e empresas e através de um serviço de build na nuvem, para que o desenvolvedor front-end mais preguiçoso da face da terra não precise nem mesmo saber compilar um projeto no Xcode ou Eclipse para que sua aplicação funcione.

A Prática

Nossa primeira prática com esse framework será sobre a plataforma Android. Em uma próxima oportunidade quero mostrar o poder de interoperabilidade da ferramenta, mas por ora estou com uma preguiça danada, ahusashausa. Faremos um simples Olá Mundo para Android usando HTML, CSS e Javascript de forma bem básica e amadora. Para começar, baixe a última versão do PhoneGap no site oficial: http://phonegap.com/

Extraia o conteúdo do download e verá que temos uma pasta de documentos com toda a documentação do PhoneGap em arquivos HTML e uma pasta de bibliotecas com uma biblioteca para cada plataforma. Sim isso mesmo, não existe mágica. Para cada plataforma existe uma versão diferente do framework. Mas não se assuste, salvo se usar recursos de hardware específicos de uma plataforma, um mesmo site desenvolvido por você irá funcionar em qualquer um desses frameworks. O processo de instalação das bibliotecas muda conforme o framework, aqui demonstrarei como configurar o Eclipse/MotoDev para utilizar a biblioteca Android.

Eu recomendo o MotoDevAndroid Studio para desenvolvimento Android por diversas razões que não cabem ser explicadas aqui novamente. Se quer saber os motivos e/ou não sabe como baixar/configurar o dito-cujo, sugiro ler este meu guia curto e objetivo sobre o assunto. Como este post é antigo, nele eu estava usando o MotoDev, que nada mais é do que o Eclipse para Android.

Package Explorer

Abra o MotoDev e crie um novo Android Project. Dê o nome de OlaMundo a ele, defina a versão do Android como 2.2 (a mais comum atualmente) e certifique-se de que ele é o único projeto aberto em seu Package Explorer. Caso tenha algum outro projeto aberto, feche-o para evitar conflitos posteriores que impedem a compilação correta da aplicação.

Na raiz de seu projeto você terá de criar uma pasta libs. Dentro da pasta assets você terá de criar uma pasta www. E por fim, dentro da pasta res você terá de criar uma pasta xml. Com estas pastas criadas, vamos ao segundo passo: vá na pasta do PhoneGap, dentro da lib do Android e copie o arquivo com extensão .js pra dentro da pasta assets/www do seu projeto. Aproveite que está com a pasta do phoneGap aberta e copie o conteúdo da pasta xml para dentro da pasta res/xml do seu projeto. E por fim, copie o arquivo .jar da pasta do phoneGap pra dentro da pasta libs do seu projeto. Qualquer um que já tenha hospedado algum site algum dia sabe para qeu serve a pasta www dentro de um container web, e aqui a função dela é exatamente a mesma: qualquer arquivo colocaod nesta pasta será interpretado pelo Apache Cordova como um site, mas rodará nos dispositivos como se fosse uma aplicação nativa. Seu PackageExplorer deve se parecer com a imagem ao lado.

Ainda temos algumas coisas pra ajustar antes de poder sair rodando nossa aplicação web. Temos de dizer ao Android Project que ele tem uma nova dependência além do tradicional arquivo jar do Android. Para fazer isso, clique com o botão direito sobre a pasta lib e vá em Build Path > Configure Build Path. Vá na aba Libraries e clique em “Add Jars”, navegue até a pasta lib e marque o .jar que veio com o phonegap. Isto permitirá a adição das bibliotecas Java que integram o Apache Cordova ao Android, então o nosso próximo passo é criar nossa aplicação propriamente dira, que desta vez, não é feita com Activities.

Java Build Path

Vá na sua Activity principal do projeto, geralmente MainActivity, e troque o conteúdo do arquivo pelo seguinte código:

Note que este trecho de código irá carregar o seu index.html, isso se você tiver um é claro. Vou deixar aqui a cargo de sua criatividade. Imagine que a www é a pasta FTP do seu provedor de hospedagem e que ele somente suporta HTML + CSS + JS, nada de linguagens server side. Crie um index.html e coloque dentro de assets/www para que a app funcione. Calma, que ela ainda não está funcionando, ainda temos um último ajuste a fazer, desta vez no AndroidManifest.xml para fornecer ao PhoneGap algumas permissões. No seu AndroidManifest.xml, inclua o seguinte código entre as tags <uses-sdk …/> e <application…/>:

e além disso, inclua o seguinte código dentro da tag <activity>:

Testando

Após toda essa parafernália de configuração, finalmente podemos testar nossa aplicação usando o simulador do Android disponível através do MotoDev. O funcionamento de uma aplicação construída com PhoneGap é o mesmo de qualquer outro framework e isto você perceberá na primeira execução. No final deste post incluí o código fonte do projeto que possui um exemplo simples de CSS, de HTML e um botão que dispara um alert Javascript, que psmem, exibe um Toast tradicional do Android (espécie de MessageBox tosca). Tendo essas possibilidades em mente, imagine o que você pode fazer com um JQuery Mobile ou coisas do gênero e talvez um web-service em um servidor remoto fornecendo conteúdo dinâmico à app!

Exemplo de App Web com PhoneGap no Android

Conclusões

E o que acontece com os frameworks multiplataforma como Corona e Marmalade? Bom, na minha humilde opinião, desenvolver games com um desses frameworks de scripting ainda é muito mais fácil do que usando HTML e JS. Ainda assim, muitas empresas, como o banco Bradesco, optaram por soluções como PhoneGap para desenvolvimento de suas aplicações, trazendo aos usuários uma experiência muito semelhante à vivenciada nos Internet Bankings por aí. Resumindo, PhoneGap é uma excelente alternativa para desenvolvimento de aplicações multi-plataforma que não terão o look-and-feel nativo das plataformas, mas que se assemelharão a páginas web tradicionais. também é uma ótima pedida aos desenvolvedores web tradicionais, inclusive que podem usar o DreamWeaver como IDE para o desenvolvimento Android com PhoneGp.

Em posts futuros espero cobrir o uso de PhoneGap para uso de recursos de hardware dos celulares e também o uso de phonegap para desenvolvimento de apps para iPhone. Afinal, nem só de Android vive o mundo mobile. Até a próxima!

 

Agora, se quiser aprender a desenvolver apps nativos para Android, dê uma olhada nesse meu livro aqui!

Maratona de Eventos em Maio e Junho

Maio e junho tem sido de longe os meses mais corridos para mim desde…sei lá, desde muito tempo. Esses dois últimos meses fizeram com que eu batesse todas minhas metas pessoais de eventos de divulgação da empresa em que trabalho, dos nossos serviços e por que não dizer, do meu trabalho. Muitas metas que havia traçado no final de 2011 para serem cumpridas até dezembro deste ano, já foram ultrapassados a muito tempo. O post de hoje é para compartilhar um pouco desses resultados a quem possa interessar.

Palestra sobre carreira na FTEC

WebMatrix pelo estado afora!

Graças a uma parceria com a Microsoft Brasil, eu e o Especialista de Produto Fabrício Sanchez (@sanchezfabricio) visitamos várias instituições com a palestra do Fabrício que trata das Tecnologias Microsoft para Desenvolvimento Web. Todo esse roadshow pode ser conferido no site dele em http://fabriciosanchez.com.br. Este projeto de divulgação, principalmente da ferramenta WebMatrix, se deu em função de termos obtido o título de primeiro provedor de hospedagem homologado pela Microsoft para hospedagem WebMatrix, título esse que nos rendeu um vídeo no Microsoft Showcase, como pode ser conferido em: http://www.microsoft.com/pt-br/showcase/details?uuid=e3afb47b-2dd3-4e95-b38d-5e7ff892dca4

Durante todo o mês de maio estivemos presente em instituições até então inéditas para a RedeHost, como Faccat, Ulbra Torres e IPA, entre outras mais tradicionais como FAQI e Facensa.

Palestra sobre Desafios da Web Atual no Dom Feliciano

Semana Acadêmica na UFRGS

Como convidados na Semana Acadêmica da Universidade Federal do Rio Grande do Sul, ministramos 3 palestras, sendo que participei da tradicional “Cloud Computing: do Conceito à Prática”, o Cristiano Diedrich palestrou sobre “Segurança e Alta Disponibilidade em Servidores Apache” e por fim o Fábio Borges estreou como palestrante com a excelente “Gerenciamento de Projetos com Metodologias Ágeis”.

Palestrar na UFRGS foi interessante pois a instituição possui muito respeito a nível nacional, e eu mesmo tive uma curta participação no programa de Mestrado deles no ano passado e pude comprovar na prática a qualidade do ensino deles. Acredito que este tenha sido o primeiro de muitos eventos em conjunto.

Reunião na Acigra em Gravataí

Outros Eventos

Além dos carros chefes de maio e junho com WebMatrix e nossa visita à UFRGS, participei da semana acadêmica na FTEC (Porto Alegre) na palestra de abertura do evento, tratando sobre “Carreira e Desafios em TI”. Na Ulbra Gravataí também participei com a palestra sobre Cloud, que nos abriu espaço para dois cursos de extensão na instituição (que estarão acontecendo até o final deste mês) sobre ASP.NET e Linux (fora a 2a edição do curso de Android, mas disso eu falarei mais tarde).

E por fim, no Colégio Dom Feliciano, em Gravataí, organizei um evento muito especial para os alunos e egressos do curso Técnico em Informática. A ideia era montar uma atualização profissional ao pessoal do curso com relação à web atual, seus desafios, suas tecnologias, etc. O evento durou um dia inteiro, com direito à coffe-breaks fornecidos pela escola. Como ninguém aguentaria me ver palestrar um dia inteiro, montei um cronograma bacanudo junto com colegas da RedeHost que palestraram sobre ORM (Tiago Fonseca), MVC (Fernando Mondo), WebStandards (Adriano Costa) e eu, que abri e fechei o evento com uma palestra sobre “Desafios da Web Atual” e outra sobre “Carreira e Desafios em TI”. Acredito que todos tenham aproveitado bastante, tanto os alunos quanto os meus amigos que eram palestrantes de primeira viagem, hehehehe.

À Seguir

Como citei, estão acontecendo os cursos de Linux e de ASP.NET, ministrados pelo Cristiano e por mim, respectivamente. Ainda em julho eu e o Cristiano Diedrich estaremos participando da Semana Acadêmica do IBGEN em Porto Alegre, com duas palestras. Na sequência, estarei ministrando de forma autônoma (i.e. sem patrocínio da RedeHost) a 2a edição do curso básico de Android na Ulbra Gravataí, em julho. Também em julho, estarei ministrando o curso de ASP.NET aos alunos da FTEC.

Em paralelo com tudo isso, participei de uma reunião na Acigra (Associação do Comércio, Indústria e Serviços de Gravataí) recentemente que serviu para estreitar nossos laços com eles. Também estou tocando um projeto muito ousado com o Unilasalle de Canoas que não posso dar detalhes no momento entre outros inúmeros projetos junto à RedeHost.

É, a vida é dura, mas não dá pra parar agora. Recentemente, no dia 06 de junho, completei mais um ano de empresa e quanto mais veterano eu me torno, mais responsabilidade recai sobre meus ombros para tomar partido nas ações da empresa. Um abraço e até a próxima.

Como programar para BlackBerry

BlackBerry

Devido à Pós-Graduação que estou cursando sobre Desenvolvimento de Aplicações para Dispositivos Móveis, tenho tido contato com os mais variados conceitos e tecnologias em cima de plataformas móveis. Ok, Android já é um velho conhecido para mim, mas esta semana acabei iniciando meus estudos sobre a plataforma BlackBerry, tão famosa por seus smartphones focados para o público executivo, seja pelo excelente serviço de mensageria eletrônica ou mesmo pelos preços salgados de seus aparelhos e serviços (arggh!).

Neste post iremos dar os primeiros passos no desenvolvimento para BlackBerry, entendendo a plataforma, configurando o ambiente e fazendo um clássico Hello World!

Antes de tudo, é importante que você saiba que somente é possível usar todas as ferramentas oficiais para desenvolvimento Blackberry no sistema operacional Windows. No Mac OSX você até consegue desenvolver a aplicação mas só conseguirá testá-la se possuir um aparelho (os simuladores não existem para Mac). No Linux, você nem mesmo consegue desenvolver pois nãoe xiste plugin de integração com o Eclipse for Linux. Caso seja usuário de um desses dois sistemas operacionais, terá de criar uma Máquina Virtual com Windows para poder programar ou então torne sua máquina Dual Boot usando o Bootcamp (Mac) ou Grub (Linux).

J2ME

A plataforma BlackBerry roda sobre o framework Java 2 Micro Edition puro, ao contrário da plataforma Android que resolveu reescrever a roda e criar todo um modelo novo de desenvolvimento de aplicações sobre uma complexa arquitetura. Não que isso seja ruim, muito pelo contrário, mas não estamos aqui para discutir sobre design patterns, não é mesmo? O J2ME é o framework Java para desenvolvimento de soluções móveis. Quem pensou em smartphones não está errado, mas ele é muito mais que isso. Existem três configurações principais de J2ME, com máquinas virtuais Java distintas e capacidades ainda mais distintas: CLDC, CDC e SmartCards.

A CLDC é a configuração padrão para dispositivos com baixa conectividade, pouquíssimos recursos, etc. Os telefones celulares de outrora eram em sua maioria da “família” CLDC, assim como certos set-top boxes, players de música, etc. A CDC é a versão mais fanfarrona da J2ME, onde a imensa maioria dos celulares atuais se encontram e poderosos dispositivos de mídia como Smart TVs, centrais multimídia, Blu-Ray players e or aí vai. E por fim temos uma outra versão voltada a SmartCards, para leitura de cartões magnéticos.

Sobre estas configurações estão os perfis de desenvolvimento, chamados de MIDP, que fornecem as APIs para determinados grupos de dispositivos. É sobre a MIDP que desenvolvemos os MIDlets, aplicações para dispositivos móveis, fazendo uma analogia aos Servlets (aplicações de servidor) e Applets (aplicações de cliente).

Uma vez que teremos de desenvolver sobre a plataforma Java, nada mais natural do que ter de baixar a última versão do JDK (Java Development Kit) no site da Sun Oracle em http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u3-download-1501626.html

Download do BlackBerry SDK

Ambiente

Para desenvolvermos para BlackBerry usamos o bom e velho Eclipse, caso não tenha o Eclipse ou queira se certificar de estar com a última versão (Indigo), baixe-o diretamente do site oficial http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/indigosr2

Depois de estar com o Eclipse em sua máquina, é hora de baixar o BlackBerry SDK, que contém nada mais nada menos que o plugin para desenvolvimento no Eclipse e as bibliotecas e APIs específicas para BlackBerry, afinal a J2ME é para micro dispositivos em geral. Baixe o BlackBerry SDK no site oficial do fabricante https://developer.blackberry.com/java/download/eclipse, sendo que eu recomendo baixar a versão standalone do plugin, pois tive uma péssima experiência com o download via Eclipse…Aproveite que está no site do fabricante e também baixe algum simulador do BlackBerry, sendo que eu recomendo a versão BlackBerry Bold com SO 7.1, que é uma versão muito comum entre os usuários atualmente. Ops, ia esquecendo do link do simulador: http://us.blackberry.com/developers/resources/simulators.jsp

Note que o site irá exigir que você baixe um gerenciador de download da Akamai Software para que seja possível baixar o plugin e o simulador. É, não tem jeito. Eu realmente tive de instalar aquela porcaria apenas para baixar dois arquivos do site…

Download do Simulador

Instale o JDK, depois o Eclipse (que é só copiar a pasta…), e por último o plugin do BlackBerry seguido do simulador. Pronto, você está apto a desenvolver para BlackBerry!

Desenvolvendo

Abra o Eclipse. É provável que ele lhe faça alguns questionamentos como workspace do usuário (apenas confirme), se você quer que seja verificado se existem atualizações (sim) e por aí vai. Apenas concorde pois louco não se contraria e vamos direto criar nosso primeiro BlackBerry project como mostra a figura abaixo. Apenas dê um nome ao projeto e manda um Finish para começarmos a programar de uma vez.

Com uma estrutura similar ao do Android (ou seria o contrário?) você verá uma pasta src (source) com os arquivos .java tradicionais da linguagem e uma pasta res (resources) com as imagens da sua aplicação. Além disso você verá um arquivo BlackBerry_App_Descriptor.xml que seria o equivalenete ao Android Manifest. O que nos interessa aqui são os arquivos da pasta src mesmo. Cole o seguinte código dentro do arquivo MyApp.java:

Agora cole o seguinte código dentro do arquivo MyScreen.java:

Para executar, apenas clique com o botão direito sobre MyApp.java, vá em “Run As” e selecione “BlackBerry Simulator”. Na primeira compilação o Eclipse deve lhe perguntar algo a respeito de uma tal de pré-compilação. Clique em “Restart Eclipse” e quando ele abrir de novo, apenas vá em Windows -> Open Perspective -> Other e escolha a opção de BlackBerry e lá estará seu projeto novamente, do ponto onde parou. Agora sim você pode mandar executar sua aplicação com o Run As -> BlackBerry Simulator para ver uma longa tediosa inicialização do BlackBerry SO 7.1.

Testando no simulador

Quando ele tiver iniciado por completo, clique em All e depois role até o final da tela, você deve ver o ícone genérico de aplicações BlackBerry por lá (uma janela transparente). Clique nele e verá sua aplicação funcionando.

Caso não veja o dito-cujo, vá no menu do simulador e clique em File -> Load BlackBerry Application or Theme, selecione o arquivo .cod (extensão das aplicações Blackberry) e mande dar um restart no BlackBerry para que ele reconheça a aplicação recém-instalada. Assim que ele terminar todo o processo novamente, sua aplicação estará lá para testes. Incrível não? Uma dica para agilizar seu desenvolvimento é nunca fechar este simulador e sempre que der um Run As no Eclipse, vá no menu File do simulador e instale novamente a aplicação para que ela seja reinstalada no simulador.

Bons estudos!

Conclusão

O mercado para BlackBerry já viu dias melhores e a canadense RIM, fabricante do aparelho e do software, tem demitido muita gente para corte de gastos. Para mim BlackBerry é apenas um tema ultrapassado de faculdade, assim como aquelas linguagens mortas que muitas vezes aprendemos a utilizar na graduação. De qualquer forma, servem para me mostrar o quão maravilhosas são as plataformas iOS e Android, hehehehe.

Se você está lendo este post até aqui é porque tem de programar algo para BlackBerry por algum motivo. E isso é um bom sinal, indica que a princípio ainda existe alguém ganhando grana com apps para esta plataforma. E dinheiro sempre é bom, não é mesmo? Até mais!

* OBS: agradecimentos ao prof. Gilberto Irajá, da Unisinos, que escreveu o material que usei como base para este post.

Para programar para BlackBerry é importante uma base sólida de Java. Recentemente escrevi um livro sobre esse assunto, que você pode conferir aqui.