Neste tutorial você irá aprender como disparar notificação utilizando o Push Notification, uma mensagem enviada por uma aplicação ou servidor da aplicação e exibida na área de notificações do smartphone. Após o usuário logar na aplicação mobile, o token do seu smartphone é salvo em banco e 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. A aplicação não precisa estar aberta para receber a notificação, 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. Possuir uma conta ativa no Google.
2. Para aplicações iOS é necessário que o Provision profile seja gerado com a opção "Push notification" habilitada.

Configurando o Firebase

O Firebase é uma central de soluções no qual usaremos o recurso cloud messaging que é as notificações push. Para isso, precisaremos criar um projeto Firebase para ter acesso à essa solução e a aplicação Firebase.

Criando projeto Firebase

Acesse o site do Firebase para iniciarmos as configurações da notificação de push em aplicativos, faça o login com sua conta Google e clique na opção Ir para o console (Figura 1.1).

Figura 1.1 - Acessando o console do Firebase

Após, clique em Criar um projeto (destaque da Figura 1.2) para abrir a janela de passos para criação.

Figura 1.2 - Criando um projeto

O primeiro passo é inserir um nome para o projeto (1 da Figura 1.3), que não precisa ser o mesmo que o projeto Cronapp, e aceitar os termos do Google Analytics (2 da Figura 1.3). Clique em continuar para seguir com o próximo passo.

Figura 1.3 - 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.4).

Figura 1.4 - Ativando o Google Analytics

A última etapa é relacionada à configuração do Google Analytics, somente marque as opções de aceite de termos de uso (1 e 2 da Figura 1.5) para criar o projeto. Caso possua mais de uma conta do Google Analytics, essa tela exibirá um campo para vincular com uma dessas contas.

Figura 1.5 - Termos de uso do Google Analytics

Registrando aplicação no Firebase

Nessa etapa do tutorial, iremos registrar a aplicação para utilizar o Firebase e obter o arquivo google-services.json para fazer a comunicação da nossa aplicação com o Firebase. Então, na página da visão geral do projeto, selecione Android (destaque da Figura 2.1) para abrir a janela de registro (Figura 2.2).

Figura 2.1 - Abrir janela de registro para aplicação Android

Ao abrir a janela de registro, informe o nome do pacote do Android no campo (1 da Figura 2.2) e clique em Registrar app (2 da Figura 2.2).

Figura 2.2 - Informando nome do pacote do Android

Após registrar o app, você será redirecionado para a etapa de baixar o arquivo google-services.json, então faça o download (1 da Figura 2.3) e siga para a próxima etapa (2 da Figura 2.3).

Figura 2.3 - Fazendo download do arquivo JSON

Não será necessário alterar nada nas etapas 3 e 4. Na etapa 3, clique somente no botão próximo e na etapa 4, clique no botão Continuar no console (destaque da Figura 2.4) para salvar o registro do app.

Figura 2.4 - Clicando somente nos botões para finalizar o registro

Acessando o Cloud Messaging

Após fazer o registro da aplicação, seremos novamente redirecionados para a página da visão geral do projeto. No menu lateral da página, clique no ícone da engrenagem (1 da Figura 3.1). Selecione Usuários e Permissões (2 da Figura 3.1) para ser redirecionado à página de configurações e clique na aba Cloud Messaging (3 da Figura 3.1) para ser redirecionado ao conteúdo que contém os dados que usaremos para enviar as notificações push.

Figura 3.1 - Acessando o Cloud Messaging

Gerando par de chaves

Iremos criar um par de chaves que funcionam como uma inscrição de que sua aplicação possa utilizar as notificações push nos serviços de push compatíveis com a WEB. Então, vá até a guia Configurações da Web e clique em gerar par de chaves (destaque da Figura 3.2), caso não tenha uma.

Figura 3.2 - Gerando par de chaves

Obtendo chave do servidor

O Firebase fornecerá um token da chave do servidor e usaremos esse token no momento que o servidor da nossa aplicação solicitar o envio da notificação para o Firebase. Copie e salve a chave do servidor, usaremos mais tarde.

Figura 3.3 - Copiando chave do servidor

Configurando projeto no Cronapp

Ao criarmos um projeto Cronapp, iremos aplicar as configurações do Firebase (informando o ID da aplicação e importando o arquivo JSON), instalar o plugin do Firebase e montar exemplos de notificação, tanto o tradicional (aquele é exibido na área de notificações do Smartphone) quanto a silenciosa.

Criando projeto

Ao abrir e logar na IDE Cronapp, clique em Novo (seta da Figura 4.1), selecione o tipo de projeto Mobile e Web (1 da Figura 4.1), informe um nome para o projeto (2 da Figura 4.1) e clique em Finalizar (Figura 4.1).

Figura 4.1 - Criando projeto Cronapp

Após o carregamento, será aberta uma janela informando para selecionar o modelo do projeto, então selecione o modelo Mobile Low-Code Project e clique em avançar.

Na próxima janela existem duas configurações de extrema importância que precisam ser feitas. Como informado anteriormente, o nome do pacote do Android (criado ao registrar o app, destaque 1 da figura 2.2) deve ser o mesmo no campo Id da Aplicação (1 da Figura 4.2) e o tipo de autenticação do seu projeto deve estar configurado como Token (2 da Figura 4.2). Por fim, clique em Avançar (Figura 4.2) para carregar a janela de seleção de tema, então selecione um tema e clique em Finalizar.

Figura 4.2 - Configurando ID da aplicação e tipo de autenticação

Importando arquivo JSON

Nessa etapa iremos inserir o arquivo google-services.json que baixamos anteriormente, mas ele tem uma pasta especifica para ser salvo. Coloque o seu projeto no Modo Avançado e então selecione a pasta www (Endereço: src/main/mobileapp/www) (1 da Figura 5), clique com o botão direito para abrir o menu de contexto, acesse Novo > Fazer upload (destaques 2 e 3 da Figura 5) para abrir a janela de envio de arquivo. Em seguida, clique em Add (4 da Figura 5) para abrir a janela upload e selecione o arquivo google-services.json que foi baixado, espere carregar (barra azul tem que estar completamente cheia), clique em Ok e, caso queira, você já pode desativar o Modo Avançado.

Figura 5 - Upload do arquivo google-services.json

Plugin Push Notification

Para adicionar o plugin do Push Notification do Firebase ao projeto, acesse no menu do sistema Plugin > Adicionar novo plugin (destaques 1 e 2 da Figura 6) e ao abrir a janela, pesquise por Firebase no campo de busca (3 da Figura 6) e selecione o plugin Google Firebase Api Push Notification e avance até finalizar.

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

Configurando view

Nesse momento criaremos uma página com 3 campos (Título, Subtítulo e Mensagem), usaremos eles para disparar mensagens para todos os usuários cadastrados na nossa aplicação. Assim, arraste 3 componentes Entrada de texto para a view Home (Localização: Formulários/Web/Autenticado/home ), renomeie as propriedades Título de cada componente Entrar de texto como "Título", "Subtítulo" e "Mensagem" (1 da figura 7), após renomear, altere o campo Valor novamente dos 3 componentes de acordo com o nome inserido no título (2 da figura 7).

Figura 7 - Inserindo componentes de entrada de texto

Blocos de programação

Agora, será necessário criar blocos do tipo Servidor e Web para que eles sejam chamados por um evento e a notificação será enviada para o Firebase que encaminhará em seguida para todos os dispositivos. Já na aplicação mobile, um bloco ficará aguardando (listen) a notificação para exibi-la.

Bloco servidor para enviar notificação

Nesse passo vamos criar um bloco servidor para enviar a notificação para os usuários do aplicativo. Então clique em Ir para blocos do tipo servidor (destaque da Figura 8.1), e siga os passos da figura 8.1, selecione Servidor (1 da Figura 8.1) e clique com o botão direito para abrir o menu de contexto. Clique em Novo (2 da Figura 8.1) > Bloco de programação (3 da Figura 8.1).

Figura 8.1 - Criando bloco servidor

Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo,  "NotificarTodosDispositivos" em Nome da Função e clique em Finalizar.

Com o bloco do tipo Servidor criado, no bloco da para, clique na engrenagem de configuração e arraste 3 entradas, e as renomeie com "titulo", "subtitulo" e "mensagem" como mostrado na figura 8.2.

Figura 8.2 - Configurando entradas

Em seguida, crie uma variável para receber os tokens dos dispositivos, no nosso exemplo criamos a "tokensDispositivos", arraste para ela o bloco da categoria de Banco de dados chamado Abrir consulta (Figura 8.3).

Figura 8.3 - Arrastando bloco de consulta Abrir consulta

