Push Notification em Aplicação React Native com Firebase
Olá, neste artigo vou falar brevemente das etapas para colocar o Push Notification do React Native integrado ao Firebase funcionando dentro de uma aplicação que simula um aplicativo no estilo do WhatsApp.
Lembrando que não vou entrar em detalhes sobre configuração inicial do projeto, instalação de bibliotecas ou configuração do ambiente em si; O foco é mostrar os passos para seu aplicativo disparar notificações quando você recebe uma mensagem.
Um dos pontos essenciais a serem feitos é a instalação e configuração do Firebase em seu ambiente de desenvolvimento:
$ npm install -g firebase-tools
$ firebase login
O projeto foi feito em React Native com Redux para gerenciar o estado dos componentes da aplicação.
Basicamente, trata-se de um projeto derivado de outro, cuja proposta inicial não entregava recursos importantes tais como manter o usuário autenticado após o primeiro login, verificação que passei a fazer a partir da criação de um novo componente (Loading.js) que simulava um “splash screen” de carregamento da aplicação, além do recurso que, a meu ver, é um dos mais complexos, mas que deixa a aplicação muito mais completa e com aspecto mais profissional, que seria o uso do recurso nativo de Push Notifications.
Tal tarefa foi possível ser concluída a partir de chamadas a clould functions do Firebase, cuja plataforma, além dessa funcionalidade, contém serviços de database storage, autenticação, mensagens e, é claro, um serviço de notificação próprio.
Resumidamente, Cloud Functions são como triggers em bancos de dados relacionais que executam determinada ação ao criar-se um registro novo (ou atualizar um) em um dos paths do database no Firebase.
Neste caso, o que eu fiz foi criar uma função no Firebase que intercepta e persiste no banco de dados a mensagem que um usuário em seu dispositivo envia para alguém da sua lista de contatos. Tendo ambos os dispositivos um token único que os identifica a partir de seus e-mails, a função envia um payload para o dispositivo de destino que tem aquele token.
O token de cada dispositivo é gerado assim que o usuário se cadastra na aplicação, sendo esse armazenado em banco juntamente com seu nome e e-mail (persistido em base 64 para auxiliar na utilização dos paths que o recebem como parâmetro). De posse do token do destinatário da mensagem, é possível a função enviar a mensagem para o destinatário correto. O payload, isto é, o conteúdo da mensagem possui os atributos title e body, contendo, respectivamente, o título da mensagem e o corpo da mesma, sendo este último o conteúdo da mensagem trocada entre as duas pontas.
Abaixo alguns trechos de códigos que alterei para usar a nova funcionalidade de push notification:
Biblioteca utilizada: react-native-firebase na versão 5.2.0
Trecho de código que inclui na tela inicial do projeto (Loading.js)
Arquivo index.js dentro da pasta functions onde é feito o deploy da função para o Firebase:
Dentro do arquivo AutenticacaoActions.js do Redux Thunk, foi alterada a função de cadastro de usuário para também já salvar o token do dispositivo no path do usuário:
Estrutura do Realtime Database criado no Firebase:
Log da execução da função na aba de Registros do Firebase:
Painel “Funções” no Console do Firebase onde consta a função criada na aplicação para o push das mensagens:
Até o próximo artigo.
