Flutter: Push Notifications com Firebase Cloud Messaging

Introdução ao Firebase Cloud Messaging - Apresentação

Leonardo Marinho: Bom, pessoal, tudo bem? Eu sou Leonardo Marinho, sou instrutor Flutter da Alura. Esse que está aparecendo aqui, bonito, é o Kako, ele também é instrutor Flutter na Alura. Nesse curso basicamente vamos trabalhar com push notifications, ou seja, notificações nos aplicativos Flutter.

Nesse curso vamos ver muita coisa bacana, vamos aprender vários conceitos com relação aos eventos de push, como disparamos o push, como monitoramos a forma como o usuário recebeu, abriu, foi exibida a coisa para ele. Vai ser muito bacana. Então não vou ficar falando, vou mostrar na prática, vamos mostrar na prática o que vamos fazer de fato no curso. Kako, mostra aí na prática para nós.

Kako: Perfeito. Vai ser mais ou menos essa a nossa dinâmica, ele vai nos explicar e eu vou mostrar para vocês. Eu vou baixar aqui uma notificação, o nosso celular vai receber uma notificação aqui - já viu no nosso emulador? Apareceu uma imagem e você recebeu uma notificação no seu telefone.

"Mega promoção: Dev-MeetUPS está dando 50% de desconto, mas só agora". Se você clicar, ele abre a aplicação para você.

Leonardo Marinho: E tem o cupom de desconto. Essa modal de mensagem, o texto dela vem completamente daquela notificação de push, ela é uma modal genérica, esse texto não está dentro do aplicativo. Então nós já conseguimos nos comunicar com a aplicação mostrando dados, personalizando de uma maneira bem bacana.

Esse é o primeiro ponto. Só para contextualizar, vamos trabalhar com uma aplicação chamada Dev Meetups, que basicamente é uma aplicação de eventos de tecnologia, nós temos a parte de API, que é o servidor, e temos a parte de aplicativo móvel, e elas se comunicam.

Kako: Perfeito. Então nós vamos brincar com o servidor próprio que vocês vão receber, vocês vão brincar aqui, ele tem evento, onde você pode criar os eventos, eles vão aparecer na sua aplicação.

Tem o Flutter Meetups, tem as mensagens que você pode mandar diretamente para os seus usuários, posso vir aqui e mandar uma notificação agora, se eu quiser.

Tem os dispositivos disponíveis aqui, dos nossos Dev Meetups, que estão conectados com esse servidor. E não só isso, pode contar, Léo conta para eles.

Leonardo Marinho: Também abordamos uma parte super legal do Flutter, que é o Flutter web. Como mandamos notificações push para a web? Nós vamos trabalhar com isso também no curso.

Kako: Perfeito.

Leonardo Marinho: Então, galera, é isso. Nós esperamos vocês aqui conosco. Esse curso foi pensado com muito carinho, foi trabalhado com muito carinho, detalhado cada pequena coisa de notificações, para você sair daqui completamente preparado ou preparada para poder desenvolver isso em larga escala.

Kako: Ótimo, eu estou muito empolgado para esse curso.

Leonardo Marinho: Eu também estou. Esse formato de curso, vale lembrar, é o formato de curso em dupla, então eu e o Kako, nós temos um dinamismo em todas as aulas, nós vamos te acompanhar ao longo de todo o curso.

Kako: Fechou então. Vejo vocês na próxima aula.

Leonardo Marinho: Até lá. Tchau, tchau.

Introdução ao Firebase Cloud Messaging - Inicializando a aplicação web

Leonardo Marinho: Fala, pessoal. Hoje eu trouxe o Kako para estudarmos uma coisa super legal: como nós vamos começar a falar push notifications e por onde o curso será guiado. A primeira coisa que precisamos ver aqui é parte do servidor das notificações, que vai gerenciar toda a notificação para podermos trabalhar no fluxo de mandar a notificação para o aplicativo.

