Inicio · Sesión 1 · Sesión 2 · Sesión 3
Hoy tu página aprende a escuchar: le agregas un formulario de contacto y cada mensaje que te dejen queda guardado en una base de datos. Después conectas el agente de Antigravity a esa base de datos, para que te responda en español qué te escribieron.
▶ Video: próximamente.
📝 Pad de la clase: pad.riseup.net/p/vibe-coding-sesion3-22oct. Escribe tu nombre en cada check-in y marca tu estado.
Vamos de a una. Lo que no se explica hoy, funciona igual: confía en la magia.
En el pad de la clase escribe tu nombre debajo de cada check-in y marca tu estado:
Firebase es un servicio de Google que le da a tu página lo que no tiene sola: una base de datos, usuarios, archivos. Hoy usamos solo la base de datos.
mi-landing. Debajo del nombre aparece el ID del proyecto: anótalo, lo vas a usar en el paso 8.Firestore en el buscador de arriba.rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /mensajes/{mensaje} {
allow create: if request.resource.data.keys().hasOnly(['nombre', 'correo', 'mensaje', 'fecha'])
&& request.resource.data.nombre is string
&& request.resource.data.correo is string
&& request.resource.data.mensaje is string
&& request.resource.data.mensaje.size() <= 2000
&& request.resource.data.fecha == request.time;
allow read, update, delete: if false;
}
}
}
Listo si ves la pestaña Datos vacía y, en Reglas, el aviso de que se publicaron.
En una frase: cualquiera puede dejarte un mensaje, pero nadie puede leerlos, cambiarlos ni borrarlos desde tu página. Tú los ves en la consola de Firebase y, en la Parte 2, el agente los lee con tu cuenta.
Registras tu página en Firebase y, a cambio, te da un bloque de código con la dirección de tu base de datos.
</> si ya lo ves en la página principal.</> (Web).landing. No marques Firebase Hosting (ya publicas con GitHub Pages). Registrar app.<script> (no npm). Aparece un bloque de código que empieza con <script type="module">. Cópialo todo con el botón de copiar. Lo vas a pegar en el paso 4. No cierres esta pestaña hasta terminar el paso 4; si se te pierde, mira cómo recuperarlo.¿Esa
apiKeyes secreta? No. Es la dirección de tu base de datos y está bien que sea pública. Lo que protege tus mensajes son las reglas del paso 2.
Primero, que los datos lleguen a Firebase. Que se vea bonito va en el paso 5.
Antes del footer (o al final de la página, si no tienes), agrega una sección de contacto con un formulario: nombre, correo, mensaje y un botón "Enviar". Usa el mismo estilo del resto de la página.
Conéctalo con Firebase usando JavaScript puro (sin npm ni frameworks), en un archivo nuevo app.js, enlazado al final de index.html con <script type="module" src="app.js"></script>.
Usa este bloque de Firebase y agrega Firestore desde el mismo CDN y la misma versión:
[pega aquí el bloque que copiaste en el paso 3]
Cada envío se guarda en la colección "mensajes" con los campos nombre, correo, mensaje y fecha (con serverTimestamp). Exactamente esos nombres.
app.js y a tocar index.html. Revisa y acepta. No hace falta entender el código: confía en la magia.mensajes. Haz clic en ella. Si no la ves, refresca la página de Firebase.aB3xK9...). A la derecha ves tus campos: nombre, correo, mensaje y fecha.✅ Victoria 1. Tu página tiene memoria: lo que alguien escribe queda guardado en tu base de datos.
📝 Marca tu estado en el pad.
Los nombres de la colección y de los campos tienen que ser exactamente esos: las reglas del paso 2 solo aceptan esos. Si no aparece nada, mira Problemas frecuentes.
¿Perdiste el bloque de Firebase? Haz clic en el engranaje ⚙ junto a Descripción general → Configuración del proyecto. Baja hasta Tus apps, elige CDN y cópialo con el botón de copiar.
Los datos ya se guardan, pero quien escribe no se entera. Ahora le respondes en la página.
¿Vas atrasado? Salta al paso 6: este lo puedes hacer después, en el taller.
Cuando el mensaje se guarde en Firebase, cambia el formulario por: "¡Gracias por escribirme, [nombre]! Te respondo pronto a tu correo [correo]."
Pon el nombre y el correo con textContent, no como HTML.
Mientras se guarda, desactiva el botón y muestra "Enviando...". Si falla, muestra "No se pudo enviar, intenta de nuevo".
La línea de textContent evita que alguien meta código en tu página escribiéndolo en el formulario.
mensajes: aparece el documento nuevo.¿Y las reglas? Siguen igual. El agradecimiento usa lo que la persona acaba de escribir en el formulario, no lo lee de la base de datos. Por eso tu página puede saludarla por su nombre sin que nadie pueda leer los mensajes de los demás.
Sube a producción con el mensaje "Agregué formulario de contacto".
🎉 Tu página ya no solo muestra: también escucha.
Una base de datos es un lugar ordenado donde tu página guarda información para consultarla después. Piensa en una hoja de cálculo:
| En Firestore | En una hoja de cálculo | En tu página |
|---|---|---|
| Colección | Una hoja | mensajes |
| Documento | Una fila | Un mensaje que alguien te dejó |
| Campo | Una columna | nombre, correo, mensaje, fecha |
Y las reglas son quién puede hacer qué con esa hoja: en tu página, cualquiera puede agregar una fila, pero solo tú puedes leerlas.
Sin base de datos, tu página es un cartel: todos ven lo mismo. Con base de datos, empieza a ser una herramienta: recuerda lo que la gente hace en ella.
Hasta ahora, para ver tus mensajes tenías que entrar a la consola de Firebase y abrirlos uno por uno. Ahora le das al agente de Antigravity acceso a tu base de datos, para que los lea por ti y te responda en español.
Eso se hace con MCP: un enchufe que le da al agente acceso a una herramienta, en este caso Firebase.
¿Por qué el agente sí puede leer y la página no? Tu página es pública, por eso sus reglas solo dejan escribir. El agente entra con tu cuenta de Google, como cuando abres la consola de Firebase.
¿No tienes Node.js? Instálalo desde nodejs.org (la versión LTS), reinicia Antigravity y sigue.
Busca Firebase en la lista y haz clic en Install.
Si quieres ver qué quedó instalado: Manage MCP Servers → View raw config. Debe aparecer algo así:
{
"mcpServers": {
"firebase-mcp-server": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
npx -y firebase-tools@latest login
Si te pregunta si quieres enviar datos de uso a Firebase, responde lo que prefieras. Se abre el navegador: elige la misma cuenta con la que creaste el proyecto y acepta. Cuando la terminal diga Success, ya está.
Pídele al agente, cambiando mi-landing por el ID de tu proyecto (el que anotaste en el paso 1):
Usa Firebase para leer la colección "mensajes" de mi proyecto mi-landing. ¿Qué me escribieron hoy? Resúmelo en una lista corta.
Prueba otras preguntas:
¿Alguien me pidió algo concreto? ¿Quién y qué?
¿Cuántos mensajes tengo y de cuántas personas distintas?
✅ Victoria 2. Ya no abres tus mensajes uno por uno: le preguntas al agente y te responde con lo que guardó tu página.
📝 Marca tu estado en el pad.
hasOnly en las reglas. Si el formulario deja de guardar, ya sabes dónde mirar.Recuerda subir cada cambio con un commit.
| Lo que pasa | Qué hacer |
|---|---|
| “Missing or insufficient permissions” al enviar | Los nombres no coinciden con las reglas. Revisa que la colección sea mensajes y los campos nombre, correo, mensaje y fecha, sin tildes ni mayúsculas. |
| No pasa nada al enviar | Clic derecho → Inspeccionar → Console. Copia el error en rojo y pégaselo al agente. |
La dirección empieza por file:// |
Abriste el archivo con doble clic. Ciérrala y usa Go Live: la dirección debe empezar por http://127.0.0.1. |
| Funciona en mi computador pero no en la página publicada | Faltó el push, o Actions no ha terminado. Revisa que el commit esté en GitHub. |
El agente dice que no encuentra npx |
Falta Node.js. Instálalo desde nodejs.org y reinicia Antigravity. |
| El agente no ve tu proyecto | Iniciaste sesión con otra cuenta de Google. En la terminal: npx -y firebase-tools@latest logout y después login con la cuenta del proyecto. |
Los términos de las sesiones anteriores están en los glosarios de la sesión 1 y la sesión 2.
| Término | Qué es |
|---|---|
| Base de datos | Un lugar ordenado donde tu página guarda información para consultarla después. |
| Campo | Un dato dentro de un documento. Como una columna: nombre, correo, mensaje, fecha. |
| CDN | Un servidor que entrega código listo para usar, sin instalar nada. De ahí sale Firebase en tu página. |
| Colección | Un grupo de documentos del mismo tipo. Como una hoja de cálculo. La tuya se llama mensajes. |
| Consola de Firebase | La página web donde administras tu proyecto y ves los mensajes guardados. |
| Consola del navegador | Clic derecho → Inspeccionar → Console. Ahí aparecen los errores de tu página, en rojo. |
| Documento | Un registro dentro de una colección. Como una fila: un mensaje que alguien te dejó. |
| Firebase | Un servicio de Google que le da a tu página una base de datos, usuarios y archivos. |
firebaseConfig |
La dirección de tu proyecto de Firebase. Puede ser pública: lo que protege tus datos son las reglas. |
| Firestore | La base de datos de Firebase que usamos hoy. |
| Formulario | Los campos donde alguien escribe y el botón para enviar. |
| MCP | Un enchufe que le da al agente acceso a una herramienta externa, como tu base de datos. |
| Node.js | Un programa que deja correr herramientas de JavaScript en tu computador. Lo necesita el enchufe de Firebase. |
| Reglas de seguridad | Quién puede hacer qué con tu base de datos. En la tuya: cualquiera puede dejar un mensaje, nadie puede leerlo desde la página. |
| SDK | Una caja de herramientas de código para hablar con un servicio, en este caso con Firebase. |
serverTimestamp |
La hora del servidor de Firebase. Así la fecha de cada mensaje no depende del reloj de quien lo envía. |