Que tal apreciar um Firebase com Angular?

Fala pessoal, acredito que muitos de vocês devem querer testar suas aplicações e nem todo mundo possui acesso às hospedagens de banco de dados. Hoje eu venho aqui apresentar para vocês como conectar o seu projeto Angular com o banco de dados do Firebase, que é gratuito e possui uma enorme variedade de serviços.

Vamos começar criando um projeto no Firebase

1. Acesse o console do Firebase em link

Será necessário possuir uma conta no firebase, você pode criar uma ou vincular o seu gmail, por exemplo.

2. Crie um novo projeto

Na sua visão geral você irá encontrar um local para adicionar um projeto.

Escolha um nome para o seu projeto. Lembre-se de evitar caracteres que possam dificultar a integração ou interpretação e de não repetir o nome dos seus projetos.

Para utilizar o Google Analytics é necessário possuir uma conta do Google Analytics. Mas isso não é um requisito obrigatório para utilização dos serviços, então caso não possua, pode desabilitar esta opção e continuar.

O último passo no Firebase consiste na integração do seu projeto Firebase com seu projeto Angular. O Firebase disponibiliza alguns meios para essa integração e você pode escolher o que julgar melhor, fique tranquilo eles normalmente apresentam o passo a passo do que você necessita fazer.

IMPORTANTE: copie essas informações, elas serão necessárias para realizar a integreção entre o projeto Firebase com o seu projeto Angular

3. Configurando seu projeto Firebase

Neste artigo resolvi explorar apenas dois dos diversos serviços oferecidos pelo Firebase, não que os outros não sejam interessantes, mas só porque acredito que com esses dois você poderá desenvolver seus projetos e despertar a curiosidade para explorar os demais.

No menu de navegação a esquerda você poderá acessar os serviços disponíveis.

Selecione o sistema de autenticação do firebase e o Firestore.

3.1 Configuração do Authentication

Por que escolhi o Firebase Authentication? Porque assim você poderá gerenciar as informações dos seus usuários, explorando sistemas de login, cadastro, edição e exclusão de usuário demonstrando sua habilidade com um CRUD completo do seu banco de dados de usuários e também no controle do fluxo de informações na sua aplicação de acordo com o estado dos usuários.

Comece acessando o serviço de autenticação através do menu lateral.

Em seguida vá até a aba "Método de Login" e selecione as opções desejadas. Neste artigo apresentarei as informações sobre o método de autenticação por e-mail e senha, e a autenticação por meio da conta da Google

3.1.1. E-mail e senha

Clicando no método de login por e-mail e senha você encontrará a janela a seguir. Onde o primeiro checkbox [1] se refere à ativação ou não da funcionalidade, clicando no Saiba mais você encontrará mais detalhes sobre o gerenciamento de contas. E o segundo checkbox [2] se refere ao envio de um e-mail de confirmação para o usuário após a realização do cadastro.

3.1.2. Conta Google

Clicando no método de login pela conta Google você encontrará a seguinte janela. Onde o checkbox [1] se refere à ativação ou não da funcionalidade, é muito importante, e acho que essa é uma das melhores dicas, que inclusive muitas pessoas me deram, leiam a documentação, especialmente as que você sente que foram feitas com cuidado e atenção para que possamos utilizar dos serviços que nos ajudam tanto. Vamos ao dropdown[2], este espaço é necessário e ele solicita um e-mail de suporte, portanto este é o e-mail que será apresentado aos seus usuários no momento da autenticação com a conta Google.

No final, estaremos assim:

3.2. Configuração do Firestrore

Vamos lá, por que utilizar o Firestore? Dessa vez, fiz uma lista pra vocês:

• Facilidade de uso: O Firestore é fácil de integrar aos seus aplicativos, especialmente se você já estiver usando outros serviços do Firebase. A Firebase oferece uma variedade de SDKs para diferentes plataformas, o que facilita a integração em aplicativos web, móveis e mesmo em servidores.
• Estrutura de banco de dados NoSQL escalável: O Firestore é um banco de dados NoSQL em tempo real, o que significa que ele pode lidar com grandes volumes de dados e atualizações em tempo real de maneira eficiente. Isso é especialmente útil para aplicativos que exigem sincronização em tempo real entre vários clientes.
• Estrutura flexível: O Firestore permite armazenar dados em documentos organizados em coleções. Isso oferece uma estrutura flexível para modelar seus dados de acordo com as necessidades do seu aplicativo, sem a necessidade de um esquema rígido.
• Suporte para consultas poderosas: O Firestore oferece suporte a consultas poderosas que permitem recuperar dados de maneira eficiente com base em diferentes critérios de filtragem, ordenação e agrupamento.
• Segurança integrada: O Firestore inclui recursos integrados de segurança, como regras de segurança baseadas em expressões que permitem controlar o acesso aos seus dados com granularidade.
• Integração com outros serviços do Firebase: Se você estiver usando outros serviços do Firebase, como autenticação de usuários, armazenamento de arquivos ou funções em nuvem, o Firestore se integra perfeitamente a esses serviços, permitindo criar aplicativos poderosos e escaláveis.

Comece acessando o serviço de autenticação através do menu lateral.

Por fim vamos dar uma olhadinha apenas nas regras do seu banco de dados Normalmente o seu conjunto de regras para TEST vem assim:

service cloud.firestore {
match /databases/{database}/documents {
  match /{document=**} {
    allow read, write: if true;
  }
}
}

onde você permite (allow) a leitura (read) e a escrita (write) SEMPRE, essa configuração geralmente possui um prazo para terminar, então é bom ficar atento caso opte por ela.

Quando você opta pelo modo PRODUÇÃO, seu conjunto de regras vem assim:

service cloud.firestore {
match /databases/{database}/documents {
  match /{document=**} {
    allow read, write: if false;
  }
}
}

onde você NÃO permite (allow) a leitura (read) e a manipulação (write) NUNCA. O que queremos? Queremos poder optar por quando permitir ler, quando permitir escrever a depender de cada situação.

service cloud.firestore {
match /databases/{database}/documents {
  match /{document=**} {
    allow read, write: if request.auth != null;
  }
  match /{document=**} {
    allow read: if request.auth == null;
  }
}
}

No código acima podemos observar que para usuários que realizaram a autenticação (request.auth != null) é permitida a leitura e a escrita (allow read, write), enquanto para usuários que não realizaram a autenticação (request.auth == null) só pe permitida a leitura (allow read). Você também pode alterar suas regras para coleções específicas no seu banco de dados alterando o arcumento do match, que no exemplo se aplica a tudo (match /{document=**, onde ** significa 'tudo'})

4. Conectando o Firebase ao seu projeto angular

4.1. Instalando as bibliotecas

Utilizaremos duas bibliotecas a do firebase e a do angular para o firebase.

npm install firebase

npm install @angular/fire

um detalhe, ao instalar o @angular/fire ocorreu um erro de compatibilidade, porque este módulo busca por uma versão mais atual do Angular, mais precisamente as ^17 como você pode ver a seguir:

então realizei a instalação utilizando

npm install @angular/fire --force

Eu só usei este comando porque o modulo possui uma pasta de compatibilidade. Mas não é recomendado aplicar o --force em todos os casos, clique aqui para entender melhor essa ressalva.

4.2. Adicionando as configurações do projeto Firebase

IMPORTANTE: As versões mais recentes do Angualar não estão criando automaticamente a pasta environments. Eu estou usando a versão 14.3.0

No seu arquivo 'environment.ts' adicione os dados fornecidos pelo Firebase na terceira etapa de criação do projeto. Deve resultar em algo assim:

export const environment = {
production: false,
firebaseConfig: {
  apiKey: "SUA_API_KEY",
  authDomain: "SEU_DOMÍNIO.firebaseapp.com",
  projectId: "SEU_PROJECT_ID",
  storageBucket: "SEU_BUCKET.appspot.com",
  messagingSenderId: "SEU_SENDER_ID",
  appId: "SUA_APP_ID"
}
};

No seu arquivo 'environment.prod.ts' altere 'production' para production: true

Caso você não tenha copiado o código para configuração, calma, no menu de navegação a esquerda está a visão geral do projeto, clique na engrenagem e em seguida em configurações do projeto, suas informações para configuração estaram aí embaixo.

4.3. Inicializando o Firebase no Angular

No seu arquivo 'app.module.ts', importe o 'AngularFireModule' e inicialize-o com a configuração do Firebase:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environments';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AngularFireModule.initializeApp(environment.firebaseConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

4.4. Utilizando o módulo

Agora você pode usar livremente o módulo do firebase no seu projeto angular. Mas calma, tenho mais uma dica para te dar. Aconselho fortemente que separe as suas funções de acordo com a aplicação, por exemplo, você acabou de conectar o firebase com a sua aplicação, então porque não criar um service para gerenciar suas funções para os seus componentes, assim seu projeto fica mais organizado, mais fácil de dar manutenção e mas fácil de ser reutilizado depois.

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
providedIn: 'root'
})
export class MyFirestoreService {
constructor(private firestore: AngularFirestore) {}

// Métodos para interagir com o Firestore aqui...
}

Espero que esse post ajude muitas pessoas, eu tive bastante dificuldade quando fiz a primeira vez, pesquisei em vários lugares, documentações, blogs, IA generativa, conversei com algumas pessoas e depois que consegui a primeira vez, repeti a segunda construindo esse passo a passo, para você e obviamente pra mim, caso eu me esqueça de algum detalhe.

Até a próxima!!!