Também cadastrar essas notificações e se comunicar com o Firebase Cloud Messaging, mas uma série de coisas legais que vamos usar ao longo do curso. Para isso, a primeira coisa é baixar a aplicação.

No GitHub da Alura tem o "alura-cursos/dev-meetups-api". O que é isso exatamente? Nós consumimos dados de um aplicativo de meetup de programação, ou seja, eventos, palestras de programação. Esse servidor tem uma API específica para conseguirmos cadastrar os eventos, salvar tokens que precisamos para mandar notificações de push e uma série de coisas legais que vamos ver ao longo do curso.

Então a primeira coisa é baixar esse servidor para a sua máquina. Kako, mostra para a galera.

Kako: Então, galera, seguinte, estamos aqui no GitHub da Alura e tem o "dev-meetups-api", nós vamos passar esse link para vocês mais tarde. Você, aqui no GitHub, vai ter todos os dados que você precisa e, aqui embaixo, tem um tópico chamado "Como baixar".

Basta clicar nesse link, que você vai baixar um arquivo ZIP. Abra o arquivo ZIP, deszip ele - vocês já estão cientes de como funciona isso, não é? Uma vez que você baixou o nosso API runnable, nós abrimos ele na pasta.

Como fazemos? Se você quer saber como executar, nunca mexeu com um arquivo JAR, um arquivo Java, tem todo um tutorial aqui no GitHub, mas vamos fazer mais rápido para vocês, que vocês já estão cientes de como funciona. Então aqui, vou abrir a nossa pasta do runnable, e eu vou escrever na linha de endereço "cmd" para abrir o command prompt já direto na nossa pasta.

O que eu faço? Eu já venho aqui e escrevo java -jar server.jar. Dou um "Enter" e ele vai começar a rodar o nosso servidor, vai começar a ligar cada um dos parâmetros, já está tudo configurado para o Firebase mais tarde. Abriu, ligou, está falando aqui que o nosso tomcat está aberto na porta 8080.

Beleza, vamos dar uma olhada lá, como é que funciona? Vou abrir a nossa nova guia no navegador e abrir "localhost". Se quiser comentar alguma coisa, Léo, vai lá.

Leonardo Marinho: Se você reparar bem, tomcat é Java, a aplicação obviamente está rodando em cima do Java usando um framework chamado Spring Boot, que, só a dado de curiosidade, não vai interferir em nada aqui no nosso curso.

Kako: Então eu vou abrir o "localhost" e vocês têm agora a visão do nosso Dev Meetups, essa organização dos eventos.

Leonardo Marinho: Temos três partes na tela. A primeira é eventos, onde vamos efetivamente cadastrar eventos e gerenciar os eventos.

Esses dados vão ficar em um banco de dados local, que está na máquina, vai ficar na pasta do Dev Meetups, o arquivo vai gerar a pasta, a databases, então esses dados vão ficar locais, salvos nesse banco de dados. Temos também uma parte que é de mensagens.

Esse mensagens é onde nós vamos configurar a integração com o Firebase Cloud Messaging para podermos enviar mensagens de push para os dispositivos conectados. E, por último, mas não menos importante, tem dispositivos.

Que quando o Firebase Cloud Messaging estiver configurado nas nossas aplicações Flutter, nas nossa aplicação Flutter, o Flutter vai mandar para essa aplicação desktop o token de conexão com o Firebase Cloud Messaging, que é para conseguirmos mandar as notificações diretamente para os dispositivos móveis. Então basicamente a aplicação web é isso.

Kako: Perfeito. Agora vocês já entendem como funciona a aplicação web e tal, como vamos fazer. Então, na próxima aula, vamos aprender o que? A conectar o nosso aplicativo em Flutter com esse servidor que nós abrimos, para pegar os dados.

Introdução ao Firebase Cloud Messaging - Configurando o app Android

Leonardo Marinho: Continuando então com a nossa série, estudando a parte de push notification, no último vídeo, configuramos o servidor web. Agora temos a aplicação local na nossa máquina, rodando com o banco de dados e dando todas as opções para podermos cadastrar um novo Meetup.

Mas não tem aplicativo para recebermos notificação. Agora é a hora de trabalharmos em cima desse aplicativo para recebermos as notificações. Como vamos fazer isso? O Kako vai mostrar como podemos baixar esse aplicativo e rodar no emulador.

Daí para frente vamos começar a trabalhar para poder comunicar esse aplicativo com a aplicação web do Dev Meetup para podermos enviar dado, receber dado e começar a integração, que daqui a pouco você verá que vai virar uma notificação bem legal. Então Kako, mostra para galera como podemos baixar e configurar o aplicativo.

Kako: É o seguinte: vocês vão receber o link, na próxima atividade, do GitHub. Vocês vão receber já com a aplicação para vocês baixarem, mas se vocês quiserem acessar o GitHub para dar uma lida, nós temos tudo aqui, o nosso read me de como funciona o projeto, o que vocês precisam saber.

Uma vez que você baixou o seu projeto, você vai abrir ele no seu Android Studio, IntelliJ, VS Code, o que você estiver usando, e vamos começar a fazer algumas alterações aqui. Se baixamos o projeto, ele está com algumas configurações que foi o Dev que fez, o Dev não tem tudo o que o nosso computador tem. Então vamos lá, vamos dar uma olhada aqui.

Baixei o projeto, abri no Android Studio aqui já para nós. Dei um play na nossa aplicação, no nosso emulador aqui.

O nosso emulador já deu um erro aqui, mas esses erros são fáceis de consertar. A primeira coisa que temos que pensar é o seguinte: aqui tem um HTTP com o link do servidor que abriu.

Só que esse HTTP aqui é do servidor local, lá no computador do Dev. No caso, agora temos que botar o meu IP de servidor, eu vou alterar aqui para 'http://192.168.0.60:8080/api'. Só precisa mudar os números, não precisa mudar a API, não precisa mudar o events, nem nada.

Leonardo Marinho: Para saber qual é o seu IP, você pode abrir o CMD e digitar ipconfig se você estiver no Windows, se for no terminal ou alguma variação disso, mas geralmente é ipconfig, ifconfig, alguma coisa assim, e você consegue saber qual é o IP da sua máquina lá no IPV4.

Kako: Exatamente. Então eu vou rodar mais uma vez o nosso aplicativo, mas vocês vão ver que ele está com um problema que ele fala: "bad state, HTTP inseguro".

Olha, hoje agora, o Flutter não gosta de comunicações inseguras. Como estamos trabalhando com um servidor local, abrir um servidor HTTPS local é meio estranho, então abrimos em HTTP. Como fazemos para trabalhar como um servidor HTTP sem o S de security no Flutter?

Você vem aqui, no projeto, no menu lateral, vai abrir a sua pasta do Android, vai abrir a pasta de "app", a pasta de source “src” - está acabando - a pasta "debug" e, aqui dentro, tem o "AndroidManifest.xml". Lembrando: é a pasta "debug", não é a pasta "main", é a pasta "debug". Abriu o "AndroidManifest.xml", aqui você vai colar - vou deixar também na atividade para você esse texto para você colar. Você vai colar esse texto aqui.

É um application falando uses clear text traffic. Isso permite que você receba dados HTTP no Flutter. Vou rodar mais uma vez, dar um "wait" no emulador. Eu tenho que fechar o aplicativo e rodar novamente, que ele vai salvar tudo o que nós mexemos no "AndoridManifest". Esperar uns minutos, uns segundos, que ele está rodando.

Leonardo Marinho: É importante sempre rodar de novo. Então feche a aplicação, stop, e roda de novo, porque o "AndroidManifest", quando muda, se você der um reload ali, ele não vai pegar, tem que levantar a aplicação de baixo.

