Neste tutorial você irá aprender como disparar notificações utilizando o Push Notification, mensagens enviadas por uma aplicação ou servidor da aplicação e exibida na área de notificações do smartphone.

No projeto que criaremos, após o usuário logar na aplicação mobile, o token do smartphone será salvo no banco de dados e esse token será usado para direcionar as notificações push. Na aplicação web, após preencher o conteúdo da mensagem, os dados serão enviados para o Firebase junto com o token do smartphone que receberá a notificação.

Para receber a mensagem, a aplicação no smartphone não precisa estar aberta, podendo ocorrer com o aplicativo em segundo plano.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

1. Projeto do tipo web e mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link Criar projeto.

2. Possuir uma conta ativa no Google.
3. Para aplicações iOS é necessário que o Provision profile seja gerado com a opção "Push notification" habilitada.

Configuração do Firebase

O Firebase é uma central de soluções do Google e usaremos o recurso cloud messaging que é as notificações push. Para isso, precisaremos criar um projeto Firebase.

Criar projeto Firebase

Acesse o site do Firebase e faça o login com sua conta Google, clique na opção Ir para o console (destaque 1 da figura 1).

Figura 1 - Acessando o console do Firebase

Após, clique em Criar um projeto (destaque 1 da figura 1.1) para abrir a janela de passos para criação. Caso já possua um projeto Firebase, utilize o botão + Adicionar projeto.

Figura 1.1 - Criando um projeto

Informe um nome para o projeto Firebase (não precisa ser o mesmo do projeto Cronapp) e clique em Continuar para seguir com o próximo passo (figura 1.2).

Figura 1.2 - Definindo o nome para o projeto Firebase

O segundo passo é ativar o Google Analytics, uma solução de análise gratuita e ilimitada. Apesar de não ser obrigatório, é recomendando a sua utilização - então, clique no botão Continuar (figura 1.3).

Figura 1.3 - Ativando o Google Analytics

A última etapa é relacionada a configuração do Google Analytics. Selecione ou crie uma conta do Google Analytics (destaque 1 da figura 1.4), selecione a localização (2) e aceite os termos e configurações nos passos 3 e 4 da figura abaixo. Finalize clicando no botão Criar projeto.

Figura 1.4 - Termos de uso do Google Analytics

Registrar aplicações no Firebase

Nessa etapa do tutorial iremos registrar a aplicação Cronapp no Firebase. 

Então, na página da visão geral do projeto, selecione Android (destaque 1 da figura 2) para abrir a janela de registro (figura 2.1).

Figura 2 - Abrir janela de registro para aplicação Android (1) ou iOS (2)

Faremos a configuração da nossa aplicação mobile Cronapp no Firebase em 4 etapas.

Na primeira, informe o Nome do pacote do Android no campo e clique no botão Registrar app.

Figura 2.1 - Informando nome do pacote do Android

O segundo passo irá gerar um arquivo JSON com os dados necessários para a comunicação entre o Firebase e a nossa aplicação. Por isso, baixe o arquivo google-services.json (destaque 1 da figura 2.2) e clique no botão Próxima. (No caso da aplicação iOS, o arquivo será o GoogleService-Info.plist).

Figura 2.2 - Download do arquivo JSON

Não será necessário alterar nada nas etapas 3, por isso, ao chegar nela, clique no botão Próxima (não exibido em imagens).

Na última etapa, apenas clique no botão Continuar no console para salvar o registro da configuração (Figura 2.3).

Figura 2.3 - Finalizar configuração

Configurar o Cloud Messaging

Após fazer o registro da aplicação, seremos redirecionados para a página da visão geral do projeto. No menu lateral da página, clique no ícone da engrenagem (destaque 1 da figura 3) e selecione Usuários e Permissões para ser redirecionado à página de Configurações do Projeto; clique na aba Cloud Messaging (2) para ser redirecionado a área de liberação da API que usaremos para enviar as notificações push.

Existem 2 versões dessa API, mas atualmente o Cronapp só dá suporte a versão API Cloud Messaging (Legada), que por padrão, vem desativada. Assim, clique nos 3 pontos (destaque 3) e selecione "Gerenciar API no Console do Google Cloud" para abrir outra página em outra aba do seu navegador. 

Figura 3 - Acessando o Cloud Messaging

