Neste tutorial você irá aprender como disparar notificação utilizando o Push Notification, uma mensagem enviada por uma aplicação ou servidor da aplicação e exibida na área de notificações do smartphone.
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çãoApós o usuário logar na aplicação mobile, o token do seu smartphone é salvo em banco e será usado para direcionar as notificações push. Na aplicação web, após preencher o conteúdo da mensagem, os dados serão enviados para o Firebase junto com o token do smartphone que receberá a notificação. A aplicação não precisa estar aberta para receber a notificação, podendo ocorrer com o aplicativo em segundo plano.
| Âncora | ||||
|---|---|---|---|---|
|
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:
- 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.
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
Caso possua mais de uma conta do Google Analytics, essa tela exibirá um campo para vincular com uma dessas contas.
Figura 1.5 - Termos de uso do Google Analytics
Registrando 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).
| Nota | ||
|---|---|---|
| ||
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.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).
| Informações | ||
|---|---|---|
| ||
O arquivo googles-services.json é o que faz a comunicação com o Firebase. |
Figura 2.3 - Fazendo download do arquivo JSON
Nas Não será necessário alterar nada nas etapas 3 e 4 nada serão configurados: na . 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 que usaremos para enviar as notificações push.
Figura 3.1 - Acessando o Cloud Messaging
Gerando par de chaves
Iremos criar um par de chaves que funcionam como uma inscrição de que sua aplicação poderá possa utilizar as notificações notificações push nos serviços de push compatíveis para compatíveis com a WEB. Então, vá até a guia 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
| Âncora | ||||
|---|---|---|---|---|
|
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.
| Âncora | ||||
|---|---|---|---|---|
|
Criando projeto
Ao abrir e logar na IDE Cronapp, clique em Novo (seta da Figura 4.1), selecione selecione o tipo de projeto Mobile e Web (1 da Figura 4.1), informe um nome para o projeto (2 da Figura 4.1) e clique em Finalizar (Figura 4.1).
Figura 4.1 - Criando projeto Cronapp
Após o carregamento, será aberta uma janela informando para selecionar o modelo do projeto, então selecione o modelo Mobile Low-Code Project e clique em em avançar.
Na próxima janela de configuração, tem 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.
| Aviso |
|---|
Caso o nome do pacote registrado no Firebase esteja diferente do Id da Aplicação, não irá funcionar. É possível alterar o valor do Id da aplicação posteriormente no menu do sistema do Cronapp: Dispositivos Móveis > Configurações. O ID estará no campo Pacote ID. |
Figura 4.2 - Configurando 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, Coloque o seu projeto no Modo Avançado e então selecione a pasta pasta www (1 da Endereço: src/main/mobileapp/www) (1 da Figura 5), clique com o botão direito para abrir o menu de contexto. clique em , acesse Novo > Fazer upload (destaques 2 e 3 da Figura 5) para abrir a janela de envio de de envio de arquivo. Clique em 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) e , clique em Okem Ok e, caso queira, você já pode desativar o Modo Avançado.
Figura 5 - Upload do arquivo google-services.json
Plugin Push Notification
Para adicionar o plugin do Push Notification do Firebase ao projeto, acesse no menu do sistema Plugin > Adicionar novo plugin (destaques 1 e 2 da Figura 6) e ao abrir a janela, pesquise por Firebase no campo de busca (3 da Figura 6) e selecione o plugin Google Firebase Api Push Notification e avance até finalizar.
Figura 6 - Instalação do plugin do Push Notification
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
| Dica |
|---|
É recomendável recompilar e reabrir o projeto sempre que instalar um plugin. |
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
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereço: |
), renomeie as propriedades Título de cada componente Entrar de texto como "Título", "Subtítulo" e "Mensagem" (1 da figura 7), após renomear, altere o campo Valor novamente dos 3 componentes de acordo com o nome inserido no título (2 da figura 7).
Figura 7 - Inserindo componentes de entrada de texto
Blocos de programação
Agora, será necessário criar blocos do tipo Servidor e Web para que eles sejam chamados por um evento e a notificação será enviada para o Firebase que encaminhará em seguida para todos os dispositivos. Já na aplicação mobile, um bloco ficará aguardando (listen) a notificação para exibi-la.
Bloco servidor para enviar notificação
Nesse passo vamos criar um bloco servidor para enviar a notificação para os usuários do aplicativo. Então clique em Ir para blocos do tipo servidor (destaque da Figura 8.1), e siga os passos da figura 8.1, selecione Servidor (1 da Figura 8.1) e clique com o botão direito para abrir o menu de contexto. Clique em Novo (2 da Figura 8.1) > Bloco de programação (3 da Figura 8.1).
Figura 8.1 - Criando bloco servidor
Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo, "NotificarTodosDispositivos" em Nome da Função e clique em Finalizar.
Com o bloco do tipo Servidor criado, no bloco da para, clique na engrenagem de configuração e arraste 3 entradas, e as renomeie com "titulo", "subtitulo" e "mensagem" como mostrado na figura 8.2.
| Âncora | ||||
|---|---|---|---|---|
|
Figura 8.2 - Configurando entradas
Em seguida, crie uma variável para receber os tokens dos dispositivos, no nosso exemplo criamos a "tokensDispositivos", arraste para ela o bloco da categoria de Banco de dados chamado Abrir consulta (Figura 8.3).
Figura 8.3 - Arrastando bloco de consulta Abrir consulta
Após o bloco Abrir consulta ser arrastado, clique na sua engrenagem para configurarmos, siga os passos a seguir para configurar o bloco Abrir consulta corretamente (Figura 8.4).
Figura 8.4 - Configurando o bloco Abrir consulta
- Clique em "..." e selecione a entidade Device;
- Clique em Adicionar para selecionar a entidade Device;
- Clique em + Novo Campo;
- Selecione "Obter" e "d.token" e clique em OK.
Crie logo abaixo uma variável chamada "dados" e siga os passos da figura (Figura 8.5).
Figura 8.5 - Definindo valor no Json
- Arraste o bloco Criar objeto Json.
- Insira o bloco Definir valor no Json:
- Json: arraste a variável "dados";
- Caminho a percorrer: defina como "mensagem";
- Valor a ser definido no objeto: coloque a variável "mensagem" que conterá a mensagem a ser notificada.
Dando continuidade na função, siga os passos da figura abaixo (Figura 8.6).
Figura 8.6 - Configurando envio da notificação push
- 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";
- 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.
| Nota | ||
|---|---|---|
| ||
O payload máximo para da mensagem é de 4 KB, exceto ao enviar mensagens do Console do Firebase, que impõe um limite de 1.024 caracteres. |
Configurando bloco Cliente
Agora iremos configurar os blocos Cliente que irá receber o título, subtítulo e mensagem da notificação, que será enviado para o bloco Servidor. Nesse passo, clique em Ir para blocos do tipo cliente (destaque da Figura 8.7) e siga os passos da figura 8.7: clique com o botão direito para abrir o menu de contexto, clique em Novo (2 da Figura 8.7) > Bloco de programação (3 da Figura 8.7).
Figura 8.7 - Criando bloco cliente
Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo, "EnviarNotificacaoGeral" em Nome da Função. e clique em Finalizar.
Após ser criado, associe o bloco de programação à view Home (Localização: Formulários/Web/Autenticado/home
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereço: |
) acessando as Propriedades do bloco de programação e alterando o campo Formulário de Referência.
Em seguida, siga os passos da figura 8.8.
Figura 8.8 - Bloco Cliente
- Arraste o bloco Chamar Bloco, clique na engrenagem de configuração e selecione o bloco servidor "NotificarTodosDispositivos" que criamos anteriormente e clique em Selecionar, pois os dados obtidos aqui, serão enviados à ele. Em seguida configure seus parâmetros:
- titulo: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar o título, no nosso exemplo ficou "vars.titulo";
- subtitulo: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar o subtítulo, no nosso exemplo ficou "vars.subtitulo";
- mensagem: Arraste o bloco Obter valor do campo e no parâmetro Campo selecione o componente Entrada de texto que será responsável por passar a mensagem, no nosso exemplo ficou "vars.mensagem";
Por fim, salve o bloco cliente web.
Bloco mobile para obter a notificação
A última etapa é criar um bloco mobile para obter a notificação push que foi disparado pelo bloco servidor e transmitida pelo Firebase. Nesse passo, clique em Ir para blocos do tipo mobile (destaque da Figura 9.1) e siga os passos da figura 9.1: clique com o botão direito para abrir o menu de contexto, clique em Novo (2 da Figura 9.1) > Bloco de programação (3 da Figura 9.1).
Figura 9.1 - Criando bloco mobile
Na janela que abrir, informe "Notificacao" no campo Nome do Arquivo, "ObterNotificacaoPush" em Nome da Função e clique em Finalizar.
Quando o bloco do tipo Mobile for criado, siga os passos da figura 9.2.
Figura 9.2 - Bloco Mobile
- Arraste para função o bloco Obter Dados de notificações push:
- Retorno: altere o nome da variável sucesso para "notificacao".
- 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".
- 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.
| Âncora | ||||
|---|---|---|---|---|
|
Vincular bloco ao evento da página
Nessa etapa, iremos vincular o bloco mobile criado no evento Ao iniciar da tela home no aplicativo mobile. Isso é necessário para que a função fique "ouvindo" a requisição da notificação push enviado pelo Firebase. Então, clique no ícone Ir para a pasta mobile (1 da Figura 9.3), abra a tela home (2 da Figura 9.3), clique com o botão direito sobre a área de edição para abrir o menu de contexto e clique em Eventos de página (3 da Figura 9.3).
Figura 9.3 - Abrindo tela home
No menu lateral, clique em "..." no evento Ao iniciar (1 da Figura 9.4) e após abrir a janela de seleção de eventos, clique no ícone "..." (2 da Figura 9.4) da aba Bloco de Programação para abrir a janela de seleção de bloco, por fim, selecione a função mobile que criamos anteriormente (3 da Figura 9.4) e salve tudo.
Figura 9.4 - Selecionando bloco de enviar o token ao evento
Botão para enviar notificação
Agora, vá para a página Home ( Localização: Formulários/Web/Autenticado/
| Tooltip | ||||
|---|---|---|---|---|
| ||||
Endereço: src/main/webapp/views/logged/home.view.html |
) insira um componente botão na view e siga os passos da figura 10. Altere o evento ao clicar do botão de notificação para a função "EnviarNotificacaoGeral" do bloco cliente web "Notificacao".
Figura 10 - Bloco atribuindo botão ao bloco Cliente
- Selecione o componente botão e vá para a aba Eventos;
- No campo Ao Clicar clique em "..." ;
- Clique em "..." da página do evento Ao Clicar;
- Selecione a função "EnviarNotificacaoGeral" do bloco cliente web "Notificacao".
Compilar aplicação mobile
Precisamos configurar o projeto para compilarmos e instalarmos no smartphone, siga os passos das figuras abaixo para obter o .apk para efetuar o teste da notificação.
Figura 11 - Obtendo endereço do projeto
- Após salvar tudo, rode o projeto clicando em Executar, no menu do sistema, e em seguida em Debug;
- Clique em Navegador [web];
- Copie o endereço da barra de navegação.
Agora, iremos inserir o link nas configurações dos dispositivos móveis, como mostrado abaixo (Figura11.1).
Figura 11.1 - Inserindo Url
- No menu superior, clique em Dispositivos Móveis;
- Clique em Configurações;
- Insira a Url obtida no campo URL do Servidor (produção) e clique em Salvar;
Com a configuração correta, agora podemos compilar e efetuar o teste da aplicação no seu smartphone (Figura11.2).
Figura 11.2 - Compilando APK
- Acesso novamente no menu Dispositivos Móveis;
- Clique em Compilar e selecione Android;
- Em Perfil selecione Debug, marque a opção APK e clique em OK;
- Clique em Baixar para obter o
.zipcontendo seu projeto em.apk.
Após baixar, é necessário instalar o aplicativo em seu Smartphone Android, abrir e logar (utilize usuário "admin" e senha "admin") na aplicação para acessar a tela home. Somente após acessar a tela home que o evento configurado no tópico Vincular bloco ao evento da página será executado e o token do smartphone será salvo em banco.
| 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. |
Teste
Para enviar a notificações push, acessa a aplicação web e logue utilizando o usuário "admin" e senha "admin". Acesse a página Home no seu projeto web, preencha os campos e clique no botão Enviar Notificação (Figura 12).
Figura 12 - Gerando notificação
Após a notificação ser gerada, ela aparece no dispositivo como no exemplo abaixo:
Figura 12.1 - Recebendo notificação com aplicação em uso.
Figura 12.2 - Recebendo notificação com aplicação em segundo plano ou fechada.
Nesta Página
| Índice |
|---|
Veja também
Nessa Página
toc