Kako: Então ok, conseguimos rodar a nossa aplicação. Só que uma coisa: ela está vazia, não tem nada aqui. Por que será? Explica para nós, Léo, por que está vazio aqui?

Leonardo Marinho: Por que ela está vazia? Porque quando nós configuramos o nosso servidor web, nós não cadastramos nenhum evento, 0 cadastros de eventos. Para conseguirmos algum dado na aplicação Flutter, nós precisamos ir na aplicação web e cadastrar um evento. Então, na primeira opção à esquerda, "Eventos", você consegue cadastrar um novo evento.

Basicamente ele vai pedir algumas informações: o título, a descrição, uma URL de uma imagem da web que você queira usar. É em cima desse cadastro que a sua aplicação poderá puxar esses dados e listá-los na tela do aplicativo Flutter. Então essa comunicação de quais dados que são exibidos no aplicativo vem desse servidor local nosso.

Kako: Eu vou pegar uma imagem aqui para nós, de Flutter, só para não ficarmos sem imagem.

Leonardo Marinho: Não.

Kako: Vou pegar aqui.

Leonardo Marinho: Tem que ficar bonito.

Kako: Abrir em nova guia. É uma imagem pequena? Por que isso, cara? Ficou pequena demais, vou pegar uma maior aqui, vou acessar. Gostei, abrir em nova guia. Melhor, agora sim. Pego esse link e posso botar aqui, no evento que estamos criando. Esse link eu posso botar aqui e salvar.

Leonardo Marinho: Isso.

Kako: Beleza, está aqui.

Leonardo Marinho: Beleza.

Kako: Então ainda não apareceu no emulador. Mas é por que temos que o quê? Temos que relodar o nosso aplicativo. Vou dar um stop aqui e dar um run again.

Leonardo Marinho: Fica como desafio, se você quiser colocar um pull to refresh, que é uma puxada na tela que atualiza a lista, você pode implementar também essa função, nós deixamos em aberto para você poder melhorar o aplicativo. Então dá para você criar uma função ali, quando você puxa a tela, a lista vai no servidor, puxa os dados e atualiza. Se você quiser também pegar para brincar, está na sua mão.

Kako: Perfeito, galera. Então, olha só, é isso aqui, já estamos nos comunicando com o nosso servidor. A ideia é que o pessoal comece a colocar eventos de Meetups aqui e você receba notificações - lá na frente, quando tivermos configurado tudo.

Leonardo Marinho: Isso.

Kako: Notificações que o servidor foi atualizado.

Leonardo Marinho: Perfeitamente. Então, basicamente, recapitulando, por que nós fizemos isso? Nós colocamos o IP que está o servidor, o IP e a porta que está o servidor local na nossa máquina, para a aplicação que está na nossa máquina entender onde tem que buscar os dados. Se esse servidor estivesse na web, você teria que colocar o IP ou o DNS, o "www." qualquer coisa que tivesse, para o aplicativo poder ler esses dados da API do servidor.

Se você tiver curiosidade, mexe no código do aplicativo, dê uma olhada no arquivo "web.dart" como que está se comunicando com a API e também no repositório do Dev Meetups API tem lá todos os endpoints, todos os pontos que você lê e envia dados para ele, e tudo mais, bem bacana. Então agora a aplicação está lendo os dados, mas ainda não tem a notificação de push. Agora nós precisamos aprender como vamos resolver isso.

Kako: Exatamente. Então na próxima aula vocês vão aprender um pouco a mexer no nosso Firebase Cloud Messaging.

Leonardo Marinho: Isso, então até lá.

Sobre o curso Flutter: Push Notifications com Firebase Cloud Messaging

O curso Flutter: Push Notifications com Firebase Cloud Messaging possui 175 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução ao Firebase Cloud Messaging
• Integração com o web app
• Trabalhando com notificações
• Aprofundamento