Desenvolva aplicativos remotos nativos com Jo e PhoneGap

A área de desenvolvimento de aplicativos remotos está progredindo
rapidamente, isso se deve, em parte, às novas estruturas que surgiram
com promessas de facilitar o desenvolvimento de aplicativos remotos e
deixá-lo mais acessível para o desenvolvimento tradicional para a Web.

Este artigo trata do desenvolvimento de aplicativos remotos nativos
aplicando as qualificações que você já possui em HTML, CSS e na
linguagem JavaScript a duas estruturas, uma nova estrutura chamada Jo e
uma estrutura de software livre chamada PhoneGap, permitindo o acesso a
recursos nativos em algumas das plataformas remotas mais conhecidas.

Web remota ou aplicativo remoto?

Basicamente, o desenvolvimento de aplicativos remotos pode tomar dois
caminhos: Web e
nativos. O desenvolvimento de aplicativos remotos da Web
é semelhante ao desenvolvimento de aplicativos da Web tradicionais, mas
se destina a uma plataforma remota.

O aplicativo é armazenado e
fornecido por um servidor da Web e consumido por um navegador remoto da
Web. Como é de se esperar, os recursos e capacidades disponíveis no
navegador são limitados. Compare essa situação com o desenvolvimento
nativo, que dá acesso a recursos centrais de um sistema operacional
remoto.

Portanto, para o desenvolvimento de aplicativos da Web remotos é
mais indicado trabalhar no navegador, ao passo que, para desenvolver
aplicativos remotos nativos é melhor trabalhar com o sistema
operacional remoto.

O desenvolvimento de um aplicativo remoto nativo
apresenta diversas oportunidades para os desenvolvedores.
No passado, você tinha que dominar várias linguagens e
application
programming interfaces (APIs) em várias plataformas para
desenvolver um aplicativo remoto. Isso não é mais necessário.

Este artigo repassa o uso básico do Jo e do PhoneGap. O
Jo é leve, tem suporte amplo para várias plataformas e se integra bem a
outras estruturas. O PhoneGap é a chave para desenvolver os aplicativos
nativos, porque atua como uma ponte para todos os recursos centrais
ricos da plataforma remota e, ao mesmo tempo, preserva o ambiente de
desenvolvimento de HTML, CSS e código JavaScript.

O que é o Jo?

O Jo é uma nova estrutura desenvolvida por Dave Balmer a partir do Palm.
É uma estrutura de aplicativos remotos da Web de HTML5 extremamente
leve, com amplo suporte para plataformas que inclui HP webOS, Apple
iOS, Android,
Symbian e até mesmo widgets de Mac OSX Dashboard.

Embora o Jo esteja em processo de desenvolvimento ativo, ele se presta à
aprendizagem do desenvolvimento de aplicativos da Web remotos. Seu
tamanho e conjunto de recursos são acessíveis, permitindo que você se
concentre nos conceitos centrais.

O que o Jo pode fazer?

Este exemplo desenvolve um layout simples baseado em cartões, mostrando
diversas características importantes do Jo que ajudarão você a começar a
desenvolver aplicativos.

Primeiramente, certifique-se de ter um navegador habilitado para HTML5
para usar como ambiente de desenvolvimento. O Safari e o Chrome são os
dois melhores navegadores para o desenvolvimento em Jo.

Trabalhe com o
console exposto por esses navegadores para depurar scripts, definir
pontos de quebra e fazer o dump de dados para inspeção. Em seguida, faça
o download do código de origem do Jo a partir do GitHub
e extraia-o para a raiz do seu servidor da Web local.
Dê a esse diretório extraído um nome genérico, como
“jo”. Agora, navegue para a página de amostras do Jo em
http://localhost/jo/samples/test.html e veja uma tela semelhante à Figura 1.

Figura 1. A demo Kitchen Sink do Jo

