Crear app con ChatGPT: qué sí puede hacer y cómo publicarla

Crear una app con ChatGPT es posible: le describes la app y te genera el código. Pero ChatGPT no la publica ni la conecta a una base de datos por ti; tú tienes que guardar los archivos, probarlos y subirlos a un hosting. Para una página o herramienta sencilla en un solo archivo funciona muy bien. Para una app con usuarios y datos, conviene usar una herramienta que construya y publique (como Lovable) o un agente que trabaje sobre los archivos.

Qué puede y qué no puede hacer ChatGPT

Tarea	¿ChatGPT lo hace?
Escribir el código de una página o app	Sí
Mostrar una vista previa del código	Según tu plan y las funciones disponibles (por ejemplo Canvas)
Explicarte el código y corregir errores que le pegues	Sí
Crear la base de datos en un servicio externo	No, tú la creas
Publicar la app en internet	No
Guardar llaves secretas de forma segura	No; eso se hace en tu hosting o backend

App con ChatGPT: paso a paso (versión sencilla)

Ideal para calculadoras, cotizadores, formularios, landing pages.

1. Pide la app en un solo archivo:

Crea una app web en un solo archivo HTML (con CSS y JavaScript incluidos) para cotizar impresión de lonas: el usuario elige ancho y alto en metros y tipo de acabado, y la app calcula el precio con una tarifa por metro cuadrado que yo pueda cambiar al inicio del código. En español de México, que funcione en celular.

2. Guarda el resultado como index.html en una carpeta.
3. Ábrelo con doble clic en tu navegador para probarlo.
4. Si algo falla, abre las herramientas de desarrollador del navegador (F12 → Console), copia el error y pégalo a ChatGPT.
5. Publícalo en Netlify, GitHub Pages o Vercel. Ver cómo subir mi página web a internet.

App con ChatGPT: versión con base de datos

Si tu app necesita guardar datos de varios usuarios, el flujo cambia:

1. Pide a ChatGPT la estructura del proyecto (por ejemplo, Vite + React + Supabase).
2. Instala Node.js y crea el proyecto en tu computadora:

npm create vite@latest mi-app -- --template react
cd mi-app
npm install
npm run dev

3. Crea tu proyecto en Supabase y copia la URL y la llave pública a un archivo .env. Ver variables de entorno en Vite y React.
4. Pega en tu proyecto el código que te dé ChatGPT, archivo por archivo.
5. Configura las reglas de seguridad de la base de datos (RLS). Ver qué es RLS en Supabase.
6. Publica en Vercel o Netlify.

Aquí es donde mucha gente se atora: el código de un mensaje no coincide con el del siguiente, faltan archivos o la versión de una librería cambió. Si te pasa, una herramienta como Lovable o un agente como Claude Code ahorran mucho tiempo porque ven todo el proyecto a la vez.

ChatGPT vs herramientas de vibe coding

• ChatGPT: genera código; tú lo armas.
• Lovable, Bolt.new, v0: generan, ejecutan y publican.
• Agentes como Claude Code: trabajan sobre los archivos de tu proyecto, corren comandos y prueban.

Consejos para mejores resultados

• Dile qué tecnología usar (o pídele que use la más sencilla posible).
• Pide un solo archivo cuando sea posible.
• Cuando el proyecto crezca, pídele el archivo completo, no “reemplaza la línea 40”.
• Pide que no invente datos, reseñas ni cifras en los textos.
• Nunca pegues llaves secretas en el chat.

Errores comunes

1. Mezclar código de diferentes conversaciones.
2. Poner la llave de OpenAI u otra API directamente en el HTML: cualquiera la copia. Ver API key expuesta: qué hacer.
3. Pensar que un GPT personalizado es una app publicable. Si te interesa ese camino, lee crear GPT personalizado.
4. No tener respaldo: guarda tu proyecto en GitHub.

Cómo pedirle a ChatGPT que arregle un error

Cuando tu app falla, la calidad de la respuesta depende de lo que le das. Usa esta plantilla:

Estoy haciendo una app web con [tecnología, por ejemplo HTML y JavaScript en un solo archivo / Vite y React]. Cuando [qué hiciste: di clic en “Guardar”], esperaba que [qué esperabas], pero pasó [qué pasó]. Este es el error exacto de la consola: [pega el error]. Este es el archivo completo donde creo que está el problema: [pega el archivo]. Dame el arreglo mínimo y explícame la causa.

Por qué funciona:

• Le das contexto (tecnología y qué estabas haciendo).
• Le das el error literal, no tu interpretación.
• Le pides el arreglo mínimo, para que no reescriba todo.
• Le pides la causa, para que aprendas y no repitas el error.

Si después de dos o tres intentos el error sigue, probablemente el problema está en otro archivo o en la configuración (variables de entorno, versiones de librerías). Ahí es donde una herramienta que ve todo el proyecto, o una persona, resuelve más rápido.

Cierre

ChatGPT es un excelente asistente para crear y entender código, pero armar y publicar una app real requiere más piezas. Si tienes código generado con ChatGPT que no logras hacer funcionar o publicar, en Black Engine lo revisamos por WhatsApp.