Indicación. Construir. Envío.: IA para desarrolladores web. Construir tres veces más rápido.

1. Trailer: ¿Eres desarrollador web? Sí, entonces déjame preguntarte algo. ¿La codificación se siente demasiado lenta a veces? ¿Pasas horas en stack o flow? ¿Quieres construir más rápido, mucho más rápido? Sí. Entonces tengo algo para ti. Presentamos prompt, build ship, IA para desarrolladores web, construido tres veces más rápido Un nuevo curso diseñado para ayudarte a programar más rápido. En este curso, te enseñaré bases sólidas de IA. Cinco formas en que la IA puede ayudarte. Los tipos de herramientas de codificación de IA. Construiremos una pequeña aplicación web siguiendo el flujo de trabajo de desarrollo web con IA. Además, asumirás dos desafíos en los que construyes aplicaciones web por tu cuenta. Para quién es esto? Desarrolladores web de todos los niveles. Cualquiera que escriba código incluso fuera de webdv. Imagina pasar menos tiempo atascado en bichos y más tiempo construyendo realmente. Este curso te ayudará a enviar tu proyecto tres veces más rápido. estado enseñando IA para desarrolladores web desde 2023, y puedo decir con confianza, si no estás usando IA para tu flujo de trabajo diario, estás atrasado Pero no te preocupes. Te mostraré todo y te enseñaré todo lo que necesites para salir adelante. Estaré feliz de verte en mi curso. 2. Módulo 2: introducción: Hola, y bienvenidos al módulo número dos. En este módulo, exploraremos las siguientes cosas. Comenzaremos con los conceptos básicos de IA generativa y cómo funciona. Después iremos a las populares AI de propósito general. Discutiremos en detalle cada uno de esos. A continuación, pasaremos a las cuatro formas de interacción con la IA, y terminaremos con una arquitectura pronta. Así que vamos a empezar. 3. Lección 1: Hola, y bienvenidos a la lección número uno. En esta lección, vamos a hablar cómo está funcionando realmente el General VI. Y claro, nos vamos a centrar en un texto basado en el general VI porque el código es texto, ¿de acuerdo? Bueno, déjame mostrarte un par de diapositivas de la explicación oficial de Google. Como explica Google, los modelos de lenguaje tan generativo, el texto. Estos modelos aprenden sobre patrones en el idioma a través de los datos de entrenamiento. Entonces significa que el ingeniero alimenta la máquina, los grandes, grandes terabytes de datos de texto Y luego la máquina aprende sobre estos grandes trozos de texto. Y las respuestas que provienen de esta máquina en realidad son predichas, no calculadas por algún tipo de fórmula, sino más parecidas a las predichas. Entonces otra vez, permítanme recalcar esta cosa. Es predicción, pero no cálculo exacto. Entonces nuevamente, el ejemplo de Google. Entonces veamos esta frase. Estoy haciendo un sándwich con mantequilla de maní, y como pueden ver, hay diferentes opciones, variaciones como jalea, mermelada, plátano, así sucesivamente y así sucesivamente. Entonces significa que cuando vas a preguntar este aviso a la máquina, podrías obtener cualquiera de estas respuestas. Es importante. Esa es la cosa. ¿Bien? Entonces déjame mostrarte un ejemplo más. Le pedí a Chat GPT que enumerara todas las variaciones a las que esa persona pueda responder Hola. Y como pueden ver, tenemos respuestas casuales, una, dos, tres, cuatro, cinco, seis, siete, ocho. Tenemos respuestas amistosas, formales, divertidas, enérgicas, sarcásticas, cortas Y como pueden ver, varias docenas de respuestas diferentes. Como puede ver, si va a solicitar que algún texto genere A con hola, potencialmente podría obtener algunas de estas respuestas. Nuevamente, no es un cálculo, sino una predicción. Entonces tenemos diferentes variaciones que puedes obtener. Bien, entonces por qué es importante entender, quiero decir, el principio fundamental de cómo funcionan los modelos de lenguaje generativo del lenguaje Porque más tarde, cuando tengas más experiencia, podrías construir tu propia IA generativa de lenguaje con tu conjunto de datos personalizado ¿Por qué querrías hacer algo así? Porque tal vez podrías construir te gustaría construir un tablero de chat para alguna compañía o tal vez te gustaría construir alguna, por ejemplo, como una aplicación web de generación de código para ti mismo, para la que te gustaría producir respuestas como Nx Js o NextGS o C plus, y te gustaría que las respuestas precisas posible Entonces en este caso, hay que entrenar a su máquina con un conjunto de datos específico para ese dominio, diría yo. Entonces sería como documentaciones para el lenguaje, el lenguaje de programación Podría ser como libros, los libros sobre ese idioma y, ya sabes, ejemplos. Entonces es importante entender. 4. Lección 2 : Hola. Bienvenidos a la lección número dos. En esta lección, vamos a explorar las populares IA de propósito general. Por propósito general, quiero decir que estas IA pueden resolver diferentes tipos de tareas y no solo las de codificación. En el primero y el famoso está el chat GPT, y el Chat GPT fue probablemente el primero en el mercado, y por eso es tan Así que bienvenido al chat GPT. En el centro, generalmente tenemos el campo de entrada donde podemos ingresar nuestro prompt y luego algunas cosas adicionales como subir archivos, buscar en la web, modelos de razonamiento para cosas más avanzadas en el uso del modo de voz para el reconocimiento de voz. Entonces probemos algo con chat GPT. Entonces le pediremos a HatGpt que codifique la versión repetitiva HTML básica. Y como puedes ver, con éxito ha hecho un trabajo. Entonces vemos el repetitivo HTML básico, y de hecho podemos copiar eso si lo necesitamos Y también suele dar algunos comentarios ahí abajo. nube es conocida por ser la mejor opción para los desarrolladores web y otros profesionales de la codificación, y muchos de los asistentes de codificación y editores de código de IA utilizan la nube bajo el capó. Entonces estamos en Cloud, y como pueden ver, nuevamente, la UI es muy parecida a la AGBT Tenemos el campo de entrada en el centro. Entonces puedes, por ejemplo, elegir el modelo. Aquí están los modelos gratuitos, los pro moodels. Podrías elegir el estilo del idioma. Como ya he mencionado anteriormente, por lo que básicamente es la mejor opción para los desarrolladores web, y por eso han integrado el Github. Así que podrías conectar tu cuenta de Github aquí, y probablemente hará algunas cosas con tu código desde tu Github. De nuevo, podrías capturar capturas de pantalla o agregar un archivo. Entonces, vamos a ver cómo funciona Cloud. Entonces, como puede ver, tenemos el prompt Claude para enumerar las propiedades del texto CSS. Y probablemente te hayas dado cuenta que es un poco diferente al sombrero GBT Sí, eso es correcto porque Claude nos da algo llamado artefactos, y esos son una especie de documentos. Y como puedes ver en este documento, tenemos muy buena respuesta porque tiene algunas agrupaciones para divertirte, formateo de texto, sombra, así sucesivamente y así sucesivamente, y pequeño ejemplo que, claro, puedes copiar así Entonces ese era Claude. Pasemos al siguiente. Entonces el número tres es Géminis. Google Gemini fue desarrollado y producido por Google. Así que bienvenidos dentro del Gemini y como puedes volver a ver, tenemos el campo de entrada y cosas adicionales como agregar archivos. Podrías agregar esto desde Google Drive, desde la computadora local, y solo una imagen. Y claro, podrías usar el tu micrófono para reconocimiento de voz. Así que vamos directamente. Entonces le hemos pedido a Gemini que explique si más construcción en JavaScript. A ver. Como puedes ver, es razonamiento, es pensar, y aquí tenemos la explicación básica. Tenemos el código básico, que podemos copiar. Y una de las cosas que hace Géminis, a veces te da el enlace al artículo real donde obtuvo su conocimiento. Entonces más ejemplos y algunos ejemplos más. Entonces pasemos a la siguiente. Y los dos últimos que vamos a echar un vistazo es un Deep Sik sik profundo se inventó hace un par de meses, se inventó en China, y básicamente va como algo muy similar al sombrero GPT, pero es conocido por sus APIs gratuitas Como puedes ver, se parece más o menos a un Chat GPT, donde tenemos el cuadro de entrada, el modelo DepthKrasoning, buscando en la Entonces escribamos ahora mismo. Entonces le hemos pedido Deepsk que enumere los frameworks populares de Jazz. A ver. Entonces ha hecho trabajo, pero como probablemente notaste, tardó algún tiempo, algo más que otras herramientas para dar realmente la respuesta, pero sigue siendo bastante buena. Conclusión. Entonces, el mejor para la IA de propósito general es incluir la codificación es HAGPT ¿Por qué? Porque tiene un número ilimitado de mensajes, y la calidad de las respuestas y la velocidad es bastante buena. Y para las cosas de codificación, el coágulo es el camino a seguir Ten en cuenta que tiene algunas limitaciones en cuanto al número de mensajes que puedes usar. 5. Lección 3: Hola, y bienvenidos a la lección número tres. En esta lección, vamos a hablar de cuatro formas de interacción con la IA. Por interacción, simplemente me refiero cómo puedes transmitir tu información, tu baile de graduación a la IA. Entonces la primera y la más probablemente obvia, la forma más popular en la que puedes hablar con la IA, puedes interactuar con la IA es el texto. Ya lo hemos visto cuando simplemente escribes algo, pides algo y la IA te responde. Así que vamos a echar un vistazo rápido. Entonces estamos en chat, GPT, UI, y nuevamente, hagamos un sencillo prompt Por lo que hemos incitado las siguientes cosas. Explica qué es lo que se menciona CSS con ejemplos. Como pueden ver, el ha GPT comenzó a responder. Entonces aquí tenemos la definición. Ahora tenemos la animación CSS básica, el ejemplo de cambio de color con código. Explicación. Segundo ejemplo con elemento móvil e incluso un tercer ejemplo. Y al final, como puedes ver, todavía estamos obteniendo las propiedades de animación CSS como una tabla con una descripción para cada propiedad. Entonces, la segunda forma en la que puedes interactuar con la IA es el audio. Para poder hacer eso, tendrás que tener un micrófono en tu teléfono o en tu computadora. Estamos en chat, GPT, y como pueden ver, tiene este icono usar el modo de voz Así que vamos a hacer clic. Y por el momento, como puedes ver, nuestro ícono de micrófono está apagado. Así que simplemente estamos dentro del modo audio. Entonces vamos a encenderlo. Hola, Chad GBT. Hola, ¿cómo te va? Bueno. Gracias. ¿Podrías explicar la diferencia entre React JS y Next Gs en palabras simples, claro, ReactJS es una biblioteca JavaScript para construir interfaces de usuario, principalmente para aplicaciones de una sola página Te ayuda a crear componentes que manejen su propio estado. NextJS por otro lado, es un framework construido sobre React Agrega características como renderizado en el lado del servidor, generación de sitios estáticos y enrutamiento fácil, lo que lo hace más adecuado para crear aplicaciones web listas para la producción. Entonces ReactJS es como la base, y NextS es como un kit de herramientas mejorado construido encima Muchas gracias. Eres bienvenido. Si tienes más preguntas, no dudes en preguntar. Como puedes ver, solo hemos intentado platicar con chat, GPT, e incluso tenemos resultados cortos con nuestro discurso y la respuesta A pesar de que se puede utilizar el canal de audio, pero no es tan adecuado para la codificación. Entonces, la siguiente forma en que podemos interactuar con la IE es la imagen. Significa que puedes subir alguna imagen a NAI y preguntar o solicitar hacer algo. Entonces esta vez usaremos la Nube. Todo bien. Entonces vamos a subir una imagen, que se ve así. Es como, como puedes ver, sencillo formulario de contacto. Así que acabamos de subir el archivo de imagen usando este icono escribe aquí. Ahora Cloud tiene esta imagen. Entonces tenemos que escribir el prompt. Entonces el prompt es codificar el formulario en la imagen que he subido. Entonces vamos a ver. Como puedes ver, inició el artefacto de código con clases de CSS HDL y tail wing Y también tienes el contenido como imagen de formulario. Se ve así. Entonces probemos otra cosa. Vamos a incitar a Cloud. Le pedí a Cloud que hiciera una vista previa de este formulario. Entonces, como puedes ver, Cloud tiene este modo de vista previa, modo código y modo de vista previa. Y en el modo de vista previa, en realidad a veces se puede ver el componente listo en acción. Nuevamente, no es que no funcione cada vez, pero a veces podrías preguntarle a Cloud, algo así como, ¿puedes hacer una vista previa de este formulario? A veces lo hace casi automáticamente como puedes ver, porque este es el código react y cuando intentamos hacerlo, solo con forma HTML y CSS, realmente no funcionó, pero con un componente react, a veces podrías tener una vista previa de tu resultado final. Y la última forma en que puedes avisar al EI es un canal de video. Entonces anteriormente estábamos subiendo la imagen, y claro, puedes subir el video, pero la cosa es que no es una forma tan popular de incitar en este momento, porque, claro, como probablemente entiendes, es una forma muy cara de usar una IA, pero es posible Por ejemplo, podrías subir el video y pedir IA especializada en IA para operaciones de video, ya sabes, para recrear el video con algunos cambios o tomar al héroe principal del video y hacer algo, ya sabes, usando este personaje No es tan común en el mundo de la codificación. Entonces la conclusión, amigo mío, ¿qué es lo mejor para codificar? ¿Cuál es la mejor manera? Por supuesto, es texto y a veces imágenes. 6. Lección 4: Yo Hola, y bienvenidos a la lección número cuatro arquitectura pronta. En esta lección, te voy a explicar los fundamentos del diseño rápido y la pronta arquitectura. El prompt básico consta de tres partes. El primero es tarea. La segunda parte es contexto, y la tercera es un ejemplar La tarea es una parte obligatoria del prompt porque sin la tarea, todo el prompt es inútil. Y el ejemplo de pronta que consiste solo en la tarea podría llamarse frutas. Y te nombrará cualquier fruta como manzana, pera, plátano. Podría tomar algunas, ya sabes, frutas de los países del norte, países del sur, países africanos, países europeos, Australia y Nueva Zelanda, por ejemplo. Entonces va a ser todo tipo de frutas. Ahora la segunda parte es un contexto, y como pueden ver, la pongo como una buena para tener. ¿Por qué? Porque establece una dirección. Aquí decimos los tropicales. Así nombra frutas, tropicales. Ahora bien, su prompt tiene algunas limitaciones en alguna dirección. Y en ese caso, AI nombrará solo frutas que se consideran tropicales, ¿verdad? Y la tercera parte es un ejemplar. Y como puedes ver, es una parte opcional. Significa que sin ejemplar, sigue siendo un buen baile de graduación, pero ejemplar podría hacer que sea un poco más Y aquí le damos un ejemplo, ejemplo específico como mango. Combinado va a sonar como frutas de nombre, tropicales. Ejemplo es el mango. Entonces aquí están mis evaluaciones personales. Entonces tarea va por 50% de 100 por la importancia. Contexto ir para el 40, y ejemplar va por 10% Entonces veamos un ejemplo más. Entonces la tarea es construir una ciudad. Por supuesto, la IA te va a construir cualquier tipo de ciudad, por ejemplo, algo de ciudades existentes, algo de ciudades antiguas antiguas que ya no se presentan, o como ciudad imaginaria desde su propia imaginación o de algún juego o libro. Y ahora contexto de ciudad, por ejemplo, podríamos decir, debería tener muchos árboles, clima nublado, lluvioso y fresco. Y ahora, claro, no vamos a ver algunas ciudades de países muy cálidos en algunas de países muy fríos. Y aquí podríamos agregar que la ciudad debería ser como una ciudad real de nuestro planeta. Un ejemplar, por ejemplo, Seattle, y ahora tiene, ya sabes, como dirección específica a la que ir Entonces tomemos un ejemplo más del mundo de la codificación. Entonces la tarea podría ser construir una forma. Y ahora entendemos que la forma podría ser muy larga o forma muy corta. Podría ser estilizado de diferentes formas, diferentes fuentes, colores, tamaños. Con nuestro contexto, establecemos algunas limitaciones. Por ejemplo, deberíamos tener un CSS de viento de cola. fuente debe ser pop ins, los colores del logotipo de Google y los campos deben ser nombre, correo electrónico y fo. Y ahora también agregamos un ejemplar que dirigimos tipo de Aish para que pudiera inspirarse en la imagen que hemos subido Entonces pienso, amigos míos, ahora ustedes tienen un buen entendimiento de cómo diseñar un prompt. Y nuevamente, podrías usarlo no solo en la codificación sino en tu vida real y en diferentes tipos de tareas. 7. Ejercicio: Este estilo de práctica. Y para este módulo, tendrás una tarea muy pequeña, que es construir un prompt simple usando la arquitectura adecuada, y luego probar este prompt en cuatro geneightee diferentes que hemos cubierto Entonces el objetivo de esta tarea para que entiendas la mecánica de incitar. Y así para que sea un poco más fácil para ti, déjame descomponer la tarea en pequeños pasos Entonces el paso número uno es crear un prompt simple, y no tiene que ser codificación, aunque la codificación va a ser un poco mejor porque sigue siendo el curso para la codificación. El paso número dos es aplicar la regla, la 504010 que hemos cubierto en las lecciones anteriores Recuerda tarea, contexto, modelo y paso número tres, vas a las diferentes IA Nuevamente, Chad, ZEPT, Cloud Deep seek y Gemini e intenten usar este prompt y vean el resultado por Entonces nuevamente, en este módulo, nuestro objetivo es entender la mecánica, que te sientas cómodo usando la IA en general. Entonces, buena suerte. 8. Módulo 2: resumen: Enhorabuena por completar el módulo número dos. En esta lección, has aprendido muy importantes, como GnaFoundations, y cómo funciona, AIs populares de propósito general como Claude, HATGBT Además, has aprendido las cuatro formas de cómo puedes interactuar con la IA. Significa texto, audio, imagen y video. Por último, pero no menos importante, es una arquitectura pronta. Así que has aprendido a diseñar correctamente y crear prompt para obtener los mejores resultados que se adapten a tu proyecto. Entonces otra vez, enhorabuena y nos vemos en el siguiente módulo. 9. Módulo 3: introducción: Hola, y bienvenidos al módulo número tres, la IA generativa en un proceso de codificación Entonces, amigos míos, ahora empieza el fondo porque nos estamos metiendo en la zona de codificación. Bienvenida. En el Módulo número dos, has cubierto los fundamentos vitales y muy importantes del uso de IA generativa Pero ahora vamos a entrar en la parte media. En el módulo número tres, comenzaremos discutiendo qué papel juega JNAI en un proceso de desarrollo web Entonces iremos a y veremos las mejores partes de la IA y las partes débiles de la IA. Y por último, la gran sección del módulo estará dedicada a visión general de las herramientas y específicamente para la generación de código. Analizaremos los chats de propósito general para codificación, chats especializados para desarrollo web, asistentes de codificación y editores de código AI. Así que vamos. 10. Lección 1: Bienvenido a la lección número uno. Entonces, en esta lección, exploraremos qué papel juega GNAI en un proceso de desarrollo web Veremos algunos casos, ejemplos y cosas que hay que entender. Entonces, el primer y muy importante hecho que tienes que comprender es que IA es una adición agradable para tener a tu proceso. No es algo obligatorio que tengas que tener. ¿Por qué? Porque todavía se puede escribir código sin IA, como hemos estado haciendo todos estos años? Es importante porque si entiendes esto, entonces estarás muy a salvo del FOMO, del miedo a perderse porque en los últimos días y meses, podemos ver casi todos los días que entra en escena nueva IA, y a veces pensamos, Oh, probablemente deba usarla porque va a hacer algo Sí, probablemente, pero aún así, es importante entender que solo es agradable tener adición. Ahora, tenemos la pregunta. Entonces, ¿qué papel juega en nuestro proceso, cómo exactamente nos ayuda? Y la respuesta es sencilla. Solo ahorra energía y tiempo. Eso es. Es ahorro. No es agregar algo nuevo o algo que sea necesario. Solo ahorra energía y tiempo. Sí, hace un poco de pensamiento para nosotros. Escribe código para nosotros. Sí, lo hace. Pero aún así, podemos hacerlo nosotros mismos. De nuevo, voy a hacer hincapié en esto porque es importante. Solo nos ayuda a escribir nuestro código más rápido. No nos reemplaza. Entonces hagamos alguna observación. Entonces, antes de la era de la IA, nosotros como desarrolladores , codificadores, buscábamos las respuestas manualmente Entonces buscaríamos Google, iríamos a la pila o flujo, leeríamos algunos artículos, veríamos algunos videos de YouTube, luego resumiríamos esa información e intentaríamos implementar nuestro proyecto Entonces básicamente pensaríamos y luego escribiríamos código. Entonces, ¿qué ha cambiado? En la era de la IA, ahora le pedimos a la IA que presente una solución. Entonces digamos que decimos, tenemos esta app, nos gustaría esa característica. ¿Cómo debemos hacer eso? Y luego por supuesto, damos archivos AIO o documentación de biblioteca de terceros y pedimos que nos den un código. Entonces básicamente, para resumir, así que ahora le pedimos y verificamos el código Entonces antes de la IA, pensaríamos y escribiríamos, y ahora nos avisamos y verificamos. Entonces aquí, veamos algún dato interesante. Entonces, como puedes ver, es del CEO de Google. Dice que más del 25% del nuevo código en Google ahora es generado por la IA. Y amigos míos, es muy importante entender porque es la tendencia, es la dirección que va la industria. Y para ser un desarrollador exitoso en una era moderna, tenemos que ser parte de esta dirección, parte de esta tendencia. Y lo que significa para nosotros. Por lo que significa que el tempo de la obra ha aumentado. Nuevamente, es importante entender que la velocidad ha aumentado, no las cosas fundamentales. Nuevamente, como dije antes, podríamos escribir código nosotros mismos, pero la IA nos ayuda a escribirlo más rápido, ¿verdad? En estos tiempos, es aún más importante tener habilidades básicas de codificación. ¿Por qué? Porque, sí, a primera vista, IA puede crear algunas características nuevas, depurar algo. Pero si no vamos a entender qué hizo exactamente la IA, entonces se vuelve inútil. Pero si tienes unas sólidas habilidades de codificación, las básicas fundamentales Entonces ves las conexiones entre elementos, ya sabes, las mejores prácticas tú mismo sin IA, entonces cuando la IA te da algún código, puedes verificar este código y encontrar algunas partes de código no tan perfectas, algunas mejores soluciones que puedes proponer. Esa es la cosa. Entonces primero van las sólidas habilidades básicas de codificación. Entonces primero, tenemos que dominar las habilidades de codificación. Y segundo, después de eso, vamos a la codificación con IA. Es importante, amigos míos. Si quieres ser un buen desarrollador, codificador, para resumir esta lección Tú eres el líder y la IA es tu copiloto. Aún puedes ser un desarrollador muy productivo, pero la IA puede hacer que tu viaje sea un poco más agradable. 11. Lección 2 : Hola, y bienvenidos a la lección número dos. En esta lección, exploraremos lados fuertes de la IA y los lados débiles de la IA para la codificación. Entonces comencemos. Entonces mis amigos, IA hace su mejor trabajo para las materias formalizadas ¿Qué es el tema formalizado? Por lo que el sujeto formalizado es el sujeto, la tarea, el problema que tiene una solución específica, por ejemplo, uno más uno siempre equivale a dos Está formalizado. Entonces en el mundo de la codificación, las tareas más formalizadas son algoritmos porque ingresas alguna entrada específica y siempre obtendrás la salida específica Por eso para las computadoras y máquinas, siempre ha sido más fácil resolver este tipo de tareas. Y como los algoritmos también existen desde hace muchos años, y muchas de las tareas se han resuelto de muchas maneras diferentes, y estas son soluciones conocidas. Es por eso que en algoritmos, obtendrás el mejor trabajo de IA posible. Así que déjame por favor mostrarte un examen. Entonces ahora mismo estamos en vestida, y voy a compartir cómo suelo practicar los algoritmos yo mismo Entonces hubo una tarea sencilla para practicar algoritmos, que es escribir una función que devuelva el número de palabras en una cadena. Y estaba pensando un poco, practicando un poquito solo sin IA, y se me ha ocurrido una función que, como pueden ver, recibe un parámetro de cadena y devuelve finalmente el número de palabras en esta cadena. Y entonces lo que suelo hacer es ir a Cloud o Chat GBT y decir las siguientes cosas Revisar mi solución y dar retroalimentación y dar la tarea en la solución. Y como puedes ver, me ha dado con éxito un feedback, tan pocas consideraciones, tu función también maneja el caso básico, pero también me da posibles mejoras y sugerencias de pruebas. Entonces como pueden ver, estoy dando otro prompt el cual es darme otras posibles soluciones a este problema. Y como pueden ver, viene con una, dos, tres, cuatro, cinco soluciones. Eso es lo que pasa porque es un algoritmo y la máquina es muy buena para manejarlos. Es por eso que si vas a trabajar con algo formalizado como algoritmos o problemas muy específicos, obtendrás los mejores resultados con la IA Lo segundo con lo que la IA es bastante buena para trabajar son bibliotecas y marcos bien conocidos. En ese caso particular, se obtienen buenos resultados porque como estas bibliotecas y frameworks son bastante populares, significa que hay muchos ejemplos en diferentes artículos, otras fuentes más su documentación. Y significa que la IA tiene un contexto bastante rico, y por eso probablemente te va a dar soluciones bastante buenas. Por ejemplo, si tomas react, angular view, estas son bibliotecas muy conocidas en framework, y por eso vas a conseguir soluciones bastante buenas. Siguiente. Entonces ahora hablemos de la palabra IA no tan buena. Así que la IA hace buen trabajo con materias menos formalizadas. Y en mi experiencia particular, el primero es CSS en desarrollo web estilos CSS y sobre todo layout. Entonces pensemos por un momento, por qué es tan En primer lugar, porque CSS no está tan formalizado, no es un lenguaje de programación Por eso no está tan formalizado. Entonces no hay. Entonces digamos en CSS, cuando cometas un error, algún tipo de error, quiero decir, en términos no del error gramatical, sino en términos de error lógico, digamos que usas la misma propiedad dos veces, y la segunda anulará a la primera, así que no vas a obtener ningún error esa es la cosa. Entonces CSS no es tan estricto. Y si hablamos de maquetación, si llevas algún tiempo en desarrollo web, probablemente sepas que puedes hacer maquetación en No estoy muy seguro, pero podría ser como ocho, diez, 12 formas diferentes para lo mismo. Podrías usar Flexbox. Podrías usar grid, podrías usar incluso algunas, por ejemplo, si tienes te gustaría tener varias las columnas, podrías usar solo display inline block, y sigue siendo solución de trabajo. Por eso para los estilos, está bien. Aún debes tener un fondo muy sólido. Yo diría que si quieres usarlo específicamente para estilizar, porque aún así probablemente te gustaría limpiarlo. Pero es así. Y, de nuevo, diría que hace bastante mal trabajo con el elenco y los efectos visuales. Como animaciones CSS complejas, efectos como efectos de desplazamiento y bibliotecas como GSP o framer De nuevo, porque cuando haces algo personalizado, efecto visual en la web, probablemente sea algo que se te ocurrió de como inspiración. Entonces no es algo común. Es por eso que la IA realmente no tiene, de nuevo, el rico contexto para resolver este problema manera efectiva porque yo mismo, sabes, estuve bastante con GSAP para el diseño web, haciendo algunas animaciones e interacciones complejas, y me ha estado dando resultados así que así Y por lo general, visito foros, ya sabes, para platicar con la gente real sobre ayudarme con el tema. Así que de nuevo, solo para recapitular, hace el mejor trabajo en algo muy estricto, formalizado como algoritmos o bibliotecas o frameworks bien conocidos y bien trabajo con estilo y algunos efectos visuales personalizados 12. Lección 3: Bienvenido a la lección número tres, Descripción general de las herramientas. Es una lección muy corta de mis amigos. Simplemente vamos a echar un vistazo muy breve a lo que vamos a cubrir en las próximas lecciones. Así que las herramientas de visión general para la generación de código. Entonces comenzaremos con chats de propósito general para la codificación. En concreto, esto va a ser JAGBT y Cloud. Después pasaremos al ajedrez especializado para el desarrollo web, específicamente UI, y esto es un V cero. Desde Versll, luego convertiremos la asistencia de codificación. Probablemente escuchaste sobre el copiloto de Github o tal vez de Codeon. Y por último, veremos a uno de los editores de código de IA. Así que vamos. 13. Lección 4: Bienvenido a la lección número cuatro. En esta lección, vamos a discutir y echar un vistazo más de cerca a chats de propósito general perspectiva de codificación de IA. Vamos a hablar de Cloud y chatear GPT y vamos a empezar con Cloud Entonces primero, echemos un vistazo a la web Tableros de cartas Devina Web Devina, como puede ver, competencia de codificación de IA, así que donde los desarrolladores web califican las LLM para obtener los mejores resultados en Y como se puede ver, la Nube 3.7 y 3.5, ambas se llevan el primer y el segundo lugar. Entonces primero, echemos un vistazo a los pros en el lado bueno, lados fuertes del coágulo Entonces primero de, es comida gratis. Tienes algún número de mensajes gratuitos todos los días que puedes usar. Segundo, como viste anteriormente en la carta booard como te mostré en una vista previa del coágulo, se considera top para la codificación, y tiene la integración Github, pesar de que en este momento está en mejor modo Tercero, tiene un modo de vista previa, por lo que significa que puedes pedir una vista previa del código, que también lo hace un poco más conveniente para el proceso. Y la última característica que aún no hemos cubierto, es una característica de proyectos. Sólo está permitido en versión pro, y después, voy a hablar rápidamente de eso. Entonces los contras de Cloud probablemente uno de los mayores y el único inconveniente que se me ocurrió es que tiene un límite bajo de mensajes en un nivel gratuito porque de nuevo, podrías usar no muy seguro, tal vez sean 810 mensajes, y luego tienes que esperar hasta que lleguen los nuevos mensajes. Tan rápido, echemos un vistazo a la característica del proyecto. Como puedes ver, está disponible solo para versión. Entonces básicamente, te permite agregar tu propia base de conocimientos, como puedes ver aquí en una captura de pantalla de su artículo. Entonces, por ejemplo, es un documento PDF, otro documento PDF y un tercer documento PDF con una información diferente que luego se utilizará en un contexto de chat. Y es una característica muy, muy sorprendente porque entonces tus respuestas se vuelven más precisas ya que toman en consideración los documentos que has proporcionado. La segunda característica de un proyecto es que se pueden establecer instrucciones personalizadas. Nuevamente, es una característica increíble porque dirijas la IA hacia la dirección que necesitas. Entonces aquí estamos en Claude, como probablemente recuerdes de lecciones anteriores que te mostré que es muy bueno con los algoritmos, y hablamos y discutimos cómo mostró una solución analizada para nuestras tareas de algoritmo. En este ejemplo, como pueden ver, pedí diseñar unas notas un dashboard en react. ¿Por qué en reaccionar? Porque nos permite ver un avance. Sí, y como pueden ver, ha hecho un trabajo bastante bueno. Aquí está nuestro código, y también lo podemos ver. Tenemos una barra lateral, la barra de notas y la nota real en sí. Quiero decir, de nuevo, es bastante conveniente tener esta funcionalidad. Entonces el segundo jugador de nuestro juego es nuestro amado chat GBT. Y como se puede ver en una arena de desarrollo web, comparte el cuarto lugar con un grog, que sigue siendo bastante bueno Todo bien. Y sobre los pros del chat GPT, creo que el número uno es que es el número ilimitado de mensajes gratuitos Sí, a veces cuando usa su modelo top 04, a veces en un chat, podrías recibir una advertencia um de que te quedas sin mensajes gratuitos en ese modelo, pero sigue funcionando en un modelo más simple, lo cual es bastante bueno porque a veces podrías necesitar más mensajes. Sí. Y el segundo pro que tiene una calidad decente de código, código de acero, tal vez no tan bueno como lo es clado, pero aún así es bueno En los contras de ha GPT, esa calidad de código, claro, podría ser mejor porque recuerdo algunas de mis obras a veces, sobre todo con algunos proyectos complejos que implica reaccionar a continuación Bueno, en realidad no hizo el mejor trabajo y la ropa lo hizo Y claro, no hay adelanto. Entonces es una trampa, sí, pero es importante, de nuevo, entender que ahora estamos cubriendo los chats de propósito general y hat GPD no es herramienta para codificar Pero aún así, es algo a considerar. 14. Lección 5: Hola, amigos míos y bienvenidos a la lección número cinco. En esta lección, vamos a explorar el chat especializado para desarrollo web y chat web de IA, que es cero. Entonces el cero, ¿qué es? Es una herramienta muy poderosa para generar UI y código de alta calidad Es una herramienta premium, es gratuita, pero tiene algunos mensajes gratuitos, pero luego también tienes un límite. Y una vez que hayas llegado al final de tu límite, tendrás que esperar algún tiempo o comprar una versión pro. Por supuesto, el V cero fue producido por Versll que también es desarrollador de next Gs Es por eso que NextGS y reaccionar es su tecnología más preferida, pero no es solo reaccionar y próximos Js porque soportan otras tecnologías, también. Así que vamos a explorar rápidamente la interfaz de usuario. Así que nuevamente, como en otros chats básicos, tienes el campo de entrada de UI con herramienta de carga de archivos con alguna mejora de IA Y también, hay alguna captura de pantalla de clon, importando Figma, incluso subiendo el proyecto Entonces significa que puedes subir todo el proyecto y pedir depurar o encontrar algunas inconsistencias o tal vez ofrecer algunas características nuevas Y hay algunos portamatros, construye la landing page o regístrate. Así que vayamos rápidamente sobre las indicaciones en Vzero. Entonces, para obtener los mejores resultados, hay que elaborar bien las indicaciones de entrada En realidad, no es algo dedicado específicamente a V cero. Como probablemente recuerdes, son reglas específicas para obtener los mejores resultados en todos los chats de IA. Entonces, cuanto mejor guíes a Vzero, los mejores y más precisos y relevantes resultados, vas a obtener Por lo que hay algunas recomendaciones de la documentación V cero. Por lo que debe incluir la funcionalidad deseada de componentes específicos. Entonces, digamos que estás construyendo algún Selector de color y entiendes que el Selector de color podría ser tan simple como simplemente ingresar un código hexadecimal o avanzado como un Selector de color de Photoshop Entonces también, es importante especificar las preferencias de diseño. Bueno, es un poco más sencillo. Entonces se especifican los tamaños, la fuente, los colores, el radio del borde, así sucesivamente y así sucesivamente. A continuación, es bueno si mencionas alguna biblioteca. Significa bibliotecas o frameworks de terceros que quieras usar. Por lo que usa el contexto de esa documentación. Y también para describir el contexto o caso de uso, significa cómo exactamente estás planeando usar el componente porque en realidad no es algo súper específico para Vzero solo una ingeniería rápida buena y apropiada Entonces el tamaño fuerte, como dice V cero en su documentación, es una generación de UI. Lo hacen con hat CNuI y las bibliotecas de terceros recomendadas son react three fiber, framer motion, framer motion, Nuevamente, aún puedes usar tus bibliotecas, pero esto es más preferido. Significa que su red neuronal de red está más familiarizada con esas. Ahora, un poco más sobre soporte tecnológico. Como te mostré anteriormente, no solo es el siguiente GS porque dicen que está hinchada, remix, aunque con un poco menos de confianza en comparación con la experiencia en reaccionar a continuación porque de nuevo, el cero aors a las mismas personas que desarrollan el próximo el cero aors a las mismas personas que desarrollan el Y también, como puedes ver, hay un Python, Rust, SQL, así sucesivamente y así sucesivamente. Entonces amigos míos, si desarrollan algo más, aún cubren. Así que cero para los desarrolladores. Nuevamente, a partir de su documentación, dicen que puedes escribir código React limpio desde cero, problemas de Dbag, implementar tus características, recuerda, puedes subir el proyecto, por ejemplo Además, puede proporcionar sugerencias de código, y nuevamente, afirman que Nexs siempre está actualizado Así que para los diseñadores, de nuevo, podrías agregar tu archivo Figma Es como una función avanzada, es una función de pago, pero como una función gratuita, que vamos a explorar muy pronto, puedes agregar tu captura de pantalla. 15. Lección 5 (práctica): Amigos míos, y es un tiempo de práctica de V cero. Primero, vamos a explorar cómo usar el chat basado en texto y luego practicaremos con imágenes. Así que vamos. Bienvenido a la aplicación Zero. Y como puedes ver, en el centro, tenemos el campo de entrada, como ya lo has visto en Cloud y chat GBT Aquí puede ingresar su solicitud. También puedes subir tu proyecto Figma o captura de pantalla desde tu computadora Ahí abajo, tenemos algunas funciones pre hechas como clonar screenshot, nuevamente, importar archivo Figma. Incluso puedes subir tu proyecto y también algunas indicaciones pre hechas como una página de destino creativa o formulario de registro Entonces primero, probemos con un simple prompt, como construir un elemento desplegable moderno. Entonces mis amigos, como pueden ver aquí, podemos o bien crear el pmt justo antes de que estemos planeando usarlo cero, y digamos que tu gamba no está tan bien pulida, entonces puedes usar este pequeño botón mejorado prompt Entonces probémoslo. Como puedes ver, con un par de segundos, nuestro sencillo baile de graduación se volvió completamente prefabricado, bien estructurado y pensado pronto Así que vamos a probarlo. Entonces, como pueden ver, esto hace el proceso de pensamiento, expandiendo también nuestro prompt un poco más. Como puedes ver aquí, hizo un proyecto de estructuras, reglas de estilo, imágenes y medios, formateo de marcos y bibliotecas y algunas advertencias aún más Y por el momento, hace su proceso de redacción de código, y ahora estamos en modo de vista previa. Tara así que obtuvimos nuestro pequeño formulario donde podemos seleccionar el país y como pueden ver, incluso, creo que deberíamos tener alguna funcionalidad de filtrado, lo cual es bastante genial. México. Así que hemos elegido a México. Por ejemplo, he elegido Brasil y fue Brasil y lo mismo con el idioma. Para la primera versión, es bastante buena. Como puedes ver, amigo mío, en la parte superior, tenemos la pestaña de vista previa donde podemos ver las actuales vistas del proyecto en un navegador y también la pestaña de código Aquí tenemos algunos archivos. El principal es probablemente el desplegable que se puede buscar. Entonces es nuestro componente, y tenemos la página TSX donde realmente poblamos el contenido con países e idiomas Y aquí si entiendes el código y sabes lo que quieres hacer, en realidad puedes hacer algunos cambios escribiendo el código. Entonces hagamos algo muy sencillo solo para entender la mecánica de cómo funciona. Entonces intentemos agregar un país más. ¿Bien? Entonces vamos a agregar, como pueden ver aquí, agreguemos Corea. ¿Bien? Entonces porque tenemos a Corea aquí, así que vamos al Ko y hagámoslo Corea. Entonces ahora tenemos que guardar e ir a la pestaña de vista previa. Entonces vamos a ver. T tenemos Corea. Como se puede ver. Entonces así es como puedes hacer cambios simples en un código. También quiero mostrarte otra manera ¿cómo puedes hacer cambios? Es a través del aviso. Entonces como pueden ver, he ingresado al prompt, cambio divertido a mono. Y nuevamente, amplió nuestro prompt para hacerlo un poco más específico, y ha hecho su trabajo, como puedes ver aquí en nuestro componente principal, nuestro teléfono ha cambiado a mono. Un consejo rápido que a veces cuando usas algunos mensajes en tu solicitud para hacer algunos cambios, tu versión, la salida podría no ser la que has deseado Entonces, o tienes que asegurarte de que tu prompt sea bastante específico o tienes que usar algún prompt más para explicar algo mejor. Así que de nuevo, como probablemente recordaras de nuestras lecciones de las fundaciones incitantes Ahora, otra característica muy, muy útil de V cero es forma muy fácil y conveniente ir para navegar entre versiones. Entonces por el momento, como pueden ver, dice Versión dos más reciente. Y aquí arriba, dice Versión uno, ver y restaurar. Entonces veamos qué va a pasar si hacemos clic en el botón Restaurar. Hecho. Como puedes ver, ha vuelto a la fuente anterior de San Serif Y ahora si vas a prestar tu atención, ahora es la Versión tres, pero dice que la tres fue creada restaurando la Versión uno. Entonces nuevamente, es una de las formas en que puedes navegar entre versiones en caso que no te haya gustado algo o esta rama de tus actualizaciones no haya salido muy bien. Pasemos a la segunda parte de esta sesión de práctica. Entonces digamos que tenemos esta captura de pantalla de la interfaz de usuario. Recuerdas el Figma para importar el proyecto Figma es una versión paga Entonces digamos que tienes tu UI Figma y tu versión es gratuita, simplemente puedes descargar una captura de pantalla y luego usar una captura de pantalla como está disponible en versión gratuita Entonces usaremos esta captura de pantalla para pedirle a V cero que la vuelva a crear. Entonces estamos en V cero, y desde aquí se pueden hacer dos cosas. Entonces aquí, como puedes ver, hay una captura de pantalla de clon. Botón. Después de presionar este botón, se le pedirá que agregue su imagen, y luego justo después de que comience a hacer el proceso, por lo que no le llevará a agregar su mensaje. Y digamos que tienes tus propias instrucciones. Entonces en ese caso, probablemente sería mejor usar una trama desde computadora, y luego podría agregar su prompt. Entonces vamos a ir ahora mismo por el botón de captura de pantalla de clon. Entonces como puedes ver, hemos subido una captura de pantalla. Hace su pensamiento. Y como ya te he dicho anteriormente, solo toma tu captura de pantalla y empieza a trabajar enseguida. Entonces, como puedes ver, es bastante simple. Pregunte, por favor recrea la interfaz de usuario que se muestra en la captura de pantalla adjunta Entonces está funcionando. Entonces amigos míos, el cero ha terminado su trabajo, y como pueden ver, recreó bastante bien nuestra imagen Cuenta con todos los componentes. Iconos, campos de búsqueda, la barra lateral y la parte principal con los nombres de usuario. Y creo que para la primera iteración, ha hecho bastante buen trabajo Y como puedes ver, veamos, incluso es totalmente receptivo. Bien. No mejor. Así que de nuevo, también, se puede ver el código. Así que ha creado el CSS más TO WIN configurar el archivo principal en realidad con la página que vemos e incluso dentro componentes como sidebar y tarjeta de usuario, que está usando ahí mismo. Y lo pienso otra vez, para la primera iteración, ha hecho un trabajo bastante bueno Nuevamente, una cosa muy importante a considerar, como ya he mencionado anteriormente en el comienzo mismo de nuestro curso, que no es calcular, es generar, como versión tras versión. Es por eso que cada iteración será diferente a la anterior Por qué es importante porque si vas a preguntar cinco veces con la misma imagen de usuario, probablemente obtendrás cinco variaciones diferentes de tu código. Y no es necesariamente lo mejor en términos de uso de código. Por ejemplo, ahora mismo, como podemos ver, la tarjeta de usuario tiene nombre, nombre de usuario y fuente de imagen, y creo que es bastante buena. Pero permítanme compartir la primera vez que he hecho esto antes. Como puedes ver, es un poco diferente. Entonces tiene nombre, nombre de usuario, bien, el Avatar UO, pero ahora tiene posición Avatar, y cada tarjeta de usuario tiene una posición de avatar diferente Y en mi opinión, porque, ya sabes, tengo una experiencia CSS bastante buena, es una muy muy mala práctica tener, ya sabes, tal, ya sabes, valores estrictos en una grilla porque cuando usas grid, tienes que usar ya sabes, controlar esto por columnas y no los valores específicos así porque es muy confuso, ¿sabes? Y ¿y si tienes, ya sabes, algún número conocido de elementos secundarios en una grilla? Entonces otra vez, es una cosa que hay que tener en cuenta. Y por eso, de nuevo, lo segundo de lo que te hablé tiene que dominar los cimientos sólidos o instrumentos que usas. Porque cuando conoces CSS, probablemente sepas que esto es, de nuevo, la posición, ya sabes, los valores de posición codificados duro no son tan buenos para las cuadrículas dinámicas Por eso o vas a pedir rehacer este trabajo de nuevo o encontrar alguna otra forma, por ejemplo, el cambio manual de las cosas de código Y amigos míos, lo último que vamos a echar un vistazo rápido en esta sesión son los proyectos. Como pueden ver, tenemos la pestaña de proyectos aquí mismo, y solo he creado una plantilla de ese proyecto. Y como puedes ver aquí, tenemos la misma UI. Pero lo importante aquí es esta cosita de ahí, el escenario del proyecto. Entonces vamos a ver por dentro. Como puedes ver, cuenta con varias secciones. Entonces primero es un proyecto ver CL, significa que puedes conectar un proyecto VerSV y luego implementar lo que hayas creado de inmediato. Buena porque puedes mostrarle rápidamente este, tu prototipo a tu cliente o a tus compañeros. Entonces lo segundo, tenemos variables ambientales. Significa que si tienes algunas conexiones de base de datos o claves API, que puedes apuntar aquí mismo. Pero el personaje principal de este juego es éste. Es una fuente. Significa aquí, puedes agregar cualquier fuente que desees en el contexto del proyecto. Entonces podría ser documentación. Podrían ser algunos archivos de imagen, podrían ser algunas inspiraciones, que luego este es un proyecto que usamos como contexto Significa que tus respuestas serán más precisas y más cercanas al resultado final. Entonces es un oro, amigos míos. Me gusta mucho cuando y si recuerdas cuando hablamos de Claude, Claude como en la versión paga de Claude, en los proyectos, también puedes agregar tus fuentes. Es lo mismo. Entonces es muy bueno, amigos míos. El último también, que es muy bastante bueno, son instrucciones. Nuevamente, podrías establecer algunas cosas específicas que te gustaría tener, lo cual también es muy bueno. Entonces amigos míos, este es el final de esta lección. Espero que hayan disfrutado. Nos vemos en la siguiente. 16. Lección 6: Hola, y bienvenidos a la lección número seis Asistencia de Codificación. Entonces, ¿qué es un asistente de codificación? Entonces es básicamente tu copiloto, tu ayudante, asistente en tu ID o editor de código Entonces, ¿en qué te puede ayudar exactamente? Entonces la primera probablemente una de las funciones más acuden a es un autocompletar, donde el asistente te da sugerencias de tu codificación Cómo funciona exactamente, aprende sobre tu contexto de codificación y luego trata sugerir como lo hace cualquier otra IA. Segundo, puedes elegir tu parte de tu código y pedir refactorizarlo o mejorarlo. Además, los bugs te ayudan con los bugs, y también puedes hacer algunas preguntas o explicaciones sobre tu código y algunas otras características como puedes ver. Este asistente de codificación suele ir como extensiones en tu ID. Como puedes ver, aquí una pequeña captura de pantalla del código VS, para que veas extensiones, pestaña y nosotros vemos codificación instalada. Vamos a hablar de los más populares. Entonces el primero es el copiloto de Github, el copiloto de Github fue el primero probablemente más al menos los conocidos, la popular extensión, y solía pagarse uno, pero ahora es premium A pesar de que es premium, todavía tiene un nivel gratuito muy generoso. Creo que se trata de 2000 autocompletados al mes y 50 mensajes que puedes preguntar Y el segundo es un codium que es una extensión gratuita que puedes instalar y usar en tu entorno de codificación Entonces, en la siguiente parte, exploraremos cómo funcionan. 17. Lección 6 (práctica): Hola, y bienvenidos a la sesión de práctica con la asistencia de codificación. En esta lección, utilizaremos el Codem. Pero también puedes usar el copiloto de Github porque ellos más o menos lo mismo Vamos a explorar algunas de las funcionalidades populares y podemos comenzar con el autocompletado. Entonces primero, como puedes ver, tenemos palabras inversas en una cadena. Entonces escribir una función que revertirá todas las palabras dentro de la cadena pasadas en las palabras separadas por exactamente un espacio, y no hay espacios finales iniciales. Ejemplo, esos estrés estrés, esos Uo como puedes ver, inmediatamente ha comenzado a sugerir alguna solución, y todo lo que tienes que hacer es hacer clic en tabulador, luego en otra pestaña, e incluso podrías, ir a la siguiente cadena, y como puedes ver, ha sugerido como registro de consola Entonces el siguiente paso que puedes hacer es ir a probar tu solución en la terminal y hacer las otras cosas. Entonces pasemos a lo siguiente que pueda hacer. Entonces digamos ahora ya tienes algún código con el que estás contento. Entonces ahora lo que puedes hacer es resaltar el código, hacer clic en el botón derecho. Como pueden ver, aquí tenemos un par de cosas. El primero es CodeMRFactor, bloque de código seleccionado. Entonces, si hacemos clic en él, obtenemos algunas sugerencias. Entonces comencemos con algo simple, agreguemos comentarios y docstring al código Entonces como pueden ver, está funcionando y ha hecho algo. Creé como una pluma como formato de cadena, la cadena invertida y el formato de retorno, también una cadena, cadena invertida. Y ahora lo que puedes hacer es aceptar o rechazar. Si haces clic en Aceptar como puedes ver, ahora tienes el código con lo que te ha hecho la codificación. Entonces, eliminemos esto por un momento. Muy bien, guarda y prueba una vez más. Entonces otra vez, refactorizar y vamos por ellos. Haz que esto sea más rápido y eficiente. Vamos a probar esto. Entonces, como pueden ver, Ed ha hecho algunas sugerencias alguna otra solución. No estoy muy seguro, es más rápido o no porque es pedazo de código tan pequeño, pero en general, ha hecho algo y tal vez en un algoritmo más grande o algún tipo de código, definitivamente sugerirá algo que sea más rápido. Entonces nuevamente, puedes aceptar o rechazar. Entonces, rechacemos, en ese caso. Entonces, a continuación, lo que puedes hacer de nuevo, resaltemos el texto y pidamos a Cdim que explique el bloque de código seleccionado Ahora, como puedes ver, se ha abierto un chat donde da una explicación. Entonces dice que es una función JavaScript que toma una cadena como entrada, se divide en matriz Las palabras que usan espacios como separadores invierten el orden y se unen con los espacios intermedios Como puede ver, es una definición bastante correcta de lo que está sucediendo. Entonces nuevamente, como recuerdas, es un chat que usa IA, algún modelo de IA bajo el capó. Probablemente sea coágulo porque es el más popular para este tipo de herramientas Y ahora lo que podemos hacer es pedir algo, por ejemplo, sugerir una solución diferente. Let's Y como puedes ver aquí en el chat, ha presentado tres soluciones, una, dos, y tres, y depende de ti lo que quieras hacer con esta información. Así que intentemos una vez más. Entonces estoy pidiendo a nuestra herramienta que convierta el código a mecanografiado. Entonces vamos a ver. Y como pueden ver, nos ha dado algunas variaciones. Entonces, amigo mío, fue una sesión de práctica con CM, y lo mismo va para el copiloto de Github Y si estás usando el código VS, puedes verlo aquí mismo en la parte superior, puedes comenzar a usarlo desde aquí. 18. Lección 7 : Hola, y bienvenidos a la lección número siete. En esta lección, vamos a revisar los editores de código de IA, y va a ser la última categoría de herramientas que vamos a cubrir en este módulo. Entonces, ¿qué es el editor de código de IA? Como probablemente ya hayas concluido es un editor de código con funciones de IA integradas. Construido en motor de IA. Imagina que tienes un código VS, pero dentro de él, construido en una máquina de IA que te ayuda a codificar. Y vamos a explorar el único en este curso. El más popular hoy en día es el cursor. Entonces echemos un vistazo rápidamente. Entonces amigo mío, como vamos a pasar por características, definitivamente reconocerás todo, todas las funcionalidades que hemos estado cubriendo hasta ahora, pero que se combinan de nuevo, dentro del editor de código. Entonces el primero es agente, y como puedes ver, el modo Agente puede completar las tareas de extremo a extremo. Significa de principio a fin algo así como de forma independiente. ¿Y recuerdas el V cero? Es exactamente lo que ha hecho V cero, pero ahora puedes hacer algo así dentro del editor de código sin salir de él. Segundo, una pestaña, y como puedes ver, es una función de autocompletar. Incluso aquí hay una captura de pantalla, y esto es lo mismo el codio que hemos visto en la lección anterior A continuación, chatea, y esto es un chat GPT o nube. Y el último, como puedes ver, comando K, editemos y escribamos tu código con IA, nuevamente, lo mismo que hemos hecho en la lección de codim Pero lo que es importante entender que veamos los precios. Hay un nivel gratuito, y como puede ver, tiene una prueba de dos semanas, y durante esta prueba, puede usar 2000 terminaciones y 50 solicitudes premium Y después de eso, o bien tienes alguna pequeña cuota gratuita o tienes que ir al nivel pro, que se paga uno, como puedes ver, para sacar el máximo provecho del cursor. Y es que tú lo decidas. O puede usar algunas herramientas gratuitas o si desea agregar algo más de velocidad y algo más de conveniencia a su proceso, entonces puede ir y comprar el cursor. Así que en la siguiente lección, veremos algunas funcionalidades de este interesante 19. Lección 7 (práctica): Amigos míos, antes de sumergirnos en la lección, solo quiero mencionar rápidamente una cosita que la cosa es que tecnología cambia muy rápido hoy en día, y la interfaz de usuario del editor de cursor, que vamos a ver ha cambiado justo después de grabar la lección. Entonces solo quiero aclararte las cosas para que no tengas ninguna preocupación durante la lección. Entonces mis amigos, cuando vayan a ver la lección, verán la pestaña de chat y una pestaña de compositor dentro de la lección. Pero lo más probable es que si has descargado o actualizado tu cursor, editor, tu interfaz de usuario se va a quedar así. Entonces vas a tener un agente y preguntar artículos del menú desplegable. Entonces son las mismas cosas. Entonces el chat en la versión antigua es lo mismo que pedir una nueva versión y el compositor en la versión antigua es lo mismo que un agente en una nueva versión. Entonces, mis amigos, de nuevo, son las mismas cosas solo que ellos nombraron un poco diferente. Así que vamos al interior de la lección. Hola, y bienvenidos a la siguiente lección. En esta lección, vamos a explorar la IA del cursor y sus características en la acción. Entonces, primero, me gustaría decir que es una bifurcación de código VS lo que significa que enfrentarás la transición bastante fluida del código VS a la IA del cursor. Por ejemplo, cuando estaba instalando esto, también ha instalado todas las extensiones que tenía en mi editor de código VS, lo cual es muy conveniente. Entonces lo primero que vamos a echar un vistazo es una configuración. Entonces haces clic en la configuración del cursor y vas a la configuración del cursor. Y específicamente, estamos interesados en estas reglas para la IA. Como puedes ver aquí como marcador de posición, puedes ver algunas reglas de examp Siempre use componentes funcionales de reacción, así sucesivamente y así sucesivamente. Aquí quieres agregar tus reglas globales porque estas reglas se aplicarán a todos los proyectos en los que trabajarás dentro de este cursor. Entonces hay que pensarlo un poco más cuidadosamente. Entonces, lo siguiente de lo que vamos a hablar es la continuación de las reglas del cursor. Y específicamente, lo que querrías hacer es crear los archivos de reglas de cursor de punto. Este archivo es bastante importante si desea obtener respuestas precisas, respuestas y soluciones para su proyecto de codificación. En realidad hay un recurso específico dedicado en Internet. Echemos un vistazo rápido. Entonces como puedes ver, el nombre de este proyecto es un directorio de cursor. Y aquí, se pueden ver diferentes tipos de reglas. Entonces tomemos el Primero, como puedes ver aquí, es un Acumento con las reglas Como su frente senior en desarrollador experto en reaccionar siguiente, JavaScript, TypeScript, así sucesivamente y así sucesivamente Entonces dice, por ejemplo, seguir los requisitos del usuario Scalf al pie de la letra, derecho, y ahora establece las reglas Ahora el entorno de codificación, las pautas de implementación de codificación. Entonces lo que puedes hacer aquí, como puedes ver, hay diferentes categorías, TypeScript, Python reaccionan Y puedes seguir adelante y simplemente echar un vistazo a lo que sea que más te interese. Bien, así que solo puedes hacer clic en reaccionar y ver diferentes variaciones. Entonces solo puedes copiar eso, ya que esto en tus reglas de cursor. Y luego cuando vayas a usar el cursor, estas reglas se aplicarán como contexto para tus tareas. Vamos a echar un vistazo a sus características. Entonces, si vas a hacer clic en Comando I, obtendrás, como puedes ver, un compositor. Y nuevamente, un compositor es un agente. Entonces significa que hará algunas tareas. Pediremos hacer algo. Como puede ver, estamos pidiendo, construir una calculadora aritmética con cuatro operaciones matemáticas básicas Usa HTML, CSS y Vanila JS. Así que ahora hacemos clic en Enviar, y veamos. Como puedes ver aquí, dice índice de generación de HTML. Por eso lo que hace el agente. Entonces en realidad hace algo en tu nombre. Ahora está generando un estilo CSS. Y ahora es el momento de un guión Jazz. Entonces, como pueden ver, ha hecho su trabajo y también ha presentado una breve conclusión de lo que ha hecho. Entonces, por ahora, aceptemos veamos el resultado. Como puedes ver, tenemos una calculadora y se ve bastante bien. Bonitos efectos de hover. Es bastante moderno. Y probemos la funcionalidad, siete más seis, 13. Impresionante. Vamos a eliminar. Hagámoslo cero. Como puedes ver, desde la primera iteración, ha hecho un trabajo bastante agradable. Noche. Así que intentemos agregar alguna funcionalidad usando composer. Por lo que ahora pediremos agregar para nuevas operaciones como queer Root, segundos poderes, Sinas, y clientes A ver. Como puedes ver, ha empezado a funcionar, trabajando en un índice HTML en este momento. Como puedes ver, vemos la actualización. Ahora ha hecho algún trabajo en los estilos y el tiempo de guión. Como pueden ver, tenemos algunas cosas nuevas en guión, y al final, obtenemos la conclusión If. Entonces ahora podemos revisar los cambios, pero por el momento, nos gustaría aceptarlos y ver el resultado por nosotros mismos. Entonces, como puedes ver aquí, incluso los agrupó por color porque es algo así como una nueva categoría de operaciones. Así que vamos a intentarlo. Funciona. Vamos a intentarlo de nuevo. Funciona de nuevo. Entonces, como pueden ver, ha hecho un trabajo bastante bueno. Todo bien. Así que vamos a ver algún siguiente tipo de funcionalidad, que es el chat. Así que vamos a destacar esta función, anexar número, y como se puede ver, ha ofrecido este chat y también nos ha dado un atajo Así que vamos a dar click aquí, ya ves que tiene como contexto, el archivo script, y también las líneas específicas, así que incluso podemos, excluir. Todo el archivo y tratar de pedirle que haga algo. Lo cual es, ¿podrías llegar a una solución más simple? Así que vamos a intentarlo. Y como pueden ver, lo menos nos ha proporcionado otro código. Y aquí, como puedes ver, podríamos hacer clic en Aplicar. Y luego de manera Git, nos muestra el código aplicado y el código eliminado, y aquí podemos rechazarlo o aceptarlo. Entonces aceptemos por un segundo, y el nuevo código se ha agregado con una funcionalidad de chat. Así que también hay una funcionalidad familiar de autocompletar. Vamos a hacer clic. La nueva línea, como pueden ver, nos llega alguna sugerencia. Y con la pestaña, podemos editar o simplemente saltarnos esto. Shri inst aquí, por ejemplo, sí, por ejemplo, aquí, sugiere como agregar algún comentario y luego algún trozo de código Entonces lo último que vamos a echar un vistazo es un comando. Entonces, si destacamos algún código y hacemos clic en Comando, obtenemos esta funcionalidad de chat de entrada en línea. Y aquí, por ejemplo, podríamos decir, explicar el Y como pueden ver, obtenemos una explicación en términos de C, que es bastante buena. Entonces mis amigos, en una lección muy breve y corta, espero haberles dado las principales herramientas primarias que pueden usar dentro de la IA del cursor. 20. Ejercicio: Entonces, finalmente, estamos al final del módulo, y es momento de que hagas el ejercicio. Entonces el ejercicio va a ser bastante fácil. Hay que jugar una vez, probar una vez cada dos que hemos cubierto en este módulo. El objetivo de este ejercicio es que obtengas la comprensión y la sensación básicas de cada herramienta. Aquí hay un simple ir a la NAP. Entonces el primero, planifica su acción para cada herramienta. Por ejemplo, voy a hacer A en Cloud y chatear GBT, B en V cero, C, codificación y D en cursor Navega a esta herramienta o descarga la herramienta o extensiones e intenta realizar las tareas. 21. Resumen: Entonces, recapitulemos el módulo número tres. Has aprendido mucho en este módulo. Específicamente, has tocado todas las herramientas que podrías necesitar en tu carrera de codificación en tus procesos de codificación. Pero te voy a dar un par de consejos importantes. Primero, nuevamente, por favor concéntrate primero y siempre en desarrollar habilidades sólidas de codificación, sin importar el nivel que se encuentre. Porque las sólidas habilidades de codificación, significa comprender la arquitectura, comprender los patrones, las mejores prácticas, algunas formas de organizar el código, algunas formas de resolver cosas específicas, entenderlas te convierten en un muy buen desarrollador. Y la IA, aunque la IA no te dé una buena solución, podrías pedir rehacerla o de alguna manera editar a la buena palabra Después de eso, ve y aprende lo básico. Nuevamente, los conceptos básicos de la codificación de IA. Eso es específicamente lo que estás haciendo en este curso. ¿Qué quiero decir con conceptos básicos? Lo básico, me refiero a los principios fundacionales. Es como el alfabeto en lectura porque si conoces letras, puedes maquillar palabras, luego oraciones, luego capítulos, y luego todo el libro. Y puedes desestructurar el libro en elementos cada vez más pequeños porque sabes cómo está estructurado y conoces las conexiones de los elementos del sistema Lo mismo. Si sabes hacer la tarea simple solo en la nube o chatear GPT, entonces podrías subir este nivel y usarlo en Cdium y luego digamos cursor Y luego al hacer estas operaciones básicas, vas a llegar a desarrollar tu propio estilo de usar la IA en tu proceso. Y el siguiente paso para combinar habilidades sólidas de codificación y los conceptos básicos del uso de la codificación de IA, y luego puedes entrar en cosas avanzadas. Significa crear algunas combinaciones locas o cómo puedes hacer esto. Porque he visto a algunas personas en YouTube, ya sabes, cómo usan diferentes estas herramientas, y algunas de ellas, ya sabes, su flujo de trabajo simplemente no es realmente comprensible para mí. Y entonces estaba pensando así a los blancos porque, de nuevo, finalmente se les ocurrió esta preferencia personal de cómo pueden combinar los elementos de la IA en su codificación porque algunas personas, ya sabes, pueden estar bien solo usando solo codium a veces, ya sabes, subcontratando algunas cosas a Cloud Y algunas personas necesitan cursor con todas estas reglas de archivo de cursor, ya sabes, siempre contexto, teniendo en contexto toda la base de datos, perdón, código base y documentación y todo lo demás. Algunas personas prefieren, por ejemplo, a mí mismo, yo prefiero planear primero mi código y luego darle a las pequeñas tareas AI, ya sabes, que hacer. Y otros chicos, ya sabes, incluso los buenos, los profesionales, dicen que empiezan con IA y dejan el compositor en cursor haga el trabajo. Entonces, de nuevo, es cosa avanzada. Es una preferencia personal. Pero para poder llegar a este punto, hay que dominar los fundamentos de codificación y los conceptos básicos de la IA. Y lo último que me gustaría mencionar es tener cuidado con foso de muerte. Entonces, como pueden ver, el pozo de la muerte es algo metafórico Qué es esto, he visto a algunas personas, ya sabes, de nuevo, tratando de construir toda la app a veces sin planear, a veces, tal vez incluso con planeación, pero confiando enteramente en la IA. Y luego hacen la primera iteración. Se ve bien. Entonces suman algo. Va bien, bueno, bueno, bueno hasta el punto donde diferentes errores, diferentes desajustes en la organización de archivos, estructura, tal vez algunas bibliotecas de terceros Entonces el número de conflictos y errores se vuelve tan grande que la IA no es capaz de resolverlos todos. Esa es la cosa. Entonces es si no tienes buenas habilidades de codificación. De nuevo, compartiría mi enfoque, así que planifica tu proyecto. Y luego pieza por pieza, poco a poco, ve y pide a AI que te ayude a venderme. Entonces espero que haya sido útil. 22. Módulo 4: introducción: Hola, y bienvenidos al módulo número cuatro. En este módulo, vas a aprender las cinco formas en que la IA puede ayudarte a convertirte en un mejor desarrollador web y codificar más rápido. Así que recordemos rápidamente lo que hemos aprendido en los módulos anteriores. Entonces en el módulo número dos, has aprendido los fundamentos de la IA. Entonces, básicamente, cómo usar correctamente los chats de IA, cómo construir correctamente un prompt, en el número de módulo. Tres, has cubierto las herramientas de codificación de IA como chats, V cero, Codium, asistente de decodificación y el editor de código AI Entonces significa que tienes todas las herramientas necesarias y las habilidades para utilizarlas. Entonces en ese módulo, módulo número cuatro, vamos a entrar en la parte de aplicación. Por lo tanto, cubriremos cinco formas en que la IA puede ayudarlo a impulsar su flujo de trabajo y convertirse en un desarrollador web más fuerte. Y es importante que diga de las cinco maneras porque he estado pensando mucho. Y esas son cinco formas principales en las que puedes usar la IA. Significa que ya no se piensa, ¿hay algo más? ¿Hay algo más que pueda hacer? Entonces son cinco formas y todo lo demás, simplemente pasa por debajo de una de estas cinco formas. Entonces vamos a cubrirlos y ojalá aprendas a usarlos. 23. Lección 1: Bienvenido a la lección número uno. En esta lección, vamos a tomar una visión general rápida que vamos a aprender en este módulo. Entonces, en el módulo número cuatro, vamos a cubrir las cinco vías más. Yo también he preparado algún bono para ti. Entonces, lo primero que puede ayudarte la IA es construir nuevas funciones. Y probablemente si recuerdas lo que cubrimos en un cursor, editor de IA cuando le pedimos al cursor que construyera algunas características para la calculadora. Segundo, es refactorizar el código existente porque a veces, de nuevo, en el cursor, cubrimos que tomamos alguna función y pedimos simplificarlo Porque es muy a menudo cuando necesitas hacer tu código más simple o a veces, digamos que ha codificado algunos no tan familiares para ti, como una estructura, por ejemplo, de nuevo, en una calculadora, codificó un JavaScript modo de clase y no todos están familiarizados con las clases, y tal vez solo quieras tener algunas funciones separadas. En tercer lugar es una muy común es una fijación de errores, diferente tipo de errores. Ya sabes, no hay comentarios aquí. Número cuatro, está sugiriendo soluciones. Por ejemplo, de nuevo, te gustaría implementar algo como digamos que tienes alguna característica en tu mente y dices, Oh, me gustaría construirlo. Pero no estoy muy seguro de cuál es el mejor enfoque o ni siquiera entiendo realmente cómo hacer esto. Entonces podrías preguntar a la IA, podría ser tanto solución conceptual, por ejemplo, en términos de explicación, explicación básica de lo que tienes que hacer, o podría ser una solución de codificación. Y número cinco y más un bono uno, es una categoría de aprendizaje, aprendizaje como desarrollador web. Entonces el número cinco está explicando código. Digamos, de nuevo, la IA ha generado algún código, o has tomado código de algún sitio web como Github o tal vez lápiz de código y no estás realmente seguro de lo que hace, así que podrías pedir explicarlo. Y bono uno, el mentor personal, vamos a cubrir este capítulo específicamente. Me gusta mucho. Es donde le pedirás a la IA que sea tu mentor personal en términos de crear un programa de capacitación. Y luego cuando tengas una solución implementada, pide revisar esta solución. Si recuerdas cuando estábamos cubriendo el módulo número dos, te estaba mostrando la tarea con contar el número de palabras en una cadena, tarea JS, y en realidad esa cosa específica. Fue como una tutoría personal de IA. Entonces va a ser un módulo bastante interesante. 24. Lección 2 : Hola, y bienvenidos a la lección número dos. En esta lección, vamos a explorar la primera forma de AAA nos puede ayudar es la construcción de nuevas características. Entonces para todo este módulo, vamos a tomar como ejemplo, proyecto, página de comercio electrónico simple. Así que vamos a ver. Entonces amigos míos, estamos dentro del cursor, y como pueden ver, la parte interesante de la era moderna es que todo cambia súper rápido. En el módulo anterior, que he grabado, muy recientemente, la interfaz de usuario ha sido, como recuerdas, aquí en la parte superior, teníamos chat, compositor y buscador de errores, y ahora ya se ha lanzado la nueva actualización, y ahora tenemos chat. Solo chatea aquí, como puedes ver, y el agente, que anteriormente era compositor está aquí y pregunta y edita también debajo de eso. Oh, amigos míos, al inicio de la lección, exploraremos rápidamente y recapitularemos cómo lo hará el agente en el cursor Works, lo cual también es muy útil para ustedes Por lo que he preparado un prompt muy sencillo es construir un comercio. Página del producto de los libros, página debe constar de dos partes. Lista de productos y filtros, lista de productos es solo una cuadrícula de tarjetas, algunas condiciones para tarjetas sobre imagen, nombre, categoría y precio, las categorías aquí y algunas condiciones para los filtros. Por lo que es un filtro de categoría para tres artículos, rango de precios y disponibilidad. Así que también hay una etiqueta de texto simple que usamos en este curso es HTML CSS y Manila JS. Así que vamos a ver. Los estilos se están generando ahora. Ahora, como se puede ver el archivo con datos, se están generando datos GS, y lo último es un script JS. Entonces amigos míos, ha terminado su generación. Entonces, hagamos clic en Aceptar A y veamos el proyecto en el entorno del navegador en vivo. Entonces mis amigos, estamos en navegador y podemos ver que ha hecho su primera iteración donde vemos las tarjetas con una imagen, nombre, categoría, y precio, y filtros en ese lado Entonces probemos el filtro. Hacemos clic en ficción, y vemos la ficción. Ahora, vemos todos. Vamos por los niños. Vemos niños. Vamos a salir de stock. Vemos agotado. Como pueden ver, aquí tenemos algún bicho. Ya sabes, otra vez, de lo que hablamos, está totalmente bien tener bichos. Ahora vamos por el precio. Vamos por no sé, como 16 dólares, 16 a 30 dólares y podemos ver que tenemos libros en este rango Así que vamos a empezar a trabajar con la parte donde podemos agregar algunas características o hacer algunos cambios. Entonces, al principio, como agregamos solo seis artículos, agreguemos algunos artículos más. Hagamos agregar seis artículos más. Y como probablemente recuerdes, hay cosas de contacto, y podemos elegir Data JS porque los datos provienen de este archivo. Así que vamos así amigos míos, vamos a explorar el archivo. Y como pueden ver, tenemos el ítem número siete, ocho, nueve, y todo a través del 12. Entonces seis más artículos más. Entonces como puedes ver aquí, tenemos 12 libros. Entonces vía prompting, hemos hecho algunos, en este caso, agregando algo de contenido Entonces mis amigos, estamos en una lección donde estamos pidiendo a la IA que construya algunas características. Entonces se me ha ocurrido un aviso. A ver. Así que agrega un filtro de entrada de búsqueda por título en la parte superior de la página. El filtrado debe ocurrir en cada pulsación de tecla. Y como puedes ver, ha hecho algún trabajo, es algo de HTML, CSS, y por supuesto, JavaScript. Entonces veamos el resultado final. Como puede ver, tenemos el campo de entrada Buscar por título en la parte superior de la página. A ver. P también, el poder del hábito. Bien, vamos. Entonces solo P, y nos muestra cada libro que tiene una letra P dentro de él. Entonces estamos tratando de ver 1984, y estamos viendo esto ahora mismo. Entonces mis amigos, creo que tienes la idea principal de que puedes solicitar tu herramienta de IA en este caso, es un cursor para agregar algunas cosas. Y nuevamente, lo importante para entender que la IA hace su trabajo no a la perfección, sino como primer borrador. Entonces, a continuación, puedes usar tus conocimientos de codificación para hacer algunos cambios. Por ejemplo, si quieres cambiar el ancho de este campo de búsqueda o tal vez te gustaría hacerlo solo como un icono, y luego al hacer clic en él se expande, así sucesivamente y así sucesivamente, puedes hacerlo tú mismo o preguntar a IA. Espero que tengas la idea principal de cómo hacer esto. 25. Lección 3: Bienvenidos a la lección número tres. En esta lección, vamos a explorar la segunda forma, que es refactorizar el código existente. Así que vamos. Entonces en este momento, cuando echamos un vistazo a nuestras tarjetas de producto, vemos que el agotado de stock es un poco no obvio. Entonces la forma en que vemos agotado es con un poco de colores apagados de la tarjeta Pero y si quisiéramos tener agotado en el mismo lugar donde tenemos otras cosas como nombre categoría y precio. Entonces veamos cómo podemos lograr esto. Entonces estamos en el cursor ahora mismo, y echemos un vistazo rápido al código. Y, ya sabes, con solo mirar un poco nuestro código, pude ver que el producto en stock y estado agotado se está generando aquí mismo y otras cosas como nombre categoría y precio ahí mismo. Entonces acabo de seleccionar esta línea, se puede ver a través del 25 al 43. Entonces ahí mismo, guión 25 43, y pedí un simple baile de graduación. Así que me gustaría tener en Stock estado agotado dentro de la clase product info. Entonces está justo ahí. Entonces vamos a ver qué va a hacer. Entonces el cursor ha hecho su pensamiento, y ahora podemos ver en una diferencia. Por lo que ha quitado el stock fuera de stock de aquí arriba y lo puso ahí mismo. Entonces, para este momento, aceptemos los cambios aquí y allá. Presionarlo aquí y ver el resultado en el navegador. Voila. Y como pueden ver, tenemos en stock y fuera de stock ahí mismo, lo cual se ve bastante bien sin molestias y todo está bastante claro en estos momentos Así que vamos a revisar el filtro. Entonces en stock, vemos el Istock y ahora agotado. Entonces otra vez, lo importante a notar aquí mismo es que aún así es bueno si entiendes el código porque primero, investigué el código y pedí un cambio específico en un lugar específico. Y para las IA, cuanto más específico seas, mejores respuestas y respuestas de calidad vas a obtener, lo que de nuevo te ahorrará mucho tiempo y esfuerzo. Y esta es una de las cosas de cómo se puede construir más rápido dos veces o incluso tres veces. 26. Lección 4: Bienvenidos a la lección número cuatro. En esta lección, vamos a explorar la tercera forma en que la IA puede ayudarnos. Es la corrección de errores. Así que vamos. Entonces estamos en nuestra aplicación de librería, y como pueden ver, cuando pasamos el cursor sobre los libros que están fuera de stock, recibimos este mensaje Por alguna razón, tenemos un libro de oruga muy hambriento. Por alguna razón, aquí vemos al Arista, y como pueden ver aquí, cuando me cierro sobre eso, obtenemos el comportamiento muy extraño Nuestro objetivo es hacer algo con él así que arregla este error. Es importante afirmar que como viste desde el inicio de este módulo, esa IA ha creado el código con este error desde el principio, y ahora somos amables viendo la acción en vivo. ¿Cómo se puede trabajar con esto? Entonces amigos míos, estamos en cursor. Y nuevamente, estamos volviendo a lo que te estaba hablando sobre todo el curso que lo primero que va primero son las sólidas habilidades de codificación. Es entender cómo se construye el proyecto , entender las conexiones. Y patrones de comportamiento de cada parte de su aplicación. Y así, claro, entiendo que la acción hover viene de CSS Entonces primero, lo que voy a tratar de hacer es buscar las cosas hover Y como pueden ver, tenemos que pasar el cursor sobre comportamientos en nuestro estilo El primero son los filtros, y sabemos que no es eso. Y la segunda, la ficha del producto, y podemos ver aquí, simplemente hace una traducción sencilla Significa que sube o baja. Entonces no es eso. Entonces siguiente. Entonces, ¿de dónde sacamos esto? Entonces probablemente como no tenemos esto en nuestro HDML generado programáticamente, debería estar aquí Y eso probablemente sea antes, que no tenemos ni después de nuestro elemento de puta. Y VoAla conseguimos nuestro después. Y eso es exactamente lo que hemos estado buscando porque dice de stock, y tiene el color rojizo Entonces hagamos lo común, así que para eliminar este código de compilar al navegador y ver el resultado Y como podemos ver, ha hecho el trabajo. No vemos esto agotado. Entonces nuevamente, se trata de conocer tu oficio, y ahora vamos a ir a la parte de IA. Entonces estamos de vuelta en nuestro editor, y como pueden ver, he descomentado el elemento after pseuda Así que tenemos este error de vuelta. Entonces vayamos a la IA en busca de ayuda. Y como pueden ver, no estoy configurando ningún contexto, ningún archivo, no nada porque supongamos que no sabemos de dónde viene este error. Y puse el prompt con un lenguaje natural. Digo, cuando pongo el cursor sobre la tarjeta con estado agotado, veo el bloque que indica este estado Retirarlo. No debo ver nada en rondado Entonces mis amigos, lenguaje natural bastante sencillo. Entonces veamos qué va a hacer. Amigos míos, ha hecho el trabajo, y como pueden ver, ahora mismo, antes de aceptar el cambio, se ha quitado este bloque exacto que hemos hecho nosotros mismos. Entonces vamos a aceptarlo. Se ha ido, y veamos el resultado. Estamos en nuestra librería y no hay estado agotado Nuevamente, amigos míos, como pueden ver, cuando conocen el código, es mucho más fácil navegar por las acciones de su IA. 27. Lección 5: Ven a la lección número cinco. En esta lección, vamos a explorar la cuarta forma en que la IA puede ayudarnos. Entonces es una sugerencia de soluciones y mejores prácticas. Entonces vamos a ver cómo funciona. Entonces estamos en nuestra página de eCom, y la funcionalidad muy común que tienen las tiendas modernas es un botón o botón de agregar a la lista de deseos en algún lugar de una tarjeta Y digamos que queremos agregar algo como esto, no estamos seguros de cuál es la mejor manera o no estamos seguros en general. Y nos gustaría obtener una sugerencia de solución de AI. Vamos. Entonces estamos dentro del cursor en SAI, y lo que es importante saber. Entonces antes estábamos usando un modo de agente para generar archivos en código. Y en este caso particular, nos gustaría obtener una especie de consulta. Entonces tenemos que ir al modo preguntar. ¿Bien? Y antes de irnos, es una buena práctica establecer un contexto a base de código. Y cuando tu proyecto es bastante grande, a veces no estás muy seguro de cómo exactamente vas a hacer algo, así que es mejor IA para obtener la imagen completa, que es tu base de código. Entonces es bastante simple prompt, lo que está diciendo, me gustaría agregar el botón de lista de deseos en la tarjeta debe ser icono duro SVG ¿Cuál sería el enfoque adecuado? Dame la hoja de ruta de implementación de esta función. Nuevamente, no es una implementación de la funcionalidad del código. Es una especie de consultoría. Vamos. Entonces la IA ha terminado su trabajo, y ahora tenemos alguna explicación. Y explica que se puede agregar nuevo conjunto. Te da algunas marcas, estilos, manejo de eventos y algunos, ya sabes, pasos para implementarlo Nuevamente, como dije antes, era una práctica de consultoría. Entonces depende de ti lo que quieras hacer a partir de este paso. Si te gusta y te gustaría hacerlo tú mismo, puedes ir. Pero por ejemplo, te sientes perezoso o algo que no estás seguro que puedas hacer esto por ti mismo, puedes volver al modo agente y hacerlo. Entonces mis amigos, digamos que me gustó su sugerencia, y luego simplemente fui a la modalidad agente y dije algo así. Me gusta la sugerencia, adelante e implemente eso. Por lo que ha implementado el código como hemos visto anteriormente. Yo lo he aceptado, y veamos el resultado final. Estamos en nuestra librería, y tiene una funcionalidad increíble como le has pedido. Y lo que es importante entender que en el caso de pedir sugerencias de soluciones o las mejores prácticas, a veces solo puedes usar, clar o chatear GPT, sobre todo si es algo común Digamos que te gustaría pedir la autenticación en tu aplicación, entonces solo podrías preguntar por caso específico. Entonces en palabras generales, estoy usando el Next Jazz, cuál sería la mejor autenticación para SAS, como de 100 a 1,000 usuarios. Y también podrías exponer tu presupuesto, por ejemplo. Así que de nuevo, incluso el Cloud o Cha GPT te van a dar, ya sabes, algunas sugerencias elegir la tecnología adecuada Lo mismo con las mejores prácticas, por ejemplo, estás planeando agregar algunas imágenes en tu sitio web Podrías ir y pedir las mejores prácticas. Digamos que tienes construyendo una landing page, qué tipo de gráficos es la mejor manera de usar Web PP y GJPG SVG combinación de eso, o estrategias de renderizado y redes Entonces es algo así, amigo mío. Entonces tienes que elegir la tecnología echo AI dependiendo de tu tarea. 28. Lección 6: Hola, y bienvenidos a la lección número seis. En esta lección, vamos a explorar la quinta forma IA puede ayudarnos es explicar nuestro código. Así que comencemos. Entonces estamos en cursor en nuestro proyecto que hemos estado haciendo a lo largo de este módulo. Y digamos que nos gustaría obtener una explicación para nuestro guión. Es bastante fácil, como puedes ver, solo pides comando, yo y tú conseguimos tu chat. Es importante ir por la opción de preguntar porque solo nos gustaría obtener alguna información de la explicación. Y como contexto, sí, hemos seleccionado específicamente el script z porque nos gustaría obtener una explicación para ese archivo en particular y solo vamos a una explicación para ese archivo en particular entrar es simple. Indicar muy simple, en realidad, explicar código, y vamos a presionar Enter. Como pueden ver, he empezado a darnos una explicación. Y por supuesto, puedes pasar por estas explicaciones una por una y empezar a entender y obtener tus insights. Entonces otra forma en la que podemos pedirle a la IA que nos ayude a explicar el código es a través de lo siguiente. Digamos que obtenemos la función, resaltamos y simplemente hacemos clic en Comando, y obtenemos este pequeño campo de entrada. Así que es como una forma local de conseguir algo de IA para hacer por ti. Entonces aquí, nuevamente, le pedimos que explique el código luego simplemente haga clic en Entrar. Y como puede ver, nos da una especie de comentarios en línea que podemos leer. Honestamente, ambas formas en que funcionan y lo mismo en realidad se puede hacer con una extensión de codium, que hemos cubierto anteriormente Pero mi preferencia personal, cuando suelo pedir explicar el código, si es algo muy rápido, entonces podría usar esta funcionalidad inline. Pero sobre todo cuando trato de entender el código, me gustaría que le prestara más atención, y prefiero usar el chat GPT Oh, amigos míos, estamos dentro del chat GPT. Y nuevamente, aquí, cuando haces el prompt, puedes ser explícito con tu prompt o podrías usar prompts muy cortos, que suelo explicar el código El más bajo por ejemplo, ahora mismo, pedí explicar el código a continuación para un principiante. A veces podría decir explicar código a continuación de manera explícita, algo así. Entonces generalmente es suficiente porque como ya hablamos anteriormente, si tienes una experiencia, a veces entiendes todo el panorama y tal vez necesitas los detalles. Entonces veamos qué va a hacer. Como mencioné anteriormente, lo que realmente me gusta de Chad GPT para esta tarea específica porque como pueden ver, está dividiendo nuestro código en pedazos Ves los muy convenientes aspectos destacados del código que puedes pasar, y luego, ya sabes, solo puedes hacer algunas preguntas adicionales sobre algunas cosas específicas que no has entendido bien. Entonces nuevamente, es solo una preferencia personal. Yo sólo me gustaría que compartiera con ustedes. 29. Lección 7 : Hola, amigos míos, y bienvenidos a la Lección Número siete. Y en esta lección, me gustaría que compartieras la forma bonus de cómo puedes usar IA que te puede ayudar a convertirte en un desarrollador mejor y más efectivo. Entonces te voy a mostrar cómo puedes usar la IA como tu mentor personal de IA. Así que solo nota rápida que recuerda, si recuerdas los tiempos anteriores a la IA, a veces cuando haces algún proyecto o estás aprendiendo algún material nuevo, probablemente muchas veces tendrías algunas preguntas específicas sobre algunos detalles de porque te gustaría entender algo o tal vez algunos detalles de implementación. Y no está muy claro para un principiante en algún tema nuevo obtener la imagen completa para entender estos detalles. Y, uh, como antes, usaría algunos foros, algunos grupos privados de codificación donde haría preguntas y obtendría las respuestas de personas reales. Y nuevamente, podría ser alguna cosa muy pequeña o incluso, como, una preferencia. Así que no algo específico donde obtendrás una respuesta obsajada, no como algo específico Y ahora, con la época de la IA, esto ha sido un cambio de juego para nosotros porque ahora podrías tener desarrollador web senior con muchos años de experiencia con una enorme base de código y es algo así como cerebro Eso podría responder a muchas, muchas de tus preguntas. Entonces echemos un vistazo. Entonces para esto, prefiero usar el chat GPT porque, de nuevo, es gratis Tiene mensajes ilimitados, y suele ser suficiente cuando me gustaría aprovechar una oportunidad de mentoría Entonces como puedes ver aquí, me gustaría mostrarte. El prompt de inicio es bastante básico. Así que por favor enumere proyecto principiante para practicar posicionamiento CSS y modelo de caja. Entonces digamos que es un tema nuevo donde acabas de, como, leer un perio, ya sabes, como un capítulo en MDN Docs y un par de artículos, y el que te gustaría practicar para entenderlo un poco más profundo Y por eso estoy pidiendo enumerar, ya sabes, un proyecto para principiantes para practicar esta cosa. Y ahora podríamos incluso, ya sabes, dar un paso atrás y pedir mejorar este prompt para nosotros usando la fórmula prompt que aprendimos anteriormente, el ejemplo de contexto de tarea, y estoy preguntando Entonces, el primer paso del prompt es usar la fórmula para solicitar, probar contextos y exemplar, reescribir el siguiente prompt de acuerdo con esa fórmula, y estoy declarando Y como pueden ver, hace alguna expansión para contactos de tareas y ejemplares, y ahora obtenemos el prompt final Entonces se ve ahora bastante expandido. Entonces, ¿puedes sugerir un proyecto amigable para principiantes que ayude a practicar posicionamiento CSS y el modelo de caja? Los ejemplos podrían ser. Así que probemos juntos, use este prompt. Entonces copiemos eso. Esto y ver qué va a hacer. Impresionante. Ha terminado su trabajo, y como puedes ver, tenemos algunas ideas de proyectos como diseño de tarjeta, barra de navegación simple, pie de página pegajoso, así sucesivamente y así sucesivamente Así que no está mal, realmente no malas ideas para practicar. Ahora, digamos, por ejemplo, escogimos algunos de ellos, y nuevamente, no estamos muy seguros de cómo ir a partir de ese punto. Entonces entra en juego lo siguiente. Ahora, te voy a mostrar el segundo baile de graduación que uso muy a menudo, y la versión básica se ve así. Crea un tutorial paso a paso con instrucciones explícitas y explicaciones para el nombre del proyecto a la app List en Jazz y también muy a menudo declaro que soy principiante. Todo bien. Y nuevamente, lo ha reescrito, y ahora obtenemos el prompt prácticamente banded para IA Entonces ahora podemos usar, este prompt muy bien estructurado y usarlo con una combinación de proyectos que nos gustaría practicar. Entonces veamos la versión final. Entonces el frente se ve así, crea un tutorial paso a paso amigable para principiantes con instrucciones explícitas y explicaciones para construir solo información sobre herramientas CSS Entonces este es un proyecto que ha sugerido. Y la segunda parte, el tutorial debería cubrir la configuración de la estructura HTML, estilo con CSS, y cualquier otra cosa lo que creas que es importante. Por favor, asegúrese de que cada paso esté claramente explicado. Entonces veamos qué va a hacer. Entonces Chat GBT ha hecho su trabajo, y como puedes ver, obtuvimos el tutorial paso a paso, que podemos empezar a practicar de inmediato. Entonces obtendremos el paso uno, el código HTML, y las explicaciones, el paso dos con CSS. Nuevamente, con comentarios. Paso tres, explicativo, CSS y paso cuatro, cómo probarlo Y además, te ha dado los siguientes pasos. Creo que en general, es un sistema bastante bueno para practicar algo. Y lo último que me gustaría compartir con ustedes en esta lección es que lo siguiente. Entonces, digamos que has estado aprendiendo alguna materia, y se cubrió el nuevo concepto, y entendiste algo de esto. Entonces por ejemplo, muy recientemente, he estado aprendiendo sobre estrategias de renderizado en next has. Entonces después de haber leído, ya sabes, la documentación, ver algunos tutoriales, algunos videos de explicación, trato de conseguir me gustaría comprobar mi comprensión de lo correctamente que entendí estos conceptos. Y eso es lo que suelo hacer. Entonces aquí cómo compruebo mi comprensión del tema. Entonces por ejemplo, como dije anteriormente sobre las próximas estrategias de renderizado. Entonces hay cuatro principales. Entonces digamos que escribo mi resumen. SSR es una predeterminada, CSR NAS subida, da da, da, y luego lo que suelo preguntar Al final es, estoy en lo correcto o simplemente, ya sabes, forma corta, correcta. Y luego veo la respuesta de la IA. Entonces, como puedes ver, en su mayoría tienes razón, pero una pequeña aclaración con respecto a la SSR Y empieza a darte sus comentarios, y luego puedes platicar con él, ya sabes, hacer algunas preguntas adicionales hasta que obtengas el material de la manera correcta. Entonces espero que esto haya sido de ayuda. 30. Ejercicio: Amigos míos, es un tiempo de ejercicio. Es momento de que practiques lo que hemos cubierto en este módulo. Has aprendido mucho. La tarea es bastante sencilla. Entonces tu objetivo es ir y poner a prueba cada una de las formas que hemos aprendido al menos una vez, mis amigos, al menos una vez, para que obtengas la comprensión básica y la sensación. Entonces primero, adelante y llegar a un proyecto. Nuevamente, te sugiero que utilices el chat GPT, por ejemplo, y que pidan que te den algunas ideas de proyectos Idealmente, si es algo pequeño, porque de nuevo, tu tarea principal es practicar la mecánica, entender los principios y fundamentos, y luego puedes aplicarlo en algo más grande. Después de eso, tu objetivo es planificar las interacciones que vas a usar. Déjame darte un ejemplo. Entonces el primer paso podría ser después que hayas creado una app que quieras construir, por ejemplo, de nuevo, usamos la página de comercio electrónico. Entonces podrías pedirle a la IA que construya una aplicación como desarrollador web principiante, y para eso, podrías usar el cursor. Entonces podrías pedirlo en algunas características, lo que sea más conveniente para ti. Entonces podrías pedir refactorial el código como desarrollador web senior porque, nuevamente, anteriormente era como principiante Entonces podrías hacer algunos errores y pedir que se arregle ese error, o si ves alguna caja, intenta, ya sabes, tal vez pensar algunas formas creativas de cómo puedes manejar eso. Entonces podrías pedirle que te asesore algunas características que puedes agregar a ese proyecto, y al final, podrías practicar explicando el código. Y mis amigos, realmente sugiero que usen unas herramientas diferentes. Así que de nuevo, porque la idea principal es que encuentres tu propio tipo de estilo, algo que te quede bien. Así que entra y empieza el ejercicio. 31. Módulo 4: resumen: Enhorabuena por terminar con un módulo número cuatro. Y para ese punto, estás equipado con todo lo necesario para ir y construir proyectos con IA con éxito porque en primer lugar, has aprendido herramientas de IA que puedes usar en tu trabajo como chats, asistentes de codificación y editores de código de IA. Y además, has aprendido las formas específicas en las que puedes usar estas herramientas en tus proyectos, y ahora es el momento de ir y practicar realmente. 32. Módulo 5: introducción: Hola, y bienvenidos al módulo número cinco. En este módulo, vamos a exportar dos velocidades de generación de código. Entonces mis amigos, en las lecciones anteriores, ustedes han aprendido con éxito los fundamentos de la IA. A continuación, aprendes las herramientas de codificación de IA como chats, editores de código, chats especializados, asistentes de codificación. Y en el módulo anterior, has cubierto las cinco formas de usar la IA para la codificación. Significa que ahora tienes instrumentos, y sabes exactamente cómo usarlos. Bueno, es hora de ir a explorar qué tan rápido puedes usarlos. Entonces, en el Módulo cinco, vamos a cubrir la primera y segunda velocidad llamada de usar IA y cuál elegir. 33. Lección 1: Bienvenido a la lección número uno. En esta lección, vamos a tomar una visión general rápida de lo que vamos a cubrir en el módulo. Entonces básicamente, la primera velocidad a lo que llamo es cuando tienes el proceso de copiar y pegar Significa, digamos que generas algún código en Cloud o chat GBT, y luego ve y pégalo en tu editor de código Entonces tienes algún error. De nuevo, sigues adelante y pegas este código en el chat o tal vez VZeroePlore algo y luego seguir adelante y pasarlo Y la segunda velocidad, lo que yo llamo es no copiar pegar. Es cuando estás usando algo dentro de tu editor de código, por ejemplo, algo así como asistente de codificación o incluso el editor de código AI. En este módulo, vamos a platicar diferentes lados de la primera velocidad y la segunda velocidad, pros y contras porque lo que sea que vayas a elegir es tu preferencia personal dependiendo de tus ciertas condiciones. 34. Lección 2 : Bienvenidos a la lección número dos. En esta lección, vamos a explorar la primera velocidad. Entonces, como señalamos anteriormente, la primera velocidad es donde básicamente copias y pegas código de ida y vuelta, yendo al chat, haciendo algo de generación de código, análisis, y luego yendo a tu editor de código y pegándolo ahí y comprobando es que todo funciona Entonces primero, vamos a cubrir algunos lados buenos, lados fuertes. Por supuesto, hay un mayor control en la comprensión porque estás haciendo cada tarea específica una a la vez. Es genial para aprender, nuevo, porque hay un enfoque granular, y en cada paso del camino, podrías parar, pensar, probar, y luego ir más allá. siguiente lado bueno es que puedes usar prácticamente cualquier chat que te gustaría, Chat GPT, Claude, o incluso Gemini o Deep seek Así que eres un poco independiente de tu elección de herramienta. Por supuesto, de nuevo, porque este es un enfoque granular, hay menos riesgo de que suceda algo inesperado a medida que revisas cada paso, cada modificación de tu código. Ahora el lado débil, los contras. Entonces claro, el flujo de trabajo va a ser un poco lento porque hay que ir al chat, pegar, generar el código, copiar, volver. Además, requiere más atención de tu lado, nuevamente, porque cada pedacito de código, tienes que verificarlo, pegarlo, asegurarte de que cada pequeño carácter, incluyendo corchetes, corchetes están incluidos, y no se está faltando nada. Y nuevamente, porque requiere más atención de tu parte y muchos movimientos, hay más posibilidades de cometer errores. Entonces, para concluir, esta primera velocidad es mejor opción para principiantes en codificación y especialmente para principiantes en IA. Así que de nuevo, incluso si eres desarrollador experimentado pero no tan experimentado en IA, sigue adelante y comienza con la velocidad uno. Y lo segundo, si tienes presupuesto o no tienes presupuesto, es un muy buen lugar para comenzar ya que prácticamente son gratis. 35. Lección 3: Lección, vamos a explorar la segunda velocidad. Entonces básicamente, como ya señalamos anteriormente, la segunda velocidad es donde no se tiene proceso de copiar y pegar Todo sucede dentro de tu editor de código. Recuerda Cdium o cursor, entonces probablemente entiendas de lo que estoy hablando Primero, comencemos de nuevo con el tamaño fuerte. Lo principal es un flujo de trabajo más rápido porque todo sucede dentro de tu editor de código. Podrías refactorizar inmediatamente el código, usar agente si eres cursor Por supuesto, tienes una buena característica de autocompletar porque, nuevo, el codio o cursor, conocen el contexto de tu proyecto y pueden sugerir de inmediato algo en tus estilos o guion Nuevamente, hablando del proceso de corrección de errores, es más fácil porque conoce tu base de código y puede sugerir alguna solución adecuada mucho más rápido por eso. Y cometes menos errores porque muchas cosas sucedieron del lado de la IA. Ahora los lados débiles. Entonces nuevamente, si te gusta tener el control de cada pieza de tu código, entonces te sentirás un poco incómodo porque la IA es bastante buena cobertura de tu código, como probablemente recuerdes de nuestro curso de essens Lo siguiente, si estás haciendo demasiada codificación de IA en tu proceso en general, puedes comenzar tu nivel de habilidad porque la IA hace todo por ti mismo. A continuación, por supuesto, puedes obtener algunos cambios inesperados en el código porque de nuevo, especialmente si estás usando agente, podría reescribir muchas partes de tu código Y lo último, así que estás empezando a depender de alguna herramienta específica como el cursor, que tal vez sea buena y tal vez no tan buena. Depende de ti decidir, pero es la realidad. Entonces, para recapitular, la segunda velocidad es más para programadores experimentados y para experimentados en el uso de IA y también tienen un presupuesto porque esos son pagados, especialmente si estás escribiendo mucho código 36. Lección 4: Bienvenidos a la lección número cuatro. En esta lección, vamos a hablar un poco sobre qué velocidad elegir porque a veces todavía no está muy claro qué y cómo. Entonces, solo para recapitular rápidamente, como dijimos anteriormente, es más como una declaración canónica de que la primera velocidad es adecuada para principiantes y codificación en IA, y si tiene algunas restricciones de presupuesto, y la segunda velocidad es la mejor para programadores experimentados y usuarios de IA que tienen algún presupuesto Al final, volvería a subrayar eso. Incluso cuando te conviertas en desarrollador experimentado y con experiencia en codificación de usuarios de IA, sigue siendo cuestión de las preferencias personales que se basarán en tu exploración de esas herramientas, tus enfoques en la codificación en general y tu experiencia. Porque de nuevo, como dije anteriormente, hay desarrolladores experimentados que están totalmente confiando en un cursor para construir casi todo el proyecto para ellos como dicen, el 90% del código está escrito por IA y luego solo revisan y hacen algunos y otros desarrolladores experimentados, podrían usar solo, por ejemplo, Cdium y sienten que es suficiente para ellos, tal vez solo con un poco de zambullido Así que de nuevo, ambos son desarrolladores maduros experimentados y exitosos, pero el acercamiento a las herramientas y uso de la IA podría ser muy diferente porque nuevamente, es muy importante entender que a veces tal vez a primera vista, cuando no tienes tanta experiencia con la IA, a primera vista, IA puede ser muy rápida para crear algunas características de código, y dices, como, Vaya, estoy como, moviéndome tan rápido. Pero entonces podrías llegar a algún problema en el código o alguna conexión entre tus módulos, subsistemas que realmente no están entendiendo por qué ocurrió y algunos problemas potenciales de codificación, y pasarás muchas horas tratando de entender y resolver ese problema, lo que descuidará el tiempo que se ha ganado en la parte de generación de código. Nuevamente, hay que tener cuidado y dejarme compartir mi enfoque personal, cómo lo hago al menos en estos días. Entonces como puedes ver, esta plaza con un borde grueso, digamos que es un proyecto. Es un pequeño exceso o aplicación web que estoy construyendo. Y los pequeños cuadrados dentro de ella, son algunas partes de esa aplicación, por ejemplo, alguna parte de autenticación, rutas, API, así sucesivamente y así sucesivamente. Por lo que normalmente planeo mi proyecto en algunas partes. Y, por supuesto, no se puede planificar todo el proyecto desde el principio porque es imposible. Quiero decir, por eso es una especie de planeación flexible. Soy algo así como no como al principio, necesito como autenticación, necesito algo de front-end para un par de páginas y un par de las APIs para obtener los datos Y entonces empiezo, ya sabes, entonces mi proyecto ya está tiene alguna estructura, hay alguna división de las preocupaciones. Y funcionalidad. Y entonces puedo decir, por ejemplo, esta parte, voy a usar IA, y esa parte, la voy a hacer yo mismo porque, por ejemplo, desde el último de mis últimos proyectos, podría tener algún código bonito de calidad y alguna solución que ya se ha implementado, que es el caso, por ejemplo, con autenticación o como stripe para sistemas de pago. Sí. Y para algunas cosas nuevas, ya sabes, se podría decir, normalmente digo eso. Bien, probemos esto con IA. Y nuevamente, prefiero un enfoque más granular. Significa que podría dividir incluso esta, ya sabes, alguna parte del proyecto en subpartes e intentar resolverlas pieza por pieza. En ese caso, siempre tengo este control sobre mi código y proyecto. Y también una de las buenas recomendaciones como probablemente conozcas, incluso cuando hagas el pequeño cambio, es bueno ir a comprobarlo en el navegador. ¿Cómo funciona de manera apropiada? Porque si lo haces, digamos, diez cambios, entonces en algo, no está funcionando, hay que ir a depurar los diez cambios, lo cual no es muy eficiente. Entonces nuevamente, como se puede decir, es una combinación de enfoques. Espero que encuentres algo por tu cuenta. Y de nuevo, a veces es bueno, ya sabes, solo hablar con tus compañeros, sobre todo con más experiencia que tú y ver cómo se acercan, ya sabes, sobre el uso de esas herramientas. Y entonces puedes, ya sabes, copiar algunas partes, probar algunas partes y ver si le quedan bien. 37. Módulo 5: resumen: Enhorabuena por terminar con un módulo número cinco. Y espero que ya hayas decidido con qué velocidad te gustaría ir para las prácticas de codificación. Y desde el siguiente módulo, estamos iniciando las sesiones de práctica. Nos vemos ahí. 38. Módulo 6: introducción: Bienvenido al módulo número seis. En este módulo, vamos a consolidar todos los conocimientos que has adquirido lo largo del curso mediante la construcción de una aplicación web simple usando IA, y vamos a pasar por este flujo de trabajo paso a paso. 39. Lección 1: Bienvenido a la lección número uno. En esta lección, vamos a pasar por una rápida visión general de lo que vamos a hacer. Entonces, amigos míos, vamos a construir algo muy sencillo porque nuestro objetivo principal es practicar la mecánica del uso de la IA en tu flujo de trabajo de creación de aplicaciones web. Vamos a construir una aplicación de contador simple con un poco de funcionalidad. Porque en ese caso, te resulta familiar, y luego podrías enfocarte en cosas específicamente dedicadas al flujo de trabajo de usar IA en tu código y no en cómo implementar algo específico con respecto a la aplicación en sí. Como dije anteriormente, realmente prefiero la mejora progresiva en todo lo que construyo porque si pasas de algo muy simple, dos más avanzado paso a paso, entonces entiendes toda la cadena de tus operaciones, y siempre puedes depurar o ir a algo más sencillo de lo que era antes. Entonces, ¿cuándo vamos a practicar esto? Conceptos básicos para integrar la IA en tu flujo de trabajo, luego, podrías practicar una, dos, tres veces, y luego vas a ver algunas cosas que funcionan específicamente para ti, y luego podrías avanzar en algo más complejo. 40. Lección 2 : Bienvenidos a la lección número dos. Y aquí está nuestro paso número uno en nuestro worklow de IA. El paso número uno es planificar una funcionalidad de su aplicación web. Mi consejo número uno para ti es siempre hacer tu planeación en un papel con lápiz o bolígrafo. ¿Por qué? Porque es la forma más sencilla y rápida de cómo puedes iniciar el proyecto Porque en ese caso, realmente no te enfocas en la parte tecnológica de cómo hacer las cosas hermosas. Tú solo estás escribiendo tus bocetos para hacer la versión básica de lo que te gustaría tener en tu proyecto Entonces en nuestro ejemplo específico, entonces estamos construyendo una aplicación de contador, y vamos a planificar nuestra funcionalidad. Entonces vamos a tener algunas cosas habituales. Entonces tenemos una funcionalidad como un botón dos más uno, menos uno, luego más diez menos diez, y luego también más y menos aleatorios. Entonces eso es bonito. Y en ese paso, ya tenemos algunas cosas que nos gustaría que hiciera nuestra app. Y las mismas cosas se aplicarían a todos tus demás proyectos. Solo otra vez, toma su pluma y papel y empieza, ya sabes, solo imaginando lo que te gustaría que hiciera tu app y solo escríbelo con palabras simples 41. Lección 3: Bienvenidos a la lección número tres. Entonces, el segundo paso de nuestro flujo de trabajo es planificar nuestra interfaz de usuario y el diseño de nuestros componentes y algunos elementos. Entonces nuevamente, como en el paso anterior, haz tu primer boceto en un papel porque de nuevo, solo vas a estar enfocado en cómo hacer rápidamente lo central que tienes que hacer y no vas a pensar en colores, ya sabes, tipografía y, ya sabes, hermosos elementos Solo vas a hacer lo básico que realmente necesitas en tu proyecto. Entonces en nuestro caso, de nuevo, estamos usando el lápiz y el papel. Entonces como en la mayoría de las aplicaciones de contador, tenemos el valor. Entonces como de costumbre, tenemos botones más y menos cerca, y luego algunos botones justo ahí abajo, más diez menos diez más aleatorios y menos aleatorios. Entonces esto es más o menos así. Y así básicamente tomamos nuestra funcionalidad, lo que hemos hecho en la parte, paso uno, y luego simplemente pensamos en nuestra interfaz de usuario y ha implementado esto en un papel. Lo mismo se aplicaría a cualquier otro proyecto que vayas a hacer. Simplemente haz esto de la manera más sencilla posible en tu primer paso. 42. Lección 4: Bienvenidos a la lección número cuatro. Así que el tercer paso de nuestro flujo de trabajo es elegir nuestros paquetes textag y de terceros Entonces mis amigos, como pueden ver, esta parte no viene en el principio, sino un poco en el camino, porque la parte de implementación es muy específica de lo que prefieres, con qué tecnologías puedes trabajar. Pero nuevamente, lo más importante es la funcionalidad de tu app y, por supuesto, el layout, viene primero. Entonces en ese paso, lo que puedes hacer es elegir tu textag Podría ser algunos lenguajes embestidos, tecnologías de estilo, frameworks, sí, luego también bibliotecas de terceros, e incluso algunas personas podrían pensar en las aplicaciones Entonces el lugar en el que les gustaría alojar su app, tal vez algunos procesos CICD, pero de nuevo, depende de ti en ese momento Entonces en nuestro caso, de nuevo, como mencioné anteriormente, solo vamos a usar HTML, CSS y J Script por razones de simplicidad. Y también lo que es importante mencionar, por ejemplo, nuevamente, tomando en consideración el marco de mejora progresiva, digamos, a GainUR le gustaría usar Me gustaría construir la aplicación de contador, y luego digamos, hay como una biblioteca que podría hacer que la aplicación pudiera hacer que los números cambiaran, no solo el cambio del contenido de texto de entrada de texto, lo siento, sino de alguna manera efectiva. Entonces podrías agregar esta biblioteca a tu proyecto, pero implementarla posteriormente. Entonces primero, implementas todavía la versión básica, y luego podrías progresarla, mejorarla a alguna versión elegante. Va a ser un poco más fácil porque, nuevamente, la funcionalidad viene primero y los efectos vienen después. 43. Lección 5: Oh, bienvenidos a la lección número cinco. Entonces, el paso número cuatro en nuestro flujo de trabajo es una parte incitante Así que anteriormente, hemos definido la funcionalidad, interfaz de usuario y el diseño, la pila de texto, y ahora es el momento de ir a elegir las herramientas de IA. De nuevo, ahora ya has llegado a ese punto, así que sabes qué tipo de herramientas tenemos y en qué situación quizás quieras usar ¿qué? Entonces para ese proyecto en particular, de nuevo, podríamos usar Cloud como chat y luego copiar y pegar código en nuestro DE, y podríamos usar el V cero o cursor. En ese caso particular, iríamos con cero. Pero otra vez, podrías elegir lo que quieras. Y es importante mencionar que en esa etapa, podrías pensar, por ejemplo, podrías ir con un mensaje de texto, podrías ir con agregar tu imagen de tu UI a la IA o alguna combinación de estos dos enfoques Como recuerdas del paso número dos, donde estábamos creando nuestra interfaz de usuario y diseño, se ve algo así. Todo lo que hice fue guardarlo como una imagen para que sea como una captura de pantalla. Y esta captura de pantalla, vamos a estar sumando a V cero, pidiendo recrear eso Entonces amigos míos, estamos dentro de cero. Como pueden ver, he subido una captura de pantalla de nuestra aplicación, y luego he solicitado algo sencillo, crear una aplicación de contador, usar un ploadedimage como se hace referencia, Textag HTML, CSS, y Entonces veamos qué va a hacer. Entonces los V Zero han terminado de pensar, y nuestra imagen de maqueta para UI es prácticamente recreada como hemos pedido Así que vamos a comprobar la funcionalidad. Entonces como pueden ver, amigos míos, funciona bastante bien, sobre todo teniendo en cuenta que es nuestra primera iteración Y solo para agregar de nuevo, podrías usar coágulo para eso Y por ejemplo, coágulo a veces no es capaz de entregar una vista previa, así que simplemente podrías ir a copiar y pegar el código en tu ID y comprobarlo ahí, o podrías usar tu cursor si estás usando cursor para obtener prácticamente el mismo resultado 44. Lección 6: Bienvenido a la lección número seis y el último paso, que forma parte de la iteración es editar y ajustar la salida que has obtenido de tu IA Entonces digamos que nos gustaría agregar un botón de reinicio a nuestra aplicación. Veamos cómo se va a hacer. Entonces estamos de vuelta en el cero. Nuevamente, como en la lección anterior, acabo de descargar la captura de pantalla con un botón de reinicio, y solo pido una cosa simple como en un botón de reinicio en la parte inferior del anuncio, usar una captura de pantalla como referencia. Entonces veamos qué va a hacer. Entonces el VZO ha hecho su trabajo, y como puedes ver, está diciendo que ahora contador incluye botón de reinicio en la parte inferior de la app Pero la cosa es que, por ejemplo, como puedes ver, VZ no puede previsualizar este archivo Entonces nuevamente, está sucediendo, y ese es el proceso de retocar y editar Y aquí, de nuevo, anteriormente estaba explicando que al usar estos diferentes instrumentos, diferentes AI, finalmente, vendrán con algo que le convenga. Y este tipo de situaciones, algo así como bloqueos de carreteras que encontrarás durante tu camino te harán más experimentado. Y nuevamente, las soluciones, las harás más adaptadas a tus situaciones específicas y estilo de trabajo. Entonces veamos qué podemos hacer aquí. Como puedes ver, he jugado con el cero incitando de ida y vuelta un par de veces, como puedes ver, la V dos creada restaurando V uno y las mismas cosas con la Versión tres, pero la vista previa aún está cerrada Entonces también trato de decir que puedo ver adelanto, pero aun así no tuve suerte con eso. Entonces déjame pensar en alguna otra solución. Entonces lo que he decidido hacer es crear un nuevo chat, pero subir mi segunda versión donde tenemos un botón de reinicio y teniendo la misma sonda que al principio. Entonces probémoslo. Yo mis amigos, este enfoque realmente funcionó porque tengo una vista previa trabajando con toda mi funcionalidad de una cosa anterior, pero como pueden ver, con un botón de reinicio de trabajo. Y creo que es un muy buen ejemplo de eso como funciona realmente la IA, ya sabes, y todos estos obstáculos que puedes encontrar en el camino Y deberías estar familiarizado con, ya sabes, estas situaciones porque um, ya sabes, lo que se interpone en el camino se convierte en el camino. Y al pasar por estas diferentes situaciones, vas a estar cada vez más experimentado. Y también, lo que se podría haber hecho. Por ejemplo, digamos que estás usando una versión gratuita de V cero, y digamos que tus mensajes han ido hasta el final, así que en realidad podrías, ya sabes, tomar el código como en realidad está funcionando a tu ID y luego digamos, la última parte de la funcionalidad, que era un botón de reinicio, ya sabes, ir a un coágulo o chatear GPT y pedir, ya sabes, editar si no lo ha sido editado con Vz algo así, amigos míos, hay que ser flexibles 45. Resumen: Bienvenido al resumen del Módulo seis. Amigos míos, realmente espero que hayan experimentado y aprendido algo de este práctico módulo donde aprendamos el flujo de trabajo, trabajando con IA, y recordemos a mis amigos. Por lo tanto, comienza con la planificación, planificación de su funcionalidad, la planificación de su interfaz de usuario y teXTC Después la segunda parte, vas a tu IA y te pides lo que tengas planeado, y luego solo lo retoques hasta que obtengas la versión de trabajo Una cosa diría que es bueno si trabajas en un pequeño pedazo de tu app porque como probablemente viste en este curso, anteriormente, a veces, anteriormente, a veces, IA podría dar el código que no es realmente la mejor práctica crear algunas funciones o estilos Y luego, cuando obtengas esta pequeña parte del código de trabajo, podrías usar tu experiencia y luego realmente limpiar el código y estructurarlo antes de pasar a la siguiente Entonces la siguiente pregunta que surge, entonces qué podemos hacer si nuestra aplicación es algo más que un contador y tiene múltiples partes a la misma. La respuesta aquí es bastante simple. Entonces, si probablemente recuerdas este diagrama de una lección anterior, lo que tienes que hacer es dividir descomponer tu proyecto en pequeñas subpartes y luego hacer parte por parte Es una forma comprobada de construir cualquier sistema, no solo la aplicación web, y hará que tu trabajo sea mucho, mucho más fácil. Ese caso, de nuevo, si recuerdas el pozo de la muerte, fácilmente podrías no ir en esa dirección y ahorrarte horas de refactorizar y depurar algunos errores que podrían crearse usando enfoque solo de IA 46. Módulo 7: introducción: Entonces enhorabuena. En realidad has llegado al último módulo del curso. Y este módulo está totalmente dedicado para que practiques y consolides todos los conocimientos que hayas adquirido en el curso. Así que rápidamente recapitular el flujo de trabajo de IA. Entonces el paso número uno es planificar la funcionalidad. Recuerda, tenemos que hacerlo en el papel. El segundo paso es planificar UI y LL nuevamente en el papel. El tercer paso es una pila de texto y bibliotecas. paso número cuatro es incitar, y el último paso es retocar y editar Este módulo constará de dos retos. Uno a uno, después de cada reto, obtendrás un video de solución con mis explicaciones. Así que buena suerte. 47. M7 c1(FINAL): Bienvenido al reto número uno. En este desafío, tu objetivo es construir una aplicación básica de cronómetro, y así es como podría verse la interfaz Entonces en la parte superior, tienes el tiempo real así que minutos, segundos y milisegundos, y ahí abajo, tienes tres botones el inicio pausa y reinicio Entonces el botón de inicio en realidad inicia el cronómetro, así que los números empiezan a subir, la pausa, el tiempo hará una pausa y restablecerá todo el tiempo va a volver a cero Pero es sólo un ejemplo, puedes construir algo por tu cuenta. 48. Solución 1: Bienvenido a la solución parte del reto número uno. Entonces, recapitulemos rápidamente los pasos. El número uno es la funcionalidad del plan. número dos es la interfaz de usuario y el diseño, las indicaciones de etiquetas de texto y los ajustes y Entonces comencemos con un paso número uno. Entonces función que nos gustaría tener. Entonces inicia, pausa, reinicia, luego nos gustaría tener minutos, segundos y milisegundos. Así que la interfaz de usuario es bastante simple. Estamos teniendo minutos segundos, milisegundos, y tres botones que tenemos planeados En la pila de texto nuevamente, HDL CSS y JS, y para esta tarea específica, estamos optando por usar Cloud para practicarla también. Nuevamente, como puedes ver, el prompt es bastante sencillo. Construir un cronómetro básico funciones webapp iniciar pausa reiniciando minutos segundos, milisegundos y pila de texto que Como puedes ver, todo lo que has estado haciendo en la etapa de planeación finalmente entra en tu pronta. Y para ese caso específico, no usemos la captura de pantalla. Intentemos solo usar texto. Entonces estamos en la Nube. Hemos pegado nuestro prompt, y veamos qué va a hacer Entonces, como pueden ver, Claude ha terminado su trabajo, y estamos teniendo un buen resultado de nuestra gamba Entonces vamos a probarlo. Parece que está funcionando como queremos. Y vamos a tratar de hacer un poco de retoque. Por ejemplo, nos encantaría tener, digamos, dos ceros a milisegundos y tres como ahora Entonces decidí usar el siguiente baile de graduación. ¿Podrías por favor hacer el formato desde asi ahora? Entonces utilizo los 70 a seis ceros. Entonces veamos qué va a hacer. Walla como puedes ver, ha hecho lo que pedimos Así que intentemos de nuevo. Parece que está funcionando muy bien. Entonces echemos un vistazo al código. Y nuevamente, como estuvimos platicando el principio y a lo largo del curso, que primero debes adquirir las buenas habilidades de codificación. Y ahora mismo, como puedes ver, lo que ha hecho es que todo se encuentra en un solo archivo. Significa HTML, CSS y JS, todo en un solo archivo, sin separación de preocupaciones. Y luego, por ejemplo, si conoces incluso los conceptos básicos de un JavaScript, podrás usar tus conocimientos para separarlos en tres archivos diferentes y usarlo como proyecto final que te gustaría tener. Entonces creo que este video estuvo bastante bueno, y tuvimos este resultado final en este caso, incluso sin la captura de pantalla. 49. M7 c2(FINAL): Bienvenidos al reto número dos. En este reto, tu objetivo es construir un generador de cotizaciones aleatorias. Así que así es como podría verse la interfaz de usuario. En un top, tenemos el voto en sí, luego el nombre del autor, y luego este botón con nueva etiqueta de cotización. Al hacer clic en este botón, se debe buscar la nueva información. Entonces citas a nombre del nuevo autor. Y te voy a dar una pequeña pista si quieres que este reto sea un poco más fácil, debes usar los datos locales y no los datos de Internet. Entonces sin la solicitud FIC a la API externa. Buena suerte. 50. Solución 2: Ven a la segunda solución para aplicación de generador de código aleatorio. Así que de nuevo, recapitulación rápida de los pasos para el flujo de trabajo, trabajando con IA Así que nuevamente, funcionalidad, UI y Layout, pila de texto, prompting, y luego retocar y editar La funcionalidad que nos gustaría tener es mostrar el código aleatorio en ButTomClick Nos gustaría ver el código, y el autor y los datos deben estar alojados localmente. Significa que no vamos a usar ninguna API para ese caso específico. siguiente paso es UI, como puedes ver, tenemos la cotización. Tenemos el nombre del autor, y tenemos el nuevo botón de cotización. En términos de stack, HTML, CSS y JS, y en términos de elección de IA, vamos a usar cursor para practicar, y prompt se ve así. Cree funciones de aplicación de generador de cotizaciones aleatorias. Muestre una nueva cotización en un botón, haga clic, muestre cotización y autor. Los datos deben almacenarse localmente, Textag HTML CSS y Vanilla JS Entonces nuevamente, si has hecho la etapa de preparación adecuada, entonces tu prompt final estará en el contexto y calidad suficiente para dárselo a la IA para obtener tu primer borrador. Entonces veamos esto en acción. Entonces mis amigos, estamos en cursor, y he pegado el prompt en el chat Recuerda, cuando estamos usando cursor, nos gustaría usar el modo de envejecimiento porque nos gustaría que se construyeran nuestros archivos, y probemos lo que va a llegar a ocurrir. Y nuevamente, no vamos a usar ninguna imagen para ese caso específico porque nuestro diseño es bastante súper básico, solo un boceto, y nos gustaría ver que tal vez pueda llegar a algo más interesante. Así que vamos a ver Así que está generando índice HTML. El trabajo está en curso. Entonces ahora es el momento de los estilos, el trabajo en progreso, los datos, y ahora está trabajando en un archivo JS de la aplicación para la funcionalidad JS. Como puede ver, ha decidido incluso agregar algunas transiciones CSS para una interacción fluida. Entonces el agente haciendo por sí solo, es idea del agente. Por lo que ha terminado su trabajo, y nos da una explicación rápida, breve de lo que ha hecho. Así que vamos a leerlo un poco. Como puedes ver, dice, limpia la interfaz de usuario moderna con un fondo degradado, transiciones suaves, diseño responsivo, sus efectos, almacenamiento local dM. Verás, es bastante genial. Así prevención de engaños animaciones. Todo bien. Entonces veamos cómo va a quedar en un navegador real. Entonces primero, aceptemos todos. Así que estamos en el navegador, y como puedes ver, tenemos esta bonita interfaz de usuario, tan agradable. Fieltro de color. Y vamos a probarlo. Guau. Como pueden ver, se ve bastante bien y funciona como esperábamos. Pueden ver, amigos míos, hemos seguido un flujo de trabajo de IA muy sencillo, y cuando estableces una tarea específica, funciona bastante bien. Entonces mis amigos, en términos del último paso en términos de retoque y edición, he pedido a AI, IA superficial, específicamente que use una fuente Sera para una cotización, y como pueden ver ha hecho su trabajo, aceptemos el cambio y veamos el resultado final Y bueno, como pueden ver, ha cambiado el teléfono, y como, en mi opinión, se ve bastante bien. Entonces espero que aprendas algo nuevo de esta lección. 51. Acciones: Enhorabuena, amigo mío. Entonces, hasta este punto, has hecho un trabajo importante. Has pasado por un curso completo, hecho algunos ejercicios, y en este módulo, realidad has completado algunos desafíos específicos por ti mismo. Gran trabajo. Estoy muy orgullosa de ti, amigo mío, y te deseo que me guste, buena suerte llevar este conocimiento al siguiente nivel. Entonces lo que te pediría que hagas ahora es que compartas tu proyecto poco estudio de caso, pequeñas explicaciones comparte algunos detalles de cómo construyes estas aplicaciones web. A lo mejor has experimentado y hecho algo extracurricular Así que también podrías compartir esto conmigo. Y si tienes algunas preguntas, está totalmente bien, por favor haz estas preguntas, y haré todo lo posible para responderlas. Otra vez, buena suerte. 52. Resumen: Bienvenidos a la terminación del módulo número siete. Amigo mío, en este módulo, has pasado por dos retos muy interesantes donde has construido dos aplicaciones web simples por ti mismo. Significa que ahora tienes una experiencia de primera mano en la creación de aplicaciones web usando IA. Tan buen trabajo. 53. ¡Gracias! : Amigo, solo quiero decir un enorme, enorme agradecimiento. Realmente aprecio que hayas encontrado tu tiempo para tomar los puntajes e ir hasta el final. Y realmente espero que este conocimiento lleve su proceso de codificación al siguiente nivel. De hecho vas a construir las aplicaciones mucho, mucho más rápido y vas a externalizar el tedioso trabajo, el trabajo aburrido a tu Así que buena suerte, amigo mío, y muchas gracias. Nos vemos.