Codificación de vibe para crear un producto digital con IA del cursor

1. Introducción al curso: Oye, ahí. Bienvenido a las partituras en estar codificando con Cursor. Mi nombre es Fassel, y seré tu guía a lo largo de este emocionante viaje, donde exploraremos cómo la IA y ninguna herramienta de código están redefiniendo lo que significa En un mundo donde la tecnología evoluciona más rápido que nunca, programación tradicional ya no es el único camino para construir productos digitales Herramientas como el cursor están cambiando el juego y haciendo que la creación de software sea accesible para todos, incluso sin escribir una sola línea de código. En este curso amigable para principiantes, nos sumergimos en el apasionante mundo de la codificación, que es una forma creativa e intuitiva, impulsada por la IA de crear aplicaciones. No necesitas experiencia en programación, solo curiosidad y disposición para experimentar. Entonces esto es lo que vamos a cubrir. Entonces primero, hablaremos de estar codificando y entenderemos qué es, cómo funciona y cómo es perfecto para los no codificadores y pensadores creativos Entonces comenzaremos construyendo nuestra primera aplicación con la ayuda del cursor, y te estaré sujetando de la mano a lo largo de todo este viaje. Entonces te mostraré qué indicaciones exactas se supone que debes usar y cómo puedes configurar Cursor en tu sistema y cómo puedes poner en marcha tu primera aplicación Y todo esto sin siquiera tocar el teclado para escribir el código. No vamos a escribir una sola línea de código. Entonces vamos a tener nuestra segunda aplicación, que sería una versión un poco avanzada de nuestra aplicación en la que estaríamos construyendo un blog usando el cursor y aprenderemos cómo podemos personalizar la configuración y lanzar un registro personal para compartir nuestros aprendizajes completamente con la ayuda de la IA Todo esto sin ninguna experiencia en programación, ganarás la confianza para construir más al hacer esto, y podrás ejecutar ideas que has estado dispuesto a construir desde tanto tiempo. Al final de este curso, no solo estarás familiarizado con el be coding, sino que también tendrás dos aplicaciones funcionales, y además tendrás la mentalidad y el conjunto adecuado de herramientas para seguir construyendo sin barreras tradicionales Este curso es para estudiantes, creadores, freelancers, emprendedores o cualquier persona curiosa por construir cosas geniales usando el poder de la IE No antecedentes, no hay problema. Tengo una solución para ti por aquí. Entonces, ¿estás listo para construir tu primera aplicación con solo vibraciones y curiosidad Empecemos. 2. Qué es la codificación de vibe: Ahora bien, ¿qué es este término estar codificando? Entonces entendamos que esto ser la codificación no es una técnica de programación formal. Por supuesto, tiene la palabra codificación en ella, ¿de acuerdo? Pero no es una técnica de programación formal. Es más una forma creativa basada en el flujo de construir cosas usando IA. Déjame explicarte esto con la ayuda de algunos ejemplos entonces déjame elaborar sobre esto. Imagine que tiene una idea para una aplicación pequeña o una característica específica que desea construir en cualquier producto existente. ¿Bien? Digamos que solo tienes una idea de app, ¿de acuerdo? Y en el pasado, lo que tendrías que hacer es si tuvieras una idea y si quieres venir, si quieres darle vida a esa idea, necesitarías aprender un lenguaje de programación, bien, o tendrías que entenderla sintaxis, y además tendrás que escribir cada línea de código tú mismo. ¿Bien? Esta es una forma de hacer las cosas antes si estás haciendo las cosas por ti mismo, o puedes contratar a un desarrollador por ti mismo. Ahora bien, esto requirió un tiempo significativo , conocimientos especializados o dinero si estás contratando a un desarrollador, ¿verdad? Estar codificando cambia completamente este paradigma. Bien, yo cambio completamente este paradigma. Y en lugar de codificar las cosas tú mismo o contratar a un desarrollador, básicamente estás construyendo software con la ayuda de la IA. Ahora, la IA por aquí significa inteligencia artificial. ¿Bien? Entonces, para decirlo simplemente estar codificando es un enfoque para construir software donde se hace uso del lenguaje natural. Lenguaje natural, es decir, el idioma en el que te comunicas y hablas con tus amigos y familiares. Eso es lo que es el lenguaje natural, que es el inglés sencillo o cualquier lenguaje humano, ¿de acuerdo? Y haces uso de este lenguaje natural para decirle a una inteligencia artificial o herramienta de IA lo que quieres y la IA generaría el código por ti. ¿Bien? Entonces eso es lo que es ser codificación. Ahora, por aquí, cosa número uno, no necesitas mucho conocimiento sobre programación. Entonces antes tenías que escribir, ya sabes, tenías que aprender lenguaje de programación, tenías que entenderlo sintaxis, cómo funciona. Necesitas escribir cada línea de código tú mismo, ¿verdad? Ahora, hay un cambio con estar codificando en esto. No vas a escribir cada línea de código. Solo vas a decirle a AI que lo escriba por ti, y la IA va a escribir el código por aquí. ¿Bien? Entonces, lo que pasa aquí, la IA está haciendo el trabajo. La IA es escribir código, y ya no eres programador, sino que en realidad eres el arquitecto y el constructor. ¿Bien? Entonces básicamente estás planeando toda la aplicación. Ahora, AI está escribiendo el código, ¿verdad? La responsabilidad de la codificación es asumida por AI. Entonces básicamente has pasado a segundo plano y te estás ocupando de las cosas de alto nivel como planificar tu aplicación en qué características debería tener, cómo deberían funcionar las características y si la salida entregada por la IA coincide con tu requerimiento o no, ¿verdad Entonces eres como un arquitecto y el constructor que está diseñando todo, como diseñando los planos, y luego te estás asegurando de que cada ladrillo en ese particular que usa ese plano en particular esté colocado correctamente, Entonces siendo arquitecto, estás planeando cosas. Bien. Esto es algo que he mencionado. Ahora, la IA es su equipo de construcción multiescala súper eficiente ¿Bien? Entonces es como un constructor. Donde le dices tu visión a la IA en un lenguaje claro como el cristal, ¿bien? Elaboras cosas y agregas tantos detalles como puedas, y la IA va a hacer el trabajo pesado por ti. No necesariamente necesitas saber cómo colocar cada ladrillo tú mismo, pero la IA va a hacer el trabajo por ti, ¿de acuerdo? Ahora bien, este término de codificación está ganando mucha popularidad porque con esto, incluso los no códigos o las personas con conocimientos limitados de codificación pueden construir las cosas rápido. E incluso si eres ingeniero, en realidad puedes acelerar el proceso de desarrollo. ¿Bien? Entonces describes así es como puedes describir lo que quieres hacer lo que quieres que haga un software en inglés sencillo, puede ser tan simple como crear una página web simple con encabezado que diga, Mis primeros sean app y un botón que cambie su texto cuando se hace clic Bien. Incluso puedes pedirle que escriba un script de Python que tome una lista de los números y devuelva el promedio. ¿Bien? Entonces este es un simple script de Python que puedes obtener de la IA. Incluso puede crear una pequeña aplicación web de seguimiento de tareas donde puede agregar tareas, marcarlas como completas y ver la lista de todas las tareas. Entonces estos son algunos ejemplos de cómo le estás dando las instrucciones o el prompt a la herramienta de IA, y la herramienta de IA va a hacer el trabajo por ti. Ahora bien, esto es similar a la forma en que le darías una tarea o le explicarías una característica a alguien, cierto, alguien que contrataste. Entonces así es como está funcionando por aquí, bien. Y si, esto es lo que es. Ahora, cómo funciona. Entonces entendamos el funcionamiento de todo este proceso de ser codificación. ¿Bien? Lo primero es que le das la entrada a la IA en lenguaje natural, básicamente, y presentas tu vibra. Ahora lo que quiero decir con vibra aquí es que describes lo que quieres que haga el software en inglés sencillo, bien, y sé como, agrega tantos detalles como puedas y sé lo más elaborado posible. Bien. Ahora, la IA va a interpretar tu entrada por aquí. Se va a analizar tu descripción de todas las características y lo que quieres. Y va a entender tu intención y la funcionalidad requerida y la lógica subyacente. Entonces aquí es donde la IA está interpretando tus requerimientos Y luego salta al modo de generación de código, donde en base a su interpretación, la IA va a generar el código real. Como un código real, quiero decir, archivos DML, archivos CSS, archivos Jascript, archivos Python, dependiendo de qué tipo de aplicaciones estés construyendo, Entonces hay una cosa de observación de ejecución que sucede. Entonces ejecutas el código generado para ver si funciona según lo previsto. Ahora, por supuesto, no necesitas saber cómo ejecutar la aplicación. Puedes preguntar a la IA misma, ¿de acuerdo? Y solo puedes seguir las instrucciones, ¿de acuerdo? Y la mayoría yo herramientas de codificación. Entonces sí, vamos a hacer uso de algunas herramientas para hacer yo codificación, y la mayoría de las herramientas de codificación tienen un entorno integrado donde se puede ejecutar el código de inmediato. Bien. Luego está este paso de retroalimentación y refinamiento. Entonces este es un paso muy importante, ¿de acuerdo? Así que raramente, dependiendo de tus requerimientos, raramente, el primer intento será perfecto. ¿Bien? Si hay algún error o la funcionalidad no está del todo bien, le das el feedback a la IA y eso en lenguaje natural, por ejemplo, puedes decir, Oye, este botón no funciona y no pasa nada si hago clic en él. ¿Bien? Puedes decir, oye, haz que el color de fondo de la página web sea azul claro, o puedes agregar una función, o puedes decirle a la IA que agregue una función al rastreador de tareas que me permita eliminar la tarea. Para que puedas agregar instrucciones de esta manera. Y dependiendo de tu instrucción, va a iterar, ¿verdad Si hay algún mensaje de error que veas, puedes paginar el mensaje de error así como una entrada a la IA, y se va a arreglar por ti. ¿Bien? Y luego va a haber repetición, por lo que repites los pasos 1-5 hasta lograr el resultado deseado. Y es un proceso conversacional, muy parecido a trabajar con un asistente humano Eso es lo que quiero decir aquí. Entonces así es como va a funcionar todo el proceso, ¿de acuerdo? Y hay bastantes ventajas para la grandeza aquí, y la principal ventaja sobre aquí que siento es el aumento de la accesibilidad Esto es perfecto. Este es quizás el mayor beneficio para ti. No es necesario tener amplios conocimientos de programación para comenzar a construir. Baja la barrera de entrada de manera significativa. Incluso los que no son programadores pueden comenzar a tener páginas de destino, pueden comenzar a construir cosas, pueden comenzar a implementar cosas y puedes dar vida a tus ideas , crear prototipos de trabajo, infracción de MVP de tiempo que lo que se necesitaría Entonces aquí básicamente te estás enfocando en la intención, y puedes concentrarte en lo que quieres construir y por qué en lugar de empantanarte en la sintaxis y los detalles específicos de implementación de un lenguaje de programación ¿Bien? Ahora aquí, también hay algunas limitaciones. No todo está bien. Ya sabes, la limitación podría ser códigos de calidad y seguridad. Es posible que el código generado por IA no siempre esté optimizado, eficiente o completamente seguro. Para la producción lista, las aplicaciones, por supuesto, revisión humana y la comprensión del código generado siguen siendo cruciales. Pero yo diría que es un buen punto de partida si estás construyendo algún producto, ¿verdad? codificación de complejidad I es excelente para proyectos simples y prototipado Pero para proyectos complejos muy altos, sistemas a gran escala que requieren una comprensión más profunda de la arquitectura de software, las prácticas de codificación tradicionales siguen siendo esenciales. ¿Bien? Y también, la última limitación es sobre el efecto caja negra. Ahora lo que quiero decir aquí es que obtendrías un código funcional y ni siquiera entenderás completamente. Entonces no entiendes el código, pero el código está funcionando para ti, ¿verdad? Entonces esto puede ser algo bueno así como algo malo. Es bueno para obtener resultados rápidos, pero menos ideal para desarrollar conocimientos profundos de programación o más tarde iterarlo y agregar algunas características personalizadas Así que sí, esto podría ser un inconveniente, ¿de acuerdo? Entonces sí, estos son algunos beneficios y, ya sabes, limitaciones que quiero destacar. Y espero que tengan claro todo este concepto de codificación pe. 3. Herramientas para la codificación de Vibe: Solo quiero hablar un poco sobre las diferentes herramientas que existen para permitirte hacer pe coding. ¿Bien? Entonces una de las herramientas es el cursor, y este es un editor de código EI, como dice aquí en Fuentes grandes. Entonces este IDE, básicamente todo el editor de codificación te permite hacer uso de EI y solo va a escribir todo el código por ti. Bien, entonces conoce tu base de código. Es que permite editar en lenguaje natural. Bien, entonces te permite construir software más rápido, básicamente. Eso es lo que hace. Bien. Y si, este es el sitio web oficial de Cursor. Entonces también tienes algo llamado como copiloto de Gu, que es similar al de Kursor También te ayuda a crear software más rápido. Y así es como se ve por aquí. ¿Bien? Y hay un ID llamado Visual Studio Code. También se integra muy fácilmente en el código de Visual Studio. Entonces esto es lo que es el copiloto de Github . Este es tu sitio web oficial. Entonces tienes plet que también te permite hacer uso de EI y construir software Aparte de estos, hay algunos LLM o modelo de aprendizaje de idiomas como hatchibt Cloud Todo esto ayuda a estos no tienen editores de código dedicados, pero puede usar este modelo de aprendizaje de idiomas de propósito general o LLM para generar código al solicitar, y luego puede copiar y pegar la salida en su entorno de desarrollo 4. Configuración del cursor en la máquina local: Entonces ahora es el momento en que instalamos y configuramos el cursor en nuestro sistema. Entonces lo que rápidamente voy a hacer es voy a decir descargar por aquí. Entonces verás el botón de descarga aquí en la parte superior derecha. ¿Bien? Y si estás en Mac o en cualquier otro sistema operativo, vas a ver aparecer este botón para tu sistema operativo. Puede hacer clic en todas las descargas y ver en qué máquinas está disponible esta aplicación. Puedes ver que está casi disponible en todas las aplicaciones de aquí. Incluso puedes elegir la versión si tienes algún requisito específico de versión. Yo recomendaría que haga clic en Descargar por aquí o aquí en el centro de la página principal para obtener esto descargado en su sistema. Diré descargar. Las descargas de software, también nos dirigiremos a la página de precios por aquí. Ahora, me gustaría hablar un poco sobre los precios por aquí, ¿de acuerdo? Entonces aquí, este es un plan gratuito, y el plan libre es en lo que vamos a trabajar. ¿Bien? No voy a proponer ni pedirte que actualices por aquí. Gratis te da mucho un límite decente, bien, para trabajar en tus proyectos. Entonces vamos a empezar con gratis. Pero si eres un usuario serio que deseas hacer mucho uso del cursor, definitivamente puedes cambiar a diferentes opciones pagas. hay diferentes versiones pagas Aquí hay diferentes versiones pagas por $20 o $200 al mes. Pero gratis es lo que necesitamos para este curso en particular. Y aquí tienes planes de equipo también. ¿Bien? Ahora, echando un vistazo a la función, también puede explorar las características de aquí, cuáles son las características como las ediciones de mult liner, las reescrituras inteligentes, el tap tap tap Bien. Entonces, básicamente, solo tienes que presionar tabulador, y te permite saltar a través de las ediciones a través de los archivos Hay bastantes características. explorar toda esta página. No voy a hablar de cada uno de ellos por aquí, y de hecho voy a mostrarte todas estas características, ¿de acuerdo? Pero si quieres leer, puedes. Ahora, una vez que se descarga el software sobre lo que puedes hacer es simplemente hacer doble clic sobre este e instalarlo como cualquier otro software que instalarías en tu sistema operativo. Así puedo ver la configuración por aquí. Diré que acepto a continuación. Preguntará dónde debe instalar este software en particular. Entonces puedes ver que este es un requisito de visualización gratuito para Windows. Y para Mac, será similar. S siguiente, se va a crear una carpeta Menú Inicio en el menú Inicio para mí. En Mac, podría ser diferente. Diré lo siguiente, y diré el siguiente por aquí. Diré instalar. La instalación tardará unos minutos. No es un software complejo, lo instalas como cualquier otro software. Una vez realizada esta instalación, hay que hacer clic en abrir. Para que puedas ver por aquí, la instalación está hecha. Ahora puedes tomar el cursor de Launch y puedes decir terminar. ¿Bien? Entonces va a abrir Cursor por ti. Entonces puedes ver por aquí, Curso está abierto, y aquí, está pidiendo que se inscriba. Para que puedas registrarte y crear una cuenta si así lo deseas. Sin embargo, te recomendaría que te inscribas por aquí. Entonces voy a decir regístrate, y te llevará a la página web, y aquí te va a mostrar diferentes formas de registrarte. Entonces puedes decir Google Github o puedes registrarte usando el correo electrónico. Así que rápidamente voy a configurar mi cuenta por aquí. Ahora, una vez que termines de autenticarte, vas a ver este tipo de mensaje Bien entonces volveremos al Cursor. Entonces esto es lo que es Cursor. Ahora aquí, me está pidiendo importar ajustes desde el código VS. El código VS es solo otro editor de codificación. ¿Bien? Puedo importar la configuración del código VS o puedo decir saltar y continuar. Así que voy a empezar de nuevo, ¿de acuerdo? También tengo instalado código visual studio o código VS en este sistema , y es por eso que este prompt. Entonces voy a decir Skip y continuar. Y me está pidiendo que elija el tema. Puedes elegir el tema en función de tus necesidades y gustos. Incluso puedes explorar temas. Voy a decir continuar. Bien. Y aquí, me está preguntando, como, qué tipo de hallazgos clave quiero. El código VS es lo que voy a elegir y si quieres compartir algún tipo de datos con cursor para mejorar. Voy a dejar esto sin marcar Bien. Yo me iré. Bien. Entonces no hay opción de escapar, ya veo. Entonces voy a decir, estoy bien y sigamos. Y vamos a decir continuar. ¿Bien? Entonces sí, esto es lo que está el IDE por aquí, como pueden ver, déjame acercarme un poco. Bien. Ahora, permítame darle una visión general de lo que vemos aquí. Así que aquí en la parte superior, claro, se pueden ver las opciones de menú como cualquier otro software, ¿de acuerdo? O puedes ver esto estás en el pro juicio sion. ¿Bien? No estás en la sión ilimitada. Estás en el trial de la versión pro. ¿Bien? Tienes juicio desde hace algún tiempo. Ahora, para saber más sobre tu periodo de prueba, puedes venir aquí. Si vas a precios de Cursor, verás aquí bajo plan gratuito, incluye P de prueba de dos semanas. Entonces, desde hace dos semanas, tienes esta versión de prueba de pago. ¿Bien? Entonces eso es lo que somos. Es por eso que vemos Pro trial y puedes ir ilimitado. Puedes abrir un proyecto, clonar un repo, conectarte a YSSH. Estas son pocas opciones. Y en el lado derecho, tienes una ventana de chat. ¿Bien? Puedes ver y lo que recomendaría es cuando abras esto, bien, aquí en el centro, verás este proyecto abierto. Entonces te recomendaría hacer clic en Abrir proyecto por aquí y abrir una carpeta donde vas a hacer todo el trabajo. Y lo que he hecho es cuando dije carpeta abierta, me abrió este tipo de exploder, y he navegado a esta carpeta llamada be coding, y voy a decir seleccionar la ¿Bien? Ahora, en el momento en que seleccionas una carpeta, puedes ver un turno en la interfaz aquí en el lado izquierdo, ¿de acuerdo? Y aquí puedes ver esta carpeta estar codificando aquí arriba, y aquí puedes crear un nuevo archivo, puedes ver pero no vamos a crear nuevo archivo y por todo aquí dentro de esta carpeta, vamos a dejar que AI haga el trabajo. Puedes ver algunas opciones por aquí, como obtener búsqueda y todo esto. Bien. Y aquí es donde aparecerá toda la lista de archivos bajo ser codificación. Y aquí en el panel central por aquí, puedes ver esta división por aquí en el panel central, vas a ver aparecer el código. Entonces, si seleccionas algún archivo, el código aparecerá por aquí. Bien. Y luego en el panel de chat de IA, aquí puedes chatear con el modelo de IA. Ahora tienes algo llamado como agregar contexto por aquí y es una característica poderosa con la capacidad hacer referencia a un archivo específico o a cualquier cosa que quieras agregar como contexto al hablar con IA. Entonces por ejemplo, aquí, puedes agregar archivos de código de carpeta, documentos, cualquier tipo de conversaciones pasadas, terminales, incluso artículos web, puedes agregar aquí. Ahora, debajo de la ventana de chat, si haces clic por aquí, verás agente preguntar y manual. ¿Bien? Estos son los modos de aquí. Ahora, el modo agente es un modo que donde si mencionas algo por aquí cuando se selecciona el modo agente, si dices, Oye, quiero retocar mi landing page y actualizar el color Entonces, sea lo que sea que menciones por aquí, el modelo de IA va a hacer cambios directamente en el código. Por supuesto, tendrás opciones para aceptar o descartar, pero eso es lo que es el modo agente Preguntar es básicamente simplemente va a hacer preguntas sobre la base de código, y no va a actualizar o modificar tu código. Manual significa que el modo manual está diseñado para realizar modificaciones específicas cuando se sabe exactamente qué cambios se necesitan y dónde. ¿Bien? Entonces es básicamente un modo para cambios precisos de código con orientación explícita de archivos. ¿Bien? Entonces aquí, necesitas saber qué cambios quieres hacer, y por eso se llama como modo manual. Bien, entonces estos son los diferentes modos de aquí. Jugaremos con este modo, así que no te preocupes si no estás seguro o no has entendido cuáles son estos. Bien. Aquí tienes la opción de agregar nuevos chats o agentes de fondo y todo esto. Y aquí tienes a Automde, ¿de acuerdo? Entonces automde lo que significa que básicamente lo hará así que si deshabilitas esto, tienes una opción para cambiar el modelo Bien, si lo haces automático, va a conseguir el modelo basado en alguna lógica en la retrospectiva ¿Bien? Pero si no quieres hacer eso, si quieres seleccionar algún modelo basado en tu requerimiento, también tienes la capacidad de hacerlo. Y el modo Max, es decir, habilitará el máximo contexto. Se puede ver por aquí en el pop up. ¿Bien? Y lo es, claro, si agrega el máximo contexto, te va a costar más. ¿Bien? Entonces esto es lo que es, y me aseguraré de estar en el modo automático. Entonces esto es sobre la interfaz de aquí. Hasta el momento, espero que esto haya sido útil. 5. Nuestra primera aplicación con codificación de Vibe: Entonces ahora es el momento de que comencemos a borrar la codificación y creamos nuestra primera aplicación sin siquiera escribir una sola línea de código y conseguir que la IA escriba y haga todo. ¿Bien? Entonces lo que voy a hacer es que voy a hacer uso del cursor por aquí, primero, y voy a necesitar un modelo más de IA que vaya a jugar un papel secundario, y puedes hacer uso de cualquier modelo de IA como hat Tipty o Gemini Entonces voy a hacer uso de Chat chipty, ¿de acuerdo? Y abriré ambos en dos ventanas distintas. Entonces aquí tengo cursor. Lo que voy a hacer es rastrear este cursor y aquí tengo esta opción. Agregar dos ventanas. Voy a abrir esto en vista dividida así, o. Y hay una razón para esto. ¿Bien? Entonces aquí, básicamente, en este LLM en particular, voy a pedir toda la información genérica Entonces voy a fingir que no conozco codificación. Y como no codificador, ¿cómo se pueden codificar las cosas? En este LLM en particular o en este modelo de IA en particular del lado derecho, voy a hacer preguntas y ayudar a tomar ayuda para generar indicaciones básicamente que pueda poner por aquí Y por aquí, voy a hacer que la IA escriba. Bien. Así que vengamos por aquí del lado derecho, y le voy a decir al modelo de IA, Oye, no sé nada de codificación o programación, ¿de acuerdo? Deseo crear una app sencilla o debería decir, una app web sencilla con título que diga mi primera app be y el botón E. Y botón que cambia que cambia el fondo de toda la app al azar. Bien. El color de fondo es lo que puedo ver. ¿Bien? Así que puedes presentar tus pensamientos por aquí, ¿de acuerdo? Y puedes mencionar por aquí, estoy haciendo uso. ¿Bien? Estoy haciendo uso del cursor para lo mismo. Bien. Y por favor comparte mi plan conmigo. ¿Bien? Ahora, una cosa a tener en cuenta aquí es que estoy pidiendo un plan, ¿verdad? No estoy pidiendo nada más. Estoy pidiendo un plan. Entonces aquí, soy arquitecto. Estoy proyectando y pensando en mí mismo como constructor o arquitecto que va a planear toda la aplicación. Entonces va a planear va a compartir todo el plan conmigo, ¿de acuerdo? Y veamos qué salida obtenemos por aquí. Entonces solo voy a decir Enter y veamos qué salida obtiene. Bien, entonces sabe mi nombre porque me he apuntado. No te preocupes en absoluto. No necesitas saber codificación para empezar con proyectos sencillos como este, Bien, bla, bla, bla Y está diciendo que tiene un botón, tiene que cambiar el color de Fondo al azar. Bien, entonces aquí se volvió a poner en el requisito, así entiende a lo que me refiero Me está diciendo cursor abierto, cursor descarga, nueva página web, y me está dando este prompt. Se puede ver por aquí. Entonces me está diciendo, crear un nuevo archivo, index dot HTML. Esta es su página web principal y escriba esta instrucción a este software en particular aquí. ¿Bien? Entonces esto es algo que puede hacer, y aquí también te ha dado algún código. ¿Bien? Ahora, crea una página web sencilla con el título MF YAP y agrega un botón que cambie el color de fondo aleatoriamente al hacer clic Bien, entonces voy a copiar esto. No voy a crear el archivo index dot tm o puedo decirle a este modelo de IA que se salte esa parte. No quiero crear archivos yo mismo. Pero deseo que Cursor haga todo por mí. ¿Bien? Estoy en un en una carpeta ahora mismo. Quiero que se cree la primera aplicación en una carpeta ahí. ¿Bien? Entonces te estoy diciendo que ahora mismo estoy en una carpeta. El nombre de esta carpeta es ser de codificación. Y dentro de esta carpeta, quiero que se cree toda la app. Eso es lo que estoy diciendo. Entonces aquí dice perfecto. Estás dentro de la app. Bien, aquí lo que puedes hacer es pedirnos crear una nueva carpeta, ser app. Así que aquí puedes ver ser app. Ser app. Esto es lo que ha dado el nombre. Me está diciendo que vuelva a crear un índice o archivo HTML. Cuando he dicho que sí quiero crear archivos yo mismo. Simplemente copiaré esto y voy a decir esto y responderé o me daré rom directamente en breve. ¿Bien? Quiero el insumo que debo darle a COSA. Entonces eso es lo que estoy pidiendo por aquí, y te está dando el prompt exacto. Entonces te está diciendo, crea una carpeta llamada be app con un índice o archivo HTML que muestre el título. Para que veas que te está dando todo el prompt por aquí. Entonces tomó un par de repetaciones por aquí o un par de iteraciones es lo que diría yo Bien. También puedo eliminar esta carpeta. Bien. Voy a decir muévete a la papelera de reciclaje, y voy a armar todo este baile de graduación Bien. En lugar de preguntar, voy a cambiar esto al modo agente porque quiero que el cursor lo codifique por mí. Ahora, en el momento en que le dé este comando a Cursor, veamos qué hace. Así que voy a abrir esto, y se puede ver que ha empezado a trabajar en ello. Se ha empezado a enumerar los directorios. Se ha creado la carpeta BAP. Ha creado este índice o HTML por aquí, y puedes ver que en realidad te ha dado la salida. La carpeta IAP se ha creado con un archivo de índice o HTML. Este archivo muestra Mi fuerza YAP y un botón cuando se hace clic cambia el color a aleatorio Entonces estos son todos los requisitos que hemos hecho, y ya puedes ver, ahora puedes abrir este archivo en el navegador para ver tu app en acción. ¿Bien? Entonces lo que voy a hacer es que voy a abrir una nueva pestaña del navegador por aquí y voy a elegir tract soltar este archivo por aquí, algo así, y solo puedo presionar Enter. O puedes abrir esto en la carpeta. Básicamente, puedes navegar a este archivo en particular y puedes simplemente hacer doble clic porque es un archivo HTML. Bien. Ahora veamos por aquí cuál es la salida que obtenemos cambiar el color de fondo. Uy. Se puede ver lo hermoso que es esto. Bien, ¿cuánto tiempo tardó esto? No tomó mucho tiempo. No requirió mucho esfuerzo también. ¿Bien? Sí, hubo algunas repeticiones con GBT por aquí porque no nos estaba dando la salida correcta Pero, ya sabes, es EI y, ya sabes, a veces lleva tiempo obtener la salida perfecta. Ahora echemos un vistazo a la salida. Aquí se nos da un expediente. ¿Bien? Este archivo tiene este código de color verde, ¿de acuerdo? Entonces aquí, se puede ver aceptar y rechazar. Y aquí también, se puede ver aceptar y rechazar. Bien, entonces te está dando una opción que, oye, estos son los cambios que ha hecho a este archivo. Bien. Y estos cambios están resaltados en verde, y se pueden aceptar los cambios. Entonces aceptaré los cambios después de ver la salida. Me gusta la salida. Entonces voy a decir acepta, y se puede ver que los cambios están por aquí. ¿Bien? Entonces esto es lo que puedes poner marcha con COSO, básicamente. Si quieres hacer preguntas específicas sobre este código, puedes cambiar a preguntar Más y puedes decir, Oye, ¿ puedes explicar el código en menos de 500 palabras Por ejemplo, puedes hacer preguntas. Si quieres entender algo, si no tienes claro algo, puedes ver que me está explicando todo. Puedes ver la estructura HTML, hay una etiqueta body, body usa esto y puedes ver cómo funciona JavaScript y cómo funciona. El usuario ve este botón, al hacer clic en el botón, cambia el color de fondo a color aleatorio. Y hemos hecho uso de HTML CSS en Gs en un solo archivo por simplicidad. Puedes pedirle que también tenga archivos separados que sea completamente tu elección. Para que pueda leer sobre esto. Puedo decir, ¿puedes separar HTML, CSS y S por mí? Bien. Así se le puede decir que lo haga. Y absolutamente va a hacer esto. Se puede ver que está separado. Bien. Me doy cuenta que estamos en modo preguntar, así que no cambia el código. ¿Bien? Lo que puedo hacer es que voy a copiar esto, usted tiene una opción por aquí también. Aplicar al índice HTML. Aplicar al índice de punto HTML. Se puede ver. Pero no voy a hacer esto. Voy a decir modo agente. ¿Puedes Ups? Entonces esto es lo que está entrando. Sólo voy a copiar este aviso por aquí. Bien. O volveré a enviar este prompt en modo agente desde aquí. ¿Bien? Así que tú también puedes hacer eso. Se va a generar todo, y va a crear tres archivos ahora. Uno es el archivo HTML, que ya tenemos. Después tenemos el CSS y el archivo GS. Esperemos un rato hasta que se genere la salida. A veces puede llevar algún tiempo. Ahora tengo la salida, y si te desplazas hacia arriba aquí puedes ver que ha dado toda la salida, por lo que ha resaltado todos los cambios que ha quitado en color rojo y los cambios que ha agregado en color verde. Puedes ver que tienes la opción aceptarlo y rechazarlo todo. Entonces puedes ver aquí, puedes ver el palo excepto rechazar. Y este bloqueo de código tienes aceptar y rechazar. Este bloque de código, tienes aceptar y rechazar. Y tienes este botón, acéptalo todo. Entonces, si no conoces la codificación, bien, todo lo que tienes que hacer es aceptarlo todo. Bien, porque no vas a entender nada, y quieres pasar tiempo entendiendo o aprendiendo eso. ¿Bien? Así que solo minimizo esto ¡Uy! Entonces, si por casualidad cierra la ventana de IA, simplemente puede hacer clic en este botón de alternancia AIPane aquí en la parte superior Bien. Simplemente voy a mantener este deshabilitado el AIPane, pero se puede ver por aquí, los archivos se han generado Bien, se puede ver cómo se han generado, y yo sólo voy a ver aceptar todo desde la propia ventana de chat, y se puede ver cómo se han creado los tres archivos. Bien. Y no escribiste ningún tipo de código. Si estás fresco, todavía va a funcionar de la misma manera. Se puede ver. Se puede ver que está funcionando de la misma manera. Todo bien. Ahora bien, si quieres cambiar algo, si quieres agregar cualquier tipo de cosa, que puedas iterar sobre ella y solo va a hacer el trabajo por ti Entonces, sí, esa es nuestra primera aplicación que construimos. Espero que esto haya sido increíble. 6. Nuestra segunda aplicación compleja Una versión del blog 1: Bien, así que es hora de que pasemos a nuestro próximo proyecto Y lo que voy a hacer es aquí, estoy en la misma carpeta, estoy codificando. He creado un nuevo chat haciendo clic en este nuevo chat. Icono por aquí en cursor, y aquí en el HathPT, tengo un nuevo chat creado también Entonces esta aplicación en particular que vamos a construir será un poco compleja que la anterior. E implicaría algunas características. Entonces básicamente, va a ser una aplicación de blog, y voy a darle este prompt a HatGBT Entonces le voy a decir a JAGBR eso, Oye, deseo construir un bloque, bien, donde pueda compartir mis aprendizajes diarios ¿Bien? Este es mi objetivo personal de por qué estoy construyendo esto. Agregar un nuevo bloque debería ser tan simple como agregar un nuevo archivo, ¿de acuerdo? Ahora bien, no sé cómo qué. Solo le estoy diciendo a HatGBT eso, oye, agregando un nuevo blog porque estaría agregando nuevo blog todos los días, Ya que lo estoy haciendo para crear y compartir mis aprendizajes diarios y documentar mis aprendizajes diarios Por lo tanto, agregar un nuevo bloque debería ser tan simple como crear un nuevo archivo. ¿Bien? Necesito filtros básicos usando etiquetas, filtros tan simples. La aplicación debe verse moderna y hermosa. ¿Bien? Y estoy haciendo uso del cursor. Bien, aguanta ahí. Estoy haciendo uso del cursor para construir esto. No tengo ningún conocimiento de programación. Entonces esto es algo que le estoy diciendo a Chat JBD explícitamente ¿Bien? Ahora, por favor comparte un plan para que yo trabaje y ponga esto en marcha de inmediato. Además, he mencionado dónde estoy, así que estoy en la carpeta estar codificando, y quiero que el proyecto resida en una nueva carpeta dentro de esa carpeta. Bien. Entonces estas son las cosas que he mencionado aquí. Bien. Ahora, ¿deberíamos decir enviar? Digamos enviar y veamos qué salida obtenemos por aquí. Entonces solo voy a expandir HTGBDoe ya que estamos trabajando en ello. Para que puedas ver por aquí. Este es el resumen de la meta. Entonces aquí, es retroceder sobre tus metas y decirte eso, oye, esto es lo que he entendido Entonces tienes que ver por encima de tus filtros de etiquetas, agregar un blog es igual a nuevo archivo, blog como ganancias diarias, diseño moderno y hermoso, construido usando cursor, sin conocimientos de codificación. Bien, entonces HGbD ha captado esto de manera justa. Ahora, ven aquí. Se trata decirle y darle alguna información sobre la estructura del proyecto. Está diciendo siguiente Js. Entonces haremos uso de Next Js. Bien. Eso está bien si no sabes qué es el próximo Gs, solo te está diciendo, y también te está diciendo que es un framework web moderno. Entonces eso está absolutamente bien. No necesitamos saberlo. MDX Ahora, el archivo MDX son los archivos markdown que estaría usando la aplicación ¿Le dijimos a Chat JB que, Oye, quiero hacer uso de archivos MDX? No. Entonces nos está diciendo que vamos a estar haciendo uso de archivos MDX porque queremos que la funcionalidad sea muy sencilla Agregar un nuevo bloque debería ser tan fácil como agregar un nuevo archivo. Bastante justo. Ahora, tailwind CSS para estilos hermosos. Bien, entonces ha sugerido que va a hacer uso del CSS de viento de cola No sé qué es el CSS de viento de cola. De hecho, lo sé, pero estamos fingiendo que no lo sabremos, y no vamos a escribir una sola línea de código Así que tailwind CSS, interfaz de usuario CN dura para los componentes modernos de la interfaz de usuario, que está bien y el filtrado automático usando etiquetas en la materia frontal ¿Bien? Entonces esto es algo que ha mencionado. Ahora por aquí, te está pidiendo que crees una carpeta de proyecto por aquí, ¿de acuerdo? Y te está dando todo el plan por aquí, instala las dependencias y todo esto Bien. Ahora no quiero escribir este pedacito de código. Me ha dado un plan decente, pero no quiero hacer esto. Entonces lo que voy a decir es que no quiero ejecutar comandos y escribir código. Comparte conmigo las indicaciones de que puedo dar curso basado en plan Bien. Y quiero que me dé una lista de indicaciones, así que me voy a dar sólo un prompt que haría la magia Bien, así que estoy diciendo eso dame un prompt que le diga a cursor que haga todo esto. Entonces me está diciendo que ejecute este comando, me está diciendo que haga esto, haga eso. Bien, está bien. Puedes leer esto. También te está pidiendo que crees esta carpeta. Se puede ver por aquí. Bien, crea una carpeta de proyecto y luego básicamente crea esta app de mi Blog usando este comando. Yo no quiero hacer esto. Entonces estoy diciendo que me den sólo un aviso que haría toda la magia. Así que déjanos quedarte ahí, y te está dando este mensaje mágico para el cursor, así que te está diciendo que creas una aplicación de blog profesional moderna usando Next Js tailwind, CSS MDX Quiero agregar nuevas publicaciones de blog simplemente colocando archivos MDX en la carpeta de publicaciones Bien. Y cada publicación debe apoyar la materia frontal con título, fecha y etiquetas. Bien, eso está bien. En la página principal, muestra la lista de todas las publicaciones con tarjetas ordenadas con Noticias primero. Incluye un hermoso estilo usando tipografía de viento de cola. Fragmentar los componentes de la interfaz de usuario CN y agregar filtro de etiqueta en la parte superior como botones de alternar o tal vez chips para filtrar la publicación. Eso está bien. También agrega un alternador de modo claro u oscuro. Esto es algo que no preguntamos, pero se agrega. Uh, todo debe verse limpio y mínimo, amigable con dispositivos móviles. Oh, entonces un problema por aquí, es pensar que, bien, es compatible con dispositivos móviles, así que está bien. Es una aplicación web. No es un problema. Es una aplicación web, que es compatible con dispositivos móviles. Eso es lo que significaba. Pensé que es pensar que queremos crear una aplicación móvil, pero ese no es el caso. Así que voy a venir aquí. Vamos a repartir esto por aquí. No ha dado ninguna información sobre la carpeta de aquí, ¿de acuerdo? Entonces estoy asumiendo que Cursor hará el trabajo en base a esto. Bien, entonces esto está hecho. Y déjame ver mandar aquí, tal vez. ¿Bien? Entonces este es el este es el prompt. Bien, no quiero por aquí Ital una funcionalidad extra por aquí. Entonces, cada publicación debe en la página de inicio, incluir un estilo hermoso, agregar relleno de etiquetas. También agregue Modo de luz y haga alternar el modo. Entonces no quiero que esto conmute por modo luz y modo Doc. Yo sólo voy a quitar eso y voy a decir set. Si lo quieres, puedes sentirte libre de incluirlo , pero acabo de quitarlo. Ahora vamos a esperar a que ocurra toda la magia, ¿de acuerdo? He dado este prompt al cursor. ¿Bien? Ahora bien, no va a ejecutar los comandos. Bien, crear el proyecto implica ejecutar comandos en mi máquina local. Entonces no va a ejecutar comandos por sí mismo, así que voy a aprobar los comandos. Voy a ejecutar esto. Entonces está ejecutando esto. Se puede ver. ¿Te gustaría usar TurboPac? Simplemente presionaré Enter o puedes decir que sí. ¿Bien? Para que puedan ver, ya está corriendo por aquí. Bien. Así que déjame ir a pantalla completa con esto, y déjame expandir esto un poco para que podamos ver lo que está pasando. Puedes ver por aquí, te gustaría instalar turbo pack. Entonces dije, por aquí. Simplemente presiono Enter. ¿Bien? Y se puede ver todo por aquí. ¿Bien? Básicamente se está ejecutando el comando de terminal. Esperaremos un rato. Bien. Entonces está generando el siguiente conjunto de código. Puedes ver la carpeta de bloques aparecer por aquí, ¿verdad? Y va a bloquear carpeta y volver a ejecutar algunos comandos. Entonces voy a decir que corra bien. Y voy a decir que vuelvas a correr. Está ejecutando algunos comandos. Creo que es instalar todas las dependencias que nuestro proyecto necesita automáticamente en piloto automático Bien, solo estamos aprobando órdenes y no haciendo nada, ¿verdad Entonces esto está arriba, y creo que está generando pocos comandos más. Entonces eso es aprobar esto. Y creo que está generando un comando más, corre. Así que sólo estoy ejecutando comandos por aquí. Proceder. Yo sólo diré Enter. Bien. Bien, ¿qué pasó? Bien. Dije que sí. Tienes que presionar Y por aquí, y luego puedes ver ahora que está instalando dependencia. Entonces esperaremos un rato, una vez que esto se complete. Entonces el comando está completo y está creando este post de directorio para que nuestro post resida. Voy a decir run y se crea el directorio. Esperemos un rato lo que pase. Bien. Para que veas que está haciendo algún trabajo por aquí. Puedes ver que está buscando algunos archivos, enumerando algunos archivos, haciendo todas las cosas. Y puedes ver todo esto pasando debajo de esta carpeta de bloques. ¿Bien? No estoy tocando el código ni haciendo nada por aquí, pero podemos simplemente verlo así en cuanto a lo que está sucediendo. Bien, enumeró 15 artículos en bloque, ¿es así? Entonces, no, no veo que eso suceda. S tienen un AL. Ejecutaremos este comando. Eso está absolutamente bien. Todo bien. Está generando un comando más. Bien. Y yo voy a dirigir esto. Bien. Entonces esperaremos un rato. Bien. Está a la espera de alguna aprobación. Yo he dado la aprobación, ¿verdad? Qué clase de bien, ejecutar esta aprobación para ejecutar esto. Yo me encargaré de esto. Bien. Bien, entonces después de un tiempo, ejecutó bastantes comandos. Cambió mucho código, y luego tengo este comando finalmente donde me está pidiendo que ejecute la aplicación. Entonces lo que está haciendo es que me está diciendo que ejecute CD blog y ejecute NPM run deep ¿Bien? Entonces de dentro a la carpeta de bloques, me está pidiendo que ejecute la aplicación. Entonces voy a decir terminal abierta, e idealmente deberían iniciar la aplicación. Se puede ver que la aplicación está iniciando. Voy a venir aquí. Al anfitrión local, déjanos refrescarnos. Bien, entonces tenemos nuestro blog por aquí. Esto se puede ver. Se puede ver que hay un par de posts también que ha generado. Se puede ver Hola mundo. Puedes hacer clic en Hello World. Se puede regresar. Puedes ir a Siguiente elegir Tips. Puedes ver esto, y puedes filtrar, básicamente, Intro, yo puedo filtrar Bienvenida, siguiente eligió consejos. Dependiendo de tu requerimiento, puedes agregar más bloques, y si, este es nuestro sencillo blog que se ha configurado. Ahora si vienes por aquí, tenemos esta carpeta de bloques Gana que tenemos posar bien. Entonces dentro de post, tenemos este tipo de archivos que son como archivos Markdown. Bien, MD Markdown. Y solo aceptaré todos los cambios de código. ¿Bien? Entonces este es el archivo Markdown que tenemos, y si quieres publicar un nuevo blog, tienes que escribir el archivo Markdown así ¿Bien? Se puede ver así es como se han generado los archivos. Bien, entonces esta es la versión 1.0 de nuestra aplicación, y siento que es una aplicación muy decente sin que escribamos ningún tipo de código, no hemos escrito una sola línea de código, ¿verdad? Y lo que hemos hecho es que tenemos este hermoso blog de salida ASE. Este puede ser realmente, muy buen blog si quieres comenzar tu propio, ya sabes, presencia en línea, escribir algunas publicaciones por ahí. Entonces esto es algo que puedes comenzar. 7. Cómo mejorar la programación iterativa de la aplicación de blog: Entonces después de tener ahí la primera versión del blog, es hora de que le pidamos que agregue algunas características nuevas. Entonces te voy a mostrar cómo puedes iterar en el blog o cualquier tipo de proyecto y puedes agregar algunas cosas nuevas Bien. Ahora antes de avanzar más, me gustaría recordarles que estamos trabajando a partir de este proyecto de codificación E, que tiene estos dos proyectos. Uno es bloque y otro es un IAP. Ahora bien, esta carpeta SRC es creada, creo, por el propio COSO, y no tiene nada Entonces por error pudo haber creado esto por aquí. Voy a eliminar esto, así como voy a eliminar esto para que veas que también se borra esta carpeta SRC Ahora sólo tenemos dos carpetas. Blog es un proyecto en el que estamos trabajando. Ahora lo que recomendaría es a veces Curso podría confundirse y si estás en un directorio padre. Entonces ahora mismo estamos en un directorio padre de proyecto de bloque, pero en realidad estamos trabajando en blog. A veces Curso puede confundirse y podría comenzar a crear archivos aquí en esta carpeta y esto estará fuera del proyecto de bloque. Lo que voy a hacer es cambiar rápidamente y abrir el proyecto de bloque y voy cambiar a ese directorio para que Curso nunca se confunda. Para eso, voy a dirigirme a presentar. Voy a decir carpeta abierta. Ahora cuando abras la carpeta, vas a ver este exploder así, dirígete al blog y solo di, selecciona el pliegue ¿Bien? Para que veas que todo el Curso se reiniciará, y ahora estás dentro del proyecto de bloque, ¿bien? Y puedes pedirle a Coso que dirija esto. Oye, ¿me puedes ayudar a ejecutar este proyecto? ¿Bien? Porque si vienes por aquí, reiniciamos Curso en realidad, cambiamos Así que esto va a estar cerrado, ¿verdad? Entonces le pedí que ejecutara la aplicación, pero me ha dado pasos. ¿Bien? Entonces no quiero pasos. Se lo voy a contar. ¿Me pueden ayudar a ejecutar este proyecto? No me des pasos, pero lo ejecutas, algo así. Bien, entonces está bastante claro que tienes que hacerlo. Bien. Entonces me está pidiendo que ejecute este comando de instalación. Sólo voy a decir, bien. Y entonces dirá, Ejecuta este comando, NbmRunTab. Bien. Entonces acabo de hacer clic en Open terminal, y acaba de iniciar este comando, y ahora deberías poder ver el blog sin ningún problema Bien, ahora podemos pedirle que trate en cualquier cosa, dependiendo de su elección. Entonces, antes que nada, se lo voy a contar. Voy a decirle a Cursor que agregue el diseño de cuadrícula por aquí. Entonces este es un diseño de lista, y si agregas más bloques, va a venir en diseño de lista. Entonces déjame mostrarte agregando más bloques, ¿de acuerdo? Entonces puedo decir, por favor agregue más bloques, agregue Por favor en vez de más bloques, diré, por favor agregue tres bloques y también incluya formato de código fuente en ellos. ¿Bien? Entonces también veremos cómo funciona el formato del código fuente porque este es un bloque de codificación que he iniciado. Sólo digo que es un bloque de codificación. Puedes iniciar un blog de recetas, puedes iniciar un, ya sabes, un blog para compartir imágenes, o un blog de fotografía dependiendo de lo que hagas. ¿Bien? Acabo de mencionar que este es un blog de codificación, y esperemos a que agregue los nuevos bloques. Entonces es decir que está leyendo posts y otros dos archivos, y se puede ver un donde está generando nuevos archivos por aquí. Bien, a través de algún error por aquí que es incapaz leer este archivo y procedió más allá, así que estoy asumiendo que lo va a arreglar por nosotros. ¿Bien? Entonces podemos esperar un rato. Déjame ver si estamos viendo algún tipo de cambio. Puedes ver los cambios por aquí por aquí, ¿verdad? Entonces, si vas a reaccionar componentes funcionales aquí, puedes ver que el código ha sido agregado. El código ha sido agregado por aquí, ¿verdad? Entonces así es como se verá el formato del código, puedes ver, ¿de acuerdo? Entonces sí, puedes pedirle que mejore también. ¿Bien? Así que puedes decir por aquí. Así es como está saliendo. pedirte que cambies el color o algo así. Para que puedas tomar la captura de pantalla. Puedes armar la captura de pantalla. Bien. El código que se muestra, se puede ver, no está bien formateado en, bien formateado. Y el resaltado de sintaxis no es adecuado. Entonces he pasado la imagen por aquí, y al mirar la imagen, nos va a ayudar a mejorar, ¿verdad? Entonces voy a aceptar todos los cambios hasta ahora, y esperaremos qué tipo de cambios está proponiendo ahora mismo. Bien. Entonces aquí, esperemos. Bien. Entonces, ¿cuántas cuadras tenemos? Tenemos cinco bloques prox Esperemos por aquí. Bien, entonces esperaremos hasta que se haga todo el código. Ahora, vea por aquí, cualquier cambio que haya hecho CO así que los he aceptado todos hasta ahora, ¿verdad? Presiono el botón aceptar todo por aquí. Ahora bien, si le das este comando a Cursor y lo que sea que esté generando ahora, si no quieres aceptar, si quieres rechazar, puedes presionar el botón de rechazar por aquí. Entonces habrá un botón de rechazo que entrará después de que termine de generar. ¿Bien? Ahora, una cosa más interesante que me gustaría destacar, es la búsqueda. Puedes ver que está buscando algo en la web por aquí. Bien, es buscar que como puede hacer resaltado de sintaxis en el siguiente Gs 15. Eso es lo que va a buscar. Entonces voy a decir continuar. ¿Bien? Estaba pidiendo el permiso. Bien. Esperaremos hasta que se implemente toda la solución. Me está pidiendo instalar ciertos comandos. He aceptado esto y va a instalar esto por mí. Esperemos hasta que se complete toda la instalación. Yo hice muchas búsquedas, algunos comandos ejecutándolo sí, y luego me está preguntando. Me está dando la solución que necesitamos para agregar procesamiento MDX y re hype highlight Esto podría ser alguna biblioteca o algo así y también está pidiendo que tengamos que ingresar esto. ¿ Quieres hacer esto? Diré que sí, por favor haga lo que sea amasar y poner esto en marcha ¿Bien? Así que voy a dar el permiso, ¿de acuerdo? Por favor, haga lo que necesite y ponga esto en marcha. Esperaremos un rato. Por lo que la aplicación ya se está ejecutando. Ha hecho bastantes cambios, y la aplicación ya se está ejecutando, pero todavía me está dando este comando de ejecución. La aplicación se está ejecutando aquí a la izquierda, así que solo voy a ver saltar por aquí, y aquí me está dando este botón aceptar todos porque ha hecho muchos cambios en el código. No voy a aceptar todos los cambios por aquí. ¿Por qué? Porque primero probaré la aplicación. Voy a venir aquí. Hay algún problema, parece que mi aplicación ha comenzado a arrojar errores. Aquí si vas, o aquí está arrojando error en la página de detalles del post. Voy a copiar esto Bien, aquí, y también voy a armar esto por aquí. Bien. Y diré que me sale esto cuando visite esta URL. Entonces tengo que darle tengo que darle al EI o al cours la descripción del error y cuando ocurre el error ¿Bien? Así ocurre cuando visito. Por favor arregla para mí. Bien. Entonces te estoy pidiendo que lo arregles. Ahora esperemos hasta que se solucione. Ahora ten en cuenta, no he aceptado ninguno de los cambios. Este botón sigue ahí, ¿verdad? No he aceptado. Si quieres. Si no es capaz de generar o si no es capaz de improvisar sobre esta característica en particular, tendremos la opción de rechazar todos los cambios y volveremos al estado donde el proyecto estaba antes antes de pedir esta característica Entonces ese es el beneficio de no aceptar todos los cambios de aquí. Se han aplicado los cambios, pero no lo hemos aceptado. Entonces, si vienes por aquí, puedes ver todos estos colores por aquí, ¿verdad? Entonces si pudieras durazonar este archivo. Se puede ver toda esta cosa verde, esto se ha agregado y se ha quitado cosa roja. ¿Bien? Entonces estos son los cambios que se hacen. Ahora, en el momento que diga excepto esta cosa roja se eliminará y se agregará cosa verde. Eso es lo que hace por aquí. ¿Bien? Entonces, bien, aquí me está dando esta opción por aquí, ¿de acuerdo? Entonces voy a elegir el que mejor sea. Me está dando dos opciones para solucionar el problema. Diré que escoja el que sea mejor y que funcione de acuerdo a usted, adelante. Bien. Entonces solo voy a mencionar esto y empezará a arreglarlo. Bien, entonces hizo bastantes cambios por aquí, ya ves, bien. Y hubo un par de iteraciones por aquí, y dice que el error debería ser arreglado Así que volvamos. Y déjame refrescarme. Déjame hacer una actualización rápida. Déjame visitarme. Bien, entonces ahora se puede ver que el resaltado de sintaxis es mejor. Se puede ver el color y ahora todo es básicamente. Así que es la coloración basada en palabras clave es lo que puedes ver aquí. Incluso para JavaScript, veamos, sí. Entonces esto es mucho mejor. Bien. Puedes pedir este tipo de mejoras y puedes iterar sobre lo que hayas facturado Por ejemplo, mañana, si quiero cambiar esta lista a la de formato grid, puedo pedirle que haga. ¿Bien? Eso es algo que podemos hacer. Espero que esto haya sido útil, bien. También voy a mencionar por aquí que a veces puede que no obtenga la respuesta correcta en el scoe completo Habría un poco de ida y vuelta con cursor o modelo DAI que se está utilizando por aquí bajo el capó Así que no te preocupes, no te estreses. Es importante que brindes la información correcta a la IA aquí y va a hacer el trabajo por ti. Por ejemplo, si ves algún tipo de mensaje de error por aquí o si no estás viendo la salida de inmediato, puedes tomar la captura de pantalla y pasarla por aquí y puedes decir, Oye, por favor revisa la captura de pantalla. Esto es lo que veo. Y aquí es cuando veo cuando estaba en esta página en particular, esta es una página, y por favor arréglala por mí. Da la mayor cantidad de información que puedas, cualquier mensaje de error que estés viendo, lo que sea que estés viendo va a hacer el trabajo por ti. Bien. Entonces, sí, espero que esto haya sido útil hasta ahora. 8. Cosas importantes que debes saber sobre el cursor: Entonces ahora es el momento de que hable de algunos de los consejos y trucos que debes tener en cuenta al trabajar con cursor, y estos consejos y trucos pueden ayudarte a obtener la salida deseada mejor y más rápido. ¿Bien? Así que lo primero de lo que me gustaría hablar es del contexto aquí, ¿de acuerdo? Ahora, puedes agregar contexto en tu chat. Contexto, es decir, dar algún tipo de contexto al modelo AM que se está utilizando, ¿de acuerdo? Entonces aquí, puedo decir contexto, y puedo agregar una carpeta antes que nada, así puedo agregar todo este bloque de carpetas. ¿Bien? Entonces esta carpeta tiene mi código fuente por aquí. Entonces le estoy dando toda esta carpeta como contexto, y puedo escribir el mensaje y enviarlo a Koso Entonces esto puede resultar en obtener una mejor respuesta de Cursor porque sabe que te estás refiriendo con respecto a o estás hablando con respecto a este particular lo que sea que haya en este pliegue particular. ¿Bien? Entonces se trata de contexto. Se pueden agregar diferentes tipos de contexto. Puede agregar archivos específicos si lo desea. Entonces dentro del blog, también puedes agregar un archivo en particular si lo deseas. O puedes agregar algún tipo de documentación por aquí, bien, o puedes agregar cualquier tipo de chats anteriores. Entonces, independientemente de los chats pasados que hayas tenido, puedes agregar eso también como contexto. Bien. Entonces podría ser posible que en chats pasados, Cursor te haya dado algo que esperas ahora, y no sea capaz de generar esa misma cosa ahora. Para que puedas darle tu chat anterior como contexto, y luego puedes hacerle las preguntas a Cursor. Puedes agregar Git como terminales de contexto. Entonces, si estás ejecutando múltiples terminales por aquí y si estás recibiendo un error en una de las terminales, puedes agregar esa terminal como contexto. Puede agregar cualquier cosa desde la web. Así que puedes seleccionar web por aquí y básicamente puedes agregar una URL o algo así, y Cursor va a leer esa URL por ti. Bien, una y otra vez, si estás usando algún tipo de bibliotecas o frameworks, por ejemplo, aquí, cuando usamos vimos algunos nombres como tailwind y Next tiene, ¿verdad Para que puedas agregar puedes agregar documentación oficial de esas bibliotecas. Entonces aquí, por ejemplo, hablaremos de viento de cola, así se puede decir viento de cola Y se puede ver por aquí, tailwind CSS oficial. Entonces esta es la documentación oficial que existe con cursor. Así que solo puedes agregar esto en la siguiente persecución también estamos usando. Diré que el próximo Js que puedes ver el año que viene es oficial. Entonces estás agregando la documentación, tanto esta documentación por aquí para que el cursor se refiera. Puedes ver si haces clic en esto, este es el enlace al que se agregarán charlas de CSS de viento de cola Y aquí puedes ver nexts.org slash TOC. Puedes dirigirte a esta documentación oficial por aquí haciendo clic en el enlace y abriéndolo en el navegador. ¿Bien? Entonces así es como puedes mejorar la interfaz de usuario. Más allá, puedes agregar cosas como imágenes y todo si obtienes algún tipo de error. ¿Bien? Entonces se trata de agregar contexto. Me gustaría hablar de ajustes, algunos ajustes por aquí. Entonces, si vas aquí para archivar, dentro del archivo, tendrás preferencias, y dentro de las preferencias, tendrás la configuración del cursor. ¿Bien? Así que déjame, esconder este botón AIP por aquí, ¿de acuerdo? Aquí hay algunos ajustes que puedes ver y pasar por el cursor. ¿Bien? Puedes jugar con algunos escenarios. Una configuración importante de la que me gustaría hablar son las reglas de aquí. ¿Qué son las reglas? Para que puedas ver por aquí, reglas. Y si haces clic en este ícono sobre, te va a abrir el discurso. ¿Bien? Entonces, ¿qué son las reglas? Entonces regla no es más que una especie de reglas que quieres mencionar o algún tipo de lineamientos que quieras mencionar. Para que puedas ver por aquí. Oh, bien, Reglas. Si hago clic aquí sobre reglas, pueden ver. Por lo que no se cargó correctamente, así que tuve que hacer clic en reglas. Entonces con reglas, puedes controlar cómo comporta el modelo de agente con instrucciones reutilizables y con alcance Entonces puedes agregar algún tipo de reglas como, por ejemplo, darme respuestas concisas, bien, algo así. O si estás inclinado a usar un framework en particular. Entonces puedes agregar una regla diciendo que, oye, siempre hacer uso de la siguiente persecución para todos mis proyectos, algo así. Y hay múltiples tipos de reglas que existen reglas basadas en proyectos, reglas basadas en usuarios, memorias o reglas de cursor. ¿Bien? Entonces todo este tipo de reglas las puedes mencionar aquí. Entonces puedes ver por aquí, un ejemplo, ¿de acuerdo? Entonces aquí, has agregado una configuración. Así es como se aplica la regla por aquí. Eso es lo que dice. Quiero mostrarte un ejemplo de regla por aquí. Bien, entonces cuando me desplace hacia abajo, pude ver algunos ejemplos de reglas. Se puede ver por aquí. Esta es una de las reglas. Entonces, cuando trabaje en el directorio de componentes, siempre use viento de cola para estilizar, marco de movimiento para animaciones y siga nuestra convención de nomenclatura de componentes Se puede ver que esta es una de las reglas. Para que puedas copiar y pegar esto en tu página de reglas. Esto es para el directorio ABI. Puedes ver el código repetitivo por aquí. Entonces todo este tipo de reglas, básicamente, reglas no es otra cosa que estás estableciendo el comportamiento para el modelo AIM y estás diciendo que esto es lo que siempre se esperará. Entonces, en lugar de escribir y decirle al modelo de IA cada vez que haces algunas preguntas, puedes establecer las reglas globalmente aquí para el agente. Bien. Entonces puedes ver que puedes establecer reglas basadas en el usuario, ¿de acuerdo? Puedes administrar tus reglas de usuario personalizadas aquí. Puedes establecer reglas basadas en proyectos de aquí, bien. Y sí, esto puede ayudarte a hacer muchas cosas, ¿de acuerdo? Y también puedes agregar algunos recuerdos por aquí. Para que puedas ver diferentes recuerdos por aquí. ¿Bien? Y se puede ver qué recuerdos no es más la información que ese agente está recordando de usted. Para que puedas manejarlo desde aquí también. Si quieres eliminar algo de la memoria, puedes conseguir que se elimine. Bien. Entonces estas son algunas cosas importantes que debes tener en cuenta al trabajar con Cursor y esto puede ayudarte a obtener una mejor respuesta de este modelo de IA. 9. Conclusión del curso: Y ahora hemos llegado a la conclusión de nuestro viaje al mundo del ser codificando con cursor. A lo largo del curso, hemos explorado cómo puedes crear poderosas experiencias digitales sin codificación tradicional con solo colaborar con herramientas de EI como el cursor. Comenzamos entendiendo qué es ser la codificación, que es una forma fresca e intuitiva de construir que prioriza la creatividad, la intención y la colaboración humana con la IE Vimos cómo el cursor te permite construir tu primer esfuerzo de aplicación es. Uso del lenguaje natural y las indicaciones. Luego lo llevamos más allá creando un sitio de bloques completo todo sin necesidad de un fondo de programación. A lo largo de este curso, has sido testigo lo sencillo que puede ser dar vida a las ideas con la ayuda de la IE. No hay errores de sintaxis, ni instalación, ni experiencia previa, solo curiosidad y visión. Has aprendido a confiar en el proceso, comunicar a tu asistente de EI y a construir proyectos reales con facilidad. Pero recuerden, esto es solo el comienzo. El futuro de la creación radica en herramientas como el cursor, y cuanto más experimentes, más seguro e innovador te volverás. Así que sigue explorando, sigue incitando y no tengas miedo de traspasar los límites de lo que crees que puedes construir Gracias por acompañarme en este viaje. Espero que este curso haya sido esclarecedor, empoderador y sobre todo, una divertida introducción a las posibilidades de desarrollo de IA sin código Con este curso, en la sección de proyectos, vas a encontrar un proyecto de clase, que os animo a todos a completarlo y compartirlo con toda la clase. Edificio feliz.