Agora que você fez o download do Jo e o extraiu, comece a desenvolver
seu aplicativo em Jo. Comece criando dois arquivos em sua raiz da Web:
index.html e application.js. O arquivo index.html contém o código
mostrado na Listagem 1.

Listagem 1. Página de índice de seu aplicativo de amostra

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First Jo App</title>
<!-- jo styles -->
<link rel="stylesheet" type="text/css" href="jo/css/jo.css" />
</head>
<body>
<!-- jo framework script -->
<script src="jo/js/jo.js"></script>

<!-- our application script -->
<script src="App.js"></script>

<script>
  // initializes jo
    jo.load();

  // our app initialization code
    App.init();
</script>

</body>
</html>

A Listagem 1 mostra a página de índice que você está usando para
organizar e chamar os seus scripts e estilos. Talvez você já conheça
isso, caso já tenha desenvolvido aplicativos em JavaScript.

Os estilos
padrão que suportam o Jo estão incluídos no cabeçalho do documento, os
scripts estão incluídos no corpo. Observe que o arquivo jo.js também
está incluído. Esta é a versão da estrutura que não foi reduzida e é
recomendada para o desenvolvimento.

Inclua o arquivo jo_min.js quando
estiver pronto para implementar na produção. O arquivo termina com a
instrução jo.load(), que inicializa a estrutura do Jo, seguida pelo seu código inicializado estipulado por App.init(). O código de inicialização é mostrado na Listagem 2.

Listagem 2. Código de inicialização para seu aplicativo de amostra

// demonstrates the javascript module pattern
var App = function() {

  // private members

  var init = function() {
    alert("the app is initialized");
  };


    // returns an object literal of members to be made public
  return {
    init: init
  };
}();

Desenvolvendo o layout do Jo

Agora que o seu shell está em ordem, modifique-o para produzir um layout básico no Jo, como mostra a Listagem 3 . Esse layout é o início de um padrão simples de detalhes mestres.

Listagem 3. Um layout desenvolvido com Jo

var App = function() {
  var deviceScreen;
  var mainContainer;
  var mainNavBar;
  var mainMenu;
  var cardStack;
  var menuCard;

  // initialization function
  var init = function() {    
    // create the main container
    mainContainer = new joContainer([
      mainNavBar = new joNavbar("My First Jo App"),
      cardStack  = new joStackScroller()
    ]).setStyle({position: "absolute", top: "0", left: "0", bottom: "0", right: "0"});

    // create the device screen
    deviceScreen = new joScreen(mainContainer);

    // hook up the nav bar with the card stack
    mainNavBar.setStack(cardStack);

    // create a menu card
    menuCard = new joCard([
      mainMenu = new joMenu([
        { title: "Go to form", id: "form-card" }
      ])
    ]);

    // add the menu card to the card stack
    cardStack.push(menuCard);
  };


  // public members
  return {
    init: init
  };
}();

Neste ponto, você realmente entra no Jo. Primeiro, várias variáveis são
definidas para representar alguns ativos chave no aplicativo, como a
tela do dispositivo, o gerenciamento de layout de cartões e a navegação.

O layout principal é gerenciado pela criação de um joContainer que tem uma barra de navegação (representada como um objeto joNavbar) e um mecanismo de gerenciamento de cartões (representado como um objeto joStackScroller). Esse contêiner é incluído na tela do dispositivo e preenche todo o espaço utilizável.

A instrução joCard mainNavBar.setStack (cardStack) é usada para vincular a pilha de cartões ao widget de navegação, tendo
como resultado o gerenciamento automático da navegação entre cartões.
Finalmente, uma instância de que contém um menu – uma ótima lista de itens – é criada e incluída na pilha de cartões.

A execução bem-sucedida desse código tem como resultado uma tela semelhante à Figura 2.

Figura 2. O layout do Jo renderizado

Técnicas avançadas de layout

Depois da configuração do layout de lista, continue criando os cartões detalhados e conecte-os, como mostra a Listagem 4.

