Tutorial de codificación en Vibe: cómo crear aplicaciones y software con IA generativa

1. INTRODUCCIÓN: Chicos santos, ¿te interesa la codificación de vibra? ¿Te interesa crear aplicaciones y software usando IA generativa Si la respuesta es sí, entonces este curso podría ser para ti. Vamos a construir muchos proyectos, chicos. En primer lugar, vamos a crear un documento de requerimiento de producto usando Miro y Microsoft Copilot A continuación, vamos a construir un planificador de viajes con IA usando Lovable. Mira esto. A continuación, vamos a construir software de optimización logística usando Bolt New. Mira esto. A continuación, vamos a construir un software de reserva de citas usando Cloud. Mira esto, y vamos a construir el mismo software usando Github Copilot Mira esto. Muy chulo. A continuación, vamos a construir software de análisis de datos utilizando Emergente. Por lo que el usuario podrá subir un archivo CSV, y el sistema va a analizar y visualizar los datos automáticamente. A continuación, vamos a construir un sistema de administración de propiedades usando Base44. Mira esto. A continuación, vamos a construir software de gestión de nóminas usando Firebase Studio A continuación, vamos a construir software de gestión de residuos utilizando plet. Cuenta con cuatro características principales: programación, seguimiento, solicitud y análisis. Mira esto. Muy genial, ¿verdad? Entonces después de eso, vamos a construir una aplicación de aprendizaje de idiomas usando Vzero Tiene tres características principales, lecciones interactivas de vocabulario, cuestionario diario y análisis de progreso. A continuación, vamos a construir una aplicación de gestión de gastos usando Rork. Mira esto. Entonces después de eso, vamos a construir un sistema de gestión escolar usando Google AI Studio. A continuación, vamos a construir software de análisis de marketing utilizando cliente. Mira esto. tres características principales: rendimiento de la campaña, seguimiento de presupuestos y perspectivas de segmentación de clientes Y también vamos a desplegar nuestra app en Netifly. Mira esto. 2. Creación de un documento de requisitos de productos con Miro y Microsoft Copilot: Chicos santos, bienvenidos de nuevo al curso. En este video, vamos a crear un documento de requerimiento de producto utilizando dos herramientas de IA. El primero es Miro y el segundo es Microsoft Copilot Bien, comencemos. En primer lugar, deberá iniciar sesión, así que hagamos clic en esto. Y voy a iniciar sesión usando mi cuenta de Gmail. Como ustedes pueden ver, he iniciado sesión con éxito y aquí está mi panel de control. Bien, ahora, hagamos clic en Crear nuevo proyecto. Bien, ahora vamos a utilizar la IA para crear el documento de requisitos del producto. Hagamos clic en esto y hagamos clic en Doc. Bien, ahora vamos a escribir el baile de graduación, escribir un documento completo de requisitos de producto para el software de planificador de viajes AI. Entonces ese es el proyecto que vamos a construir. Eso incluye tres características principales. El primero es el generador de itinerarios de IA. La segunda característica es el vuelo barato y Buscador de hoteles. Y el tercer montador es Budget Tracer vacacional. Explicó los objetivos del usuario objetivo, flujo de usuarios, los requisitos técnicos, las fuentes de datos, las funcionalidades de IA, el diseño de bases y las necesidades de integraciones para cada montador Bien. Ahora, hagamos clic en Generar. Bien, ahora, la IA está generando el documento de requerimiento del producto. Tomará unos segundos, tal vez cinco o 10 segundos. Esperen chicos. Ojalá no tarde demasiado. Bueno, no tardó mucho, chicos. Solo tardó un minuto o tal vez 2 minutos. Bien, aquí está el documento de requisitos del producto para el planificador de viajes AI. Entonces tenemos resumen ejecutivo, y vamos a desplazarnos un poco hacia abajo. Tenemos metas de alto nivel y métricas de éxito. Entonces esto es como los indicadores clave de desempeño del KPI. Y tenemos usuario objetivo y personas. Tenemos características del producto. Hay tres características principales, generador de itinerarios AI, vuelos baratos y buscador de hoteles y rastreador de presupuesto vacacional. Bien, la primera característica es el generador de itinerario. Por lo tanto, tenemos flujo de usuarios, requisitos funcionales, fuentes de datos de requisitos no funcionales, funcionalidades de IA, diseños de bases de datos e integraciones Bien, aquí está el segundo grillete, y vamos a desplazarnos hacia abajo, y aquí está el tercer grillete, trazador de presupuesto vacacional Bien, muy genial. Bien, a continuación, vamos a probar la segunda herramienta de IA. Vamos a usar Microsoft Copilot. Bien, en primer lugar, tendremos que iniciar sesión. Así que hagamos clic en esto, y voy a iniciar sesión usando mi cuenta de Gmail, pero también puedes iniciar sesión usando tu cuenta de Microsoft o Apple ID. Como ustedes pueden ver, he iniciado sesión con éxito. A continuación, voy a copiar y pegar el baile de graduación, así que vamos a usar el mismo baile que usábamos anteriormente. Bien, aquí está el prompt y hagamos clic en Generar. Bien, vamos a desplazarnos por el documento de requisitos del producto para AI Travel planner SAS. Tenemos la visión general, tenemos metas y objetivos. Tenemos usuarios objetivo. Por lo que hay tres características principales, generador de itinerario AI, vuelos con chip y buscador de hoteles y traker de presupuesto vacacional Y aquí está el flujo de usuarios sobre las ejecuciones de planeación de abordaje. Contamos con cinco funcionalidades de IA, agregador de precios de agente itario, pronosticador de presupuesto, agente de personalización y debate multiagente y debate multiagente Y aquí está el diseño de la base de datos. Mira esto. Y aquí están las integraciones. Hay dos partes. La primera son las integraciones con API externas, y la segunda parte son las integraciones con servicios internos A continuación, tenemos requisitos técnicos, backend frontend def ¿Qué más? Contamos con fuentes de datos, seguridad y cumplimiento y futuras extensiones. Bien, muy genial. Puedes copiar y pegar esto y guardarlo en tus Google Docs. Bien, creo que ya está. Eso es todo lo que necesitas 3. Crea un sitio web de planificador de viajes con Lovable: Hola, chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir el primer software usando Lovable Bien, comencemos. En primer lugar, voy a iniciar sesión usando mi cuenta de Gmail. También puedes iniciar sesión usando tu cuenta de Github. Depende totalmente de ti. Como ustedes pueden ver, he iniciado sesión con éxito. Y si estás en la cuenta gratuita, obtendrás cinco créditos todos los días. Bien, comencemos. En primer lugar, voy a escribir el prompt. Construye un planificador de viajes AI SS con tres trabillas principales. El primero es el generador de itinerarios de IA. El segundo es el buscador de vuelos baratos y hoteles. Y la tercera característica es el trazador de presupuesto vacacional. Haga que el diseño de la interfaz de usuario sea moderno y colorido. Si tiene algún archivo de apoyo, puede adjuntar el archivo aquí. También puedes importar inspiraciones de diseño de UI desde FICMA y puedes configurarlo al público, para que todos puedan ver tu Pero si no quieres que otras personas vean tu proyecto, puedes configurarlo a personal o privado. Bien, vamos a hacer clic en esto. Vamos a hacer clic en Generar. Y tardará unos minutos, tal vez dos o 3 minutos. Así que esperen, chicos. Ojalá no tarde demasiado, y estoy muy emocionada de ver el resultado. Bueno, no tardó demasiado. Solo tardó 2 minutos o tal vez 3 minutos. Bien, aquí está el sitio web. AI de viaje. Planifica tu aventura perfecta. Y vamos a desplazarnos hacia abajo. Hay tres características principales, AI ItineryGenerator, budget tracker y buscador vuelos y hoteles Bien, hagamos clic en esta T ahora, e ingresemos a los destinos. Voy a visitar Austin, Texas, e ingresemos las duraciones de dos días, y hagamos clic en Generar itinerario. Bien, tardará unos segundos. Bien, aquí está el itinerario generado por IA. Entonces aquí está el itinerario para el primer día. Y vamos a desplazarnos hacia abajo, y aquí está el itinerario para el segundo día. Bien, muy genial. Probemos la segunda característica. Rastreador de presupuesto. Hagamos clic en esto e ingresemos el monto presupuestal. $2,500. Entonces ese es mi presupuesto total. Y agreguemos gastos. Total 600, y vamos a hacer clic a expensas. Y agreguemos otro gasto. Compras, 570 dólares. Vamos a hacer clic en Gasto. Como ustedes pueden ver, tenemos un gráfico circular. Muestra el porcentaje por su gasto. Muy chulo. Y la tercera característica es el buscador de vuelos y hoteles. Por lo que el usuario podrá ingresar a la ciudad de salida, ciudad destino, fecha de salida y hacer clic en vuelo SRT Bien, ahora vamos a hacer clic en esto. Aquí está el código, por lo que Lovable uso mecanografiado. Como ustedes pueden ver, el formato de archivo es TSX. Bien, ahora vamos a publicar este sitio web. Haga clic en esto, haga clic en Publicar. Tomará unos segundos, tal vez cinco o 10 segundos. Así que solo esperen chicos. Ojalá no tarde demasiado. Bien, hemos publicado con éxito este sitio web. Entonces aquí está el enlace. Vamos a copiar y pegar esto, y vamos a abrirlo en la otra pestaña. Bien, aquí vamos. Bien, aquí está el sitio web. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. 4. Cómo crear un software de optimización logística con Bolt: Hola chicos, bienvenidos de nuevo al curso. En este video, vamos a construir software de optimización logística usando Bolt New. Bien, comencemos. En primer lugar, voy a iniciar sesión usando mi cuenta de Gmail, pero también puedes iniciar sesión usando tu cuenta de Github. Depende totalmente de ti. Vamos a hacer clic en Continuar. Bien, hemos iniciado sesión con éxito, y ahora vamos a escribir el baile de graduación. Construya software de optimización logística con tres montadores principales El primero es el optimizador Rot. El segundo montador es la gestión de inventario. Y el tercer montador es Cost Analytics. Asegúrese de que el usuario pueda ingresar a las ubicaciones originales. Destinos. Tipos de productos y costos de envío. Mira, no, hagamos clic en Construir ahora. Bien, tardará unos segundos. Así que solo esperen, chicos. Ojalá no tarde demasiado , y estoy muy emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Solo tardó 2 minutos o incluso menos de 2 minutos. Bien, aquí está el software de optimización logística. Tenemos tres características principales, optimizador de raíz, administración de inventario y análisis de costos Así que entremos en las ubicaciones originales. Ostende, entremos en los destinos. Entonces ingresemos el tipo de producto, muebles, e ingresemos el costo de envío. Y hagamos clic en Optimizar Raíz. Bien, a continuación, hagamos clic en la gestión de inventario. Este es el segundo montador, por lo que puede agregar el tipo de producto, por ejemplo, electrónica, y vamos a especificar las ubicaciones, almacén B. Agreguemos cantidad, diez, y el costo unitario es de $35, y el nivel de reorden Y hagamos clic en Agregar al inventario. Como ustedes pueden ver, este producto ha sido agregado al inventario. Y vamos a hacer clic en Cost Analytics. Bien, agreguemos la entrada de costos. Ingresemos el ID de envío. Ingresemos el costo total $200. Sólo un número aleatorio, chicos. Ingresemos el costo de mano de obra $100, ingresemos el costo de mantenimiento. Y hagamos clic en Agregar entrada de costo. Bien, aquí está el desglose de costos. Tenemos gasto total, costo promedio por envío, costo total de campo y costos totales de mano de obra. Bien, muy genial. Y vamos a hacer clic en esto. Entonces aquí está el código. Como ustedes pueden ver, usan mecanografiado. Y ahora vamos a publicar este sitio web. Entonces, hagamos clic en esto y hagamos clic en Publicar. Tomará unos segundos, tal vez diez o 15 segundos. Así que solo esperen chicos. Ojalá, no tarde demasiado. Bien, ya casi está hecho. Bien, aquí está el enlace. Entonces copiemos el enlace, y vamos a abrirlo en la otra pestaña. Bien, aquí está el sitio web. Optimizador Logístico. Bien, muy genial. Creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Chico, 5. Creación de un software de reserva de citas con Claude y Github Copilot: Chicos santos, bienvenidos de nuevo al curso. En este video, vamos a construir un software de reserva de citas utilizando dos herramientas de IA. El primero es código y el segundo es Github Copilot Bien, comencemos con Cloud. En primer lugar, deberá iniciar sesión. Puedes iniciar sesión usando tu cuenta de Gimil. Bien, a continuación, vamos a escribir el baile de graduación. Crear software de reserva de citas. Asegúrese de que el usuario sea capaz de seleccionar la hora, la fecha, en las notas. Habrá recordatorio para próximas citas. Y después de que se reserve la cita, se debe agregar a las sesiones del calendario del usuario. Mira, ese es mi baile de graduación. Y hagamos clic en Generar. Bueno, no tardó mucho, chicos. Solo tardó 2 minutos o incluso menos de 2 minutos. Así que tenemos cuatro características clave. El primero son las selecciones de fecha y hora. El segundo no son secciones. El tercero es Smart Reminders, y el cuarto es la vista de calendario Bien, probemos esto. Hagamos clic en Reservar cita e ingresemos el título de la cita. Consultoría. Seleccionemos la fecha. Ingresemos a la hora 2:30 P.M. Y agreguemos las notas. Sesión de Consultoría en Cadena de Suministro. Y hagamos clic en Reservar cita. Como ustedes pueden ver, esta cita ha sido editada aquí. Bien, muy genial. Si desea publicar este software, simplemente haga clic en este Publicar, y hagamos clic en Publicar y copiar. Tardará unos segundos, y aquí está el enlace. Entonces copiemos el enlace. Vamos a abrirlo en la otra pestaña. Bien, aquí vamos. Aquí está el sitio web. Mira esto. Como ustedes pueden ver, tenemos próximo recordatorio de cita. Muy genial, ¿verdad? Bien, a continuación, vamos a probar la segunda herramienta de IA. El nombre de la herramienta es Github Copilot. Entonces, primero, asegúrate de que ya inicias sesión en tu cuenta de Github y hagamos clic en Comenzar. Y vamos a hacer clic en Copiloto. Y serás redirigido a esta página. Bien, ahora vamos a construir el mismo sitio web, así que vamos a copiar y pegar este baile de graduación. Y voy a agregar más instrucciones a este prompt. Generar sólo un archivo. Guarde todo dentro del archivo. A continuación, vamos a seleccionar el modelo de IA que queremos usar. Hay muchas opciones. En este caso, voy a seleccionar GPT 4.1, pero si quieres usar un modelo diferente de IA, depende totalmente de ti y hagamos clic en Generar. Bien, aquí vamos. Tomará unos segundos, tal vez diez o 20 segundos, solo esperen chicos. Ojalá, no tarde demasiado. Muy bien, chicos. Por último, el código está listo y aquí está el código. Vamos a copiar el código, y voy a compilar este código en el IDE basado en navegador. El nombre del IDE es un compilador, copiemos y peguemos el código y hagamos clic en Ejecutar Bien, aquí vamos. En primer lugar, vamos a seleccionar la fecha. A continuación, vamos a seleccionar la hora. A continuación, vamos a agregar notas, consultoría de cadena de suministro. Y hagamos clic en Reservar cita. Como ustedes pueden ver, la cita se ha agregado aquí a mi calendario. Muy chulo. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 6. Cómo crear un software de análisis de datos con Emergent: Holigays, bienvenidos de nuevo al curso. En este video, vamos a construir software Data Analytics utilizando Emergente. Bien, comencemos. En primer lugar, vamos a iniciar sesión. Voy a iniciar sesión usando mi cuenta de Gmail. Como ustedes pueden ver, he iniciado sesión con éxito, y aquí está mi panel de control. Bien, a continuación, vamos a escribir el baile de graduación. Crear software de análisis de datos Asegúrese de que el usuario pueda subir archivo CSV y el sistema mostrará un resumen de datos como Mint, mediant, Max y Mint para cada columna Visualice los datos usando gráfico Br o Pychart y la etiqueta faltando valores y duplicados A continuación, vamos a seleccionar el modelo de IA. Hay varias opciones como Cloud, GPT. En este caso, voy a usar Cloud, pero si quieres usar un modelo diferente de IA, depende totalmente de ti. Bien, ahora hagamos clic en Generar. Bien, tardará unos minutos. Así que solo esperen, chicos. Ojalá no tarde demasiado , y estoy muy emocionada de ver el resultado. Bueno, no tardó demasiado. Solo tardó 5 minutos o incluso menos de 5 minutos. Bien, aquí está el sitio web, así que vamos a subir los datos. Entonces voy a subir un archivo CSV. En este ejemplo, estoy usando estos conjuntos de datos de ventas de Walmart de Google. Puedes usar cualquier conjunto de datos que quieras. Bien, vamos a subir los datos. Y vamos a hacer clic en Abierto. Bien, ahora está subiendo los datos. Bien, aquí vamos. Aquí está la información del archivo, el nombre del archivo, cantidad de filas, cantidad de columnas, tamaño del archivo, y vamos a desplazarnos hacia abajo como ustedes pueden ver, tenemos estadísticas resumidas. Entonces para cada columna, tenemos tipo. Hay dos tipos, numéricos y categóricos. Tenemos conteo, media, mediana, min y max. Mira esto, y vamos a desplazarnos un poco hacia abajo. Contamos con calidad de datos. Entonces hay cero valor faltante, y hay cero duplicado. Y aquí abajo, tenemos visualizaciones de datos. Tenemos gráfico bor y también gráfico circular. Mira esto. Muy genial, ¿verdad? Puedes compartir tu app, simplemente haz clic en Compartir y podrás copiar el enlace. Y también se puede ver el código chicos. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 7. Crea un sistema de gestión de propiedades con Base44: Chicos santos, bienvenidos de nuevo al curso. En este video, vamos a construir sistema de administración de propiedades usando Base44 Empecemos. En primer lugar, vamos a iniciar sesión, hagamos clic en Comenzar a construir y voy a iniciar sesión usando mi cuenta GML Como ustedes pueden ver, he iniciado sesión con éxito. Bien, ahora escribamos el prompt. Sistema de administración de propiedades construido con tres características principales. El primero es el panel de listado de propiedades. El segundo es el seguimiento del pago de renta. Y el tercero es el sistema de solicitud de mantenimiento. La aplicación debería permitir a los gerentes administrar listados de propiedades. Realice un seguimiento de los pagos de los inquilinos y gestione las solicitudes de mantenimiento de manera eficiente. Bien, entonces ese es mi aviso. Un prompt muy sencillo. A continuación, puedes seleccionar el estilo que quieras. Simplemente haz clic en este estilo Instrucciones. Entonces hay varias opciones. Puedes sentirte libre de seleccionar cualquier estilo que quieras. Y hagamos clic en Generar. Mira, ahora Base44 está creando la app. Tardará unos minutos, tal vez dos o 3 minutos. Así que solo esperen, chicos. Ojalá no tarde demasiado , y estoy muy emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Solo tardó 3 minutos o incluso menos de 3 minutos. Bien, aquí está el sitio web. Aquí está el Dakbard. Se puede ver el total de ingresos mensuales de las propiedades, pendientes de mantenimiento y tasa de ocupación. Y vamos a desplazarnos hacia abajo. Tenemos un gráfico circular. El 50% está ocupado. El 25% está vacante y el 1% está en mantenimiento. Y vamos a hacer clic en Propiedades y puedes agregar propiedad. Simplemente haga clic en esto. Se puede ingresar la dirección de la propiedad, seleccionar el tipo de propiedad, seleccionar el estado, ingresar la cantidad de recámaras, cantidad de baños, ingresar el pie cuadrado, renta mensual, inquilino nombrado, Bien, ahora vamos a dar clic en el pago. Se puede agregar el pago de registro. Deberá seleccionar la propiedad. Después ingrese el nombre del inquilino, ingrese el monto, seleccione el estado. Y vamos a hacer clic en mantenimiento. Se pueden agregar nuevas solicitudes de mantenimiento. Muy genial, ¿verdad? Bien, ahora vamos a publicar este sitio web. Así que simplemente haz clic en Publicar y hagamos clic en Publicar aplicación. Tardará unos segundos y solo copien este enlace, chicos. Bien, sigue cargando. Y aquí vamos. Y Base44 también edita una autenticación de usuario, por lo que el usuario deberá iniciar sesión primero antes de acceder a la aplicación. Muy genial, ¿verdad? Vamos a hacer clic en esto. Voy a iniciar sesión usando mi cuenta de Gmail. Y aquí vamos. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 8. Cómo crear un software de gestión de nóminas con Firebase Studio: Hola, chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir software de gestión de nóminas usando Firebase Studio Bien, comencemos. Hagamos clic en Probar Firebase Studio, y serás redirigido a esta página, y tendrás que iniciar sesión Puedes iniciar sesión usando tu cuenta de Gmail. Bien, a continuación, vamos a escribir el baile de graduación. Cree un software de gestión de nómina donde los usuarios puedan agregar detalles de los empleados, incluido el nombre, salario por hora, las horas totales trabajadas, las deducciones fiscales de bonificación El sistema debe calcular automáticamente el salario total generar nóminas y mostrar un resumen de todos los pagos de los empleados A continuación, puede seleccionar el lenguaje de programación que desea utilizar. Hay varias opciones como GpTent Java, Net flutter y aún muchas Y hagamos clic en prototipo con IA. Tomará unos minutos, tal vez dos o 3 minutos. Así que esperen, chicos. Ojalá no tarde demasiado, y estoy muy emocionada de ver el resultado. Vamos a hacer clic en prototipo de esta aplicación. Bueno, no tardó mucho, chicos. Solo tardó 2 minutos o incluso menos de 2 minutos. Bien, aquí está el sitio web. Para que podamos agregar empleado. Simplemente haga clic en esto e ingresemos el nombre del empleado. Voy a ingresar mi nombre, Chris, y mi salario por hora es de 25 dólares. Y he trabajado 35 horas esta semana, y el aguinaldo es de 380 dólares Y las deducciones fiscales son del 6%. Vamos a hacer clic en empleado. Como ustedes pueden ver, mi nombre ha sido añadido aquí, y el salario neto es de 1.179.70 dólares Bien, muy genial. Y aquí está la analítica. En total, tenemos cuatro empleados, y el costo total de nómina es de $14,741.50 Y también puedes exportar estos datos CSV. Simplemente haga clic en este CSV de exportación y también podrá filtrar al empleado por su nombre. Voy a escribir mi nombre. Bien, aquí vamos. Chris, ese es mi nombre. Si desea publicar este sitio web, simplemente haga clic en esta publicación. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 9. Cómo crear un software de gestión de residuos con Replit: Santo, chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir software de gestión de residuos utilizando Replit Bien, comencemos. En primer lugar, voy a iniciar sesión, así que hagamos clic en este LogEnt. Puedes iniciar sesión usando tu cuenta GML. Puedes iniciar sesión usando tu cuenta de Github. Puedes iniciar sesión usando tu cuenta de Twitter. Puedes iniciar sesión usando tu cuenta de Facebook. También puedes iniciar sesión usando tu ID de Apple. Depende totalmente de ti, pero en este caso, voy a iniciar sesión usando mi cuenta GML Bien, todavía se está cargando. Tardará unos segundos. Como ustedes pueden ver, he iniciado sesión con éxito. Bien, ahora vamos a escribir el baile de graduación. Software de gestión de residuos construido con tres características principales. El primero es la programación de recolección de residuos. El segundo grillete es un sistema de seguimiento para el volumen de desechos, tipo y la tasa de reciclaje Y el tercer grillete es la solicitud y queja del cliente. Gerencia. El sistema debe permitir al usuario programar recogidas. Supervisar el progreso de la recolección y analizar el rendimiento del reciclaje. A continuación, vamos a seleccionar el equipo, así que vamos a hacer clic en esto. Puede seleccionar las paletas de colores que desee. Voy a seleccionar Zen Gordent. Puedes elegir cualquier paleta de colores que desees. Depende totalmente de usted, y hagamos clic en Iniciar chat. Bien, todavía se está cargando. Tardará unos minutos, tal vez dos o 3 minutos. Así que solo esperen chicos. Ojalá no tarde demasiado, y estoy muy emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Solo tardó 3 minutos o incluso menos de 3 minutos. Bien, aquí está el tablero de trabajo. Podemos ver la estadística aquí. Contamos con cobros totales, tasa de reciclaje, solicitudes pendientes, rutas activas. Y aquí están las visualizaciones de datos. Tenemos tendencias de recolección, distribuciones de tipo de residuos, actividad reciente, y hagamos clic en la programación que el cliente pueda programar una nueva recolección, y hagamos clic en el seguimiento para que podamos rastrear su ruta Tenemos cuatro rutas A, B C y D, y hagamos clic en SOLICITAR. Entonces tenemos secciones de solicitud y queja aquí abajo, y también tenemos Analytics. Mira esto. Muy genial, ¿verdad? Y si quieres publicar este sitio web, simplemente haz clic en esta publicación. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 10. Creación de una aplicación de aprendizaje de idiomas con v0: Hola chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir la aplicación de aprendizaje de idiomas usando Pizio Bien, comencemos. En primer lugar, voy a iniciar sesión. Entonces vamos a hacer clic en esto. Voy a iniciar sesión usando mi cuenta GML Bien, a continuación, vamos a escribir el baile de graduación. Construye la aplicación de aprendizaje de idiomas con tres características principales. El primero es el vocabulario interactivo escuchar. El segundo fetter es el seguimiento del progreso, y el tercer fetter es el quiz diario Haga que la interfaz de usuario sea moderna y colorida. Bien, entonces ese es mi baile de graduación, un prompt muy sencillo. A continuación, voy a dar click en Generar Bien, tardará unos minutos, tal vez dos o 3 minutos. Así que solo esperen chicos. Ojalá, no tarde demasiado. Bueno, no tardó mucho, chicos. Solo tardó 2 minutos o incluso menos de 2 minutos. Bien, aquí está la aplicación. Tienen tres características principales. La primera son las lecciones interactivas de vocabulario. Entonces esto es para el español. Hagamos clic en Siguiente. Y puedes hacer clic en Revelar. Entonces las traducciones para Adios es adiós. Volvamos a hacer clic en Siguiente. Y hagamos clic en Revelar. Las traducciones para Por favor es por favor. Bien, muy genial. Y la segunda característica es Cuestionario diario. Entonces puedes hacer clic en Iniciar cuestionario, y habrá cinco preguntas. Es una opción múltiple nosotros. Hagamos clic en Siguiente. Bien, muy genial. Y la tercera característica es el seguimiento del progreso. Para que puedas realizar un seguimiento de tu progreso de aprendizaje. Y si quieres publicar tu app, simplemente haz clic en este Publicar, y hagamos clic en Publicar en Producciones. Tomará unos segundos, tal vez cinco o 10 segundos. Entonces obtendrás el enlace chicos, y podrás copiar y pegar ese enlace. Bien, la app ha sido publicada con éxito. Vamos a hacer clic en esto. Bien, aquí está la aplicación. Mira esto. Muy chulo. También puedes personalizar el dominio. Puedes agregar tu propio dominio. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 11. Crea una aplicación de gestión de gastos con Rork: Santo, chicos, bienvenidos de nuevo a los Coors. En este video, vamos a construir la app de Gestión de Gastos usando Rork Bien, comencemos primero. Voy a iniciar sesión Int. Tienes dos opciones. Puedes iniciar sesión usando tu cuenta GML. También puedes iniciar sesión usando tu Apple ID. Depende totalmente de ti, pero en este caso, voy a iniciar sesión usando mi cuenta GML, así que hagamos clic en Continuar con Google Bien, he iniciado sesión con éxito. Bien, ahora vamos a escribir el baile de graduación. Cree una aplicación de gestión de gastos con tres instaladores principales. El primero es el planificador de presupuestos. El segundo son las categorizaciones de gastos. El tercero es el escáner forcep. La aplicación debería permitir a los usuarios establecer y realizar un seguimiento de sus presupuestos mensuales. Clasifique automáticamente los gastos y cargue los recibos que la IA pueda escanear para extraer los detalles de las transacciones Incluya un tablero simple para mostrar resúmenes de gastos, gráficos y saldo presupuestario restante Bien, a continuación, puedes establecer tu configuración de privacidad. Hay dos opciones públicas y privadas. Si lo pones a público, cualquiera puede ver tu proyecto. Si lo configuras en privado, eres el único que puede ver tu proyecto. Bien, a continuación, vamos a dar clic en Generar. Tardará unos minutos, tal vez dos o 3 minutos. Así que esperen, chicos. Ojalá no tarde demasiado , y estoy muy emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Solo tardó 2 minutos o incluso menos de 2 minutos. Bien, así que aquí está la aplicación móvil. Realmente me encanta la interfaz de usuario. Se ve realmente genial. Y vamos a hacer clic en esto. Vamos a agregar gasto, compras de $35. Entonces esas son las descripciones. Y seleccionemos la categoría, y hagamos clic en Agregar gasto. Bien, ahora se ha editado, y agreguemos otro gasto. $50, películas, y hagamos clic en Entretenimiento, y hagamos clic a expensas. Bien, se ha agregado aquí. Adicionalmente, también puedes subir tu Recetimage. Simplemente haga clic en esto y el sistema va a realizar OCR o reconocimiento óptico de caracteres Entonces se va a extraer texto y número de la recetimagenBien, ahora vamos a dar click en la segunda pestaña Entonces estas son las asignaciones presupuestales, y hagamos clic en la tercera pestaña Entonces esta es la lista de transacciones. Si quieres publicar esta app, simplemente haz clic en esta publicación. Tardará unos segundos. Bien, la app ha sido publicada con éxito. Además, también puedes publicar la app en Appstore o Google Play Simplemente haga clic en esto. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. 12. Crea un sistema de gestión escolar con Google AI Studio: Holly chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir un sistema de gestión escolar utilizando Google AI Studio. En concreto, vamos a usar Gemini. Bien, comencemos. En primer lugar, tendrás que iniciar sesión usando tu cuenta de Gmail, y hagamos clic en Construir, y serás redirigido a esta página Bien, ahora vamos a escribir el baile de graduación. Construir sistema de gestión escolar. Con dos montadores principales. El primero es el manejo de datos de los estudiantes. Y el segundo montador es el rastreador de pago de matrícula. El sistema debe permitir al administrador agregar y administrar la información de los estudiantes. Como nombre, asistencia a calificaciones al tiempo que también seguimiento de las fechas de vencimiento de los pagos de matrícula y el historial de pagos. Incluya un tablero simple para ver los registros y el resumen de los estudiantes. Bien, entonces ese es mi baile de graduación, un baile muy sencillo. Y vamos a hacer clic en Raut. Tardará unos minutos, tal vez dos o 3 minutos. Solo esperen, chicos, ojalá no tarde demasiado, y estoy muy emocionada de ver el resultado. Bueno, no tardó demasiado. Solo tardó 2 minutos o incluso menos de 2 minutos. Bien, aquí está el sistema de gestión escolar. Aquí está la descripción general del tablero. Como ustedes pueden ver, tenemos total de estudiantes pagados de colegiatura este mes, pago atrasado y tasa de asistencia Y aquí abajo, tenemos expedientes de estudiantes, y puedes agregar un nuevo alumno. Vamos a hacer clic en esto en estudiante voy a ingresar el nombre del alumno. Voy a entrar Chris. Ese es mi nombre. Y entremos a la calificación y hagamos clic en Estudiante. Como ustedes pueden ver. Mi nombre ha sido agregado al expediente de estudiante. Chris Alka grado tres. Bien, muy genial. Si haces clic en esto, podrás ver el código. Como ustedes pueden ver, Google AI Studio usa el lenguaje de programación Typescript Y este es el escritorio. Si quieres verlo desde la aplicación móvil, hagamos clic en este móvil. Entonces se va a quedar así. Bien, ahora, volvamos a DescoPvew. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 13. Cómo crear un software de análisis de marketing con Cline y Open Router API: Hola, chicos. Bienvenidos de nuevo al curso. En este video, vamos a construir software de análisis de marketing utilizando cliente. Bien, comencemos. En primer lugar, deberá instalar el Código FAS. Este es el IDE que vamos a utilizar. Bien, a continuación, vamos a abrir el código FAS, y vamos a instalar extensiones de cliente. Entonces vamos a hacer clic en esto. Vamos a hacer clic en extensiones, y vamos a escribir cliente y usted necesitará instalar estas extensiones. Cliente. Entonces vamos a hacer clic en esto. Hagamos clic en Instalar. Bien, hemos instalado correctamente Cline, así que vamos a dar click sobre este icono A continuación, vamos a seleccionar el modelo de IA que vamos a utilizar. Así que hagamos clic en esto y hagamos clic en proveedor de API. Hay muchas opciones como cliente Open Router, Google Gemini, Open AI compatible, Anthropic Amazon bedrock, y aún muchas Si no quieres integrar ninguna clave API, simplemente haz clic en Cline Pero en este caso, voy a usar Open Router API, así que hagamos clic en esto y visitemos Open Router. Para aquellos de ustedes que no están familiarizados con Open Router, es una interfaz unificada para el modelo de lenguaje Large. Bien, comencemos. En primer lugar, deberá iniciar sesión. Voy a iniciar sesión usando mi cuenta de Gmail, pero también puedes iniciar sesión usando tu cuenta de Github. Bien, como ustedes pueden ver, he iniciado sesión con éxito, y hagamos clic en Claves. Y serás redirigido a esta página. Y hagamos clic en Crear clave API. Y no te preocupes. Puedes crear ApiKey para chicos completamente gratis. Y vamos a nombrar la clave API. Voy a llamarlo Cline Project. Puedes nombrarlo donde quieras. Depende totalmente de ti. Y hagamos clic en Crear. Y copiemos esta clave API. Y volvamos a Fascde Y pongamos aquí mismo tu clave API Asegúrese de que sea la clave API correcta. A continuación, puede seleccionar el modelo de IA que desea utilizar. En este caso, voy a usar Cloud Sonnet 4.5. Pero siéntete libre de usar cualquier modelo que quieras. Depende totalmente de usted, y hagamos clic en AC. Bien, a continuación, vamos a escribir el baile de graduación. Cree un software de análisis de marketing. Con tres cadenas principales. El primero es el rendimiento de campaña Traker. La segunda característica es el presupuesto publicitario Traker Y el tercer fetter son los insights de segmentación de clientes El software debería permitir a los usuarios monitorear el rendimiento de los anuncios en múltiples plataformas. Realice un seguimiento del gasto versus el ROI o el retorno de la inversión. Y automáticamente, agrupa al cliente en función del compromiso y la demografía Haga que el diseño de la interfaz de usuario sea interactivo y moderno. Y hagamos clic en Generar. Bien, tardará unos minutos. Como ustedes pueden ver, Klein es capaz acceder a mi código FAS IDE. Es capaz de escribir código en ese archivo. Mira esto. Muy genial, ¿verdad? Bien, así que esperen, chicos. Tardará unos minutos. Ojalá no tarde demasiado , y estoy muy emocionada de ver el resultado. Bueno, no tardó mucho, chicos. Solo tardó 5 minutos o incluso menos de 5 minutos. Como ustedes pueden ver, Klein ha creado tres archivos. El primero es DTMLFle. El segundo es archivo CSS, y el tercero es archivo JavaScript. Y esos archivos se almacenan dentro de esta carpeta, carpeta Marketing Analytics. Bien, ahora vamos a hacer clic en este índice de archivos en CML, y vamos a abrirlo en el navegador. Bien, aquí vamos. Bien, aquí está el software de análisis de marketing. Contamos con tablero de instrumentos. Podemos ver las estadísticas como campañas totales, ROI total, segmentos de clientes, gasto total, y aquí está la tendencia de rendimiento de la campaña, asignaciones presupuestarias Y desglosa el rendimiento de la campaña. Mira esto. Y hagamos clic en el rastreador de presupuesto. Tenemos los datos Pysalonsttal presupuesto, lapso total restante. Tenemos un gráfico que representa tendencia span versus retorno de la inversión. Y hagamos clic en las segmentaciones de clientes. Y aquí vamos. Tenemos ocho segmentos diferentes. Chicos de edad, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 14. Cómo convertir el diseño de UI en código HTML y CSS con Gemini: H chicos, bienvenidos de nuevo al curso. En este video, vamos a convertir la imagen UI Design a código frontend usando JNI Bien, comencemos. En este ejemplo, vamos a convertir esta imagen de página de inicio de sesión a código HTML y CSS. Bien, en primer lugar, tendrás que iniciar sesión usando tu cuenta GML y carguemos la imagen de diseño de la interfaz de usuario a Jim andi Vamos a hacer clic en este subir archivos. Y hagamos clic en Abrir. A continuación, vamos a escribir el baile de graduación. Convierte esta imagen de diseño de interfaz a código frontend, DML y CSS Y hagamos clic en Generar. Bien, ahora, la IA está generando el código. Tomará unos segundos, tal vez diez o 15 segundos. Así que solo esperen chicos. Ojalá no tarde demasiado. Bien, aquí está el código. Bien, entonces generó dos archivos. El primero es AdTML y el segundo es CSS. No obstante, en este caso, quiero que estén en un solo archivo, así que me va a ser más fácil compilar. Bien, entonces escribamos otro prompt. Poner todo el código ADSDML y CSS en un solo archivo. Como ustedes pueden ver, Géminis está regenerando el código. Ahora todo el código estará en un solo archivo, así que nos va a ser más fácil compilar el código. Para compilar el código, vamos a utilizar un compilador. Este es un IDE basado en navegador. No hace falta que descargues nada. Solo necesitas abrir este sitio web, y nosotros vamos a copiar y pegar el código aquí, y vamos a compilar el código. Simplemente haz clic en esta Ejecutar y podrás ver la interfaz de usuario aquí mismo. Bien, hagamos clic en este Copiar código. Y vamos a dar clic en Ejecutar. Bien, aquí está la interfaz de usuario. No es exactamente lo mismo así, pero es muy similar. Mira esto. Muy genial, ¿verdad? Regístrate en tu cuenta, correo electrónico o contraseña de usuario. Iniciar sesión muy chulo. Bien, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 15. Implementación y alojamiento de un sitio web en Netifly: Hool adivina, bienvenido de nuevo al curso. En este video, vamos a desplegar nuestra app usando Netifly Y no te preocupes, es de uso completamente gratuito. Vamos a hacer clic en Precios. Como ustedes pueden ver, Netifly ofrece un plan gratuito. Mira esto. Si recuerdas en el video anterior, ya construimos un software de reserva de citas usando Cloud. Entonces lo que vamos a hacer a continuación es hacer clic en esto, y vamos a descargar el código, y vamos a guardarlo como archivo HTML. Y vamos a desplegarlo usando Netufly. Bien, comencemos. En primer lugar, voy a iniciar sesión Int. Puedes iniciar sesión usando tu cuenta de Gmail. Puedes iniciar sesión usando tu cuenta de Github. Puedes iniciar sesión usando tu cuenta de Gitlab. También puedes iniciar sesión usando tu cuenta de Bitbucket. En este caso, voy a iniciar sesión usando mi cuenta de Gmail. Así que hagamos clic en Iniciar sesión con Google. Como ustedes pueden ver, he iniciado sesión con éxito, y aquí está mi panel de control. Para implementar tu app, tienes tres opciones. La primera opción es importar tu proyecto existente desde Github. Simplemente haga clic en este Importar desde Git. La segunda opción es comenzar desde una plantilla, para que puedas navegar por las plantillas. Hay muchas plantillas. Puedes usarlo y personalizarlo como quieras. Y la tercera opción es desplegar manualmente. Y eso es lo que vamos a hacer. Así que hagamos clic en este Navegar para subir. Y voy a subir esta carpeta de proyecto, reservación de cita dentro de esta carpeta. Contamos con Index HTML. Entonces ese es este código, código de reserva de cita. Y hagamos clic en Subir. Tomará unos segundos, tal vez cinco o 10 segundos. Bien, chicos, la app se ha publicado con éxito, y aquí está el enlace. Aquí está la URL. Así que vamos a hacer clic en este enlace. Bien, ahora vamos a probar esto. Hagamos clic en Reservar cita e ingresemos el título de la cita. Sesión de consultoría. Ingresemos la fecha. Ingresemos al tiempo 1030, y agreguemos los nodos Consultoría para ciberseguridad. Y hagamos clic en Reservar cita. Como ustedes pueden ver, se ha agregado a las próximas secciones de citas. Bien, ahora volvamos al tablero de Netifly. Y este enlace es Netifly Link, ¿verdad? Pero si quieres usar tu propio dominio, simplemente haz clic en este. Compra un nuevo dominio, pero necesitarás comprarlo, chicos. Pero si quieres que todo sea gratis, solo usa el Netifly, ¿verdad Pero depende totalmente de ti. Bien, chicos, creo que ya está. Eso es todo lo que necesitas saber. Los veré chicos en el siguiente video. Adiós. 16. Conclusión y resumen: Holi gays, bienvenidos de nuevo al curso. En este video, voy a resumir todas las cosas que hemos aprendido en este curso, y también voy a ver algunos consejos y trucos sobre cómo mejorar tus habilidades de codificación de vibra Bien, comencemos con el primer tema, la calidad del baile de graduación. Escribir un baile de graduación claro y detallado es crucial porque las herramientas de IA dependen en gran medida de sus instrucciones para generar resultados precisos. Cuanto más específico y estructurado sea tu baile de graduación, acercará la salida a tu visión, y también reducirá los malentendidos Bien, escojamos un ejemplo. Si recuerdas, usamos Replit para construir software de gestión de residuos, y aquí está el baile de graduación Vamos a reescribir el baile de graduación. Construya software de gestión de residuos con tres grilletes principales. Entonces, lo primero que debes hacer es decirle a la IA qué producto quieres construir. En este caso, quiero construir software de gestión de residuos. Entonces después de eso, deberá especificar qué características o funcionalidades necesita tener su producto , por ejemplo. Programación de recolección de residuos, sistema de seguimiento de residuos, volumen, tipo y tasa de reciclaje, y solicitudes de clientes, y también gestión de quejas. Asegúrate de que tu baile de graduación sea específico. Entonces AI entiende lo que quieres. Y también agrego contexto adicional aquí. El sistema debe permitir al usuario programar recogidas, monitorear el progreso de recolección y analizar el rendimiento del reciclaje Entonces eso es muy importante, chicos. Bien, ahora pasemos al segundo tema. Rompiendo las tareas en piezas pequeñas. Dividir proyectos grandes en partes más pequeñas ayuda a la IA a centrarse en una tarea a la vez. Por lo que esto lleva a resultados más precisos y facilita mucho la depuración o mejora de sus sesiones Por lo que aislará los problemas rápidamente, mejorará sus secciones por separado e impulsará la precisión general. Bien, déjame darte un ejemplo. Así que estamos usando el mismo baile de graduación, construimos software de gestión de residuos con tres características principales, y desglosamos cada montador uno por uno Por ejemplo, el primer alimentador es la programación de recolección de residuos. La atención se centra en la recolección de horarios, integraciones de calendario y optimizaciones de raíz Eso es sólo un ejemplo, chicos. Y la segunda característica es el sistema de seguimiento. Y la atención se centra en los datos de volumen, tipo de desechos, métricas de reciclaje y análisis Dskboard Y la tercera característica es la gestión de clientes. El enfoque está en el formulario de solicitud, queja, boletos, actualizaciones de estado y notificaciones. Entonces, para evitar que la IA se vea abrumada, debe asegurarse de dividir los proyectos grandes piezas más pequeñas para que sea más fácil de entender para la IA Bien, ahora, pasemos al tercer tema, las pruebas regulares. Probar su aplicación con frecuencia durante el desarrollo garantiza que cada ajustador funcione como se esperaba y evitar que se acumulen pequeños errores Las pruebas continuas también ayudan a mantener la estabilidad a medida que se editan nuevos componentes generados por IA. Porque hay algunos casos en los que el montador solía trabajar, pero una vez que agregaste nuevo componente, pero no, ya no está funcionando A lo mejor es por conflicto de dependencia o puede haber otras razones. Por lo que es muy importante que siempre compruebes si el ajustador sigue funcionando cada iteración Bien, chicos, ese es el final del curso. Muchas gracias, y les deseo todo lo mejor. Adiós.