Talvez você já conheça alguns benefícios do IBM Bluemix™, uma plataforma aberta da IBM para o desenvolvimento e a implementação de aplicativos móveis e web. Os muitos serviços pré-desenvolvidos no Bluemix facilitam o desenvolvimento e o aprimoramento dos aplicativos. Neste artigo, abordaremos as etapas de como usar APIs JavaScript para enviar uma notificação push do seu aplicativo móvel. Este artigo usa o projeto de aplicativo móvel híbrido do software livre Apache Cordova. O Apache Cordova permite que os desenvolvedores de aplicativos móveis acessem as funções de dispositivos nativos por meio de JavaScript. Os aplicativos Cordova são escritos usando tecnologias web padrão, como HTML, CSS e JavaScript.

“Como um desenvolvedor de aplicativos móveis, quero começar a trabalhar com recursos nativos tradicionais, como notificações push, o mais rápido possível. Com as tecnologias abertas, como o Apache Cordova e o Cloud Foundry, como parte do IBM Bluemix, eu encontrei uma maneira de fazer isso.”

O que será necessário para o seu aplicativo

Familiaridade com o Apache Cordova
Familiaridade com o JavaScript for IBM Mobile Cloud Services
Familiaridade com o Módulos NPM para o IBM Mobile Cloud Services

Obtenha o código

Criar um projeto do Apache Cordova

Se você já possui um projeto móvel híbrido existente, como um projeto IBM Worklight®, ignore esta seção.

Se você ainda não tiver feito isso, faça o download do módulo embalado de nó para Apache Cordova e configure o ambiente para o Apache Cordova.
Depois do Cordova estar instalado, abra um prompt de comandos.
Crie um novo projeto no seu diretório de trabalho atual executando o seguinte comando:

cordova create bluemixpush com.example.bluemixpush BluemixPush

Altere para o novo diretório do projeto executando o seguinte comando:

cd bluemixpush

Inclua as plataformas que você deseja testar executando o seguinte comando:

ex. cordova platform add android

Observação: Se esta for a primeira vez que você desenvolve um projeto Cordova para uma plataforma específica, é necessário executar algumas etapas adicionais para configurar o ambiente de desenvolvimento da plataforma. Por exemplo, ao configurar um ambiente Android, execute as etapas a seguir:

Instale o SDK do Android.
Inclua a localização do tools eplatform-tools do Android ao seu PATH.
Faça o download do ANT e inclua-o ao seu PATH.
Certifique-se de que o caminho Java™ esteja configurado em seu PATH. Observação:Certifique-se de que seja um JDK completo, e não apenas um JRE.
Opcionalmente, baixe e instale o Eclipse com ADT para executar o emulador e depurar seu aplicativo usando os recursos do Eclipse LogCat.

Leia: Plug-ins do Apache Cordova

Instale o pacote ibmbluemix npm

O serviço push usado neste artigo, juntamente com os muitos serviços de nuvem móvel fornecidos como parte do Bluemix, está disponível como um módulo empacotado de nó. Instale o pacote ibmbluemix para inicializar o serviço de push com o aplicativo móvel Bluemix.

Em uma linha de comando, altere para o diretório www do projeto móvel híbrido.
Como indicado na documentação npm para o módulo ibmbluemix, para instalar um aplicativo web ou híbrido, use o gerenciador de pacotes bower, executando o seguinte comando:

bower install https://hub.jazz.net/git/bluemixmobilesdk/ibmbluemix-javascript/.git

Instale o pacote ibmpush npm

Instalar o serviço IBM Push a partir do npm:

Em uma linha de comando, altere para o diretório www do projeto móvel híbrido.
Como indicado na documentação npm para o módulo ibmpush, para instalar um aplicativo web ou híbrido, use o gerenciador de pacotes bower, executando o seguinte comando:

bower install https://hub.jazz.net/git/bluemixmobilesdk/ibmpush-javascript/.git

A instalação bem-sucedida do pacote ibmpush Bluemix resulta na seguinte resposta.

Configurar Bluemix

Agora que você possui um aplicativo híbrido pronto para funcionar e seu próprio serviço IBM Push instalado a partir do npm, é necessário configurar o Bluemix para usar o serviço:

Efetuar sign in no Bluemix.
No painel, em Aplicativos, clique em CREATE AN APP.

Na nova página, selecione Nuvem para dispositivo móvel em Boilerplates.

Preencha as informações e o nome, como mostrado aqui:

Clique em CREATE.
Você será redirecionado para o Dashboard, onde agora verá o seu aplicativo. O indicador de status verde para o novo aplicativo móvel em execução no Bluemix indica que o aplicativo passou pelo processo de teste e foi iniciado.

Clique em seu aplicativo. Você será redirecionado para a página Applications, onde será possível ver o ID e o segredo do aplicativo e determinar quais serviços estão vinculados a ele. O ID do aplicativo, como mostrado na figura a seguir, é necessário para se conectar aos serviços do Bluemix. Anote o ID.

Familiarize-se com o serviço de push

Na página de informações do aplicativo móvel no Bluemix para o seu novo aplicativo móvel, em Services, consulte o serviço de Push vinculado ao aplicativo.

