Como enviar mensagens de notificação no app com Cloud Messaging e Expo CLI


Olá pessoal! O Expo CLI é um Framework que permite o desenvolvimento de aplicativos Android, IOS e Web utilizando o mesmo código em Javascript ou Typescript, assim como ocorre com o React Native CLI, porém de maneira muito mais facilitada. Com ele não é preciso configurar uma série de arquivos e dependências, uma vez que boa parte do processo é realizado automaticamente. Ele possui uma série de ferramentas e bibliotecas nativas que facilitam muito o desenvolvimento de aplicativos. Um deles é o FCM for Push Notifications, que gostaria de abordar nessa postagem.


O FCM (ou Firebase Cloud Messaging) é um recurso disponível na plataforma da Google que permite enviar mensagens de notificação do tipo Push em aplicativos gratuitamente, permitindo enviar notícias ou alertas a todos os usuários/dispositivos com o aplicativo instalado. Para instalar através do Expo CLI é muito simples e vou mostrar a vocês. Eu utilizei o Manjaro Linux como Sistema Operacional, mas o método se aplica a qualquer outro sistema.


Resumo das atividades
- Criar um aplicativo através do Expo-CLI;
- Adicionar um novo projeto no Firebase;
- Criar uma aplicação Android no Firebase;
- Habilitar o FCM for Push Notifications no projeto do Expo;
- Enviar uma notificação de teste.


Primeiro passo

Para começar, vamos criar um novo projeto no Expo-CLI. Para isso, vamos criar uma pasta para o projeto, abrir o prompt de comandos dentro dela e executar o comando a seguir: 


expo init <nome-do-projeto>



Nesse caso eu criei um projeto com o nome app-teste, escolhi a primeira opção (blank), teclei Enter para confirmar e aguardei o processo concluir.


Segundo passo

Enquanto o projeto no Expo é criado, vamos criar um novo projeto no Firebase. Para isso, acesse este link, efetue o login com a sua conta do Google e clique no botão Adicionar projeto.


Em seguida vamos criar um nome para o projeto. Aqui vou chamar de App Teste:


Na próxima tela ele pergunta se deseja ativar o Google Analytics. Vamos deixar como está e clicar em Continuar:


Em seguida o Firebase solicitará uma conta do Google Analytics. Caso você ainda não possua uma, crie uma conta primeiro antes de continuar:


Após criar o projeto, seremos direcionados para a tela principal (dashboard) do Firebase. Vamos então criar um novo app para Android clicando no botão logo abaixo da mensagem "Comece adicionando o Firebase ao seu aplicativo":


Ao clicar nesse botão, serão solicitadas algumas informações como o nome do pacote e o apelido do app. Nessa etapa vamos definir esses dois campos mencionados e clicar em Registrar app.


Na próxima etapa vamos baixar o arquivo de configuração do projeto. Então clicamos em Fazer download do google-services.json e colocamos ele no diretório raíz do projeto:


Nas próximas etapas desse processo não precisaremos copiar nenhum código, então basta apenas clicar em Próximo, Próximo e finalmente Continuar no console. O assistente retornará à tela principal.


Terceiro passo

Agora que o projeto no Expo foi criado, é hora de abri-lo. Para isso eu utilizarei o Visual Studio Code, mas você pode utilizar qualquer editor de sua preferência. Então vamos abrir o editor de código fonte e abrir o projeto nele. Em seguida, vamos acessar o arquivo app.json:


Dentro desse arquivo adicionaremos a entrada a seguir e salvamos o arquivo:


Em seguida, vamos acessar o terminal dentro do diretório raíz do projeto e executar o comando a seguir:


expo push:android:upload --api-key <your-token-here>

onde <your-token-here> pode ser substituída pela chave do servidor Cloud Messaging ou pela chave API do arquivo google-services.json. Vamos copiar a segunda opção:


Após concluir o processo - que é bem rápido - já podemos testar as notificações. Mas primeiro, no mesmo terminal, vamos construir o aplicativo com o comando a seguir:


expo build:android


Será solicitado o nome do pacote. É importante que o nome do pacote seja o mesmo registrado no Firebase:


Em seguida escolhemos a opção apk:


E sequencialmente escolhemos a opção Generate new keystore e aguardamos a conclusão:


Ao finalizar o processo, vamos deparar com uma tela semelhante a esta:


Basta acessar o link de download gerado e baixar o apk.

Quarto passo

Nesse momento já temos condições de enviar uma notificação de teste. Para isso, vamos instalar o aplicativo gerado no celular ou em uma máquina virtual. Aqui vou utilizar o Genymotion:


Agora vamos voltar à tela principal do Firebase e clicar em Cloud Messaging, localizado mais para baixo no menu à esquerda:


E então clicamos no botão Send your first message:


Seremos direcionados ao assistente de criação. Podemos adicionar um título e uma mensagem para as notificações, além de uma imagem de notificação:



Em Segmentação escolhemos a aplicação Android criada e clicamos em Próxima:


A seguir definimos a programação, isto é, quando as notificações serão "disparadas" no aplicativo. Vou escolher a opção Agora:


No próximo passo podemos definir algumas métricas do Google Analytics. Vamos deixar como está:


Por fim, podemos definir alguns ajustes como o som ao receber as notificações e a duração da campanha. Nesse caso vou deixar o som desabilitado e a duração em uma semana:


Clicamos em RevisarPublicar e pronto! Suas notificações serão propagadas no app!


 


E é isso aí! Este foi apenas um teste envolvendo o envio de mensagens de notificação como mensagens de exibição, porém com o FCM também é possível enviar mensagens do tipo Push de acordo com o comportamento do app. Para mais informações acesse a documentação.


Fonte: Expo.


Comentários

Postagens mais visitadas deste blog

Como corrigir o problema da biometria no Samsung Galaxy A30 e derivados

Como instalar aplicativos incompatíveis no iPhone 4, 5, iPad 3 e similares

Como obter as imagens em destaque da tela de bloqueio do Windows 10

iPhone 6S em 2021: ainda vale a pena?

Como recolocar uma película de Smartphone/Tablet sem deixar resíduos

Como transformar o cartão SD em memória interna

Como fazer dual boot com o Zorin OS 16

Como obter o Packet Tracer gratuitamente

Melhores Apps para Escrita

Instalando o Zorin OS no PC