O processo de desenvolvimento de aplicativo móvel é altamente interativo e de ritmo acelerado, com ênfase na criatividade de front-end. Desenvolvedores de dispositivos móveis têm pouco tempo, ou mesmo habilidades, para se dedicarem a construir serviços de infraestrutura e backend. Felizmente, essas restrições dos desenvolvedores de dispositivos móveis agora estão sendo solucionadas com a recente popularidade da PaaS. A PaaS oferece um conjunto avançado de serviços com a flexibilidade para conectar rapidamente serviços de suporte, como bancos de dados, analítica, segurança e DevOps, minimizando o tempo que o desenvolvedor de dispositivo móvel precisa dedicar à criação do backend. Mais importante, esses serviços podem ser facilmente migrados de um sandbox de desenvolvimento para um ambiente de produção na nuvem sem sequer deixar o conforto de uma janela de navegador ou linha de comando.

“Sendo um connoisseur de vinhos, decidi criar um aplicativo simples para dispositivos móveis que armazenasse uma lista dos meus vinhos favoritos. Também desejava pesquisar na lista e, é claro, poder editar, adicionar e remover entradas para mantê-la atualizada e pronta para impressionar meus amigos”.

1. Obtenha o código do projeto Worklight
2. Obtenha o código do aplicativo node.js

Depois de escutar um anúncio de uma IBM PaaS chamada Bluemix, eu estava ansioso para determinar se poderia melhorar minha produtividade com essa nova plataforma. Sendo um connoisseur de vinhos, decidi criar um aplicativo simples para dispositivos móveis que armazenasse uma lista dos meus vinhos favoritos. Também desejava pesquisar na lista e, é claro, poder editar, adicionar e remover entradas para mantê-las atualizadas e pronta para impressionar meus amigos.

Uma vez que eu tenho um telefone Android e um Apple iPad, optei por criar um aplicativo que pudesse ser executado em vários dispositivos. Ao iniciar minha jornada criativa, pensei sobre que ferramenta mais me ajudaria a atingir minha meta. A IBM oferece uma plataforma de desenvolvimento de dispositivo móvel chamada IBM Worklight® que permite aos desenvolvedores criar aplicativos móveis híbridos e nativos. No meu caso, um aplicativo da web híbrido parecia mais adequado, pois era uma abordagem do tipo “escreva uma vez e execute em qualquer dispositivo”. O IBM Worklight era a ferramenta perfeita para o trabalho!

Em seguida, eu precisaria de um banco de dados para armazenar minha coleção de vinhos para realizar as operações Create, Read, Update, Delete (CRUD) típicas, incluindo pesquisa de texto. Consultei o catálogo de serviços do Bluemix e descobri uma variedade de serviços de gerenciamento de dados. Com relação a outros bancos de dados NoSQL, o Cloudant parecia ser uma boa escolha para aplicativos móveis, dada sua integração de armazenamento offline com PouchDB e analítica superior.

Com o banco de dados selecionado, eu agora precisava considerar uma camada de interface de dados para mediar entre meu aplicativo móvel e o banco de dados Cloudant. Dada a minha familiaridade com JavaScript e o desejo de manter a linguagem de programação homogênea, pareceu-me que o Node.js seria a opção mais adequada para uma plataforma de tempo de execução. Sentindo-me confortável com as minhas escolhas, eu estava pronto para desenvolver meu aplicativo móvel com Cloudant, Node.js e Worklight.

Este artigo mostra passo a passo como criar e implementar serviços em nuvem de backend no Bluemix e rapidamente desenvolver aplicativos da web ou móveis.

Vamos começar!

• Uma conta Bluemix para criar e acessar os serviços Cloudant e Node.js
• Qualquer IDE preferido para desenvolver código Javascript, especificamente, Node.js
• Ferramentas de teste REST, como cURL, ou Advanced REST Client (um aplicativo do Google Chrome)
• Worklight Studio for Developers v6.1

• Efetue login no Bluemix.
• Clique em Add an application para visualizar o catálogo de serviços.

• Clique em Node.js sob Runtimes.

• Clique em CREATE APP.

• Preencha os detalhes no painel Finish adding Node.js. Selecione um espaço (o padrão é “dev”) e insira um aplicativo e nome de host. Em seguida, clique em CREATE.

O aplicativo agora está criado e deve estar disponível no painel. Clicar na miniatura do aplicativo o levará para a seção Overview. Lá, é possível monitorar o tempo de execução do Node.js, fazer alterações às configurações de memória, visualizar documentação ou conectar outros serviços e complementos.

Etapa 2. Criar e conectar um serviço Cloudant

• Na seção Overview do aplicativo Node.js recém-criado, clique em Add a service.

• Isso o leva ao catálogo. Clique em Cloudant JSONDB sob a seção Data Management.

• No pop-up subsequente, clique em CREATE AND ADD TO APP.

• Preencha os detalhes no painel Finish adding Cloudant JSONDB. Selecione o espaço e o nome do aplicativo criado na Etapa 1.5. É possível alterar o nome de serviço padrão, se preferir. Também insira as informações da sua conta do Cloudant. Se ainda não tiver uma conta do Cloudant, clique no link de registro. Depois do registro, insira a URL e as credenciais criadas durante a inscrição.

