PTENES
MÓDULO 2.2

🗃️ Supabase: Tu base de datos

Tu sitio ya está en línea, pero ¿dónde guarda la información? Registros, mensajes, productos, puntuaciones. Todo eso necesita un lugar seguro donde guardarse: una base de datos. Aquí aprenderás a crear y usar una base de datos real con Supabase, gratis.

6
Temas
45
Minutos
Básico
Nivel
Práctico
Tipo
1

Qué es una base de datos

Uno base de datos es un lugar organizado para guardar información que tu aplicación necesita recordar. Cuando alguien se registra en tu sitio, ese registro debe guardarse en algún lugar para que siga existiendo mañana. Ese lugar es la base de datos. Guarda todo en tablas, parecidas a hojas de cálculo, y responde rápido cuando pides información.

TU APP 💻 sitio / aplicación select... SUPABASE id nombre email 1 Ana ana@.. 2 Beto beto@. 3 Caio caio@. tabla: usuarios base de datos en la nube datos RESPUESTA ✅ 3 usuarios

🧠 Analogía: una hoja de cálculo potenciada

Imagina una hoja de cálculo de Excel: filas, columnas, cada celda con información. Una base de datos es esa hoja, solo que potenciada. Las diferencias:

  • •Vive en la nube, no en tu computadora. Está siempre en línea.
  • •Varias aplicaciones consultan la misma hoja de cálculo al mismo tiempo, sin interferirse.
  • •Puede soportar millones de líneas y todavía responde en milisegundos.
  • •Pides lo que quieres con una "pregunta" (una consulta) y te devuelve solo lo que importa.

💡 Qué es Supabase

O Supabase es un servicio gratuito que ofrece una base de datos lista para usar, sin que tengas que instalar nada. Por dentro, usa PostgreSQL, una de las bases de datos más respetadas del mundo. Pero no necesitas saberlo para empezar: Supabase pone encima una interfaz visual clara, parecida a una hoja de cálculo, y además crea automáticamente una API para que tu sitio se comunique con la base de datos. Es la forma más rápida de que un principiante tenga una base de datos real en línea.

2

Crear tu proyecto en Supabase

Antes de crear tablas, necesitas un proyecto en Supabase. Piensa en el proyecto como la «caja» que guardará todo: la base de datos, los archivos y la autenticación. Todo lo de una aplicación está dentro de un proyecto. Vamos a crear el tuyo paso a paso.

1

Crea tu cuenta

Accede supabase.com y haz clic en "Start your project". Lo más sencillo es iniciar sesión con tu cuenta de GitHub (la misma que ya creaste en la Trilha 1). Un clic y ya estás dentro.

2

Crea una organización

La primera vez, Supabase te pide el nombre de una organización. Es solo una agrupación de proyectos (p. ej., "mis-estudios"). Elige el plan Gratis: es gratis y suficiente para aprender e incluso para tener proyectos pequeños en línea.

3

Configura el proyecto

Ahora los datos del proyecto. Importan tres campos:

  • •Name: el nombre del proyecto, ej.: meu-primeiro-app
  • •Database Password: una contraseña segura para el banco. Guarda esa contraseña, la necesitarás más adelante.
  • •Region: elige la región más cercana a ti (p. ej.: South America (Sao Paulo)) para que la base de datos responda más rápido.
4

Espera a que la base de datos «despierte»

Haz clic en "Create new project". Supabase tarda aproximadamente 1 a 2 minutos configurando tu base de datos en la nube. Cuando termine, llegarás al panel del proyecto. Listo: ya tienes una base de datos real en funcionamiento.

👁 Qué vas a ver en la pantalla

Al abrir el panel del proyecto, fíjate en la barra lateral izquierda. Ahí trabajarás en todo el curso:

  • 📊Editor de tablas: tu "hoja de cálculo" para crear y ver tablas.
  • 💻SQL Editor: dónde escribes comandos para la base de datos.
  • 🔑Authentication: registro e inicio de sesión de usuarios.
  • ⚙️Settings > API: las claves para que tu sitio se conecte.

⚠️ Error común

Problema: "Perdí la contraseña de la base de datos (Database Password) y ahora no sé cómo conectarme."
Solución: Para la mayoría de las cosas del curso vas a usar las claves de API, no esta contraseña. Pero si la necesitas y la perdiste, ve a Settings > Database y haz clic en "Reset database password" para generar una nueva. La próxima vez, guarda la contraseña en un administrador de contraseñas en cuanto crees el proyecto.

3

Tablas, columnas y tipos