Após o bloco Abrir consulta ser arrastado, clique na sua engrenagem para configurarmos, siga os passos a seguir para configurar o bloco Abrir consulta corretamente (Figura 8.4).

Figura 8.4 - Configurando o bloco Abrir consulta

1. Clique em "..." e selecione a entidade Device;
2. Clique em Adicionar para selecionar a entidade Device;
3. Clique em + Novo Campo;
4. Selecione "Obter" e "d.token" e clique em OK.

Crie logo abaixo uma variável chamada "dados" e  siga os passos da figura (Figura 8.5). 

Figura 8.5 - Definindo valor no Json

1. Arraste o bloco Criar objeto Json.
2. Insira o bloco Definir valor no Json:
   • Json: arraste a variável "dados";
   • Caminho a percorrer: defina como "mensagem";
   • Valor a ser definido no objeto: coloque a variável "mensagem" que conterá a mensagem a ser notificada.

Dando continuidade na função, siga os passos da figura abaixo (Figura 8.6).

Figura 8.6 - Configurando envio da notificação push

1. Insira o bloco para cada item na lista e mude o nome da variável "i" para "token", clicando na caixa de seleção "i" e selecionando a opção "Renomear Variável":
   • na lista: Arraste a variável "tokensDispositivos";
2. Arraste o bloco Enviar notificação push para o parâmetro faça do bloco para cada item na lista:
   • Chave do Servidor: Insira o token do servidor obtido no firebase, como mostrado na figura 3.3;
   • Destinatário: Insira a variável "token";
   • Título: Insira a variável "titulo";
   • Subtítulo: Insira a variável "subtitulo";
   • Dados: Insira a variável "dados".

Por fim, salve o bloco servidor.

Configurando bloco Cliente

Agora iremos configurar os blocos Cliente que irá receber o título, subtítulo e mensagem da notificação, que será enviado para o bloco Servidor. Nesse passo, clique em Ir para blocos do tipo cliente (destaque da Figura 8.7) e siga os passos da figura 8.7: clique com o botão direito para abrir o menu de contexto, clique em Novo (2 da Figura 8.7) > Bloco de programação (3 da Figura 8.7).

Figura 8.7 - Criando bloco cliente

Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo, "EnviarNotificacaoGeral" em Nome da Função. e clique em Finalizar.

Após ser criado, associe o bloco de programação à view Home (Localização: Formulários/Web/Autenticado/home

) acessando as Propriedades do bloco de programação e alterando o campo Formulário de Referência.

Em seguida, siga os passos da figura 8.8.

Figura 8.8 - Bloco Cliente

1.  Arraste o bloco Chamar Bloco, clique na engrenagem de configuração e selecione o bloco servidor "NotificarTodosDispositivos" que criamos anteriormente e clique em Selecionar, pois os dados obtidos aqui, serão enviados à ele. Em seguida configure seus parâmetros:
   • titulo: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar o título, no nosso exemplo ficou "vars.titulo";
   • subtitulo: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar o subtítulo, no nosso exemplo ficou "vars.subtitulo";
   • mensagem: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar a mensagem, no nosso exemplo ficou "vars.mensagem";

Por fim, salve o bloco cliente web.

Bloco mobile para obter a notificação

A última etapa é criar um bloco mobile para obter a notificação push que foi disparado pelo bloco servidor e transmitida pelo Firebase. Nesse passo, clique em Ir para blocos do tipo mobile (destaque da Figura 9.1) e siga os passos da figura 9.1: clique com o botão direito para abrir o menu de contexto, clique em Novo (2 da Figura 9.1) > Bloco de programação (3 da Figura 9.1).

Figura 9.1 - Criando bloco mobile

Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo, "ObterNotificacaoPush" em Nome da Função e clique em Finalizar.

Quando o bloco do tipo Mobile for criado, siga os passos da figura 9.2.

Figura 9.2 - Bloco Mobile

1. Arraste para função o bloco Obter Dados de notificações push:
   • Retorno: altere o nome da variável sucesso para "notificacao".
2. Agora, iremos configurar o primeiro bloco de notificação (Sucesso):
   • Arraste o bloco Exibir Notificação no parâmetro Sucesso do bloco Obter Dados de notificações push;
   • Mensagem: arraste o bloco Obter Propriedade, no parâmetro Json, coloque a variável "notificacao", e em Propriedade, escreva "mensagem".
3. Configuremos agora o segundo bloco de notificação (Erro):
   • Arraste o bloco Exibir Notificação no parâmetro Erro do bloco Obter Dados de notificações push; 
   • Mensagem: escreva uma mensagem para que apareça caso a obtenção da notificação não funcione.

Notificação Silenciosa

Neste exemplo estamos obtendo a notificação push e exibindo para o usuário em um alerta. Porém, a notificação pode ser utilizada como um aviso para o usuário ou como dados internos à aplicação, conhecido como notificação silenciosa. Uma notificação push silenciosa é uma notificação que não exibe um alerta, não reproduz um som ou identifica o ícone do seu aplicativo. Ela desperta seu aplicativo em segundo plano e dá tempo para realizar algumas ações.

Vincular bloco ao evento da página

Nessa etapa, iremos vincular o bloco mobile criado no evento Ao iniciar da tela home no aplicativo mobile. Isso é necessário para que a função fique "ouvindo" a requisição da notificação push enviado pelo Firebase. Então, clique no ícone Ir para a pasta mobile (1 da Figura 9.3), abra a tela home (2 da Figura 9.3), clique com o botão direito sobre a área de edição para abrir o menu de contexto e clique em Eventos de página (3 da Figura 9.3).

Figura 9.3 - Abrindo tela home

No menu lateral, clique em "..." no evento Ao iniciar (1 da Figura 9.4) e após abrir a janela de seleção de eventos, clique no ícone "..." (2 da Figura 9.4) da aba Bloco de Programação para abrir a janela de seleção de bloco, por fim, selecione a função mobile que criamos anteriormente (3 da Figura 9.4) e salve tudo.

Figura 9.4 - Selecionando bloco de enviar o token ao evento

Botão para enviar notificação

Agora, vá para a página Home ( Localização: Formulários/Web/Autenticado/ ) insira um componente botão na view e siga os passos da figura 10. Altere o evento ao clicar do botão de notificação para a função "EnviarNotificacaoGeral" do bloco cliente web "Notificacao".

Figura 10 - Bloco atribuindo botão ao bloco Cliente

1. Selecione o componente botão e vá para a aba Eventos;
2. No campo Ao Clicar clique em "..." ;
3. Clique em "..." da página do evento Ao Clicar;
4. Selecione a função "EnviarNotificacaoGeral" do bloco cliente web "Notificacao".

Compilar aplicação mobile

Precisamos configurar o projeto para compilarmos e instalarmos no smartphone, siga os passos das figuras abaixo para obter o .apk para efetuar o teste da notificação.

Figura 11 - Obtendo endereço do projeto

1. Após salvar tudo, rode o projeto clicando em Executar, no menu do sistema, e em seguida em Debug;
2. Clique em Navegador [web];
3. Copie o endereço da barra de navegação.

Agora, iremos inserir o link nas configurações dos dispositivos móveis, como mostrado abaixo (Figura11.1).

Figura 11.1 - Inserindo Url

1. No menu superior, clique em Dispositivos Móveis;
2. Clique em Configurações;
3. Insira a Url obtida no campo URL do Servidor (produção) e clique em Salvar;

Com a configuração correta, agora podemos compilar e efetuar o teste da aplicação no seu smartphone (Figura11.2).

Figura 11.2 - Compilando APK

• Acesso novamente no menu Dispositivos Móveis;
• Clique em Compilar e selecione Android;
• Em Perfil selecione Debug, marque a opção APK e clique em OK;
• Clique em Baixar para obter o .zip contendo seu projeto em .apk.

Após baixar, é necessário instalar o aplicativo em seu Smartphone Android, abrir e logar (utilize usuário "admin" e senha "admin") na aplicação para acessar a tela home. Somente após acessar a tela home que o evento configurado no tópico Vincular bloco ao evento da página será executado e o token do smartphone será salvo em banco.

Teste

Para enviar a notificações push, acessa a aplicação web e logue utilizando o usuário "admin" e senha "admin". Acesse a página Home no seu projeto web, preencha os campos e clique no botão Enviar Notificação (Figura 12).

Figura 12 - Gerando notificação

Após a notificação ser gerada, ela aparece no dispositivo como no exemplo abaixo:

Figura 12.1 -  Recebendo notificação com aplicação em uso.

Figura 12.2 -  Recebendo notificação com aplicação em segundo plano ou fechada.