O push notification é uma mensagem enviada por uma aplicação ou servidor da aplicação e exibida na área de notificações do smartphone. A aplicação não precisa estar aberta para receber a notificação, podendo ocorrer com o aplicativo em segundo plano. Ele pode ser utilizado para os mais diversos motivos, desde um aviso para o usuário até dados internos à aplicação.

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 a 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.

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

Nas etapas 3 e 4 nada serão configurados: 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 a utilizar na notificação 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 poderá utilizar as notificações push nos serviços de push compatíveis para 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 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 e clique em avançar. Na janela de configuração, tem 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. Então, selecione a pasta www (1 da Figura 5), clique com o botão direito para abrir o menu de contexto. clique em Novo > Fazer upload (destaques 2 e 3 da Figura 5) para abrir a janela de envio de arquivo. Clique em Add (4 da Figura 5) para abrir a janela upload e selecione o arquivo json que foi baixado, espere carregar (barra azul tem que estar completamente cheia) e clique em Ok.

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

Exemplo de notificação

Vamos criar uma notificação que vai informar ao usuário que logar na aplicação quando um novo livro estiver disponível na biblioteca e uma outra notificação que vai informar ao usuário que logar na aplicação quando um livro sofrer alguma alteração (como tiver disponível para reserva), mas essa será silenciosa.

Para essa etapa, é preciso que conhecer sobre Blocos de programação e Diagrama. Caso haja dúvida, clique nos links abaixo para ser redirecionados a essas documentações:

• Diagrama
• Bloco de programação

Abra o diagrama de dados app (app.umlcd), crie uma classe chamada Livro com os seguintes atributos (conforme tabela abaixo) e marque a opção de Auditoria em log.

E com essa tabela, crie um relacionamento N-M com a tabela User. Ao gerar a classe associativa, edite-a alterando o nome da mesma para Reserva, adicione os atributos abaixo e marque a opção de Auditoria em log.

No diagrama de dados, a configuração ficará da seguinte maneira (Figura 7):

Figura 7 - Relacionamento entre as classes Livro e User (com add da tabela associativa, Reserva)

Por fim, gere a persistência e o CRUD das classes Livro e Reserva e, por fim, adicione dados a ela, como os exemplos abaixo:

Bloco servidor para enviar notificação

