Iniciando Com o Intel XDK

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Desenvolvimento para dispositivos móveis utilizando tecnologias web não é novidade. Graças ao PhoneGap e ao Appcelerator Titanium, os desenvolvedores web podem criar aplicativos híbridos com acesso ao hardware dos aparelhos. Uma nova solução para o desenvolvimento com HTML5/CSS/JavaScript é o XDK da Intel. Nesse artigo, mostrarei o porque ele vale a pena.

1. O Que Ele É?

Se você está envolvido com desenvolvimento móvel, provavelmente já ouviu falar ou usou ferramentas como o PhoneGap ou o Appcelerator Titanium. Essas ferramentas permitem os desenvolvedores web usarem suas perícias para criar aplicativos móveis híbridos.

Ano passado, a Intel comprou a appMobi e integrou suas ferramentas ao Intel XDK. Esse produto unificado e simplificado é um ferramental completo para desenvolvimento móvel. Um desenvolvedor pode sair de algumas poucas linhas de código para uma aplicação totalmente compilada em um único conjunto de ferramentas. E o melhor de tudo, o XDK é gratuito para baixar.

2. Funcionalidades

A primeira coisa que você perceberá sobre o XDK é o quão fácil ele é de instalar. O PhoneGap requer bastante configuração e o Titanium precisa de requerimentos específicos em relação a bibliotecas instaladas. Para começar com o XDK, você só o baixa e instala.

A beleza do XDK está em permitir você criar aplicações para qualquer plataforma. Com outras ferramentas, você está limitado à plataforma em que você está desenvolvendo. Assim, uma vez que a Apple não permitirá o Xcode ser executado em máquinas que não sejam Mac OS X, você deverá possuir um Mac para desenvolver para o iOS.

O Intel XDK permite que você desenvolva para qualquer plataforma, já que a compilação é feita nas nuvens. O PhoneGap oferece um serviço similar para desenvolvimento multi-plataforma, mas é limitado. E com o XDK, você não está limitado às plataformas móveis. Você planeja criar aplicativos para o Chrome, Facebook, Amazon ou Nook? O XDK pode publicar versões para essas plataformas, assim como compilar com o XDK ou a API do Cordova (PhoneGap).

O XDK vem com o editor de código aberto da Adobe, o Brackets. O Titanium tem um editor decente, mas prefiro a solução do XDK. Adicionalmente, você tem acesso a algumas das extensões disponíveis para o Brackets. O único problema é que você não pode atualizar o Brackets que vem integrado ao XDK. Contudo, já é um passo a frente em relação ao Titanium e o PhoneGap sequer vem com um editor embutido.

O XDK também vem com um editor gráfico embutido, que é o que realmente faz falta em todas as plataformas HTML5 para dispositivos móveis. Faz todo sentido dar suporte a componentes HTML em editores WYSIWYG. Ele também dá suporte a frameworks como Bootstrap e jQuery Mobile. Esses componentes de interface do usuário permitem a criação rápida de interfaces para sua aplicação.

Uma vez que seu aplicativo esteja criado, você precisa de uma forma para testar sua funcionalidade. O Intel XDK inclui o melhor emulador de dispositivos móveis que já vi até hoje. Ele tem a capacidade de testar em dispositivos reais e traçar o perfil de performance sem precisar instalar qualquer coisa.

3. Construindo Um Aplicativo Móvel Com o Intel XDK

Passo 1:Baixe e Instale

Dirija-se até a página de download do Intel XDK e baixe a versão mais atual. Ao terminar o download do pacote, instale-o com as opções padrão.

Passo 2: Crie um Novo Projeto

Criaremos um pequeno aplicativo de fotos. Inicie o XDK e escolha Start a New Project. Algumas das opções que você tem são:

Start with a Demo: Essa opção permite que você um dos vários projetos de demonstração que a Intel oferece. Isso é bom para facilitar você entender como desenvolver com o XDK.
Start with a Template: Essa opção oferece uma variedade de modelos para vários estilos de interface de usuário. Ela também tem um modelo do Cordova em branco para você iniciar, caso queira.
Import an Existing HTML5 Project: Com essa opção, você pode importar um projeto criado fora do XDK, como um projeto do PhoneGap, criado no editor de sua preferência. Ela também permite você importar outros projetos criados com o XDK.
Use App Starter/Start with App Designer: O App Starter pode ser considerado uma versão mais simples do App Designer. Ambos são interfaces gráficas para serem usadas junto do editor Brackets. O App Starter usa o App Framework. O App Designer adiciona os frameworks de interface do usuário do Bootstrap, jQuery Mobile e Topcoat.
Start with a Blank Project: Como o próprio nome implica, essa opção nos dá um modelo de projeto em branco para iniciarmos. Essa será a opção que escolheremos para esse tutorial.

Dê um nome para seu projeto e clique no botão Create. O XDK criará seu projeto bem como uma estrutura de diretórios.

Passo 3: Estrutura do Projeto

Embora tenhamos começado com um projeto em branco, o XDK inclui alguns arquivos para você iniciar. Editaremos esses arquivos para nosso projeto.

Arquivo init-dev.js

Esse arquivo é usado para detectar as várias bibliotecas em uso. Esse arquivo será usado da maneira como está, praticamente. Ele inclui várias declarações de registro de log para propósitos de depuração e para entender melhor como o arquivo funciona. A parte que mais estamos interessados começa na linha 106.

1	var evt = document.createEvent("Event") ;
2	evt.initEvent("app.Ready", false, false) ;
3	document.dispatchEvent(evt) ;

A primeira linha cria um novo objeto de evento. Nós inicializamos esse objeto com o valor "app.ready". A última linha despacha o evento para a DOM.

Arquivo init-app.js

Deletei a maior parte do conteúdo desse arquivo, exceto a parte que precisaremos. Garantiremos que as bibliotecas que precisamos serão carregadas e que o aparelho estará pronto antes de executarmos qualquer linha do nosso código. Lembra-se do evento app.ready do arquivo anterior?

1	document.addEventListener("app.Ready", app.initEvents, false) ;

Os observadores de evento prestam atenção ao evento app.ready e chamam a função initEvents do objeto app.

app.initEvents = function() {
"use strict" ;
    var fName = "app.initEvents():" ;
    console.log(fName, "entry") ;
    $(".take").bind("click", takePic);
    document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
} ;

A função initEvents faz duas coisas. Primeiro, atrela um observador de eventos de clique ao botão, usando o jQuery. Segundo, ele adiciona um observador de eventos para o evento intel.xdk.camera.picture.add.

Arquivo app.js

Esse arquivo contém a parte interessante do nosso aplicativo, com as funções que fazem nosso aplicativo rodar. A função replacer usa o jQuery para substituir a foto na página com a foto mais recente tirada pela câmera.

1	function replacer(pic) {
2	$("img").replaceWith(pic);
3	}

O nome da função takePic é auto explicativo. Ele usa o framework XDK para capturar uma foto.

1	function takePic() {
2	intel.xdk.camera.takePicture(50,false,"jpg");
3	}

A função onSuccess é executada quando um evento do tipo intel.xdk.camera.picture.add é detectado. Se uma foto for bem sucedida em ser capturada, ele substituirá a imagem atual na página, usando a função replacer que vimos mais acima. Se o aplicativo não tiver conseguir capturar a foto, ele apresentará uma mensagem de erro.

function onSuccess(evt) {
if (evt.success == true) {
        var image = document.createElement('img');
        image.src=intel.xdk.camera.getPictureURL(evt.filename);
        image.setAttribute ("style","width:100%;height:200px;");
        image.id=evt.filename;
        replacer(image);
    }
    else {
        if (evt.message != undefined) {
            alert(evt.message);
    }
    else
    {
        alert("Erro ao tirar a foto");
    }
  }
}

Arquivo index.html

Esse arquivo contém a página principal do nosso aplicativo. É um arquivo HTML simples onde carregamos o jQuery e jQuery Mobile.

1	<script src="lib/jquery-2.1.1.js"></script>
2	<script src="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>

Também importamos algumas folhas de estilo para embelezar o aplicativo. A folha de estilo customizada, app.css, tem pouca coisa de estilização. Isso se dá porque use o gerador de temas do jQuery Mobile para estilizar o aplicativo.

1	<link rel="stylesheet" href="lib/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
2	<link rel="stylesheet" href="css/themes/selfi.css">
3	<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css">
4	<link rel="stylesheet" href="css/app.css">

A página em si é uma página padrão do jQuery Mobile com seções para o cabeçalho, conteúdo e rodapé. Note a imagem dentro da tag div#info. Essa é a imagem que será substituída pela foto capturada com a câmera.

<div data-role="page">
   <div data-role="header">
           <h1>Selfi</h1>
       </div>
       <div data-role="main" class="ui-content">
           <div id="info"><img src="img/vader-selfie.jpg"></div>
           <a class="take" data-role="button">Tire uma Selfi!</a>
           </div>
       <div data-role="footer" data-position="fixed">
           <h1></h1>
       </div>
    </div>

Esse é o código usado para depurar os aplicativos usando o pré-visualizador de aplicativos.

1	<script src="http://debug-software.intel.com/target/target-script-min.js#Agu5iaiuw-i47vL-2_lk5pDOu3XL6fZm9sAm4apb__w"></script>

Também importamos um conjunto de códigos chave para o aplicativo, como o Cordova e o Intel XDK, e o app.js.

<script src="intelxdk.js"></script>     <!-- Biblioteca fantasma, necessária para as chamadas da API do XDK -->
<script src="cordova.js"></script>          <!-- Biblioteca fantasma necessária para as chamadas da API do Cordova -->
<script src="xhr.js"></script>              <!-- Biblioteca fantasma, necessária para as chamadas CORS do XDK -->
<script src="js/app.js"></script>
<script src="js/init-dev.js"></script>
<script src="js/init-app.js"></script>

4. Habilitando Plugins

Usaremos a API do Intel XDK para capturar fotos. Para fazer isso funcionar, precisaremos habilitar alguns plugins. Abra a aba Projects e, ao meio, você verá a opção CORDOVA 3.X HYBRID MOBILE APP SETTINGS. Clique no botão de mais, próximo aos plugins e permissões. À direita, sob o rótulo Intel XDK Plugins, marque Camera.

5. Usando o emulador

Clique no botão Emulate e teste a funcionalidade do aplicativo. Ao clicar no botão Tirar Selfi, ele deve mostrar a tela de captura de fotos. Após capturar uma foto, a foto recém tirada deve substituir a imagem do espaço reservado.

6. Testando o Aplicativo

Baixe e instale o aplicativo Intel App Preview no Google Play ou na App Store da Apple. Vá até a aba Test e copie o código da tag weinre se quiser depurar usando o App Preview. Clique no botão PUSH FILES para enviar seu aplicativo para os servidores da Intel. Acesse App Preview com suas credenciais do Intel XDK e escolha o aplicativo a ser enviado.

7. Construindo o Aplicativo

Agora que temos um aplicativo testado, a última tarefa que temos é gerar o aplicativo para distribuição. Clique na aba Build para mostrar suas opções. Como pode ver, temos uma grande variedade de alvos para os quais gerar executáveis.

Já que usamos a API de Câmera, que é Legada (Legacy), escolheremos a criação de um aplicativo do tipo Legacy Hybrid. Isso nos levará para a página de criação mostrada abaixo.

Clicando em Details mostrará suas opções para cobrança dentro do aplicativo, transmissão de áudio, etc.

Após escolher as opções para seu aplicativo, clique no botão build. Após um tempo, o arquivo será criado e você verá uma janela que permitirá você baixar seu aplicativo.

Conclusão

Acredito que você concorda que é fácil criar um aplicativo usando o Intel XDK. Seja você um veterano, um desenvolvedor completo ou está apenas iniciando no desenvolvimento, o Intel XDK ajuda você. É fácil aprender e seria bom que você desse uma chance ao Intel XDK.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!