Integrando seu App com Firebase
Tags: flutter, dart, firebase, flutterfire
Published: 2024-04-19 01:48:08

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

![](https://cdn-images-1.medium.com/max/800/1*t7rUa-jyLOINXb6eHF3-Hg.png)

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

![](https://cdn-images-1.medium.com/max/800/1*V2FbQejqEOnUxNF9fXW8hw.png)

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

Escolha o **flutter_modular**

![](https://cdn-images-1.medium.com/max/800/1*aG4PKqC6Ie4w0NY5AoFipA.png)

Escolha o mobX

![](https://cdn-images-1.medium.com/max/800/1*kezkI_a5ZMSI0Q3EzJ-lNw.png)

E confirme a instalação

![](https://cdn-images-1.medium.com/max/800/1*_hs-9XwvWTymNLEK38h3Jg.png)

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

![](https://cdn-images-1.medium.com/max/800/1*1Fs9xQRvJNmktpqemdjwTg.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Hp693I5i-DiW9X4P2PmBJQ.png)

Agora vamos dar um nome bonito para nosso projeto

![](https://cdn-images-1.medium.com/max/800/1*COXSCuuQ1Wi-4cqX3Pl_CQ.png)

Next

![](https://cdn-images-1.medium.com/max/800/1*FNygxfinM2sEj0ZcVbxlPw.png)

Selecione a primeira opção

![](https://cdn-images-1.medium.com/max/800/1*pWsWMHTzW2Zuol1U7DsHCw.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Sl9u3LutxoksW0vXXzU9DA.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Hee3E5YwkdrFgTZytCQIWQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*ZeHrVqZFzGwU2KzpdJesGw.png)

E precisamos colocar lá na nossa pasta **android>app**

![](https://cdn-images-1.medium.com/max/800/1*C9raaShkK4MX2i_pwvnxJQ.png)

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’

![](https://cdn-images-1.medium.com/max/800/1*VOSqcSGu8NoKy50cSjPRLg.png)

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’

![](https://cdn-images-1.medium.com/max/800/1*Onr9OpWHOyyyTocgoBNx4A.png)

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’

![](https://cdn-images-1.medium.com/max/800/1*-RwxbrvMdJzv15P8T08UQg.png)

E dentro de **defaultConfig** adicionamos a linha

> multiDexEnabled true

![](https://cdn-images-1.medium.com/max/800/1*8SOAo_NtbxvAs9mYyGV-dg.png)

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**.

![](https://cdn-images-1.medium.com/max/800/1*nZb9dRjctpUrSTuKWIOz0A.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Eay8RH5DzcrENfwU8M6shQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*xZ_ehMtDIUbRRuk7M4bq8A.png)

Depois selecione o modo de teste e concluir

![](https://cdn-images-1.medium.com/max/800/1*e09xCka2hXSUSdeS5gl5pg.png)

E este é nosso banco de dados

![](https://cdn-images-1.medium.com/max/800/1*dnrBJ8U2bC13ikoX14UcMQ.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*fg86opBqnfP6nRG6tO2OIg.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*xoT_bzkakA8uX0cD8coT4g.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*mxVFjNIkDr5ywU8XkY49Bg.png)

![](https://cdn-images-1.medium.com/max/800/1*Vsyxfx9nHNh6Mq24xYpkxA.png)

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()

![](https://cdn-images-1.medium.com/max/800/1*yE2zXTVYELTl-TymHzn27g.png)

Desta maneira conseguimos utilizar desta maneira

![](https://cdn-images-1.medium.com/max/800/1*nkJzAv3UyGLBkdRnGds7TA.png)

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

![](https://cdn-images-1.medium.com/max/800/1*mBeZLwxb4yKI4-gCfHWD8A.png)

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

![](https://cdn-images-1.medium.com/max/800/1*yl8wETPkpn7hp9mnyFcs1A.png)

![](https://cdn-images-1.medium.com/max/800/1*VhPQEdbjg9BxfLvOeLODNQ.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*hjyjw9ebZW5uY8zq5leoXA.png)

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

![](https://cdn-images-1.medium.com/max/800/1*dlaAO7zYlVT2HXN8HDI0YQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*8D0EWegCG3R-Rx9sjvTHug.png)

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

![](https://cdn-images-1.medium.com/max/800/1*dxwqC7jnObKMDXAPSdQNCg.png)

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 .

![](https://cdn-images-1.medium.com/max/800/1*zvWk5f4Z6oFauwviWXbZxA.png)

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<List<TodoModel>> para armazenar os modelos de forma reativa, nossa classe ficara da seguinte forma.

![](https://cdn-images-1.medium.com/max/800/1*NPTpJjrgDX8LxrsAq4EInw.png)

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

![](https://cdn-images-1.medium.com/max/800/1*RIUDHqa-qH4touk5E6vwhw.gif)

Você pode baixar o código fonte deste projeto em
https://github.com/toshiossada/FlutterTodoListFirebase


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo0rmy5064hwxc4uakma.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil