Notas con Supabase

supabase

En este artículo vamos a crear una base de datos con supabase, para luego llamarla desde nuestra aplicación React con Next.js. Además de crear notas, también aprenderemos a borrarlas y editarlas.

Supabase es una plataforma que proporciona todas las herramientas necesarias para gestionar tu base de datos, similar a Firebase, pero con la ventaja de ser compatible con PostgreSQL. En este tutorial, configuraremos Supabase, crearemos una base de datos y la conectaremos a nuestra aplicación React con Next.js.

Comenzaremos configurando nuestra base de datos en Supabase, luego veremos cómo integrar esta base de datos en nuestra aplicación para poder crear, leer, actualizar y eliminar (CRUD) notas. Esto permitirá una gestión completa de las notas directamente desde nuestra aplicación.

1. Crear una cuenta en Supabase y configurar un nuevo proyecto.
2. Definir nuestra estructura de datos y tablas para las notas.
3. Conectar Supabase con nuestra aplicación React usando Next.js.
4. Implementar las funcionalidades de creación, lectura, actualización y eliminación de notas.

Al final de este tutorial, tendrás una aplicación completamente funcional que te permitirá gestionar tus notas de manera eficiente.

Empezamos...

Luego de haber creado una cuenta en supabase, vamos a crear nuestra tabla de datos para después consultarlas desde nuestra aplicación, creamos un nuevo proyecto con nuestro nombre que elijamos.

En el dashboard de supabase nos dirigimos a SQL Editor:

Veremos el siguiente editor de Supabase:

Bien, ahora vamos a crear nuestra tabla de datos, en este caso la vamos a llamar notes. Utilizaremos la siguiente instrucción SQL:

1CREATE TABLE 
2    public.notes (
3    id SERIAL not null,    
4    title TEXT null,
5    created_at TIMESTAMP with time zone null default (now() at time zone 'utc'::text),
6    constraint notes_pkey PRIMARY key (id)
7)
8
9-- Vamos a insertar algo de datos para muestra
10INSERT INTO notes (title)
11values
12('Hoy he creado un proyecto en Supabase')
13('He agregado algo de datos y la he consultado desde Next.js')
14('Esto es asombroso 😲')

Esta instrucción crea una tabla llamada notes con los siguientes campos:

• id: Un identificador único para cada nota, generado automáticamente (serial).
• title: El título de la nota, que puede ser texto o null.
• created_at: La fecha y hora de creación de la nota, con la zona horaria UTC por defecto.
• Por último ingresamos algo de datos en la tabla para mostrarlos luego.

Además, definimos una clave primariaprimary keyen el campoidpara asegurar que cada nota tenga un identificador único. Por último, hacemos click en el botónRun.

Creamos nuestra app con Next.js

Bien, empezamos creando nuestro proyecto con Next.js. Para eso, abrimos nuestra terminal favorita y escribimos:

1npx create-next-app@latest

Este comando iniciará un asistente que te guiará a través de los pasos necesarios para configurar tu nuevo proyecto. A continuación, se describen algunos de los pasos que encontrarás:

• Nombre del Proyecto: Debes proporcionar un nombre para tu aplicación. Este nombre se utilizará para crear el directorio que contendrá tu proyecto.
• Tecnologías a Usar: Se te pedirá que selecciones algunas tecnologías adicionales que quieras incluir en tu proyecto, como TypeScript, ESLint, Tailwind CSS, entre otras.

Una vez que hayas completado estos pasos, Next.js creará una estructura de carpetas y archivos para tu proyecto. Dentro de la carpeta app, encontrarás un archivo llamado page.tsx.

Este archivo,page.tsx, es el punto de entrada de tu aplicación y donde puedes empezar a definir el contenido de la página principal. Por ejemplo, puedes editar este archivo para mostrar un mensaje de bienvenida, listar productos, o cualquier otra funcionalidad que tu aplicación necesite.

