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.
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
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.
Âncora Requisitos Requisitos
Pré-requisitos
Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem 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:
Projeto do tipo web e mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link Criar projeto.
- Possuir uma conta ativa no Google.
- Possuir uma conta ativa no Google.
- 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.
CriandoCriar 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).
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.
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 ) e clique em Continuar para seguir com o próximo passo (figura 1.2).
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).
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.
. 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 Figura 1.5 - Termos de uso do Google Analytics
Registrando aplicaçãoÂncora registrarAppFirebase registrarAppFirebase
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).
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.
| Informações |
|---|
Será necessário executar essa etapa para a aplicação Android (destaque 2 da figura 1.5) e iOS (destaque 1 da figura 1.5). Os passos são muito parecidos e no final, será obtido os arquivos: Para simplificar, neste tutorial mostraremos como configurar apenas a aplicação Android. |
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.
| Dica |
|---|
| Nota | title | Importante
O nome do pacote Android deve ser o mesmo do ID da aplicação no Cronapp. |
Você pode obter o id da sua aplicação, acesse no menu do sistema do Cronapp: Dispositivos Móveis > Configurações, o ID estará no campo Pacote ID. |
Figura 2.1 Figura 2.2 - 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).
| Informações | ||
|---|---|---|
| ||
O arquivo googles-services.json é o que faz a comunicação com o Firebase. |
clique no botão Próxima. (No caso da aplicação iOS, o arquivo será o GoogleService-Info.plist).
Figura 2.3 2 - Fazendo download 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 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 para salvar o registro da configuração (Figura 2.4) para salvar o registro do app3).
Figura 2.4 - Clicando somente nos botões para finalizar o registro
Acessando o3 - 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 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:
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:
LivroBloco 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).
| Nota | ||
|---|---|---|
| ||
O payload máximo para ambos os tipos de mensagem é de 4 KB, exceto ao enviar mensagens do Console do Firebase, que impõe um limite de 1.024 caracteres. |
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).
| Nota | ||
|---|---|---|
| ||
O tamanho máximo do conteúdo em Dados para ambos os tipos de notificação é de 4 KB. |
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
- 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);
- 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);
- 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);
- 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);
- 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
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.
| Nota |
|---|
| Já está em nosso roadmap e, em breve, o Cronapp suportará as 2 APIs. |
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).
| Informações |
|---|
| Os próximos passos desse tutorial serão apresentados com a opção Modo Avançado desativada. |
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
| Dica |
|---|
Recomendamos recompilar e reabrir o projeto sempre que instalar um plugin. |
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).
| Informações | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
O conteúdo criado neste subtópico está contido no arquivo 1, caso queira pular essa etapa, baixe o arquivo abaixo e faça o upload no diretório Servidor (Localização:
).
Arquivo 1 - Função Servidor NotificarTodosDispositivos |
Acesse o menu de contexto do diretório Servidor (Localização: Bloco de Programação/
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereç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:
- Clique em "..." e selecione a entidade Device.
- Clique em Adicionar para incluir a entidade Device na consulta.
- Na área Campos, clique no botão + Novo Campo.
- 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
- Crie uma variável com o nome "dadosMensagem" e encaixe o bloco Criar objeto Json (categoria Json).
- 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".
- Inclua o bloco de loop Para cada item na lista e encaixe a variável "tokensDispositivos".
- 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.
Âncora funcCliente funcCliente
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.
| Informações | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
O conteúdo criado neste subtópico está contido no arquivo 2, caso queira pular essa etapa, baixe o arquivo abaixo e faça o upload no diretório Mobile (Localização:
).
Arquivo 2 - Função cliente Mobile ObterNotificacaoPush |
Acesse o menu de contexto do diretório Mobile (Localização: Bloco de Programação/
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereç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
- 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,
- 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).
- Encaixe o bloco Exibir Notificação na entrada de comando Sucesso.
- 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).
- 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.
| Informações | ||
|---|---|---|
| ||
| 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. |
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/
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereço: |
). 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:
- Título: Título
- Valor: titulo
- Segundo Entrada de texto:
- Título: Subtítulo
- Valor: subtitulo
- Terceiro Entrada de texto:
- Título: Mensagem
- 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
- Arraste um componente Botão abaixo do último componente Entrada de texto.
- Selecione a aba Eventos no menu de configurações do Botão.
- Clique em "..." do evento Ao clicar para abrir a janela de seleção do evento,
- Na janela, selecione a aba Bloco de Programação.
- 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/
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereço: |
) 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.
| Informações |
|---|
Neste tutorial estamos utilizando uma aplicação Android por ser mais simples. Caso queira testar em um sistema iOS, será necessário realizar uma série de passos exigidos pela Apple, veja mais detalhes nas documentações abaixo:
|
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.
| Nota |
|---|
Caso seja o primeiro aplicativo instalado fora do Google Play, será necessário habilitar a opção "fontes desconhecidas" nas configurações de segurança do Android. |
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
Nesta Página
| Índice |
|---|
Veja também
Nessa Página
toc