Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: utilizando o Push Notification no Cloud Messaging

React Native: utilizando o Push Notification no Cloud Messaging

Entendendo Firebase Cloud Messaging - Apresentação

Olá! Eu sou André Cunha, instrutor de Mobile. Boas-vindas a mais um curso da Formação Firebase com React Native.

Autodescrição: sou um homem de pele parda, cabelo castanho escuro curto e olhos castanho escuro também. Estou usando uma camiseta azul-marinho. Ao fundo, há um parede de madeira com iluminação azul clara.

O que vamos aprender?

Neste curso, continuaremos trabalhando com o SpaceApp, um aplicativo dedicado à postagem de eventos do universo. Nós estamos o utilizando desde o curso sobre Firebase Cloud Storage.

Vamos aprender a usar o Push Notification, utilizando Firebase Cloud Messaging — mais um serviço oferecido pelo Firebase. Além da aplicação mobile que vamos desenvolver, também utilizaremos uma aplicação web para simular o envio de notificação. Ela se comunicará com uma API que construiremos ao longo do curso, para enviar notificações de forma personalizada às pessoas usuárias.

Utilizar notificações em um aplicativo é muito relevante, porque alerta a pessoa usuária sobre eventos novos até mesmo se o aplicativo não estiver aberto. Entre outras opções, é possível notificar atualizações, mensagens recebidas ou conteúdos novos que chegaram na aplicação.

Tudo isso é bom para manter o engajamento do uso da nossa aplicação. Às vezes, dependendo da frequência em que o conteúdo é atualizado, a pessoa usuária pode deixar usar a aplicação. As notificações são importíssimas para manter o uso frequente do aplicativo.

Quais os pré-requisitos?

Para acompanhar este curso, espera-se que você já tenha conhecimento do React Native com Expo e tenha assistido ao curso de Firebase Firestore.

Ficou intessado? Vamos estudar!

Entendendo Firebase Cloud Messaging - Conhecendo o Firebase Cloud Messaging

Atualmente, aplicativos que postam informações são muito importantes. Mas, dependendo da frequência com que essas informações são postadas, uma pessoa pode perder interesse pelo aplicativo e abri-lo menos vezes, o que não é ideal. Queremos que as pessoas abram nosso aplicativo todo dia!

Para manter o engajamento e incentivar as pessoas a acessarem o aplicativo com mais frequência, podemos enviar notificações. Elas podem ser enviadas quando uma postagem nova for feita, para avisar sobre a possibilidade de cadastro em novos eventos ou qualquer outra informação sobre a qual a pessoa goste de ser notificada.

Por exemplo, existem aplicativos que postam informações cotidianas. Se sabemos que uma pessoa deseja receber novidades sobre esportes, podemos enviar notificações somente quando houver novas postagens sobre esse assunto em específico.

Um dos serviços oferecidos pelo Firebase chama-se Cloud Messaging, que permite o envio de mensagens para dispositivos — tanto mensagens de texto quanto notificações. As notificações podem aparecer de formas diversas na tela, incluindo apenas um título, ou um título e uma descrição, ou até mesmo uma foto!

Diferentemente dos demais, esse serviço do Firebase não tem custo, então podemos enviar quantas notificações quisermos. Existem algumas limitações, mas elas não afetarão o andamento do nosso curso. Por exemplo, só podemos enviar 500 notificações simultaneamente.

Usando o serviço do Firebase, temos confiabilidade. Vamos perceber que as mensagens não chegam instantamente, porém podemos tratá-las quando elas chegarem aos dispositivos.

Pra obter mais informações, vamos acessar a página de introdução da documentação do Firebase Cloud Messaging.

Na documentação, usa-se a sigla FCM para fazer referência ao recurso Firebase Cloud Messaging.

Dentre os principais recursos do Cloud Messaging, temos:

Para utilizar esse recurso, precisamos configurar o Firebase na nossa aplicação. Ou seja, será preciso lidar um pouco com código nativo, dado que o Firebase oferece o serviço tanto para Android e iOS.

Entendendo Firebase Cloud Messaging - Configurando o projeto no Firebase

Já entendemos o que são o Cloud Messaging e as notificações do tipo Push. Nosso próximo passo é integrar esses recursos em um projeto com React Native. Porém, antes dessa integração, vamos explorar o projeto que utilizaremos neste curso: o SpaceApp.

Explorando o aplicativo

O SpaceApp é o aplicativo com o qual trabalhamos no curso anterior, em que aprendemos sobre storage para fazer upload e download de imagens. Agora, esse aplicativo tem novas telas, vamos conferi-las.

Ao iniciar o SpaceApp no emulador, já temos uma tela nova — a página de login:

Tela de login do SpaceApp. No plano de fundo, há uma imagem parcial do planeta Terra visto do espaço. No centro da tela, temos o logotipo do SpaceApp, seguido dos campos de e-mail e senha e o botão lilás "Entrar"

Essa tela é muito parecida com outras telas de login que desenvolvemos em cursos anteriores. Para checar o código dela no VS Code, basta acessar "src > telas > Login > index.js". Nessa pasta, também consta o arquivo estilos.js com a estilização da página.

No código da tela de login, temos a função logarNaAplicacao() para efetuar o login, utilizando funções de autenticação com Firebase. Na pasta "src > services", temos o arquivo auth.js de autenticação, que desenvolvemos no curso sobre autenticação com Firebase. Esse é um bom exemplo de como podemos reaproveitar código de outros projetos!

