Crea tu primera app web respaldada por una base de datos con Google AI Studio y Cloud SQL

1. Antes de comenzar

Si alguna vez intentaste organizar una carrera de fin de semana con amigos o vecinos, sabes lo difícil que es: los lugares de encuentro se pierden en chats grupales interminables, la gente pregunta constantemente a qué ritmo corre cada uno y los recién llegados nunca saben con certeza quiénes van a asistir.

En este codelab, resolverás este problema cotidiano creando Running Club, una app web acogedora en la que los corredores locales pueden explorar sus rutas favoritas, programar reuniones de fin de semana, confirmar su asistencia con un solo clic y chatear con otros corredores.

¿Por qué esta app necesita una base de datos?

Una app de comunidad necesita una memoria confiable, conocida como base de datos. Cuando un corredor agrega una nueva ruta panorámica, confirma su asistencia a la carrera del sábado por la mañana o publica un comentario sobre el estacionamiento, esa información no puede desaparecer cuando cierra su teléfono o apaga su computadora. Una base de datos mantiene todas las rutas, las listas de asistentes y los mensajes de los miembros almacenados y organizados de forma segura para que todos los miembros del club vean información actualizada cada vez que abren la app.

Compilarás esta app con el modo Build de Google AI Studio. No es necesario que escribas código complejo ni que configures la infraestructura técnica por tu cuenta. Simplemente describe lo que quieres en un lenguaje sencillo. Google AI Studio genera la app, conecta una base de datos real de Cloud SQL para PostgreSQL para recordar tus datos y publica la app en vivo en Cloud Run para que tu comunidad pueda comenzar a usarla de inmediato.

Qué compilarás

Compilarás y lanzarás Running Club, una app web de la comunidad que incluye lo siguiente:

  • Acceso con Google: Acceso rápido y seguro con una Cuenta de Google existente
  • Perfiles de corredores: Perfiles de miembros que muestran las preferencias de carrera y el ritmo objetivo.
  • Biblioteca de rutas: Una colección de rutas favoritas del vecindario con distancia, dificultad de las colinas y puntos de encuentro.
  • Próxima programación de carreras: Un panel de eventos para organizar las próximas carreras grupales y vincularlas a rutas.
  • Confirmaciones de asistencia sencillas: Un botón con un solo clic para que los miembros digan “Asistiré” y vean quiénes más asistirán.
  • Ejecutar debates: Un espacio de comentarios en cada ejecución para coordinar detalles, hacer preguntas y compartir actualizaciones

Qué aprenderás

  • Cómo crear una app web funcional en Google AI Studio con una sola instrucción en lenguaje sencillo
  • Cómo Google AI Studio configura automáticamente el acceso con Google
  • Cómo Google AI Studio crea y conecta una base de datos real de Cloud SQL para PostgreSQL para recordar tus datos
  • Cómo agregar funciones nuevas y expandir tu base de datos simplemente chateando con la IA
  • Cómo verificar que los datos de tu club se guarden de forma segura en todas las visitas
  • Cómo publicar tu app en Internet con Cloud Run
  • Cómo ver tu app y base de datos activas en la consola de Google Cloud

Requisitos

  • Un navegador web moderno, como Google Chrome
  • Una Cuenta de Google estándar para acceder a Google AI Studio

Elegibilidad y límites de la edición Starter de Cloud SQL

Google AI Studio ofrece el nivel inicial de Google Cloud para ayudar a los creadores a experimentar con apps generativas y bases de datos administradas:

  • Elegibilidad:
    • Disponible para personas que usan una Cuenta de Google estándar
    • Las cuentas que no cumplen con los requisitos incluyen a los usuarios con cuentas de facturación de Google Cloud existentes o anteriores, así como a las cuentas asociadas con Google Workspace, Google Workspace for Education o Google para organizaciones sin fines de lucro.
    • Si tu cuenta no es apta para el nivel básico, puedes completar este codelab seleccionando un proyecto de Google Cloud existente con la facturación habilitada en AI Studio.
  • Especificaciones de recursos:
    • Aprovisiona una instancia de Cloud SQL para PostgreSQL Developer Edition que ejecute PostgreSQL 18.
    • Incluye 0.5 CPU virtual, 2 GB de RAM y 1 GB de almacenamiento. Esto debería ser suficiente para que ejecutes cientos de visitas diarias durante algunos meses o más, según la actividad.
    • Admite el escalamiento a cero, que pausa automáticamente el procesamiento cuando no hay conexiones de bases de datos activas para conservar la cuota.
  • Quota:
    • Incluye una cuota mensual gratuita de 50 unidades de procesamiento y 10 GB de almacenamiento.

2. Abre Google AI Studio y comienza una app nueva

Para comenzar, abre Google AI Studio en tu navegador. Este es tu espacio de trabajo de creación, en el que puedes compilar y probar apps simplemente describiendo lo que necesitas.

Paso 1: Accede a Google AI Studio

  1. Abre tu navegador web (como Google Chrome) y ve a aistudio.google.com.
  2. Haz clic en Comenzar y accede con tu Cuenta de Google estándar (como tu cuenta de Gmail).

Comenzar

  1. Si se te solicitan las condiciones del servicio en tu primera visita, revísalas y acéptalas para continuar.

Paso 2: Inicia una nueva solicitud

  1. En el panel central inferior, haz clic en Start building (Comenzar a crear) o en +New App (App nueva) en el panel de la derecha.

Comienza con la compilación

3. Comienza con un mensaje simple y Firebase Authentication

No necesitas diagramas de arquitectura complejos para comenzar. Puedes lanzar tu aplicación inicial, configurar el Acceso con Google y conectar tu base de datos con una sola oración.

Ingresa la instrucción inicial

En el cuadro de instrucción del modo de compilación de AI Studio, ingresa la siguiente instrucción y presiona Intro:

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Nueva app de AI Studio

Este vínculo completará automáticamente el cuadro de instrucciones por ti.

Conoce tu espacio de trabajo

Una vez que envíes tu instrucción, Google AI Studio abrirá el espacio de trabajo completo de la aplicación. Dedica un momento a observar las tres áreas principales de la pantalla:

Espacio de trabajo de AI Studio

  • El cuadro de chat o de instrucciones (en la parte inferior): Aquí es donde sigues chateando con la IA en lenguaje natural para agregar funciones, ajustar diseños o hacer preguntas.
  • El área de archivos y código (lado izquierdo): Muestra los archivos que crea la IA tras bambalinas. No es necesario que escribas ni edites código por tu cuenta, pero este panel te permite ver cómo la IA crea las partes de tu app.
  • La ventana de vista previa en vivo (lado derecho): Muestra tu app en funcionamiento en tiempo real. Puedes hacer clic en botones, escribir en campos de texto y probar tu app directamente en esta ventana en cuanto se genere.
  • El editor de código (lado derecho): Muestra el código real que genera la IA. Puedes editarla si lo deseas, pero no es obligatorio.
  • Implementación y uso compartido (esquina superior derecha): Aquí puedes implementar tu app en Internet y compartirla con otras personas.

Qué hace Google AI Studio automáticamente

Mientras la IA procesa tu solicitud, puedes ver cómo compila tu app paso a paso:

  1. Configura el Acceso con Google: La IA integra automáticamente el Acceso con Google para que los corredores puedan acceder de forma segura con sus Cuentas de Google, sin necesidad de administrar contraseñas de usuarios ni parámetros de configuración de seguridad.
  2. Conecta una base de datos real: La IA configura una base de datos administrada de Cloud SQL para almacenar los datos de tu comunidad. Si se te solicita, haz clic para habilitar la base de datos de tu proyecto.

Nueva app de AI Studio

  1. Organiza tus tablas de datos (schema.ts): Piensa en un esquema de base de datos como una colección de hojas de cálculo organizadas. La IA crea automáticamente la estructura de almacenamiento de tu app:
    • usersTabla : Almacena los perfiles, los nombres, los avatares y el ritmo de carrera de los miembros.
    • Tabla runs: Almacena los eventos programados con su título, distancia, ritmo objetivo, ubicación y fecha.
    • Tabla comments: Almacena los mensajes y las preguntas que dejan los corredores en cada carrera.
    Todos esos cambios se realizan automáticamente en el área de código, y puedes ver cómo se organizan estas categorías si cambias de Preview a la pestaña Code. Sin embargo, no necesitas escribir el código por tu cuenta, ya que todo se hace automáticamente.Nueva app de AI Studio(Nota: Nunca necesitas escribir ni editar este código de forma manual. La IA lo actualiza por ti cada vez que solicitas funciones nuevas).
  2. Crea la interfaz visual: La IA crea las páginas web que ves en la pantalla, incluidos el encabezado, la lista de carreras próximas, el formulario de creación de eventos y la sección de comentarios.

Verifica la autenticación y ejecuta la publicación

Una vez que finalice la generación, prueba tu nueva app en el panel Preview:

  1. En la ventana de vista previa, haz clic en Member Sign In (Acceder como miembro) o en el botón Post Upcoming Run (Publicar próxima carrera), que activará la autenticación.
  2. Autentícate con tu Cuenta de Google a través del diálogo de Firebase Auth.
  3. Una vez que accedas, el nombre y el avatar de tu perfil de Google aparecerán en la barra de navegación, y tus preferencias de ritmo se administrarán automáticamente.
  4. En el formulario "Publicar próxima ejecución", ingresa un título (por ejemplo, Morning 5K Shakeout).
  5. Selecciona una fecha y hora, y, luego, ingresa una ubicación para la reunión (por ejemplo, Central Park West Entrance).
  6. Haz clic en PublishRun. Nueva app de AI Studio
  7. Confirma que la nueva carrera aparezca de inmediato en el feed de carreras próximas, con el nombre de tu perfil autenticado y la insignia de ritmo como organizador. Nueva app de AI Studio
  8. Publica un mensaje rápido en la sección de discusión de la carrera (como Bringing extra water bottles!) y verifica que aparezca en el hilo de comentarios.

4. Cómo crear una biblioteca de rutas

Los clubes de corredores suelen reutilizar rutas locales populares. En lugar de escribir la misma información de la ruta una y otra vez, puedes permitir que los miembros guarden sus rutas favoritas en un catálogo y las adjunten cada vez que programen una carrera.

Pídele a la IA que agregue la biblioteca de rutas

En el cuadro de instrucciones del chat, escribe la siguiente solicitud y presiona Intro:

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Nueva app de AI Studio

Para que esto funcione, la IA crea automáticamente una nueva tabla de almacenamiento para rutas y la conecta directamente a la tabla de ejecuciones. Esta conexión es lo que permite que tu app extraiga automáticamente los detalles de distancia y ubicación cada vez que un organizador elige una ruta.

(De nuevo, no es necesario que modifiques este código: la IA actualiza la estructura de la base de datos por ti).

Prueba tu nueva biblioteca de rutas en la versión preliminar

Una vez que la IA termine de actualizar tu app, prueba la nueva función de rutas en la ventana de vista previa en vivo:

  1. En la navegación de la app, haz clic en la pestaña Biblioteca de rutas. Si no ves esa pestaña, revisa la parte inferior de la vista previa en vivo. Es posible que te pida que presiones el botón Guardar para actualizar la vista previa. Si no te ayuda, intenta interactuar con la IA en la ventana de chat y pregunta dónde se encuentra tu biblioteca de rutas.
  2. Haz clic en Save New Route (o Add Route) y completa algunos detalles de ejemplo:
    • Título de la ruta: Riverfront Trail Loop
    • Distancia: 8.5 km
    • Dificultad: Moderate
    • Ubicación de inicio: Waterfront Pier 4
  3. Haz clic en Guardar en la biblioteca.
  4. Ahora, programa una ejecución con esta ruta haciendo clic en el botón Schedule Run directamente en la tarjeta de la ruta nueva. Nueva app de AI Studio
  5. Observa cómo los detalles de distancia, dificultad y ubicación se completan automáticamente.
  6. Haz clic en Publicar ejecución y verifica que tu nueva ejecución de grupo aparezca en el feed principal.

5. Implementa las confirmaciones y las invitaciones de miembros

Las apps de la comunidad prosperan gracias a la participación. Puedes permitir que los corredores vean quiénes asistirán a una carrera próxima, registrarse con un solo clic y compartir un vínculo de invitación con amigos.

Pedirle a la IA que agregue invitaciones y confirmaciones de asistencia

En el cuadro de instrucciones del chat, escribe la siguiente solicitud y presiona Intro:

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Cómo la IA hace un seguimiento de los asistentes tras bambalinas

Para hacer un seguimiento de los corredores que asisten a cada carrera, la IA crea automáticamente una tabla rsvps en tu base de datos. Piensa en esto como una hoja de inscripción digital que vincula el nombre de un corredor a un evento específico.

(No es necesario que escribas ni edites este código. La IA administra esta hoja de registro en tu base de datos automáticamente).

Prueba las confirmaciones y las invitaciones en la vista previa

Una vez que la IA termine de actualizar tu app, prueba las nuevas funciones de confirmación de asistencia en la ventana de vista previa en vivo:

  1. En la ventana de vista previa, busca una carrera próxima en tu feed de la página principal.
  2. Haz clic en el botón Unirse a la carrera (o Confirmar asistencia).
  3. Confirma que tu nombre y avatar aparezcan en la sección Corredores que asistirán y que el contador de asistentes aumente en 1.
  4. Haz clic en Copiar vínculo de invitación y verifica que se haya generado un vínculo para compartir.

Nueva app de AI Studio

6. Persistencia de datos de prueba y Cloud SQL reducción de escala a cero

Cuando desarrollas una app, lo más importante es saber que la información de tu comunidad está segura. Si actualizas el navegador, cierras la pestaña o apagas la computadora, querrás que todas tus rutas, confirmaciones de asistencia y debates guardados sigan ahí cuando vuelvas.

En este paso, probarás que tus datos se guarden de forma segura en tu base de datos de Cloud SQL y aprenderás cómo Google Cloud ahorra energía y costos cuando tu app no está activa.

Prueba la actualización de tu app

  1. Haz clic en el botón Reload dentro de la ventana de vista previa de AI Studio (o actualiza la pestaña del navegador).

Nueva app de AI Studio

  1. Mira tu app en la vista previa: Observa que todo lo que creaste (tu perfil de miembro, las rutas guardadas, las carreras programadas, las confirmaciones de asistencia y los comentarios) sigue donde lo dejaste.
  2. Tu app no solo almacenó información de forma temporal en la pantalla, sino que la almacenó de forma segura en tu base de datos de Cloud SQL.

Cómo Cloud SQL ahorra energía y costos ("reducción de escala a cero")

¿Qué sucede cuando nadie usa la app de tu club de corredores en medio de la noche?

  • Suspensión automática ("reducción de escala a cero"): Cuando nadie visita la app ni se registra para correr, la base de datos se pausa automáticamente para conservar recursos.
  • Activación instantánea: En cuanto un corredor abre la app o hace clic en un vínculo de invitación, la base de datos se activa al instante con toda la información guardada lista para usar.
  • Costo de inactividad cero: Como se suspende cuando está inactiva, no usas recursos de procesamiento cuando la app no está en uso.

7. Publica e implementa en Cloud Run

Ahora que tu app de Running Club está compilada y probada en la vista previa, es hora de compartirla con tu comunidad. No necesitas comprar alojamiento web ni configurar servidores. Puedes lanzar tu app en Internet con un solo clic.

Publica tu app en la Web

  1. En la esquina superior derecha de Google AI Studio, haz clic en el botón Publicar.
  2. Aparecerá una ventana de resumen que confirmará los detalles:
    • Alojamiento: Se aloja y se implementa en Google Cloud Run. Nueva app de AI Studio
    • Servicios conectados: Acceso con Google y tu base de datos de Cloud SQL. Nueva app de AI Studio
  3. Haz clic en Publicar para lanzar tu app. Nueva app de AI Studio

Abre y comparte tu app en vivo

  1. Cuando se complete la publicación, Google AI Studio te proporcionará tu dirección web activa junto con un código QR. Nueva app de AI Studio
  2. Haz clic en el vínculo para abrir tu app web en vivo en una nueva pestaña del navegador o escanea el código QR con la cámara de tu teléfono.
  3. Pruébalo en tu teléfono: Accede a tu cuenta en tu teléfono, confirma tu asistencia a una de las carreras que programaste antes en tu computadora y mira cómo se actualiza el recuento de asistentes en tiempo real, todo gracias a tu base de datos compartida de Cloud SQL.

8. (Bonus) Inspecciona tus recursos en la consola de Google Cloud

Cuando Google AI Studio compila e implementa tu app, no la encierra en una caja negra privada, sino que crea servicios de Google Cloud reales y listos para producción en tu nombre. Piensa en la consola de Google Cloud como el centro de control en el que puedes ver tu app y tu base de datos en vivo.

Paso 1: Abre la consola de Google Cloud

  1. En una pestaña nueva del navegador, abre la consola de Google Cloud.
  2. En la parte superior de la pantalla, haz clic en el menú desplegable del proyecto y selecciona el proyecto creado para tu app de AI Studio (su nombre suele comenzar con continual-run-).

Paso 2: Consulta dónde se ejecuta tu app web (Cloud Run)

  1. En la barra de búsqueda superior, escribe Cloud Run y selecciónalo en los resultados. Nueva app de AI Studio
  2. Haz clic en el nombre de tu app (por ejemplo, running-club). Nueva app de AI Studio
  3. Aquí puedes explorar el motor que aloja tu sitio web:
    • Métricas: Gráficos útiles que muestran cuántas personas visitan tu sitio web.
    • Registros: Son un registro de actividad en vivo que muestra lo que sucede cuando los visitantes interactúan con tu app.

Paso 3: Observa tu base de datos en acción (Cloud SQL)

  1. En la barra de búsqueda superior, escribe Cloud SQL y selecciónalo en los resultados.
  2. Haz clic en tu instancia de base de datos de PostgreSQL. Nueva app de AI Studio
  3. Aquí puedes ver los detalles de tu base de datos activa, lo que confirma que está activa y lista para almacenar los datos de tu club de corredores. Nueva app de AI Studio

9. Limpia los recursos

Si compilaste esta app como un proyecto de práctica, puedes borrarla fácilmente. Si planeas seguir usando la app de Running Club con tu comunidad, puedes dejarla en funcionamiento.

  1. En Google AI Studio, haz clic en Mis apps en la barra lateral izquierda.
  2. Busca la app de Running Club.
  3. Haz clic en Borrar app (o en el ícono de la papelera). De esta manera, se desactivará tu página web publicada y se quitará la base de datos de prueba en un solo paso. Nueva app de AI Studio

10. Felicitaciones

Compilaste, personalizaste y publicaste tu primera app web respaldada por una base de datos con Google AI Studio y Cloud SQL.

Visita este vínculo para reclamar la insignia de Completed Builder Journey.

Para continuar tu recorrido, ve a goo.gle/builders para realizar el siguiente lab.

Qué lograste

  • Compiló una app con lenguaje sencillo: Creó una app completa para un club de corredores comunitario con instrucciones simples.
  • Acceso con Google habilitado: Configura automáticamente el acceso seguro con Cuentas de Google.
  • Conectamos una base de datos real: Almacenamos rutas, ejecuciones programadas, confirmaciones de asistencia y debates de forma segura en Cloud SQL.
  • Funciones agregadas de forma conversacional: Se creó una biblioteca de rutas y un seguimiento de confirmaciones de asistencia con solo chatear con la IA.
  • Publicación en la Web: Implementaste tu app en Internet con un solo clic y la probaste en varios dispositivos.
  • Exploramos el funcionamiento interno: Exploramos cómo Google Cloud aloja tu app web y tu base de datos en vivo.

¿Qué sigue?

Puedes seguir chateando con la IA en Google AI Studio para expandir tu app con nuevas funciones:

  • Mapas interactivos: Solicita a la IA que agregue vistas previas de mapas y rutas de GPS.
  • Búsqueda de compañeros de entrenamiento: Solicítale a la IA que sugiera compañeros de entrenamiento con objetivos de ritmo similares.
  • Pronósticos del clima: Solicita a la IA que muestre los pronósticos del clima del fin de semana en las próximas tarjetas de carrera.
  • Compartir fotos: Solicita a la IA que permita a los corredores compartir fotos después de una carrera en grupo.

Lecturas adicionales