Trabalhando com o Worklight, Parte 1: Introdução ao Primeiro Lançamento do Aplicativo Worklight

Configurando um aplicativo para o iOS e Android

Com o IBM® Worklight® V5, uma Mobile Enterprise Application Platform (MEAP) inovadora, a IBM expande suas capacidades móveis globais em todo o seu portfólio de produtos. Esta série de artigos faz uma introdução à plataforma Worklight, mostrando como é possível desenvolver aplicativos móveis que aproveitam uma variedade de produtos da IBM. A Parte 1 descreve o processo de criação de um ambiente de desenvolvimento do Worklight e cria um aplicativo simples que será usado como a base para o desenvolvimento iterativo em artigos subsequentes.

Jeremy Nortey, Software Developer, Os compiladores IBM

Jeremy Nortey é Software Developer para a IBM Mobile Foundation no Software Group. Ele desenvolve softwares e garantia de qualidade para soluções de telefonia celular. Jeremy é especialista em iOS e brinca de construir aplicativos nativos para o iPhone em seu tempo livre. Seus hobbies incluem futebol e corrida.



Carlos Andreu , Software Developer, Os compiladores IBM

Carlos Andreu é Software Developer no IBM Software Group. Atualmente, ele está trabalhando na criação de uma estrutura para desenvolver os aplicativos Hybrid, Android e iOS. Seus interesses vão desde seguir as últimas tendências e blogs de tecnologia, à leitura, televisão e curtir todos os tipos de música. É possível saber mais sobre ele em http://dev.yapr.org/carlosandreu.



Raj Balasubramanian, Consulting IT Architect, IBM Mobile Foundation, Os compiladores IBM

Raj Balasubramanian é Product Architect para o IBM Software Group trabalhando na IBM Mobile Foundation. Ele lidera a interação cliente-serviços para o IBM Worklight e IBM Mobile Foundation. Antes de exercer sua função de desenvolvimento, ele orientava os clientes na entrega de aplicativos e infraestrutura de projetos relacionados a SOA, BPM, Web 2.0 e tecnologias do Portal. Seus interesses abrangem qualquer técnica de matemática, história e física. Atualmente, ele está fazendo doutorado (PhD) na University of Texas, em Austin. É possível ler sobre suas aventuras técnicas e pessoais do passado em seu blog pessoal, chamado Gurukulam, em http://balasubramanians.com/blog.



27/Jun/2012

Introduction

Nos últimos anos, a IBM investiu fortemente no espaço móvel, assegurando o suporte aos seus principais produtos de software em vários dispositivos móveis, e também fornecendo ferramentas e tempos de execução do aplicativo para o desenvolvimento de aplicativos móveis. Com o IBM Worklight, a IBM pode expandir ainda mais suas capacidades móveis globais em todo o seu portfólio de produtos.

O IBM Worklight fornece uma plataforma de aplicativos móvel aberta, abrangente e avançada que pode ajudá-lo a desenvolver, executar e gerenciar, de forma eficaz, aplicativos HTML5, híbridos e nativos, usando tecnologias baseadas em padrões e ferramentas, middleware móvel otimizado, diversos mecanismos de segurança, gerenciamento integrado e capacidades analíticas.

Como introdução ao Worklight, este artigo estabelece o fluxo de trabalho básico do desenvolvedor de aplicativos móveis e mostra a configuração do ambiente Worklight para desenvolvimento de aplicativos. No processo, você será orientado sobre como desenvolver um simples aplicativo “Hello World”. A Parte 2 desta série mostrará como você pode usar esta configuração do ambiente com o desenvolvimento de aplicativo iterativo para criar um aplicativo funcional em torno do simples caso de uso da criação de um aplicativo de lista de tarefas (chamado "Todo"). Os artigos subsequentes incluirão a integração com outros produtos da IBM para mostrar as funções e recursos do Worklight.

Worklight básico

Obtenha o Worklight agora

Faça o download do IBM Worklight Developer Edition 5.0 agora, sem nenhum custo e sem data de expiração!

O Worklight é uma Mobile Enterprise Application Platform (MEAP) inovadora que é parte integral da IBM Mobile Foundation. Há quatro componentes principais na plataforma do Worklight:

  • IBM Worklight Studio é um IDE baseado em Eclipse para criar aplicativos Worklight.
  • Componentes do IBM Worklight Device Runtime compõem o SDK que facilita o tempo de execução de aplicativos móveis no dispositivo.
  • IBM Worklight Server é o servidor baseado em Java™que fornece conectividade segura a fontes de informação empresariais e da Internet.
  • IBM Worklight Console é uma interface com o usuário baseada na web dedicada a ajudar no gerenciamento e monitoramento de todo o ecossistema de aplicativos móveis.

Estes componentes estão representados na Figura 1.

Figura 1. Componentes do Worklight
Componentes do Worklight

Resumindo, as tarefas de fluxo de trabalho que você cumpre ao desenvolver um aplicativo móvel são semelhantes às do desenvolvimento tradicional de aplicativos. Uma visão simplificada das etapas pode ter esta aparência (Figura 2):

  1. Configure o Worklight e comece a desenvolver o aplicativo.
  2. Continue com o processo de desenvolvimento e teste normal para verificar a funcionalidade do aplicativo, executando-o ou simulando-o.
  3. Quando você achar que ele está pronto, envie o aplicativo de teste para obter o feedback dos usuários inovadores.
  4. Com base no feedback, continue trabalhando na melhoria do aplicativo ou disponibilize-o para ser testado por um público maior.
  5. Se você decidir expandir o uso do aplicativo de teste, é possível publicar o aplicativo para um conjunto restrito de usuários em um repositório de aplicativos local ou privado, ou para uma empresa ou repositório de aplicativos público (como a Apple App Store, Google Play, entre outras).
Figura 2. Desenvolvendo um aplicativo para telefone celular
Desenvolvendo um aplicativo para telefone celular

O restante deste artigo descreve como configurar o Worklight e os SDKs de dispositivos associados, e como criar um aplicativo de amostra vazio. O objetivo deste processo é assegurar que o aplicativo possa ser visto em um dispositivo e publicado em um servidor Worklight local. O resultado será a base para o desenvolvimento de futuros aplicativos móveis.


Configure o ambiente

O aplicativo de amostra que você desenvolverá é um aplicativo muito simples de "tarefas a fazer", que permite ao usuário criar uma lista de tarefas simples que será exibida em uma tabela. O usuário poderá ver a data de cada tarefa, excluí-las e filtrar cada uma por palavra-chave. O front-end do aplicativo (gravado com o JQuery móvel) e outros detalhes do desenvolvimento do aplicativo serão descritos na Parte 2.

Embora seu objetivo final seja desenvolver um aplicativo de "tarefas a fazer" (veja barra lateral), o objetivo imediato deste artigo é estabelecer o fluxo de trabalho básico de desenvolvimento para criação, implantação e teste do aplicativo móvel em um simulador de dispositivo. Para fazer isso, é possível começar a trabalhar com o ambiente de desenvolvimento do Worklight em diversas etapas simples:

  1. Download e instalação da versão mais recente do Eclipse Java Development Edition

    Se for necessário fazer o download do Eclipse, é possível fazer isso no site Eclipse Downloads. Para o propósito do presente artigo, vamos assumir que você já tenha o Eclipse instalado. Para obter mais informações, consulte a Documentação de Introdução do Worklight.

  2. Instalar plug-ins do Worklight Eclipse

    Se você estiver familiarizado com a instalação de qualquer plug-in para o Eclipse, essa parte não será um problema. No Eclipse, navegue para Help > Install New Software e, em seguida, pressione o botão Add próximo à parte superior direita (Figura 3). No diálogo Add Repository, insira:

    • Name: Worklight Studio
    • Localização: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/
    Figura 3. Instalar os plug-ins do Eclipse
    Instalar os plug-ins do Eclipse

    Continue com as próximas etapas apresentadas pelo assistente para fazer o download e instalar o ambiente necessário.

  3. Instalar os SDKs específicos do dispositivo

    Esta série de artigos mostrará o funcionamento do aplicativo Worklight para os dispositivos Android e iOS.

    1. Instalar o SDK do Android (opcional)

      Siga as instruções no Site do desenvolvedor do Android para instalar o SDK do Android e do simulador dentro da mesma shell do Eclipse como Worklight Studio.

    2. Instalar o SDK do iOS (opcional)

      Siga as instruções no Site do desenvolvedor da Apple para instalar o Xcode em uma máquina com o S.O. Mac. Se você não tiver um Mac, não será capaz de simular o aplicativo Worklight desenvolvido em um dispositivo iOS. As alternativas serão fornecidas em um artigo posterior usando as opções de Desenvolvimento do Worklight, mas, por agora, ignore as instruções específicas do iOS se você não tiver um Mac.

  4. Inicie um novo projeto do Worklight

    Agora, você deve ser capaz de criar um novo projeto de Worklight no Eclipse. Navegue para o File > New > Worklight Project, conforme mostrado na Figura 4. (Se o Projeto Worklight não for listado, tente em File > New > Other > Worklight Project.) Nome da sua pasta de projeto Todo Project.

    Figura 4. Crie um novo projeto do Worklight
    Crie um novo projeto do Worklight
  5. Incluir um novo aplicativo para o projeto

    Finalmente, é preciso incluir um novo aplicativo Worklight à pasta de aplicativos do seu projeto. Para isso, clique com o botão direito na pasta apps em Todo Project e selecione New > Worklight Application (Figura 5). (Se não estiver listado, tente em New > Other > Worklight Application.) Nome do aplicativo Todo.

    Figura 5. Incluir aplicativo ao projeto
    Incluir aplicativo ao projeto

    O Worklight gerará automaticamente a estrutura do arquivo necessária para desenvolver o aplicativo Worklight. A pasta common é o local em que você colocará todos os arquivos necessários para criar seu aplicativo, incluindo os arquivos HTML, JavaScript™ e CSS. Nomeie o aplicativoToDo e conclua esta parte da criação do aplicativo.

    Figura 6. Estrutura de pasta de aplicativos
    Estrutura de pasta de aplicativos

Instalar o servidor

Para testar o aplicativo que você está desenvolvendo, será necessário publicá-lo em um servidor Worklight local. Estas etapas o ajudarão a instalar o servidor Worklight. O IBM Worklight Studio V5 contém um servidor local que pode ser usado para testar o aplicativo criado acima, por meio do desenvolvimento e execução do aplicativo. Clique com o botão direito no aplicativo e selecione Build All and Deploy. Isso iniciará o servidor local na porta 8080, ative o projeto e implemente o aplicativo para testá-lo em um navegador.

Figura 7. Desenvolver e implementar o aplicativo no servidor local
Desenvolver e implementar o aplicativo no servidor local

É possível ver o progresso dos eventos no console (Figura 8).

Figura 8. Console de servidor local
Console de servidor local

Agora, é possível acessar o console do servidor do servidor local acessando http://localhost:8080/console em seu navegador. Você deve ver o aplicativo Todo que acabou de implementar.

Figura 9. Acesse o console do servidor local
Acesse o console do servidor local

Desenvolver o aplicativo

Este aplicativo “Hello World” demonstrará a primeira iteração do desenvolvimento e simulação para ajudá-lo a se familiarizar com o processo, e será usado na Parte 2 para o preenchimento na tela real e lógica do aplicativo para o aplicativo Todo para mostrar o modelo de desenvolvimento completo do aplicativo Worklight. Para desenvolver este aplicativo inicial:

  1. Selecione uma biblioteca JavaScript

    A biblioteca JavaScript selecionada para este exemplo é o JQuery móvel. Você tem a opção de usar bibliotecas como o Dojo móvel ou Sencha Touch. Como uma alternativa, é possível desenvolver usando simplesmente o JavaScript puro e criar seu aplicativo a partir do zero.

  2. Download das bibliotecas

    Para este exemplo, é necessário fazer o download dessas bibliotecas JQuery:

    Figura 10. Detalhes do JQuery
    Detalhes do JQuery
  3. Mova os arquivos no Worklight

    Mova esses arquivos para o common/js :

    • jquery-1.7.1.min.js
    • jquery.mobile-1.1.0-rc.1.min.js

    Mova esses arquivos para o common/css :

    • jquery.mobile-1.1.0-rc.1.css
    • jquery.mobile.structure-1.1.0-rc.1.min.css
    • jquery.mobile-1.1.0-rc.1/images

    A Figura 11 mostra a estrutura do arquivo depois de os arquivos acima terem sido incluídos ao projeto Worklight.

    Figura 11. A biblioteca de referência JQuery no aplicativo Todo
    A biblioteca de referência JQuery no aplicativo Todo
  4. Incluir código de modelo

    A documentação de dispositivo móvel JQuery contém código clichê padrão para iniciar um aplicativo remoto simples (Figura 12). Certifique-se de que o aplicativo Todo contenha este código dentro das tags <body>.

    Figura 12. Código clichê do aplicativo remoto JQuery
    Código clichê do aplicativo remoto JQuery
  5. Criar ambientes específicos do dispositivo

    Como você pretende desenvolver o aplicativo Todo para os dispositivos Android e iPhone, será necessário criar um ambiente Worklight para cada tipo de dispositivo. Clique com o botão direito no elemento Todo e selecione Worklight > Worklight Environment e Next (Figura 13).

    Figura 13. Selecione o assistente do dispositivo
    Selecione o assistente do dispositivo

    Escolha telefones e tablets iPhone e Android da lista e clique em Finish (Figura 12). Isto criará um projeto adicional para o Android e a estrutura adicional de pastas dentro do ToDo.

    Figura 14. Criar pastas específicas de dispositivo
    Criar pastas específicas de dispositivo