Clique no serviço de Push. Esta seção do Services é o seu painel para todas as questões relacionadas ao Push para o seu aplicativo do Bluemix. Também é possível usar essa tela para enviar uma notificação de teste para dispositivos registrados.

Integrar o Push do Bluemix ao aplicativo móvel

Agora que você já criou um aplicativo Bluemix e salvou o ID do aplicativo, volte para o modo de desenvolvimento. Inclua as APIs JavaScript de Push do Bluemix ao seu aplicativo móvel híbrido para realizar o push de mensagens:

Abra o aplicativo híbrido em seu IDE favorito.
Aponte o seu navegador para a página index.html (ou a página HTML principal) dentro do seu diretório www.
Inclua a seguinte tag de script para começar a usar o componente Push npm instalado anteriormente.

<script src="bower_components/ibmpush/js/IBMPush.min.js"></script>

Inclua o arquivo JavaScript para inicializar o IBM Mobile Backend as a Service (ibmbluemix).

<script src="bower_components/ibmbluemix/js/IBMBluemix.min.js"></script>

Inicialize o IBMBluemix SDK.

var values = {
	 
	        applicationId: "____bluemix_appid_________",
			applicationRoute: "____bluemix_approute_________",		
            applicationSecret: "____bluemix_appsecret_________",

}; 
IBMBluemix.initialize(values);

Antes de chamar todos os comandos Push, inicialize o serviço de Push, incluindo o seguinte JavaScript ao seu aplicativo.

var push = IBMPush.initializeService();

Envie uma mensagem de teste a partir do aplicativo, chamando o seguinte JavaScript:

// Conteúdo de notificação push
var message = {
    alert : "Hello Bluemix World",
    url : "https://www.bluemix.net"
}

// Enviar a notificação
push.sendBroadcastNotification(message).then(function(response) {
    alert("Push sent!" + JSON.stringify(response));
},function(err) {
    console.log(err);
	alert('error sending push message: ' + JSON.stringify(err));
});

Para obter exemplos de Push mais complicados usando as APIs JavaScript do IBM Push, consulte a seção API JavaScript do IBM Mobile Cloud Services SDK Developer Guide.

Testar o aplicativo

Agora você está pronto para testar o aplicativo. Se você estiver usando um aplicativo Apache Cordova puro, use a linha de comando. Por exemplo, eu estou testando um aplicativo Android e usando o Eclipse para monitorar a saída de log usando LogCat.

Execute o aplicativo, por exemplo:

cordova emulate android

Você pode ver a mensagem de erro de credenciais GCM e APNS, como mostrado.

Conforme afirmado no erro, o aplicativo móvel Bluemix está com as credenciais GCM e APNs faltando. As credenciais Google Cloud Messaging ou Apple Push Notification Service (ou ambas) não foram inseridas para o aplicativo no Bluemix. Se você receber esse erro, consulte Inserir credenciais de notificação Push no Bluemix. Se você não vir este erro, vá para a próxima etapa.

Depois de alguns erros serem resolvidos, você verá uma mensagem de sucesso de Push no console LogCat.

Se você tiver dispositivos registrados com o serviço Push, poderá ver a sua mensagem que teve o push realizado para esses dispositivos. Para ver a lista de dispositivos registrados, acesse o console Bluemix para o seu aplicativo, clique no serviço de Push e mude para Registrations. Se os dispositivos forem registrados, eles serão exibidos em uma tabela. Não é possível registrar dispositivos para receber mensagens Push utilizando as APIs JavaScript SDK for Bluemix Mobile Backend as a Service Push. Para isso, você deve usar o SDK do Bluemix para Android e iOS nativo. Para registrar um dispositivo com Push para visualizar notificações push, consulte "Extend an Android app using the Push cloud service", que inclui um exemplo de código completo que pode ser transferido por download e instalado no seu dispositivo para testar a capacidade de receber mensagens Push.

Inserir credenciais de notificação Push no Bluemix

Se uma mensagem de erro indica que as credenciais GCM e APNs estão faltando, siga estas etapas para corrigir o problema:

Retorne ao painel do Bluemix para sua página do aplicativo móvel.
Selecione o serviço Push para abrir o painel Push.
Clique na guia Configuration . Se não houver credenciais inseridas, você não verá nenhuma credencial Push.

Clique em Editar para o serviço de Push que você deseja ativar.
Se você possui as suas credenciais, insira-as nos campos apropriados e salve. Se você não possui credenciais e não tem certeza de como obtê-las, clique no ícone de informações ao lado do campo, como mostrado.

A caixa de diálogo de informações inclui um link de como se inscrever para as credenciais Push. Observação: É possível inserir dois conjuntos diferentes de credenciais: um para Sandbox e outro para Produção. É fácil alternar o modo de serviço entre Sandbox e Produção, quando estiver pronto para alternar.

Depois que as credenciais são salvas, você está pronto para testar novamente o aplicativo móvel, usando as etapas anteriores.

Conclusão

Agora, é possível incluir os recursos de Push do Bluemix a um aplicativo móvel híbrido existente ou novo usando o módulo ibmpush npm e APIs JavaScript disponíveis.

Lisa Seacat DeLuca