- Empieza a crear una aplicación funcional basada en IA utilizando una herramienta sin código.
- Descubre cómo las aplicaciones web guardan datos usando el almacenamiento del navegador.
- Comprender cómo la IA puede ser un compañero de reflexión, no un sustituto del pensamiento.
- Aprende a conectar tu proyecto a GitHub para que tu código nunca se pierda.
- Una aplicación Founder's Toolkit funcional creada en Github Codespaces que incluye:
- Almacenamiento de retroalimentación Módulo para organizar las aportaciones iniciales de las partes interesadas.
- Módulo contrario que proporciona una «tercera voz» y desafía la definición de tu problema.
- Un repositorio GitHub con tu proyecto Founder's Toolkit, donde se guardará tu código.
- Los alumnos comprenden los conceptos básicos de la IA y han explorado herramientas de IA en las unidades de emprendimiento (Concienciación sobre la IA y mentalidad emprendedora).
- No se requiere experiencia previa en programación ni ingeniería de prompts.
De la exploración a la acción
Hasta ahora, en este currículo educativo, has explorado qué es la IA y cómo está cambiando el mundo. También has aplicado la mentalidad emprendedora cuando compartes tu problema inicial con amigos y familiares y los cuestionas:
- ¿Este problema les resulta familiar?
- ¿Qué aspectos consideran más importantes?
- ¿Qué preguntas o inquietudes te vienen a la mente?
- ¿Qué es lo que no entiendes de este problema?
Les animaste a pensar de forma contraria y tomaste notas sobre su retroalimentación.
Ahora es el momento de poner la IA a trabajar. Tienes información valiosa, pero probablemente esté dispersa entre notas, mensajes y recuerdos. Y aunque los amigos y la familia pueden ser sinceros, es posible que se callen las preguntas más difíciles.
La IA como tu socio intelectual
Un compañero de reflexión te ayuda a explorar ideas, formular mejores preguntas y detectar lo que podrías pasar por alto. La IA puede hacer esto sorprendentemente bien, y muchas empresas de éxito ya la utilizan de esta manera. Pero para utilizar la IA de forma eficaz, es necesario comprender sus puntos fuertes y sus limitaciones.
En las dos primeras unidades técnicas, aprenderás a utilizar la IA como compañero de reflexión mediante el uso dela codificación vibratoria. La codificación por vibración consiste en describir lo que quieres en lenguaje sencillo y la IA genera las características por ti. Para esta lección, utilizaremos el código vibe con Github Copilot para crear una aplicación llamada Founder's Toolkit, una aplicación que puede resultar útil para reforzar tu propio proyecto.
Importante: Las herramientas de IA que construyes están destinadas a aumentar la retroalimentación humana, no a reemplazarla. Ya has hablado con personas reales, lo cual es esencial. La IA añade una tercera perspectiva y te ayuda a dar sentido a lo que has escuchado.
Introducción a Github
Para todo este programa, utilizarás GitHub y aprovecharemos muchas de sus capacidades, incluidas las de almacenamiento.
Además de su principal uso para la gestión de código, Github también cuenta con el agente de IAGithub Copilot y la plataforma de codificación en la nube Codespaces. Utilizaremos Codespaces, un entorno de desarrollo que se ejecuta en el navegador. Podrá indicar a Copilot en lenguaje natural lo que desea crear y ver el código generado en Codespaces para comprenderlo, probarlo y, finalmente, implementarlo.
Podemos describirlos aquí:
- GitHub => El hogar de tu proyecto, como Google Drive para código.
- Espacios de código => Tu espacio de trabajo similar a Google Docs, pero para crear aplicaciones.
- Copilot => Tu compañero de programación con IA que convierte tus ideas en código funcional.
GitHub resuelve muchos problemas en el contexto del desarrollo de productos. Es una plataforma en la que los desarrolladores almacenan y comparten código principalmente, pero recientemente ha evolucionado hasta convertirse en un socio de codificación de IA y parte de su misión es democratizar la creación de software para todos. Por eso han invertido en más capacidades de IA para empoderar a todo el mundo y ofrece niveles gratuitos con límites generosos.
Para empezar:
- Si ya tienes una cuenta de Github, puedes saltarte estos pasos. De lo contrario, vea github.com
- Haga clic en «Registrarse» y siga los pasos (es gratis y tarda unos 2 minutos).
- Utiliza una dirección de correo electrónico que consultes con regularidad y te recomendamos que elijas un nombre de usuario profesional, ya que este nombre de usuario será el que aparecerá ante otros desarrolladores cuando finalmente colaboréis.
Si eres estudiante matriculado en un centro educativo o una universidad, regístrate en cuenta de estudiante de Github Education . Con el Student Developer Pack, obtendrás una cuenta gratuita de GitHub Pro, repositorios ilimitados y más créditos de Copilot. También tendrás acceso a herramientas de desarrollo gratuitas de terceros.
Almacenamiento de su retroalimentación
Ten a la mano la hoja de trabajo de la Unidad 2: mentalidad emprendedora y las notas de la entrevista.
En estas actividades, configurará su entorno de desarrollo y creará un retroalimentación para organizar la información que haya recopilado.
ACTIVIDAD 1
Inicie su entorno de desarrollo
Tiempo estimado: 15 minutos
1. Abre Github y crea tu primer repositorio.
Un repositorio (o «repo») es un lugar central para tu proyecto en GitHub.
- Creemos uno haciendo clic en «Crear repositorio» o «Nuevo».
- Añade un nombre y una descripción para el repositorio.
- Para un nombre puedes ponerle algo como «Kit de herramientas para fundadores de AIVA», pero debe ser único, así que añade un identificador propio.
- Para un descripción, la aplicación AIVA Founder's Toolkit será suficiente.
- Seleccione lo siguiente en la configuración:
- Visibilidad = Privada para garantizar que solo tú puedas ver el repositorio.
- Léame = Verdadero para que Github cree automáticamente un archivo predeterminado que se utilizará para la documentación.
- Añadir archivo .gitignore = Nodo
- Añadir licencia = Licencia MIT
Veremos qué significan estos detalles en unidades posteriores. Si se ha perdido alguno de ellos, no se preocupe, ya que podemos añadirlos manualmente más adelante.
2. Crear una nueva rama
- Haz clic en la rama «main» en la parte superior izquierda de tu repositorio para mostrar la lista de ramas disponibles.
- Seleccionar «Ver ramas» y, a continuación, cree una nueva rama.
- Asigna un nombre a la nueva rama. Este nombre es solo para su uso personal, por lo que puede llamarla como desee, pero es recomendable darle un nombre identificable, como tech-unit-1.
Este paso es opcional, pero recomendamos encarecidamente trabajar en nuevas ramas cada vez que realices actualizaciones importantes. En unidades posteriores entraremos en detalles sobre las mejores prácticas.
3. Selecciona la rama y abre Codespaces.
Hemos creado una rama donde se almacenará y guardará una versión del código. Ahora queremos empezar a programar en un entorno de desarrollo utilizando Codespaces.
- Navega hasta la rama que acabas de crear. Para ello, haz clic en el nombre de la rama en la ventana Ver todas las ramas.
- Haga clic en el botón verde «Código» y seleccione Crear un nuevo espacio de código.
- Espera hasta que Github cree el entorno de desarrollo.
Verás que tu navegador abre una ventana que es una herramienta de desarrollo de código que se parece y funciona como Visual Studio Code. Este es tu espacio de trabajo de desarrollo, donde comenzaremos a programar.
4. Explora la interfaz
Una vez que se cargue Codespaces, verás que tiene muchos paneles:
- Explorador de archivos: los archivos de tu proyecto
- Editor: donde previsualizas y editas archivos
- Terminal: donde se ejecutan los comandos
- Github Copilot: donde le indicarás a la IA que te ayude a crear
- Panel superior: con una barra de menú y búsqueda.
Aspectos a tener en cuenta:
- Tu código ya se está guardando en Codespaces: A diferencia de otras herramientas en las que puedes perder tu trabajo, todo lo que creas en Codespaces se guarda automáticamente. En algún momento, tendrás que confirmar los cambios en la rama de tu repositorio en Github, pero puedes cerrar y volver a abrir Codespaces y tu código seguirá ahí.
- Los espacios de código que permanecen inactivos durante 30 días se eliminan.
- Existen más funciones: Por ahora, no es necesario entrar en estas pestañas y paneles. Representan otros flujos de trabajo del proceso de desarrollo que abordaremos en unidades posteriores.
Ahora que ya tienes configurado tu entorno de desarrollo en Codespaces, estás listo para empezar a crear una aplicación funcional en menos de 10 minutos.
Fundamentos de ingeniería de prompt
Utilizarás la inteligencia artificial para crear esta app funcional.
Esta es la idea clave: la IA solo es tan buena como las instrucciones que le des.
Si das instrucciones vagas, obtienes resultados vagos. Si das instrucciones específicas y bien estructuradas, obtienes resultados útiles y específicos.
La ingeniería de prompts es la práctica de escribir instrucciones que incitan a la IA a producir resultados útiles y específicos. Cuando mejoras tus instrucciones, mejoras tu aplicación. Existen muchas técnicas para mejorar las instrucciones de IA. Se han escrito innumerables libros sobre este tema.
Pero, en esencia, la mayoría de las técnicas implican:
Establecimiento del contexto
Por ejemplo
«Dame retroalimentación de mi idea».
Con contexto:
«Soy un emprendedor novato que está investigando un problema relacionado con el desperdicio de alimentos en los comedores escolares. He entrevistado a dos estudiantes que viven esta situación a diario. Proporcioname retroalimentación mi idea».
Estructura de salida
Por ejemplo
«Enumera algunos retos».
Con contexto:
«Enumera exactamente tres retos, cada uno en una sola frase de menos de 20 palabras».
Control de tono
Por ejemplo
«Dime qué hay de malo en mi idea».
Con contexto:
«Actúa como un mentor empresarial que me apoye. Señala los puntos débiles de mi idea y sugiere cómo podría solucionarlos».
¿Quieres saber más sobre ingeniería de prompts? Echa un vistazo al apéndice y a los enlaces de los recursos adicionales.
ACTIVIDAD 2
Crear una capacidad de almacenamiento de retroalimentación
Tiempo estimado: 30 minutos
1. Abre Github y abre tu espacio de código de la actividad 1.
Si ya lo tienes abierto, puedes saltarte este paso. De lo contrario,
- Inicie sesión en Github.
- Haga clic en el menú de hamburguesa situado en la parte superior izquierda y seleccione «Codespaces» en el menú desplegable.
- Cuando se abra la ventana Codespaces, haz clic en el nombre aleatorio que Github le ha dado a tu espacio de código para volver a abrirlo.
2. Indícale a la IA que cree tu «almacenamiento de retroalimentación
Comienza con esta instrucción de texto básica que aparece a continuación en el prompt del chat.
Esta es un prompt que le darás a Github Copilot; el cual tomará tus instrucciones y hará suposiciones adicionales para ayudar a completar cualquier espacio en blanco.
Cópialo y pégalo exactamente como se muestra en el prompt de chat del panel Github Copilot situado en la parte derecha.
Crea una aplicación sencilla que ayude a los emprendedores a recopilar retroalimentación donde haya dos partes interesadas sobre mis ideas empresariales preliminares.
– El título debe ser «AI Founder’s Toolkit» (Kit de herramientas para fundadores de IA).
– Los usuarios deben introducir el problema que están resolviendo y, a continuación, la retroalimentación de dos personas sobre ese problema.
Consejo:
Es imposible estar al tanto de todos los últimos modelos y capacidades disponibles en GitHub Copilot. A fecha de 7 de enero de 2025, GitHub cuenta con varios modelos LLM, pero la selección de modelo predeterminada es «Auto». Esto les da la flexibilidad de seleccionar el modelo que les resulte más conveniente y, quizás, el más adecuado para la tarea específica que tengan en mente. Te recomendamos que habilites la selección de modelo para poder elegir y seleccionar el que prefieras. Tendrás que aceptar sus condiciones haciendo clic en «Usar funciones de IA», lo que habilitará la selección de modelos. Aunque esto no es necesario (a pesar del confuso texto del botón) para utilizar sus funciones de IA, sí es necesario para permitir la selección de modelos.
3. Espera a que la IA cree tu aplicación.
Copilot generará tu aplicación y mostrará el progreso a lo largo del proceso.
Esto puede tardar aproximadamente entre 1 y 2 minutos, dependiendo de nuestras instrucciones. Verás cómo se escribe el código en tiempo real, lo que te permitirá aprender cómo piensa el modelo de IA como un ingeniero de software/emprendedor.
Le estás diciendo al modelo de IA lo que quieres en lenguaje sencillo. El modelo de IA lee tu descripción y genera el código automáticamente. Esto se denomina «desarrollo sin código» porque describes la aplicación en lugar de programarla.
La IA hace varias suposiciones, como elegir crear una aplicación web utilizando una platilla común, como HTML, CSS y Javascript. También completará los detalles estilísticos que no hayas especificado, como elegir colores, fuentes y diseño. No es necesario que entiendas el código; solo observa cómo funciona y empieza a pensar en qué más puedes añadir en un futuro.
Si lo estás haciendo por primera vez, es posible que te solicite ciertos permisos, como crear, editar o eliminar archivos, o incluso ejecutar ciertos comandos en tu nombre.
Consejo importante:
En el futuro, a medida que avances en tu proceso de desarrollo, es posible que desees tener un mayor control para reducir cualquier riesgo que surja. Por lo tanto, puedes jugar con la configuración con la que te sientas más cómodo. Los desarrolladores profesionales suelen permitir comandos sencillos como «editar», que se pueden revertir fácilmente, pero tienen controles más granulares en los comandos bash, ya que pueden suponer un mayor coste en términos de API. En unidades posteriores trataremos este tema.
4. Prueba tu aplicación
Dado que se trata de una aplicación web, es posible que te haya solicitado permiso para confiar en la apertura de una aplicación web (véase la captura de pantalla siguiente), lo cual deberíamos haber habilitado en pasos anteriores.
Una vez que Copilot termine de codificar la aplicación, puedes empezar a probarla de la siguiente manera:
- Ejecute la aplicación escribiendo«python3 -m http.server 8000»en el panel de la terminal situado en la parte inferior de la pantalla. Esta es la forma más sencilla de ejecutar su aplicación inicial.
- Se abrirá una nueva pestaña del navegador con la aplicación en ejecución.
- Puedes introducir la descripción de su problema.
- Añade retroalimentación todos tus amigos y familiares iniciales de la hoja de trabajo «mentalidad emprendedora».
- Haga clic para guardar la retroalimentación.
- Comprueba que la información aparece en el área de salida.
Solución de problemas:
Si tu aplicación no aparece:
- Puedes preguntarle a Copilot: «¿Cómo ejecuto mi aplicación?» o «Ayúdame a depurar por qué no puedo ver el formulario y encontrar cualquier problema identificado».Esto es lo que llamamos depuración asistida por IA , que aprenderás en unidades posteriores.
Si tu aplicación no se carga:
- Intenta actualizar la página. Si eso no funciona, empieza desde cero.
Si el resultado no coincide con lo que esperabas:
- No pasa nada. Más adelante aprenderás a hacer ajustes.
5. Perfecciona tu prompt
El modelo de IA que utilizamos para crear nuestra aplicación es muy potente. Las suposiciones que hizo pueden producir algo que no deseabas, pero el proceso que siguió y el resultado que produjo podrían servir para perfeccionar aún más la aplicación y mejorar el resultado.
En nuestro caso, la IA asumió que debía guardar la información y ofrecer al usuario la opción de guardarla como archivo CSV tras introducirla. Es posible que en tu caso haya dado un resultado diferente. Pero debemos ser más detallados y precisos con nuestras instrucciones para obtener lo que queremos.
Copia y pega el mensaje que se muestra a continuación en el cuadro de diálogo del chat del panel Github Copilot, situado en la parte derecha de la pantalla de Codespaces.
Añade una línea más al mensaje para que las instrucciones sean aún más claras y tu aplicación sea aún mejor.
Perfecciona esta aplicación que ayudará a los emprendedores a recopilar retroalimentación dos partes interesadas sobre mis ideas empresariales preliminares.
La aplicación debe tener:
– Un título en la parte superior: «Kit de herramientas para fundadores de IA».
– Un subtítulo: «Empieza a recopilar retroalimentación mi problema».
– Un área de texto donde puedo introducir mi problema y describir el problema empresarial que quiero abordar.
– Una sección para «Parte interesada 1» con áreas de texto para:
- ¿Este problema les resulta familiar?
- ¿Qué aspectos consideran más importantes?
- ¿Qué preguntas o inquietudes te vienen a la mente?
- ¿Qué es lo que no entiendes de este problema?
– Una sección para «Parte interesada 2» con las mismas cuatro áreas de texto.
– Un botón con la etiqueta «Guardar problema y retroalimentación retroalimentación
– Un área de salida que solo contendrá el problema introducido y la retroalimentación de las partes interesadas.
4. Vuelve a probar tu aplicación.
Una vez que Copilot termine de actualizar la aplicación, puedes actualizar la pestaña del navegador en la que se ejecuta la aplicación para ver los cambios.
Recuerda, si tienes problemas al ejecutar la aplicación o el resultado no se ve bien, pide ayuda a Copilot para resolverlo.
6. Confirma los cambios
Ejecute y pruebe su aplicación hasta que esté satisfecho con el resultado.
Aunque Codespaces guarda tu código, seguimos necesitando confirmar cualquier cambio en la rama de nuestro repositorio de Github. Confirmar y enviar carga los cambios de código en tu repositorio. Una vez enviados, se guardan de forma permanente y se rastrean en Github.
Para confirmar y enviar:
- En el panel izquierdo, haz clic en Control de código fuente .
- Bajo la pestaña cambios , añade un mensaje de confirmación manualmente o utiliza la IA para que te cree uno.
Para nosotros, la IA creó un buen mensaje de confirmación:
3. Es posible que aparezca el mensaje «No hay cambios preparados para confirmar». Si es así, haga clic en Sí para confirmar.
4. Haga clic en Sincronizar cambios para sincronizar la plataforma Codepace con Github.
5. Vuelve a Github y a tu repositorio y rama para comprobar que los archivos aparecen allí. Debería mostrar todos los archivos que se han creado, modificado o eliminado. Hay algunas excepciones (pista: los archivos que aparecen en el archivo gitignore).
Este paso garantiza que los cambios se guarden en la rama y reduce cualquier riesgo de perder el trabajo realizado si ocurre algún problema con el entorno de Codespace. En unidades posteriores, aprenderás qué son estos comandos «Git».
¡Acabas de crear una aplicación!
Tómate un momento para apreciar lo que acabas de hacer.
Esta retroalimentación te ofrece un lugar estructurado para almacenar toda la información que vas recopilando, y seguirás añadiendo datos a lo largo de este programa.
Aspectos a tener en cuenta:
- No escribiste ningún código. Solo describiste lo que querías.
- La IA hizo suposiciones para completar los detalles que no especificaste (colores, diseño, texto de marcador de posición, etc.).
En nuestro caso, añadió algunas cosas que no especificamos en nuestras instrucciones, como por ejemplo:
- «Textos de marcador de posición» para cada entrada de texto
- Una retroalimentación de edición
- Se ha enviado un mensaje exitoso después de la retroalimentación
Tu resultado puede ser diferente al de tus amigos e incluso puede ser diferente si estás creando nuevas aplicaciones y añadiendo las mismas indicaciones, y eso está bien. La IA interpreta tus instrucciones y toma decisiones de diseño, y si no te satisfacen, siempre puedes pedir que se cambien o hacer esos cambios tú mismo en el código.
Almacenamiento de datos
Ahora mismo, cada vez que actualizas tu aplicación, todos tus datos desaparecen. Eso no es útil para una herramienta real.
En la siguiente actividad, añadirás almacenamiento local a tu aplicación para que pueda guardar datos más complejos de la misma.
El almacenamiento local protege cualquier dato enviado mientras trabajas en el navegador. Tu código ya está seguro en GitHub si has estado utilizando Codespaces, pero ahora los datos que introduzcas se almacenarán de forma segura en el navegador para que puedas acceder a ellos.
Cómo almacenan los datos las aplicaciones web
Cuando se crea una aplicación web (como la que crea Google AI Studio), no se pueden guardar archivos directamente en el ordenador del usuario por motivos de seguridad. En su lugar, las aplicaciones web utilizan almacenamiento del navegador, una función integrada que permite a los sitios web guardar datos localmente en tu navegador.
Para añadir memoria a tu aplicación, necesitamos comprender algunos conceptos generales:
- El QUÉ: Tipos de almacenamiento del navegador
- El CÓMO: ¿Cómo se escriben los datos para su almacenamiento?
- El DÓNDE: Dónde se guardan los datos
¿QUÉ es el almacenamiento local del navegador?
Hay dos tipos principales de almacenamiento en el navegador:
- Almacenamiento local: los datos permanecen guardados incluso después de cerrar el navegador.
- Almacenamiento de sesión: los datos desaparecen al cerrar la pestaña del navegador.
Para nuestro kit de herramientas para fundadores, utilizaremos ambas opciones, para que su retroalimentación entre sesiones.
¿CÓMO funciona?
El almacenamiento del navegador almacena los datos como pares clave-valor, de forma similar a un diccionario, donde cada dato tiene un nombre (la clave) y un valor.
Por ejemplo:
- Clave => Problema
- Valor => «Los agricultores no pueden vender sus productos».
Tanto la clave como el valor deben ser texto (cadenas) y se almacenan como JSON. JSON (JavaScript Object Notation) es un formato estándar para representar datos que resulta fácil de leer tanto para los humanos como para los ordenadores.
Toda la estructura JSON se almacena como un único valor de cadena en localStorage, con un mayor anidamiento si hay más pares clave-valor.
Por ejemplo, almacenar un problema y retroalimentación de dos personas podría generar esta cadena JSON:
{
"problem": "Farmers from local rural communities can't sell their farming goods",
"feedback": [
{"person": "J Smith", "resonates": "Yes, sees it daily"},
{"person": "M Jones", "resonates": "Note sure it's a big issue"}
]
}
¿DÓNDE se almacenan los datos?
El almacenamiento local se encuentra dentro de tu navegador, lo cual es diferente de los archivos locales en una computadora.
De hecho, puedes verlo en el navegador. A continuación te explicamos cómo verlo utilizando Chrome como navegador.
- Haga clic con el botón derecho en cualquier lugar de cualquier sitio y seleccione «Inspeccionar» (o pulse F12).
- Haga clic en la pestaña «Aplicación» (en Chrome).
- Buscar «Almacenamiento local» en la barra lateral.
- Haga clic en él para ver sus datos guardados (es posible que aún no tenga nada guardado, por lo que puede estar vacío).
Limitación:
El almacenamiento del navegador no se sincroniza entre dispositivos. Si cambias de computadora o borras los datos del navegador, tu información desaparecerá. En unidades posteriores, aprenderás sobre el almacenamiento en la nube para resolver este problema.
Esto significa que si cambia de ordenador, utiliza un navegador diferente o borra sus datos de navegación al actualizar la página, la información guardada desaparecerá. En unidades posteriores, aprenderemos sobre opciones de almacenamiento más permanentes, como bases de datos y almacenamiento en la nube.
JSON es la forma en que la mayoría de las aplicaciones almacenan y comparten datos. Los LLM también leen e interpretan muy bien los archivos JSON. Al aprender esto ahora, estás sentando las bases para muchas capacidades, tales como:
- Guardar las preferencias del usuario
- Almacenamiento del trabajo en curso para que los usuarios no pierdan datos.
- Sincronización de datos entre dispositivos (en unidades posteriores)
- Conexión a servicios externos y API
ACTIVIDAD 3
Añadir almacenamiento local
Tiempo estimado: 20 minutos
1. Abrir Github Codespaces
Ve a Github.com, navega a tus espacios de código y abre los espacios de código para tu aplicación Founder's Toolkit.
2. Indique a la IA que añada almacenamiento local.
Copia y pega este mensaje en la sección de chat de Copilot, que debería estar en el panel situado más a la derecha.
Después de enviar el problema y retroalimentación, crea un nuevo registro y guarda todos los datos en el almacenamiento local del navegador.
– Incluye campos para el problema y cada retroalimentación de manera estructurada.
– Después de que el usuario guarde la información, los registros introducidos deberían aparecer debajo del formulario de entrada.
3. Persistencia de los datos de prueba
Una vez que la IA haya terminado de añadir el código, puedes comenzar a probarlo enviando tu problema y retroalimentación.
- Introduce tu problema y retroalimentación para cada parte interesada.
- Haz clic para guardar Problema y retroalimentación
- Actualiza la página (pulsando F5, haciendo clic en el botón de actualización de tu navegador o haciendo clic en el botón de recarga de la aplicación en Codespaces, situado en la parte superior derecha del panel de vista previa).
- Confirme que los datos enviados aparecen correctamente.
- Si no aparece, utiliza Copilot para ayudarte a resolver el problema y hacerlo funcionar.
Deberías poder ver lo que Copilot ha implementado una vez que haya terminado.
Para nosotros, la IA añadió código que hacía lo siguiente:
- Actualizado el script.js .
- Convirtió los datos introducidos en el formulario en una cadena con formato JSON con las claves correspondientes y añadió una marca de tiempo.
- JSON almacenado en el almacenamiento local de tu navegador.
- Recupera los datos cuando se carga la aplicación.
Para verificarlo, siga los pasos anteriores (DÓNDE se almacenan los datos) para abrir las Herramientas de desarrollador en su navegador e inspeccionar el almacenamiento local. A continuación se muestra cómo se ve en almacenamiento local con la clave registros_retroalimentación».
Aquí hay una vista más clara del JSON creado.
[
{
"problem": "Farmers in rural Chiapas, Mexico struggle to sell their farming products at fair prices",
"stakeholder1": {
"resonate": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"aspects": "Finding buyers who pay fairly and on time, not months later.",
"concerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missing": "Many farmers don't have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonate": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"aspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"concerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missing": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-07T23:08:35.579Z"
},
{
"problemStatement": "farmers selling their products",
"stakeholder1": {
"resonance": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"importantAspects": "Finding buyers who pay fairly and on time, not months later.",
"questionsConcerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missingPoints": "Many farmers don’t have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonance": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"importantAspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"questionsConcerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missingPoints": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-03T19:27:37.272Z"
}
]
4. Confirma los cambios
- Ve a Control de código fuente en el panel izquierdo.
- Escribe una descripción de los cambios y pulsa el botón «Commit» para confirmar estos cambios en tu repositorio.
- Sincronizar cambios.
Ahora dispone de una forma de introducir y almacenar retroalimentación de los usuarios retroalimentación su proyecto. Esto le resultará útil a medida que avance en su proyecto. Seguiremos desarrollando esta aplicación Founder's Toolkit en lecciones posteriores para adquirir más habilidades en la creación con IA.
Limitaciones de almacenamiento del navegador
Hay cosas importantes que hay que entender sobre el almacenamiento local del navegador:
Lo que hace bien
- Guarda los datos entre actualizaciones de página.
- Rápido y sencillo
- Funciona sin conexión
- No se necesita cuenta ni iniciar sesión.
Lo que no hace
- No realiza copias de seguridad en la nube ni sincroniza entre dispositivos.
- Se puede borrar si borras los datos del navegador.
- Solo funciona en el mismo navegador.
Reflexión
Has dedicado mucho tiempo a programar para crear una aplicación llamada Founder's Toolkit (Kit de herramientas para fundadores) con el fin de almacenar y sintetizar diversa información. Aquí tienes algunas preguntas sobre las que reflexionar:
Términos clave
- GitHub: Una plataforma que comenzó para almacenar y compartir código.
- Codespaces: Una función de la plataforma GitHub que permite ejecutar código en un entorno de desarrollo que ejecuta VS Code en el navegador.
- GitHub Copilot: Un asistente de codificación con IA que genera código basado en descripciones en lenguaje natural y que funciona con LLM.
- Repositorio (Repo): Una carpeta para tu proyecto en GitHub que contiene todos tus archivos de código y está organizada en diferentes ramas donde puedes colaborar con otros desarrolladores.
- Kit de herramientas del fundador: la aplicación que avanzará a medida que los alumnos vayan construyendo a lo largo de las unidades técnicas.
- Codificación por vibración: Describir lo que se desea en lenguaje sencillo y dejar que la IA genere el código. También se denomina «desarrollo sin código».
- Almacenamiento del navegador: Una función integrada que permite a las aplicaciones web guardar datos localmente en tu navegador, sin necesidad de un servidor.
- localStorage: Un tipo de almacenamiento del navegador que persiste incluso después de cerrar el navegador. Sus datos permanecen hasta que los borras.
- sessionStorage: Un tipo de almacenamiento del navegador que persiste durante una sola sesión de página. Los datos se borran cuando se cierra la pestaña o la ventana del navegador.
- JSON (JavaScript Object Notation): Formato estándar para organizar datos que pueden leer tanto las personas como los ordenadores. Se pronuncia «Jason».
- Par clave-valor: Una forma de almacenar datos en la que cada elemento tiene un nombre (la clave) y un valor. Es como la etiqueta de una carpeta.
- Ingeniería de prompts: La práctica de redactar instrucciones claras y específicas que ayuden a la IA a producir resultados útiles.
- No determinista: La IA no produce resultados idénticos para las mismas entradas. Cada respuesta puede variar ligeramente.
Recursos adicionales
- Aprenda a hacer prompts: Curso completo gratuito
- Guía de diseño de prompt de Google: Consejos oficiales de Google
- GitHub Copilot: Obtenga más información sobre las capacidades de Copilot, incluidas las prácticas recomendadas sobre cómo convertirse en un usuario avanzado.
- Guías de Git: documentación para usar Github y ejecutar comandos git para mantener proyectos.
Apéndice
Ingeniería de prompt
La ingeniería de prompt es el proceso de crear indicaciones eficaces para guiar a los modelos de IA en la generación de respuestas precisas y relevantes.
Se utiliza principalmente en tareas de inteligencia artificial basada en texto y procesamiento del lenguaje natural (NLP).
El objetivo es escribir prompt de forma inteligente para que el modelo pueda generar resultados que satisfagan las necesidades específicas de los usuarios.
¿Qué son los prompts?
- Los prompts son fragmentos cortos de texto que proporcionan contexto y orientación a un modelo de IA.
- Ayudan al modelo a generar respuestas que coincidan con la intención del usuario.
Los buenos prompts deben
- Proporcione una orientación clara sin dar demasiada información.
- Evita ser demasiado general o demasiado detallado.
- Deja claro el objetivo y el contexto del usuario.
¿Por qué es importante la ingeniería de prompts?
- Los prompts específicos mejoran la comprensión del modelo sobre los requisitos de la tarea.
- Conduce a resultados que se ajustan bastante a los resultados deseados.
- Mejores prompts significan tareas de NLP más eficaces y modelos mejor entrenados para tareas futuras.
Al igual que cuando se instruye a un asistente con talento pero sin experiencia, se proporcionan instrucciones claras y precisas para obtener el resultado deseado.
Técnicas
La ingeniería de prompts es más que redactar prompts: es un conjunto de herramientas para ajustar la forma en que trabajas con los LLM para objetivos específicos.
Nivel 1: Esencial
- Sé específico
- Proporcionar contexto
- Da ejemplos.
- Solicitud única : dar un ejemplo de entrada/salida.
- Ejemplo:
«Texto: Jane Smith, de 45 años, es desarrolladora de software en Londres.
JSON: «nombre»: «Jane Smith», «edad»: 45, «función»: «desarrolladora web», «ciudad»: «Londres»
Texto: John Doe, 29 años, es estudiante en París.
JSON: [Nueva entrada aquí]
- Ejemplo:
- Prompting con pocos ejemplos : proporcione algunos ejemplos para ayudar al LLM a aprender el patrón.
- Útil para tareas más complejas en las que múltiples ejemplos podrían ser de ayuda.
- Solicitud única : dar un ejemplo de entrada/salida.
- Especificar formato
- Refinar iterativamente
Nivel 2: Intermedio (Utilizar cuando sea necesario)
- Cadena de pensamiento : pida al LLM que muestre su razonamiento y/o pasos.
- Asignación de roles – p. ej., «Eres un experto...».
- Indicaciones negativas – p. ej., «No incluyas...».
- Control de temperatura – p. ej., creatividad frente a coherencia
Nivel 3: Avanzado (Opcional, para más adelante)
- Autoconsistencia : solicite múltiples resultados y, a continuación, pida al LLM que elija el «mejor» resultado.
- Árbol de pensamientos : pide a LLM que explore múltiples ramas de razonamiento para decidir su respuesta final.
- Generación aumentada por recuperación (RAG) : solicita al LLM que utilice información externa para proporcionar un mejor contexto.
Aquí tienes una lista completa de técnicas de sugerencia: https://www.ibm.com/think/topics/prompt-engineering-techniques