Dentro de la base de datos, los datos viven en tablas. Cada tabla guarda un tipo de cosa: una tabla usuarios, otra tarefas, otra mensagens. Las columnas son la información de cada elemento, y cada columna tiene un tipo que indica qué contenido acepta.

🧠 Analogía: tabla = hoja, fila = ficha, columna = campo

Piensa en un archivador. La tabla es un cajón («Usuarios»). Cada línea es la ficha de una persona. Cada columna y es un campo de la ficha: "Nombre", "Email", "Fecha de registro". El tipo y es la regla del campo: "Edad" solo acepta números, "¿Registrado?" solo acepta sí o no.

Los tipos que más vas a usar

text

Texto: nombres, correos electrónicos, mensajes, cualquier palabra o frase.

int (int8)

Número entero: edad, cantidad, puntuación.

bool

Verdadero o falso: «¿activo?», «¿completado?». Solo acepta true/false.

timestamp

Fecha y hora: cuándo se creó o actualizó algo.

🔑 La clave primaria (Primary Key)

Toda tabla tiene una columna especial, generalmente llamada id, que es la clave primaria. Es el número de identidad de cada fila: nunca se repite y nunca queda vacío. Así es como la base de datos sabe que la fila "Ana con id 1" es distinta de otra "Ana con id 7". En Supabase, al crear una tabla, la columna id ya viene lista como clave primaria que se completa automáticamente.

Ejemplo: la tabla tarefas

# Columnas y tipos

id int8 (clave primaria)

titulo text "Comprar pao"

concluida bool false

criada_em timestamp 2026-06-17 10:00

En Table Editor, lo creas haciendo clic en "New table" y poniéndole el nombre tarefas y es agregar cada columna con su tipo.

✓ Qué HACER

  • ✓Nombres de tablas en plural y en minúscula: usuarios
  • ✓Elegir el tipo correcto (número en int, texto en text)
  • ✓Dejar la columna id como clave primaria automática

✗ Qué NO hacer

  • ✗Guardar número en una columna text si vas a hacer cálculos
  • ✗Usar acentos o espacios en los nombres de las columnas
  • ✗Crear una tabla gigante para todo (separa por tema)
4

Insertar y consultar datos

Tabla creada, ahora viene la parte divertida: poner datos dentro e pedir esos datos de nuevo. Puedes hacer esto de dos maneras en Supabase: haciendo clic en la interfaz (el Table Editor) o escribiendo comandos SQL. Veamos ambas, empezando por la más fácil.

👁 Desde la interfaz: Table Editor

En Table Editor, es como editar una hoja de cálculo:

  • •Haz clic en tu tabla tarefas en la lista de la izquierda.
  • •Haz clic en "Insert" > "Insert row" para agregar una línea nueva.
  • •Completa los campos (deja el id en blanco, se completa solo) y guarda.
  • •La línea aparece de inmediato en la tabla. Listo, insertaste un dato.

Desde SQL: insert (insertar datos)

En el SQL Editor, escribes un comando para insertar. Se lee casi como en inglés: «inserta en la tabla tareas, en las columnas título y completada, los valores...»

insert into tarefas (titulo, concluida)

values ('Comprar pao', false);

# Lo que responde la base de datos:

Success. 1 row inserted

Desde SQL: select (consultar datos)

O select y es como si preguntaras: "muéstrame los datos". El * significa "todas las columnas".

# Obtener todo de la tabla

select * from tarefas;

# Lo que devuelve la base de datos:

id | título | completada

1 | Comprar pan | false

# Solo las tareas que aún no se completaron

select titulo from tarefas where concluida = false;

título

Comprar pan

💡 Consejo: El where y es tu filtro

Casi siempre no quieres TODOS los datos, solo algunos. La palabra where y el filtro: where concluida = false trae solo las que no están completadas. Sin where, viene todo. Empieza siempre probando con select antes de modificar los datos en serio.

⚠️ Error común

Problema: "Escribí el texto sin comillas y hubo un error de sintaxis."
Solución: En SQL, todo valor de texto (text) va entre comillas simples: 'Comprar pao', no Comprar pao. Números (int) y booleanos (true/false) van sin comillas. Y no olvides el ; al final del comando.

5

La API automática de Supabase

Aquí viene la magia. En cuanto creas una tabla, Supabase crea una API por sí solo para que tu sitio se comunique con la base de datos. No necesitas programar ningún servidor. Tu sitio en Vercel llama a esta API y recibe los datos de vuelta. Es como si la base de datos tuviera un «teléfono» para que tu app la llame.

🧠 Analogía: el banco consiguió un mesero