Nesse passo, vamos criar um bloco servidor para enviar a notificação para o usuário do aplicativo. Então clique em Ir para blocos do tipo servidor (destaque da Figura 8.1), selecione Bloco de programação (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

Ao abrir a janela de criação, selecione a opção bloco de programação vazio (low-code) e avance. Defina um nome para o arquivo e para a função do bloco e salve.

Quando abrir a aba do bloco na área de IDE, clique na engrenagem da função (destaque da Figura 8.2), adicione um parâmetro de entrada (seta da Figura 8.2) e defina um nome para esse parâmetro.

Figura 8.2 - Criando parâmetro de entrada

Na categoria variável, crie uma variável, chamada dado (Figura 8.3) e adicione ao bloco de programação.

Figura 8.3 - Criando variável

Na categoria banco de dados, selecione o bloco abrir consulta e vincule à variável dado, clique na engrenagem do bloco para abrir a janela de seleção e em entidade, selecione AuditLog (1 da Figura 8.4.1) e adicione os campos command (2 da Figura 8.4.1) e objectData (3 da Figura 8.4.1).

Figura 8.4.1 - Adicionando tabela e obtendo campos

Em Regras, selecione a opção OU (destaque da Figura 8.4.2) e adicione uma regra, selecione o campo type e informe que ele precisa ser igual ao app.entity.Livro (1 da Figura 8.4.2). Após, clique em Novo grupo para adicionar uma regra que será vinculada a essa e deixa marcada a opção E, selecione o campo command e ele tem que ser igual à INSERT (2 da Figura 8.4.2). Clique novamente em nova regra, selecione o campo type novamente e informe agora que ele precisa ser igual ao app.entity.Reserva (3 da Figura 8.4.2). Por último, clique em novo grupo para adicionar uma regra que será vinculada a essa e deixa marcada a opção E, selecione o campo command e ele tem que ser igual à UPDATE (4 da Figura 8.4.2).

Figura 8.4.2 - Criando regras e grupos

Por fim, adicione um campo em ordenar e selecione o campo date, ordene por ordem decrescente (Desc) (destaque da Figura 8.4.3) e clique em OK para salvar as configurações.

Figura 8.4.3 - Ordenando a data e salvando as configurações

Crie uma variável chamada conteudo. Na categoria Json, selecione o bloco Para Json e vincule a variável (1 da Figura 8.5). Selecione o bloco Obter campo da categoria Banco de dados e vincule ao bloco Para Json (2 da Figura 8.5). No parâmetro Fonte de dados do bloco Obter campo, selecione a variável dado (3 da Figura 8.5) e no parâmetro Nome do campo, selecione objectData (4 da Figura 8.5). Essa etapa basicamente irá obter o conteúdo do campo objectData, que é um JSON serializado, convertido no formato JSON.

Figura 8.5 - Convertendo conteúdo do campo objectData para JSON e salvando na variável

Crie uma variável chamada comparacaoUpdate (1 da Figura 8.6.1) e vincule ao bloco de comparação (2 da Figura 8.6.1), que se encontra na categoria Lógica. No primeiro parâmetro desse bloco, adicione o bloco Obter campo vinculado a fonte de dados dado e no Nome do campo, selecione command (3 da Figura 8.6.1). No segundo parâmetro do bloco de comparação, adicione um bloco de texto, que fica na categoria Texto, e no seu conteúdo, insira o texto UPDATE (4 da Figura 8.6.1). Deixe o operador da comparação como igual.

Figura 8.6.1 - Criando variável para guardar resultado da comparação

Crie outra variável chamada comparacaoDisponivel (1 da Figura 8.6.2) e vincule ao bloco de comparação (2 da Figura 8.6.2). No primeiro parâmetro, adicione o bloco Obter campo do Json, que fica na categoria Json, vincule a variável conteudo no parâmetro Json e no Caminho a percorrer, vincule um bloco de texto e no seu conteúdo, insira o texto "disponível" (3 da Figura 8.6.2) - que é o atributo da classe Reserva. No segundo parâmetro desse bloco, insira o bloco Booleano, que fica na categoria Lógica, e selecione verdadeiro (4 da Figura 8.6.2). Deixe o operador da comparação como igual.

Figura 8.6.2 - Criando variável para guardar resultado da comparação

Na categoria Lógica, adicione o bloco Se Faça abaixo da variável comparacaoDisponivel, clique na engrenagem e adicione o bloco senão se. Selecione o bloco de operação lógica, vincule ao se do bloco Se Faça (1 da Figura 8.7) e deixe o operador da comparação como E. No primeiro parâmetro desse bloco, vincule a variável comparacaoUpdate (2 da Figura 8.7); no segundo, a variável comparacaoDisponivel (3 da Figura 8.7).

Figura 8.7 - Configurando a condição do SE no bloco

Na entrada de comando Faça do bloco Se, iremos enviar a notificação push ao usuário. No entanto, iremos adicionar outro bloco Se Faça para que ele pegue somente os dados quando a reserva tiver o campo disponível como verdadeiro. Então, procure o bloco enviar notificação push na categoria Util e o adicione no faça da condição se (1 da Figura 8.8).

Lembra da chave do servidor que copiamos no firebase? É no parâmetro chave do servidor em que ela será inserida, então vincule um bloco de texto à esse parâmetro e cole a chave do servidor (2 da Figura 8.8). No parâmetro destinatário, vincule a variável token (criada automaticamente ao inserir o parâmetro de entrada na função) (3 da Figura 8.8). Já no parâmetro Título, vincule um bloco de Texto e insira o conteúdo "Livro disponível" (4 da Figura 8.8). No parâmetro Subtítulo, vincule outro bloco de Texto e insira o conteúdo "Livro disponível para reserva na biblioteca Golden Star" (5 da Figura 8.8). Por fim, vincule a variável conteudo ao parâmetro Dados (6 da Figura 8.8).

Figura 8.8 - Enviar notificação push

No parâmetro Senão se, adicione um bloco de comparação e vincule-o (1 da Figura 8.9). No primeiro parâmetro desse bloco, adicione o bloco obter campo e ele precisa tá vinculado a fonte de dados dado e o nome do campo precisa ser command (2 da Figura 8.9). No segundo parâmetro desse bloco, adicione um bloco de Texto, que fica na categoria Texto, e no seu conteúdo, insira o texto "INSERT" (3 da Figura 8.9). Deixe o operador da comparação como igual. Essa comparação vai verificar se o último comando inserido na tabela foi do tipo insert.

Figura 8.9 - Configurando a condição do SENÃO SE no bloco

É nessa condição que iremos criar uma notificação silenciosa. Novamente, adicione na entrada de comando faça do Senão se, o bloco Enviar notificação push (1 da Figura 8.10). Insira a chave do servidor no parâmetro correspondente (2 da Figura 8.10), a variável token também (3 da Figura 8.10) e a variável conteudo no parâmetro Dados (4 da Figura 8.10). Deixe os parâmetros Título e Subtítulo vazios pois é isso que faz enviar uma notificação silenciosa.

Figura 8.10 - Enviar notificação push silenciosa

Por fim, salve o bloco servidor.

Bloco mobile para enviar token

Nesse passo, vamos criar um bloco mobile para chamar o bloco servidor criado anteriormente e que também enviará o token do usuário do aplicativo para esse bloco. Então, clique em Ir para blocos do tipo mobile (1 da Figura 9.1), selecione Bloco de programação (2 da Figura 9.1) e clique com o botão direito para abrir o menu de contexto. Clique em Novo > Bloco de programação (3 e 4 da Figura 9.1).

Figura 9.1 - Criando bloco mobile

Ao abrir a janela de criação, selecione a opção bloco de programação vazio (low-code) e avance. Defina um nome para o arquivo e para a função do bloco e salve.

Quando abrir a área de edição do bloco, procure pelo bloco Dormir na categoria Util e defina um tempo em milissegundos (Figura 9.2) para gerar uma pausa antes de iniciar a próxima ação do bloco (essa pausa é somente para ser possível visualizar a notificação na home do seu smartphone, pois a execução é muito rápida, ou seja, é somente pra esse tutorial).

Figura 9.2 - Bloco dormir para fins de visualização

Abaixo do bloco dormir, insira o bloco Obter token do Firebase (1 da Figura 9.3) - que se encontra na categoria Dispositivos Móveis. Renomeie a variável de retorno do bloco para token (2 da Figura 9.3) e troque-as nos retornos do bloco, para assim melhorar o entendimento do que é a variável.

Figura 9.3 - Renomeando a variável de retorno do bloco

Pesquise pelo bloco Chamar bloco, que pertence à categoria Util, e insira-o no retorno de sucesso do bloco Obter token do Firebase (1 da Figura 9.4). Clique na engrenagem (seta da Figura 9.4) para abrir a janela que lista todos os blocos criados no Cronapp e selecione o bloco que irá enviar a notificação.

Figura 9.4 - Selecionando bloco servidor para ser chamado

Será mostrado o parâmetro do bloco servidor no chamar bloco, então insira a variável de retorno, o token (Figura 9.5), e por fim, salve o bloco.

Figura 9.5 - Vinculando a variável ao parâmetro do bloco

Vincular bloco ao evento da página

Nessa etapa, iremos vincular o bloco mobile criado ao evento Ao iniciar da tela home. Então clique no ícone Ir para a pasta mobile (1 da Figura 9.6), abra a tela home (2 da Figura 9.6) e clique com o botão direito sobre a tela para abrir o menu de contexto e clique em eventos de página (3 da Figura 9.6).

Figura 9.6 - Abrindo tela home

No menu lateral, clique em "..." (1 da Figura 9.7) para abrir a janela do evento Ao iniciar e clique no ícone "..." (2 da Figura 9.7) para abrir a janela de seleção de bloco; por fim, selecione o bloco mobile que irá enviar o token (3 da Figura 9.7) e salve tudo.

Figura 9.7 - Selecionando bloco de enviar o token ao evento

Bloco mobile para obter a notificação

A última etapa é criar um bloco mobile para obter a notificação push do bloco servidor. Então crie outro bloco mobile e adicione o bloco Obter dados da notificação push (destaque da Figura 10.1), que pertence a categoria Dispositivos Móveis, e renomeie a variável de retorno para notificação e a selecione em ambos os retornos, isso é somente para melhorar o entendimento do que é a variável.

Figura 10.1 - Renomeando variável de retorno do bloco

No retorno de sucesso do bloco, adicione o bloco Se Faça (1 da Figura 10.2) e clique na engrenagem para adicionar o bloco senão. Selecione o bloco de Comparação (categoria lógica) e vincule ao se (2 da Figura 10.2). No primeiro parâmetro, adicione o bloco Obter propriedade, que fica na categoria Json, vincule a variável notificacao no parâmetro Json e em Propriedade, vincule um bloco de Texto, inserindo "disponivel" (3 da Figura 10.2) - que é o atributo da classe Reserva. No segundo parâmetro desse bloco, insira o bloco nulo (4 da Figura 10.2), que fica na categoria Lógica. Troque o operador da comparação para diferente (5 da Figura 10.2). Essa comparação é pra verificar se a propriedade disponivel é diferente de nulo, pois, caso ela seja igual, quer dizer que a coluna não existe e o JSON contém os dados da classe Livro.

Figura 10.2 - Condição do bloco se faça

No retorno do faça no bloco, adicione o bloco exibir notificação (destaque da Figura 10.3), da categoria Formulário. Troque o tipo para Aviso (1 da Figura 10.3) e adicione um bloco de texto e insira o conteúdo Livro disponível para reserva na biblioteca GS (2 da Figura 10.3).

Figura 10.3 - Retorno do faça no bloco se

Crie uma variável chamada mensagem e adicione-a no retorno do senão (1 da Figura 10.4). Adicione o bloco Criar texto com, da categoria Texto, vincule a variável (2 da Figura 10.3) e clique na engrenagem desse bloco para adicionar mais três itens (parâmetros) e faça as seguintes vinculações em cada parâmetro seguindo os passos da Figura 10.4.

Figura 10.4 - Criando variável mensagem

1. No primeiro parâmetro do bloco Criar texto vincule-o ao bloco texto e insira o texto "O livroe" dê um espaço ao final da frase (3 da Figura 10.4); 
2. No segundo parâmetro do bloco vincule-o com o bloco Obter propriedade, que fica na categoria Json, vincule a variável notificacao no parâmetro Json e em Propriedade, vincule um bloco de texto e no seu conteúdo, insira o texto "titulo" (4 da Figura 10.4);
3. No terceiro parâmetro, vincule-o com o bloco de Texto, dê um espaço e insira o texto de e dê outro espaço (5 da Figura 10.4);
4. No quarto parâmetro, vincule-o com o bloco Obter propriedade, que fica na categoria Json, vincule a variável notificacao no parâmetro Json e em Propriedade, vincule um bloco de texto e no seu conteúdo, insira o texto "autor" (6 da Figura 10.4);
5. No quinto e último parâmetro, vincule-o com o bloco de Texto, dê um espaço no conteúdo e insira o texto "está presente na biblioteca Golden Star" (7 da Figura 10.4).

A última etapa para configurar o bloco é adicionar o bloco exibir notificação (destaque da Figura 10.5) após a variável mensagem. Troque o tipo para Informação (1 da Figura 10.5) e adicione um bloco de texto e no conteúdo, vincule com a variável mensagem (2 da Figura 10.5).

Figura 10.5 - Retorno do senão no bloco se

Vincular bloco ao evento da página

Nessa etapa, iremos vincular o bloco mobile criado ao evento Ao iniciar da tela login. Então, clique no ícone Ir para a pasta mobile, abra a tela login e clique com o botão direito sobre a tela para abrir o menu de contexto e clique em Eventos de página. No menu lateral, clique em "..." para abrir a janela do evento Ao iniciar e clique no ícone "..." para abrir a janela de seleção de bloco; por fim, selecione o bloco mobile que irá obter a notificação e salve tudo. Observe que o bloco será mostrado no campo do evento (destaque da Figura 10.6).

Figura 10.6 - Bloco de obter notificação vinculado ao evento ao iniciar

Resultado dos testes

A notificação silenciosa será mostrada somente na tela home da aplicação (Figura 11.1).

Figura 11.1 - Exibindo notificação silenciosa

Já a outra notificação, ela irá exibir uma notificação no smartphone do usuário (Figura 11.2) e também irá exibir a mensagem na tela home da aplicação (Figura 11.3).

Figura 11.2 - Exibindo notificação na tela do smartphone

Figura 11.3 - Exibindo notificação na tela da aplicação