Así se crea ahora una app por IA en minutos 🚀

Donde antes había que saber, hoy basta con pararnos a imaginar. La IA generativa nos permite crear de todo, los modelos van mejorando y la forma de interactuar con estos está cambiando. Desde hace tan solo unos días ha surgido un nuevo concepto que cambia por completo los resultados que obtenemos con la IA. Esta se llama ingeniería de contexto y es de las habilidades más importantes que podemos desarrollar. Además, están surgiendo nuevas herramientas como Kiro que se basan precisamente en esto. Por ello, estaremos viendo qué es la ingeniería de concepto y lo aplicaremos de forma práctica en la creación de una app usando NotebookLM para la investigación y validación y Kiro para la planificación y creación de nuestra aplicación. Lo mejor, todo lo podrás replicar fácilmente y con herramientas que podrás usar gratis. ¿Suena bien? Pues comencemos con el concepto. Para introducir este concepto de una forma clara, tenemos que saltar a uno de los últimos tweets de Tobi Lütke, el director general de Shopify. Y es que, como puedes ver en este tweet, nos habla de cómo le gusta este nuevo término de ingeniería de contexto en lugar de la ingeniería de prompts, ya que describe mejor la habilidad fundamental de proporcionar a la IA todo el contexto necesario para que rinda mejor. Piénsalo, crear una app es como construir una casa. Ahora, la IA generativa es como si pudiéramos escribir casa y aparece piscina y aparece plantas y aparece hamacas y aparece. Pero claro, si queremos construir algo sin saber, puede hacer que la casa no tenga buenos cimientos y termine derribándose. Y aquí es donde entra en juego la ingeniería de contexto, haciendo que sea como un arquitecto sabiendo las medidas de cada cosa, cómo estructurar todo y, en definitiva, tener un proyecto sólido. Para aplicaciones no necesitamos material de obra, pero sí información y, en definitiva, todo el contexto que le podamos dar. Para verlo de una forma clara, saltemos al siguiente bloque. Ahora vamos a apoyarnos en una nueva inteligencia artificial para crear aplicaciones lanzada por Amazon, y esta tiene un concepto muy distinto respecto a todas las que hemos visto hasta ahora. Para descubrirla, saltemos a Kiro, una plataforma que te dejaré enlace abajo en descripción. Y desde aquí nos dejan claro cómo es una herramienta para crear aplicaciones tanto desde el apartado del prototipo hasta la producción. Para verla sería tan fácil como descargarla, pero hace unas pocas horas, como esta herramienta está teniendo un repunte, vi que la han cerrado una lista de espera. Pero te traigo algo, ya que como esto imaginaba que podía pasar porque es una herramienta que me parece muy buena, pude coger los enlaces de descarga tanto de Windows, Linux y Mac, y todos estos te los he añadido en este documento de aquí que también tendrás abajo en la descripción. Desde aquí vas a poder ver los enlaces de descarga directo, ojo, de la página oficial en todos los dispositivos que te comentaba antes. Así que aquí descargando e instalando solo tendrías que hacerte el registro con tu email, clicas en siguiente, eliges el tema que te guste y desde aquí podrás configurar que esta tecnología la puedas utilizar en tu terminal. Y al hacer todo esto ya te encontrarás con una visual muy similar a la de Visual Studio. Para crear una aplicación clicaríamos en abrir proyecto y aquí al seleccionar una carpeta, que en mi caso acabo de crear una vacía llamada juego, confirmando desde aquí ya vamos a poder empezar a crear nuestra aplicación. Hasta ahora la opción que teníamos era la de Vive, del término de Vive Coding, es decir, le damos una instrucción y la IA crea una aplicación. Como por ejemplo, crea un juego funcional de un billar. Aquí ya empezaría a crearme todos esos códigos, como ves por aquí, y poquito más tarde me habría generado el código index, los estilos y el juego como tal. Por lo que seleccionando la carpeta, si clico en index, ya me aparecería por aquí este juego del billar a la primera, desde el cual yo voy a poder apuntar y disparar. Además, aquí fíjate cómo los movimientos de la física estarían cuadrando dependiendo de dónde golpee la bola, y podríamos decir que funciona bien. Y más allá de juegos, también podemos crear aplicaciones funcionales, como este otro ejemplo rápido acabo de hacer, en donde le pedí que crease una aplicación de relajación de control de la respiración interactiva en HTML. Aquí yo seleccioné el modelo de Claude Sonnet 4.0, y tras hacer esto, como ya me generó todo el resultado, pues abriendo la nueva carpeta que yo llamé test-sprex y dándole un doble clic a este archivo HTML, nos podríamos encontrar con esta aplicación, que la verdad que luce muy bien, diciéndonos por aquí diferentes técnicas de respiración. Y si yo seleccionara, por ejemplo, la relajante y clicase en iniciar, ya me va a aparecer una animación diciéndome qué tendría que hacer en cada paso, como es la inhalación, mantener la respiración, en este caso durante 7 segundos, y cuando llegue ese cronómetro a ese tiempo, pues ya nos dice cómo deberíamos de exhalar levemente. Y esto nos muestra cómo la inteligencia artificial a día de hoy hace posible que nos ayude con cualquier cosa, como si fuese un programador que estuviese disponible para nosotros las 24 Con eso acabamos de ver podríamos hacer muchas cosas, pero hay tanta información y opciones que nos podríamos llegar a abrumar. Y una vez ya sabemos esto, vayamos al siguiente bloque. Ahora vamos a hacer todo esto un poco más profesional con este concepto de ingeniería de contexto. Para ello vamos a empezar con toda la parte de investigación, y para hacerlo tenemos que saltar a Notebook LM. Y desde aquí lo primero que vamos a hacer va a ser seleccionar descubrir fuentes. Y ahora vamos a empezar descubriendo qué competidores puede tener la idea de aplicación que queramos crear. Para este ejemplo se me ocurrió la idea de crear una aplicación por inteligencia artificial que ayuda a las personas que quieren hacer dieta a hacerlo de una forma más fácil. Hasta ahora las aplicaciones te piden que incluyas manualmente cada comida que has hecho con los pesos para poder ver las macros y calorías. Y aquí pensé, ¿no habrá alguna manera de sacar alguna fotografía a la comida y que por inteligencia artificial ya detecte cuántas calorías tiene? Pues para descubrir si hay algo que exista Desde Notebook LM le voy a poner el siguiente prompt, en donde básicamente le voy a pedir todos los enlaces de competidores directos de aplicaciones del nicho que yo quiero hacer. En mi caso, esto lo voy a cambiar por aplicaciones para contar calorías. Aquí básicamente lo que quiero que priorice son aquellas aplicaciones que ya están funcionando bien por sus buenas valoraciones. Así que con esto, clic en enviar, y ya por aquí estoy empezando a ver un montón de enlaces de aplicaciones como esta llamada Yaizo, que de hecho si le doy un clic Voy a aterrizar a esta página de aquí, que como puedes ver está muy bien valorada, tal y como se lo he pedido. Y de forma similar pues me puedo encontrar otras como FatSecret, y en definitiva otras muchas aplicaciones que ves por aquí, por lo que voy a importarla. Y ahora, aparte de aprender de lo que han hecho bien las aplicaciones que ya de por sí están recibiendo buenas valoraciones, vamos a ver cuáles son las opiniones reales que hay por los foros de personas que utilizan este tipo de aplicaciones, pero que todavía no está cubierta una necesidad. Para ello, sobre el apartado descubrir, voy a escribir este segundo prompt, que por cierto ambos lo vas a tener por el documento que te he dicho antes. Así que aquí, por donde pone tema interés, lo voy a cambiar por el mío. En mi caso sería en relación con personas en dietas que usan una app para contabilizar las kilocalorías de sus comidas. Y si clico en enviar, pues ya tendría por aquí toda esa fuente de información relevante. Y desde aquí yo ahora le puedo hacer cualquier pregunta concreta, como por ejemplo que me analice los puntos de dolor comunes y destaque funcionalidades que podría tener mi aplicación para solventarlas. Si clico en enviar, pues automáticamente va a hacer una búsqueda en todas estas fuentes relevantes y poquito más tarde ya tendría por aquí algunos puntos de dolor, como por ejemplo que las etiquetas de los alimentos no siempre son exactas, ya que realmente, como hay aplicaciones que escaneando el código de barras te da sus datos, pues aquí muestra que muchas veces no son correctas. Además, también nos dice la dificultad de medir con exactitud los ingredientes, y como esto, otros muchos problemas más que nos dice por aquí. Lo más interesante de todo es que directamente nos muestra qué podríamos hacer, como por ejemplo la idea que yo te acabo de decir, con una funcionalidad en donde registrándolo por voz o mediante una fotografía, pues automáticamente se anoten las comidas y se identifique el cálculo de calorías para poder hacer todo este proceso más rápido y sencillo. Por lo que habiendo validado nuestra idea y viendo que la propia inteligencia artificial de Notebook Element nos ha dicho que esto es una frustración que podríamos llegar a solventar, vamos a saltar nuevamente a Kiro y abriendo una nueva carpeta, que en mi caso ya la he llamado Mirescan, aceptando aquí. Ahora, en lugar de hacer by coding, vamos a ir un pasito más allá con este nuevo concepto, y para ello vamos a seleccionar esta función llamada spec, en donde nos muestra claramente que consiste en planificar primero antes de construir. Así que ahora simplemente le tendría que decir la idea de la aplicación que hemos validado previamente, que en este caso sería la del contador de calorías por inteligencia artificial, desde el cual mediante una fotografía podamos saber las calorías, y además que esta la podemos utilizar fácilmente tanto en ordenadores como dispositivos móviles. Y ya con la descripción, si yo clicase en enviar, pues Quiro ahora va a empezar a analizar todo lo que queremos crear. Y desde aquí, en el apartado de specs, nos vamos a encontrar un nuevo archivo que si le damos un clic pues podremos ver que está empezando con todos los requisitos que debería tener esta aplicación. Aquí de hecho, como puedes ver, ya lo estaría escribiendo todo. Y una vez nos lo ha detallado, aquí tendríamos que revisarlo. Por si quisiéramos cambiar algo. Pero yo la verdad que le he echado un vistazo antes y luce bastante bien. Ahora el siguiente paso sería movernos a la fase del diseño, por lo que simplemente dándole un clic aquí empezaría a trabajar en ella. Unos 10 segundos más tarde nos dice que ya lo ha hecho. Así que si clico en la parte de diseño puedo ver que ya tengo todo el diseño estratégico de esta aplicación, tanto con su arquitectura, componentes principales, todo el apartado que vería el cliente, es decir, el frontend. Y un poquito más abajo también vamos a tener las tecnologías que se van a utilizar el backend, es decir, lo que va a estar por detrás funcionando de esta aplicación, así como otros puntos relevantes como el flujo de procesamiento y bases de datos, entre otros puntos que tendría en cuenta una persona profesional. Pero esto no acaba aquí. Ahora nos va a decir si podemos movernos al plan de implementación, por lo que yo lo voy a aceptar y ya empezaría a trabajar aquí en un archivo llamado tareas. Por ahora lo tenemos vacío, pero poquito más tarde ya nos habría creado un plan con todas las tareas detalladas que debemos de hacer para hacer de esta idea una aplicación escalable. Aquí nos muestra cómo deberíamos primero configurar toda la estructura del proyecto, luego implementar el backend básico y configuraciones con las APIs, y como esto pues un montón de tareas más tal y como ves por aquí. Todo esto que de hecho, como puedes ver, hay más de 10 tareas, lo podría hacer un programador, pero la inteligencia artificial de Kiro también se puede encargar de ello. Para hacerlo tendríamos que deslizar hacia arriba y desde aquí empezaríamos por la primera clicando en empezar tarea. Ya por aquí nos dice que se han colado y empezaría a programar todo acorde a estas tareas desglosadas, que en lugar de ser un simple prompt pues serían muchos muy bien relacionados uno con otro. Pero oye, no creas que este concepto es algo específico de esta aplicación, ya que realmente lo podemos implementar en cualquier otra plataforma. Es que realmente esto lo vamos a poder hacer en cualquier plataforma, como por ejemplo una gratuita, como podría ser la de Gemini CLI, un modelo de IA de Google gratuito. Que se ejecuta desde el terminal. Y como ya lo tengo instalado, si escribo la palabra Gemini y le doy un intro, ya automáticamente se va a iniciar. En el caso que sea la primera vez que escuchas esta herramienta de Gemini CLI o te gustaría saber el proceso de instalación, por aquí tengo un vídeo dedicado, por lo que vamos a ir directamente a materia. Y es que desde Gemini también tenemos un apartado llamado gemini.md, que es un archivo que nos permite crear instrucciones a nuestro modelo de inteligencia artificial. Y aquí le podríamos incorporar estos pasos similares a los que hemos visto previamente para poder tener una aplicación más trabajada, algo que incluso el agente podría hacer por nosotros. Para verlo, yo acabo de escribirle que investigue todo sobre ingeniería de contexto en lugar de bycoding y que me genere en mi escritorio una instrucción creando el archivo gemini.md para realizar todos los pasos necesarios de esta metodología. Aquí lo que intentamos conseguir es que este agente de Gemini siempre tenga en cuenta esta metodología cada vez que le pidamos crear una aplicación. De esa forma, las herramientas serán mejores. Por lo que ahora voy a clicar en enviar y poquito más tarde un agente de IA se ha encargado de hacer la búsqueda por internet de qué diferencia hay entre ingeniería de contexto y bycoding. Y tras revisar todo eso, tenemos por aquí una instrucción muy bien detallada de en qué consiste esta metodología y en definitiva los pasos que debería de seguir a partir de ahora esta gente a la hora de crear una aplicación. Por lo que ahora, ya teniendo esta instrucción creada, si yo inicio desde el nuevo terminal un nuevo chat con Gemini, ya nos estaría diciendo que está teniendo en cuenta este archivo .md, que estaría siguiendo estas instrucciones. Todas las instrucciones que tú ves por aquí realmente tú podrías editarlas y modificarlas a tu gusto, pero otra buena práctica que podrías hacer sería importar directamente una plantilla que ya haya hecho otra persona desde plataformas como GitHub te puedes encontrar varias. Y aquí yo te voy a mostrar una de un youtuber llamado Colm, y aquí nos muestra un paso a paso de todos los archivos que podrían tener esos proyectos que creemos con este tipo de inteligencias artificiales. Y tú desde aquí directamente podrías coger la URL para clonar esto, o incluso utilizar el GitHub CLI, desde donde podrías copiar y pegarlo en un terminal para ejecutar el comando. Ya sea que lo hagas tú o lo dupliques de una plantilla, lo ideal es que ahora sigamos esa serie de pasos para poder crear todos esos archivos previos antes de empezar una aplicación. Yo, como ya tengo esto, pues ahora cada vez que yo quiera crear una aplicación, como por ejemplo aquí cuando le dije que crease una aplicación sencilla de to-do list, antes de ponerse a generar nada, lo primero que nos va a decir va a ser el plan, de una forma similar a como vimos en la herramienta de Kiro, diciéndonos cuál va a ser la tecnología que va a utilizar, qué funcionalidades va a tener nuestra herramienta, así como el diseño de la interfaz. Ahora nosotros podríamos empezar a iterar y modificar cosas que no nos cuadrasen o quisiéramos cambiar, pero en el caso que nos guste todo, simplemente con decirle que sí ya tendríamos por aquí toda la programación para esta aplicación. Y ahora, para abrirlo, como nos dice por aquí, desde un nuevo terminal, que aquí lo vamos a hacer clicando en Ctrl+N, yo simplemente tendría que poner el primer código de aquí. Así que lo pego y le doy un intro, y luego nos dice que escribamos la palabra npm start, le doy un intro Y por aquí, de forma automática, ya tendríamos nuestra aplicación sencilla de listas de tareas, que esto, como puedes ver, funciona perfectamente e incluso podría completar. Pero dejando de lado estas aplicaciones sencillas, vamos a seguir con la aplicación que hemos empezado del lector de calorías a partir de una imagen, a ver si lo podemos hacer desde Gemini CLI con este concepto de ingeniería de contexto. Y para ello, desde un nuevo terminal, le voy a escribir exactamente el mismo prompt que le pusimos a Kiro. Y si clico en enviar, pues segundos más tarde nos estaría presentando por aquí una propuesta tecnológica tanto del frontend, backend, como las APIs que deberíamos de utilizar para hacer de esta aplicación algo funcional. También nos dice las características principales que debe tener, el flujo de trabajo general y todos los pasos a seguir en el caso que aprobemos este plan. Yo aquí simplemente diciéndole que sí, y automáticamente va a entender que he aceptado este plan propuesto y de forma autónoma empezará con la programación de todo lo que nos acaba de decir siguiendo ese paso a paso. Y efectivamente, unos 12 minutos más tarde ya me ha generado la aplicación. Tan solo he hecho una iteración en donde le he puesto las credenciales API que he cogido desde la aplicación de Google AI Studio clicando en este apartado de Get API Key. Al hacerlo, simplemente he clicado en crear nueva clave API, lo he copiado, se lo he dado a Gemini CLI, y con eso me generó una segunda versión que ya puedo ejecutar en teoría directamente dándole un doble clic a este archivo. Así que lo voy a hacer. Ya por aquí dice que está iniciando todo. Y en teoría el local, yo simplemente copiando esta URL podría utilizarlo. Así que copio y desde mi navegador pego la URL y envío. Y desde aquí pues puedo ver esta aplicación sencilla que me va a dejar subir archivos. Así que voy a buscar la imagen de algún alimento, como por ejemplo esta manzana de aquí, por lo que voy a descargarla. Y ahora clicando en seleccionar archivo selecciono mi imagen, clico en abrir, y vamos a ver si tenemos suerte. Por aquí nos dice que está analizando y nada, unos 3 segundos más tarde ya nos muestra por aquí el resultado de análisis, que efectivamente nos dice que es una manzana verde. Nos pone un peso que realmente nosotros podríamos modificar aquí. De hecho, conforme disminuyo, fíjate cómo disminuyen todas las macros. Y nos mostraría de una forma muy clara y visual todos los macronutrientes que tendría este alimento. Y es que fíjate por un momento lo que hemos podido llegar a construir simplemente de una forma organizada y con pocas iteraciones ya que hemos hecho el trabajo de planificación previo, podemos llegar a estos resultados prácticamente a la primera. Ahora bien, esta prueba que le hemos hecho a la aplicación es muy sencilla, y estando la fotografía en Google, no me fío de que realmente haya cogido la información de ahí, por lo que vamos a ponerle pruebas más complicadas con fotografías reales a ver de dónde es capaz de llegar esta aplicación. Para ello, yo he vuelto a seleccionar esta ventana del terminal que se nos crea automáticamente cuando cliqué en el archivo para arrancar la aplicación, y desde aquí observo que como yo le pedí las instrucciones que quería una aplicación tanto para el ordenador como para dispositivos móviles, más allá de ponerlo en local también nos ha generado una URL online para que lo podamos utilizar en cualquier dispositivo. Así que ahora, en teoría, si cojo esta URL y desde mi dispositivo móvil lo pegara por aquí, si yo le doy a ir ya tendría la herramienta directamente en mi smartphone. Así que ahora voy a clicar en seleccionar archivo, voy a decirle que quiero hacer una foto Y desde aquí me he preparado un limón, así que a ver si es capaz de detectarlo. Le saco la fotografía, le digo usar foto, y ya dice que lo está empezando a analizar. A ver qué nos hace. Aquí, yéndonos hacia abajo, podemos ver que efectivamente nos ha dicho que es un limón. Le podríamos cambiar el peso y tendríamos todos los macronutrientes, que como puedes ver cambian respecto al primero. Vamos a ponérselo ahora más complejo con un plato de comida con diferentes ingredientes, a ver si es capaz de verlo. Así que para ello voy a seleccionar Archivo, selecciono Fototeca, y desde aquí yo me he preparado este plato de aquí desde donde puedes ver que tenemos arroz, pollo y 2 huevos. Así que selecciono, le doy a OK, y ya dice que está analizando a ver si es capaz de hacerlo. Y unos segundos más tarde, tras haberlo analizado, nos dice todos los ingredientes efectivamente que tendríamos en este plato, tanto el arroz blanco cocido, los huevos fritos, el pollo a la plancha, y un poco más abajo pues tendríamos las calorías totales y los macronutrientes de este plato. Evidentemente yo esto lo voy a Imagina que yo tuviese 60 gramos de arroz, 70 de huevos y 120 de pollo. Pues efectivamente tendríamos más porcentaje de proteína, en este caso un 44% sobre el total de los macronutrientes, y también nos diría los carbohidratos y las grasas que se estarían moviendo de una forma dinámica. Y es que ya no hablamos de crear una aplicación sencilla, sino que literalmente podemos hacer algo que conllevase muchísimas iteraciones simplificándolo con un buen plan, que podemos incluso apoyarnos a través de la inteligencia artificial. Con este tipo de metodología juntado a las actualizaciones de los nuevos modelos, podemos crear prácticamente cualquier cosa. Ahora bien, el terreno en donde siembras es tan importante como aquella semilla que quieres hacer crecer.