HeyGavecon Lau@heygave.ia ↗
UNA NECESIDAD. UNA PRIMERA VERSIÓN.

Tu idea.
Tu primera
app con IA.

Te muestro cómo hice la del gym.
Tú construyes la que necesitas.

Empieza con tu idea
5 pasosUso personalHerramientas gratuitas
Lau, creadora de HeyGave
Así nació Gave Gym.
Inicio de la app real de Lau para registrar sus entrenamientos

Al terminar, tendrás una app web personal que podrás abrir y volver a usar desde tu celular.

Ten a mano Computador y cuentas gratuitas
  • Un computador con internet.
  • Una cuenta gratuita de Google para entrar en Gemini.
  • Una cuenta gratuita de GitHub para publicar tu app.

La guía se puede leer en el celular. Para construir y publicar, sigue los pasos en el computador.

Qué puedes crear Una app para tu día a día
  • Registrar entrenamientos.
  • Organizar hábitos.
  • Llevar tus gastos.
  • Hacer cálculos.

Empieza con hasta tres funciones. Si una idea necesita algo más complejo, Gemini te ayudará a definir una primera versión personal y gratuita.

01
DEFINE

Empieza por lo que te hace falta.

Tu necesidad se convierte en la descripción de tu app.

  1. Abre Gemini. Entra con tu cuenta de Google.
  2. Cuéntale tu idea. Completa el campo de abajo y copia la instrucción.
  3. Conversa y decide. Pégala en Gemini, responde sus preguntas y ajusta la descripción.

Un prompt es una instrucción para Gemini. Aquí los tienes listos para usar.

Escribe tu idea y prepara el prompt

Completa este campo. La instrucción de abajo se actualizará con tu necesidad.

Completa todos los campos para habilitar Copiar. Tu texto se incorpora a la instrucción; puedes revisarla aquí abajo.

INSTRUCCIÓN COMPLETA PARA GEMINI

Quiero crear una app para uso personal, que pueda construir y usar con herramientas gratuitas, sin suscripciones de pago ni pruebas temporales.

Mi necesidad es: [cuenta qué haces hoy y qué te gustaría resolver].

Hazme preguntas, una por una, hasta entender lo que necesito. Ayúdame a definir una primera versión sencilla que funcione en el navegador de mi celular.

Después, prepara la descripción de mi app con:

  • Qué resolverá.
  • Hasta tres funciones principales.
  • Qué datos guardará.
  • Tres pruebas para comprobar que funciona.

Si alguna función requiere pagar o compartir datos entre usuarios, propón una alternativa gratuita y sencilla para uso personal.

Espera mi aprobación antes de escribir código.

Cuando la descripción te convenza, responde en Gemini: «Esta es la versión que quiero».

02
PREPARA

Tres herramientas.
Cada una hace su parte.

Gemini crea, el navegador guarda y GitHub publica.

Gemini + CanvasEscribe, muestra y modifica tu app.

IndexedDBGuarda tus registros en el navegador.

GitHub + PagesLe da a tu app una dirección web.

Cómo preparar cada herramienta

Gemini + Canvas

Entra en Gemini con Google y abre la conversación donde definiste tu app. Canvas está dentro de Gemini: no necesitas otra cuenta.

IndexedDB

Es la memoria de tu app en ese navegador. No instalas nada ni creas una cuenta. El prompt de construcción le pide a Gemini que incluya este guardado y las copias de respaldo.

GitHub + GitHub Pages

Crea tu cuenta gratuita y verifica tu correo. GitHub guardará el código; Pages lo publicará. En el paso 5 encontrarás las instrucciones.

Si Gemini llega al límite gratuito, espera a que se renueve. No necesitas activar una prueba de pago. Consulta los límites de Gemini.

Abre Canvas, paso a paso Hazlo ahora, en tu computador
  1. Abre tu conversación de Gemini. Es el chat donde definiste la descripción de tu app.
  2. Busca el botón +. Está junto al espacio donde escribes. Puede aparecer como Añadir archivos.
  3. Pulsa + y elige Canvas. Selecciónalo en el menú que se abre.
  4. Continúa al paso 3 de la guía. Copia allí el prompt de construcción, pégalo en Gemini y pulsa Enviar.
  5. Espera el resultado. Gemini abrirá un panel junto al chat. En Vista previa podrás usar la app.

Ayuda oficial para abrir y usar Canvas.

OPCIONAL¿Quieres explorar otras herramientas?

Copia esta instrucción en el mismo chat para pedir alternativas a Gemini. Si sigues con las herramientas de la guía, continúa al paso 3.

INSTRUCCIÓN COMPLETA PARA GEMINI

Para la descripción de mi app, propón alternativas a las herramientas de esta guía: Canvas, almacenamiento en el navegador y GitHub Pages. Seguiré usando Gemini como asistente.

