Codificación con IA en Vibe para principiantes con Bolt. NUEVO

1. INTRODUCCIÓN: Bienvenidos, a todos. Mi nombre es Greg Kang. Bienvenido a la codificación de IA para principiantes. Este curso es para cualquiera que quiera comenzar a codificar, usando el poder de la EI, usando tu creatividad. No necesitas ningún conocimiento de codificación. Y en realidad soy un creador de contenido canadiense de más de diez años. Tengo experiencia en tecnología, pero no soy un codificador. Pero un amigo me presentó esta app. Empecé a jugar con él. Empecé a crear diferentes aplicaciones como este sitio aquí, que tiene un chat comunitario. Hace rankings, un directorio de las mejores ubicaciones digionmad Y en este curso, te voy a llevar paso a paso cómo empezar en esta plataforma, creando tus propias aplicaciones, usando tu creatividad. Es muy divertido, así que comencemos. 2. Fijación de expectativas: Hola. Antes de comenzar el curso, solo quiero establecer tus expectativas sobre cómo está estructurado el curso, qué puedes esperar aprender y salir del curso. Entonces, la codificación de IA es un campo muy nuevo. De hecho, Bolt acaba de ser liberado en diciembre de 2024. Ya estamos en enero de 2025. Así que puedes esperar mucha experimentación para ver qué puedes obtener de la app, qué puedes crear. Y voy a estar pasando por las lecciones, me vas a ver creando una variedad de apps, y tengo una lista aquí porque he creado bastantes aquí. Entonces vas a ver diferentes sitios que hacen rankings. Por ejemplo, las personas más ricas del mundo. También tienes uno sobre cómo hacer rankings de Instagram y mientras creas estas aplicaciones, te voy a mostrar cómo implementar diferentes funciones como filtros, cómo agregar fotos de perfil para darle vida a tu app y hacer que se vea más agradable visualmente. También tengo un juego que te voy a mostrar cómo crear Pong, el juego de TD real Pong usando codificación AI. También vamos a hacer aplicaciones funcionales como calculadoras de conversión de divisas Vamos a hacer uso de APIs, interfaces de programación de aplicaciones para agregar potencia a nuestra aplicación. En realidad vamos a llamar a diferentes APIs de Google. Van a llamar a una API que nos va a permitir transcribir realmente un archivo de audio y más Y las API son una característica bastante poderosa del conjunto de habilidades de codificación de IA que realmente va a abrir un nuevo mundo para ti. También vamos a demostrar cómo puedes usar PayPal o Stripe para implementar un muro de pago frente a tu aplicación en caso de que quieras monetizarlo Por último, te voy a mostrar un ejemplo muy avanzado, un chatbot multi AI LLM que hace uso de diferentes bots de chat de IA tanto de Open AI como de Google, y voy a usar una API para eso Así que busca esa lección, y también tenemos una divertida, una aplicación básica para compartir viaje, que no te dará la aplicación completa, pero te dará una idea de lo que es posible. Entonces, al crear estas aplicaciones, vas a llegar a un punto en el que creas algo, lo implementas, y vas a obtener esta URL que no va a ser fácil de usar. Entonces te voy a dar algunas ideas sobre cómo puedes cambiar eso. Creo que la forma más fácil es comprar un sitio de dominio de Netafe que es el proveedor incorporado De pernos. Pero también puedes simplemente cambiar el nombre de configuración del sitio para que sea más fácil de usar, por ejemplo, pong dotnetlofy.com Y también usas el reenvío de URL. Entonces te voy a mostrar algunos ejemplos de cómo hacer eso. Al mismo tiempo, la aplicación en sí evoluciona cada semana. Por ejemplo, introducen Super Base integrada en perno. Lo verás en la parte superior derecha, y eso te permite crear una base de datos, que creará usuarios para ti. También te voy a presentar otra plataforma llamada lovable, lo que facilita un poco la conexión a la base de datos y agregar autenticación desde Google En mi opinión, y también facilita integración de APIs de pago de Stripe. Entonces por eso te voy a presentar al adorable punto Dev al final del curso Entonces tienes una idea de otras alternativas solo a BlaneU. Bol le enseñó a Nu no la única aplicación en el juego, no el único codificador de IA en el juego Pero este curso está realmente diseñado para principiantes. Porque no soy programador, y quiero mostrarte las posibilidades de lo que es posible si no eres un codificador Pero si eres un codificador, entonces, ya sabes, solo espera que va a haber va a ser un curso bastante amigable para principiantes No vamos a ir a fondo. No vamos a entrar en repositorios GitHub, ese tipo de cosas No vamos a llevar nuestros proyectos a un programa como cursor o GitHub y meternos en el código. Entonces de eso no se trata este curso, y por eso es que es el título es codificación de IA para principiantes. Entonces con eso fuera del camino, comencemos el curso. 3. Registro: Entonces estamos viendo pernos ahora mismo, y solo voy a dar un paso atrás y mostrarte cómo puedes empezar. Entonces primero, quieres ir al RL bolt dot Nu. Ese es Bolt dot nu. Y lo que hay que hacer es registrarse para obtener una cuenta. Ahora, una vez que crees la cuenta, podrás iniciar sesión en el panel de control, y tendrás la capacidad de crear algunas aplicaciones de forma gratuita y tener una idea de lo que puede hacer esta aplicación. Ahora, después de un tiempo, te va a decir que vas a necesitar algunos créditos para iniciar sesión, y ahí es donde te recomiendo que te registres en un plan personal. Así que sólo voy a mostrarte el plan que tengo. Entonces me he apuntado al plan P, que es $20 US, y eso te da 10 millones de tokens, y eso es bueno para un mes. Y me quedan 8.2 millones de tokens, y solo te voy a dar una idea de la cantidad de apps que he creado. Para que puedas acceder a tus chats en el lateral aquí. Entonces puedes ver que he creado una aplicación de puntuación de golf, tablero de divisas, tablero inversión, aplicación de puntuación de golf, clasificación de campos de golf, Bitcoin, tablero de blockchain. Así que he creado bastante con las fichas que tengo. Por lo que este icono en la parte inferior izquierda te permitirá acceder al menú. Y el menú es donde puedes acceder a tus chats, la configuración. El Centro de Ayuda. Y en realidad puedes ver tus fichas ahí. Así que he usado casi 1.8 millones. Se pueden comprar más fichas. Y desde suscripción, mi suscripción, puedes ver qué plan de suscripción tienes. Si quieres acceder a tu chat e iniciar un nuevo prompt, siempre lo tienes, y desde este menú aquí, siempre puedes iniciar un nuevo chat. Bien, con eso, vamos a empezar desde aquí y crear nuestra primera app 4. Cómo ahorrar tiempo y fichas: Todo bien. Quiero hacer una actualización los pernos para que te ahorren tokens y algo de tiempo. Hay una nueva configuración si vas a tu configuración en la parte inferior izquierda, y si vas a vistas previas de características, hay una función llamada DIF que puedes activar Y lo que esto hará es, en lugar de reescribir todo el archivo, solo se enfocará en los nuevos cambios, ahorrándole tiempo y tokens Entonces originalmente cuando miré esto, no hace mucho tiempo, la semana pasada fue una fase experimental, pero ahora esa etiqueta se ha ido. Entonces yo diría que esto es seguro de probar. Lo he probado desde hace una semana, y parece que hace que el proceso vaya un poco más rápido. Así que de nuevo, está bajo configuración, vistas previas de características y las características llamadas DIF Te voy a ahorrar fichas y tiempo. 5. Consejos de ingeniería para instrucciones de IA: Cuando se trata de IA generativa, ya sea que estés generando imágenes, video, código, creo que la salsa secreta es realmente la entrada, la ingeniería rápida Entonces las indicaciones que das es lo que va a determinar lo que obtienes de estos modelos de IA He probado generadores de imágenes como Adobe Firefly, difusión, copiloto Microsoft Bangs, ChagBT, Metasama Ahora hay tantos sistemas de IA diferentes. Pero realmente, la habilidad común requerida en todas las plataformas es la ingeniería rápida. Entonces, ¿cuáles son algunos consejos aquí? Entonces, al generar videos en el generador de imágenes Opening Eye Sa o Adobe Fireflies, te dan algunas imágenes de referencia para mostrar lo que puede hacer su modelo También te damos algunos ejemplos de diferentes estilos de imágenes y videos. Para que los puedas usar como puntos de referencia. Puedes pinchar en esa imagen que te guste. Puedes obtener el prompt que usan para crear esa imagen, el estilo, y luego puedes personalizarlo a tu gusto. Otra habilidad clave, ya sea generación de imágenes o incluso generación de código, es lo que yo llamo iteración, reiteración Entonces es básicamente una palabra elegante para volver a hacerlo. Entonces, una vez que recibas ese primer prompt de referencia, lo vas a personalizar. Digamos que obtienes un aviso para una imagen hiper realista de Vancouver en el telón de fondo de la montaña Entonces obtendrás tu primera imagen generada, y entonces probablemente notarás que no es exactamente lo que quieres. Entonces quieres reiterar cambiar el tono de color, hacer que el cielo sea más brillante, más cálido, y luego reiterar. También puedes hacer variaciones. Por lo que algunas plataformas como Adobe Firefly te permitirán elegir entre cuatro versiones diferentes de la imagen Y luego a partir de ahí, puedes seguir iterando iterando. Entonces eso es lo que quiero decir con iterar. Y, por supuesto, a veces puedes guardar tu progreso. Puedes favorecerlo para que puedas acordar tu estilo de creación más adelante Entonces tuve alguna experiencia reciente con la codificación con IA, y es algo muy similar. Puedes comenzar con un prompt similar y reiterar y crear algo increíble. Y si quieres crear si quieres crear otra app, puedes usar el mismo estilo. Por ejemplo, creé un tablero de criptomonedas que era personalizable, tenía desplegables, tenía alertas por correo electrónico. Bueno, podría tomar esas mismas características para otro tipo de tablero personalizable. Digamos que para los resultados deportivos. Así que podrías tomar el mismo diseño e inspiración y llevarlo a una aplicación diferente o a una imagen de IA diferente. Así que sí, ¿cómo llamaría a eso? Yo lo llamaré solo marcador, marcando tu trabajo para el futuro Cuanto más específico seas en tus indicaciones, más detallada será tu salida Por lo tanto, la ingeniería rápida es esencial, y creo que algunas habilidades para llegar bien en ello. Es sólo una práctica. Y luego, si obtienes esas imágenes de referencia, mira las indicaciones, y solo aprenderás haciendo más Pero definitivamente puedo ver más cursos capacitando a personas en ingeniería rápida con la popularidad de todos estos modelos de IA. Una cosa más que quería compartir con ustedes es la función de aviso mejorado. Algunas aplicaciones como Bol pensaron Nuevo. Creo que hay otros como WIX. Te permiten crear tu prompt primero, y es posible que veas un ícono mágico o de IA que elaborará en tu prompt inicial. Así que mira esto en acción aquí. Acabo de recibir un mensaje de dos frases para crear un panel de Instagram. Cuando hago clic en el prompt mejorado, puedes ver que está elaborando incluso haciendo una suposición educada sobre exactamente lo que quiero, y resuelves el Bild para editarlo y luego ponerlos en tu baile de graduación inicial Por lo que muy poderosa. Diviértete con él y buena suerte. 6. Cómo crear el ranking de nuestra primera aplicación en Instagram: Todo el mundo, este es Greg aquí. vamos a construir nuestra primera app Hoy vamos a construir nuestra primera app usando Boldoc New Por lo que obtendrá una serie de indicaciones gratuitas en el plan de pago, pero pensarlo un poco antes de seguir adelante y presionar Enter porque el primero indica lo más importante Y sí, solo puedes comenzar con un primer prompt, y luego puedes ver aquí, tengo una idea para un ranking de dashboard creado de los mejores influencers de Instagram con una selección de perfil y número de seguidores Ahora, una vez que haya ingresado su mensaje, tiene este icono, que es un prompt mejorado. Y si haces clic en él, la IA te ayudará a mejorar tu prompt con solo requisitos mucho más específicos. Así que sólo voy a leer por aquí. Cree un tablero visualmente atractivo que muestre las 20 principales influencias de Iscram en todo el mundo, clasificadas por número de seguidores, incluya los siguientes elementos para cada influencer, selección de perfil, selección de perfil Use el nombre con estado de placa verificado si corresponde, nombre completo para mostrar, recuentos totales de seguidores, país de origen. Esto se ve genial. Entonces, vamos a darle a Go. Él está bien. Para que podamos ver el código que se está generando en el lado derecho. Ahora, no te preocupes si no sabes lo que significa. Está bien porque solo necesitas seguir en el lado izquierdo. Te voy a dar una idea de lo que está haciendo. Estás esperando tu primera vista previa o tu primer borrador, y luego puedes revisar o iterar una vez que tengas tu primera vista previa o borrador Bien, para que puedas ver el mío aquí. Y me está mostrando dos nombres aquí. Bien, y luego está mostrando un problema a la izquierda, lo cual es normal. Es normal. Entonces, hagamos clic en Intentar arreglar para comenzar, y luego podría pedirle que incluya más perfiles más. Sólo me voy a mover fuera del camino aquí. Todo bien. Y es normal obtener estos problemas potenciales. Arregle el perfil, elija imágenes y muestre al menos el perfil superior. Bien. Entonces entonces va a ir y reiterar. Y se puede ver en el lado derecho que está recogiendo a Selena Gomez para el número tres, Kylie Jenner por el número cuatro, la roca para el número cinco Entonces es recoger los datos del código. Ahora bien, en cuanto a la sintaxis, quiero decir, realmente no entiendo eso y todo este código de aquí. Pero como dije, en realidad no necesitas hacerlo. Simplemente está corriendo y haciendo lo suyo. Tu principal objetivo es incitarlo usando esta tecnología para obtener lo que quieres. Bien, genial. Así que las principales influencers de Instagram Christiana Ronaldo, Lionel Messi, Selena Gomez , the Rock Y si, si bien estas selecciones de perfil no son definitivamente no son correctas. Está mostrando los datos correctos, y está mostrando otra información como el crecimiento, el número de seguidores, por lo que esta es una buena segunda versión. Ahora bien, si cometes un error en tu segundo o tercer prompt, tienes la posibilidad de volver aquí. Así que sólo voy a mostrarte dónde. Siguen cambiando las cosas porque están haciendo actualizaciones a esta aplicación. Pero puedes ver aquí en la parte inferior de tu último mensaje, hay un botón Deshacer por aquí. Para que puedas hacer clic en Deshacer si algo se rompe. Entonces voy a agregar más características aquí. Voy a añadir un filtro. Y pídele que arregle la selección de perfil y agregue un filtro. Para que puedas ver el proceso para crear una app. Creas tu primer prompt, lo realzas, y luego creas tu primera versión, echas un vistazo a lo que el perno crea para ti, y luego puedes revisarlo y tienes la capacidad de deshacer. Y es un viaje, ¿verdad? Es un proceso. La calidad de tu app o tu salida depende de tu entrada. Bien, entonces está agregando un flaqueo. Bonito. Y así seguimos teniendo problemas con las selecciones. Podría ser solo una cosa de derechos de autor. Pero bien, tengo derecho a Nike. Al menos tenemos los datos aquí, y tenemos diferentes categorías de filtros. Puedo ver que están trabajando. Vamos a hacer clic Música, Beyonce, Ariana Grande, Justin Bieber, Taylor Swift Entonces este será un buen borrador, ¿verdad? Entonces, digamos que estamos listos para desplegar esto para compartirlo. Y más adelante, te mostraré cómo podemos crear diferentes URLs para nuestra app Una característica más avanzada es la capacidad descargarlo y abrir y almacenar divisiones o conectarlo a una base Eso es más avanzado. En este punto, sólo voy a hacer clic en Desplegar. Y va a crear una URL con Net LIFE, que es otra plataforma, y obtendrás esta URL para que puedas ver aquí cuando haga clic en ella, abrirá la aplicación y podrás compartirla con tus amigos. Esto es en vivo en Internet. Entonces ahí tienes. Así que adelante y crea tu primera app y piensa en tu idea. Pon tu idea en el primer prompt. Tal vez quieras mejorarlo usando IA y luego mirar el primer borrador y luego solo reiterarlo y luego desplegarlo. Buena suerte. 7. Cómo crear nuestra segunda aplicación: las personas más ricas: Bien, aquí está la aplicación de individuos más ricos del mundo aplicación de individuos más ricos Se pueden ver algunos de los individuos más ricos, qué fuente de su riqueza, qué país y compañía Y puedes filtrar por país aquí. Todo bien. Entonces aquí estaba el rápido, crear una lista detallada de los diez individuos más ricos Y probablemente use el prompt de IA mejorado. Así creó eso. Y luego al principio, la app no funcionaba. Entonces eso solo básicamente acaba de recibir el perno para comenzar a arreglar las cosas. Y luego lo arregló. Le pedí que agregara fotos de perfil además del nombre en un filtro. Yo hice eso. Y luego, sí, despliegué la aplicación. Entonces solo quiero mostrarte un ejemplo de una iteración. Digamos que ya lo he lanzado, pero quiero mejorar esta aplicación. Entonces creo que una buena manera de potenciar esto es ampliar la lista. Amplíe la lista para incluir a los 50 individuos más ricos Veamos qué dice el prompt mejorado. Bien, nombre completo, patrimonio neto del auto. Claro. Ahora se va a pedir edad, país de ciudadanía, un poco más de información. Puedo ver que está usando el lenguaje Rat. Todo bien. Pero todavía sólo diez. Pero solo empiezo poco a poco, incluyo el top 20. Creo que pedí demasiada información. Entonces puedo verlo agregando la lista aquí, tres, cuatro, cinco, seis. Entonces es obtener la imagen de Wikipedia. Bien, ahora está sumando más gente, nueve, diez, 11, 12, Bien, esto se ve bien. Número 16, Jensen Huang. Entonces esto es cuando estás viendo el código el tiempo suficiente, como que llegas a entender lo que realmente está haciendo aquí. Entonces aquí vamos. Ahora tenemos más una lista más larga, hasta 20 personas. Y tenemos un filtro, patrimonio neto mínimo, país. Y ahora realmente puedo descargar esto y puedo desplegarlo. Ahí vamos. 8. Crear una calculadora de varias divisas: Bien, aquí hay una práctica aplicación que te permite convertir una moneda a otra. Por ejemplo, veamos $100 US son 94 euros. Luego puedes enviarte el resultado por correo electrónico a ti mismo. Y luego también puedes mirar tu historial de conversiones. Y también hay una calculadora aquí si solo quieres hacer algunos cálculos sobre la marcha. Ahí vamos. Entonces esto está inspirado en otra aplicación llamada X currency. Pero, sí, solo quiero mostrarte otro tipo de aplicación para despertar tus ideas. Entonces, veamos las indicaciones que utilizo para crear esto Entonces originalmente, puse crear una aplicación de calculadora multidivisa. Pero luego utilizo los prompts de IA, multi moneda, convertidor Y luego, si haces clic en el prompt de IA en la parte inferior izquierda, mejorará tu prompt básicamente para cubrir todos los escenarios o la mayoría de los escenarios. Entonces no voy a seguir adelante y hacer eso porque ya lo tengo. Pero sí, vamos a mover ese aviso. Así es como empecé esta app, ¿verdad? Y luego siguió adelante e hizo lo suyo. Así que creó una aplicación integral de conversión de divisas. Y luego mi siguiente mensaje fue agregar una función de calculadora que tomará la moneda seleccionada del menú desplegable , no coincidió del todo con eso. Lo que quería hacer era poder usar una calculadora en Euros o EU. Pero entonces me di cuenta de que realmente no importa porque $1 es $1. Entonces dejé ir a esa. Y luego pongo, ¿ puedes agregar una calculadora debajo porque no estaba agregando la calculadora? Pero terminó poniéndolo de lado, lo cual está bien. Y luego agregué otro problema, agregué una función de correo electrónico y permito que la calculadora calcule en dólares, agregué un título de encabezado, chic voyage moneda global Y luego desplegé la aplicación. Tengo mi enlace. Entonces un toque final es que quiero agregar un enlace al sitio web. Entonces, si quiero enlazar este título aquí, enlazar el encabezado hqvoyage a Y sí, creo que eso es más o menos sobre eso. Agrega un vuelo más fino a continuación Ahora no hagamos eso. Vamos a ver uno de mis vamos a ver. Lo intento soy muy ambicioso, así que traté de agregar funciones múltiples a una app, aunque no esté relacionada. Debería quedarme y enfocarme una función central y simplemente mantenerla apretada. Bien, así que vamos a hacer clic en esto. ¿Abre el sitio? Sí. Impresionante. Entonces ahí vamos. Así es como creé la aplicación de calculadora multidivisa. 9. Cómo crear un tablero de criptomonedas con API: Este es un ejemplo de cómo podemos usar una API o interfaz de programación de aplicaciones para conectarnos a una base de datos de datos para usar en tu app. Entonces voy a simplemente compartir mi prompt aquí para que puedan ver lo que he hecho. Bien. Entonces, inicialmente, solo pedí un tablero de criptomonedas. Usé el icono de IA para mejorarlo. E inicialmente estaba usando un sitio llamado coin Market Cap para obtener su API. Entonces mi mensaje fue crear un tablero de criptomonedas, y luego, cuando la IA lo mejoré, creé todas estas características diferentes, lo cual es increíble. Y siguió adelante y lo creó, pero tuvo algunos problemas. Y pensé que era por la API. Entonces lo que quiero decir con eso es si vamos a la fuente real de los datos, así que capitalización de mercado de monedas. En realidad tienen documentación para su API. Así que me acabo de inscribir para obtener una cuenta gratuita de desarrollador, y eso te da acceso para obtener una clave API, pero es muy limitada. Entonces, qué pernos, trato de pedirle que use la clave API. Y básicamente le pedí que dijera, usa esta clave API, pero tuvo problemas al usarla. Entonces lo que hizo fue utilizar otro sitio llamado Coin Gecko Tienen una clave API gratuita y luego incluso la explicó aquí. Dijo que no requiere autenticación, proporciona mejores límites de tarifas para su uso gratuito. Y ahora tenemos datos en tiempo real de nuestro dashboard de criptomonedas en la parte superior derecha. Así que en realidad solo voy a verificar si estos datos son actuales al ir real a la aplicación real. Entonces si tecleo Coin Gecko, puedo ver que los precios son 100,000 Arium está justo por debajo de 4,000. XRP 259. Sí, así que estos datos son bastante actuales. Y entonces este es un dashboard básico, y me gusta personalizarlo, ¿verdad? Entonces agrega la capacidad de hacer clic en una criptografía y mostrar el cambio porcentual a lo largo del tiempo. Un espectáculo el mejor ganador. Vamos a ver cuántos hay aquí. Uno, dos, tres, seis, nueve, diez. Y una explicación para el incremento. Todo bien. Entonces otro ejemplo de reiterar tu app. De hecho estoy bastante impresionado con lo que se muestra aquí. Y puedes inspirarte en el sitio original, y puedes ver qué tipo de mejoras quiero mostrar? Porque esta es una app bastante buena ya que es. Todo bien. Aquí vamos. Bien, entonces mostrando al mejor ganador, XRP y la razón por la que está ganando. Y tenemos la capacidad de hacer clic en seleccionar cuando seleccionamos una cripto, está mostrando este dashboard a continuación. Nos está dando alguna información más detallada. Ahora bien, el gráfico no está funcionando, pero está bien. Estoy seguro de que podemos arreglarlo. Entonces esta es una buena mejora. Entonces voy a pedirle que mejore en los gráficos y luego una opción para establecer alertas por correo electrónico Todo bien. Volvamos a nuestro aviso. Volvamos a la charla. Bien, así que aquí está nuestro último aviso. Déjame solo Mostrar mejor gráfico mostrar los datos del gráfico en la parte inferior. Y una alerta por correo electrónico personalizable basada en el aumento porcentual o el precio objetivo. Oh, lo siento, estoy bloqueando eso. Vamos a pasar eso. Así que aquí está mi nuevo aviso. Muestra la fecha del gráfico en la parte inferior y una alerta por correo electrónico personalizable en la parte inferior. Oh, ahora está mostrando el gráfico. Bien. Um con el tiempo, incluyendo hasta un año y todos los tiempos. Y una alerta por correo electrónico personalizable. Bien, veamos qué podemos hacer con esto. Y creo que si esto funciona, esta sería una buena oportunidad para implementar esto como una versión de lanzamiento uno para compartir con el mundo y obtener algunos comentarios. Entonces, los aprendizajes clave de la creación de esta aplicación son el uso de una API para mejorar la funcionalidad de su aplicación Y empezamos con un prompt muy básico mejorarlo con IA. Y luego reiteramos. Entonces ahí vamos. ¿Dónde está la opción de las alertas por correo electrónico aquí mismo para que podamos ver Bitcoin a lo largo de un año? Entonces hace un año estaba en 41 mil. Vamos a comprobarlo dos veces. Entonces los datos deberían ser los mismos porque está usando la misma clave API. Y debería poder establecer una alerta aquí dirección de correo electrónico. Si el precio objetivo va Bien, algo anda mal aquí. Mira, siguen siendo los gráficos siguen yendo a pesar de que hice clic en el pop up. Bien, entonces lo que haría es arreglar la función de alerta por correo electrónico y colocar el botón encima de los gráficos. Bueno, todo se ve bien. Es solo que la función de alerta por correo electrónico no funcionaba. Entonces tienes que probar tus operaciones, prueba prueba prueba. Entonces, algo que he aprendido en los últimos años son las pruebas de aceptación del usuario. Así que cada vez que creas una versión, definitivamente quieres probar todas las características principales de la aplicación para asegurarte de que algo no se rompa cada vez que hagas un cambio. Bien, se ve bien. Bien, vea que el botón se coloca en una zona diferente. Configúrelo para Dogecoin. Estableceremos una alerta por correo electrónico cuando Dogecoin esté en $0.60 va por encima Bien, no estoy seguro de lo que pasó ahí, tal vez por error, pero sí, creo que entiendes la idea, y es solo reiteración constante después Así que creo que en realidad logramos mucho en este video de 15 minutos, creamos un tablero de criptomonedas bastante bueno y configuramos en este video de 15 minutos, creamos un tablero de criptomonedas bastante bueno algunas alertas por correo electrónico que muestran los datos a lo largo del tiempo. Y si, espero que puedas inspirarte algo de esto. 10. Construir una aplicación que pueda transcribir audio: Oye, en esta lección, este video, voy a demostrar un nuevo tipo de app que en realidad puede transcribir textos de un archivo de audio Entonces este archivo de audio que voy a usar fue generado en realidad por Notebook LM de Google, que es un podcast de audio. Así que aquí está la aplicación. Se llama transcriptor de audio y video. Ahora mismo solo nos estamos enfocando en el audio. Y aunque sí tiene el campo para una URL de video que aún no está disponible, me gustaría llegar a ese paso. Pero lo que le he pedido fue incluir esta capacidad de subir videos o audio para poder hacer esta capacidad de subir videos o audio para clic aquí y de hecho pueda encontrar el WayFle Así que estamos empezando de cero aquí, y voy a encontrar una Wayfle Old Coin Summer Oh, creo que este es el de aquí. Entonces aquí hay un wayfle. Se puede ver que se está procesando. Entonces estoy usando otra API de plataformas. Se llama Asamblea AI. Rápidamente te mostraré el sitio aquí. Así montaje ai.com. Solo estoy usando el plan gratuito en este momento, y esto proporciona la funcionalidad de voz a texto, y permite distinguir entre el hablante. Entonces aquí vamos. Entonces podemos distinguir entre el orador A y B, y en realidad podemos copiar la transcripción para que podamos usar este texto generado en otro lugar Entonces, digamos, vamos a sacar un bloc de notas. Y sólo vamos a pegar aquí. Entonces esa es la transcripción. Bien, así que sólo voy a realizar ingeniería inversa. Bien, así que voy a repasar algunos de los aspectos más destacados de esta aplicación, y voy a desenfocar algunas de las partes que son confidenciales, es decir, las claves API Entonces comencé el baile de graduación muy simple, creé una aplicación que pueda tomar URL de YouTube y transcribirlas y proporcionar leyendas Y como te dije, aún no estoy ahí. Pero sí, me dijo que no es buena idea pegar claves API en esta ventana como una mejor práctica. Puedes hacerlo dentro del archivo ENV si vas al código y luego en el área ENV, aquí es donde realmente puedes pegar en la clave API solo como un Entonces creé la interfaz de usuario inicial aquí con el campo URL, el botón. Y si, ese era el borrador. Y luego me tomó un tiempo encontrar una clave API, una clave API que realmente pudiera digerir archivos de video o audio. Así que iba y venía bastante. Y en realidad, no fue hasta que encontré la IA de montaje. Le pedí que se actualice inicialmente, trato de usar algunas APIs de Google, y ese es un proceso continuo. Pero solo como versión uno, utilizo Assembly AI, y así ofrecen la API gratuita para tomar archivos de audio y transcribirlos, y permite copiar y pegar el texto Así que básicamente le dije que actualice para usar la API de Assembly AI, y en realidad lo hizo bastante sin problemas. Pero lo que no tenía era esta área para arrastrar y soltar videos de audio. Entonces le dije que permitiera al usuario subir archivos de audio o video. Entonces lo entendí bastante bien. Y a partir de ahí, tuve que darle más una iteración más. Y esa fue la aplicación debería permitirle distinguir entre Orador A y Orador B, así como copiar el texto. Y mira aquí está el aviso por aquí. Y si, eso nos lleva a donde estamos hoy. Entonces, ¿cuáles son algunos aprendizajes aquí? Entonces ambos son bastante poderosos. Es decir, la capacidad de tomar un video o audio y transcribirlo pero también para construir la interfaz Bolt lo entendió bastante bien. Y estoy bastante impresionado por la funcionalidad de arrastrar y soltar audio video y la capacidad de usar la API desde otra plataforma. Eso lo entendí bastante bien y la capacidad distinguir entre el Ponente A y B en la transcripción Eso viene de la API, pero tuve que decirle explícitamente a Bolt que lo hiciera y que nos permitiera copiarlo. Entonces esta es una buena versión de trabajo una de esta app. Ojalá en el futuro, pueda conseguir que la transcripción de la funcionalidad de video funcione, y pueda compartirla con ustedes. Y sí, entonces ese es un caso de uso diferente de usar bolt dot u para construir aplicaciones útiles. Ojalá esto te dé algunas ideas. 11. Cómo configurar la autenticación de correo electrónico: Bien, en esta lección en video, voy a cubrir cómo podemos construir la autenticación de correo electrónico usando Firebase Entonces tengo una aplicación existente aquí que está abierta en este momento. Es un bot de chat multi LLM o Cloe y Chat GBT. Y puedes simplemente usarlo abiertamente ahora mismo, pero quiero poner un email opt in. Quiero que la gente se registre antes de que puedan usarlo. Entonces lo que vamos a hacer es ir a un programa llamado Firebase Esto es propiedad de Google. Así que solo puedes inscribirte aquí. Voy a crear un nuevo proyecto. Yo solo lo llamaré chatbot. Voy a dar clic en Continuar. Y solo estoy usando la versión gratuita ahora mismo. Sólo voy a habilitar Google Analytics por defecto. Tienes que seleccionar una cuenta de Google Analytics. Sólo voy a seleccionar uno de mis ya existentes. Bien, Project está listo. Hagamos clic en Continuar. Bien. Entonces lo primero que queremos hacer es ir a Comenzar, y vamos a ir con una aplicación web. Y llamemos a este chatbot, y me registraré. Bien, entonces tenemos algún código aquí que podamos usar. Copiamos esto, pero aún no hemos configurado nuestra autenticación. Quiero decir, nuestra autenticación de correo electrónico. Así que vamos a hacer clic Nick continuar a Consola. Bien. Entonces ahora que hemos creado nuestro proyecto, hagamos clic en la autenticación. Todo bien. Vamos a hacer clic en Comenzar. Vamos a seleccionar correo electrónico y contraseña. Vamos a habilitarlo y permitir el enlace de correo electrónico contraseña menos iniciar sesión. Bien, así que esto te permite simplemente hacer clic en un enlace en tu correo electrónico sin usar una contraseña. Es un poco más de configuración, así que solo voy a desactivarlo por ahora. Haga clic en Guardar. Bien, entonces esto ya está habilitado. Todo bien. Entonces sí, hemos habilitado la autenticación de correo electrónico. Entonces, si hacemos clic en Usuarios, aún no vemos ninguno. Bien, entonces para implementar esto, hagamos clic en Descripción general del proyecto. Vamos a hacer clic en Configuración del proyecto. Y vamos a hacer clic en el proyecto aquí. Bien, entonces tenemos esta clave API web. Entonces estoy en Configuración del Proyecto General. Voy a copiar este código aquí. Vuelves a atornillar. Configura la autenticación de correo electrónico y contraseña usando Firebase y este código Todo bien. Sí. Todo bien. Entonces hay un problema potencial. No estoy seguro de si esto es un factor decisivo. Sólo vamos a necesitar probar esto para ver si este works@gmail.com. Bien, así que vamos a inscribirnos. Y puedes ver que tenemos este botón de cierre de sesión aquí. Entonces esa es una buena señal. Intentemos firmar. Y ahora intentemos iniciar sesión. Simplemente ingresaré una contraseña incorrecta solo para probar. Bien. Bien. Dice error de Firebase Entonces probablemente esta sea una buena señal porque la contraseña no coincide con lo que hay en la base de datos. Probemos ahora la contraseña correcta. Bien, eso funciona. Así que vamos a Firebase para ver si tenemos a nuestro usuario aquí. Así que vamos a la visión general del proyecto. Vamos a la autenticación, y podemos ver a los usuarios. Ahí está ese nuevo usuario que acabamos de crear. Bien. Entonces a partir de aquí, en realidad podemos restablecer, deshabilitar y eliminar la cuenta. Y sí, así es como implementamos sesión de autenticación de correo electrónico en tu aplicación. Entonces solo para resumir, fuiste a Firebase Creamos un nuevo proyecto, y creé un nuevo proyecto llamado Chatbot y configuré el método de inicio de sesión de autenticación Seleccioné el correo electrónico pero tienes otras opciones aquí. Acabamos de ir con el correo electrónico solo para que las cosas sean fáciles, y aquí tienes más opciones de configuración , por ejemplo, verificación de dirección de correo electrónico, que no configuramos, pero puedes pasar tu plantilla de reinicio, cambio de dirección de correo electrónico, etcétera, las cosas se vuelven un poco más complejas Y lo que hicimos fue que fuimos a nuestro resumen del proyecto. Y en realidad tenemos el código bajo General, y usamos este código aquí. Copiamos este código. Fuimos a atornillar y le pedimos que implementara la autenticación de correo electrónico, y la pegamos en el código. Se puede ver aquí mismo. Configura autenticación de correo electrónico y contraseña usando Firebase y este código, y prácticamente simplemente lo pego Lo probé, y funcionó, como podemos ver, dos usuarios en esta base de datos. Entonces sí, así es como puedes configurar la autenticación de correo electrónico. Bastante genial. 12. Cómo configurar la autenticación de Gmail: Vamos a intentar configurar la autenticación de Gmail para nuestra aplicación. Por favor mira el video anterior sobre cómo configurar el proyecto en Firebase, si aún no lo has hecho Sólo vamos a seguir usando el mismo proyecto que creamos en Firebase para el bot de chat, excepto que voy al proyecto Voy a hacer clic en Iniciar sesión Método. Vamos a agregar nuevo proveedor, y vamos a seleccionar Google. Vamos a dar click AB Bien. Queremos seleccionar una dirección de correo electrónico que se presentará a los usuarios. Bien, solo voy a solo seleccionaré mi dirección de Gmail. Bien. Voy a hacer clic en Guardar todo bien, así que esto está habilitado. Ahora volvamos al proyecto. Todo bien. Consigamos nuestro código. Volvamos a atornillar. Implemente la autenticación de Google usando Firebase y este código Y yo sólo pego los códigos. Vamos a darle una oportunidad a esto. Bien. Así que vamos a probar esto. Entonces tenemos este nuevo botón aquí, inicia sesión con Google. Pero es decir que esta acción de solicitud no es válida. Vamos a pedirle que lo arregle. Puedo ver que en los errores, hay algún tipo de bloque pop up. A lo mejor necesito Sí. Cookies de terceros de Altile. Bien, intentemos de nuevo. Error de Firebase. Déjame cantar bloques pop up. A lo mejor lo que podría hacer es probar otro navegador una vez que haya desplegado. Pero vamos a ver qué dice la pelota. Sigamos adelante y desplieguemos esto. Veamos los errores de que antes había dos errores. Parece que el error del bloque emergente se ha ido ahora. Vamos a implementar bien, probemos esta aplicación ahora Bien, probemos la autenticación de Google. No funciona. Vamos a probarlo en el navegador valiente. Dominio no autorizado. Todavía me estoy desautorizando Bien. Dime como arreglarlo. Necesito agregar este dominio a Firebase. Ve a Firebase, selecciona el proyecto, selecciona la configuración de autenticación, dominios autorizados. Probemos esto. Bien. Haga clic en la configuración de autenticaciones, dominios autorizados Sólo quiero asegurarme de que estoy capturando esto. Haga clic en agregar dominio, entrarnos en el ritmo. Bien, volvamos a atornillar. También es posible que desee agregar host local. No se necesitan cambios de código. Bien, vayamos a Vamos a agregar esta dirección IP. Así que en realidad puedes hacer preguntas de perno durante el proceso de solución de problemas. Aquí vamos. Ahora, intentemos esto de nuevo. Vamos a refrescarnos. Continuar con Google. Walla. Intentemos iniciar sesión en nuestra aplicación, usando Firebase. Y asombroso. Acabamos de agregar autenticación de Google a nuestra aplicación usando Firebase Y puedes ver aquí que tenemos este proveedor de autenticación de Google en lugar del correo electrónico. Entonces lo que hicimos solo para recapitular es para el método de firma, agregamos un nuevo proveedor, que es Google Tuvimos que ir a la configuración y autorizar dominios, y lo implementamos, y agregamos ese dominio desplegado para autorizar. También agregué una dirección IP adicional. Sí pedimos a ambos que implementaran la autenticación de Google. Sólo voy a encontrar ese aviso. Bien, aquí hay un aviso. Implemente la autenticación de Google usando Firebase y este código Entonces obtuve el código del proyecto el proyecto en Firebase Y luego tuve que solucionar el problema usando los errores que obtuvimos, y Bolt realmente ayudó Vayamos al último prompt aquí. Y se lo dije, todavía me sale un error diciendo dominio no autorizado. ¿Cómo soluciono esto? De hecho me dio una muy buena respuesta. De hecho, me dio la respuesta. Fui a firebase, fui a la configuración del proyecto, autorizó dominios, y funciona Entonces ahí vamos. Así es como agregamos la Autenticación de Google. 13. Creación del cuadro de diálogo de Paypal: Bien, así que aquí hay una aplicación de muestra con un muro de pago Pay Pal. Por lo tanto, describe las características que obtendrá si paga, y puede ver el contenido detrás de él. Y si hacemos clic en PayPal, va a abrir el cuadro de diálogo familiar que necesitas ingresar en la información. Así que vamos a dar un paso atrás aquí, y te llevaré de regreso a Boldt New Así que le pedí que creara una galería de miniaturas de videos de stock en mi Google Drive Cada miniatura debe ser un marco representativo. Así que solo quería crear una app básica que pudiera probar el paywall de PayPal Para implementar realmente mi idea, necesito acceder a la API de Google Drive. Así que acaba de crear una versión más simple de mi pregunta original. Y entonces lo que terminé haciendo fue que le pedí que usara PayPal. Así que solo te traeré de vuelta a ese aviso. De hecho, tomé algunos intentos aquí. Entonces este es el panel de desarrolladores de PA PL. Entonces, una vez que inicies sesión en tu cuenta, debes ir al modo desarrollador, y lo que necesitas hacer es obtener tu ID de cliente. Entonces, una vez que lo hayas configurado, te darán la posibilidad de probar un pago de prueba usando credenciales falsas. Y puedes ver aquí estamos en modo Sandbox. Este es el modo en vivo, pero quiero estar en modo Sandbox, y verás aquí Ahora, la información que necesitas está aquí abajo. Necesitas tus credenciales API, y puedes crear una app Y luego simplemente llámala como sea. Y lo que sucede después de hacer eso, obtendrá un ID de cliente que puede pegar en Bolt punto N para que aparezcan ese botón de pago de paypal que llegará a su panel de PayPal. Entonces eso en pocas palabras es cómo podrías implementar un botón de pago usando PayPal y esencialmente cómo podrías monetizar tu aplicación poniéndola detrás de un muro de pago para obtener acceso a alguna funcionalidad 14. Creación de la aplicación API de búsqueda profunda: Bien, estoy en el sitio web de Deep Seeves. Este es el competidor chino de IA para Open EI. Y solo checando, cuáles son las capacidades cruzan los modelos aquí. Entonces solo quiero que sepas que esta página existe en deepsk.com, así que conseguimos deepsk V tres Y honestamente, no sé qué significan todas estas estadísticas, pero básicamente están mostrando en términos de parámetros totales, los volúmenes más que Lama No listan HGBTs intentemos usar esto. De hecho puedes descargarlo en tu teléfono, y lo he probado y es bastante bueno. A veces es bastante lento. Y creo que hay mucho tráfico en estos momentos. Entonces entremos al chat. Entonces ya pregunté ¿cómo uso esta API en mi app? Bien, regístrate para obtener una cuenta, navega a la sección API, genera una clave, y Parece que nos dieron el código. Vamos a intentarlo. Vamos a intentarlo. Vayamos al sitio. Vamos a recargar aquí. $2. Solo usaré mi PayPal. Bien. Pago exitoso. Bien, así que he rematado 2 dólares. Vamos a crear una nueva clave API. Llamemos a un video. Entonces voy a eliminar esta clave API para cuando veas este video solo por seguridad. Y, um Empecemos con un nuevo prompt aquí. Quiero mostrarte cómo funciona esto. Crea un chat AI OG Deep busca API usando Well, usando este código. Voy a poner en la clave API más adelante para las prácticas de seguridad. Bien. Usando código Python. E ingresaré la clave API en más adelante. Bien, veamos qué sacamos de esto. Bien, entonces es decir, crea un archivo ENV y agrega tu clave API aquí Bien, entonces déjame agregar mi clave API. Voy a necesitar crear uno nuevo porque lo olvidé . Sólo para folk. Bien. Vayamos al Código. Vamos a IV. Bueno, tengo que hacer una caja. Todo bien. Déjame asegurarme de que creé. Bien. Sí. Entonces aquí es donde lo pondrías. Bien, vamos a probarlo. Bueno, algo no está funcionando. ¿Qué es una predicción de Bitcoin? Bien, eso parece prometedor. ¿Qué modelo eres? Bonito. ¿Cuál es el mejor lenguaje de codificación? Entonces voy a revisar mi cuenta de uso. Bien, desarrollo web Python. Solidez. Genial. Así que et me refrescar esto. Bien. Los datos pueden retrasarse 5 minutos. Bien, así que ahora que lo tenemos funcionando, vamos a crear un más crea una página visualmente amigable alrededor del asistente de chat. Mm hm. Entonces, lo que estamos haciendo aquí es que estamos haciendo estamos haciendo una aplicación de codificación de IA, pero estamos aprovechando la API de Deepsek así que, sí, podemos crear nuestro propio software como servicio Bien, nombra. Bien. Vamos a probarlo. Explicar la física cuántica. Vamos a expandirnos. Pensando bien, muy agradable. Voy a seguir adelante y publicar esto. Y si, para resumir para que esto funcionara, en realidad tuve que decirle que no funciona, así que arregló el asistente de chat Hizo varias correcciones importantes a la integración de API. Y eso es lo que lo hizo funcionar porque me tomó algunos intentos. Entonces, lo que esto realmente muestra es si estás recibiendo un error, dale ese error exacto para atornillar, y a veces es lo suficientemente inteligente como para solucionarlo Bien, así que voy a guardar eso. Abrir en stockblts crear un repositorio Eso es solo para después. Mm hm. Entonces lo que eso hace es, cuando creas ese repositorio, puedes usarlo fuera de bolt más tarde. Así que solo estoy empezando a crear repositorios de aplicaciones importantes Así que después podría reutilizarla en el futuro. Bien, ahora quiero desplegar esto. ¿Cuál es el mejor país nómada digital del mundo? Bien, Colombia. Interesante. México. Bien, voy a detenerlo ahí. Así que ojalá te haya resultado útil este video. 15. Cómo crear una aplicación de chat LLM con modelos múltiples con IA: Hola ahí. He construido un chat multi bot que puede usar varios modelos de IA aquí. Podemos ver que tenemos una larga lista, y esto sigue siendo experimental. Pero sí, creo que esto tiene mucho potencial, y quería compartirlo porque creo que es bastante alucinante, en realidad. Ves todos estos modelos de Microsoft Anthropic, Medama Google, Google Gemini Así que comencemos con Google Gemini y comencemos con Hello. ¿Cuáles son sus capacidades completas? Bien, vamos a ver. Generación de texto aprendiendo y adaptando. Traducir idiomas. Bien, entonces preguntémoslo a ¿Puedes traducir tu última respuesta al español? Oh, bien. Pensé que lo sabría. D. Traducir esto al español. Entonces le haré una pregunta matemática aquí. Bien. Vamos a hacerle una simple pregunta matemática aquí. Si estoy rentando un auto del 21 al 27 de diciembre. Mis llamadas diarias. ¿Esto es un buen trato? Todo bien. Cambiemos a CHAT EBT. Versión cuatro. Hacerle la misma pregunta. ¿Cuánto tiempo tardó en entrenar a Open Esa? Todo bien. Entonces, como pueden ver, tengo un bot de chat modelo multi idioma que funciona, y solo voy a mostrarte algunas de las indicaciones que utilizo para crear esto Sí, le pedí que diseñara un multi chatbot escalable que utilice los principales modelos de lenguaje de IA, di algunos ejemplos y luego usé el prompt mejorado Y entonces usé yo uso una plataforma llamada Open Router. Tengo una clave API. Pagué 5 dólares en créditos. Fui a las claves, y me dio una clave API que usé como clave API en mi aplicación bolt. Y también uso otro programa de IA llamado Perplexity. Entonces le pedí que implementara una API externa abierta. Y me dio el código aquí. Entonces copié este código en mi prompt. Y lo que dije fue una configuración básica, y pegué el código aquí mismo Déjame mover esto de nuevo. Sí, entonces la parte resaltada, puse ahí mismo, y luego la implementación completa. Copié la parte final. Paso cuatro, acabo de copiar justo ahí dentro aquí y allá vamos. Y luego pegué en mi clave API. Le dije que lo configurara, y ahora tengo un bot de chat multi bot. Entonces el último paso es, solo quiero desplegar esto y guardar mi progreso para después porque bastante contento con esto para alguien que no codifica. Bien, así que una vez que lo despliegue, tendré una URL, y de hecho puedo compartirla con otras personas y mejorarla a partir de ahí 16. Cómo crear una aplicación para compartir viajes con la integración de Stripe: Bien. Esta es una aplicación interesante aquí. Esta es una aplicación para compartir viajes bastante básica que usa la API de Google Maps. También cuenta con integración de rayas. Y entonces lo que puedes hacer aquí es escribir la dirección, la ubicación de inicio, el destino. Te mostrará los conductores disponibles y la cantidad, la cantidad de tiempo, y luego podrás confirmar tu viaje. Entonces solo voy a hacer una demostración de esto solo voy a poner Gramble Islands. Y luego elegiré los aeropuertos. En realidad necesitamos refrescarlo, así que partimos de cero. Bien, entonces empieza en Nueva York, pero voy a poner a Granville Islands Voy a elegir un destino lejano Stestono, $25. Nos muestra los conductores disponibles. Esta es solo una versión básica. Hay muchas mejoras que puedo hacer. Pero acabo de configurar el viaje confirmado para que vaya a Stripe. Entonces, para Stripe, déjame difuminar esto. Solo estoy en modo de prueba aquí, y he usado mi clave publicable para probar Eso es para probar este paseo de confirmación. Entonces va a llegar a este pago ahora, y no está activo, pero puedes ver aquí, el pago es exitoso. Tu paseo está confirmado. Entonces esta es una aplicación básica para compartir viajes. Solo te mostraré algunas indicaciones clave aquí. Así que creo una aplicación completa para compartir viajes similar a Uber, y utilicé un prompt mejorado, y agregó muchas características adicionales que aún no están aquí. Por lo tanto, autenticación de usuarios, seguimiento de ubicación en tiempo real, sistema de reserva y correspondencia de viajes, procesamiento inAppPayment A requisitos técnicos, aquí están estas API, así que utilizo la API de Google Maps. Diseño responsivo. Sí. Entonces todas esas cosas son extra, y Bolt regresó y dijo: Aquí hay algunas limitaciones. Nos quieres y sugirió dos alternativas. ¿Quieres solo el front-end o una versión simplificada? Entonces pedí crear una versión básica, y también dijo que necesitan una API de Google Maps. Y entonces aquí es donde solo voy a ir a la parte donde realmente necesitaba poner en la clave API. Entonces fui a Google Maps, y, sí, lo que necesitas hacer es que realmente necesitas obtener las claves de Google Maps. Y esto es un poco de laberinto, pero vas a clave y credenciales, y luego obtienes tu clave API, que no voy a mostrar. Pero aquí es donde obtienes la clave API. Entonces esto le dio a la funcionalidad de mapeo por aquí. De lo contrario no funcionaría. Y luego a partir de ahí, le pedí que cambiara ese botón de confirmar escribir como enlace de pago a Stripe. Y ahí es donde obtuve la clave API publicable de Stripe Así que solo te mostraré el aviso aquí. Entonces yo solo dije, Haz el botón de confirmar escritura, ve al botón Stripe pay. De hecho, eso lo escribí mal. Pero luego más tarde me pidió la clave API real que proporcioné más adelante. Y ahí es donde hoy llegamos a la app. Entonces es una aplicación simple, pero sí requiere el uso de dos API, la API de Google Map, así como la clave API publicable Stripe en modo de prueba Y como dije, esta es solo una versión muy temprana. Es un simulacro, y se pueden hacer muchas mejoras en esto. Pero en realidad leí que las aplicaciones para compartir viajes también usan la API de Google Map. Entonces de ahí es de donde saqué la idea. Entonces, ojalá esto pueda dar inicio a algo de creatividad, algunas ideas tuitas para construir una aplicación para compartir viajes o cualquier tipo de aplicación que requiera alguna funcionalidad matemática. A lo mejor esto pateará algunas ideas tuviste. 17. Cómo crear pong con codificación de IA: Bien, voy a hacer una demostración de un juego muy sencillo al igual que Pong Entonces son dos tenis D. Pero he añadido un poco de giro. Puedes agregar los nombres de los jugadores y elegir una selección de perfil. Así que empecemos por aquí. Greg, y yo solo agregaré una selección de perfil. Y pondremos Kasey Elige una púa elige esta Y luego iniciaremos el juego y la barra espaciadora para comenzar. Entonces los controles están por debajo. Entonces W y S es para el jugador uno. Arriba y abajo es para Casey, jugador dos. Así que aquí sólo voy a jugar contra mí mismo. Pero como pueden ver, aquí tenemos un juego de pong muy sencillo, y tenemos las selecciones de perfil. Así que agrega un poco de personalización y ahí tenemos un efecto de sonido. Y el juego subirá a algo así como el 11. Entonces este es el juego del Pong. Así que sólo voy a cerrarlo. Probablemente debería agregar una característica para detener el juego. Pero voy a ir entre bastidores y te mostraré mis indicaciones. Bien, así que empecé con un prompt, crear un juego de tenis de dos D como Pong Y luego usé el prompt mejorado para llegar a algo que fuera más detallado. Así que vamos a ir al aviso, y te voy a mostrar a lo que me refiero. Crea un dos crea un juego similar a Pong. Y la IA es lo suficientemente inteligente como para reconocer un juego como Pong, y luego puedes hacer clic en el icono aquí para obtener un aviso mejorado. Entonces puedes ver ahí que realmente se expande en esa solicitud de una línea, y esa es la salsa mágica ahí mismo. Entonces ese fue mi primer aviso. Entonces seguí adelante e hice datos para enfocarme en la izquierda. Y luego vi la primera versión, y ahí es donde tengo mi segundo prompt. Permitir la posibilidad de agregar al jugador uno y dos nombres y agregar una selección de perfil. Entonces este cuadro de diálogo que ves aquí es lo que vino de ese segundo prompt, e hizo un trabajo bastante bueno exactamente lo que necesitaba. Y si, eso es todo. Desplegé la aplicación a esta URL, y ese es un juego sencillo que tenemos. O sea, puedes usar tu imaginación para hacer esto más complejo. Probablemente podrías pedirle que cambie algunos de los colores. A lo mejor quieras alargar el remo o dar la posibilidad de personalizar el tamaño de la misma. Entonces puedes usar tu creatividad para hacerlo más interesante, pero esto es solo un ejemplo básico de cómo puedes hacer un juego de pong, un juego de dos D pong usando Bolt Nu. Tal vez quieras usar esto como inspiración para crear un juego similar o incluso otro usando algunas de las ideas aquí. Entonces, ojalá, esta lección en video te ayude y te inspire a crear algunos de tus propios juegos usando codificación de IA 18. Cómo crear invasores espaciales usando grok 3: Bien, así es como hice el juego Space Invaders usando Grock y No es perfecto. Hay algunos bichos. Fuera. Tengo un control deslizante de música. Todo bien. Déjame mostrarte el código de BoltoTu Bien, juego Space Invaders Entonces este es un juego HTML cinco, y obtuve el código de Grock Así que pedí crear código HTML para un tipo de juego Space Invaders Y así me dio este código aquí. Y entonces simplemente traje este juego para atornillar. Simplemente encienda el volumen aquí. Entonces le pedí que creara un juego tipo HML Space Invaders usando este código, y prácticamente pegué el Y luego puse algunas indicaciones adicionales. Yo le pedí que creara algunos sonidos. Entonces fui al sitio opengamear.org, y luego Encontré sonidos para disparar. Y cuando golpeas cuando golpeas a un alienígena. Entonces pongo esta silla pronta. Usa el sonido de la música. Usa el sonido para disparar. Y luego pedí poner un deslizador de música. Haz un control de música de volumen, y luego usa el sonido uno golpeando a los alienígenas. Y luego desplegé la aplicación. Hagámoslo más grande. Ahí vamos. Ahora está funcionando. Es un poco buggy. Ahí vas. Ya tienes la idea. Creo que aquí hay algún potencial. Entonces así es como usamos Grock en conjunto con Bolton U para crear un HTML cinco en el juego Space Invaders 19. URL amigable: Bien, ahora que has implementado tu app, quiero darte alguna orientación sobre cómo implementarla con una URL fácil de usar. Entonces en este ejemplo, he desplegado un clon de una app de AirBME, y estoy usando Go Daddy como mi administrador de dominios Entonces te voy a mostrar cómo lo señalo usando mi propio subdominio a la URL que te da con NetLFI Así que vayamos a NetFig al sitio AirBnB. Entonces en el índice, si vas al código, está en la línea siete. Quieres cambiar este título a lo que querías mostrar. De lo contrario, va a exhibir VIT más React, ¿verdad? Probablemente no quieras eso, así que quieres cambiar en el código. Una vez que golpees la estratagema, vas a querer ir al sitio de Net Loofy Y a partir de ahí, puedes ir a tus sitios. Entonces voy a ir al BNB uno. Simplemente haga clic ahí. Entonces te estás enfocando en el paso dos. Entonces vas a necesitar un dominio existente. Si no lo haces, en realidad puedes comprarlo directamente desde aquí. Pero tengo uno existente, así que vamos a ir a la configuración del sitio. Entonces aquí es donde realmente puedes cambiar el nombre del sitio a lo que quieras. Entonces esta es la forma más fácil de hacerlo. Vas a conseguir algo como, por ejemplo, B&B six oh four dot netloofy dot app, y toma un hecho Así que de inmediato, vas a tener una URL mejor que la que te dieron originalmente. Bien, entonces entonces una vez que tengas esa URL solo marca espeluznante, guárdala en alguna parte Voy a ir a Go Daddy, Domain Management. Entonces este es el dominio que voy a usar. He creado un subdominio de reenvío. Entonces puedes agregar vadeo, y yo podría escribir lo que sea un B&B. Y aquí es donde pondría esa URL neta de Lape Entonces, si volvemos al sitio, yo pegaría este nombre aquí. Justo ahí dentro. Y luego le pegaríamos a Guardar. Entonces eso significaría efectivamente airbnb, una academy.com creativa luego reenviaría a esta aplicación que veas lo he hecho con B&B. y así si tecleo BNB creative academy.com Bien. Entonces debería llevarnos directamente a nuestro sitio. Oh, ahí vamos. Entonces BnB dot a creative academy.com, luego reenvía al B&B six oh fourntloofe Entonces ese es tu primer paso para usar tu propio dominio que reenvía a un Neto L automáticamente. Y creo que esta es la mejor manera de implementar y compartir tu app. 20. Nombre de dominio dirigido a netlify: Pero sí, entonces déjame llevarte a Net Lape. Entonces después de que lo desplegamos, por defecto, va a este proveedor, que puedes ver, y estos son mis diferentes sitios. Por lo que hago clic aquí. La fruta más fácil de colgar es hacer clic en la configuración del sitio. Puede cambiar el nombre del sitio. Entonces lo cambié a Trump y Melanin. Entonces no quiero cambiar esto porque verás que compré un nombre de dominio de Go Daddy, que apunta a este sitio. Bien, así que voy a mostrarte el dominio que obtuve. Entonces Trump y Milania coin.com. Esa es en realidad la ortografía correcta. Entonces compré este dominio a Go Daddy, y simplemente uso el enlace de dominio Ford y lo reenvié el enlace de dominio Ford a cualquier lado en la parte inferior. Ahí es donde pegué en la URL de Netfy. 21. La página de aterrizaje de Trumpcoin: Hola, y bienvenidos a un tutorial que te va a mostrar cómo creé esta página de revestimiento Trump una moneda milenaria que tiene un email opt in en la parte superior, usando una plataforma de email marketing llamada Kit Y aquí tenemos una imagen, cual creé con IA. Y tenemos un botón de compra que irá a digamos referencia al exchange de cripto. Tenemos precios en vivo del token, también cambio porcentual, la capitalización de mercado. Y también tenemos precios para el token de la esposa de Trump, la moneda Milania Entonces sí, te voy a llevar detrás de escena de cómo se creó esto. Así que comencemos con la parte superior. Yo uso software de ConvertKit, también conocido como kit ahora Por lo que tienen la capacidad de crear un opt en forma. Y si vas a crecer las páginas de revestimiento, puedes crear una página de forro. Puedes elegir diferentes estilos. Entonces este es solo uno que se sienta en la parte superior. No es demasiado intrusivo. Pero aquí puedo conseguir informes. Acabo de configurar esto anoche, así que muy nuevo. Y sí, esto me permitirá capturar direcciones de correo electrónico a las personas que llenan esto en este de aquí. Entonces, por ejemplo, me inscribiría aquí. Recibiría un correo electrónico en mi bandeja de entrada para confirmarlo. Bien, y entonces este botón de compra en realidad irá al sitio aquí para comprar el cripto. Y ahora, este precio, esto viene a través una API de Coin Gecko, Por lo que ofrecen una API gratuita que te permite obtener precios así que si ves aquí, 50.56 dólares, el precio debería ser bastante similar ¿Todo bien? Entonces de ahí viene la información de precios, todas las cifras. Y ahora déjame llevarte detrás de la codificación real de IA. Entonces comencé con este aviso, construí una página de revestimiento, y está mal escrito, lo sé Muestre el precio de Tromcin utilizando esta URL con opciones de alerta por email Así que en realidad tomé esta URL y luego se la alimenté a ambos. Lo entendí, incluso con el error ortográfico. Por lo que creó la página de revestimiento. Bien, así que el siguiente aviso fue integrar el formulario aquí Así que probé JavaScript. Entonces esto es desde mi plataforma de email marketing. Entonces te dan este código aquí para copiarlo y ponerlo en un sitio web. Pero para perno, acabo de decir, integrar este opt en forma, y luego pegué el código Decía que en realidad lo ejecutaba. Lo implementé, pero al principio no trabajé. Entonces intenté usar el HTML entonces básicamente le di el mismo prompt y luego lo pegué en el HTML Entonces solo te muestra que a veces solo necesitas ser persistente y probar un par de opciones diferentes. Entonces eventualmente, la forma funcionó, y está en la parte superior. Y luego le di una imagen. Entonces creé esta imagen usando Wix. Wix tiene un creador de imágenes de IA. Así que pude crear una entrada de blog, en realidad. Muy bien, entonces este es mi sitio de blog, y de hecho le di la dirección de copia de imagen del enlace directo porque si solo subes una imagen, a ambos no parece gustarle, así es como agregué la imagen del encabezado. Entonces le di el prompt, agregué esta imagen al encabezado y pegué la URL, la dirección de la imagen. Bien, entonces eso empezó a darle algo de forma a nuestro proyecto. Tuve que ir un poco de ida y vuelta, y finalmente me bifurqué en otro proyecto Y se puede ver que aquí en el proyecto Trump coin price tracker landing page bifurcado Bien, así que lo que hice fue solo desplegarlo. Lo despliqué a la UL de Netfi. E incluso una vez que lo implemente, aún puede hacer cambios. Pero a veces es necesario desplegarlo para probarlo realmente. Entonces quería hacer cosas como agregar un video. Quería probar el correo electrónico opt in. Lo cual sigue siendo un trabajo en progreso, por cierto. Y después quería añadir una segunda ficha, la moneda de Milania Y no estoy seguro de si el prompt se está mostrando aquí. Pero le di la misma URL del sitio. Entonces dije, mostrar precios en vivo para la moneda Milania, y luego le di la URL Entonces eso no se muestra aquí. Entonces así es como conseguimos el precio aquí. Este video tutorial es un progreso de trabajo, pero como aún no he desplegado esta versión bifurcada, no se muestra en la aplicación publicada Entonces la aplicación publicada está en NetfiEste es el sitio subyacente Trump y ManicinNTLAF En realidad, darse cuenta de que la URL del dominio está mal escrito. Pero sí, entonces déjame llevarte a Net Lape. Entonces después de que lo desplegamos, por defecto, va a este proveedor, que puedes ver, y estos son mis diferentes sitios. Por lo que hago clic aquí. La fruta más fácil de colgar es hacer clic en la configuración del sitio. Puede cambiar el nombre del sitio. Entonces lo cambié a Trump y Melancin. Entonces no quiero cambiar esto porque verás que compré un nombre de dominio de Go Daddy, que apunta a este sitio. Bien, así que voy a mostrarte el dominio que obtuve. Entonces Trump y Milania coin.com. Esa es en realidad la ortografía correcta. Entonces compré este dominio a Go Daddy, y simplemente uso el enlace de dominio Ford. Y adelante a cualquier lado en la parte inferior. Ahí es donde pegué en la URL de Net Liffe. Entonces sí, eso en pocas palabras es el flujo de trabajo completo ahí para este sitio aquí Así que hemos implementado un correo electrónico opt in. Hemos agregado una imagen personalizada. Tenemos un botón de llamada a la acción. Entonces eso en realidad fue un aviso. Yo no pasé. Entonces básicamente dije, agrega un botón de compra con esta URL y dale esta redacción, compra en crypto.com Entonces por eso lo hice para el botón. Y el precio que obtuve del sitio de monedas Gecko usando la URL de ese activo específico, que te mostré para moneda de tranvía y moneda milenaria Y luego te muestro cómo podemos darle una presentación más agradable con una URL adecuada que se reenvía desde Netlify, que es la plataforma por defecto que también publica BaloTN Así que eso debería cubrir un flujo de trabajo completo. Esta es una página de alineación que está destinada a proporcionar información de precios, información de compras y también recopilar algunas direcciones de correo electrónico. 22. Recapitulación de las lecciones aprendidas: Muy bien, así que te mostré algunos ejemplos de cómo construimos diferentes aplicaciones Construimos una aplicación que muestra a los individuos más ricos. Construimos una aplicación de puntuación de golf. que puedas ver lo importante que es asegurarte de que tu prompt o tu input sea lo más específico posible, o simplemente puedes comenzar, pedirle que construya una app sencilla. Y reiterar, lo que significa básicamente mejorar tu app una vez que realmente la veas. Te mostré cómo podemos adjuntar un PDF con algo de referencia para comenzar. Si quieres copiar una aplicación existente o mostrarle algo. También te he enseñado cómo puedes usar el ícono de IA para mejorar tu prompt, que es súper poderoso. puede ver cómo hizo que mis simples indicaciones fueran mucho más detalladas Y también demostré cómo puedes conectar tu app a bases de datos existentes usando APIs. También te mostré cómo en el prompt, puedes reiterar simplemente viendo lo que crea y luego viendo cualquier mejora potencial, y luego simplemente usando un inglés simple para pedirle que agregue características adicionales. También te he enseñado cómo puedes deshacer tu prompt si de alguna manera logras romper algo y quieres volver a la versión anterior Por último, te mostré si estás contento con tu app y quieres crear una versión, cómo puedes implementarla haciendo clic en el botón Deploy, que hará un enlace público que podrás compartir con amigos o compañeros para obtener algunos comentarios. 23. Resumen de codificación de IA hd: Así que esto concluye nuestro curso de choque sobre codificación de IA para principiantes. Esto es solo el comienzo, y también estoy continuando mi viaje. Hemos aprendido cómo podemos usar Bol Dog New para usar nuestros prompts, nuestras ideas, nuestra creatividad, para crear diferentes tipos de aplicaciones Y te recomiendo solo jugar y compartir tus aplicaciones con tus amigos, obtener algunos comentarios y ver qué tipo de aplicaciones puedes crear. Cuando eché un vistazo a esto, me asombró que pude crear una aplicación de puntuación de golf y una aplicación que crea un tablero con diferentes monedas extranjeras, haciéndola personalizable Entonces, cualquiera que use esto podría personalizar su tablero de instrumentos entre las diez ciudades habitables, por ejemplo, pudiendo personalizarlo para diferentes ciudades o para una aplicación de puntuación de golf, diferentes jugadores Y creo que el límite es realmente tu creatividad. Sin embargo, esta aplicación es solo un punto de partida. Si quieres construir aplicaciones complejas, puedes mirar a diferentes plataformas como Cursor. Y recuerden, esto es solo el comienzo, predigo que habrá más mejoras, diferentes plataformas, más competencia. Pero las habilidades centrales van a ser tus prompts, ser capaces de reiterar tu creatividad y referenciar usando diferentes aplicaciones para comenzar con ideas existentes y poder conectarte a diferentes bases de datos o Entonces espero que hayan disfrutado de este curso, y echen un vistazo a algunas de mis otras ofertas y gracias por tomar el curso. Espero que hayas aprendido mucho.