ImageFX from Google.

De Vibe Coding a Vibe Engineering con V0 y Firebase. [Parte 0].

Así como lo escuchan, en este tutorial vamos a subir el síndrome del impostor al máximo haciendo una web app full stack con:

• Firebase Auth para autenticación.
• Firestore para guardar datos en tiempo real,
• y Firebase Hosting para que lo puedas mostrar y no tengas que decir: "en mi máquina funciona".
• Probaremos Firebase Studio.

Pero esta vez no vamos a hacer otro “Login + Hola Mundo”. Vamos a construir algo con propósito: una plataforma de gestión de préstamos y devoluciones de libros para una librería pública. Y sí, vamos a generar QRs que faciliten la devolución.

Primera fase: Planificación y objetivos

Un dicho popular es que

No se comienza una casa por el techo…

Y aunque V0 de Vercel nos permite arrancar por la fachada, vamos a hacer las cosas bien. Además, probaremos Firebase Studio.

Antes de comenzar a enviar prompts, dejamos claro lo que vamos a construir:

El qué

Una app de gestión para librerías, con:

• CRUD completo de libros.
• Sistema de préstamo y devolución.
• Generación de QR para identificar préstamos escaneables.
• Lectura de códigos QR para facilitar el marcar como entregados.
• Y funciones sociales para crear un club de lectura donde los usuarios puedan intercambiar libros y experiencias (plus opcional).

El porqué

Queremos resolver un problema real: Gestionar una librería pública (o comunitaria) de forma sencilla, moderna y digital, así como fomentar el hábito de la lectura.

Además, de ser una excelente excusa para practicar nuestras habilidades:

• Arquitectura con Next.js 14/15.
• Componentes UI generados con V0 (y luego pulidos a mano).
• Firebase como backend; también se podría con otras alternativas.
• Buenas prácticas de CRUD (crear, leer, actualizar, borrar).

La premisa

Gestionar la entrada y salida de libros de un lugar en concreto, además de crear una mini comunidad que funcione como club de libros:

Gestionar el préstamo y devolución de libros en una librería pública.

Todo esto usando:

• **v0.dev** para crear UI de manera ágil sin perder estilo.
• Firebase Studio.
• Next.js como framework web que es, ya usado por v0.
• **Firebase** para autenticación, base de datos y hosting.
• IDX como editor de texto en la nube.
• Códigos QR: para facilitar la devolución física de libros. Los cuales serán para escanear: yudiel/react-qr-scanner y por qrcode.react.

La lógica

Consideramos que existirá alguien con la función de bibliotecario/a = individuo responsable de los libros. Este bibliotecario/a desempeña un papel administrativo, pues sus responsabilidades incluyen registrar nuevos libros, modificar existencias o rectificar errores tipográficos al ingreso, además de eliminar la disponibilidad de ciertos libros, comprobar que los libros sean devueltos en qué estado fueron devueltos y si fueron devueltos a tiempo, y identificar dónde se encuentran los libros, como por ejemplo, Sci-Fi repisa 2, etc., por lo que solo los administra

Como usuario, quiero buscar un libro y saber si está disponible, por lo que la pantalla principal debe ser la vista con un buscador de libros para poder buscarlos por nombre, ISBN o categoría. y saber en qué estante o lugar está. Otra situación en la que el usuario ya ha localizado el libro y ha escaneado el código QR para solicitarlo en préstamo; para ello, debe estar registrado o iniciar sesión, dado que el control de bibliotecas, clubes de lectura, etc., requiere que el usuario posea una membresía o haya proporcionado una identificación para el préstamo. Muchas veces los préstamos son solo en el lugar, pero para este caso lo simplificaremos haciendo que todos los libros disponibles puedan ser prestados y, como única identificación, que sea la cuenta de Google que se usó para pedir el libro o libros prestados.

Otros temas a considerar: "seguridad".

Estas pueden ser tanto físicas como virtuales y dependerán de cómo esta biblioteca opere. Las bibliotecas públicas operan de la siguiente forma: usualmente, existe una recepción donde se ubica el bibliotecario, quien proporciona acceso al área de lectura. Usualmente, este es el encargado de pedir un libro y asignarlo al individuo mediante el número de membresía o mediante el registro de los datos del peticionario. En otras ocasiones se puede ingresar al área de lectura; si deseamos llevar el libro a casa, debe ser escaneado y asignado. Algunas veces se nos envía los detalles junto al tiempo.

De manera virtual, asegurarnos de que el usuario deba iniciar sesión para poder pedir prestado un libro, proteger las rutas para que solo los administradores tengan acceso a partes vitales del CRUD. Es posible establecer un sistema de reputación para restringir la cantidad de libros que un usuario puede pedir mediante datos como la fecha en que se creó la cuenta, si ya realizó el proceso de verificación o si cuenta con una membresía válida, si ya ha devuelto libros en el pasado y si ha hecho esto en el tiempo adecuado. En Firebase, es esencial dividir adecuadamente los documentos y establecer en las reglas de Firebase de tal forma que solo ciertos usuarios puedan leer ciertos documentos, pero no pueden eliminar o modificar si no poseen el rol requerido; esta sección será detallada en artículos subsiguientes.

Después de este ejercicio para determinar la lógica detrás del proyecto, notaremos que hicimos algo muy similar al pseudocódigo.

Así que en el siguiente artículo configuraremos todo lo necesario para nuestro proyecto desde Firebase a v0 y también utilizaremos Firebase Studio antes de IDX como IDE, así como la creación del prompt a través de un pseudocódigo.

En los siguientes artículos exploraremos Copilot, Cursor y otras herramientas de inteligencia artificial para acelerar nuestros tiempos de desarrollo, ya que al final del día la IA es una herramienta, más no un reemplazo.