Desenvolver um aplicativo implementável para os dispositivos iOS e Android

O Worklight é estruturado com arquivos de origem comum (HTML, CSS e JavaScript) em uma pasta chamada common e os arquivos específicos da plataforma em seus respectivos diretórios; android para os arquivos Android, iphone para os arquivos do iPhone, e assim por diante. Por exemplo, já que o desenvolvimento do iOS e Android será feito usando o JQuery, o arquivo jquery.js estará em common/jquery.js. Se você tiver algum código específico do iOS, o código do JavaScript estará em ios-plugin.js e em iphone/js/iso-plugin.js ao invés de commonjs/iso-plugin.js. O Worklight assegurará a sincronização dos arquivos comuns em cada um dos ambientes de dispositivo específicos.

Depois de ter seu código fonte pronto para implantar, basta clicar com o botão direito em seu aplicativo Android e selecionar Run as... > Build All and Deploy (Figura 15). Uma nova pasta deverá aparecer na sua área de trabalho com o título de seu aplicativo: Nome do seu aplicativoAndroid

Figura 15. Desenvolver e implementar
Desenvolver e implementar

Em seguida, clique com o botão direito no projeto e selecione Run as.. > Android Application (Figura 14). Se você tiver um telefone Android real conectado via USB com o modo de desenvolvedor ativado nas configurações, o aplicativo será executado automaticamente, caso contrário, ele será executado no AVD existente (Android Virtual Device). Isso ativará o emulador e exibirá a sequência do “Hello World” que você inseriu acima (Figuras 16 e 17).

Figura 16. Executar aplicativo Android
Executar aplicativo Android
Figura 17. Teste de aplicativo Android
Teste de aplicativo Android

As etapas para implementar o seu aplicativo em um dispositivo iOS são semelhantes ao processo do Android. Clique com o botão direito em seu aplicativo do iPhone e selecione Run as... > Build All and Deploy e, a seguir, clique em Run as XCode Project (Figura 18). Em Xcode, basta selecionar um dispositivo real, ou o simulador de iPhone ou iPad e, em seguida, clicar no botão Run (Figura 19). A Figura 20 mostra o aplicativo em execução em um ambiente de iPhone.

Figura 18. Desenvolver e implementar aplicativo iOS
Desenvolver e implementar aplicativo iOS
Figura 19. Selecionar dispositivo ou simulador para teste
Selecionar dispositivo ou simulador para teste
Figura 20. Teste de aplicativo do iPhone
Teste de aplicativo do iPhone

Conclusão

Neste artigo introdutório, você configura um ambiente de desenvolvimento do Worklight e desenvolve um simples aplicativo “Hello World” de amostra para o iPhone e Android. Como a configuração incluiu o tempo de execução do servidor Worklight e todo o software de suporte, você está pronto para começar a incluir lógica de aplicativo e conteúdo ao seu aplicativo Todo. Estas etapas forneceram uma visualização de como você percorrerá o fluxo de trabalho de desenvolvimento de criação de um aplicativo e fará os testes em um dispositivo ou simulador.

Recursos

Aprender

Obter produtos e tecnologias

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=WebSphere, Desenvolvimento móvel
ArticleID=822737
ArticleTitle=Trabalhando com o Worklight, Parte 1: Introdução ao Primeiro Lançamento do Aplicativo Worklight
publish-date=06272012