março 9, 2020 Comments 2 Paulo Rogério 1409 Views

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.

npm i -g ionic cordova

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,

cd D:\Videos\push

1	cd D:\Videos\push

E agora iremos criar nosso projeto Ionic 5, para isso execute o comando

ionic start MeuApp

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.

ionic cordova platform add android

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:

ionic cordova plugin add phonegap-plugin-push

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.

npm i @ionic-native/push

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.

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}`))
  }
}

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.

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 { }

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:

ionic cordova prepare android

1	ionic cordova prepare android

O comando acima atualiza os arquivos alterador na pasta platforms/android

Agora vamos rodar nosso app.

ionic cordova run android

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.

Como podemos ver na imagem, este é seu código 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!

Share this on WhatsApp

Previous COMO fazer CRUD em C# com LiteDB (Embedded NoSQL)

Next Como rodar aplicativo android no celular e debugar pelo browser do PC

Tags android Ionic 5 push notifications

Category Mobile

About author

Paulo Rogério 205 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

2 Comments

BigPhill
junho 02, 10:04 Reply

Bom dia Paulo! Muito legal o seu site. Tem muitas dicas que estão ajudando muitíssimo. Você sabe se tem um jeito de gerar os pushs utilizando firebase mas para app web? Vi um tutorial seu sobre a classe notifications no youtube e cheguei ao seu site por ele. Desde já agradeço! Um grande abraço!
- Paulo Rogério
  junho 11, 12:38 Reply
  
  Tem sim amigo, mas tem que dar uma olhada na documentação do firebase. Não tenho exemplo pronto para te mandar.

Push notifications no Android com Ionic 5 e Firebase

O que é push notification?

Como funciona o push notification?

Push notification é free

Onde é possível utilizar o Push Notifications

Implementando Push Notification no Android com Ionic Framework 5

Passo 1 – Montando o ambiente

Passo 2 – Criando nosso projeto

Passo 3 – Configurando nosso projeto

Instalando o plugin utilizado para realizar o Push Notification

Vamos enviar nossa primeira mensagem

Veja na prática como implementar push notifications no android

About author

You might also like

[IONIC 3] – Selecionar items com ion-Slide e ion-Chip

Live 04 – Ionic Framework 5 + Capacitor + Web + Desktop e Mobile

Curso Grátis Ionic – Estrutura de Pastas e Arquivos do Projeto

2 Comments

BigPhill

Paulo Rogério

Leave a Reply

Clique aqui para cancelar a resposta.

Buscar no site

FIQUE ATUALIZADO

GRUPOS VIPS

Siga-nos

Cursos

Desenvolvedor PL/SR front-end React

Desenvolvedor(a) ASP.NET Senior

Desenvolvedor Full Stack Sênior

Tech Lead

Arquiteto de Software (.Net)