Cómo crear una miniapp local con IA: requisitos y ejemplo

Esta guía sirve para preparar un prototipo pequeño que se ejecuta en tu ordenador. Puedes pedir a una IA que genere el código, pero necesitas decidir qué debe hacer y revisar si lo hace bien. Si buscas publicar una app con cuentas, pagos o varios usuarios, el ejemplo de aquí no cubre ese trabajo.

Usaremos Mapa de alcance para una miniapp, un ejemplo descargable de Ranquia. Marcas los requisitos de una idea y recibes una orientación: continuar con un prototipo local, pedir revisión técnica o salir del alcance de este tutorial. La IA no interviene al usar el mapa: sus resultados siguen reglas escritas en el código.

Antes de empezar: qué necesitas y qué vas a obtener

Para abrir el ejemplo necesitas:

• Un ordenador donde puedas extraer un ZIP y abrir una terminal, es decir, la ventana donde se escriben comandos.
• Python instalado y disponible con el comando python. El ZIP no lo instala.
• Un navegador. La comprobación registrada se hizo con Chromium; no se probaron otros navegadores.

Para crear una variante propia, necesitarás además un asistente que genere los archivos de código. Ranquia construyó este caso con ayuda de Codex; no se comprobó la facilidad del proceso con personas sin experiencia técnica.

Al terminar el recorrido del ejemplo tendrás una miniapp abierta en tu navegador y podrás descargar un resumen de la selección en un archivo .txt. No quedará publicada en internet. Si todavía no tienes Python o no sabes abrir una terminal, puedes empezar por el documento de instrucciones del proyecto, llamado brief, y pedir ayuda para ejecutar el ejemplo. No necesitas descargar herramientas adicionales para leer ese documento.

1. Elige una tarea que quepa en una miniapp

Empieza con una decisión o cálculo de reglas claras: marcar opciones, mostrar un resultado y permitir guardar un resumen. Es más fácil comprobar ese recorrido que una petición abierta como «crea una app para mi negocio».

En el mapa, seleccionar «Consulta de API pública» solo marca un requisito de la idea: no consulta una API. Seleccionar «Portal de clientes» tampoco crea un portal. Esta diferencia ayuda a entender qué estás probando antes de añadir conexiones reales.

2. Escribe las instrucciones antes de pedir el código

El brief es una descripción breve del resultado esperado. Conserva una copia antes de generar archivos: te servirá para comprobar si la IA resolvió lo que pediste y para explicar después qué cambió.

Puedes descargar el brief completo de este caso. Para tu propia idea, adapta propósito, entradas, reglas y resultados antes de entregarlo al asistente. Pide también instrucciones para abrir los archivos y casos concretos para comprobarlos.

En este ejemplo se pidieron archivos separados para la página, su apariencia y las reglas: HTML, CSS y JavaScript. No necesitas aprender esos lenguajes para leer el brief, pero sí identificar qué archivos te entrega la IA y seguir sus instrucciones de ejecución. Si una corrección cambia la regla principal, actualiza el brief y vuelve a comprobar los casos afectados.

3. Abre el ejemplo descargable en tu ordenador

1. Descarga el ZIP de la miniapp y extrae su contenido.
2. Abre la carpeta miniapp-mapa-alcance. Dentro deben aparecer archivos como index.html, styles.css, logic.js y app.js.
3. Abre una terminal en esa carpeta, no dentro del ZIP ni en la carpeta superior.
4. Ejecuta este comando y deja la terminal abierta:

python -m http.server 14690 --bind 127.0.0.1

5. Abre http://127.0.0.1:14690/ en el navegador. Deberías ver Mapa de alcance para una miniapp, sus opciones y el resultado inicial Candidato estático local.

La dirección 127.0.0.1 corresponde a tu propio equipo. El comando sirve los archivos localmente; no publica la app. Para detenerlo cuando termines, vuelve a esa terminal y pulsa Ctrl+C.

Si la terminal no reconoce python, falta resolver ese requisito antes de seguir. Si el navegador muestra una lista de archivos en lugar del mapa, revisa que ejecutaste el comando dentro de miniapp-mapa-alcance. Abrir index.html con doble clic no reproduce el recorrido comprobado: este ejemplo se validó servido por HTTP local.

No hay una demo pública. Las instrucciones técnicas del kit distinguen cómo abrirlo y cómo ejecutar sus pruebas automáticas. Node y Playwright pertenecen a esas pruebas; no son pasos adicionales del recorrido anterior para abrir la página.

4. Comprueba el resultado, la descarga y el restablecimiento

Empieza por los tres ejemplos ya incluidos:

Después combina opciones manualmente. Si marcas una conexión externa y también pagos, debe prevalecer Fuera del tutorial y deben conservarse ambos motivos. No basta con que cambie el color: lee el estado y su explicación.

Pulsa Descargar resumen .txt y abre el archivo. Comprueba que coincidan el estado, el número de requisitos, los motivos y el siguiente paso con lo que ves en pantalla. Pulsa Restablecer: deben quedar cero opciones marcadas y volver el estado inicial.

Para tu propia app, escribe primero lo que debería ocurrir en cada caso. Prueba también una combinación, una entrada vacía y una corrección. Revisa que puedes recorrer los controles con el teclado y que el contenido se entiende en una pantalla estrecha. Si algo falla, describe a la IA qué hiciste, qué ocurrió y qué esperabas, y repite después los casos que ya funcionaban.

Una prueba que pasa no demuestra que cualquier cambio posterior funcionará. Guarda una copia de la versión comprobada antes de pedir más funciones.

5. Decide cuándo seguir y cuándo pedir ayuda

Puedes seguir explorando un prototipo personal cuando sus entradas son ficticias o autorizadas, sus resultados son fáciles de revisar y un error puede corregirse sin afectar a otras personas. Pide ayuda técnica antes de añadir cuentas, datos personales, pagos, información compartida, archivos de usuarios o acciones sobre servicios externos.

Publicar una app también requiere decidir dónde estará, quién resolverá fallos y cómo se recuperará la información. El mapa no certifica que una idea sea segura ni que esté preparada para ese uso.

Si necesitas que el sistema decida pasos y actúe sobre otras herramientas, revisa la diferencia entre chatbot, workflow y agente de IA. Si continúas varias semanas, registra el tiempo de corrección y mantenimiento: la guía para medir si la IA te ahorra tiempo ayuda a separar una respuesta rápida del trabajo realmente terminado.

Si prefieres una plataforma como Lovable, Bolt o Replit

Las siguientes filas resumen capacidades descritas por cada proveedor y consultadas el 14 de agosto de 2026. Ranquia no ejecutó el brief en estas plataformas, por lo que no hay ganador, mediciones de facilidad, precio, calidad ni equivalencia entre planes o cuentas.

Estas fuentes describen capacidades, pero no demuestran cómo resolverían tu caso. Comprueba disponibilidad, límites y condiciones en tu cuenta antes de elegir.

Una vez acotada la idea, usa la plantilla para evaluar una herramienta de IA antes de pagar con una candidata concreta. No pagues solo porque una landing page muestre una app más compleja que la que sabes describir y comprobar.

Método y evidencia del ejemplo: lectura técnica opcional

El artefacto se preparó localmente el 14 de agosto de 2026, con ayuda de Codex y un brief conservado antes de generar el código. No fue una prueba de Lovable, Bolt o Replit ni un estudio de facilidad con personas sin experiencia técnica. No se midieron costes o tiempos de desarrollo.

Qué se comprobó

La versión del kit implementa ocho opciones, tres estados, ejemplos predefinidos, restablecimiento y descarga TXT. El estado más restrictivo prevalece cuando se combinan requisitos. El aviso de límites permanece visible y la información no depende solo del color.

Los recorridos comprobaron teclado, cambio de estado, descarga y restablecimiento, sin errores registrados de consola, página o solicitudes. El ancho del documento no superó el de las tres pantallas comprobadas. La corrida usó el puerto 14692; las instrucciones de uso proponen 14690 para el mismo tipo de servicio HTTP local.

Estas observaciones corresponden a esa versión. No se probaron otros navegadores, lector de pantalla, usuarios, Lighthouse ni Core Web Vitals de campo. Tampoco se evaluaron seguridad, publicación, autenticación, pagos, datos personales o mantenimiento a largo plazo. Una revisión automática no sustituye esas comprobaciones.

Qué cambió durante la preparación

El registro conserva tres ajustes: excluir cachés de Python del ZIP; limpiar el foco y volver al inicio antes de tomar las capturas; y ajustar la tipografía del botón de descarga para que no se partiera en la columna de escritorio. Las pruebas funcionales ya pasaban antes de los dos ajustes visuales, por lo que revisar las capturas aportó información adicional.

Archivos para reproducir la comprobación

El ZIP incluye código, casos de prueba y pruebas automáticas. El README recoge los comandos y dependencias. Para repetir esas pruebas necesitas Node y, para los recorridos de navegador, Python, Playwright y Chromium ya instalados; el kit no instala ni descarga dependencias.

La versión se empaquetó dos veces con el mismo hash y se probó después de extraerla en una carpeta nueva. El manifiesto SHA-256 permite contrastar el ZIP, el brief original y el README; no se incluye a sí mismo. Los hashes identifican los archivos comprobados, no certifican que cualquier uso de ellos sea correcto.