Imagina la base de datos como la cocina de un restaurante. Tu sitio no entra en la cocina (sería peligroso). En su lugar, habla con un mesero: la API. El sitio hace el pedido ("tráeme las tareas"), el mesero va a la cocina, las busca y vuelve con el plato. La API es ese mesero: organizada, segura y siempre disponible.

🔑 Dónde están la URL y la clave (anon key)

Para que tu sitio se conecte, necesita dos cosas, que están en Settings > API:

  • •URL del proyecto: la dirección de tu base de datos, algo como https://abc123.supabase.co
  • •clave anon: la clave pública, que el sitio usa en el navegador. Puede aparecer en tu código del front-end.

A anon key y es seguro exponerla porque por sí sola solo puede hacer lo que tú le permitas (ese es el tema del siguiente apartado). La otra clave, la service_role, y es secreta: nunca la pongas en el front-end.

Usar el cliente JS de Supabase

La forma más común en un sitio es usar la biblioteca supabase-js. Te conectas una vez con la URL y la anon key; después, solicitas los datos en una línea:

// 1. conectar a tu base de datos

const supabase = createClient(

'https://abc123.supabase.co',

'sua-anon-key-aqui'

)

// 2. pedir los datos (como: select * from tarefas)

const { data, error } = await supabase

.from('tarefas')

.select('*')

// 3. lo que vuelve en "data":

[ { id: 1, titulo: 'Comprar pan', concluida: false } ]

💡 También se puede usar mediante REST puro

Si no usas la biblioteca, la misma API responde por REST (HTTP). Una llamada GET para /rest/v1/tarefas con la anon key en el encabezado devuelve el mismo JSON. Vas a profundizar en esto en el módulo 2.3, sobre APIs. Por ahora, basta con saber: tabla creada = API lista, gratis.

6

Autenticación básica y RLS

Casi todas las aplicaciones necesitan inicio de sesión: un usuario crea una cuenta, inicia sesión con correo electrónico y contraseña, y solo ve lo que le pertenece. Supabase ya incluye esto en la sección Authentication. No necesitas guardar contraseñas (Supabase lo hace de forma segura) ni crear pantallas de registro desde cero en el servidor.

Registrarse e iniciar sesión (sign up / sign in)

Con el cliente JS, crear una cuenta e iniciar sesión son dos llamadas sencillas:

// crear una cuenta nueva (sign up)

await supabase.auth.signUp({

correo electrónico: 'ana@email.com',

password: 'senha-secreta'

})

// iniciar sesión con una cuenta existente (sign in)

await supabase.auth.signInWithPassword({

correo electrónico: 'ana@email.com',

password: 'senha-secreta'

})

// respuesta del sign in: un usuario con sesión iniciada

{ user: { id: 'uuid...', email: 'ana@email.com' } }

El usuario registrado aparece en la lista en Authentication > Users en el panel.

🔒 RLS en una frase

RLS (Row Level Security, «seguridad por fila») es la regla que decide quién puede ver y modificar cada línea de la tabla. Sin RLS, o todo queda bloqueado, o cualquiera con la anon key puede leerlo todo. Con RLS activado, escribes una regla del tipo «cada usuario solo ve sus propias tareas». Es el candado que hace que la anon key sea segura en el navegador.

✓ Qué HACER

  • ✓Activar RLS en todas las tablas con datos de usuarios
  • ✓Usar una anon key en el front-end (y es pública)
  • ✓Dejar que Supabase guarde las contraseñas por ti

✗ Qué NO hacer

  • ✗Exponer la clave service_role en el sitio
  • ✗Dejar una tabla con datos sensibles sin RLS
  • ✗Guardar la contraseña en texto en una columna tuya

⚠️ Error común

Problema: "Activé RLS y ahora mi consulta vuelve vacía, aunque haya datos."
Solución: Cuando activas RLS, por defecto todo queda bloqueado hasta que crees una policy (regla) que lo permita. Ve a Authentication > Policies y crea una regla de lectura. Para probar mientras aprendes, puedes crear una policy sencilla de "permitir la lectura a usuarios con sesión iniciada".

📚 Resumen del módulo

✓
Una base de datos es una hoja de cálculo potenciada - en la nube, varias apps consultan al mismo tiempo
✓
Proyecto en Supabase - cuenta, organización, región y contraseña de la base de datos
✓
Tablas, columnas y tipos - text, int, bool, timestamp y la clave primaria id
✓
insert y select - insertar y consultar desde el Table Editor o mediante SQL
✓
API automática y autenticación - anon key, cliente JS, inicio de sesión y RLS para proteger

Siguiente módulo:

2.3 - APIs: Cómo se comunican los sistemas (entiende las solicitudes, JSON y consume datos externos)