Toshi Ossada for flutterbrasil

Posted on Apr 19

Integrando seu App com Firebase

#flutter #dart #firebase #flutterfire

Fala Devs, tudo bem com vocês?

Hoje vamos falar de como podemos integrar nosso App com o Firebase de maneira muito simples, para isso iremos utilizar o Slidy e o Modular para nós auxiliares a construção de nosso App, faremos um TODO List como exemplo.

Primeiramente vamos criar nosso projeto vale ressaltar que o nome do domínio da nossa aplicação é muito importante para configurar o Firebase, por este motivo prefiro criar o projeto do Flutter através da prompt de comando, para realizar a criação basta executarmos o comando

$ flutter create –-org com.toshi todo_firebase

Dando uma explicação rápida este comando é separado em 5 partes, a primeira é a “palavra” flutter que significa que irei utilizar o CLI do flutter, o segundo argumento é o create isso significa que irei criar um projeto na CLI do flutter, em seguida temos nosso primeiro argumento o –-org nesta hora estou dizendo que meu próximo argumento será o nome do meu domínio que é o com.toshi e por último é o nome do meu projeto o todo_list. Caso tenha criado o projeto pelo Visual Studio Code ou pelo Android Studio ele irá criar com um nome default, para descobrir qual o domínio que ele criou basta ir e android>app>build.gradle e lá procure a área defaultConfig e no atributo applicationId estará o domínio da sua aplicação

Agora para configurar nosso Modular, no prompt de comando podemos executar o slidy start

Escolha o flutter_modular

Escolha o mobX

E confirme a instalação

Agora com nosso projeto criado vamos no site do https://firebase.google.com/ e clique em Ir para Console (você já deve ter logado com sua conta Google).

O Firebase é uma ferramenta da Google que é paga entretanto ela te oferece uma quantidade grátis de armazenamento que cabe muito bem para nossos apps de estudo, mas mesmo a parte paga é muito barata, o Firebase te oferece vários recursos interessantes como autenticação, push notifications e a que irmos utilizar que é o Cloud Store que é como se fosse um banco de dados noSQL.

Vamos criar nosso projeto

Agora vamos dar um nome bonito para nosso projeto

Selecione a primeira opção

E voilá projeto criado, agora vamos adicionar um aplicativo em nosso projeto do Firebase

Nesta hora precisaremos saber qual o domínio da aplicação, aquele que vimos lá no começo, é só colocar aqui e pode deixar os outros campos em branco e simplesmente registrar o app

Agora precisaremos configurar nosso app com as instruções que são nos dada, faça o download do google-services.json

E precisamos colocar lá na nossa pasta android>app

Agora precisamos seguir os próximos passos, no build.gradle dentro da pasta android precisamos adicionar a dependência do google-services.

Dentro de dependencies adicione a linha

classpath ‘com.google.gms:google-services:4.3.3’

Agora no build.gradle dentro de android>app precisamos fazer outras configurações, no final do arquivo adicione a linha

apply plugin: ‘com.google.gms.google-services’

E dentro de dependencies adicione a linha

implementation ‘com.google.firebase:firebase-analytics:17.2.2’

Nos adiantando, na hora de compilarmos a aplicação ocorrerá um erro de multidex, resolveremos este problema adicionado neste mesmo build.gradle 2 configurações, dentro de dependencies adicionamos a linha

implementation ‘com.android.support:multidex:1.0.3’

E dentro de defaultConfig adicionamos a linha

multiDexEnabled true

Agora precisamos adicionar os package para trabalhar com o Firestore, basta executarmos no prompt slidy install cloud_firestore, também precisamos adicionar o firebase_core, basta executarmos slidy install firebase_core.

Agora no site do firebase ele ficara aguardando nossa aplicação executar o firebase, basta clicarmos em pular esta etapa

A parte que iremos utilizar é o database, basta acessarmos no menu lateral e depois clicar em criar banco de dados.

Depois selecione o modo de teste e concluir

E este é nosso banco de dados

Agora com tudo configurado vamos colocar a mão no código. Primeiramente vamos criar nosso modelo, ele terá 4 atributos, o título, se ele está checkado ou não, a posição e o identificador. O identificador no Firebase é um atributo do tipo DocumentReference, então nossa classe ficara da seguinte forma.

Agora seguindo o conceito do SOLID (onde cada classe do tem uma responsabilidade) vamos criar nosso repositório que terá a responsabilidade de pegar nossos dados no Firebase. Para isso vamos usar o slidy. slidy generate repository modules/home/repositories/todo e segundo as boas práticas do SOLID vamos também criar uma interface para esse repositório.

No dart uma interface é uma classe abstrata, vamos definir os métodos que iremos utilizar, o de salvar, o de inserir e o de deletar.

Com isso basta implementarmos a interface em nossa classe de repositório, como trabalharemos com o Firebase necessitaremos de uma instancia do Firestore, que seguindo as boas práticas do SOLID iremos receber por injeção de dependência.

Para recuperar o os documentos que estão no firebase basta acessarmos através da instancia do Firestore.

Firestore.collection(‘nome_do_domuento’).orderBy(‘position’).snapshots()

Isso me retornara uma querySnapshot e precisamos converter isso para uma Lista de TodoModel. Para isso utilizaremos o map para acessar os documentos que são um DocumentSnapshot, daí lá no meu todo_model.dart eu terei que criar um método factory que recebe um DocumentSnapshot e retorna um TodoModel, chamarei ele de fromDocument()

Desta maneira conseguimos utilizar desta maneira

Vamos já implementar os outros métodos, o delete() é bem simples, basta recebermos o TodoModel e no reference damos um delete()

No método save() ele será responsável por inserir e alterar o registro, para isso verificamos se o reference é null se for null trata-se de um insert de não trata de um update, o método ficara da seguinte forma

Eu particularmente não gosto de acessar a camada de repositório diretamente da controller, para isso criei uma camada service slidy generate service modules/home/services/todo também crio a interface para o serviço.

A responsabilidade da service neste caso será somente em fazer a ponte da controller para a repository.

Nossa Arquitetura ficara da seguinte forma controller < conversa > service < conversa > repository.

Então vamos receber na Controller uma instancia da service também por injeção.

Com isso já podemos configurar as injeções na home_module, note que nós binds da service e da repository eu tipifiquei com as interfaces, já no bind da repository eu injeto uma instancia do Firestore .

Agora vamos para nosso home_controller implementar os métodos de buscar os documentos, salvar e deletar. Vamos também criar um observável do tipo ObservableStream> para armazenar os modelos de forma reativa, nossa classe ficara da seguinte forma.

Usado ObservableStream conseguimos utilizar todo poder de um Stream com reatividade sem precisar usar o widget Stream(), basta envolvê-lo em um Observer()

Com isso basta montar minha tela utilizando as actions que eu montei na controller (deixarei no Github a home_page.dart), e teremos o seguinte resultado