Antes de proceder con el desarrollo, es importante conectar tu proyecto con Supabase si planeas utilizarlo para la gestión de datos. Supabase es una plataforma que proporciona una base de datos PostgreSQL, autenticación y almacenamiento en tiempo real.

Para conectar tu aplicación Next.js con Supabase, sigue estos pasos:

• Ve a la página de Supabase y crea una nueva cuenta si aún no tienes una.
• Crea un nuevo proyecto en el panel de Supabase.
• Sigue las instrucciones de configuración proporcionadas por Supabase para conectar tu proyecto Next.js. Esto generalmente implica instalar la biblioteca de cliente de Supabase y configurar las credenciales de tu proyecto.

Una vez que hayas conectado Supabase, podrás utilizar sus funcionalidades para manejar datos en tu aplicación, como crear, leer, actualizar y eliminar registros en la base de datos.

Conectando Supabase

Para conectar Supabase con nuestra aplicación, necesitamos dos cosas importantes: la URL del proyecto de Supabase y la anon public key. Estos son los pasos:

Primero debemos instalar las dependencias de supabase:

1npm install @supabase/supabase-js

1. Ve a tu proyecto en Supabase y navega a la sección de configuración (Settings).
2. En la sección de configuración, encontrarás la URL del proyecto y la anon public key en la pestaña de API.
3. Guarda estos valores en tu aplicación React utilizando variables de entorno para mayor seguridad.
4. Usa estos valores para inicializar el cliente de Supabase en tu aplicación y comenzar a interactuar con la base de datos.

En Settings

En la sección de configuración vamos a API:

Copiamos laURLy laAnon Public Key, estos valores son privados y por razones de seguridad se debe crear una variable de entorno. Para eso vamos a crear en la carpeta📂/srco📁/app de nuestra aplicación React y Next.js un archivo⚙ .env.local de la siguiente manera:

1NEXT_PUBLIC_SUPABASE_URL=tu_url_de_supabase_aquí
2NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_public_anon_key

Creación del Cliente

Para crear nuestro cliente de Supabase, vamos a crear el siguiente archivo JavaScript en la carpeta 🔧 utils. El archivo se llamará supabase.js:

1import { createClient } from '@supabase/supabase-js';
2
3const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
4const SUPABASE_API_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
5
6const supabase = createClient(SUPABASE_URL, SUPABASE_API_KEY);
7
8export default supabase;

Este código realiza los siguientes pasos:

• Importa la función createClient del paquete @supabase/supabase-js.
• Define las constantes SUPABASE_URL y SUPABASE_API_KEY, que se obtienen de las variables de entorno process.env.NEXT_PUBLIC_SUPABASE_URL y process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY. Estas variables deben estar configuradas en tu entorno de desarrollo.
• Utiliza createClient para crear una instancia del cliente de Supabase con la URL del proyecto y la clave pública anónima.
• Exporta la instancia del cliente de Supabase para que pueda ser utilizada en otras partes de la aplicación.

Creamos el Componente

1import supabase from '../../components/utils/supabase';
2import { useEffect, useState } from 'react';
3
4export default function Notes() {
5  const [notes, setNotes] = useState([]);
6
7  useEffect(() => {
8    const fetchData = async () => {
9      try {
10        const { data, error } = await supabase.from('notes').select();
11
12        if (error) {
13          throw new Error('Error al recibir datos');
14        }
15
16        if (data) {
17          setNotes(data);
18        }
19      } catch (error) {
20        console.error(error);
21      }
22    };
23
24    fetchData();
25  }, []);
26
27  return (
28    <pre>
29      <code className='text-text-primary'>{JSON.stringify(notes, null, 2)}</code>
30    </pre>
31  );
32}

Recibiendo Datos

Una vez hemos creado nuestro componente, ya podemos renderizarlo en la app, a continución veremos los datos:

Creando Notas Ejemplo

Aquí les dejo una muestra del ejemplo, se pueden editar las notas haciendo click en ellas: