Cómo instalar Supabase en Angular

Supabase es una alternativa de código abierto a Firebase que ofrece autenticación, bases de datos en tiempo real y almacenamiento de archivos. En esta guía, aprenderás a integrar Supabase en una aplicación Angular.

1. Crear un Proyecto en Supabase

1. Dirígete a Supabase y crea una cuenta.
2. Crea un nuevo proyecto y toma nota de la URL del proyecto y la clave API.
3. Configura tu base de datos y las tablas necesarias desde el dashboard.

2. Configurar un Proyecto Angular

Si aún no tienes un proyecto Angular, créalo ejecutando:

ng new my-supabase-app 
cd my-supabase-app

Luego, instala el cliente de Supabase:

npm install @supabase/supabase-js

3. Configurar Supabase en Angular

Crea un archivo de configuración para Supabase, por ejemplo: src/app/supabase.service.ts

import { Injectable } from '@angular/core';
import { createClient, SupabaseClient } from '@supabase/supabase-js';

@Injectable({
  providedIn: 'root',
})
export class SupabaseService {
  private supabase: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      'https://your-supabase-url.supabase.co',
      'your-anon-key'
    );
  }

  async getData() {
    const { data, error } = await this.supabase
      .from('your_table')
      .select('*');

    if (error) {
      throw error;
    }

    return data;
  }
}

 

4. Usar Supabase en un Componente

Edita un componente, por ejemplo src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { SupabaseService } from './supabase.service';

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

  constructor(private supabaseService: SupabaseService) {}

  async ngOnInit() {
    this.data = await this.supabaseService.getData();
  }
}

5. Mostrar Datos en la Vista

Edita src/app/app.component.html para mostrar los datos:

<div *ngFor="let item of data">
  <p>{{ item.nombre }}</p>
</div>