Construyendo una app móvil desde cero con vibe coding estructurado (Parte I — Contexto y primeros pasos)

Cómo un álbum de láminas me da una excusa para “programar” algo que nadie me ha pedido

Generated with NanoBanana

English version available here

Contexto

La copa del mundo de la FIFA 2026 está cerca cuando escribo esto, y por los lares donde vivo eso significa una cosa: ¡Hora de llenar el álbum oficial!

La edición de este año es gigantesca, 48 equipos con 20 láminas cada uno + 20 láminas con logos y referencias a mundiales anteriores + 14 láminas especiales de Coca-Cola (en la versión local en mi país), sin contar versiones especiales (doradas, plateadas y no sé que más) de algunos jugadores. Para este ejercicio voy a concentrarme en las 994 láminas básicas que tienen un espacio definido en el álbum físico.

Llevar el inventario de qué láminas tengo, cuáles me faltan y cuáles/cuántas tengo disponibles para intercambiar, vender, regalar o simplemente pegar por ahí, estaba amenazando con convertirse en un trabajo de medio tiempo, nada divertido. En los viejos tiempos hubiese abierto Android Studio y empezado a escribir código como atolondrado. Pero con trabajo, esposa, hija, ocupaciones varias y más hobbies e intereses de los que puedo recordar, esa estrategia no es muy viable ya.

Cualquiera dirá: ¿Cuál es el punto? Ya hay apps para esto, una búsqueda rápida en Google Play y unos cuántos clicks después ¡Voilà! asunto arreglado. Evidentemente si hubiese seguido ese camino este post no existiría, pero así no funciona mi cabeza. Quería hacer la app, pero no tengo tiempo para hacerlo, no es sólo escribir el código, es que llevo más de 10 años que no escribo una app móvil, ¡ni siquiera estoy seguro si Android Studio aún existe! Ahora bien en esos 10 años que he abandonado las apps móviles me he dedicado a aprender otra cosa: Machine learning/AI/Pattern recognition/como sea que lo quieras llamar, el punto es que se trata de lograr que los computadores te ayuden a hacer cosas que tú no tienes la habilidad directa (o el tiempo, o las ganas) para hacer. Y estos días se supone que una de las cosas que mejor hace la IA es programar, de hecho en mi trabajo principal y en muchas de mis actividades secundarias dedico gran parte de mi tiempo a enseñar y promover el uso adecuado de herramientas de IA precisamente para acelerar el desarrollo de aplicaciones. Conclusión, hora de practicar lo que pregono, intentemos usar la IA para obtener mi app de administración del álbum del mundial, simplemente porque quiero y puedo.

Expectativas y stack de desarrollo

Esto no es un tutorial paso a paso, aunque copiara aquí el texto exacto de mis interacciones con la IA, hay absolutamente cero garantías de obtener exactamente los mismos resultados, esto como consecuencia de la naturaleza estocástica de la IA generativa. Mi objetivo aquí es ilustrar con un ejemplo tangible cómo dando algo de estructura a la IA se puede obtener un resultado funcional, dar una idea a los que están empezando sobre las capacidades reales, los caminos que pueden seguir y los problemas que pueden encontrar al aumentar sus capacidades de programación con herramientas de IA.

Mi stack de desarrollo: Desde hace unos meses he estado usando Gemini CLI como agente de programación principal, y esta aplicación probablemente sea la última que he desarrollado con dicha herramienta dado que Google descontinuará su acceso para la mayoría de usuarios (buuuuuuuuu Google), sin embargo los conceptos y el flujo de trabajo general es transferible a cualquiera de los agentes de código con IA. Por simplicidad y accesibilidad no he configurado skills, MCPs o cualquier otra herramienta adicional, es sólo Gemini CLI base con las herramientas generales disponibles en mi terminal linux, como git. Procedamos:

El comienzo, un directorio vacío

He creado un nuevo directorio para mi proyecto, abro la consola y lanzo Gemini CLI desde el mismo, ¿y ahora qué?

Saltar a escribir código sólo con ideas a medio definir en tu cabeza no suele ser buena estrategia para desarrollar aplicaciones “a mano” mucho menos con IA. Si no tienes claro un plan de ataque no vas a poder transmitir instrucciones claras a la IA y tendrás altas probabilidades de terminar en frustración y con la firme convicción (errada en mi opinión) que escribir código a mano es el único camino para obtener resultados razonables.

¿Cómo crear esa estructura? Existen marcos de trabajo formales para esto y muchas implementaciones de los mismos que pueden instalarse como complemento a tu agente de código favorito, para los interesados pueden buscar temas como SDD (Specs Driven Development), Github Spec Kit, Open Spec, BMAD o Kiro, pero uno de mis objetivos aquí es simplicidad y accesibilidad así que no voy a incluir ninguno de estos. Mi solución en este caso es usar las capacidades base de mi agente para ir construyendo la estructura suficiente para mi proyecto, esto es a lo que llamo “vibe coding estructurado”. Esta estrategia es útil para aprender, MVPs, proyectos personales sencillos y similares, para cualquier cosa que requiera ser escalable, crítica y deba ser llevada a producción recomiendo seguir un marco de trabajo SDD más formal.

Primeros pasos, qué queremos construir

Ahora sí, manos a la obra, este es el primer prompt que le escribo a Gemini CLI:

I'm doing research to build a mobile app for tracking the completion of the
Panini Fifa WC2026 album, start by finding the complete list of stickers,
including: code (XYZ NN) and sticker name, focus on the colombian release
of the album

No estoy pidiendo código, no estoy ni siquiera empezando a planear, no estamos discutiendo diseño, estoy obteniendo insumos. En vez de dejar que la IA intente averiguar todo por su cuenta, voy dirigiendo la creación del material base de referencia. Aquí otro tip importante: Si ya tienes un tu cabeza un camino, herramienta, referencia, modelo o cualquier cosa concreta que quieras que la IA use, debes decírselo explícitamente, sólo permite a la IA explorar en aquellos campos donde aún no tengas una decisión o incluso no sepas cuáles caminos existen. En este caso lo primer objetivo es crear una lista maestra con los códigos de cada sticker (que siguen un formato de tres letras + 1 ó 2 dígitos) y el nombre correspondiente. organizados por categorías (países, secciones especiales). Esta lista será la fuente de verdad para alimentar el desarrollo posterior.

La IA no retornó la lista perfecta al primer intento, pero luego de un intercambio de dos o tres turnos indicando qué debía corregir o hacía falta, mi lista maestra estaba lista para convertirse en el primer artefacto del proyecto. Le pedí a la IA guardar la lista como un archivo markdown (MD) y obtuve esta respuesta:

✦ I have corrected the sticker lists to match the Colombian release of the
Panini FIFA World Cup 2026 album. The WFC 0–19 (Introductory/Museum) and
CC 1–14 (Coca-Cola) sections are now accurately listed, along with the full
player rosters for all 48 participating nations.
The complete database has been saved to master_list.md.
Summary of the Master List
* WFC 0–8: Official Logos, Mascots, Ball, and Host Country Emblems.
* WFC 9–19: FIFA Museum section featuring legendary team photos.
* CC 1–14: Coca-Cola exclusive stickers.
* National Teams (48): Each team has a dedicated section consisting of:
* 1 Badge (Foil)
* 13 Team Photo
* 18 Player Stickers
You can now use this master_list.md file as the data source for your mobile app
development. Would you like me to help with the app's data model
or structure next?

Nótese la última frase, la IA me está proponiendo el siguiente paso, que a mi parecer es bastante razonable: definir el modelo de datos a usar en la app a partir de la lista maestra que se acaba de crear.

Acepto tal recomendación y luego de un intercambio de dos o tres turnos tengo la especificación del modelo de datos a usar en la app, dividido básicamente en dos elementos: esquema de base de datos (DB) y estructura de datos para que la app interactúe con dicha DB. Esta especificación le pido a la IA guardarlo en otro archivo MD.

Hasta el momento que hemos obtenido:

• 2 archivos MD: master_list.md → lista maestra de stickers; data_model.md → especificación del esquema de DB y estructuras de datos para su consumo por la aplicación.
• 0 archivos de código.

Es decir, tenemos algunas bases para iniciar el desarrollo, pero aún no debemos saltar al código, falta definir las especificaciones de la app como tal y una lista de tareas concretas a ejecutar.

En la Parte II de esta serie describiré cómo obtengo tales especificaciones y la implementación de una primera versión de la app que efectivamente puedo lanzar en mi teléfono.

Para los interesados e impacientes el código fuente está disponible en un repo incluyendo un apk precompilado que puedes instalar en tu teléfono (sideloading, requiere habilitar la opción de instalar de fuentes desconocidas, no tengo intención por el momento de publicar esto en una tienda oficial de apps).

Comentarios/sugerencias son bienvenidos.

¡Hasta la próxima!

*Nota: Todos los archivos del repo (código + documentación) han sido creados y editados directamente por la IA (no esperen consistencia perfecta), para los que tengan experiencia en desarrollo web con Kotlin puede ser un buen ejercicio para observar la calidad del código generado. Por mi lado sólo sé que funciona como esperaba con algunos quirks por mejorar. El texto de este documento y los prompts para guiar a la IA son de mi autoría personal.