Desenvolvendo seu primeiro aplicativo móvel multiplataforma com HTML5

Muita gente hoje em dia sonha em se tornar o próximo milionário do mundo dos Apps para dispositivos móveis, mas quase sempre o desânimo bate quando se descobre que cada plataforma móvel (Android, Apple/iOS, BlackBerry, etc...) trabalha com linguagens e kits de desenvolvimento distintos, o que fazem com que a curva de aprendizado para quem está partido do zero seja mesmo bem assustadora.

A boa notícia aqui é que já existe ao menos uma ferramenta Open Source que te ajuda a desenvolver um aplicativo com HTML5 e gerar à partir dele aplicativos nativos para diversas plataformas móveis. Sim, é isso mesmo que você leu: se você sabe um pouco de HTML, CSS e JavaScript, já pode começar a desenvolver aplicativos móveis, e o intuito deste artigo é te ajudar a desenvolver o seu primeiro app.

Unindo o útil ao agradável, vamos aproveitar esta oportunidade para desenvolver um App que você vai poder usar de verdade no seu dia a dia e claro, personaliza-lo à sua maneira e distribuir para os amigos, afinal de contas, tem cartão de visitas melhor do que um App nos dias de hoje ?

Álcool ou Gasolina ?

Muita gente no Brasil tem carro Flex, e toda vez que chega ao posto para abastecer a mesma pergunta atormenta a mente: Álcool ou Gasolina ?

A imensa maioria que eu conheço acaba tomando a decisão por impulso, porque é difícil mesmo equacionar os preços dos combustíveis na bomba versus o consumo atual do seu carro com cada um deles, e é isso mesmo que nosso App vai fazer: armazenar de forma permanente os dados de consumo (para que você não tenha que digita-los toda vez que for ao posto), e com base neles e nas informações de preço que você digita quando chega ao posto, fazer todo o cálculo e te ajudar a decidir... Vamos nessa ?

Muita gente pensa que HTML5 é apenas a nova versão do HMTL4, mas na verdade o HTML5 é um framework bem completo para o desenvolvimento de aplicativos multiplataforma, composto basicamente por três linguagens bem conhecidas de muitos profissionais de TI: HTML + CSS + JavaScript. Se você já conhece as três (mesmo que de forma bem básica), já pode se aventurar pelo mundo dos Apps HTML5. Para quem quiser aprender mais sobre HTML5, eu recomendo este site aqui e para quem quiser pular esta parte e partir logo para a diversão e ver como ele funciona, recomendo este site aqui.

Aplicativos desenvolvidos em HTML5 são na sua essência multiplataforma, limitados apenas à compatibilidade dos navegadores com suas funcionalidades. Como a especificação HTML5 ainda está em desenvolvimento, existem áreas do padrão que funcionam bem em alguns navegadores mas que não são suportadas por outros, portanto vale a pena investigar o suporte dos navegadores antes de usar alguma funcionalidade.

Para que possa ser tão portável assim, o HTML5 precisa atuar em alto nível e portanto através desta linguagem você não tem acesso direto a todos os recursos de hardware disponíveis nos dispositivos móveis, como acelerômetro, bússola, câmera, geolocalização, recursos de mídia e armazenamento de arquivos entre outros. Estes recursos estão tradicionalmente disponíveis apenas para quem utiliza os kits de desenvolvimento de software nativos (NDKs), que em geral suportam linguagens de programação específicas como Java para Android e Objective-C para iOS.

Utilizando os NDKs para o desenvolvimento de aplicativos você consegue acessar e utilizar todos os recursos de hardware disponíveis, mas isso vai te obrigar a ter versões de seu App desenvolvida especificamente para cada plataforma, o que significa dizer que o que parecia ser a tranquila manutenção de um único código fonte pode acabar virando o pesadelo de múltiplas versões do mesmo software, em linguagens diferentes e utilizando ferramentas e ambientes de desenvolvimento e testes distintos.

Para resolver este problema é que existem os Apps híbridos, desenvolvidos com HTML5 mas que conseguem utilizar recursos de hardware disponíveis apenas aos NDKs de cada plataforma. A boa notícia é que um dos frameworks mais legais para isso é um Open Source chamado PhoneGap, que aliás é o único framework Open Source da atualidade que suporta 7 sistemas operacionais móveis (iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada e Symbian).

