Conteúdo


Desenvolva aplicativos remotos nativos com Jo e PhoneGap

Desenvolva aplicativos em Android com código HTML e JavaScript

Comments

Conteúdos da série:

Esse conteúdo é a parte # de # na série:

Fique ligado em conteúdos adicionais dessa série.

Esse conteúdo é parte da série:

Fique ligado em conteúdos adicionais dessa série.

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 OS®X 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.

Introdução

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 (consulte Recursos) 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
A demo Kitchen Sink do Jo
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 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 joCard 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
O layout do Jo renderizado
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
  };
}();

É importante 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
Uma amostra dos controles de formulário do Jo
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
Valores inicializados no formulário
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
SoftwareDescrição
Integrated development environment (IDE) EclipseDesenvolve e executa aplicativos de PhoneGap
Java Development Kit (JDK)Inclui o compilador Java e as ferramentas de apoio
Software development kit (SDK) AndroidInclui 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 AntGerencia o processo de desenvolvimento dos seus projetos
RubyGerencia 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ávelDescrição
ANDROID_HOMEAponta o local de raiz do SDK do Android no seu computador
ANT_HOMEAponta para o local de raiz da instalação do Apache Ant no seu computador
JAVA_HOMEAponta para o local de raiz do JDK no seu computador
PATHDefine 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
Android SDK e AVD Manager
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)
Crie um novo Android Virtual Device (AVD)
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 (consulte Recursos). 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
Captura de tela das configurações do projeto
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
Incluindo phonegap.jar no caminho de desenvolvimento
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
Exemplo de aplicativo de PhoneGap executando no emulador do Android
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 para download


Temas relacionados

  • 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.
  • 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 docó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 oSDK 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.

Comentários

Acesse ou registre-se para adicionar e acompanhar os comentários.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Segmentos de mercado, Software livre
ArticleID=661042
ArticleTitle=Desenvolva aplicativos remotos nativos com Jo e PhoneGap
publish-date=05262011