Cómo crear aplicaciones y sitios web con IA | Una guía práctica para programar en Vibe

1. Te doy la bienvenida a la clase: Vivimos en una época en la que lanzar productos rentables es más accesible que nunca. No necesitas un presupuesto masivo. No necesitas contratar a nadie, y definitivamente no necesitas saber cómo codificar. Eso significa que si eres autónomo, dirijas una agencia, construyes una startup o simplemente alguien con una idea de producto, pero no tienes idea de cómo construirla. Este curso es para ti. Oigan, todos. Yo soy Adi. En este curso, te voy a mostrar cómo construir una aplicación web real que funcione, una que realmente puedas usar o incluso vender sin escribir una sola línea de código. Ahora, no soy un desarrollador de backend, y construir algo como esto con autenticación de usuario, bases de datos reales y una interfaz de usuario limpia normalmente tomaría un equipo o meses de aprendizaje Pero hoy, vamos a hacerlo en menos de una hora simplemente teniendo una conversación con IA, y hay muchas plataformas impulsadas por IA por ahí, y he probado bastantes. Para este curso, estamos usando HostingerHizons, y lo que lo hace destacar es que está construido por HostingerH lleva más de 20 años en el juego de hosting sirviendo a casi 4 millones de personas en todo sirviendo a casi Entonces, cuando prometen manejar dominios de alojamiento y escalado, en realidad tienen la infraestructura para respaldar eso. Construiremos la aplicación paso a paso guiando la IA con indicaciones, construyendo la estructura base, refinando la funcionalidad, ajustando los diseños y mejorando las características a medida que avanzamos El proyecto, un gestor de facturas sencillo pero funcional para autónomos Permite a los usuarios iniciar sesión, administrar clientes, generar facturas e incluso descargarlas como PDF Y sí, integraremos Superbse para la autenticación de usuarios y almacenamiento seguro de datos a través de la interfaz de IA Se requiere codificación de backend. Al final de este curso, sabrás cómo hablar con una IA para crear aplicaciones web o sitios web útiles, cómo estructurar tus indicaciones para obtener mejores resultados, cómo integrar herramientas como Super Base sin habilidades de profundidad y cómo construir productos reales rápidamente Entonces esa idea en la que has estado sentado en la que sigues diciendo que construirás algún día, bueno, puedes lanzarla hoy No más excusas por no ser lo suficientemente técnico o no tener el presupuesto o el equipo Empecemos. 2. Recorrido rápido por Hostinger Horizons: Muy bien, así que antes de saltar al modo de construcción de aplicaciones, déjame darte un rápido recorrido por HostingerHorizon, para que entiendas con lo que estamos trabajando Horizontes es básicamente como tener un desarrollador, diseñador y redactor publicitario en una IA Simplemente chateas con él, y construye sitios web reales y aplicaciones web completas con bases de datos, cuentas de usuario, procesamiento de pagos, todo. Hay otras plataformas por ahí que funcionan de manera similar, pero lo que distingue a Hostinger es que todo está integrado No necesitas hosting separado, servicios de correo electrónico, certificados SSL, Hostinger se encarga de todo Entonces, cuando estés listo para lanzar, puedes administrar tu dominio y hosting desde la misma plataforma en lugar de hacer malabarismos con múltiples Dicho esto, déjame mostrarte cómo empezar. Lo primero que debes hacer es crear una cuenta gratuita con Hostinger Entonces necesitas ir a tohstinger.com y hacer clic en Mi Cuenta. Eso va a abrir una página que te permita crear una cuenta o iniciar sesión con tu existente. Ahora, ya lo hice. Una vez que hayas iniciado sesión, serás llevado a tu panel de control. Donde puedes controlar toda tu experiencia de hosting. Ahora, para comenzar con Horizons, puedes hacer clic en Horizontes aquí mismo en la barra lateral izquierda Si tienes proyectos existentes creados con Horizons, esos se enumerarán aquí mismo De lo contrario, simplemente puede hacer clic en Agregar proyectos. Alternativamente, puedes ir directamente a hoizons dothstingor.com, y Ahora, la interfaz aquí es muy, muy sencilla. Aquí es donde escribes el mensaje, y en realidad hay tres formas de comunicarte con la IA. Puedes hacerlo vía chat. Puedes hacerlo subiendo una imagen o puedes usar la voz, lo cual es bastante genial Ahora, Horizons en realidad admite más de 80 idiomas. Para que puedas pensar y hablar en tu lengua materna, lo cual es simplemente fantástico. Ahora, solo para darte una idea de cómo funciona esto, vamos a crear una demo muy simple, bien, un proyecto de prueba simple solo para hacerte una idea de las cosas. Entonces aquí, voy a decir, crear una landing page para un SAS llamado Time Tracker, y no voy a darle ningún otro detalle. Así que sólo voy a golpear Send y la IA acaba de empezar a hacer su trabajo. En realidad es una IA muy comunicativa. Yo sólo me lo dije, vamos. Estoy a punto de crear una increíble página de aterrizaje SAS de seguimiento de tiempo, y me dice exactamente lo que está haciendo. Y esto va a tomar un poco, mientras que la IA está construyendo todas las páginas y todo el tema del diseño. Y puedes ver aquí mismo que está trabajando en ello. Tienes algunos consejos aquí que puedes recorrer mientras esperas. Y como estamos esperando, solo quiero decirte que esta plataforma en realidad se integra con muchos servicios como PayPal, Stripe, super Base, e incluso Google AdSens Así que esto realmente te da la opción de crear aplicaciones muy complejas, y en realidad lo probarás en este curso cuando utilicemos la integración de en este curso cuando utilicemos Superbase para la autenticación de usuarios y el almacenamiento seguro para nuestra aplicación de facturación Bien, entonces la IA parece haber terminado. Me dice que todo hecho, tu impresionante rastreador de tiempo, landing page SAS está lista para impresionar. Y veamos qué creó. Y déjame resetear el Zoom aquí para que podamos ver todo el asunto. Así que así, creó una landing page a partir de, como, una frase que le di , completa con animaciones. Incluso tienen tablas de precios aquí, botones, y creó de todo, desde texto hasta imágenes y maquetación. E incluso puedes ir a pantalla completa con esto y previsualizarlo. Y también puedes consultar la vista móvil. Entonces crea diseños receptivos por defecto, aunque no le pedí que hiciera eso, lo cual es bastante genial. Entonces esto es lo que te da por defecto. Ahora, es tu trabajo repasar lo que creó y comenzar a cambiar las cosas y adaptarlas a lo que necesitas que sea ese proyecto. Además, si detectas algún error, algún defecto en el diseño, simplemente puedes señalarlos a la IA, y va a hacer todo lo posible para solucionarlos. Por ejemplo, si me desplazo hacia abajo hasta el área de precios, podemos ver que la insignia más popular aquí se encuentra debajo de la tarjeta de precios, y no quiero eso. Entonces, digamos eso a la IA. Voy a decir que vi un error. La insignia más popular en la sección de precios se encuentra debajo de la tarjeta de precios, y debe colocarse encima de ella. Por favor, arréglalo. Entra, y ahora la IA interpretará eso, y va a hacer todo lo posible para solucionar ese problema. Y en realidad va a conversar contigo. Te va a decir en un poquito. Ya lo tienes. Me estoy sumergiendo para arreglar la insignia más popular en la sección de precios de inmediato. Esta vez voy a hacer estallar perfectamente encima de la tarjeta. Entonces veamos si realmente hace eso. Bien, entonces la IA me dijo que todo está hecho. Vamos a comprobarlo. Y seguramente suficiente, ahora se encuentra por encima de la tarjeta de precios. Y luego puedes continuar y, ya sabes, pedirle que haga cambios adicionales. Como, por ejemplo, si te gustaría que esto superpusiera una especie de tarjeta de precios, solo puedes pedirle que haga eso, y debería ser una solución muy fácil. O si hay algún otro cambio que te gustaría hacer para no sé, el layout, los colores, la tipografía, puedes preguntarle lo que quieras, básicamente, y va a hacer eso Ahora, asumiendo que ahora tienes un producto con el que estás contento, el siguiente paso es publicar y déjame tocarlo rápidamente. Tienes que ir a la esquina superior derecha aquí y presionar Publicar. Hostinger Horizons en realidad te permite publicar tu proyecto en un subdominio temporal gratuito, el que ves aquí mismo Para mí, para este proyecto, es de color verde pálido, números verdaderos números punto hosting site.com Y siempre puedes hacer clic en esto para ver tu sitio en vivo. Y esto es genial si quieres presentar tu trabajo a no sé, a tus clientes, a tus interés, a tu equipo, tienes un link en vivo que puedes usar para mostrarles lo que has hecho. Además, puedes agregar un dominio personalizado. Y por eso dije antes que hostinger hace todo por ti porque aunque actualmente no tengas un dominio, puedes comprarlo a través hostinger y luego aplicarlo a tu proyecto Aquí, no necesitas ir a otro lugar para hacer eso y luego regresar y hacer todo el asunto de la asignación de dominios Está todo horneado, y creo que es una gran ventaja. Y otra cosa que quería mencionar antes de que terminemos las cosas, si te quedas atascado en algún momento, o necesitas ayuda para configurar puedes obtener asistencia 247 del equipo de éxito del cliente de Hostingers Así que no dudes en contactarlos para cualquier cosa relacionada con el soporte. Muy bien, ahora que has visto lo intuitivo que es Horizons para proyectos simples, abordemos algo más ambicioso como nuestra app de gestor de facturas Eso viene en la siguiente lección. 3. Lo que estamos construyendo: Como mencioné anteriormente, estamos construyendo una aplicación de administrador de facturas, un proyecto que toca desafíos del mundo real como la autenticación de usuarios, bases de datos e integraciones de terceros Si puedes construir esto, puedes construir casi cualquier cosa. Primero déjame guiarte a través de la aplicación que buscamos, y luego te mostraré cómo crear un mensaje sólido para comenzar la IA. Esto es lo que he escrito como mi idea de aplicación de factura. Ya sabes, escribiendo rápidamente mis pensamientos, puedes pensarlo como solo un volcado de cerebros, básicamente, simplemente escribiendo ideas rápidamente. Entonces quiero hacer esta app, como una herramienta de factura para freelancer, y estoy pensando en llamarla Bill freelance, tal vez. No hace falta que sea elegante, solo funcional. Los usuarios necesitan iniciar sesión, tal vez vía Superbse. Entonces pueden agregar clientes y hacer facturas. La app necesita un dashboard con una lista de facturas y tal vez algunas estadísticas como ingresos totales, número de clientes, facturas de gastos, etcétera Cada factura tiene un número de prefijo. Se va al incremento automático, algo así como INV, 001, 002, etcétera. Ahora, al crear una factura, quiero poder seleccionar el cliente de un menú desplegable. Quiero tener líneas de pedido que tengan una descripción, la cantidad, el precio, igual que cualquier otra factura. El total de la factura debe actualizarse automáticamente. Puedo establecer el estado a cada factura ya sea nueva, que es la predeterminada enviada o pagada, y me gustaría poder descargar el PDF de la factura. Y tal vez más tarde pueda agregar funcionalidad de correo electrónico para poder enviar la factura a los clientes directamente desde la app. Además, me gustaría una página para los clientes. Me gustaría agregar clientes edit delete, y necesito algunos datos básicos para eso como nombre, correo electrónico, teléfono y dirección. Y también me gustaría una página de configuración donde puedan poner en su información de empresa y también cambiar el prefijo de factura. Diseño limpio, tal vez con una barra lateral de navegación, y muy importante, todos los datos están vinculados al usuario de inicio de sesión. Entonces esto es algo en lo que estoy pensando para la aplicación. Es como un plan rudo. Esto definitivamente no es una buena idea para un rápido porque está en todo el lugar. Y al escribir indicaciones de IA. Necesitas hacerlo de una manera específica si quieres los mejores resultados. Y te voy a dar algunos consejos y trucos para eso a la hora de escribir el prompt para este proyecto. Entonces, vamos a crear un nuevo proyecto o un nuevo documento de texto, debería decir, para el aviso, y comencemos. primer consejo es comenzar con un objetivo claro y decir exactamente lo que quieres construir y qué debe hacer. Entonces, por ejemplo, construye una aplicación web para que los freelancers administren y envíen facturas Entonces en nuestro ejemplo, esa primera frase se vería algo así. Hola, me gustaría crear una aplicación web para freelancers llamada Freelance Bill La aplicación debería ayudar a los usuarios a administrar clientes y facturas en un solo lugar. Así que descripción muy clara de lo que queremos lograr. Después de eso, deberíamos enumerar las características clave como piezas escaneables cortas Y usar viñetas es una gran idea. Entonces, para las características principales, me gustaría iniciar sesión y autenticación seguras , usar Superbse, crear una vista editar y eliminar facturas y clientes, descargar facturas como archivos PDF, y finalmente, todos los datos están vinculados a los usuarios registrados Estas son las características más importantes. Después de eso, podemos comenzar a describir las páginas que queremos que construya la IA. Y en mi caso, esos se ven algo así. Entonces quiero una página de tablero que tenga una tabla que muestre todas las facturas con acciones de edición y eliminación. Y también quiero algunas estadísticas generales que me muestren el número total de factura, los ingresos totales, el total de clientes, y también el monto pendiente. La segunda página es la página de edición de creación de facturas o el formulario de factura, como lo llamo aquí. Entonces me gustaría un desplegable para seleccionar un cliente agregar múltiples líneas de pedido para descripción, cantidad, precio unitario, auto calcular los totales, generar automáticamente el número de factura con prefijo personalizado, y le doy algunos ejemplos de lo que quiero decir con eso Y también me gustaría la opción de seleccionar el estado de la factura, nueva enviada o pagada. Después en la página de clientes, me gustaría una lista de todos los clientes con la posibilidad de agregar edit delete. Cada cliente tiene nombre, correo electrónico, dirección telefónica. Entonces, como pueden ver, estoy muy detallado en mi descripción de lo que quiero lograr y cómo quiero que se vea esa página en particular. Por último, la página de configuración, que tiene la información de la empresa o personal utilizada como remitente en las facturas, y también la capacidad de definir prefijo personalizado para números de factura. Y por último, agregué algunas notas tecnológicas. Dije, usa Superbse para la autenticación de usuarios y almacenamiento de datos, y además agregué algunas preferencias de diseño, si esas son importantes, Dije, el diseño debe ser limpio, moderno, receptivo y usar un esquema de color claro. Al final dije: Empecemos por generar la estructura básica y la interfaz de usuario, y voy a refinar todo paso paso en las indicaciones de seguimiento Esto no es necesario, pero solo pensé que es una buena adición. Entonces así es como se ve el prompt final. Pasamos de esta idea de aplicación que era solo una colección aleatoria de pensamientos básicamente a un prompt más estructurado que informa a la IA de qué es lo que queremos crear y los objetivos de ese proyecto. Entonces, con esto hecho, sigamos adelante y copiemos este prompt, y saltaremos de nuevo a Horizons, y lo pegaremos y comenzaremos a hacer nuestra aplicación de facturación Vamos. Y mientras esto está funcionando, había otra cosa que quería mencionar, y se puede pensar en ello como una mejor práctica. No tengas miedo de iterar, ¿verdad? No necesitas conseguir todo perfecto desde el primer intento. Tienes que tratar esto como una conversación con la plataforma. La IA, básicamente. Entonces, comience por sentar las bases de su aplicación y luego iterar. Luego agrega entidades, realiza cambios. Como dije, trátalo como una conversación. Es lo mejor que puedes hacer. Y aquí hay otro gran consejo, en realidad, de Hostinger esta vez Entonces, para obtener los mejores resultados, mantenga sus mensajes simples, cortos y enfocados en un cambio a la vez. Entonces cuando quieras hacer cambios, no escribas un mensaje que diga: Bueno, cambia esto y luego cambia eso y luego haz otro cambio en esos elementos. Haz un cambio a la vez. No confunde a la IA de esa manera. Y también te va a ser más fácil depurar y probar todo porque al construir cosas con plataformas como esta, encontrarás que tienes que hacer muchas pruebas, ¿verdad? Después de que la IA haga un cambio específico que les pides a los dos llegaste a probar y ver si eso se implementó correctamente. Y en algunos casos, tienes que probar y ver si ese cambio en particular no afectó a otras partes de la app ni a su funcionalidad. Entonces, ya sabes, es un proceso, pero definitivamente supera, ya sabes, contratar a un equipo de personas, gastar grandes presupuestos en construir una aplicación y, lo más importante, pasar semanas y meses construyendo algo. Con este tipo de codificación de vibra, supongo que podrías llamarlo, es muy fácil puedes hacerlo tú mismo. Así que casi hemos terminado donde la IA casi termina construir nuestras bases para la aplicación. Tengo mucha curiosidad por ver qué construyó. Bien, todo hecho, parece que tu app freelance de facturas está lista para rockear. Avísame si quieres algún ajuste. Bien, entonces vemos una página de inicio de sesión muy simple, básicamente, porque en el prompt que le di, sí dije que, bien, los usuarios necesitan estar conectados para hacer cualquier cosa en la app. Entonces, el primer paso lógico es pedir a los usuarios que inicien sesión. Para que podamos ingresar nuestro correo electrónico, nuestra contraseña, y si hacemos clic en estos enlaces, simplemente cambiarán de inicio de sesión a crear cuenta. También tenemos una pequeña introducción aquí a la aplicación con características básicas básicas, básicamente. Todavía no funcionará porque no tenemos una integración activa de Superbse La IA incluso me dijo aquí que cuando estés listo para actualizar a Super Base para una autenticación segura y almacenamiento de datos, deberás completar estos pasos. Entonces, ¿qué tal si hacemos eso a continuación? Porque Uh, ya sabes, integrar súper Base es probablemente lo más técnico que tenemos que hacer para este construido. Entonces te veré en la siguiente lección. 4. Integración de Supabase y realización de pruebas iniciales: Bien, entonces súper Base, ¿qué pasa? Bueno, en pocas palabras es una plataforma de desarrollo. Puedes encontrar más información al respecto si vas a superbs.com No vamos a entrar en muchos detalles porque honestamente, tampoco sé mucho de ello. Por comercio, no soy un desarrollador backend, así que en realidad nunca antes había usado SuPabse Sin embargo, con herramientas de IA como Hosting o Horizons, eso no me impide construir una app con ella porque conectarla a tu proyecto Horizons es súper simple Entonces así es como lo haces. Estás de vuelta aquí en la plataforma Horizons, e irías a la parte superior derecha donde dice integraciones Harías clic en eso y seleccionarías SupaBSE. Incluso le dice que puede agregar registros de usuarios, inicios de sesión, almacenamiento de datos y otras características de back end Así que adelante y haz clic en eso aquí te va a pedir que selecciones una organización y un proyecto. Ahora, ya tengo algunos definidos aquí porque hice algunas pruebas previas con Super Base. Pero cuando uses esto por primera vez, se verá diferente para ti. Esencialmente, lo que hay que hacer es crear una organización. Para mí, se llama Hostinger Horizons Org. Puedes ponerle el nombre que quieras. Y luego después de crear eso, puedes crear un nuevo proyecto. Así que hagámoslo juntos ahora mismo, y eso te va a llevar al sitio web de Super Base donde necesitas iniciar sesión. Si no tienes una cuenta, simplemente crea una. Es gratis. Voy a hacer clic en Regístrate ahora y voy a ingresar una dirección de correo electrónico y una contraseña, y voy a hacer clic en Inscribirse. Entonces ahora tenemos que revisar nuestro correo electrónico para confirmar el registro. El correo electrónico se ve algo así. Simplemente haz clic en Confirmar dirección de correo electrónico. Y en este paso, Super Base en realidad me va a decir que cree una nueva organización. Claro, hagámoslo. Voy a decir del equipo de Audi. Personal por ahora, puedo seleccionar el plan gratuito. Esto es genial para la mayoría de las personas que recién están comenzando. Es más que suficiente. Entonces, hagamos clic en Crear organización. Y luego voy a seleccionar esa organización, y voy a llamar al proyecto Freelance Bill. Y podemos establecer una buena contraseña aquí, y esta va a ser utilizada para la base de datos real. Entonces puedes seleccionar la región más cercana a tus usuarios, y lo haces para obtener el mejor rendimiento. Estoy radicado en Europa, así que solo voy a seleccionar U central y luego crear un nuevo proyecto. Bien, genial. Entonces, una vez que esto se hace dentro de Superbse, necesitamos volver a alojar nuestros Horizontes, y necesitamos hacer una actualización Y luego tenemos que volver aquí a Integraciones. Haga clic en Base de Sup. Después haremos clic en agregar otra organización porque quiero agregar la que acabamos de crear. Y aquí voy a conseguir un pop up pidiendo autorizar el acceso API para Hosting o Horizons, y voy a seleccionar esa organización del equipo de Addis que acabo Entonces voy a hacer clic en Autorizar Horizontes de Hosting. Y ahora esa nueva organización está conectada. Y puedo ver el proyecto Build freelance, y simplemente voy a hacer clic Conectar aquí mismo en la barra lateral. Bien. Y va a pedir una confirmación, y voy a golpear de nuevo, conéctate. Y al hacer eso, en realidad le di un aviso a la IA y le dije, por favor conecte mi SuperBasePject, factura freelance a mi sitio web, y obtuve Por supuesto, conectaré tu SuperBasePject a Bill freelance de inmediato, y esto permitirá la autenticación segura del usuario y almacenamiento robusto de datos para Y en este tiempo, la IA en realidad configura todo para ti. Establece las tablas de la base , ya sabes, para facturas, clientes y ajustes. Integra la autenticación Super Base para un inicio de sesión y registro seguros, y cambia del almacenamiento local a Superbse para la administración de todos los datos Todo bien. Entonces ahora todo debería estar completamente conectado y debería tener acceso a mi app, y debería poder crear cuentas e iniciar sesión. Entonces veamos si ese es el caso. Empecemos por ir a la página de registro. Voy a introducir mi nombre completo ad Pod. Y voy a ingresar mi correo electrónico como Adi Pordla gmail.com, y voy a ingresar una contraseña, y voy a Entonces veamos si esto funciona si esto funciona. Me dio una notificación diciendo que, vaya, desapareció. Cuenta creada, básicamente. Entonces ahora vamos a la página de inicio de sesión. Haga clic en Iniciar sesión. Y dice correo electrónico no confirmado. Bien, también tenemos algunos errores en la plataforma. Dice que es un error súper baase. Dice correo electrónico no confirmado. Veamos si realmente recibí un correo electrónico de confirmación. Y lo hice. Dice, confirma tu registro, así que vamos a confirmarlo. Ahora obtengo un error de rechazo de host local para conectarse. Bien, esto es en realidad común con Super Base. Investigué un poco sobre el tema, y es uno de los problemas que podrías enfrentar al construir algo como esto. Entonces así es como lo arreglas, ¿verdad? Vuelves a Super Base, vas a la autenticación. Vas a la configuración de URL, y aquí puedes ver que actualmente está configurado para host local 3,000. Debe cambiar esto a la dirección real de su sitio web. Entonces para eso, volvemos a Horizontes. Sí, publicamos esto para que podamos obtener esa URL, y, ya sabes, podemos abrir esta y ver nuestro sitio. Y podemos copiar esto sin la parte de inicio de sesión, y podemos volver a Super Base. Podemos pegar eso y podemos guardar los cambios. Bien, entonces a continuación, tenemos que reenviar ese correo electrónico de confirmación. El problema es que solo se envía una vez. Entonces esto es lo que haremos. Iremos a administrar usuarios en Super Base, y voy a seleccionar esto, y voy a decir eliminar un usuario. Entonces ahora volvemos a nuestra plataforma. Hagamos una actualización rápida. Y vamos a registrarnos, pero esta vez usemos una dirección de correo electrónico diferente. Entonces solo voy a usar esta y crear cuenta. Bien. Aún no pasó nada. Echemos un vistazo a Super Base para ver si tenemos, sí. Esto fue agregado, y ahora debemos revisar el correo electrónico para el enlace de verificación. Entonces hagámoslo. Y seguramente suficiente, tenemos un enlace de confirmación para esta dirección de correo electrónico. Vamos a confirmar. Entonces eso nos llevó a algún lado. Si volvemos a Super Base y hacemos refrescar, ahora deberíamos ver ese inicio de sesión cuando eso suceda. Entonces ahora el correo electrónico está confirmado y deberíamos poder iniciar sesión en la aplicación. Así que volvamos a Horizontes aquí. Haremos clic en Iniciar sesión. Entonces ahora me sale un error de aplicación web detectado. Pídele a Horizons que corrija este error por usted. Entonces, vamos a pedirle que lo arregle. Bien, entonces aparentemente, está todo arreglado, y me dice que el diseño ahora está usando correctamente la autenticación de Superbase, y he limpiado los archivos antiguos Bueno, ¿qué tal eso? Entonces, lo que tenemos aquí, tenemos Bill freelance, dashboard, clientes, nueva factura y ajustes. Bien, y luego algunos datos de la cuenta. Pero antes de seguir adelante, me gustaría probar la funcionalidad de inicio de sesión y cierre de sesión para ver si funciona correctamente Entonces voy a hacer clic en Cerrar sesión. Fresco. Bien, entonces eso me lleva de vuelta a la página de inicio de sesión. Así que escojamos mis credenciales o ingresemos mis credenciales, una vez más, inicie sesión. Y sí, el éxito. Entonces eso parece estar funcionando bien. Y esto en realidad es un poco demasiado brillante para mí. Entonces, antes de seguir adelante, cambiemos nuestra declaración original y creemos esta aplicación usando un esquema oscuro. Entonces voy a volver a hablar con la IA, y voy a decir, cambié de opinión. Por favor, usa un esquema de color oscuro para la aplicación con un, digamos, un color de acento verde menta porque eso era un poco demasiado brillante para mis ojos. Entonces eso también nos da oportunidad de probar este tipo de cambios de diseño porque cambiar un esquema de color para una aplicación como esta es una tarea bastante grande. toma bastante tiempo si lo hicieras a mano, como puedes ver, la IA lo hace en muy poco tiempo. Ni siquiera ha pasado ni un minuto desde que le pedí que hiciera eso. Entonces veamos qué se le ocurrió. Bien, toques finales. Y justo antes de que se hiciera, en realidad me dijo que ¡ay!, parece que un error molestos deslizó en los archivos JSX de los clientes, y lo desenredaré de inmediato y te recuperaré en perfecto estado de funcionamiento Interesante. Entonces mientras generaba, mientras cambiaba la combinación de colores, notó ese error de sintaxis en uno de los archivos, y lo arregló. Todo bien. Entonces esto es lo que conseguimos mucho mejor, no perfecto, obviamente. El diseñador y yo solo notamos de inmediato cosas que deberían arreglarse, pero, ya sabes, en realidad no le di indicaciones precisas sobre cómo debería ser esto. Yo solo se lo dije, usé un esquema de color oscuro, y eso lo hizo. Y por ahora se ve bien. También me gusta la elección del color. Eso es lindo. Tenemos algunas animaciones muy sutiles aquí. Y sí, así que este es el tablero que muestra facturas totales, ingresos, cantidad pendiente de clientes. Fresco. Clientes. Aún no hay clientes con la capacidad de agregar. Factura nueva. Puedo seleccionar el cliente de esta lista. Puedo seleccionar el estado, nuevo envío pagado, tal como lo dije en el prompt. Tenemos fecha de factura. Tenemos una fecha de vencimiento, genial, y luego las líneas de pedido, y puedo agregar tantas de estas como quiera. Y en f clic en Cancelar, me lleva de vuelta al tablero, y luego ajustes, información de la empresa, correo electrónico, dirección comercial, configuración de facturas. Tengo el prefijo del número de factura. ¿Puedo crear una factura? Necesito crear un cliente primero, en realidad. Vamos a agregar nuestro primer cliente. Digamos cliente uno, correo electrónico, cliente one@gmail.com. Teléfono, dirección, cliente una dirección. Vamos a agregarlo. Fresco. Entonces esto se agregó. Y luego volvamos al tablero, creamos factura. Bien, dice, No se encontraron clientes no se encontraron clientes. Entonces una prueba inicial muestra que la mayor parte está funcionando, pero tenemos algo de trabajo que hacer nosotros mismos. De hecho volvamos a Super base, y vamos a ir a la base de datos. Y aquí, en realidad nos muestra la estructura de nuestras bases de datos. Entonces tenemos una tabla para facturas. Tenemos uno para ajustes, y tenemos uno para clientes, y puedes ver cómo estos están interconectados. Entonces, por ejemplo, cada factura tiene un ID de cliente, derecho, que es directamente déjame mostrarte esto. El ID de cliente en la tabla de facturas está vinculado a la idea del cliente real. Sí, interesante. Bien, así que aquí todo parece estar bien. Volvamos a las mesas. Y si vamos a clientes aquí y vemos en el editor de tablas, sí, podemos ver el cliente que acabamos de crear en la app. Podemos ver el nombre, el correo electrónico, el teléfono, la dirección, y cuándo se creó. Entonces el vínculo con Superbse funciona bien. Y esto es todo lo que quería ver ahora mismo. Probablemente terminamos la parte más complicada del proceso, y esa fue la integración súper base. Ahora, solo refinemos la app paso a paso y hagamos los cambios necesarios para llevarla al estado que queramos. Empezaremos a hacer eso en la siguiente lección. 5. Corregir errores y perfeccionar el diseño: Bien, entonces los objetivos de esta lección son poner a prueba las siguientes cosas. ¿Puedo crear facturas correctamente y vincularlas a clientes específicos? ¿Puedo cambiar los ajustes correctamente y aplicarlos a las facturas? Y ¿puedo asociar facturas y configuraciones de clientes al usuario de inicio de sesión, lo que significa que si creo un nuevo usuario, los datos de ese usuario serán totalmente diferentes? Estas son las cosas que quiero probar en esta lección. Entonces comencemos con las facturas. Como te mostré en la lección anterior, creamos un cliente con éxito, pero cuando queríamos crear una nueva factura, no podíamos seleccionar un cliente de la lista desplegable. Entonces, digamos eso exactamente a la IA. Al crear una nueva factura, la lista desplegable de clientes está vacía, aunque he creado clientes con éxito, y eso es todo. La IA me dice eso, oye, lo has visto, mis disculpas Parece que dejé un cable desenchufado entre sus nuevos datos de cliente Superbase y el Sabes, me gusta la forma en que esta IA se comunica. Es muy educado, pero tiene un sentido del humor ocasional Entonces esperemos a que corrija ese error. Y fíjate que solo le pedí una cosa por aviso. Esa es una buena práctica que te animo a que uses también. Entonces DAI me dice que todo está arreglado. Entonces veamos, haga clic en Nueva factura, seleccione el cliente y, efectivamente, ahora me permite seleccionar uno de cliente. Vamos a crear un nuevo cliente aquí, cliente dos. Vamos a agregar eso. Eso se agregó con éxito bueno. Ahora volvamos a la nueva factura y podemos elegir entre cliente uno y cliente dos. Impresionante. Bien. Entonces cliente uno, nueva factura, fecha de hoy, fecha vencimiento para la factura. Digamos que las líneas de pedido de fin de mes. Digamos, no sé, video de YouTube. Una cantidad, digamos 100 dólares. ¿Podemos usar esto también para incrementar? Podemos. Pero el valor de incremento aquí no es correcto porque simplemente incrementa los decimales así Eso es algo que tenemos que arreglar, pero no es algo urgente. También podemos actualizar la cantidad aquí. Dos, y actualiza automáticamente el total, que era uno de mis requisitos. Fresco. Así que vamos a crear factura. Bien. Nueva factura creada con éxito, pero en realidad no me muestra la factura aquí en la lista. Vamos a contarlo. Voy a decir que creé una factura, pero la app no me la muestra en la sección de facturas recientes. Y, ya sabes, hice un pequeño error tipográfico ahí donde dije que no eso realmente no importa con la IA porque entiende lo que estás tratando de decir Uh, eh. Entonces, al parecer, el tablero sigue buscando facturas en el antiguo spot de almacenamiento local en lugar de la nueva base de datos Superbse que acabamos Y por eso tu nueva factura no está apareciendo Cool. Entonces también te dice que por eso no está funcionando. Déjame arreglarlo. Eso me gusta. Eso es genial. Y lo arregló. Super agradable. Facturas recientes, ya puedo ver la factura que acabo de crear. Fresco. Vamos a crear otro. Esta vez, seleccionemos al cliente dos. Nuevo. Fijemos la fecha de vencimiento para no sé, el 7 de agosto. Esta vez agreguemos dos líneas de pedido. Entonces hagamos un curso de YouTube por $2,000, y agreguemos un No sé, servicios de marketing Uno por 1230 $9. Bien, entonces el total se calcula correctamente. Vamos a crear factura. Bueno. Bien, entonces esto actualizó la lista de facturas recientes. También actualizó el monto pendiente aquí, lo cual es bueno. Entonces esta es la suma total de las facturas. Tener dos clientes, ingresos totales cero. Esto se actualizará, creo, cuando las facturas se marquen como pagadas. Depende de cómo la IA hizo la lógica detrás de esto, y tengo dos facturas totales. Fresco. Bien, así puedo crear nuevas facturas. Puedo crear nuevos clientes. Veamos si podemos editar una factura específica o un cliente. Empecemos con los clientes aquí. Digamos que voy a actualizar cliente dos, y voy a decir cliente dos dirección larga en lugar de dirección. Por lo tanto, actualice el cliente, la información se ha actualizado con éxito. Eso es bueno. Entonces ahora si vuelvo al tablero y edito la factura dos, digamos que cambio el curso de YouTube a 5,000 y actualizo factura. Y si, eso parece actualizarse bien. Si edito esto y cambio el cliente, también funciona bien. Volvamos a cambiar el cliente y actualizar el estado a enviado en lugar de nuevo. Sí, eso también funciona, y lo bueno es que la IA usa estas píldoras aquí coloreadas de manera diferente dependiendo del estado. Ese es un cambio muy agradable. Editemos la factura uno y la marquemos como pagada y veamos cómo se refleja eso. Bien, entonces eso ahora se refleja con verde y la IA ahora actualizó los ingresos totales. Por lo que el ingreso total se compone de los montos de las facturas que se pagan, mientras que el monto pendiente, como debe ser, se basa en el monto de las facturas que fueron enviadas o nuevas. Y lo interesante de esto es que en realidad no le especificé esto a la IA. No le pidió esta funcionalidad, pero sabía, ¿verdad? Sin que yo tenga que decirle exactamente cómo debería funcionar esto, es muy intuitivo. Entonces sabía exactamente cómo debería funcionar esto. Esto solo facilita mucho las cosas cuando la IA te encuentra a mitad de camino Bien, entonces volvamos a los objetivos de esta lección. Dije que quería probar si, ya sabes, estos pueden ser editados, que pueden. Además, si los ajustes están haciendo su trabajo correctamente. Entonces, vamos a cambiar estos ajustes. Y comencemos con la configuración de factura porque por defecto, el prefijo de factura es INV, pero cambiémoslo a AD, digamos, o ADR Y vamos a guardar los ajustes. Entonces ahora cuando creo una nueva factura, realidad tengo curiosidad por ver el número de factura y prefijo porque normalmente en mi cabeza, el número de factura debería incrementarse automáticamente en función de la última factura, pero ahora debería estar usando el nuevo prefijo que generé Y no le especificé eso a la IA, pero tengo curiosidad por ver si realmente implementó eso por sí solo. Entonces, seleccionemos al cliente dos y digamos, bla, con un precio de diez, crear la factura. Guau, genial. Bien, entonces esto creó la factura ADR 003. Entonces no sólo usó el nuevo prefijo que le di, sino que también continuó el número de factura de donde lo dejó. Supercool. Bien, en realidad eliminemos esta factura. ¿Estás seguro de que quieres eliminar esta factura? ¿Esta acción no se puede deshacer? Bien. Pero, ¿por qué recibo una notificación del navegador en lugar de una notificación en la aplicación? Así que hagamos clic, Bien, la factura se ha eliminado con éxito. Entonces ahora si creo uno nuevo, digamos cliente uno. Oh, entrada no válida. En realidad no pude ver eso, pero creo que eso es porque no pude seleccionar la fecha de vencimiento. Bien. Entonces volvamos a los errores. Error de súper base. Vamos a copiar esto. Y digámosle a la IA que arregle eso. Recibí este error, y voy a decirle para que la fecha de vencimiento sea un campo obligatorio porque olvidé elegir la fecha de vencimiento. Así que a través de un error. Y para evitarlo, no necesariamente tengo que depender de la IA todo el tiempo. Se lo puedo decir, oye, haz que ese campo sea requerido. Eso debería encargarse de cualquier problema que pudiéramos tener en el futuro. Bien, entonces al parecer todo está hecho, el error está aplastado y la fecha de vencimiento ahora es un campo obligatorio tal como querías me dice la IA Bien. A ver si esos ajustes funcionan. Así que vamos a crear una nueva factura. Sí, seleccione el cliente. Ahora se requiere la fecha de vencimiento, pero qué pasa si presiono Crear factura ahora. ¿Bien? Entonces me dice, por favor llene este campo. De hecho, pobló automáticamente la fecha de vencimiento. Interesante. Bien. Así que vamos a hacer eso. Hagámoslo. Crear factura. Bien, entonces eso es lo que quería probar originalmente. Si borro una factura, por ejemplo, la factura 003, y creo una nueva la IA seguirá usando ese prefijo 003, que debería o ir a 004, porque teníamos una factura previamente con ese número, pero hizo lo correcto. Se utilizó 003. Y vamos a crear otro porque tenía curiosidad por esta fecha de vencimiento. Por lo que al parecer, automáticamente rellena esta fecha de vencimiento con el último día del mes en curso Lo cual es, supongo, bien por mi parte. Y creo que por ahora, esto va a funcionar bien. Así puedo agregar, editar y eliminar clientes, estoy asumiendo. En realidad no he probado la eliminación del cliente. Así que borra. Sí, entonces funciona. Así puedo editar borrar en clientes y facturas, y puedo cambiar el prefijo en consecuencia. Ahora bien, lo último que quiero probar es si los datos que se crearon aquí, ajustes de facturas de clientes están vinculados al usuario de inicio de sesión. Y para eso, solo tenemos que crear un nuevo usuario y crear nuevos datos para ello. Y cuando cambiamos de usuario, solo deberíamos poder ver los datos que están asociados con el usuario específico, si eso tiene sentido. Entonces, vamos a cerrar sesión. Bonito. Esto también actualizó la pantalla de inicio de sesión. Eso me gusta. Vamos a registrarnos, crear una nueva cuenta aquí. Y solo voy a usar una dirección de correo electrónico aleatoria que tengo para probar, y voy a crear una cuenta con eso. Entonces ahora debería estar recibiendo un correo electrónico. Sí, eso funciona. Confirmar. Entonces ahora vamos a iniciar sesión con esta información. Entonces no tenemos facturas. De cualquier tipo. No tenemos clientes. Y cuando vamos a ajustes, aquí todo está vacío, excepto los ajustes, digamos que el número de prefijo de factura es ADR, pero esto es algo que agregué recientemente para el usuario anterior Así que sigamos adelante y arreglemos eso. Y solo voy a decir, cuando se cree un nuevo usuario, por favor use INV como prefijo de factura predeterminado Bien, así que veamos si eso funciona. Entonces este es un nuevo usuario, y seguramente suficiente, tenemos el INV. Bueno, eso es lindo. También llenó automáticamente el correo electrónico que usé para registrarme, y no creo que eso estuviera ahí antes, ¿verdad? Bien, pero aquí también tenemos un error. Tenemos un error súper base, así que vamos a arreglarlo. Y solo un consejo rápido. Si desea escribir más de una línea en este cuadro, puede presionar Shift Enter para ir a una nueva línea. Si solo presionas Enter directamente, va a enviar el prompt a la IA. Bien, entonces veamos volvamos a la configuración, y tenemos otro error, duplicar valores de clave. Bien, vamos a contarlo. Ahora tengo esto. Veamos qué dice. Vaya, un error de clave duplicado. Parece que tenemos una condición de carrera clásica. No sé lo que eso significa. Tanto mi activador de base de datos como la página de configuración, estamos tratando de crear un perfil predeterminado para ti al mismo tiempo. Uh, eh. Mis disculpas por el pequeño atasco de tráfico Muy interesante. Entonces, me dice que se arreglará en un instante todo hecho. La página de configuración ahora se cargará sin problemas. A ver si ese es el caso. Oye, lo hace. Muy impresionante. Bien. Entonces esto es lo que quería probar. Vamos a crear un nuevo cliente, y voy a decir Demo client one, Demo client one@gmail.com, y voy a agregarlo. Y luego vamos a crear una nueva factura aquí para el cliente Demo uno. Llamemos a esto Diseño de Logo. $1,000 crear factura. Bien, entonces para este usuario para el usuario Audi, tengo factura 001 para cliente Demo uno por $1,000, ¿verdad Entonces, si ahora salimos y usamos mi otra cuenta, sí, ahora todos los datos están asociados correctamente. Tengo mi cliente uno y cliente dos que creamos inicialmente. Tengo las tres facturas que he creado ahí. Y en cuanto a ajustes, sí, tengo el prefijo INV, aunque recuerdo cambiar esto a ADR Entonces ahora si creo una nueva factura, aguanta. Entonces cambiemos el prefijo aquí a ADR. Bien. Entonces ahora si creo una nueva factura, va a ser ADR 004 Bien. Entonces ahora si cierro la sesión e inicio sesión en la otra cuenta, y entro aquí y cambio el prefijo de factura a no sé, digamos, HHH, guardo los cambios, y creo una nueva factura Sí, mira, esto no está bien porque no usa ese nuevo prefijo de factura. Entonces déjenme decir eso. Digamos que el nuevo prefijo de factura cambiado no se usa al crear una nueva factura. Como pueden ver, todo este edificio de IA es muy conversacional, ¿verdad Le pides que haga algo, lo pruebes. Si no funciona, le dices que lo vuelva a hacer. Se prueban otras cosas. Si esos no funcionan, le dices que haga cambios. Eso es todo lo que hay básicamente. Pero lo bueno de ello es que, por supuesto, no necesitas saber cómo escribir código. La IA lo hace por ti. Uh, eh. Entonces el problema, al parecer, era que el formulario de factura seguía mirando los viejos ajustes almacenados en caché en lugar de buscar los últimos Bien, así que vamos a probar esto correctamente. Entonces ahora si vas a ajustes, tenemos el prefijo HHH Así que vamos a crear una nueva factura. Y ahora está usando HHH 003, pero en realidad no quiero ese guión Entonces le voy a decir a la IA, no quiero un guión en el número de factura Solo usa el prefijo más el número. HHH, por ejemplo, HHH 03 o 003. Así que sí, acabo de ver. Un error, y pedí arreglarlo. Entonces tu papel, supongo que podrías llamarlo aquí, es el de, ya sabes, supervisor, líder de equipo, incluso persona de control de calidad, eres tú el que tiene la visión, básicamente. Necesitas saber, ya sabes, cómo quieres que se vea el proyecto y cómo quieres que funcione, y luego necesitas transmitir esa visión a la IA, sí, hablándole. Es un mundo muy interesante en el que vivimos ahora mismo. Bien, vamos una vez más, crear una nueva factura HHH 04 Y si cambio eso a DDD, y guardo los cambios y creo una nueva factura, vamos a crear el cliente Seleccionemos al cliente, en realidad. Sí. DDD 05. Bien, hagamos una sesión más e iniciemos sesión con la otra cuenta. Y quiero consultar la configuración aquí. Sigue usando el prefijo ADR. Cambiemos esto también a OOOO no sé, QQQ, guardar cambios, nueva factura Y ahora es QQ q005. Fresco. Bien, así que todo lo que quería probar en esta lección funciona bien. Puedo agregar, editar, eliminar clientes. Puedo hacer lo mismo con las facturas, y todos los datos que creo para el usuario de Login están asociados con ese usuario de LogN, lo cual es súper genial Ahora, en la siguiente lección, comenzaremos a agregar algunas funcionalidades más avanzadas a nuestra aplicación de facturas, y como de costumbre, probaremos las cosas a fondo y nos aseguraremos probaremos las cosas a fondo y de que todo esté funcionando. Y si no es así, sólo le pediremos a la IA que lo arregle. Entonces te veré en la siguiente lección. 6. Ampliar la funcionalidad de la factura: Bien, así que tengo un objetivo muy específico para esta lección Quiero implementar una funcionalidad de descarga como PDF en mi app. Y también, me gustaría implementar una vista previa de facturas. ¿Qué significa eso? Cuando creo una nueva factura o edito una existente, me gustaría una vista previa en algún lado que me vaya a mostrar cómo se ve esa factura como será cuando se descargue como PDF, si eso tiene sentido. Entonces hagámoslo. Empecemos con esto. ¿El botón Descargar funciona aquí? La descarga de PDF aún no está implementada. Puedes solicitarlo en tu próximo prompt. Bien, vamos a solicitar eso. Voy a decir, por favor implemente descarga de PDF para facturas. Petición muy sencilla. Estamos trabajando una solicitud a la vez. Como dije, esa es una buena práctica porque ni siquiera es la mejor práctica para la IA, sino para ti también porque limita las cosas que quieres probar. Cuando estás preguntando o si estás preguntando a la IA, sabes cinco cosas en un prompt, tienes que probar cinco cosas diferentes. Pero cuando te enfocas en una cosa a la vez, es mucho más fácil para ti y también es mucho más clara para la IA. Siempre estoy muy contento leer las respuestas que me da la IA. Así que aquí está mi plan de juego. Install Auto table, que es una herramienta que me ayudará a crear tablas de aspecto profesional dentro de tus facturas PDF, crear una página dedicada, construir la lógica de generación de PDF. Me dice que agregaré un botón de descarga PDF a la nueva página de vista y actualizaré los elementos necesarios. Bien, entonces veamos qué hizo. Entonces cambió el icono de descarga. A un icono de ojo. Y cuando hacemos clic en eso, Oh, eso es súper genial. En realidad me muestra una vista previa, y esto es lo que me deja boquiabierto al usar herramientas como esta. Yo quería un adelanto, ¿verdad? Lo quería en la página de edición o en la página de anuncios. Pero nunca pensé , ¿qué tal agregamos una funcionalidad de vista previa aquí fuera de ella? Ni siquiera le pedí que hiciera eso, pero lo hizo de todos modos. Número de factura, información de la empresa, fecha de factura del cliente. Puedes ver el contenido de la factura y luego puedes descargarla. Vamos a descargarla. Factura QQQ 05 PDF Vamos a descargarla, y veamos cómo se ve. Cuenta con toda la información necesaria. Tiene el nombre de mi empresa, Bill de Bill dos. Entonces consiguió el cliente, ¿correcto? Sí. Cantidad por unidad de precio, ¿es correcto? Sí, lo es. Gracias por su negocio. Sí, entonces funciona. ¿Qué tan fácil fue eso? Y si edito la factura, ¿también tengo un botón de descarga? Yo no. Entonces, la única forma de descargar actualmente la factura es abrir esta y luego descargar PDF. Y también puedo hacer clic en Editar y me va a llevar a la página de edición. Sí, estoy bien con ese flujo. Creo que va a funcionar bien por ahora. Y también puedo dar click en una factura, y me va a llevar a la página de vista previa NIE. Estas son en realidad algunas de las mejores prácticas cuando se trata de UX, y la IA las acaba de implementar automáticamente, lo cual es muy impresionante, muy impresionante. Bien. Entonces la parte de descarga PDF está hecha, y eso tomó minutos. Muy chulo. Implementemos la parte donde me muestre una vista previa cuando agrego o cuando edito una factura. Entonces, por ejemplo, cuando entro a esta página, quiero poder editar los detalles de la factura igual que antes, pero me gustaría ver una vista previa de la factura final aquí de un lado. Entonces hagámoslo. Entonces, vamos a preguntarle esto. Al agregar o editar una factura, me gustaría ver una vista previa de factura en vivo en el lateral. En vivo, es decir, está actualizando su contenido a medida que estoy cambiando los detalles de la factura. Veamos qué hace. Por supuesto, una vista previa de facturas en vivo es una idea fantástica. Rediseñaré el formulario de factura para incluir una hermosa vista previa en tiempo real que se actualiza instantáneamente a medida que escribe Veamos qué se le ocurre. ¿Te imaginas sentarte en una playa en algún lugar con tu laptop, ya sabes, construyendo aplicaciones, construyendo productos? Muy, muy bien. Bien, vamos. Vamos a editar. Seguramente suficiente, tenemos ese adelanto en el lado derecho. Cambiar la fecha de vencimiento a la primera, que se actualizó instantáneamente. Fresco. Cambiemos la descripción aquí a videos, que se actualizan en tiempo real. Cambiemos la cantidad aquí a dos. Eso funciona. Cambiemos el precio. Eso es un problema. La forma aquí está demasiado hundida. Entonces tenemos que cambiar eso. Entonces cambia la cantidad a tres. Sí, los precios se actualizan automáticamente. Fresco. Agreguemos algunas notas. Oye, gracias por trabajar conmigo. Actualizar factura. Bien, así que eso fue, creo, éste. Sí. Bien. Entonces esa fue la página de edición. Si abrimos la nueva página, sí, funciona bien. Entonces funcionalmente, funciona, pero necesitamos arreglar algunas cosas de usabilidad aquí Entonces, antes que nada, estos campos son ahora demasiado pequeños. Es decir, la cantidad, sí, supongo que está bien porque suele tener solo un valor pequeño, pero el precio es demasiado pequeño. El total es demasiado pequeño. Como se puede ver, el texto tipo de desbordamientos aquí. Y tengo la sensación que la barra lateral aquí es solo espacio desperdiciado. Entonces comencemos quitando la barra lateral y moviendo este contenido a una barra superior. Entonces le voy a decir lo siguiente. La barra lateral está ocupando demasiado espacio. Por favor, quítelo y mueva su contenido en una barra superior. Debería ser bastante fácil. Y nuevamente, este tipo de cambio tardaría, creo, probablemente varias horas en completarse dependiendo de quién lo esté haciendo por ti si estamos hablando de, como, un pueblo vivo. Pero sí, la IA simplemente lo codificará en un abrir y cerrar de ojos. Bien, esto se ve mucho mejor. Se movió todo esto a la cima. Me muestra el tablero, la nueva factura del cliente, pero sin ajustes. Además, Ah, bien. Entonces hizo como un menú desplegable aquí donde me muestra a mí, al usuario, la página de configuración. Y luego el enlace de cierre de sesión. Bastante genial, excepto por el hecho de que solo tengo una G ahí y no es un círculo, básicamente, así que tenemos que arreglarlo. Así que en realidad voy a decir que el botón de menú desplegable en la barra superior no se ve bien. Simplemente muestra una G en forma de píldora vertical. Actualízalo para mostrar un icono de usuario y mover el nombre de usuario y el correo electrónico fuera del menú desplegable. Entonces eso debería ser bastante fácil. Para que el usuario siempre pueda ver su nombre, su correo electrónico cuando está conectado. Todo bien. Entonces eso se ve un poco mejor, pero aún no es perfecto porque esta forma aquí es muy extraña. Es como una forma de píldora, pero sí tenemos acceso a la configuración, lo cual es agradable y el enlace de cierre de sesión Fresco. Pero, en realidad, arreglemos ese problema. Entonces le voy a decir que el fondo del icono sigue siendo una forma de píldora vertical. Por favor, hazlo un círculo. Bien, veamos cómo le va eso. Bien, y creo que eso finalmente lo arregló. El botón ahora se ve genial. Funciona como debería. Tengo la información aquí agradable, y puedo cambiar entre estas páginas. Bien, ahora, ya que sacamos la barra lateral del camino, en realidad editemos esta página de edición de factura y veamos cómo es eso con el espacio extra. Ahora, obviamente, en una página web en vivo, no tenemos esta barra lateral. Se va a quedar así, básicamente. Pero, ya sabes, todavía tenemos que asegurarnos de que este diseño funcione en muchos tamaños de pantalla diferentes. Entonces así es como se ve en el móvil. Bien, que no está muy mal, y el menú ahí sigue funcionando Bonito. Pero en el escritorio, siento que aún no estamos ahí con esta forma. Entonces veamos cómo podemos arreglar esto. ¿Y sabes qué? En realidad, ni siquiera voy a tratar de encontrar una solución a este problema. Sólo voy a describir el problema a la IA y ver qué se le ocurre, porque si hace algo y no me gusta, siempre puedo volver a una versión específica de la app haciendo clic en el botón Restaurar Entonces después de cada chat, sí, podemos restaurar una versión específica de esa app si no nos gusta el cambio. Así que en realidad voy a describir mis problemas aquí. Y los problemas están básicamente en la sección de líneas de pedido porque no tenemos suficiente espacio para la cantidad precio unitario en total. Entonces voy a decir que el formulario de factura en la sección de artículos de línea no ofrece suficiente espacio para los campos de líneas de pedido, especialmente los campos de precios. ¿Puedes encontrar una solución para eso, verdad? Entonces solo estoy describiendo el problema, en realidad. No estoy tratando de encontrarlo para la IA. Sólo estoy esperando a ver qué sugerencias me da para eso. Y si no me gustan, siempre puedo volver atrás o pedirles que hagan más cambios Veamos su plan aquí, en realidad. Entonces dice que quiere reelaborar el diseño de la cuadrícula y mejorar la vista móvil Todo bien. Bueno, veamos cómo va eso. Bien, nueva factura. A ver. Hm. Quiero decir, en realidad no hizo mucho, ¿verdad? Entonces si cambio esto, no, esto todavía no funciona correctamente porque el total aquí, si estamos tratando con cantidades mayores, todavía se superpone o sale de su caja delimitadora Y veamos de hecho la vista móvil porque decía que actualizó la vista móvil. Preguntémosle esto. Realmente no hizo ningún cambio valioso, así que no voy a volver a una vista más antigua, sino que voy a pedirle que mueva estos un poco Entonces le pedí una solución realmente no me dio una buena, así que le voy a decir qué hacer. En la sección de líneas de pedido, por favor haga la descripción del artículo de línea ancho completo y mueva la cantidad, el precio unitario y el precio total por su cuenta o debería decir, en la segunda fila. De esa manera, los datos tienen suficiente espacio. Bien. Y otro consejo aquí, y de hecho lo he hecho antes, si alguna vez te encuentras sin poder comunicarte con la IA, si le estás pidiendo que haga algo, pero simplemente no parece entender lo que tiene que hacer, entonces intenta usar otra IA para generar un prompt para ello. Entonces solía hacer esto en el pasado. Le pediría a la IA algo que no entendería, y luego le pediría a CHAT GPT que escribiera un prompt para que le diera la IA Y le expliqué lo que quería hacerle a HatGPT. Entonces HatGPT tomó eso, escribió un prompt muy detallado, muy técnico, que luego le di a esta otra IA, y finalmente consiguió el trabajo No funciona todo el tiempo, pero suele ayudar. Bien. Entonces ahora vamos a editar la factura. Sí, ahí vamos. Eso es mucho mejor. Ahora tenemos mucho espacio tanto para la descripción como para los otros tres campos. Algo más que me gustaría agregar aquí es una moneda al precio unitario. Entonces diré, agregue también la moneda del dólar estadounidense al precio unitario. Bien, entonces la IA hizo cambios. ¿Qué significa eso? Tenemos que probarlos. Entonces editamos. Ahora tenemos ahí también el signo del dólar, y cambiando esto también actualiza los montos aquí y también los actualiza aquí mismo en la vista previa. Muy bonito. Si echamos un vistazo a la vista previa aquí, sigue funcionando. Y si creo una nueva factura, selecciono al cliente, aquí hay una cosita. El número de factura parece estar cortado. Entonces no está cortada. En la página de edición, pero está cortada en la página Crear. Interesante. Se lo vamos a contar. En la página de crear factura, se corta el número de factura, por favor corrija probar nueva factura. Por lo que ahora dice A, seleccione el número de factura del cliente, fecha, fecha de vencimiento. Y si edito, entonces el número de factura se muestra correctamente, pero no quiero ese signo hash ahí. Bien. Pero no se muestra correctamente en la nueva factura. Por lo que este aviso para este tiempo sería eliminar el signo hash del número de factura en la página de detalles de la factura. Además, al crear una nueva factura, el número de factura muestra A, por favor corrija. Entonces, como que rompí mi propia recomendación ahí porque le pedí que hiciera dos cosas en un solo prompt. Veamos cómo le va. Normalmente, como dije, realmente no lo recomendaría porque es mucho más fácil para ti y también mucho más claro para la IA. Pero veamos cómo le va solo esta vez. Bien. Entonces ahora, elimina ese signo hash del número de factura, y cuando creo una nueva factura, QQQ 06, sí, eso es correcto Como pueden ver, esto ahora solucionó los problemas, y me muestra el número de factura correcto. Ahora, echemos un vistazo rápidamente a los demás detalles que deberían aparecer en la factura. Entonces cuando selecciono al cliente, selecciona cliente uno, cliente dos, eso es correcto. Pero, ¿qué pasa con mis propios datos personales? Así que, en realidad, volvamos. Vayamos a la configuración. Y vamos a rellenar el nombre de la empresa aquí. Digamos, no sé, Pordla Designs Ic DipoD mi dirección de correo electrónico Claro. Digamos solo un número de teléfono ficticio, la dirección. Vamos a poner uh, la dirección, y en realidad vamos a rellenar todos los campos aquí. ¿Bien? Guardar cambios. Fresco. Entonces ahora cuando creo una nueva factura, sí, llena mis datos correctamente. A pesar de que no muestra mi sitio web. Oh, no, sí, lo hace. Eso no lo vi. Fresco. Bien, así que fijemos al cliente cliente una fecha de factura de estado, fecha de vencimiento. Automáticamente lo rellena. Fecha de vencimiento mañana. Y digamos, no sé, YouTube, cantidad dos precio unitario 100 y pulsa Enter, para crear la factura. Fresco. Y aquí tenemos un error. No estoy viendo al cliente para esta factura. Si cambio eso a cliente dos, ¿lo vemos? Nosotros no. Factura QQQ 006 está teniendo algunos problemas Si creo una nueva factura, ¿tenemos los mismos problemas? Sí, lo hacemos. Bien. Entonces acabamos de descubrir un nuevo problema. Es por eso que hay que probar, probar, probar, y simplemente seguir arreglando las cosas. Al crear o digamos, el cliente no se muestra en la tabla de facturas recientes para facturas nuevas. Ese es un comportamiento extraño. A ver si arregla eso. Entonces, al parecer, el nombre del cliente no se estaba guardando correctamente al crear una nueva factura, razón por la cual no aparecía en tu tablero. Cosas como esta le pasan, ya sabes, hasta a la IA. Cuando estás haciendo estos cambios, estás cambiando el código en sí. Entonces es natural que cuando cambias algo, puedas estropearlo otra cosa, pero parece que lo ha arreglado. Entonces ahora si creo una nueva factura para cliente uno, si, la muestro correctamente. Impresionante. Bien. Y el número de factura se muestra ahí correctamente. Una cosa que me di cuenta es que la vista previa de factura que veo aquí en realidad es diferente de la vista previa de factura que veo aquí. Entonces tal vez queramos cambiar eso. Déjame pedirte que hagas eso. Entonces voy a contarle exactamente lo que le dije. Las vistas previas de facturas son diferentes entre la página de vista previa y las páginas de edición de anuncios. Por favor, hazlos igual. Bien, vamos a echarle un vistazo. Entonces esta es la vista previa. Se ve de cierta manera, bien. Y si vamos a editar, sí. Entonces creo que eso se ve más o menos igual. Así que estoy contento con eso. Entonces si descargo esta factura ahora, la factura 008, y la abro, me muestra la información correcta, ¿verdad? Sí. Pero el diseño de la factura real no se parece realmente a la vista previa que veo aquí. Y sería bueno que todos estos fueran lo mismo. Entonces hagámoslo excepto que la vista previa está usando este esquema de color oscuro, y la factura que genere debería estar en un esquema de color claro porque es posible que desee imprimirla en papel. Entonces en este caso, vamos a preguntarle esto. Haga que el formato PDF descargable se vea exactamente como las dos vistas previas que acaba de crear, excepto que use un esquema de color claro para el PDF A ver si eso es posible. Oh, hombre. A mí me encanta esto. Parece que no hay nada que la IA no pueda hacer. Quiero decir, solo le pedí que hiciera esto, lo cual, en mi mente, es una tarea muy compleja, ¿verdad? Pero la IA me dice eso, oye, ya lo tienes. Voy a instalar esto y actualizar eso. Bastante genial. Entonces veamos si hizo algún cambio en las vistas previas aquí. Yo no lo hice. Entonces si descargo el PDF ahora, Oh. Bien. ¿Qué es esto? Sí, esto no es bueno. Entonces tal vez no fui muy claro. Parece que todo lo que hizo fue tomar una imagen de la vista previa que tenía en la app y simplemente colocarla sobre un fondo blanco. Y eso no es lo que quería. Quiero básicamente tener este formato, este diseño de la factura, básicamente, pero en un esquema de color claro. Entonces, preguntémoslo otra vez. Voy a decir que esa no es la solución correcta. Por favor, utilice el mismo formato y maquetación para el PDF que lo hizo para la vista previa, o debería decir, para la vista previa de la factura. Sin embargo, el PDF utilizará una combinación de colores claros. Y creo que eso debería ser suficiente. A ver si eso es lo suficientemente específico para ello. Si no, bueno, creo que voy a platicar con mi buen amigo Chad GPT y pedirte que hagas un mejor prompt para la IA Vamos a previsualizar, vamos a descargar. Sí, esto todavía no está bien porque sí, usa el formato, pero no funciona correctamente. Esta es la primera factura. Y el texto en realidad era seleccionable aquí, pero en estos dos, esto ni siquiera es seleccionable. Esta es una imagen, básicamente. Así que vamos a ir a HatGpt y tratar de encontrar una solución a esto Bien, así que después de platicar con CHADGPT, básicamente le dije eso, mira, estoy construyendo una app de facturación Estoy tratando de que coincida con el formato del PDF con la vista previa desde la aplicación. Entonces le di un poco de contexto y se lo pedí, ¿me pueden ayudar con un prompt? Entonces me dio un aviso. Éste, que es un poco demasiado detalle. Entonces se lo dije, eso es demasiado detalle. La IA ya sabe lo que estamos construyendo, así que me dio este prompt más pequeño. Entonces probémoslo así. Yo sólo voy a tomar eso. Voy a pegarlo. Y el prompt aquí básicamente dice, Hacer el PDF exportado, coincidir con el diseño de voz en pantalla exactamente la misma estructura, espaciado y alineación La única diferencia, usa un esquema de color claro, fondo blanco texto negro para imprimir, mantener el diseño limpio y consistente con la vista previa. Entonces veamos si esto ayuda de alguna manera. Desde mi experiencia, como dije, esto funciona la mayor parte del tiempo porque tener otra IA que escriba las indicaciones por ti, generalmente da como resultado indicaciones más detalladas, más técnicas, pero ese no siempre es el caso Si esto no funciona correctamente, podríamos estar viendo , ya sabes, algo que la IA no pueda hacer, pero dudo que ese sea el caso, honestamente. Entonces dice, o dice, lo tienes. Mis disculpas. La última tienda no era del todo pixel perfect. Bien, así que vamos a hacer clic en esto. Vamos a hacer clic en descargar PDF. A ver si no, esto no parece funcionar correctamente, ni siquiera esta vez. Entonces, vamos a contarle esto. Sigues poniendo una imagen en ese PDF. El texto ni siquiera es seleccionable. Por favor, genere el PDF de la misma manera que lo hizo al crear esta aplicación por primera vez. Pero use el diseño y estructura de la vista previa de la factura en pantalla. Entonces, estamos atacando esto desde un ángulo diferente. A ver si eso hace algo. Lamento de verdad los repetidos pasos en falso. Estoy implementando esta solución correcta ahora, y estoy seguro de que estarás contento con la calidad profesional de los resultados. Bueno, eso queda por verse, mi amigo AI. Uh, eh. Entonces, al parecer, lo que hizo fue usar un paquete HTML to canvas para crear eso. Entonces ahora está quitando eso y está trayendo de vuelta tabla automática para construir un PDF con texto seleccionable real. Bien, vamos a darle una oportunidad a esto. Uy. Vamos a descargar. Ajá. Ahí vamos. Por lo que ahora parece mostrarlo correctamente casi. No es como al 100%, pero está bastante cerca. Al igual que, toda la información está en el lugar correcto, excepto en la factura. Esto es una especie de diseño de caja con el encabezado, el encabezado de la tabla se colorea así, y la vista previa simplemente lo muestra así. Creo que voy a tomarlo. Creo que puedo modificar eso un poco más, pero esta lección ha ido demasiado tiempo de todos modos Entonces creo que por ahora, tenemos un parecido bastante cercano con nuestro avance aquí, y me voy a llevar la victoria Entonces los objetivos de esta lección fueron implementar la vista previa de facturas y también la descarga como PDF. Y como viste, el trabajo está bien, puedes dar click en cualquier factura para ver una vista previa aquí. Puedes descargarlo como PDF y también crear una nueva factura o editar una factura existente realmente mostrará una vista previa en el lado derecho. Y esa vista previa se actualiza en vivo a medida que estás actualizando los detalles de la factura. Entonces, ¿qué más necesito o quiero hacer para esta app? Bueno, parece que funciona muy bien por ahora. Lo único que creo que cambiaría enseguida es el hecho de que tenemos demasiados botones, digamos nueva factura, ¿verdad? Tenemos uno aquí, y tenemos uno aquí, y el menú principal aquí también dice nueva factura. Entonces creo que me gustaría agilizar eso y tipo de tener un solo botón, tal vez aquí o tal vez aquí en la cabecera. Retire este elemento del menú y luego tal vez haga algunos cambios de diseño para que este aspecto se vea un poco más pulido. Pero eso es para la siguiente lección porque como dije, esto ya es demasiado largo. Entonces te veré en la siguiente lección donde vamos a implementar los cambios finales para nuestra app. 7. Toques finales: Bien, bienvenidos de nuevo a la lección de construcción final de este proyecto, y los objetivos para este son muy simples. Tenemos que adelgazar los nuevos botones de factura porque hay demasiados, y están dispersos por todo el diseño. Y también necesitamos hacer algunos cambios estéticos. Sólo pule un poco más el EUI. Entonces comencemos con el botón. Entonces voy a decir, tenemos demasiados botones para crear una nueva factura. Mantenga uno solo acentuado en la barra superior. Y creo que no hace falta decir que los otros dos deben ser removidos. Entonces veamos si lo hace correctamente. Y al parecer, mientras hacía eso, la IA encontró un error, un punto y coma molestos Bien, eso no lo vi, pero al parecer sí. Entonces sí, ahora tenemos un solo botón de factura nueva que nos lleva a la página Crear nueva factura. Bonito. Y cuando hacemos clic en Editar , nos lleva a la página Editar factura. Entonces ese es el objetivo número uno. El objetivo número dos es hacer algunos cambios estéticos. Y para eso, en realidad me gustaría probar esta característica de imagen. Entonces me gustaría encontrar algunas imágenes que muestren el tipo de layout que estoy tratando lograr dárselas a la IA y pedirle que coincida con los colores y, ya sabes, el espaciado y todo a las imágenes que acabo de darle. Entonces veamos cómo va eso. De hecho, vayamos a regatear, y busquemos qué sería este tablero oscuro Veamos si podemos encontrar algo que me guste y que creo que funcionaría bien para este tipo de proyectos. Entonces esto es interesante. De la mente del uso. Esto se ve interesante. Así que vamos a guardar eso. Y eso realmente lo guarda como una imagen web P. Me pregunto si la IA acepta cargas de P web. Esto es demasiado oscuro. Esto se ve interesante. De nuevo, no voy a tratar de pronunciar tu nombre. Entonces, vamos a guardar esa imagen. Bien, vamos a probarlo con estas dos imágenes, ¿verdad? Así que volveremos aquí y haremos clic en Subir. Sólo voy a seleccionar esas dos imágenes web P y ver si eso funciona. Entonces al parecer lo hizo. Bien, genial. Entonces, en realidad vamos a darle un aviso. Por favor, usa las dos imágenes como referencia y cambia los colores y el espaciado de la interfaz de usuario. Tengo mucha curiosidad por esto porque si esto funciona bien, entonces es muy fácil construir una aplicación que no solo funcione bien, sino que también se vea bien porque puedes hacer que un diseñador profesional cree un diseño para esa aplicación y solo puedes pedirle a la IA que coincida con eso tan cerca posible. Es decir que el plan aquí es renovar la paleta de colores, refinar el espaciado y los diseños, y pasar por cada componente de la interfaz de usuario para asegurarse que estén perfectamente alineados con su nuevo esquema de color y espaciado. Bien, bien. Bueno, el plan suena genial. Veamos la implementación. Y aquí estamos. Entonces, como referencia, abrí una versión anterior de la interfaz de usuario. Esto fue, ya sabes, antes de que hiciéramos los cambios de diseño aquí. Y esta es la nueva. Entonces sí, definitivamente es diferente a lo que teníamos antes. Abramos uno de estos. No es como la noche y el día, pero creo que es una mejora. Cambió el color del acento porque las dos imágenes que le di sí, estaban usando este tipo de color naranja naranja. Sí, definitivamente hice algunos cambios aquí. Por ejemplo, agregó, como, un color de fondo claro a todas estas secciones. Como que bajó el contraste de esta frontera. Y también agregó que acabo de notar esto. Agregué como un desenfoque, como un efecto de desenfoque de fondo a esto, a la barra de parada, y creo que lo arregló. No creo que se haya arreglado antes. Entonces ahora se queda en su lugar cuando nos desplazamos hacia arriba y hacia abajo. Bien, entonces en general, sí, me gustan estos cambios, y creo que puedo seguir hablando con la IA y perfeccionar esto y hacer que se vea como lo que tengo en mente. Realmente se trata de cuánto tiempo estás dispuesto a pasar con la IA. Si estás, ya sabes, tratando de construir un MVP, como un producto mínimo viable que quieres mostrar ya sabes, stakeholders, entonces, ya sabes, crear algo como esto es más que suficiente Se ve genial. Es receptivo. Ya sabes, también funciona en el móvil. Está limpio, y siempre puedes hacer cambios visuales a esto. Así que solo quiero hacer una ronda final de pruebas solo para asegurarme de que todo funcione perfectamente antes de seguir adelante. Entonces vayamos a los clientes. Vamos a agregar un cliente. Oh, también cambió estos campos aquí. También cambió su apariencia, básicamente. Bien, agregando clientes. Trabajos, edición de clientes. Obras. Volvamos aquí. Vamos a crear una nueva factura. Seleccione cliente tres. Sí, genial. Cantidad descripción del artículo, dos de ellos por $300. Oye, vamos a una gran factura. Sí. Entonces eso funcionó. Puedo previsualizarlo bien. Puedo descargar un PDF del mismo. Y el PDF se ve así. También cambió los colores en el PDF, pesar de que no se lo pedí. Fresco. Puedo editar la factura, y después puedo eliminar facturas. Bonito. Y creo que voy a parar aquí mismo con esta app. Creo que lo conseguí a un estado muy decente ¿en qué? Una hora. A lo mejor el curso va a durar un poco más de una hora, probablemente, pero hay que entender que si tuviera que hacer todo este proceso sin hablar con la cámara, obviamente tomaría menos tiempo. Pero estoy contento con lo que he creado hasta ahora, y lo voy a terminar aquí. Por favor, únase a mí en la siguiente lección para la conclusión y los próximos pasos. Te veré ahí.