Supabase es una plataforma de desarrollo backend que nos permite construir aplicaciones modernas con una base de datos en tiempo real, autenticación y almacenamiento integrado.

Diseñado como una alternativa de código abierto a Firebase, Supabase se basa en PostgreSQL y proporciona una serie de herramientas que simplifican el desarrollo y la gestión de backend.

Instalación y configuración de Supabase

Primero, necesitamos registrarnos en Supabase y crear una cuenta. Una vez registrados, podemos crear un nuevo proyecto siguiendo estos pasos:

Instalación del cliente de Supabase

Para interactuar con Supabase desde nuestra aplicación, necesitamos instalar el cliente de Supabase. Podemos hacerlo utilizando npm, el gestor de paquetes para Node.js. Ejecutamos el siguiente comando en la raíz de nuestro proyecto:

npm install @supabase/supabase-js

Cómo usar Supabase

Configuración del cliente

Una vez que hemos instalado el cliente de Supabase, necesitamos configurarlo en nuestra aplicación. Aquí mostramos cómo hacerlo en una aplicación de JavaScript.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Autenticación de usuarios

Supabase proporciona un sistema completo de autenticación de usuarios. A continuación, mostramos cómo registrar un nuevo usuario y permitirle iniciar sesión.

Registro de usuarios

const { user, error } = await supabase.auth.signUp({
  email: 'example@email.com',
  password: 'example-password',
});

if (error) console.error('Error registering user:', error);
else console.log('User registered:', user);

Inicio de sesión

const { user, error } = await supabase.auth.signIn({
  email: 'example@email.com',
  password: 'example-password',
});

if (error) console.error('Error logging in:', error);
else console.log('User logged in:', user);

Operaciones de base de datos

Supabase genera automáticamente una API RESTful basada en nuestras tablas y vistas de PostgreSQL. A continuación, mostramos cómo realizar operaciones CRUD utilizando el cliente de Supabase.

Crear la tabla

Necesitaremos ejecutar este script SQL para crear la tabla que usaremos en el resto de ejemplos. Puedes hacer esto desde el panel de control de Supabase

-- Crear la tabla todos
CREATE TABLE todos (
    id SERIAL PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    is_complete BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Opcional: Añadir algunos datos de ejemplo
INSERT INTO todos (task, is_complete)
VALUES
    ('Do the laundry', false),
    ('Buy groceries', false),
    ('Pay bills', true);

Crear un nuevo registro

const { data, error } = await supabase
  .from('todos')
  .insert([
    { task: 'Do the laundry', is_complete: false },
  ]);

if (error) console.error('Error inserting data:', error);
else console.log('Data inserted:', data);

Leer datos

const { data, error } = await supabase
  .from('todos')
  .select('*');

if (error) console.error('Error fetching data:', error);
else console.log('Data fetched:', data);

Actualizar un registro

const { data, error } = await supabase
  .from('todos')
  .update({ is_complete: true })
  .eq('id', 1);

if (error) console.error('Error updating data:', error);
else console.log('Data updated:', data);

Eliminar un registro

const { data, error } = await supabase
  .from('todos')
  .delete()
  .eq('id', 1);

if (error) console.error('Error deleting data:', error);
else console.log('Data deleted:', data);

Almacenamiento de archivos

Crear la tabla

-- Crear la tabla avatars para almacenar información de archivos
CREATE TABLE avatars (
    id SERIAL PRIMARY KEY,
    filename VARCHAR(255) NOT NULL,
    url TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Opcional: Añadir algunos datos de ejemplo
INSERT INTO avatars (filename, url)
VALUES
    ('avatar1.png', 'https://your-supabase-bucket-url/avatar1.png'),
    ('avatar2.png', 'https://your-supabase-bucket-url/avatar2.png');

Cargar un archivo

const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', file);

if (error) console.error('Error uploading file:', error);
else console.log('File uploaded:', data);

Descargar un archivo

const { data, error } = await supabase
  .storage
  .from('avatars')
  .download('public/avatar1.png');

if (error) console.error('Error downloading file:', error);
else console.log('File downloaded:', data);