Listagem 4. Um layout avançado usando joCache

var App = function() {
  var deviceScreen;
  var mainContainer;
  var mainNavBar;
  var mainMenu;
  var cardStack;
  var menuCard;

  // initialization function
  var init = function() {    
    // ... same code here as listing 3

    // register click handler for menu
    mainMenu.selectEvent.subscribe(function(id) {
      cardStack.push(joCache.get(id));  
    });

    // initialize the card cache
    initCardCache();
  };

  // initializes the cache used to store cards
  // this helps us only use what we need when we need it
  var initCardCache = function() {
    // create the form card
    joCache.set("form-card", function() {
      return new joCard([
        new joLabel("Name:"),
        new joInput(),

        new joLabel("Password:"),
        new joPasswordInput(),

        new joLabel("Description:"),
        new joTextarea(),

        new joLabel("Options:"),
        new joOption([ "Option 1", "Option 2", "Option 3" ]),

        new joLabel("Toggle:"),
        new joToggle(true),

        new joLabel("Selection:"),
        new joSelect([ "Item 1", "Item 2", "Item 3" ]),

        new joButton("Submit")
      ]);
    });
  };


  // public members
  return {
    init: init
  };
}();

É imprescindível entender dois importantes conceitos demonstrados na Listagem 4. O primeiro é a criação de uma nova função chamada initCardCache,
que aproveita o recurso de armazenamento em cache do Jo.
As entradas de cache são incluídas com um ID de cadeia
de caracteres (o identificador exclusivo) e uma função (o valor da
entrada).

A função retorna um joCard recém-desenvolvido que é configurado com controles de formulário provenientes da estrutura do Jo. O uso de joCache
deste modo permite adiar a criação de objetos das
visualizações detalhadas em seu aplicativo e tem como resultado um
desempenho melhor.

O segundo conceito demonstrado é a conexão do cartão
de listagem às suas visualizações detalhadas por meio de um manipulador
de eventos. Quando um item é selecionado no menu, o ID do item de menu é
usado para recuperar uma visualização a partir do cache. Embora aqui
seja possível definir apenas uma visualização, esse padrão pode ser
estendido com facilidade.

Clicar no item de lista Go to form abre uma tela semelhante à Figura 3.

Figura 3. Uma amostra dos controles de formulário do Jo

Observe o botão Back na parte superior esquerda da
tela. Esse é o resultado da vinculação entre a pilha de cartões e o
widget de navegação mencionado anteriormente. Agora, conecte o
formulário vazio a uma origem de dados.

Origens de dados no Jo

O Jo oferece diversas soluções para gerenciar armazenamentos de
informações como os bancos de dados WebKit SQLite e HTML5. Entretanto,
uma das classes mais simples e úteis para o gerenciamento de dados é joRecord,
que pode ser usado como interface para o seu formulário, como mostra a Listagem 5.

Listagem 5. Vinculando dados de formulário com joRecord

var App = function() {
  // ...same as listing 4
  var formRecord;

  // initialization function
  var init = function() {
    // ... same as listing 4
  };

  // initializes the cache used to store cards
  // this helps us only use what we need when we need it
  var initCardCache = function() {
    // create the form card
    joCache.set("form-card", function() {
      // initialize the persistent form record
      formRecord = new joRecord({
        name: "Nigel Bitters",
        password: "somepassword",
        description: "Some long winded description here.nWith a line break!",
        option: 1,
        isActive: true,
        selection: 2
      });

      return new joCard([
        new joLabel("Name:"),
        new joInput(formRecord.link("name")),

        new joLabel("Password:"),
        new joPasswordInput(formRecord.link("password")),

        new joLabel("Description:"),
        new joTextarea(formRecord.link("description")),

        new joLabel("Options:"),
        new joOption([ "Option 1", "Option 2", "Option 3" ], formRecord.link("option")),

        new joLabel("Toggle:"),
        new joToggle(formRecord.link("isActive")),

        new joLabel("Selection:"),
        new joSelect([ "Item 1", "Item 2", "Item 3" ], formRecord.link("selection")),

        new joButton("Submit").selectEvent.subscribe(function() {
          // dump out the modified data
          console.dir(formRecord);                            
        })
      ]);
    });
  };

  // public members
  return {
    init: init
  };
}();

Na função initCardCache é criada uma instância de joRecord que não somente inicializa os valores do formulário, mas também gerencia as mudanças no formulário. A Figura 4 mostra como os valores são inicializados.

Figura 4. Valores inicializados no formulário

Execute o exemplo na Listagem 5, modifique os dados do formulário e, em seguida, clique no botão Submit. Ao inspecionar o console no navegador, você deve ver o registro de formulário modificado.

Você examinou os principais recursos que criam um
aplicativo da Web remoto funcional. Agora, considere o desenvolvimento
de um aplicativo remoto nativo incluindo o PhoneGap.

O que é o PhoneGap?

O PhoneGap é uma estrutura de software livre para desenvolver
aplicativos remotos com código em JavaScript e HTML. É o que liga a
interface de usuário ao sistema operacional da plataforma remota com a
qual você quer trabalhar.

O PhoneGap suporta plataformas como iPhone,
Android, Blackberry, Symbian e Palm. Os recursos nativos expostos pelo
PhoneGap – como acesso ao acelerômetro, suporte para câmera e mídia,
contatos, geolocalização, arquivo, rede e armazenamento – também são
altamente desejáveis para o desenvolvimento de aplicativos remotos.

Trabalhe com um exemplo simples de aplicativo de contatos
para a plataforma Android. Primeiro, configure seu ambiente de
desenvolvimento. Começar a trabalhar com o PhoneGap pode parecer um pouco
intimidante se você só trabalhou com desenvolvimento puro para a Web no
passado.

A Tabela 1 lista vários requisitos de software para o PhoneGap.

Tabela 1. Requisitos de software para o PhoneGap

Software	Descrição
Integrated development environment (IDE) Eclipse	Desenvolve e executa aplicativos de PhoneGap
Java Development Kit (JDK)	Inclui o compilador Java e as ferramentas de apoio
Software development kit (SDK) Android	Inclui o código de base e os emuladores para executar seus aplicativos
Android Development Tools (ADT)	Acessa o plug-in de desenvolvimento para Eclipse
Apache Ant	Gerencia o processo de desenvolvimento dos seus projetos
Ruby	Gerencia várias tarefas no PhoneGap, como a criação de projetos

Este artigo não cobre todo o processo de configuração do ambiente de desenvolvimento. No entanto, a seção Recursos
fornece algumas ferramentas para configurá-lo. Primeiro, siga as orientações do documento Installing the SDK
no site dos desenvolvedores do Android, que mostra os quatro primeiros
requisitos listados na Tabela 1. Em seguida, faça o download e instale o
Apache Ant e o Ruby.

Neste ponto, todos os componentes importantes estão em
ordem. Você tem um IDE para carregar, desenvolver e executar projetos do
PhoneGap (Eclipse), juntamente com todas as ferramentas de apoio.
Termine fazendo algumas configurações.

O processo de desenvolvimento se baseia em diversas variáveis de ambiente que são definidas no seu sistema, como descreve a Tabela 2.

Tabela 2. Variáveis de ambiente

Variável	Descrição
ANDROID_HOME	Aponta o local de raiz do SDK do Android no seu computador
ANT_HOME	Aponta para o local de raiz da instalação do Apache Ant no seu computador
JAVA_HOME	Aponta para o local de raiz do JDK no seu computador
PATH	Define os caminhos para as pastas bin do Ruby, Ant, o seu JDK e a pasta de ferramentas na instalação do SDK do Android

Finalmente, defina um Android Virtual Device (AVD) no Eclipse. O AVD é
um conjunto de opções de configuração que modelam um dispositivo real
baseado em Android e é essencial para executar seu aplicativo de
PhoneGap em um emulador de Android.

