Como Implementar CRUD Completo com Angular e Firebase

A implementação de um CRUD (Create, Read, Update, Delete) é uma tarefa essencial em muitos projetos de desenvolvimento web. Usando o Angular e o Firebase, você pode criar aplicações robustas e escaláveis com facilidade. Neste artigo, vamos mostrar o passo a passo para integrar essas tecnologias e construir um sistema completo de CRUD.

1. Configuração do Projeto Angular

Primeiro, é necessário criar um novo projeto Angular. Se você ainda não tem o Angular CLI instalado, instale-o com o seguinte comando:

npm install -g @angular/cli

Crie o projeto com:

ng new crud-angular

Em seguida, navegue até a pasta do projeto:

cd crud-angular

2. Adicionando Firebase ao Projeto

Para usar o Firebase em seu aplicativo Angular, instale o SDK do Firebase:

npm install firebase @angular/fire

Depois, crie um projeto no Firebase Console, obtenha as credenciais de configuração e adicione ao seu aplicativo. No arquivo src/environments/environment.ts, adicione as configurações do Firebase:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'SUA_API_KEY',
    authDomain: 'SEU_AUTH_DOMAIN',
    projectId: 'SEU_PROJECT_ID',
    storageBucket: 'SEU_STORAGE_BUCKET',
    messagingSenderId: 'SEU_MESSAGING_SENDER_ID',
    appId: 'SEU_APP_ID',
    measurementId: 'SEU_MEASUREMENT_ID'
  }
};

3. Configurando o Firebase em Angular

Abra o arquivo app.module.ts e importe os módulos necessários do Firebase:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

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

4. Criando o Serviço de CRUD

Agora, crie um serviço para lidar com as operações de CRUD. No terminal, execute o seguinte comando:

ng generate service firebase-crud

Dentro do arquivo firebase-crud.service.ts, adicione as funções para adicionar, obter, atualizar e excluir dados:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FirebaseCrudService {
  private basePath = '/items';

  constructor(private db: AngularFireDatabase) {}

  // Create
  createItem(item: any): void {
    const itemsRef = this.db.list(this.basePath);
    itemsRef.push(item);
  }

  // Read
  getItems(): Observable<any[]> {
    return this.db.list(this.basePath).valueChanges();
  }

  // Update
  updateItem(key: string, value: any): Promise<void> {
    const itemRef = this.db.list(this.basePath).set(key, value);
    return itemRef;
  }

  // Delete
  deleteItem(key: string): Promise<void> {
    const itemRef = this.db.list(this.basePath).remove(key);
    return itemRef;
  }
}

5. Criando o Componente de Interface

No componente principal, utilize o serviço para realizar as operações de CRUD. Altere o arquivo app.component.ts para incluir as funcionalidades de criar, ler, atualizar e excluir itens:

import { Component } from '@angular/core';
import { FirebaseCrudService } from './firebase-crud.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: any[] = [];
  newItem = '';

  constructor(private firebaseCrudService: FirebaseCrudService) {}

  ngOnInit(): void {
    this.firebaseCrudService.getItems().subscribe(data => {
      this.items = data;
    });
  }

  addItem(): void {
    if (this.newItem.trim()) {
      this.firebaseCrudService.createItem({ name: this.newItem });
      this.newItem = '';
    }
  }

  updateItem(key: string, value: string): void {
    this.firebaseCrudService.updateItem(key, { name: value });
  }

  deleteItem(key: string): void {
    this.firebaseCrudService.deleteItem(key);
  }
}

6. Criando o Template

No arquivo app.component.html, crie um formulário simples para adicionar itens e uma lista para exibir, editar e excluir itens:

<div class="container">
  <h2>CRUD com Angular e Firebase</h2>
  <input [(ngModel)]="newItem" placeholder="Novo item" />
  <button (click)="addItem()">Adicionar</button>

  <ul>
    <li *ngFor="let item of items; let i = index">
      <span>{{ item.name }}</span>
      <button (click)="updateItem(i, item.name)">Editar</button>
      <button (click)="deleteItem(i)">Excluir</button>
    </li>
  </ul>
</div>

7. Conclusão

Agora, você tem um sistema completo de CRUD integrado com Firebase e Angular. Esse projeto serve como base para a criação de aplicações mais complexas, aproveitando as vantagens do Firebase, como autenticação e hospedagem, além de permitir o armazenamento e gerenciamento de dados em tempo real.

Se você quiser adicionar autenticação, segurança ou outros recursos do Firebase, basta integrar as funcionalidades adicionais conforme a necessidade do seu projeto.