Uma das coisas que acho mais interessantes do PhoneGap é que além de você poder instalar e gerar você mesmo os aplicativos para todas as plataformas sem custo algum, eles oferecem ainda um serviço de build na nuvem chamado PhoneGap:Build, onde tudo o que você precisa fazer é criar uma conta, enviar para o site a sua aplicação HTML5 e o serviço se encarrega de compilar, empacotar e te entregar o aplicativo pronto para a distribuição. Quem já teve pesadelos aí instalando e mantendo atualizados ambientes de build, sabe muito bem do que eu estou falando.

O PhoneGap foi desenvolvido por uma empresa chamada Nitobi, que foi adquirida pela Adobe e o seu desenvolvimento Open Source é feito na Fundação Apache, onde ele se chama Apache Cordova.

Introduções e apresentações feitas, vamos ao que interessa: nosso App para cálculo de combustível !

Vamos utilizar neste App um recursos básico do HTML5, o local storage, a funcionalidade de armazenar dados localmente sem que se tenha que ficar trabalhando e gerenciando cookies. Quem já trabalhou com isso sabe que cookies são deliciosos com café mas chatos demais para trabalhar em aplicações Web.

Antes de começar mostrando código fonte aqui, deixo o registro da licença dele:

Nosso App vai ser composto de dois arquivos, sendo um arquivo HTML5 (elementos básicos e JavaScript) e um arquivo .CSS com os estilos da interface gráfica. Mais simples, impossível, e para garantir que vocês vão mesmo gerar os seus próprios aplicativos, conquistar amigos e dominar o mundo, vou disponibiliza-los aqui.

O coração do App é seu arquivo HTML e o header deste arquivo é bem básico mesmo, atentando apenas para a inclusão do arquivo com o frameword do PhoneGap (cordova-X.X.X.js, onde X.X.X equivale à versão do PhoneGap utilizada) e do arquivo de estilos (style.css):

 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <b><script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script></b> 

Criamos dentro do arquivo um formulário, para poder coletar dados do usuário:

 
<form class="form"> <h1>Calculadora Flex:</h1> <table> <tbody><tr> <td> <label for="Gas_Cons">Consumo com Gasolina:</label> </td> <td> <span class="kml">KM/L <input name="Gas_Cons" id="Gas_Cons" type="number"> </span> </td> </tr> <tr> <td> <label for="Eta_Cons">Consumo com Etanol:</label> </td> <td> <span class="kml">KM/L <input name="Eta_Cons" id="Eta_Cons" type="number"> </span> </td> </tr> <tr> <td> <label for="Gas_Price">Preço de Gasolina:</label> </td> <td> <span class="kml">R$ <input name="Gas_Price" id="Gas_Price" type="number"> </span> </td> </tr> <tr> <td> <label for="Eta_Price">Preço do Etanol:</label> </td> <td> <span class="kml">R$ <input name="Eta_Price" id="Eta_Price" type="number"> </span> </td> </tr> </tbody></table> <p> <button onclick="CalcFlex()" type="button">Gasolina ou Etanol?</button> </p> < !--O “NOSSO CÓDIGO” VAI AQUI--> </form> 

E finalmente chegamos ao código que faz a mágica acontecer.


Já usei alguns Apps para cálculo de combustível que me forçavam a digitar o consumo cada vez que precisava do App e não preciso dizer que a frustração foi grande por isso desisti deles. Para que nossos usuários não sofram deste mesmo mal, vamos armazenar os dados de consumo dos seus carros, permitindo que estes dados seja atualizados a qualquer momento, mas sem obriga-los a digitar o dado a cada utilização. Se o usuário for muito preguiçoso ou se não souber mesmo o consumo de seu carro, vamos ainda dar uma ajudinha e instalar o aplicativo com o rendimento médio padrão, baseado na informação que circula por aí de que um carro com Gasolina rende 30% mais que um carro com Etanol (nunca testei isso, portando não me culpe se o consumo do seu carro não seguir esta média de mercado... converse com seu carro a este respeito... ele vai gostar do papo).

Para garantir que nosso código seja executado quando o App for aberto, precisamos carregar nossa função principal na carga da página:

 
window.onload = LoadLocalData();

De forma resumida, a função LoadLocalData vai tentar ler duas variáveis (CalcFlex_Gas_Con e CalcFlex_Eta_Con) do Local Storage e caso elas não existam, vai cria-las com o valor padrão.

 
function LoadLocalData(){ < !-- Ler os valores das variáveis de armazenamento de rendimento do carro --> var gas_con = localStorage.getItem('CalcFlex_Gas_Con'); var eta_con = localStorage.getItem('CalcFlex_Eta_Con'); if (gas_con == null) { < !-- Variável não existe, portanto precisamos criar a variável para armazenamento --> < !-- do rendimento com gasolina CalcFlex_Gas_Con com o valor padrão --> localStorage.setItem('CalcFlex_Gas_Con', '1.3'); < !-- Apresentamos o valor padrão ao usuário --> document.getElementById("Gas_Cons").value="1.3"; } else { < !-- A variável existe, então lemos o seu valor e o apresentamos ao usuario --> document.getElementById("Gas_Cons").value = localStorage.getItem('CalcFlex_Gas_Con'); } < !-- Repetimos todo o processo para as variáveis de rendimento do carro com Etanol --> if (eta_con == null) { localStorage.setItem('CalcFlex_Eta_Con', '1'); document.getElementById("Eta_Cons").value="1"; } else { document.getElementById("Eta_Cons").value = localStorage.getItem('CalcFlex_Eta_Con'); } } 

Com as variáveis devidamente carregadas e apresentadas ao usuário, ficamos aguardando duas ações do usuário: A alteração dos valores padrão de rendimento ou o clique no botão para realizar o cálculo.

Se o usuário decidir alterar os valores de rendimento, precisamos armazenar no local storage os novos valores. Vamos fazer isso através do monitoramento da alteração destes valores usando EventListener 'keyup', como mostra o código abaixo:

 
document.querySelector('#Gas_Cons').addEventListener('keyup',function(){ localStorage.setItem('CalcFlex_Gas_Con', this.value);}, false); document.querySelector('#Eta_Cons').addEventListener('keyup',function(){ localStorage.setItem('CalcFlex_Eta_Con', this.value);}, false); 

Quando o usuário realmente decidir realizar o cálculo, executamos a função CalcFlex abaixo, que é onde toda a mágica acontece:

 
function CalcFlex(){ var gas_con = localStorage.getItem('CalcFlex_Gas_Con'); var eta_con = localStorage.getItem('CalcFlex_Eta_Con'); var gas_price = document.getElementById("Gas_Price").value; var eta_price = document.getElementById("Eta_Price").value; effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('Abasteça com Gasolina'); } else { alert('Abasteça com Etanol'); } } 

Juntando tudo isso, nosso código fica:

 
<script type="text/javascript"> window.onload = LoadLocalData(); function LoadLocalData(){ var gas_con = localStorage.getItem('CalcFlex_Gas_Con'); var eta_con = localStorage.getItem('CalcFlex_Eta_Con'); if (gas_con == null) { localStorage.setItem('CalcFlex_Gas_Con', '1.3'); document.getElementById("Gas_Cons").value="1.3"; } else { document.getElementById("Gas_Cons").value = localStorage.getItem('CalcFlex_Gas_Con'); } if (eta_con == null) { localStorage.setItem('CalcFlex_Eta_Con', '1'); document.getElementById("Eta_Cons").value="1"; } else { document.getElementById("Eta_Cons").value = localStorage.getItem('CalcFlex_Eta_Con'); } } function CalcFlex(){ var gas_con = localStorage.getItem('CalcFlex_Gas_Con'); var eta_con = localStorage.getItem('CalcFlex_Eta_Con'); var gas_price = document.getElementById("Gas_Price").value; var eta_price = document.getElementById("Eta_Price").value; effic_dif = gas_con / eta_con; price_dif = gas_price / eta_price; if (effic_dif > price_dif){ alert('Abasteça com Gasolina'); } else { alert('Abasteça com Etanol'); } } document.querySelector('#Gas_Cons').addEventListener('keyup',function(){ localStorage.setItem('CalcFlex_Gas_Con', this.value);}, false); document.querySelector('#Eta_Cons').addEventListener('keyup',function(){ localStorage.setItem('CalcFlex_Eta_Con', this.value);}, false); </script> 

O arquivo de estilos (style.css) utilizado neste exemplo contém:

 
body { background: #e7e7e7; font-size: 1em; margin: 10px; font-family: Verdana; } h1 { font-size: 1.3em; font-weight: bold; text-transform: uppercase; } input { width: 60px; } p { text-align: center; } .kml { border: 1px inset #aaa; font-weight: bold; color: #f00; } .kml input { border: 0; } 

Devido a algumas limitações de publicação de tags HTML pela engine do blog, o resultado final de tudo o que vimos pode ser obtido aqui, e extraíndo os dois arquivos no mesmo diretório, ao abrir o arquivo html em um navegador, você vai ver algo parecido com a imagem abaixo:

Como fica nossa App no navegador.

Parabéns, você acabou de desenvolver o seu primeiro App HTML5 ! Vamos agora transformá-lo em um App móvel !

Para poder transforma-lo em um App nativo na plataforma operacional móvel que você deseja, basta seguir as instruções existentes no site do PhoneGap aqui para instalar o PhoneGap e o ambiente de build de cada plataforma e compilar seu App. Se não quer fazer nada disso, você pode ainda usar o serviço de Build na nuvem do PhoneGap já citado neste artigo.

Se você busca por informações técnicas em português sobre o Android, recomendo uma visita à página da Comunidade Android da Intel. Lá você vai encontrar muita informação de qualidade em nosso idioma, como este tutorial em português para instalar o SDK do Android, este artigo que explica como o Android é suportado na plataforma Intel, ou este passo a passo sobre como emular um dispositivo Intel no emulador do SDK do Android.

Quem precisar de um emulador mais ágil e que use aceleração de hardware do seu processador Intel para a emulação, recomendo este artigo aqui e para finalizar, as imagens do sistema Android para a arquitetura Intel podem ser encontradas aqui (Ice Cream Sandwich) e aqui (Gingerbread).

Uma dica que deixo para quem for usar o PhoneGap para gerar um aplicativo Android é que o truque mágico para transformar nosso App HTML5 em um App Android é colocar os arquivos do nosso aplicativo (.html e .css) dentro da pasta /assets/www do projeto criado no tutorial de instalação do PhoneGap. Com isso feito, basta alterar o nome do arquivo no código do app, alterando

 
super.loadUrl("file:///android_asset/www/index.html")

do tutorial para

 
super.loadUrl("file:///android_asset/www/NOME_DO_SEU_ARQUIVO.html")

e voilá !

Se seguir a receita de bolo, vai ter um App feito por você rodando mesmo em seu smartphone e vai poder personaliza-lo como quiser, e fazer o que quiser com ele. O meu ficou assim na tela do Android:

Como fica nossa App no Android

O .apk para ser instalado no Android estará disponível dentro da pasta BIN do seu projeto.

Para finalizar, eu gostaria de esclarecer que todo o código aqui disponibilizado foi desenvolvido com propósito educacional e portanto não faz o tratamento de erros de forma recomendada e adequada a um aplicativo de uso comercial. Também procurei realizar os cálculos e movimentações de variáveis da forma mais didática possível e não pensando em otimização.

Muito pode ser feito para que este exemplo inicial se torne um App mais robusto, em áreas como interface gráfica, suporte ao armazenamento de múltiplos veículos por usuário (o HTML5 suporta também uma base de dados local), integração com serviços georreferenciados (como localização de postos mais próximos e os preços dos combustíveis neles) ou até integração com redes sociais (afinal de contas mais legal do que fazer um bom negócio no posto de gasolina é poder dar a dica para outros amigos, não é mesmo). O limite é você quem faz e espero que este pontapé inicial seja bem probveitoso e que ajude a desmistificar o desenvolvimento de Apps.

Deixo ainda o meu registro de muito obrigado ao meu amigo Eugeni Dodonov, que me ajudou a aprender e desenvolver o que estou apresentando aqui, me ajudou a apresentar isso no Intel Developer Forum (IDF) realizado em Maio de 2012 em São Paulo e que infelizmente nos deixou no início do mês de Julho, vítima de um acidente.

O Eugeni usava este App diariamente em seu smartphone Android e se você puder aprender com o que deixamos aqui, tenho certeza que ele vai sorrir lá de cima.

Se gostou deste artigo, colabore para que mais pessoas comecem também a desenvolver Apps, divulgando o artigo nas redes sociais e em blogs.

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.