Para criar um AVD, abra o Eclipse e navegue para Window
> Android SDK and AVD Manager. Você deve ver uma tela semelhante à Figura 5.

Figura 5. Android SDK e AVD Manager

Selecione o item Virtual Devices no menu da esquerda e clique no botão New…. Insira as informações como mostra a Figura 6 e, a seguir, clique em Create AVD.
Depois de fechar o SDK do Android e o AVD Manager, você está pronto
para carregar, desenvolver e executar um projeto de PhoneGap.

Figura 6. Crie um novo Android Virtual Device (AVD)

Executando o projeto de exemplo de PhoneGap

A configuração de um ambiente de desenvolvimento para o PhoneGap é um
processo complicado, mas carregar projetos é muito mais fácil. Para
executar seu primeiro aplicativo de PhoneGap, faça o download e extraia o
pacote mais recente do projeto phonegap-android a partir do GitHub para
o seu computador.

Em seguida, abra um prompt de comando e mude de diretório para a raiz
da instalação do PhoneGap. Execute o comando como mostra a Listagem 6.

Listagem 6. Comando para criar um projeto de PhoneGap

./bin/droidgap create example

Esse comando cria um projeto de Android a partir dos arquivos de origem
da Web na pasta de exemplo. Para carregar o projeto no Eclipse, navegue
para File > New >
Project…. Acesse a pasta Android
, selecione Android Project e clique em Next
>.

Configure o projeto como mostra a Figura 7 e, a seguir, clique em Finish.

Figura 7. Captura de tela das configurações do projeto

O local da origem é a pasta example_android na instalação do PhoneGap. É
o local no qual os arquivos de projeto foram criados a partir do
comando droidgap. Agora que o projeto foi carregado no
Eclipse Project Explorer, acesse a pasta libs, clique com o botão
direito no arquivo phonegap.jar e selecione Build Path
> Add to Build Path, como mostra a Figura 8.

Figura 8. Incluindo phonegap.jar no caminho de desenvolvimento

Quando você executar o aplicativo no Eclipse como um aplicativo do Android, você deve ver uma tela semelhante à Figura 9.

Figura 9. Exemplo de aplicativo de PhoneGap executando no emulador do Android

Incluindo o Jo no PhoneGap

Talvez você tenha percebido que embora seja necessário realizar várias
etapas para começar a trabalhar com o PhoneGap, o trabalho com essa
estrutura não é diferente do trabalho com qualquer outra estrutura
moderna de JavaScript.

Agora que é possível criar, desenvolver e
executar um aplicativo de PhoneGap para o Android usando o Eclipse, é
possível incluir o Jo facilmente para gerenciar sua interface do
usuário. De fato, o site de wiki do Jo oferece um exemplo de arquivo de
índice que contém a configuração recomendada mostrada na Listagem 7.

Listagem 7. Amostra de página de índice para trabalhar com o PhoneGap

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My App</title>

    <!-- stylesheets -->
    <link rel="stylesheet" href="css/aluminum.css" type="text/css">
    <link rel="stylesheet" href="css/chrome.css" type="text/css">
    <link rel="stylesheet" href="css/myapp.css" type="text/css">
</head>
<body>

<!-- lib -->
<script src="phonegap.js"></script>
<script src="js/jo_min.js"></script>

<!-- app -->
<script src="js/myapp.js"></script>

<script>
    jo.load();
    joEvent.touchy = true;
    MyApp.load();
</script>

</body>
</html>

A Listagem 7 tem um formato conhecido, já que as folhas de estilo estão
incluídas no cabeçalho do documento. O corpo do documento tem os scripts
de estrutura conectados primeiro, seguidos por um arquivo de script de
aplicativo.

A linha que você ainda não encontrou é joEvent.touchy = true.
Essa propriedade garante que todos os eventos relevantes baseados no
mouse sejam convertidos para eventos de toque para o uso em dispositivos
remotos.

Conclusão

Embora seja possível fazer muita coisa com o Jo e o PhoneGap juntos,
lembre-se de que o Jo não precisa do PhoneGap e vice versa. Eles podem
ser usados sozinhos ou com outras estruturas.

Entretanto, a simplicidade
e o tamanho do Jo, aliada ao poder do PhoneGap, pode ter como resultado
uma ferramenta efetiva para o desenvolvimento de aplicativos remotos
nativos ricos para uma ampla variedade de plataformas.

Recursos

Aprender

Obtenha soluções para problemas comuns de configuração na plataforma Android começando a trabalhar com o Android PhoneGap no Eclipse.
Saiba como instalar o SDK e configurar seu ambiente pela primeira vez.

Obter produtos e tecnologias

Faça o download de código de origem, leia a documentação e participe do fórum de suporte do Jo HTML5 Mobile App
Framework.
Faça o download do código de origem do PhoneGap , leia a documentação e comunique-se com a comunidade.
Faça o download do código de origem do Jo a partir do GitHub.
Para executar o seu primeiro aplicativo de PhoneGap, faça o download e extraia o pacote mais recente do projeto phonegap-android para o seu computador a partir do GitHub.
O Eclipse IDE é um IDE de software livre que suporta o desenvolvimento de aplicativos em Android.
Use o SDK do Android para fazer o download das bibliotecas e ferramentas usadas para suportar o desenvolvimento de aplicativos de Android.
O Apache Ant
é uma biblioteca Java e ferramenta de linha de comando para processar
arquivos de desenvolvimento no ato de desenvolver softwares.
Faça o download de um instalador para máquinas com Windows que inclui a linguagem e o ambiente Ruby .
O plug-in ADT para Eclipse instala suporte para o desenvolvimento de projetos de Android.

Discutir

Crie seu perfil do developerWorks hoje e configure uma lista de acompanhamento sobre o desenvolvimento de aplicativos remotos. Conecte-se e fique conectado com a comunidade do developerWorks.
Encontre outros membros do developerWorks interessados no desenvolvimento da Web.
Compartilhe seus conhecimentos: ingresse em um dos grupos do developerWorks enfocados nos tópicos da Web.
Roland Barcia fala sobre Web 2.0 e middleware em seu blog.
Siga os indicadores compartilhados sobre os tópicos da Web dos membros do developerWorks.
Obtenha respostas rapidamente: Visite o fórum Web 2.0 Apps.
Obtenha respostas rapidamente: Visite o fórum Ajax.

***

artigo publicado originalmente no developerWorks Brasil, por Brice Mason

Brice Mason é desenvolvedor na EQUIP For Quality, onde
trabalha em uma equipe desenvolvendo a próxima geração de software de
analítica de saúde para o segmento de mercado de assistência a longo
prazo. Ele mantém um site pessoal em http://www.bricemason.com.

Categorias

Colunistas

Explorar

Newsletter

Ecossistema

Desenvolva aplicativos remotos nativos com Jo e PhoneGap

Web remota ou aplicativo remoto?

O que é o Jo?

O que o Jo pode fazer?

Desenvolvendo o layout do Jo

Técnicas avançadas de layout

Origens de dados no Jo

O que é o PhoneGap?

Executando o projeto de exemplo de PhoneGap

Incluindo o Jo no PhoneGap

Conclusão

Recursos

Mais de developerWorks Brasil

Fios

Web remota ou aplicativo remoto?

O que é o Jo?

O que o Jo pode fazer?

Desenvolvendo o layout do Jo

Técnicas avançadas de layout

Origens de dados no Jo

O que é o PhoneGap?

Executando o projeto de exemplo de PhoneGap

Incluindo o Jo no PhoneGap

Conclusão

Recursos

Mais de developerWorks Brasil

Fios

O melhor do dev brasileiro, no seu e-mail