• Depois de adicionar o serviço, você é redirecionado para a seção Overview e o serviço Cloudant recém-criado aparece sob a seção Services. Se você clicar na seção Quick Doc, é possível ver as Instantiation Credentials em uma estrutura JSON. Agora qualquer aplicativo no Bluemix conectado a essa instância pode usar esse serviço para conectar-se ao seu banco de dados Cloudant.

Agora é possível preencher o banco de dados Cloudant usando os conteúdos desses arquivos. Embora seja possível usar cURL, é mais fácil ilustrar as chamadas da API REST usando uma ferramenta visual como o aplicativo Advanced REST Client do Google Chrome disponível na loja de aplicativos do Chrome.

• Primeiro, adicione em massa os documentos de vinho com uma solicitação POST a https://<cloudant_url>/<db>/_bulk_docs. O corpo da carga útil deve possuir conteúdos do arquivo wines.json e o “Content-Type” do cabeçalho da solicitação deve ser definido para application/json. Aqui está um exemplo usando o Advanced REST Client (no Chrome):

• A seguir, adicione o design MapReduce com uma solicitação PUT a https://<cloudant_url>/<db>/_design/<design name>. É possível atribuir qualquer nome significativo ao nome do design, por exemplo, winesearch. Copie e cole os conteúdos do documento winesearch.design na área da carga útil.

Aqui está um exemplo usando o Advanced REST Client (no Chrome):

Agora efetue login no painel do Cloudant para confirmar se você criou o design e todos os documentos no banco de dados correto.

• Extraia a pasta de vinhos do projeto de repositório node.js. Visualize os conteúdos dos arquivos.
• Edite o arquivo manifest.yml. Substitui o nome de serviço Cloudant JSON-b3 pelo nome gerado pelo Blumix do serviço Cloudant. Altere o valor do host para refletir o host correto. Ainda, modifique o nome do aplicativo para corresponder ao aplicativo Node.js no Bluemix.
• Edite o arquivo package.json. Altere o valor de nome para corresponder ao aplicativo Node.js no Bluemix.
• Edite o arquivo cloudantDB.js sob a pasta de rotas. Altere todos os valores marcados entre parênteses (< >) para que reflitam o seu ambiente.

• Efetue login no Bluemix usando a linha de comando. Se não tiver usado o Bluemix para implementar aplicativos Node.js antes, considere acompanhar este tutorial. Os comandos no tutorial auxiliam em pré-requisitos de ocorrência única, incluindo as configurações de login.
• Na linha de comando, navegue para o diretório de vinhos para emitir os comandos do Bluemix (cf) para implementar o seu código.
• Para implementar o aplicativo, emita o seguinte comando:

cf push <appname>

• Depois do aplicativo ter sido iniciado, é possível verificar se ele foi implementado emitindo o seguinte comando:

cf app <appname>

Teste a conectividade REST ao banco de dados Cloudant

• Efetue login no Cloudant usando o navegador Chrome.
• Em uma guia diferente (mesmo navegador), emita uma solicitação GET HTTP para o banco de dados Cloudant. Essa abordagem salva as credenciais de login do Cloudant no cache de cookies do navegador, economizando a você o trabalho adicional de preencher os cabeçalhos de Basic Authentication no cliente REST. A sintaxe da URL para a consulta GET é https://<url_to_cloudant>/<db_name>. A resposta é um documento de status JSON. Garanta que, dentro da carga útil de resposta, o valor doc_count seja 8. Um exemplo é mostrado aqui:

Teste a conectividade de REST ao aplicativo Node.js no Bluemix

• Abra o cliente Advanced REST no Chrome.
• Emita uma solicitação GET HTTP para o aplicativo hospedado pelo Bluemix. A sintaxe da solicitação é http://<application_url>/wines. A resposta correta é um documento JSON contendo uma lista de vinhos e um Código HTTP de 200. Um exemplo é mostrado aqui:

Observação: você pode estar pensando por que a resposta contém uma contagem de linhas total de 9. Isso acontece porque há uma linha adicional contendo o documento de design de pesquisa. Para os fins do nosso aplicativo, é possível ignorar isso por enquanto.

• Com o código de backend implementado e verificado, agora é possível importar o aplicativo Worklight de amostra para o Worklight Studio. Este tutorial apresenta as etapas para fazer o download e instalar o Worklight Studio for Developers v6.1.
• Importe o archive BlueMixProject.zipdo projeto do Worklight do repositório de códigos do Worklight para o espaço de trabalho do Worklight Studio.
• Edite o arquivo CloudantAdapter.xml.

• Mude o valor de domínio para corresponder à URL do aplicativo Bluemix.

• Clique com o botão direito em BlueMixProject->adapters->CloudantAdapter e clique em Run As->Deploy Worklight Adapter.

• Clique com o botão direito em BlueMixProject->apps->WinesApp e clique em Run As->1. Execute no servidor de desenvolvimento do Worklight. Isso inicia o servidor de desenvolvimento do Worklight local antes de implementar o adaptador. Se estiver interessado em saber mais sobre os recursos do adaptador do Worklight, visite Visão geral dos adaptadores do IBM Worklight.

• Agora você está pronto para testar o aplicativo móvel no emulador do navegador móvel do Worklight. Clique com o botão direito em BlueMixProject->adapters->WinesApp e clique em Run As->3. Preview.

• Selecionar Preview chama a janela do navegador da Internet e exibe a página de ativação do aplicativo (neste caso, WinesApp).