Desenvolva aplicativos remotos nativos com Jo e PhoneGap

Desenvolva aplicativos em Android com código HTML e JavaScript

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.

Brice Mason, Senior Web Developer, Equip For Quality

Brice MasonBrice Mason é marido e pai no interior do Estado de Nova York. Ele também é 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.



26/Mai/2011

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

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

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

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

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

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)

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

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

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

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

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 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.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


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