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 como default. Você pode ver esse passo na imagem abaixo:
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 android no 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 <a href="http://twitter.com/ionic">@ionic</a>-native/push
Assim que os comandos finalizarem, registre o push nos seus providers:
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:
import { options } from "sw-toolbox"; import { Component } from "@angular/core"; import { Platform, AlertController } from "ionic-angular"; import { StatusBar } from "@ionic-native/status-bar"; import { SplashScreen } from "@ionic-native/splash-screen"; import { Push, PushObject, PushOptions } from "@ionic-native/push"; import { HomePage } from "../pages/home/home"; @Component({ templateUrl: "app.html" }) export class MyApp { rootPage: any = HomePage; constructor( platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public push: Push, public alertCtrl: AlertController ) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); this.pushsetup(); }); } pushsetup() { const options: PushOptions = {}; const pushObject: PushObject = this.push.init(options); pushObject.on("registration").subscribe((registration: any) => {}); pushObject.on("notification").subscribe((notification: any) => { if (notification.additionalData.foreground) { let youralert = this.alertCtrl.create({ title: notification.label, message: notification.message }); youralert.present(); } }); } }
Vamos entender o código acima:
- 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 uma notificação for enviada, nosso app receba e apresente 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:
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.