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 Revisar, Publicar 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
Postar um comentário