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:

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:

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:

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.