Quiero construir y usar la app gratis, sin tarjeta ni pruebas temporales. Mantén una app personal que funcione en el navegador, con un único archivo index.html y sin instalar programas.

Para cada herramienta, explica para qué sirve, cómo empezar, su enlace oficial y sus límites gratuitos.

Verifica esa información. Si no puedes comprobarla, dilo.

Recomienda una combinación sencilla y explica qué cambiaría en los siguientes pasos de la guía.

Espera mi elección antes de escribir código.

Si eliges otra combinación, pide a Gemini que adapte los prompts y la publicación antes de continuar.

Continúa en la misma conversación, con Canvas seleccionado.

03
CONSTRUYE

De tu descripción
a tu primera app.

La instrucción completa ya está preparada. Puedes copiarla tal cual.

  1. Comprueba que Canvas está activo. Usa el mismo chat donde aprobaste la descripción. Ver cómo abrir Canvas.
  2. Copia el prompt de construcción. Pégalo en Gemini y pulsa Enviar.
  3. Abre Vista previa. Cuando termine, sigue las tres pruebas que te indique Gemini.

Ver el prompt de construcción completo

Se usa sin modificar, en el chat donde aprobaste la descripción de tu app.

INSTRUCCIÓN COMPLETA PARA GEMINI

Construye la app de la descripción que aprobé. Es para uso personal y debe poder construirse y usarse gratis.

Entrega un único index.html con HTML, CSS y JavaScript juntos, listo para GitHub Pages. Implementa las funciones acordadas.

Si guarda registros, usa IndexedDB. Incluye Guardar, Editar, Eliminar con confirmación, Buscar, Exportar copia e Importar copia en JSON. Incluye las fotos en el respaldo si mi app las necesita.

Empieza sin registros de ejemplo. Usa fechas reales, valida los datos y avisa si falla un guardado. Haz que sea cómoda de usar en el celular.

Sin instalaciones, claves, librerías externas, Firebase ni funciones de IA dentro de la app. Si algo no cabe en este alcance, explícamelo antes de construir.

Entrega siempre el archivo completo.

Al terminar, explícame las tres pruebas de la descripción de mi app. Para cada una, indica qué datos de ejemplo escribir, qué botones pulsar y qué resultado debería aparecer.

¿Quieres cambiar algo de tu app?

Completa ambos campos y pega la instrucción en la misma conversación de Gemini.

Completa todos los campos para habilitar Copiar. Tu texto se incorpora a la instrucción; puedes revisarla aquí abajo.

INSTRUCCIÓN COMPLETA PARA GEMINI

Quiero cambiar [qué parte de la app] para que [cómo quieres que quede o funcione].

Conserva las demás funciones y mis datos. Devuelve el código completo actualizado.

Ya puedes ver tu app y probar sus botones.

04
COMPRUEBA

Pruébala antes
de darla por lista.

Usa datos inventados. Cada prueba debe darte un resultado visible.

  1. Sigue las tres pruebas de Gemini. Usa los datos y botones que te indique.
  2. Si guardas información, compruébala. Revisa la lista de abajo.
  3. Si algo falla, describe qué ocurrió. Completa el prompt de corrección y vuelve a probar.
Qué probar y qué debería pasar

Si tu app guarda información:

  • Guarda. Crea un registro de prueba y pulsa Guardar. Debe aparecer en la app.
  • Edita. Cambia un dato y guarda. Debe aparecer el dato nuevo.
  • Busca. Escribe una palabra del registro. El buscador debe mostrarlo.
  • Elimina. Borra un registro de prueba. Debe pedir confirmación y, al aceptar, quitarlo.
  • Foto, si aplica. Añádela a un registro, guárdalo y vuelve a abrirlo. Debes verla.

Si Canvas no permite guardar, repite la prueba en el enlace que publicarás en el paso 5 antes de pedir una corrección.

¿Algo falló? Prepara el prompt de corrección

Describe lo que pasó. Puedes adjuntar una captura en Gemini con el botón +.

Completa todos los campos para habilitar Copiar. Tu texto se incorpora a la instrucción; puedes revisarla aquí abajo.

INSTRUCCIÓN COMPLETA PARA GEMINI

Estoy probando mi app en [Canvas o su dirección web].

Hice estos pasos: [qué escribiste y qué botones pulsaste].

Esperaba que ocurriera esto: [resultado esperado].

Pero ocurrió esto: [describe el problema o copia el mensaje de error].

Si necesitas más información, pregúntame antes de corregir.

Corrige el problema conservando mis datos y las funciones que ya funcionan. Entrégame el archivo index.html completo y actualizado.

Indícame cómo repetir la prueba para comprobar que quedó solucionado.

Repite la prueba corregida y comprueba que las demás funciones siguen funcionando.

05
ÚSALA

Tu app, a un enlace
de tu celular.

Publica desde el computador. Abre cada instrucción y sigue el orden.

1Crea el espacio en GitHub

Inicia sesión en GitHub y abre github.com/new.

  1. En Repository name (nombre), escribe mi-app.
  2. Selecciona Public (público).
  3. Activa Add README.
  4. Pulsa Create repository (crear repositorio).
2Copia el código de Gemini
  1. Abre tu app en Canvas y pulsa Código.
  2. Haz clic dentro del código.
  3. Selecciona todo con Ctrl+A y copia con Ctrl+C. En Mac: ⌘A y ⌘C.

El archivo completo empieza con <!doctype html> y termina con </html>. No copies las marcas ``` del chat.

3Guarda el código en GitHub
  1. En el proyecto que creaste, pulsa Add file → Create new file (añadir archivo → crear archivo).
  2. En el nombre escribe exactamente index.html.
  3. Pega el código completo en el área grande.
  4. Pulsa Commit changes (guardar cambios), elige guardar en main y confirma.
4Activa la publicación
  1. Abre Settings (configuración) y busca Pages en el menú lateral.
  2. En Source, elige Deploy from a branch.
  3. Selecciona main y deja /(root).
  4. Pulsa Save (guardar).
5Abre tu enlace en el celular
  1. Espera hasta 10 minutos y actualiza la página de Pages.
  2. Cuando aparezca Visit site, púlsalo y copia la dirección que se abre.
  3. Envía ese enlace a tu teléfono, ábrelo en el navegador y guárdalo en favoritos.

Si aparece un error 404, revisa que el archivo se llame index.html, verifica tu correo de GitHub y espera a que termine la publicación. Ayuda para resolver un error 404.

6Comprueba el guardado y la copia

Repite las pruebas del paso 4 en tu dirección publicada. Si guardas información:

Cierra y vuelve a abrir

Cierra la pestaña y abre el mismo enlace en el mismo navegador, fuera de incógnito. Tus registros deben seguir ahí.

Recupera una copia

  1. Pulsa Exportar copia y conserva el archivo descargado.
  2. Abre tu app en otro navegador.
  3. Pulsa Importar copia y elige ese archivo. Deben aparecer tus registros y fotos.

Si algo falla, vuelve al prompt de corrección.

Cómo actualizar tu app y conservar tus datos

Antes de actualizar, exporta una copia

  1. Pide el cambio a Gemini en la misma conversación.
  2. En GitHub, abre index.html y pulsa el lápiz para editar.
  3. Reemplaza su contenido por el código completo actualizado.
  4. Pulsa Commit changes y confirma. Espera la publicación y vuelve a probar en el mismo enlace.

Tus registros están en cada navegador

Para trasladarlos, exporta e importa una copia. No se sincronizan automáticamente. Borrar los datos del navegador puede borrar los de tu app.

El código será público. No pegues fotos, registros ni contraseñas en GitHub.

Tienes un enlace para usar tu app y sabes cómo guardar una copia de tus datos.

CUANDO LO NECESITES

Si te atoras, sigue desde aquí.

Gemini me dio varios archivos o pide instalar cosas

Vuelve al mismo chat y pega esta instrucción:

Convierte esta versión en un único index.html autónomo, sin instalaciones ni librerías externas. Conserva las funciones de la descripción de mi app y el guardado con IndexedDB. Devuelve todo el archivo.
Voy a seguir otro día o en otro chat

Guarda la descripción de tu app y el último index.html. Para continuar, vuelve a la misma conversación. Si tienes que abrir una nueva, adjunta ambos y explica en qué paso te quedaste.

Si llegas al límite gratuito, espera a que se renueve.

Quiero trasladar mis datos al celular
  1. En la app del computador, pulsa Exportar copia.
  2. Envía el archivo descargado a tu teléfono y guárdalo.
  3. Abre el enlace de tu app en el celular, pulsa Importar copia y elige el archivo.
  4. Comprueba que aparezcan tus registros y fotos.

Los cambios posteriores no se sincronizan automáticamente.

El botón Copiar no funciona

Abre el prompt, selecciona su texto y usa Copiar en el menú de tu navegador. Si estás dentro de Instagram, puedes abrir el enlace en Chrome o Safari e intentarlo allí.

Cuando un prompt tenga campos para completar, rellénalos antes de copiarlo.

Fuentes y alcance de la guía

El recorrido enseña a crear una app web personal sencilla. La app original del gym usa Claude Code, React Native, Expo Go y SQLite local. Tu versión web guarda en cada navegador y no incluye sincronización entre personas ni acceso protegido.

HECHO PARA QUE LO USES

Sigue creando
conmigo.

Más proyectos con Lau @heygave.ia
PARA TU NEGOCIO O PROYECTO

¿Quieres acompañamiento?

Diagnóstico y plan de acompañamiento de HeyGave.

Lau, invitándote a seguir creando con HeyGave