Adicionando Push Notification com com Firebase em um app Ionic 3


Adicionando Push Notification com com Firebase em um app Ionic 3

Dando continuidade a minha série de artigos sobre Firebase, o primeiro serviço que eu irei demonstrar, será o de Push Notification. Para quem ainda não leu o primeiro artigo dessa série, segue o seu link: Introdução ao Firebase.

Para que você possa ter um melhor entendimento, eu irei implementar esse serviço em um app de notícias, desenvolvido no artigo: Ionic 3: Infinite Scroll, onde demostrei como consumir notícias de uma das api’s do The New York Times.

Clonando o projeto

O primeiro passo será clonar o app. Para isso, digite no seu terminal o comando abaixo:

git clone https://github.com/programadriano/ionic-NYT

Com o projeto clonado, você irá precisar de uma IDE para os próximos passos, eu irei utilizar o Visual Studio Code, mas você pode utilizar uma de sua preferência.

Registrando o APP no Firebase

Agora que você já tem o projeto, o próximo passo será registrar ele no Firebase. Para isso, abra o console do Firebase no link e crie um novo projeto, para esse artigo, eu irei chamar de pushNYT, as outras opções eu irei deixar as default. Você pode ver esse passo na imagem abaixo:

Setup (Firebase)

Com o projeto criado, clique em Add Firebase to your Android app e preencha os campos com os dados do seu projeto.

  • Android package name: nome do pacote do seu projeto, você pode encontrar ele no arquivo config.xml
  • App nickname (optional): Apelido do projeto na console do Firebase
  • Debug signing certificate SHA-1 (optional): Chave da assinatura do seu projeto, quando você publicar o seu projeto na loja do google, você irá precisar gerar esse certificado, mas para esse artigo pode deixar em branco.

Caso você não tenha encontrado o seu arquivo config.xml, você irá precisar adicionar a plataforma Android no seu projeto. Para isso, basta executar o comando ionic cordova platform add androidno seu Terminal.

Agora que o seu projeto está registrado, faça download do arquivo google-services.json e adicione ele na raiz do seu projeto, em seguida execute os comandos abaixo no seu terminal:

cordova plugin add cordova-plugin-fcm --save
npm i @ionic-native/push

Assim que os comandos finalizarem, registre o push nos seus providers:

Providers IONIC

Configurando o APP

Com o seu app registrado, vamos implementar o código necessário para o envio do primeiro push.

Abra o projeto no seu editor de textos, em seguida vá até o arquivo app.component.ts e atualize ele com o código abaixo:

Vamos entender o código a cima:

  • 26: chamando no constructor o método pushsetup().
  • 36: registrando o device no console do Firebase.
  • 38 a 46: aqui estamos dando um subscribe para quando um notificação for enviada o nosso app receber e apresentar ela.

Envio de push

Para enviar o push você precisa ter o ambiente de desenvolvimento configurado para desenvolver app para o Android. Como não é o foco desse artigo essa configuração, segue o link que eu utilizei para configurar o meu ambiente: Building Your First App.

Agora abra novamente o console do Firebase e vá até o link: Notification, em seguida clique em New Message e preencha os campos conforme a imagem abaixo:

Firebase (Push Notification)

Com todos os campos preenchidos, clique em Send Message, irá subir um popup para que você possa verificar se os dados estão preenchidos corretamente, valide essa etapa e clique em Send. Para demonstrar esse passo, eu irei utilizar o Vysor, um puglin do Google Chrome que espelha o nosso device.

Com isso nós finalizamos esse artigo. Caso você tenha interesse em baixar a versão final do código desenvolvido aqui, segue o seu link no GitHub.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…