Push notifications no Android com Ionic 5 e Firebase
Fala Dev!
Hoje resolvi trazer um artigo que pode ajudar muita gente que trabalha desenvolvendo aplicativos e sites e deseja utilizar push notification em seu projeto.
O que é push notification?
Push notification é uma forma diferente, interessante e eficaz de se comunicar com seus clientes.
Este recurso permite você se comunicar com os usuários que acessam seu site ou que tenha instalado algum aplicativo, seja ele android ou ios.
Como funciona o push notification?
Basicamente seu funcionamento é bem simples, quando um site é acessado ou aplicativo android e ios é aberto, é executado um código que solicita ao push notification firebase que aquele usuário quer ser registrado para receber notificações.
É gerado um TOKEN (uma string enorme criptografada) que pode ser armazenada em seu banco de dados para que o dono do site ou app utilize para enviar mensagens para aquele usuário.
Push notification é free
Bom o Firebase permite que utilizamos o Push Notification gratuitamente e irei mostrar como utilizamos ele neste artigo.
Onde é possível utilizar o Push Notifications
Como mencionei acima podemos utilizar em qualquer aplicação web, independente de tecnologia e também utilizarmos em aplicações mobiles como android e ios.
Implementando Push Notification no Android com Ionic Framework 5
Bom agora chega de conversa e vamos por a mão na massa!
Passo 1 – Montando o ambiente
Primeiro passo é ter o ambiente do Ionic montado, para isso instale o Node.JS. Logo em seguida abra o prompt de comando e vamos instalar o Ionic Framework em sua máquina.
|
1 |
npm i -g ionic cordova |
Bom, neste momento já temos o Ionic instalado e vamos para o próximo passo.
Passo 2 – Criando nosso projeto
Para criar nosso projeto é bem simples, no seu prompt de comando acesse um diretório onde ficará seu projeto,
|
1 |
cd D:\Videos\push |
E agora iremos criar nosso projeto Ionic 5, para isso execute o comando
|
1 |
ionic start MeuApp |
O Ionic-Cli irá perguntar se deseja usar Angular ou React, selecione Angular.
Logo em seguida ele vai perguntar o template, em nosso caso escolhemos o template blank.
Ionic também irá perguntar se deseja usar o Capacitor, eu sempre marco sim, porque na medida que o projeto cresce eu sempre acabo usando.
Passo 3 – Configurando nosso projeto
Chegou o grande momento de iniciarmos as configurações do push notification no android.
Para isso será necessário instalarmos a plataforma android, execute o seguinte comando.
|
1 |
ionic cordova platform add android |
Será gerada uma nova pasta no seu projeto chamada platforms conforme mostrado abaixo:
Agora abra seu emulador ou conecte seu device e configure para que possamos rodar o aplicativo e ver se está tudo funcionando normalmente.
Em nosso exemplo eu irei utilizar um emulador android.
Se você não tem um emulador abra o Android Studio e crie um acessando o botão Configure > AVD Manager e selecione o emulador que desejar, caso ainda não exista crie o de sua preferencia.
Instalando o plugin utilizado para realizar o Push Notification
Agora iremos adicionar o plugin responsável por gerenciar as notificações, com os seguintes comandos:
|
1 |
ionic cordova plugin add phonegap-plugin-push |
O comando acima adiciona o plugin no arquivo package.json
Agora iremos mandar baixar os arquivos necessários na pasta node_modules para trabalhar.
|
1 |
npm i @ionic-native/push |
Agora com o plugin instalado basta configurar o projeto.
Agora abra o arquivo app.component.ts que fica em D:\Videos\push\MeuApp\src\app, vamos adicionar o código necessário para seu App se registrar no Firebase.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import { Component } from '@angular/core'; import { Platform } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { Push, PushOptions, PushObject } from '@ionic-native/push/ngx' @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) export class AppComponent { constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private push: Push ) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); this.initializeFirebase(); }); } private initializeFirebase() { const options: PushOptions = { android: { senderID: 'Aqui o codigo do remetente' } } const pushObject: PushObject = this.push.init(options) pushObject.on('registration').subscribe(res => console.log(` ${res.registrationId}`)) pushObject.on('notification').subscribe(res => console.log(`Já chegou o disco voador: ${res.message}`)) } } |
Perceba que adicionamos uma função que ao iniciar o projeto ele irá se registrar no firebase, perceba que deixei o senderId vazio, lá você precisa colocar o código do remetente. Esse código você terá ao criar o projeto na plataforma do Firebase.
Não se esqueça de adicionar o Push em seu provider do arquivo app.module.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { Push } from '@ionic-native/push/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Push ], bootstrap: [AppComponent] }) export class AppModule { } |
Agora vamos nos registrar no Firebase, acesso o site https://console.firebase.google.com/
Se ainda não for cadastrado, se cadastre e se autentique que verá uma tela semelhante a está.
Crie seu projeto e escolha android.
Adicione o nome do seu projeto no firebase
O nome do seu projeto fica no arquivo config.xml como podemos ver abaixo:
Agora acesse as configurações de seu projeto
Após acessar as configurações do projeto acesse o menu Cloud Messaging, logo abaixo você terá acesso ao código do remetente.
Copie seu código do remetente e adicione na função initializeFirebase do seu app.component.ts
Após o registro, estará disponível o download do arquivo google-services,json que deverá ser salvo dentro do seu projeto na pasta.
Este arquivo contém informações do seu projeto firebase.
Bom, agora está tudo pronto, basta apenas atualizarmos o nosso emulador ou device com a nova versão do fonte.
Para isso execute os comandos abaixo:
|
1 |
ionic cordova prepare android |
O comando acima atualiza os arquivos alterador na pasta platforms/android
Agora vamos rodar nosso app.
|
1 |
ionic cordova run android |
Seu app irá rodar no emulador ou no device.
Abra seu Navegador Chrome na seguinte url chrome://inspect/#devices, ele irá mostrar os devices que estão conectados em seu computador, em nosso caso usamos o emulador. Ao clicar em Inspect você verá seu app dentro das ferramentas de desenvolvedor do Chrome e vai perceber que no console temos o código do seu aparelho que foi registrado no Firebase.
É interessante salvar esse código, pois você poderá mandar mensagem para um único usuário se for necessário.
Vamos enviar nossa primeira mensagem
Acesse o menu do firebase e clique em Cloud Messaging
Agora envie sua primeira mensagem, lembrando que você pode até mesmo agendar um horário para notificar seus clientes.
Em meu caso eu enviei 2 mensagens.
Mesmo com o App fechado sua notificação vai chegar!
Veja na prática como implementar push notifications no android
Bom espero que tenham gostado do conteúdo, não se esqueça de participar de nosso grupo de estudos e se cadastrar para receber novidades do site e receber cupons de cursos gratuitos.
Participe de nossos Grupos de Estudo
Receber novidades do site e receber cupons de desconto e cursos gratuitos
Vejo vocês no próximo artigo!
About author
You might also like
Aprenda criar componentes no Ionic 4
Share this on WhatsAppFala galera!Hoje irei compartilhar com vocês uma dica muito útil que vai permitir que você evite de ficar replicando códigos no Ionic. Imagine um app que tenha
Como fazer meu aplicativo Ionic falar?
Share this on WhatsAppHoje criei um post bem interessante onde ensino a fazer seu celular falar com o usuário, isso mesmo, seu celular vai falar palavras ou frases que você
Flutter – Conhecendo o SDK mobile do Google
Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova
0 Comments
No Comments Yet!
You can be first to comment this post!