A outra página permitirá ativar a API Cloud Messaging, por isso, clique no botão ATIVAR (figura 3.1) e após isso, retorne a guia anterior, com o Firebase, em seu navegador.

Figura 3.1 - Ativando a API Cloud Messaging

De volta as Configurações do projeto Firebase, atualize a página para exibir o Token da Chave do servidor da API Cloud Messaging (Legada) (Figura 3.2), será ela que usaremos em nosso projeto Cronapp.

Figura 3.2 - Token da Chave do Servidor da API Cloud Messaging

Configurar projeto no Cronapp

Toda vez que um usuário instala e abre uma aplicação Cronapp, alguns dados do smartphone são salvos no banco de dados do projeto (para mais detalhes acesse o tópico "Classe Device" do Diagrama de dados). Esses dados são basicamente o modelo do dispositivo, plataforma (Android ou iOS), a versão da plataforma e Token do dispositivo. Para a notificação push é necessário apenas o token do dispositivo.

Neste exemplo, faremos com que a aplicação web dispare a notificação push para todos os dispositivos móveis que possuem a aplicação móvel instalada.

Importando arquivo JSON

Nessa etapa iremos adicionar os arquivos google-services.json (usado no sistema Android) e GoogleService-Info.plist (usado no sistema iOS) que baixamos anteriormente no Firebase durante o registro da aplicação.

Habilite o Modo Avançado no Cronapp e então clique para selecionar o diretório www (Endereço: src/main/mobileapp/www) (1 da figura 4), no diretório do seu sistema operacional, selecione os 2 arquivos e arraste-os até o Cronapp para fazer o upload (2 da figura 4).

Figura 4 - Upload dos arquivos google-services.json e GoogleService-Info.plist

Plugin Push Notification

Para adicionar o plugin ao projeto Cronapp, acesse no menu do sistema Plugin > Instalar plugins. Ao abrir a janela, pesquise por "push" no campo de busca, selecione o plugin Google Firebase - Push Notification e avance até finalizar (Figura 5).

Figura 5 - Instalação do plugin do Push Notification

Bloco de programação

Criaremos 2 funções de bloco de programação, uma no servidor do projeto e outra cliente, na aplicação mobile.

Função Servidor

Esse bloco de funções irá conter apenas uma função. Essa função será responsável por enviar a mensagem, o título e o subtítulo para o Firebase juntamente com o token do dispositivo destinatário. Nesse exemplo, não faremos filtro dos dispositivos, a notificação será disparada para todos os dispositivos cadastrados em nosso sistema (tabela Device).

Acesse o menu de contexto do diretório Servidor (Localização: Bloco de Programação/  ) e selecione Novo > Bloco de Programação. Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo,  "NotificarTodosDispositivos" em Nome da Função e clique em Finalizar (Figura 6).

Figura 6 - Criar bloco servidor

No bloco para, clique na engrenagem de configuração para abrir uma pequena janela de parâmetro da função e arraste 3 blocos para o campo de entradas (destaque 1 da figura 6.1). Renomeie cada bloco com os nomes "titulo", "subtitulo" e "mensagem", como mostrado na figura 6.1.

Figura 6.1 - Definir parâmetros da Função servidor

Em seguida, crie uma variável com o nome "tokensDispositivos" e encaixe o bloco Abrir consulta (categoria de Banco de dados) (figura 6.2). Clique na engrenagem do bloco Abrir consulta e configure como na imagem abaixo.

Figura 6.2 - Configurar bloco servidor Abrir Consulta 

Passos da figura 6.2:

1. Clique em "..." e selecione a entidade Device.
2. Clique em Adicionar para incluir a entidade Device na consulta.
3. Na área Campos, clique no botão + Novo Campo.
4. Selecione "Obter" na primeira caixa de seleção e "d.token" na segunda caixa de seleção.

Clique no botão OK ao final.

Criaremos agora um objeto JSON contendo um atributo para a mensagem, caso necessário, outros atributos podem ser criados para serem usados na aplicação mobile. 

Figura 6.3 - Configurar envio das notificações push

1. Crie uma variável com o nome "dadosMensagem" e encaixe o bloco Criar objeto Json (categoria Json).
2. Adicione o bloco Definir valor do Json e configure seus parâmetros:
   • Json: informe a variável "dadosMensagem", criado no passo 1;
   • Caminho a percorrer: informe o nome do atributo a ser criado no Json, "mensagem";
   • Valor a ser definido no objeto: informe o parâmetro da função "mensagem".
3. Inclua o bloco de loop Para cada item na lista e encaixe a variável "tokensDispositivos".
4. Adicione o bloco Enviar notificação push (categoria Util) dentro do bloco de loop e configure seus parâmetros:
   • Chave do Servidor: informe a chave do servidor obtido no Firebase (figura 3.2);
   • Destinatário: informe a variável usada no bloco de loop, no exemplo da figura 6.3 é a variável "token";
   • Título: informe o parâmetro da função "titulo";
   • Subtítulo: informe o parâmetro da função "subtitulo";
   • Dados: informe a variável com o Json da mensagem, nesse exemplo é "dadoMensagem".

Salve o bloco de programação.

Função cliente mobile

Esse bloco de funções irá conter apenas uma função. Essa função será responsável por ficar aguardando (listen) a notificação push chegar e então realizar alguma ação. Neste exemplo, iremos apenas exibir um pop-up com uma mensagem, caso o aplicativo esteja aberto. Se o aplicativo estiver fechado ou em segundo plano, o usuário receberá a notificação na bandeja de notificação do Android ou iOS, ao clicar, o aplicativo será aberto e a mensagem será exibida no pop-up.

Acesse o menu de contexto do diretório Mobile (Localização: Bloco de Programação/  ) e selecione Novo > Bloco de Programação. Na janela que abrir, informe "NotificacaoMobile" no campo Nome do Arquivo,  "ObterNotificacaoPush" em Nome da Função e clique em Finalizar (figura 7).

Figura 7 - Criar bloco cliente mobile

Configure a função como na figura abaixo.

Figura 7.1 - Configurar recebimento das notificações push

1. Adicione o bloco Obter Dados de notificações push (categoria Dispositivos Móveis). Esse bloco possui 2 entradas de comando, a entrada de comando a ser executada dependerá do Sucesso ou Erro na obtenção da mensagem, 
   1. Variável de retorno do bloco Obter Dados de notificações push, no caso de sucesso, será retornado o Json montado no bloco servidor (destaque 2 da figura 6.3).
2. Encaixe o bloco Exibir Notificação na entrada de comando Sucesso.
3. Utilize o bloco Obter Propriedade e configure seus parâmetros:
   • Json: adicione a variável de retorno da entrada de comando Sucesso (destaque "a" da figura 7.1).
   • Propriedade: informe o nome "mensagem" do atributo do JSON que definimos no bloco servidor (destaque 2 da figura 6.3).
4. Encaixe o bloco Exibir Notificação na entrada de comando Erro e informe o valor "Não foi possível obter a notificação!".

Salve o bloco de programação em seguida.

Views

Nesse tópico utilizaremos uma página web para incluir um formulário que será utilizado pelo administrador do sistema para informar e disparar as notificações push, já na aplicação mobile, usaremos uma tela para executar o bloco mobile que ficará aguardando a chegada de novas notificações, mesmo em segundo plano.

Página web

Acesse a página web home (Localização: Formulários/Web/Autenticado/  ). Em seguida, arraste 3 componentes visuais Entrada de texto e configure as propriedades Título (destaque 1 da figura 8) e Valor (2) de cada componente. A propriedade Valor (ng-model) não deve conter acentos ou caracteres especiais.

• Primeiro Entrada de texto:
  1. Título: Título
  2. Valor: titulo
• Segundo Entrada de texto:
  1. Título: Subtítulo
  2. Valor: subtitulo
• Terceiro Entrada de texto:
  1. Título: Mensagem
  2. Valor: mensagem

Figura 8 - Configurar componentes entrada de texto

Agora iremos configurar um botão que irá executar o bloco servidor, passando como parâmetros o conteúdo dos campos Entrada de texto da página (Figura 8.1).

Figura 8.1 - Configurar componente botão

1. Arraste um componente Botão abaixo do último componente Entrada de texto.
2. Selecione a aba Eventos no menu de configurações do Botão.
3. Clique em "..." do evento Ao clicar para abrir a janela de seleção do evento,
4. Na janela, selecione a aba Bloco de Programação.
5. Clique em "..." para exibir a janela de seleção de funções de blocos, selecione a função "NotificarTodosDispositivos" do bloco "Notificacao" (não exibido na figura 8.1) e configure seus parâmetros:
   • Para cada parâmetro da função (destaque "a"), selecione a expressão correspondente do campo Entrada de texto na tela (ng-model) ("b").

