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

No projeto que criaremos, após o usuário suário logar na aplicação mobile, o token do seu smartphone é será salvo em banco e 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. A aplicação

Para receber a mensagem, a aplicação no smartphone 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. 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
4. Possuir uma conta ativa no Google.
5. 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 no qual do Google e usaremos o recurso 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.

Criar projeto Firebase

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

Image RemovedImage Added

Figura 1 .1 - Acessando o console do Firebase

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

Image AddedImage Removed

Figura 1.2 1 - Criando um projeto

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

Image AddedImage Removed

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

Image RemovedImage Added

Figura 1.4 3 - 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. Caso possua mais de uma conta do Google Analytics, essa tela exibirá um campo para vincular com uma dessas contas.

Image Removed

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

Image Added

Figura 1.4 Figura 1.5 - Termos de uso do Google Analytics

Registrar aplicações 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).

Image Removed

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

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

Image Added

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.

Image RemovedImage Added

Figura 2.2 1 - Informando nome do pacote do Android

Após registrar o app, você será redirecionado para a etapa de baixar o arquivo 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, então faça o download  (destaque 1 da Figura figura 2.32) e siga para a próxima etapa (2 da Figura 2.3).

clique no botão Próxima. (No caso da aplicação iOS, o arquivo será o GoogleService-Info.plist).

Image AddedImage Removed

Figura 2.3 2 - Fazendo download 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.

Image Removed

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

, 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).

Image Added

Figura 2.3 - Finalizar configuração

Configurar 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 (destaque 1 da Figura figura 3.1) . Selecione e selecione Usuários e Permissões (2 da Figura 3.1) para ser redirecionado à página de configurações e Configurações do Projeto; clique na aba aba Cloud Messaging (3 da Figura 3.12) para ser redirecionado ao conteúdo que contém os dados a área de liberação da API que usaremos para enviar as notificações push.

Image Removed

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.

Image Removed

Figura 3.2 - Gerando par de chaves

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. 

Image Added

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.

Image Added

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.

Image Added

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

Image Added

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

Image Added

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

Image Added

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.

Image Added

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.

Image Added

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. 

Image Added

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

Image Added

Figura 7 - Criar bloco cliente mobile

Configure a função como na figura abaixo.

Image Added

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

Image Added

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

Image Added

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

Âncora
telaMobile telaMobile

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

Image Added

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

Image Added

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.

Image Added

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

Image Added

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. 

Image Added

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

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.

Image Removed

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

Image Removed

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.

Image Removed

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.

Image Removed

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.

Image Removed

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

Image Removed

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

Image Removed

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.

Image Removed

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

Image Removed

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

Image Removed

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

Image Removed

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

Image Removed

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

Image Removed

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.

Image Removed

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

Image Removed

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.

Image Removed

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

Image Removed

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.

Image Removed

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

Image Removed

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.

Image RemovedFigura 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).

Image RemovedFigura 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).

Image Removed

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 , você terá acesso a tela home que possui o evento configurado no tópico Vincular bloco ao evento da página será executado e o token do smartphone será salvo em banco Tela mobile para ficar aguardando as notificações push.

Teste

Para enviar a notificações push, acessa a aplicação web e logue utilizando o 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". Acesse a página Home no seu projeto web). Na Página Inicial, preencha os campos e clique no botão Enviar Notificação (Figura 12)para disparar a notificação.

Image Removed

Image Added

Figura 12 - Gerando notificação

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

Image Removed

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

Image Removed

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.

Image Added

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.

Image Added

Figura 11.2 - Pop-up com a mensagemFigura 12.2 -  Recebendo notificação com aplicação em segundo plano ou fechada.