Desenvolvendo seu primeiro aplicativo móvel multiplataforma com HTML5

Fonte: Intel

Autor: Jomar Silva (Intel) em seg, 13/08/2012 – 17:40

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:

    < !--  

     Copyright © 2012 Intel Corporation  

     Permission is hereby granted, free of charge, to any person obtaining a
     copy of this software and associated documentation files (the "Software"),
     to deal in the Software without restriction, including without limitation
     the rights to use, copy, modify, merge, publish, distribute, sublicense,
     and/or sell copies of the Software, and to permit persons to whom the
     Software is furnished to do so, subject to the following conditions:  

     The above copyright notice and this permission notice (including the next
     paragraph) shall be included in all copies or substantial portions of the
     Software.  

     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL
     THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
     FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
     IN THE SOFTWARE.  

     Authors:
        Jomar Silva  Eugeni Dodonov  -->

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>
<h1>Calculadora Flex:</h1>
<table>
 <tbody><tr>
   <td>
     <label for="Gas_Cons">Consumo com Gasolina:</label>
   </td>
   <td>
     <span>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>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>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>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;
    }

Para conferir a conclusão do artigo e as telas do sistema clique aqui!

Compatilhe esse artigo!

Um comentário sobre “Desenvolvendo seu primeiro aplicativo móvel multiplataforma com HTML5

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.