Clique em OK para salvar as configurações da janela.

Caso queira personalizar o botão, selecione novamente o botão (destaque 1 da figura 8.1) e, na aba Propriedades, configure os campos Título e Ícone (não exibido em imagens).

Tela mobile

Acesse o menu de contexto da tela mobile home (Localização: Formulários/Mobile/Autenticado/  ) e selecione a opção Eventos da página (Figura 9).

Figura 9 - Menu de contexto da página mobile

No menu de configuração da tela, clique no botão "..." do Evento Ao Iniciar (destaque 1 da figura 9.1) para abrir a janela de seleção do evento; selecione a aba Bloco de Programação (2); clique em "..." (3) para exibir a janela de seleção de funções de blocos e selecione a função "ObterNotificacaoPush" do bloco "NotificacaoMobile" (4).

Figura 9.1 - Configurar Eventos Ao Iniciar da página mobile

Salve as configurações do Editor de views mobile.

Compilar aplicação mobile

Nesse momento a notificação push já está configurada em nosso projeto, porém, só será possível testar com o aplicativo instalado em um Smartphone. Para isso, usaremos a URL de debug do Cronapp como servidor da aplicação e, em seguida, compilaremos uma aplicação para o sistema Android.

Execute o projeto selecionando no menu do sistema Executar > Debug (destaque 1 da figura 10), aguarde até exibir a janela perguntando como deseja abrir a aplicação e selecione a opção Navegador [web] (2), será aberta uma outra guia em seu navegador com a aplicação web. Na nova guia, copie a URL de debug no endereço do navegador (3). 

Mantenha a nova guia aberta, usaremos ela novamente para testar a notificação.

Figura 10 - Obtendo a URL de debug do projeto

Com o projeto ainda em execução no Cronapp, acesse no menu do sistema Dispositivos Móveis > Configurações e na janela que abrir, selecione a aba Aplicativos e informe a URL obtida no campo URL do Servidor (produção) (destaque 1 da figura 10.1). Lembramos que esse endereço é temporário e poderá ser alterado se você parar e executar novamente o servidor da aplicação.

Figura 10.1 - Configurando a URL de debug como servidor da aplicação mobile

Por fim, vamos compilar e baixar a nossa aplicação mobile. Acesse no menu do sistema Dispositivos Móveis > Compilar > Android para abrir a janela Selecione o modo de build, deixe a configuração padrão (Perfil: "Debug"; Tipo de Pacote: "APK") e clique em OK.

É esperado que o processo de compilação (destaque 1 da figura 10.2) demore alguns minutos, após finalizar, a janela Download Aplicação Móvel será exibida, clique no botão Baixar para iniciar o download. 

Figura 10.2 - Compilando aplicação Android

O download será de um arquivo compactado em formato *.zip contendo sua aplicação em formato *.apk , com o nome "app-debug.apk".

Testar notificação push

Envie a aplicação obtida no tópico anterior para um Smartphone Android (via cabo USB ou outro meio) e faça a sua instalação. Após abrir e logar na aplicação mobile (utilize usuário "admin" e senha "admin"), você terá acesso a tela home que possui o evento configurado no tópico Tela mobile para ficar aguardando as notificações push.

Agora vamos retornar a aplicação web e disparar a notificação push para os dispositivos móveis que possuem nossa aplicação. Acesse novamente a guia do seu navegador com a aplicação web (figura 10) e logue (utilize usuário "admin" e senha "admin"). Na Página Inicial, preencha os campos e clique no botão para disparar a notificação.

Figura 11 - Aplicação web do projeto

Se o aplicativo mobile estiver em segundo plano ou fechado, a notificação será exibida na bandeja de notificações (Figura 11.1), ao clicar na notificação, o aplicativo será aberto e, após logar, a mensagem será exibida em um pop-up, devido a configuração feita na figura 7.1.

Figura 11.1 - Notificação exibida na bandeira de notificações

Na figura 11.2 é possível ver o pop-up com a mensagem enviada.

Figura 11.2 - Pop-up com a mensagem