O botão "Entrar" é um ActivityIndicator, uma animação de carregamento quando tentamos realizar o login. No aplicativo, vamos inserir o e-mail e a senha cadastrados no console do Firebase anteriormente:

Ao clicar no botão "Entrar", é possível verificar a animação brevemente onde antes estava escrito "Entrar".

Somos redirecionados para a página principal, onde temos cards sobre fenômenos do universo, dispostos verticalmente em um fundo azul escuro. Na parte superior, temos o logotipo do SpaceApp centralizado. À direita, há um ícone para sair do aplicativo. À esquerda, há um ícone de sino:

Tela principal do SpaceApp, descrita anteriormente na transcrição.

Ao clicar no ícone de sino, somos redirecionados para a tela de notificações. Atualmente, ela está vazia e conta apenas com um fundo azul escuro, o título "Notifications" no topo e o ícone de voltar no canto superior esquerdo.

Nessa tela, exibiremos informações curtas sobre notificações enviadas para esse dispositivos. Elas serão mostradas em formato de card, que é um componente chamado CartaoNotificacao.

Para checar o código desse componente, basta acessar "src > componentes > CartaoNotificacao > index.js" . Esse arquivo é um componente simples, com uma View, uma imagem e alguns textos.

Na pasta "src > telas > Notificacoes", temos os arquivos index.js e estilos.js referentes à tela de notificações. No primeiro, notaremos que temos uma View principal (o fundo azul) e uma ScrollView, que é a área que será possível rolar quando as notificações chegarem.

Configuração para Android

Agora que exploramos o projeto base que utilizaremos, vamos focar em implementar o Push Notification no nosso aplicativo.

Primeiramente, é necessário realizar configurações no console do Firebase. No navegador, vamos abrir o console do Firebase. Assim como fizemos nos cursos anteriores, você precisa ter um projeto criado no Firebase. No caso, criamos um projeto chamado SpaceAppNotificacao e a única edição dele para o do curso anterior é que adicionamos o Authentication e cadastramos um e-mail.

Todos os projetos que fizemos nessa formação, utilizamos o Firebase como um projeto web. Contudo, a parte de notificação em específico precisa lidar com um sistema operacional — Android ou iOS. Ou seja, não conseguiremos usar o projeto web no React Native para enviar notificações.

No menu à esquerda, vamos acessar "Visão geral do projeto". No topo da tela, logo abaixo do nome do nosso projeto, vamos clicar no botão "Adicionar app > Android".

De início, vamos dar um nome ao nosso projeto Android, usando o prefixo "com.". No caso, o chamaremos de "com.spaceapp". Também podemos dar um apelido, mas não é necessário:

Em seguida, clicaremos no botão "Registar app" e aguardar o processo de criação do projeto Android no console. Uma vez finalizado, aparecerá o botão "Fazer o download de google-services.json" para baixarmos nossas credenciais. Vamos clicar nele. Em seguida, clicaremos no botão "Próxima".

Na sequência, temos instruções de configurações na parte do Android nativo, no entanto, nosso projeto Expo ainda não tem uma parte de Android onde podemos adicionar essas credenciais.

Neste curso, utilizaremos um novo conceito chamado expo-dev-client, que permitirá temos as pastas Android e iOS e continuar trabalhando com Expo. Assim, não precisamos usar o React Native CLI` nesse projeto, mas conseguiremos mexer na parte nativa.

Então, por enquanto, podemos abstrair esse trecho de adição das credenciais. Vamos apenas clicar no botão "Próxima" e, depois, em "Continuar no console". Assim, ativamos a parte do Android. A seguir, vamos repetir o processo para o iOS.

Configuração para iOS

De volta à visão geral do projeto, agora vamos clicar em "Adicionar app > iOS", logo abaixo do nome do nosso projeto. Novamente, usaremos o nome "com.spaceapp":

Após clicar no botão "Registrar app", aguardaremos o processo de criação do aplicativo Apple. Ao finalizar, aparecerá o botão "Fazer o download de GoogleService-Info.plist" para baixarmos os serviços e conseguirmos implementar as notificações no iPhone. Vamos clicar nele, depois em "Próxima".

Na sequência, temos as instruções relativas ao iOS. Vamos pressionar "Próxima". Depois, temos instruções sobre a parte nativa, que ainda não temos acesso. Vamos apenas clicar em "Próxima". Por fim, clicaremos em "Continuar no console".

Chaves de configuração

Agora que fizemos o download das duas chaves de configuração, vamos voltar ao nosso código no VS Code e adicioná-las ao projeto. Basta copiar os arquivos google-services.json e GoogleServices-Info.plist baixados e colá-los na raiz do projeto.

Também precisamos adicioná-las ao nosso arquivo app.json. Primeiramente, vamos inserir algumas configurações na parte do iOS:

// ...

"ios": {
    "supportsTablet": true,
    "googleServicesFile": "./GoogleService-Info.plist",
    "bundleIdentifier": "com.spaceapp"
}

// ...

Assim, conseguiremos conectar o serviço do Firebase com o nosso projeto com React Native. Vamos salvar essas alterações. Em seguida, vamos adicionar configurações na parte do Android, nesse mesmo arquivo:

// ...

"android": {
    "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
    },
    "googleServicesFile": "./google-services.json",
    "package": "com.spaceapp"
}

// ...

Vamos salvar as alterações. Agora, conseguimos conectar as nossas credenciais tanto da parte do Android quanto da iOS. A seguir, vamos desenvolver o código para implementar as notificações.

Sobre o curso React Native: utilizando o Push Notification no Cloud Messaging

O curso React Native: utilizando o Push Notification no Cloud Messaging possui 135 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas