Notificação push em android utilizando ionic e nodejs

O que é uma notificação push

Você já deve estar acostumado com as notificações do whatsapp quando alguem te manda uma mensagem, ou então com as notificações de comentários e curtidas em suas fotos do facebook. Estas são notificações push em smartphones, uma maneira que os aplicativos tem de chamar a atenção do usuário para engaja-lo ou lembra-lo de algo.

Como funciona técnicamente

Primeiramente devemos entender como funciona o fluxo de uma notificação push.

  1. Primeiramente o dispositivo deve se registrar em um serviço de notificação push, que para android é o Google Cloud Messaging (GCM) e para IOS é o Apple Push Notification (APN).(…)[ Continue lendo.](javascript:void(0))
  2. Com o registro do dispositivo, o mesmo recebe um ID que é utilizado posteriormente para direcionar a notificação para ele.
  3. Este registro deve ser armazenado pelo servidor de aplicação que deseja fazer as notificações.
  4. Quando o servidor de aplicação desejar fazer uma notificação push, por exemplo o whatsapp quiser notificar que você recebeu uma mensagem, ele manda uma mensagem push com o seu id para o serviço de notificação push (GCM ou APN).
  5. Se o id informado for correto e não tiver nenhum problema maior, o serviço envia a notificação push para o dispositivo.

Implementação para android

Utilizei o framework Ionic para implementar um exemplo deste recurso.

Primeiramente segui o tutorial de como cadastrar minha aplicação para poder usar o GCM.

Para satisfazer os passos 2 e 3 citados acima utilizei o plugin de notificações push do Phonegap.

Para satisfazer os passos 4 e 5 utilizei o módulo node-gcm para disparar notificações push a partir de um servidor.

Colocando em prática

Antes de qualquer passo abaixo deve-se ter o nodejs.org instalado. Com ele instalado deve-se instalar tambem o bower:


npm i bower -g

Agora devemos instalar o ionic:


npm install -g ionic

Depois vamos utilizar uma aplicação pronta de exemplo do próprio ionic:


ionic start push-tutorial tabs
cd push-tutorial

Agora vamos importar o plugin do phonegap no nosso projeto ionic:

ionic plugin add  phonegap-plugin-push

Agora devemos adicoinar a plataforma android no projeto:


ionic platforms add android

Para ver se está tudo ok até agora use o comando que irá emular nosso app no browser:


ionic serve --lab

Deve aparecer algo deste tipo:

Nota: Os passos em diante dependem de um emulador ou de um celular android. No meu caso irei utilizar um celular e utilizar o comando run para instalar o app, no caso de um emulador se utiliza o comando emulate.

Agora vamos ao código do app.

Dentro de app.js devemos inserir o seguinte código

Note que no campo senderID devemos substituir NUMERO_PROJETO pelo número do projeto criado no GCM.

   // Nesta linha estamos instânciando e configurando o plugin que instalamos.
 
   var push = PushNotification.init({ "android": {"senderID": "NUMERO_PROJETO", icon : "icon"},

        "ios": {"alert": "true", "badge": "true", "sound": "true"}, "windows": {} } );



   /*

   Este é o evento que será chamado assim que o GCM responder a requisição

   com o id do dispositivo.

   É neste método que devendo mandar o id e armazenar em nosso servidor para enviarmos

   notificações posteriormente

   */

   push.on('registration', function(data) {

       console.log(data);

       alert(data.registrationId);

   });



    // Este é o evento no qual implementando o comportamento do nosso app

    // quando o usuário clicar na notificação

    push.on('notification', function(data) {

       alert('Notificação acionada, agora deve-se implementar a navegação no app de acordo com os dados: ' + JSON.stringify(data));

   });



   push.on('error', function(e) {

       alert('registration error: ' + e.message);

   });

Este código deve ficar dentro da callback ready como na imagem abaixo:

A parte do aplicativo está feita, agora devemos implementar alguma aplicação para enviar as requisições para o GCM com nossas notificações.

Criei um projeto no GitHub que contem o app que acabamos de aprender e o servidor na pasta push-server. Faça o download desta pasta.

Entre na pasta por linha de comando e digite:

npm install

Depois para ligar o servidor:

npm start

O servidor irá ligar na porta 3000, para realizar a notificação push basta seguir esta documentação.

Utilizando postman deve-se obter uma resposta desta forma

E o resultado é: