Crea aplicaciones de IA rápidamente: de una idea a un MVP sin necesidad de programar.

1. Introducción del curso: Oye, ahí. Bienvenido al curso Build AI Apps VAST. Mi nombre es Nima Tahami, y en los últimos años, he tenido la suerte de enseñar a más 18,000 estudiantes y construir Verás, la mayoría de las personas renuncian a su idea incluso antes de que realmente comiencen a construirla y lanzarla. Empiezan a pensar demasiado en todas las partes o se quedan atascados en el código Ya no necesitas tener ninguna habilidad de codificación para dar vida a tus ideas. Gracias a AI. A lo largo de este curso, voy a mostrarles los pasos exactos que doy para llevar una idea desde solo una idea hasta diseños para vivir producto. No se necesita experiencia en codificación, y te vas con una aplicación que realmente está en vivo en Internet y la gente puede usar y pagar. Entonces, si eres diseñador una vez que superas el diseño pantallas o eres un gerente de producto que quiere dar vida a sus ideas, entonces este curso es exactamente para ti. Y no vas a estar solo viendo este curso. De hecho, puedes construir junto a mí y dar vida a tu propia idea y aprender a usar herramientas como Claude y Cursor para ayudarte a construir tu aplicación de manera más rápida. Este es un súper rumbo manos a la obra. Espero que vengas listo para ejecutar realmente y finalmente dar vida a tu idea. Empecemos. 2. Nota detrás de cámaras.: Antes de continuar con las conferencias, quiero hacer una pausa realmente rápida aquí solo para mostrarles el breve detrás de escena de cómo se hacen realmente estas conferencias, se dedica mucho tiempo a planificar las conferencias y en realidad filmarlas y editarlas. Construí una herramienta llamada clip en la que ahora hago toda mi grabación, incluyendo las conferencias que estabas a punto de ver. Estoy muy entusiasmado con ello, así que por eso te lo estoy enseñando. Esencialmente dejo caer el metraje que tengo para las conferencias, y en lugar de tener que pasar, ya sabes, decenas de horas al lado del editor editando todo el curso, ahora tengo la IA dentro de esta herramienta, hago la edición para. Si estás pensando remotamente en hacer algún tutoriales o YouTube o tipo de contenido del curso, para el caso, o tipo de contenido educativo de cabeza parlante, esto podría ser muy útil. Entonces ahora mismo lo está pasando y limpiando todos los errores que cometí para que cuando estés viendo las conferencias, ya sabes, sea profesional, sea suave, esté limpio, y no estés sentado ahí perdiendo el tiempo viendo conferencias que no tienen sentido o simplemente pausas aleatorias a lo largo del video Así que compruébalo. Aquí hay un enlace si, de nuevo, te interesa filmar contenido o simplemente para hurgar y ver si es algo que puedes usar para tu propio tipo de uso diario. Disfruta el resto del curso. 3. Diseña con velocidad: Así que esta es una semana emocionante en la que realmente conseguimos construir nuestro producto, pero no cualquier producto o cualquier versión de nuestro producto, el producto mínimo viable, del que estoy seguro que has oído hablar de lo que significa la parte más valiosa del producto o el valor que nuestra empresa va a tener, vamos a empaquetarlo en una pequeña aplicación o producto y venderlo específicamente, ¿verdad? Um, entonces, por supuesto, sé que podrías tener toneladas de características en mente y toneladas de formas que quieres ejecutar en tu idea, y, ya sabes, lo mismo para mí y para la aplicación en la construcción, pero no voy a saltar a escribir una lista de 20 características y luego a construir cada una, bien. A menos que tenga la garantía de que voy a conseguir clientes para mi producto, eso va a ser potencialmente una pérdida de tiempo. Pero lo que va a ser útil es reducir qué características o qué partes del tipo de valores de los que hablamos el usuario quiere del producto y enfocarse específicamente en eso Um, así que con ese set, vamos a diseñar para la velocidad y no para la perfección. Entonces te voy a dar un ejemplo. Esta es la primera versión de mi clip de aplicación de edición que construí. Todavía no era un editor a gran escala. Primero, en realidad construí solo una característica de ese producto. Y esta característica es en realidad convertir conferencias largas o videos más largos en carretes cortos. Por lo que tardará tu video más largo, y lo convertiremos en otros más pequeños en función la transcripción y lo que sea interesante de él Y así como puedes ver, los diseños también son súper simples. No hay fantasía, como, diseño, aunque probablemente podría haber pasado más tiempo diseñando esto. Fui con la versión más sencilla que pude. Simplemente dejas caer tus videos. Y en ese momento, en realidad, incluso en los diseños, permití que la gente dejara caer varios videos, pero eventualmente recurriera a un solo video Entonces, nuevamente, desea reducir sus funciones al valor más básico que desea generar para los usuarios. Ve con eso. Lo mismo. Aquí tengo un onboarding para el video. Una vez que dejes caer el video, te preguntará, es esto sobre el curso de Figma Nuevamente, diseñé este Figma, pero en realidad, realidad incluso di este paso y lo hice para que simplemente eliges los temas que quieres exportar Una vez que analizó la transcripción, en lugar de preguntarte de qué se trata este curso, solo te hará marcar cuál de los temas quieres exportar Um, tan súper simple. Nuevamente, todo esto probablemente sea como tres pantallas en total, tal vez cuatro. Todo esto es parte de la misma pantalla. Es como una pantalla de carga. Y nuevamente, aunque soy diseñadora y busco la perfección, trato de no adentrarme demasiado en los detalles del diseño y simplemente ir con la parte más simple de este producto. Y así entonces puedes ver sus videos, y desde aquí, ellos pueden otra vez, dice editar. No hubo capacidad de edición en la primera versión. Todo lo que puedes hacer es simplemente abrirlo, ver los footages, exportarlo, eliminarlo, y luego pasar al siguiente Tan súper simple otra vez. Y aquí hasta lo tuve para que puedas tener, nuevo, carpetas para cada proyecto, y puedas entrar en proyectos. Y así para la primera versión, fue súper simple, y te animo a que hagas lo mismo. No diseñes a la perfección, diseñado para una especie de MVP o compilación de funciones, ¿verdad Entonces, concéntrate en cuál es la característica más importante de tu aplicación que realmente resuelve el punto preciso para las personas y concéntrate en eso Olvídate de todas las demás características, ¿verdad? Y así para ayudarte a hacer eso, realmente te recomiendo que también uses la sección de comunidad en Figma si estás haciendo tus diseños en Figma, lo cual animo mucho Tienen toneladas de kits de interfaz de usuario ya ahí que la gente ya ha diseñado. Te animo mucho si estás usando una biblioteca de diseño como ShatCN Esa también es una gran. Muchas empresas lo usan, especialmente si estás diseñando algo que podría tener una pantalla de tablero o algo un poco más sofisticado. Tienen toneladas de componentes como gráficos que puedes usar y dashboards Entonces definitivamente refiérase a este de aquí. De nuevo, si abres alguno de ellos, digamos que abrí este primero por aquí. Nuevamente, esta es una biblioteca de diseño que está abierta por Verso y que puedes usar. Para que puedas ver todos los componentes que ya tienen. Al igual que, no necesitas diseñar un componente de entrada desde cero, solo arrastra uno desde aquí. Tienen el tipo de colores, y también hay versiones más extensas de estos, creo. Entonces, si nos fijamos en éste, tienen, como todos los componentes desglosados por páginas. Entonces tienes diálogos de alerta, um, avatares, insignias, navegación por migas de pan, grupos de botones, así sucesivamente y así sucesivamente Así que explora lo que tienes a tu disposición y no trates de inventar desde cero. Y verás a medida que empecemos a construir realmente nuestro producto, aprovecharemos estas bibliotecas en lugar de hacer todo desde cero. Entonces, a medida que avanza sobre el diseño del producto y volveremos y realmente usaremos ChatGPT para ayudarnos a reducir nuestro conjunto de características, tenga esto en cuenta que desea usar bibliotecas externas Quieres mantenerlo simple número mínimo de páginas que necesitas para tu app. No necesitas configuraciones elegantes o funciones de perfil solo en, ya sabes. Entonces esos pequeños detalles importan a escala, pero inicialmente, cuando recién estás comenzando, en realidad no necesitas dedicar tiempo a elaborar todas las páginas individuales Vuelve y luego empieza a planear realmente, ¿qué vamos a construir? Voy a hablar de mi producto, pero obviamente, mientras hago esto, haces lo mismo por tu producto. 4. Cómo usar ChatGPT para planificar nuestra aplicación: Correcto, así que nos estamos preparando para comenzar a trabajar en nuestra primera versión de nuestra aplicación antes de ir a construirla e incluso a redactar las características que queremos. Queremos aprovechar la IA, por supuesto, para ayudarnos a decidir algunas de esas características. Y uno de mis ejercicios favoritos para hacer es platicar con ChatGPT sobre, ya sabes, la primera versión de nuestro producto Entonces aquí, he escrito un prompt, ayúdame a planear la primera versión de un MVP de una app Para una aplicación que ayuda a los usuarios a realizar un seguimiento de los gastos y dividir fácilmente las facturas en los viajes y solo escribir las funciones que más generarán valor para los usuarios. Investigue qué competidores como split wise faltan en su producto o qué se quejan los usuarios en línea. Esto hace dos cosas. Una es que nos da algunas características que son más importantes que vamos a construir en lugar de simplemente todo lo que podamos construir. Entonces también va a echar un vistazo a una especie de un poco en línea, tal vez en reedición y otras fuentes Por lo que en realidad buscará esos recursos cuando le digas que investigue algo para ver en línea cuáles son sus quejas de esos productos, si quieres, puedes ser más específico y decir, Mira en reeditar y sitios web como G two, que es la plataforma de revisión para aplicaciones Entonces vamos a darle a Enter y ver qué se le ocurre. Y como puede ver, buscará la web y luego elaborará un plan MVP basado en las quejas reales de los usuarios de Redt, revisará los paneles piloto de Trust y de comentarios de aplicaciones Entonces en base a eso, volví con fricción artificial y muros de pago, el mayor dolor. Esto tiene sentido. Cada vez que uso Blitwise, como, solo puedes agregar cierto número de transacciones Como dice aquí, hay tres al día que realmente puedes agregar, y luego te obliga a pagar por la aplicación, ¿verdad? Entonces esto podría ser interesante para nosotros aprovechar y realmente hacer un producto que tal vez sea, ya sabes, pagar una vez, como un trato de por vida o algo así. Paga, no sé, 20, 30, 40 pavos. Nuevamente, vamos a llegar a los precios, pero pagaremos X cantidad de dólares. Obtienes el producto, no necesitas preocuparte por cada vez que te pida un pago, ¿verdad? Y entonces creo, dividir los cargos amplios un par de dólares al mes. Pero de nuevo, podría ser molesto que siempre te golpearan con esa pantalla, y sé que me pasó antes. Cualquier fricción se siente inaceptable. Así que vamos a construir con eso, ¿verdad? Aunque esa no es una característica, es una experiencia de usuario sobre la que vamos a construir y construir una mejor versión de la misma. Demasiada fricción de configuración tiene sentido. Yo también lo he hecho. Hay grupos involucrados, y las invitaciones pueden ser desordenadas. Entonces, si invitamos a amigos, vamos a hacerlo súper simple. De hecho, vamos a lograrlo para que ni siquiera necesites ingresar sus correos electrónicos, tal vez solo compartas un enlace y la gente pueda auto unirse a viajes sin tener que conocer sus correos electrónicos con anticipación. Entonces, si vamos a construir esto, lo vamos a construir de una manera en la que los usuarios puedan dar el menor número de pasos para invitar a amigos, ¿ verdad? Entonces vamos a mantener eso adentro. No es una característica necesariamente. Nuevamente, es una mejora de la experiencia de usuario, pero estoy construyendo esto con el diseño como diferenciador, y tú quieres hacer lo mismo Así que sigamos adelante y tenlo en mente. Y a medida que atraviesas esto, nota también, ya sea en papel o en tu computadora, anota lo que quieres hacer que sea diferente a lo están haciendo los competidores por ahí para que eso te ayude a diferenciarte. Confundir conformarse modelo mental, ¿verdad? Entonces, cuando intentas conformarte, la gente no necesariamente entiende cómo funciona, poco claro quién debería pagar a quién demasiadas microtransferencias, torpeza emocional Y así también podemos cocer eso en el producto, ¿verdad? Una vez terminado el viaje, ¿por qué no hacemos que sea súper sencillo averiguar quién tiene que pagar cuánto? Tal vez incluso enviarles recordatorios por correo electrónico o algo así, ¿verdad Me di cuenta en split wise, no he recibido ningún recordatorio cuando necesito pagarle a alguien Me envía como estados de cuenta mensuales, pero eso es diferente a, ya sabes, cuando necesitas darle un codazo a tu amigo para, oye, como, ¿ me puedes pagar esto como 100 dólares por lo que sea esto como Airbnb, verdad Entonces esos podrían ser como momentos incómodos, y así ese podría ser otro ángulo para diferenciar nuestro producto de split wise. Así que sí, aquí hay toneladas de cosas que no voy a entrar demasiado en detalles, pero voy a tener en cuenta para mi proceso de diseño. Así que la oportunidad central, los usuarios no quieren una herramienta financiera. Quieren un ayudante de coordinación de viajes que maneje el dinero automáticamente. Estamos de viaje, solo haz esta lista de esfuerzos. MVP solo características que impulsan creación de viajes instantáneos de valor real, ¿verdad? Entonces esto es decir que no hay cuentas. Crear un viaje, generar compartir Vincular exactamente lo que tenía en mente también. La gente se une a través de Link. No se requiere registro. No estoy 100% seguro en la parte de registro y solo por el hecho de que todavía necesitamos que los usuarios se autentiquen Pero pude ver que potencialmente también funciona. Entonces, al menos una persona necesita crear una cuenta para crear el viaje, pero potencialmente los invitados no necesitan hacerlo. Y nuevamente, estos son ahora mismo, solo estamos haciendo una lluvia de ideas. Cuando bajemos a la parte del edificio real, lo que va a suceder poco después, en realidad los definiremos antes de seguir adelante. Incluso viene con un montón de características que dice ChatGPT, seguro, no las pongas en el MVP, y vamos a tener eso en mente, como, ya sabes, integración bancaria, suscripciones, etcétera Entonces esto es lo que se le ocurrió. Dice, Cor loop, crear un viaje, compartir enlace, agregar gastos al instante, ver saldo, claramente, liquidar con pagos mínimos. Creo que es genial, ¿verdad? Entonces esto es un poco más simple que todas las demás características que configuró aquí. Pero si construimos una versión fácil de esto, realmente la característica es solo una cosa. Y eso es, ya sabes, poder liquidar tu viaje en base a los gastos, ¿verdad? No estamos construyendo a pesar de que nos está diciendo este bucle de diferentes tipos de pantallas que podríamos necesitar, es posible que necesites una pantalla para crear un viaje. En la misma pantalla puedes compartir enlace. Agregar gasto sería parte de la misma pantalla, viendo saldo, nuevamente, misma pantalla. A pagos mínimos, vamos a llegar a sólo una ola desde la misma pantalla exacta que en realidad se puede ver quién es el dueño de qué. Obviamente, la pantalla va a tener diferentes estados y diferentes componentes, pero vamos a mantener esto lo más limpio posible. Obviamente, también necesitarás una pantalla de inicio para poder crear viajes desde. Entonces tienes una pantalla de inicio para ver todos tus viajes. Um, entonces dentro de la página de viajes, no necesitas navegar a diferentes lugares, un lugar súper simple para ver qué es un total, cuál es el saldo corriendo, ¿a quién le pertenece qué? Y luego una capacidad de agregar tipo de gastos, y vamos a mantenerlo lo más limpio posible e ir con el menor número de pantallas posible, nuevamente. Entonces con eso en mente, voy a empezar con los diseños. Tú haces lo mismo en la próxima conferencia, volveré a explicarte cómo he hecho mi diseño y cuáles son las decisiones que he tomado alrededor de las páginas que acabo de explicar ahora mismo. Entonces voy a diseñar esas primeras dos o tres pantallas principales, autenticación, todos los viajes y luego páginas de viaje individuales específicas. Entonces voy a diseñar eso. Diseñas tus pantallas esenciales, mantenlas abajo a tres o cuatro como máximo, si puedes. Sé que algunos productos pueden ser un poco más complicados que otros, pero de nuevo, trata de mantenerlo al mínimo y a las pantallas más importantes. Te veré en un minuto y ganas de ver también tu diseño. 5. Decidir sobre el dispositivo: Antes de comenzar realmente su proceso de diseño, tal vez se pregunte, ¿debería construir una aplicación web? ¿Debo construir una aplicación móvil? ¿Debo construir una aplicación de escritorio? Hay toneladas de preguntas ahí en términos de qué construir y también con qué pila construir. La pila son todas las herramientas y los softwares que vamos a utilizar para construir realmente nuestra aplicación Ahora, mi opinión sobre esto es súper simple. En general, solo voy con una aplicación web que sea amigable para dispositivos móviles, que los usuarios puedan acceder a ella en la web en su navegador a menos que ahora aquí es donde entran en juego las aplicaciones nativas. A menos que estés haciendo algo específico, como la edición de video, algo que implique la máquina de parada del usuario. Quiere utilizar parte de esa memoria o energía o almacenamiento. Para mi clip desktop Editor, decidí hacerlo realmente solo para escritorio, pero está procesando localmente toda la edición de video, y el renderizado, y no tengo que hacerlo en un servidor, lo cual podría ser costoso, especialmente para empezar. Ahora, para una aplicación web simple como Bitwise petitor friends en viajes, ser capaz de dividir facturas Una aplicación web es suficiente. Ahora, podría inclinarme hacia hacer una aplicación nativa más tarde, que puedo enviar a las tiendas de aplicaciones y los usuarios pueden descargarla en su teléfono. Será útil si mi ENS va a estar usando esta aplicación a diario o semanalmente, especialmente si voy a rutas b2b y tengo usuarios que podrían estar viajando semanalmente por trabajo Ese es un lugar donde hacer una aplicación nativa móvil tiene más sentido. O tu caso, si estás construyendo una aplicación que involucre al usuario para interactuar con esa aplicación diaria o semanalmente y con frecuencia, podría ser una mejor experiencia construirla como una aplicación nativa. Por supuesto, todos vienen con sus retos. Si haces una aplicación nativa, entonces tienes que enviarla a la tienda de aplicaciones y Apple tiene que revisarla antes de que puedas verla en vivo en la tienda de aplicaciones. La tienda de aplicaciones también puede ser súper competitiva. Pero también si estás haciendo una Web App, también enfrentarás ese reto. Pero hay pros y contras para. Tienes que decidir por ti mismo en base a eso, qué tiene más sentido. Nuevamente, en general, solo iría con una aplicación web que sea accesible en el navegador. Todos tienen un navegador en su teléfono y hay que pensarlo de verdad. ¿Es tu aplicación un SAS al que solo se puede acceder en la web en una computadora, entonces en ese caso, es una elección fácil. Pero si estás construyendo algo donde gente podría usarlo más en el móvil, entonces la elección se vuelve un poco más complicada. Pero nuevamente, me inclino hacia una aplicación web a menos que tengas casos específicos en los que el usuario necesite A, usar la potencia de la máquina del dispositivo en la medida en que, por ejemplo, un juego, o si quieres construir una aplicación que los usuarios usarán a construir una aplicación que los usuarios diario o semanalmente, por ejemplo, digamos, una aplicación de compras. Ahora, ten en cuenta, más adelante, siempre podrás cambiar tu stack. Siempre puedes hacer que tu aplicación web también sea una aplicación móvil. Solo empieza con lo básico, empieza con lo que sea el más rápido, y por eso sugiero una aplicación web para la mayoría de las ideas. 6. Cómo inspirarse: Bien, ahora que hemos decidido qué queremos construir y cuáles son las características que queremos construir en torno a él para nuestro MVP, necesitamos algo de inspiración de otras herramientas que ya existen para armar nuestra propia aplicación La mejor manera de hacerlo es usar esta plataforma llamada Mobiin que tiene capturas de pantalla de literalmente miles de aplicaciones diferentes, e incluso muestran animaciones como parte de ella también Esta es una gran herramienta para ver qué están haciendo otras aplicaciones. Entonces aquí arriba, en realidad puedes buscar por la aplicación específica. También puedes filtrar por si buscas diseños web o el IOS o el móvil. Entonces aquí arriba, voy a buscar split wise porque esa es una herramienta similar a la que voy a estar construyendo. Si la abro, puedes ver todas las pantallas sabias divididas que aparecen aquí. En realidad puedes seguir adelante y guardarlo. Voy a salvar esa. ver todas las pantallas individuales aquí. Aquí tenemos sumar y gasto. Voy a estar usando algo de esto para poder diseñar realmente. Se puede ver exactamente cómo se pueden hacer las divisiones. Cómo muestran su página de transacciones e incluso tienen algunas páginas adicionales aquí abajo. A medida que avanzas sobre eso, en realidad puedes seguir adelante y seleccionar pantallas individuales. Me gusta seleccionar estas pantallas por aquí para agregar en flujo de gastos. Voy a seguir adelante y copiar estos tres. Tienen este enchufe que puedes instalar y luego dirígete a la aplicación, golpea Ejecutar. Entonces a partir de aquí, en realidad puedes pegar las pantallas. Voy a golpear al Comando V. Y se adelantó y pegó esas pantallas aquí dentro Mientras estoy diseñando mi app, voy a estar echando un vistazo estas pantallas en busca de inspiración. Eso se puede hacer, por supuesto, con múltiples aplicaciones diferentes. Si buscas en Mobiin, definitivamente encontrarás las capturas de pantalla para tus competidores y las usarás como inspiración para tus propios diseños Hay una forma más súper útil de usar mobiin y esa es la pestaña de flujos de aquí Desde las pantallas, si realmente cambias a flujos, puedes buscar pantallas más fácilmente. Por ejemplo, quiero echar un vistazo a cómo la gente agrega gastos en split wise. Puedo ver la categoría de flujos. Entonces aquí vamos a ir a sumar y Gasto, y tenemos todas las pantallas relacionadas con agregar un gasto lado a lado, lo cual es súper útil. Ahora cuando estoy diseñando mi propia app, me aseguro de no perderme nada de este flujo. De nuevo, puedo o bien guardar esto en mi colección móvil, llamarlo Aplicación de gastos de viaje, pulsar Crear, o de nuevo, puedo copiarlo a Figma. 7. Planificación de nuestras características: Ahora que vimos algunos ejemplos de aplicaciones que hacen una funcionalidad similar, voy a correr por las maquetas o ahora su mayoría wireframes los que armé Ni siquiera wireframes, sino sobre todo solo requisitos, diría yo Para la página de autenticación, saqué de la biblioteca ShatSN Figma, pantalla registro simple O pantalla de inicio de sesión en este caso, voy a mantener la pantalla de registro luciendo muy similar con una imagen aquí, entrada a la izquierda, y luego potencialmente una verificación de correo electrónico que se ve así. Nuevamente, saqué esto directamente de esa biblioteca CN de chat. Ahora voy a tener una página de bienvenida que rápidamente pida el nombre del usuario y potencialmente incluso para hacer su primer viaje. Estos serían tres campos rápidos para poder obtener el nombre de ellos así como su primer viaje, lo que implicará el nombre del viaje y las fechas, pero las fechas, estoy pensando en tenerlo en su lugar. Entonces una vez que van a su tablero, que es la pantalla principal de inicio, ven todos sus viajes. Pueden crear un nuevo viaje a partir de ahí, hacer clic en un botón para crear un nuevo viaje. Ellos ven un Navbar Luego debajo de cada viaje o para cada tarjeta de viaje, va a haber un nombre dentro de ella, fechas potencialmente a quienes se han unido, y se puede ver quién y cuántos estados Yo sea si los viajes concluyeron, todos pagados o aún está en curso, digamos, costo total. Ahora bien, esta podría ser opcional. Nuevamente, nada de esto está escrito en piedra por ahora y el costo para el usuario. Para el usuario que lo está viendo desde su tablero, el costo de este viaje para ellos. Entonces un enlace de copia rápida sería bueno que ni siquiera tengas que entrar en el viaje si quieres invitar rápidamente a alguien más a él. Ese va a ser el tablero, súper simple otra vez. Entonces finalmente, la página del viaje. La página del viaje va a tener todos los detalles sobre el viaje. Va a ser el nombre, fechas, nuevo, potencialmente opcional. Toda la información de la tarjeta, todo el camino hasta aquí, donde el usuario puede realmente dejar el viaje o eliminarlo si lo creó, pueden asentarse y te da un simple desglose de quién debe, cuánto a quién si es un público o si un usuario que no está autenticado o conectado visita, pueden ver un botón para unirse al viaje y luego estarán se le solicita registrarse y unirse, súper simple dos clics Max. Si el usuario está creando un viaje, entonces todo lo que necesita hacer es agregar un nombre las fechas serán opcionales y luego simplemente presionar Copiar enlace para compartirlo. Para agregar un gasto, va a haber un flujo simple. Estoy pensando de nuevo, en la misma página, no creo que quiera mostrar ni siquiera un pop up u otra página, pero una vez que me ponga a diseñar, los averiguaré en detalle. Entonces tenemos el nombre del gasto. ¿Cuál fue este gasto? ¿Cuál fue el total? Quién estuvo involucrado, y luego algunos tipos divididos. ¿Era igual? ¿Fueron cantidades o porcentajes específicos entre personas, o incluso potencialmente, estoy pensando que esta es una nueva. No he visto esto en otras herramientas, pero en días. Imagina algo como Airbnb si alguien se quedó 20 días frente a 30 días, simplemente pon cuántos días o cuántas noches se quedó alguien en comparación con todos los demás y esta manera puedes calcularlo fácilmente. agradable tenerlos pero Es agradable tenerlos pero probablemente lo vamos a mantener fuera del MVP, al menos para mí Las etiquetas que etiquetan podrían ser tipos de categorías de cercas, ¿ era un costo de comida o era B&B, vivienda, etcétera? Después también selección de moneda. Si quieres tener varias monedas, eso también estaría bien porque como puedes imaginar, si tienes varias monedas en la app, podría complicarse un poco más. Por ahora MVP, primera versión, los usuarios vienen y se quejan después de esto Pero por ahora, solo queremos sacar lo más rápido posible la primera versión. Entonces va a haber una sola moneda, cualquiera que sea la moneda que conozcas, use en tu país o en el país del usuario, vamos a ir con eso. Entonces estos ya están todos establecidos. Nuevamente, algo de esto podría cambiar y cambiará en el proceso de diseño y desarrollo real. Todavía no es necesario tener una imagen cristalina de él en la etapa de enmarcado o planificación de alambre de sal Hemos mirado algunos ejemplos. Elaboramos una lista de lo que queremos en cada página. Súper simple. Nuevamente, aparte de la autenticación, que aquí son dos páginas, todo lo demás es solo una pantalla de bienvenida y otras dos pantallas. Esto es lo que realmente es un MVP. Incluso podrías ir un paso más allá y hacerlo menos, pero yo diría que este sería el producto mínimo viable que también es valioso. Queremos que sea valioso. No queremos que sea demasiado MVP tampoco donde es muy poco para cobrar porque recuerden, estamos cobrando por este producto y no se va a congelar También queremos asegurarnos de que genere valor y se vea profesional y limpio. Pero no necesariamente necesitas miles de funciones para cobrar a los usuarios, una simple es suficiente. Sí, voy a empezar a diseñar ahora con todas estas pantallas. Vuelve y explica mi proceso de diseño y espero que hagas lo mismo. 8. Revisión de diseños: Bien, así que ya terminé de diseñar mi primera versión. Y nuevamente, no estoy súper orgulloso de esto porque se supone que este es MVP Junté estos diseños en quizá menos de, diría yo, cuatro o 5 horas. La clave aquí es la velocidad y eso es lo que quieres para tu primera versión. Um, así que de nuevo, tengo autenticación aquí. Muchos de estos componentes, ya ves, los saqué de la biblioteca ShatSN en Figma. Lo puedes encontrar en la sección de comunidad. Yo pegué la pantalla de verificación de ahí, y entonces esta es una página muy simple ¿cuál es tu nombre Se ve un poco sencillo, así que tal vez en el MVP real, lo haré un poco mejor Y luego tenemos el MiTripspage. Tengo mis viajes aquí. Uh, Bali con siete amigos, y esto es lo que se te debe. Así que de inmediato, te haces una idea para todos tus viajes, cuánto te deben o cuánto debes. Entonces en este caso, se me debe algo y agrego este pequeño y agradable toque aquí, igual que, ya sabes, sello que obtienes en un pasaporte. Así que poco toque de diseño como ese sigue siendo, um importante, diría yo. Entonces MVP no quiere decir que debas hacer algo feo. Um, ya sabes, no es fácil de usar. Simplemente significa la versión más simple que puedes poner ahí fuera y que no te cueste semanas de tiempo de desarrollo. Enlace de copia rápida aquí, para que los usuarios puedan copiar rápidamente el viaje y enviarlo a sus amigos. Pueden crear un nuevo viaje y si están en esta página y aún no tienen ningún viaje, tienen un estado un poco vacío como este. Nuevamente, saqué esta plantilla de la biblioteca de Chat CN, le hice algunos ajustes, y aquí estamos Uh entonces la página más importante. Empecé con dos versiones. Primero, empecé con esta versión y empecé a armarla, y estaba un poco por todas partes y me recordó a split wise. Aquí es donde entra en juego ChatGPT. En realidad, antes que nada, se lo pregunté, ¿cómo puedo hacer que mi app sea diferente? Desde la perspectiva del diseño, cuáles son las cosas que de otra manera yo. Una de las cosas que enfatiza es contar una historia y hacer que sea fácil entender exactamente dónde te encuentras con tu saldo. En lugar de liderar con transacciones, lideramos con cuánto me deben los usuarios y pueden entender fácilmente. Le di el primer diseño y le dije: ¿Qué opinas de esto? Esto es lo que tengo hasta ahora. Nuevamente, iteró conmigo. Me lo dije, tener un resumen más claro para los usuarios. A medida que empecé a actualizar el diseño cada vez más y más, seguí enviando versiones y obteniendo algunas ideas. Obviamente, no implementé todo esto, pero en algún momento, decía, eres lo suficientemente bueno para lanzar esto como MVP. Este fue V uno. Diseñé esto para que se me ocurriera algo así. Ahora aquí en la página de viajes, tengo invitar a amigos aquí arriba. Ese es el CTA principal, todos los viajes que puedas volver a todos los viajes, y luego aquí abajo, tener alguna información rápida de quién creó el viaje, cuándo y cuántas personas están involucradas Estoy pensando que tal vez si pasas el cursor sobre él, puedas ver la lista real de personas o algo así Nuevamente, esas pequeñas interacciones que tratamos en el proceso de desarrollo real. No necesitas ir súper a fondo con tus diseños. Entonces tienes una lista de saldos como quién te debe cuánto de inmediato, sabes cuánto se te debe en total y quién tiene que pagarte Marca rápida pagada. No necesitas hacer un arreglo completo en otras aplicaciones. Aquí vemos la actividad del viaje, luego puedes ver todas las transacciones listadas una por una. ¿Cuáles fueron las transacciones? Título, ¿quién lo adiciona y quién estuvo entre? Lo más importante, ¿ cuánto te devuelves o cuánto debes si tienes que pagar por algo? Nuevamente, súper simple, no agrega un gasto aquí. Todavía no he trabajado en esa pieza por agregar un gasto. Ese es mi diseño. Espero que hayas hecho algo similar para tu app. Nuevamente, manténgalo en el número mínimo de pantallas si no ha iniciado este proceso y aproveche ChatGPT y otras herramientas de IA para darle algunos comentarios al respecto, pero no confíe completamente en él porque nuevamente, no es perfecto , no es diseñador, a veces te dirá lo que quieres escuchar o te dirá algunas cosas extra que podrían no ser relevantes. Ahí es donde tú como diseñador también o tu lado diseñador puedes salir y contraatacar o desafiar un poco con IA aquí. Um, así que sí, ahí lo tenemos y es hora de empezar a construir esto. Entonces, antes de saltar al Cursor real y construir esta aplicación, repasemos qué pila usaremos realmente. 9. Elección de una pila: Bien, finalmente llega a la parte emocionante, construyendo nuestra primera versión, nuestra app MVP Vamos a repasar la pila que vamos a estar usando o al menos voy a estar usando. Si quieres seguir adelante, usa la misma pila, por favor hazlo por todos los medios. Si ya tienes una pila que prefieras, hacer la misma pila esencialmente se refiere a todas las herramientas y lo que estás usando para codificar tu aplicación o darle vida. En este momento solo estamos diseñando Figma, es una aplicación que nos permite diseñar nuestras pantallas Pero para convertir realmente ese diseño en una verdadera aplicación web funcional y tenerla en vivo para que la gente la use, pague, reciba correos electrónicos , etcétera, necesitamos usar una pila para que esencialmente todo funcione, tanto en términos del front-end, que es la parte de diseño y el back end, que es toda la parte del servidor que maneja toda la información y los datos. Así que muy rápido, repasemos lo que voy a usar y luego decides por ti mismo si quieres seguir esto o usar otro ciervo Las principales herramientas que usaré para codificar este proyecto serán Cursor, que es la herramienta de codificación de IA. Cuenta con un agente de IA integrado con el que puedes chatear, y por supuesto, usa modelos como Cloud así como GPT Um, y otros para darle vida a la idea. Entonces tenemos el repositorio de código en Github. Aquí es donde se almacenará el código. Cada vez que actualices el código, eventualmente también lo enviará en vivo a los usuarios, lo que discutiremos en un segundo cómo funciona eso. Para la pila, la aplicación web real se construirá con NexGs lo que nos permite crear aplicaciones y API tanto front-end como backend, y luego para la base de datos, cómo estaremos almacenando los datos o donde estaremos almacenando los datos, será a través de Mongo DEB, que es súper fácil de configurar Ahí es donde estaré usando para almacenar mis datos de usuario y viaje. Siguiente ATJS esencialmente nos permite autenticar a los usuarios, por lo que les permiten simplemente registrarse, tener algunas opciones de registro simples como iniciar sesión con Google, correo electrónico, etcétera Versal es lo que usaremos para desplegar nuestro código. Una vez que se implementa nuestro código en GitHub, irá y se sentará en Versal que esencialmente aloja la aplicación y el back end. A partir de ahí incluso podemos ver cosas como analíticas y registros y cosas por el estilo. Stripe será la compañía de pagos para ayudarnos a procesar los pagos de esta aplicación. Nuevamente, decidiremos cómo fijar el precio de nuestra aplicación, pero una vez que lo hagamos, Stripe es la herramienta que usaremos para procesar esos pagos. Reenviar es una herramienta de envío de correo electrónico. Tanto para las notificaciones como para los correos electrónicos de inicio de sesión, usaremos Reenviar para enviarlo prácticamente todo esto es gratis para empezar Todos tienen planes pagados, por supuesto, y cosas como Stripe, Stripe solo cobra el porcentaje de las transacciones para que no tengas que preocuparte por ningún otro pago de ellas. Nuevamente, todos los demás, ya sea gratis o gratis para. Estos son algunos opcionales. AW es para almacenamiento. Si quieres almacenar imágenes de usuario o subidas de recibos, en mi caso, lo estaré haciendo usando AWS De nuevo, para MVP, probablemente dejando eso fuera. Google Analytics es bueno para realizar un seguimiento de los datos de visitantes y usuarios. Otra buena herramienta de análisis es PosThG donde incluso puedes obtener más información como mapas de calor y cómo interactúan los usuarios y qué están viendo cuando interactúan con tu aplicación Muy bueno para depurar y cosas así para averiguar dónde están los problemas Entonces definitivamente una buena útil. Pero nuevamente, la censura Super base opcional reemplaza off y base de datos, por lo que no necesitarás Next JS y Mongo DB Si usas Super Base y creo que incluso para algunos correos electrónicos de inicio de sesión, probablemente tampoco lo necesites. Voy a reemplazar algunas cosas. Pero otra vez, realmente no lo he usado porque realmente no veo tanta necesidad ya tenemos una pila resolverlo. Si estás estudiando y quieres probarlo, tampoco es mala opción por lo que sé. Esta es la pila que vamos a usar. Ahora vamos a empezar saltando a Cursor. Antes de eso, realmente vamos a configurar nuestro proyecto en el siguiente video y luego volver a empezar a trabajar en él. 10. Configuración de nuestro proyecto: Todo bien. Antes de comenzar, quieres instalar NOJs. Dirígete a nojs.org y golpea a Genjs. Necesitarás esto para poder crear realmente una nueva aplicación usando la pila que discutimos. Nuevamente, si no quieres seguir esa pila y ya tienes tuya o ya te diste cuenta de que no hay JS, no necesitas seguir esto obviamente. Esto es si solo estás haciendo esto por primera vez y nunca has creado una aplicación NOJs Una vez que hayas terminado, quieres seguir adelante y abrir terminal. Así que desde tu máquina o desde tu carpeta de aplicaciones, sigue adelante y encuentra la app llamada terminal. Se ve algo así, y entonces realmente puedes seguir adelante y crear una carpeta en tu escritorio o donde sea que ya guardes tal vez código u otros proyectos para ti mismo. Si tienes una carpeta, lo mejor es navegar a esa carpeta. Ya tengo una carpeta llamada código. Yo sólo voy a hacer código de CD así. Ahí vamos. Estoy dentro de la carpeta de códigos. Obviamente, si tienes una carpeta para ti, hazlo ahí. No es necesario. Esto es solo más para la organización. Entonces quieres escribir NPX, crear Next App, tenía Enter, y te va a preguntar, cuál es el nombre del proyecto Por ahora, voy a llamar a esta app de Trips y presionaré Enter ahí. De hecho voy a personalizar la configuración, así que voy a elegir mis propias preferencias, solo ve aquí abajo. No voy a usar TypeScript, voy a usar yes int, dale no a este, sí a ese El resto, voy a mantener el default. Sí, no. Ahí vamos ahora, está instalando. Nuevamente, así es como configuro proyectos, no hay que seguir esto, pero es como lo haría yo. Está yendo y creando ese proyecto ahora mismo. Ahora dentro de esa carpeta, tengo esta app de gastos de viaje y se ha ido adelante y ha creado todos los archivos. Lo que quiero hacer ahora es abrir esta carpeta dentro de Cursor. Ya tengo instalado Cursor. Si no lo tienes instalado, adelante y hazlo. Entonces una vez que lo abro Cursor, veo que me sale esta interfaz aquí. Me gusta tener la barra lateral por aquí, la barra lateral primaria. También puedes hacer Comando B. Y ahora puedes ver todas las carpetas aquí, lo cual es perfecto. Incluso puedes seguir adelante y ejecutar este proyecto. Voy a abrir una nueva terminal yendo a la pestaña arriba en la barra de estado o en la barra de menú y golpeando terminal y golpeando Nueva terminal. Por aquí, si ejecutas NPM ejecuta Dev So, seguirá adelante y en realidad ejecutará el proyecto y se abrirá en un nuevo navegador Así. Si tienes esto, eso significa que has creado una aplicación sin JS y está funcionando bien. Esto va a actuar como nuestro beisón para el código o el proyecto que usaremos Volvamos en la siguiente conferencia para empujar esto a GitHub o repositorio de código. 11. Uso de Git: Todo bien. Queremos realmente poner nuestro código que acabamos de crear, pesar de que es una base en este momento en Git Hub para que el código se almacene allí. De esta manera, cuando hacemos actualizaciones a nuestro código, podemos empujarlo hasta allí para que se guarde con todos los cambios. Entonces más adelante cuando conectemos la versal, que si recuerdas es la plataforma de hosting, automáticamente tomará el último código de GitHub e implementará eso a los usuarios o en línea en tu dominio para que los usuarios puedan usar tu producto fácilmente. Um, es súper sencillo configurar Git a través de Inside of Cursor. Obviamente, puedes hacerlo a través de github.com y pasar por el registro ahí así que crea una cuenta si ya no tienes Pero por aquí, si solo vas a la pestaña esencialmente de Git por aquí, puedes crear tu primer, ya sabes, Commit. Yo solo voy a hacer Commit inicial así y publicar esta rama. Ahora, ahora mismo, me está diciendo, ¿quieres hacer de esto un repositorio público? ¿Es decir, todos en GitHub pueden ver mi código o uno privado? Para la mayoría de los casos, quieres crear un repositorio privado a menos que estés haciendo algo así como un proyecto de código abierto. Pero de lo contrario, vas a elegir privado y enseguida, va a publicar a eso. Entonces incluso puedes abrirlo en GitHub. Si presionas Abrir en GitHub, se crea en mi cuenta de GitHub esta app de gastos de viaje como un repositorio privado con todo el código aquí. Uh, y así ahora si haces algún cambio en el código, solo como ejemplo, voy a ir a la página punto JS, que es, ya sabes, esa pantalla inicial que vimos. Entonces, antes que nada, voy a asegurarme de que la app esté funcionando. Entonces esta pantalla inicial, digamos, solo quiero actualizar el texto aquí para comenzar, um, ya sabes, y cambiar esto a gasto de viaje. Er hit Guardar eso automáticamente, por cierto, actualiza esto. Ahora tenemos esto. Entonces podemos ver si te diriges a la pestaña Git, podemos ver que hay cambios en el punto de página JS, y podemos ver si haces clic en él exactamente qué cambió, esta línea cambia a esto, que es correcto, y entonces realmente podemos hacer este cambio de texto de Commit. Entonces presionaremos Commit y luego sincronizaremos estos cambios. Este cambio ya está disponible en GitHub también. Si vas en tu Si abro este repositorio de Git Hub, nuevamente, puedes ver justo ahora hubo un commit y puedo ver todos los commits aquí Eso lo mantiene fácil con el fin de realizar un seguimiento de todos los cambios que has hecho en tu código a lo largo del tiempo, en caso de que hayas cometido un error en alguna parte, siempre puedes volver a uno de estos commits Es por eso que usamos Git a lo largo del proyecto como lo estoy haciendo, vas a ver que lo use varias veces entre cada característica o implementación o pantalla para que haga cada característica o implementación o un seguimiento del progreso en caso de que vuelva a haber algún problema, pueda volver atrás o retroceder al commit anterior. 12. Elección del modelo de cursor: Quería tocar brevemente las diferencias entre los diferentes modelos y modos de agente y cómo los uso. En cuanto a los modos, tienes el modo Agente, que hemos estado usando para dar tareas para que Cursor las complete por nosotros. Pero también tenemos el modo plan que antes de que el agente tome medidas para cambiar el código, le pedimos que planifique las cosas y nos diga qué va a hacer y cómo implementaría algo para que podamos revisar un documento antes de que realmente se implemente. También hay modo de depuración, que puedes pedir para abordar específicamente errores y también preguntar modo si solo quieres hacer preguntas sobre tu código o cómo funciona tu app en este momento. De los modelos, en realidad puedes desactivar Auto si no quieres y puedes activar el modo Max si quieres la cantidad máxima de tokens utilizados para esa tarea. Composer es el propio modelo del cursor que funciona bastante bien. Eso lo he intentado muchas veces. Ops también es genial, incluido Sont. Normalmente no trabajo con los modelos GPT, pero también están disponibles aquí Mi favorito personal es Sonnet o compositor de operaciones también. Pero ten en cuenta que no es necesario a menos que estés dando alguna tarea más compleja o complicada con la que normalmente tendría problemas el autómata Una vez que tengas un poco más de complicación o tarea complicada para darle a Cursor, ahí es cuando usaría esos modelos, teniendo en cuenta que por supuesto, costó más fichas y créditos usarlos. 13. Añadir página de inicio: Por supuesto, hay múltiples cosas que puedes hacer desde aquí. O bien configura las rutas API para el backend, puedes hacer la base de datos y configurar MongoDB Puede configurar la interfaz de usuario y los diseños. Lo que me gusta hacer personalmente es configurar primero los diseños y luego entrar en la funcionalidad de la app, uno de los errores más grandes que veo en la codificación de vibra es darle la app todo lo que hacer a la vez. Una vez que haces eso, técnicamente pierdes el control de todo y luego tienes que regresar y decirle que haga cambios por todas partes. Pero si mantienes controlado todo el aspecto de codificación de la vibra, donde solo das una tarea, una cosa a la vez para trabajar, no solo podemos controlarla y contenerla porque podemos ver lo que hace cada página a la vez, sino que también es mejor porque está más organizada y hay menos posibilidades de que ocurran errores. Aunque estoy bastante seguro de que todavía hay errores que van a venir oh, voy a empezar con la interfaz de usuario. Voy a empezar con la página principal. Aquí, de vuelta en los diseños, tenemos las páginas de autenticación, y estoy seguro de que podrías necesitar páginas de autenticación para ti también. Pero mi página principal es una página de tablero, y si tienes una página de panel o página de inicio como esta, siempre puedes comenzar con esa y eso es lo que te animo a que hagas. Um, y vamos a usar lo se llama Figma servidor MCP, que esencialmente crea una conexión entre Figma y Cursor para poder hacer eso o hacerlo fácilmente para que podamos copiar un enlace de Figma, pegarlo en Cursor, y en realidad tomaremos todas las propiedades de la pantalla, no solo capturas de pantalla e implementar una muy cercana, no solo capturas de pantalla e implementar versión limpia de este diseño o interfaz de usuario. Uh, entonces para hacer eso, necesitarás Figma Pro, necesitas la cuenta de nivel profesional y luego vas a cambiar al modo Dev por aquí Por aquí, se puede ver el MCP en este panel. Si no lo ve, es posible que tenga MCP deshabilitado. Si tiene MCP deshabilitado, verá este servidor MCP de escritorio habilitado . Vas a pegarle a eso. Entonces obtendrás MCP habilitado en esta URL y vas a seguir adelante y copiarlo Una vez que vuelvas a copiar eso en Cursor, si estás usando otras herramientas, también tienen MCP para la mayoría de ellas, investiga un poco sobre tu herramienta y cómo configurar MCP Para Cursor, vas a ajustes, vas a herramientas y MCP, y luego golpeas nuevo servidor MCP, y luego reemplazas esta URL obtuviste del Ya lo tengo configurado, así que no voy a hacer eso, pero asegúrate de que pegues guardar una vez que hagas eso. Entonces si lo hiciste bien, deberías ver FICMA el número de herramientas habilitadas y está habilitada por aquí Asegúrate de eso antes de continuar. De esta manera, lo que puedes hacer es simplemente hacer clic en la página que quieras. Quiero la página del tablero. Copia este prompt por aquí, aunque vamos a hacer algunos cambios él y luego traerlo de vuelta al nuevo chat de aquí en Cursor. Pégalo en. Voy a usar solo un modelo de auto para este. Pero claro, hay otros modelos que puedes usar y hablaremos un poco sobre los modelos y cómo elegir uno más adelante. Pero por ahora, un moode auto debería ser suficiente. Vamos a escribir algunas notas debajo de esto. Vamos a asegurarnos de convertir cada carta en un componente. Y asegúrate de convertir Navbar en un componente. Lo que le estoy diciendo a Cursor es tomar la barra de navegación y estas tarjetas y convertirlas en componentes para que podamos hacer cambios fácilmente a las más adelante y nuestro código esté más limpio Sólo vamos a hacer eso, dale a Enter. Voy a empezar a hacer eso. Ahora bien, si tienes MTP yendo bien, deberías verlo pedirte algunos permisos en solo un minuto. Ahí vas. Ya ves que se está ejecutando obtener contexto de diseño Figma. Puedes ver las capturas de pantalla. Nuevamente, podría pedirte algunos permisos si no has ejecutado esto antes. Le daremos un minuto a eso. Mientras tanto, voy a volver a la página principal y ver qué cambios hace o el navegador de archivos real, debería decir. Ahora está comenzando a crear cada componente, está creando un componente NAVR, un componente tarjeta de viaje y actualizando la página con NAVR y el uso de tarjetas de viaje Nuevamente, nos enfocamos primero en el diseño, luego en la implementación de características reales, base de datos y la funcionalidad de la creación real del viaje y demás. Todo está hecho. Nos dio un resumen de todo lo que hizo con esos componentes y se actualizó la página que JS. Vamos a mantener todos los cambios, volver a nuestro navegador que está ejecutando esta aplicación. Ahí lo tenemos. Este es el diseño, está copiado de Figma. Es bastante decente. Obviamente, tiene temas como este íconos para estirarse, pero está muy cerca de lo que queremos que sea eventualmente. Voy a hacer una cosa más y voy a hacer que instale ChadSN para usar componentes de ahí en el futuro Como estoy usando la biblioteca ShatSN, quiero asegurarme de que tenga acceso a los componentes de CN de Shad Debería seguir adelante e instalar eso y buscará el Shad CNUI e lo instalará y ojalá haga algunas actualizaciones para que esos botones en realidad provengan de Shad CN a diferencia de los botones codificados Voy a dejar que haga eso. Puedes hacer lo mismo, y luego volveremos en la próxima conferencia para pulir eso y pasar a nuestra página de viaje. 14. Refinamientos del diseño: Aquí hice algunas cosas para mejorar un poco el diseño. Yo sólo te voy a mostrar aquí. Yo arreglé los problemas con la elipse y el texto dentro del cual no estaba ahí y este SVG que se estiraba para el avión Para ello, escribí algunas indicaciones. Voy a repasarlos muy rápido porque de nuevo, no quiero enfatizar demasiado en la fase de construcción o esta parte del edificio, sino simplemente decir rápidamente qué tipo de indicaciones le di a la IA Me aseguré de que haga que la elipse de texto sea más grande. Pero en realidad antes de eso, permítanme comenzar con lo que inicialmente hice. Al principio le di dos arreglos para hacer. Dije: Asegúrate de que haya una capa de texto alrededor de la elipse dentro y repite los nombres de las ciudades como en el diseño de Figma. Quieres volver a referirte al diseño Figma que le diste y el logo liso está squished, ¿ puedes asegurarte de que conserva la No hizo un gran trabajo de esa. Entonces lo que hice fue repasar Figma, seleccioné esta capa simple, y luego la exporté como SVG Como SBG aquí. Una vez que exporte eso, asegúrese pegarlo en la carpeta pública. Si vas dentro de tus carpetas donde está tu archivo tu proyecto, asegúrate de pegar dentro de esta carpeta pública, cualquier icono que quieras porque ahí es donde se deben almacenar los iconos. Incluso puedes crear carpetas dentro de aquí y esa es una buena práctica. Si quieres crear una carpeta de iconos y luego almacenar todos tus iconos allí. Voy a mantenerlo sencillo y simplemente colocaré todo dentro. Entonces hice un trabajo decente. El texto era un poco demasiado pequeño en comparación con la elipse que ya estaba ahí, el círculo Me aseguré de que sea la talla correcta. Yo sólo le pedí que lo hiciera para que siga el mismo camino. Uno era más circular que ovalado, así que me aseguré de que eso coincidiera e hizo un gran trabajo de eso y le dije que usara el SPG para el avión Um, y de nuevo, algunos pequeños ajustes hacen que los textos sean un poco más grandes Entonces, si tienes que hacer algún ajuste, solo díselo un poco más pequeño o más grande, gira el plano SPG porque estaba mirando hacia el camino equivocado Así que asegúrate de darle esas rotaciones específicas de 90 grados, etcétera Nuevamente, luego se apagó el sello de fecha. Así que puedes ver en los diseños aquí, se ve bastante bien. Pero inicialmente en la app, no lo hizo. Pero luego le pedí que me asegurara de que es centro. Entonces ahora se ve bastante bien. Nuevamente, algunos micro ajustes, trae el texto más bajo, prueba uno oh cinco, dale algunos cambios. Me dijiste que este es el relleno de 110 píxeles, en vez de 100, dije prueba uno oh cinco porque era demasiado. Da números específicos cuando puedas. A continuación, vamos a volver y trabajar en la página del viaje. 15. Página de viajes: Entonces, antes de continuar, me voy a asegurar de escribir el diseño actualizado de la tarjeta de viaje y comprometerme este cambio. Nuevamente, entre tus cambios que realices, quieres empujar a Github de vez en cuando para que puedas hacer un seguimiento de todo y de todos los cambios que hiciste. si acaso necesitas retroceder, lo hace mucho más fácil. En nuestra página siguiente, que es la página de viaje para mí, supongo, esta de aquí. Este es el actualizado. Voy a cambiar al modo Dev, copiar el enlace MCP, minimizarlo. De nuevo, asegúrate de que lo que selecciones, eso va a Figma. Asegúrate de Cursor. Asegúrese de que desde Figma, seleccione todo el marco Bien, así que asegúrate entre tus cambios que realices, creas un nuevo chat en tu sección de chat de IA aquí para que no use demasiado crédito o no estés haciendo un chat súper largo, lo que podría ser ineficiente para los cambios así como la base crediticia también Quieres asegurarte de crear un nuevo chat, golpear Comando o Control en Windows, y luego voy a seguir adelante y pegar ese enlace de Figma para esa página de viajes, y voy a darle alguna información Voy a decir, agrega una nueva página de viajes. Basado en los diseños que aparecen a continuación, el usuario navega a esta página haciendo clic en la tarjeta de viaje de la página principal Déjame echar otro vistazo a los diseños y ver si hay algo más. De nuevo, voy a tenerlo para que las tarjetas de saldo se conviertan en componentes así como convertir las tarjetas de gastos en componentes. El resto se ve bien. Una cosa más que quiero hacer es asegurarme de que esto esté en descarga, para que descargue los iconos. Sin embargo, a veces esto no funciona, es posible que necesitemos exportar manualmente los iconos y las imágenes a nuestro proyecto Pero veamos cómo le va esto al principio. Voy a hacer una pausa y volver cuando termine. Todo bien. Está hecho y me da un resumen de todo lo que está hecho, incluyendo la tarjeta de gastos del componente de la tarjeta de saldo y la página de viajes, así como las rutas. Las rutas son la forma en que la gente navega en tu app NextGS y así se maneja todo eso Ahora podemos probarlo e incluso creamos el enlace aquí. Trips Slug es esencialmente la identificación de ese viaje. Incluso está estableciendo algunas de las bases para nuestro back end más tarde, lo cual es increíble. Hasta el momento, no hemos tenido ninguna integración de back end o servidor. Pero pronto lo haremos y esto va a ser súper útil. En el proceso, está estropeado un poco el diseño aquí para las tarjetas de viaje Lo arreglaremos en sólo un segundo. Pero veamos si hacemos clic en uno. Tenemos un error. Esto es muy común cuando se trabaja con IA. Si obtiene un error como este, simplemente copie la información del error por aquí, pásela de nuevo a su agente de codificación. Solo déjalo ver ese error y arreglarlo. La mayoría de las veces es o algún error lógico o se olvidó definir una variable o algo así donde suele ser pequeña y se solucionará de inmediato. Dale algo de tiempo. Y mientras está haciendo eso, podemos volver aquí y allá vamos. Está arreglado, y se ve genial, para ser honesto. Es de inmediato, es lo más cerca que podemos llegar a los diseños de Figma. Otra vez, esa es la belleza de MCP. Esto me hubiera llevado al menos un par de días hacerlo antes. Pero ahora tenemos todo esto. Por supuesto, no ha hecho nada que no le hayas dicho que sume en gastos aún no funciona. Todos los viajes funcionan, se remonta a todos los viajes. Invitar amigos aún no hace nada, tampoco estos tres puntos aquí. Y se puede ver que se ha creado dos versiones diferentes. Aquí está esta versión para Tokio. Pero si vuelvo, también está esta versión para Bali, se ven diferentes. Estos no son botones todavía, así que claro, tenemos algunas cosas que arreglar. Voy a tomar nota de estas cosas y tú también deberías. A medida que avanzas por armar cada página, toma nota de lo que está mal. Voy a hacer una nota del botón aquí que necesita ser arreglado. Toma nota del add en gasto, pero también para ese, voy a crear un nuevo prompt para ello. Um el resto se ve bien, pero claro, hay temas como estos problemas de alineación. Ya ves que este de aquí está en align. Pequeñas cosas así, toma nota de ello y devuélvalas a la IA. Aquí no hay gradiente detrás de la flecha como lo tengo en mis diseños. Es algo muy pequeño y sutil. Voy a hacer esos arreglos porque son más pequeños y luego regresan y continúan con el resto del flujo, que va a estar sumando en gasto. Entonces también, voy a trabajar en la creación de un nuevo viaje. Esas son dos cosas en las que voy a trabajar a continuación. Um, y otra vez, para tu app, sigue adelante. Pero si estás haciendo exactamente lo mismo, ya sabes, puedes seguir exactamente. 16. Rutamiento al panel: Todo bien. Mi Cursor ahora está haciendo pequeños cambios como el gradiente aquí del que estaba hablando. Ahora, una cosa que quiero decir es un pequeño cambio que quiero hacer y asegurarme de que hagas en tu proyecto es ese proyecto en tu carpeta de aplicaciones, tu página punto JS es inicialmente la página original que aparece. Entonces en nuestro caso, ahora mismo, es solo anfitrión local, 3,000. No hay ningún tipo de barra, página de suma. Cuando estás por aquí, hiplah Bali, entonces básicamente estás mirando dentro de esta carpeta de aplicaciones, la página de viajes Ahí es donde tienes esta identificación de viaje. También queremos mover nuestra página aquí ahora mismo, esta de aquí. Si tienes una página de panel como esta que tengo, no quieres que esa sea tu página de punto JS porque en realidad está destinada a ser para tu landing page. Cuando la gente aterriza en tu sitio web, la página de marketing, la primera página que aparece por ejemplo, aquí para la versión actual de QClip es esta página, entonces tengo una página de dashboard Slash dashboard es en realidad la página del tablero. Un pequeño cambio, lo voy a tener y voy a hacer esto en un nuevo chat. Asegúrese de que la página actual JS se convierta en una página de panel. Y cambia el punto de página JS para que solo tenga un texto de marcador de posición para nuestra landing page No queremos que haga una landing page en este momento. Vamos a hacer eso en un rato. Pero por ahora, solo quiero asegurarme de que esa página se convierta en una página de tablero para que no haya confusión más adelante. Asegúrate de hacer algo así también si no lo has hecho ya que hace un cambio, si volvemos aquí, la página de destino próximamente y luego si vas a barra de Dashboard, ahí vamos Tenemos una página de tablero aquí. Sólo por simplicidad, voy a decir añadir un botón en la landing page que me lleve al dashboard. Para que cada vez que lanzamos el proyecto porque por defecto, aterrizamos en la landing page, que actualmente está aquí. Queremos tener sólo un botón. Nuevamente, esto es temporal solo para que lleguemos a esta página rápidamente. Así que voy a seguir haciendo pequeños cambios principalmente en el diseño y funcionalidad como esta de aquí por el lado del diseño. Entonces una vez que las cosas estén listas, procederemos o procederé a agregar un gasto y agregar un flujo de viaje. Una cosa más que voy a hacer es, um, ya sabes, cambiar los enlaces de todos los botones que anteriormente estaban vinculados a Page JS para ir a porta JS, en la página de Trips. Solo quiero estar seguro de que también cambia este enlace aquí. Todos los viajes deben volver a Dashboard en lugar de la página de inicio o nuevamente, a la página de destino. Asegúrate de hacer ese cambio. Sólo algo sutil a tener en cuenta. 17. Incorporación de gastos: Bien, las cosas empiezan a verse bien y mucho más limpias, así que voy a seguir adelante y comprometer los cambios. Cambiar tarjetas y agregar página de viajes. Voy a sincronizar estos cambios ahora volviendo atrás, quiero agregar mi flujo de gastos de agregar. Ya lo diseñé por aquí porque pensé por qué no es más fácil pasarle esto a Cursor. Aquí, voy a hacer doble clic para seleccionar esta tarjeta que básicamente agrega un gasto y luego dirigirme a MCP para copiar el enlace o el modo Dev aquí en Cursor Va a crear un nuevo chat, pegar eso y decir, agregar una tarjeta para permitir a los usuarios agregar gastos una vez que hagan clic en el agregar gasto. Pero en la página de viajes, quieres ser específico así, dar el ejemplo de dónde está, aunque lo más probable es que dar el ejemplo de dónde está, aunque lo también lo averiguaremos, pero esto lo hace un poco más fácil. Asegúrate de desvanecer este blog y si el usuario hace clic en Cancelar, entonces ciérrelo. Si hay cambios realizados dentro o números agregados en los campos de entrada, mostrar una alerta, primero, luego cancelarla o cerrarla. Todo bien. Le dio algunas instrucciones ahí y la principal fue si el usuario hace clic para cancelar este gasto, asegúrese de que realmente se les pida, ¿realmente quieren cerrar eso o no? De esta manera no pierden algunos datos. Simplemente un desglose realmente rápido. Aquí tengo un campo de cantidad, por lo que el usuario pone la cantidad. Les dice para qué fue. Aquí es donde aparece la categoría por aquí. O el nombre del gasto. Entonces así es como se divide. Por lo general se divide por defecto es igual, lo que igual entre todos. Pero entonces si quieren, en realidad pueden entrar y cambiar los números y dinámicamente se actualizará. Si quieren ir con base porcentual, pueden hacerlo. Si van base dólar por dólar, pueden hacer eso, o si quieren por día, también pueden hacerlo. Entonces si recuerdas, calculará cuántos días del viaje total, ¿esta persona durmió en este Airbnb por lo tanto cobra la cantidad correcta y luego agrega gasto. Así que bastante sencillo sencillo. Empezará a hacer eso y veamos qué hace en un minuto. Todo bien. Está hecho de trabajar y vamos a ver con un gasto. Entonces es obvio que no accedió a los diseños de Figma. Puedo decir por el diseño, simplemente no siguiendo exactamente cómo debería ser. Se lo voy a preguntar, ¿seguiste exactamente los diseños del FICMA y se lo preguntaste No teníamos acceso, recogiendo los diseños ahora. A veces esto sucede. Comete errores, en realidad no accede a él por el motivo que sea, posible que necesites repmpt Solo un recordatorio amistoso, es posible que deba hacerlo varias veces si no sucede la primera vez. Veamos qué hace esta vez. En esta ocasión, lo arregló. De hecho, ingresé algunos números $20 automáticamente calcula todo a $30, ahí tienes. Se puede quitar a la gente de ella. Estos probablemente no sean los estados correctos, así que solo necesito actualizar esas pequeñas cosas. Se puede hacer base porcentual. Y esto tampoco se ve bien. Nuevamente, tal vez necesite hacer algunos cambios aquí y allá para asegurarme de que para los detalles, lo actualice Pero el diseño base es decente. La colocación de estos, por supuesto, no es correcta, pero al menos nos pregunta, ¿queremos descartarlos realmente, a un costo, y entonces no puedes ahora te está dejando agregar gastos vacíos Pequeñas cosas como esa necesitan ser arregladas. Pero haremos esos cambios y continuaremos en la siguiente ecture. 18. (Artículos para autenticar tu sitio web): Bien, nos estamos metiendo en la carne del curso, la fase de construcción, y volviéndonos más reales con ella. Cambié la configuración de la luz detrás de mí para que coincida con esa vibra. Pero básicamente, en realidad vamos a empezar a trabajar en nuestra autenticación ahora. Así que voy a ejecutar el proyecto y una especie de revisión una vez más donde estamos. Tengo mi página de tablero configurada. Obviamente, estos son datos de prueba y no reales, por lo que llegaremos a crear viajes reales y datos reales. Por ahora, todas estas son solo pruebas, pero tengo una IU de trabajo, primera que va. Obviamente, todavía hay mejoras por hacer, pero no vamos a bajar a los detalles. De hecho, haciendo tu MVP, deberías estar priorizando el impulso y sacándolo rápido en lugar de los pequeños detalles que como diseñador, a veces me voy por esa madriguera de arreglar pequeños detalles de diseño también, y hasta cierto punto, importan Sí, tengo el flujo de gastos también agregado por aquí para mí. Otra vez, no perfecto. Aún quedan retoques por hacer Pero creo que este es un buen momento para empezar a trabajar en la autenticación. En otras palabras, permitir que los usuarios realmente inicien sesión y creen una cuenta. Para eso, vamos a usar dos herramientas. Vamos a usar ATJS que es esta biblioteca que te permite iniciar sesión a tus usuarios usando diferentes aplicaciones, incluso como Github y Google, Twitter, Apple, así como Email, por supuesto De nuevo, vamos a hacer MVP y vamos a seguir con solo correo electrónico por ahora Pero obviamente, para configurar estos, también puedes pasar por eso. Simplemente toman un poco más de tiempo y un poco más de configuración per se. De hecho, puedes ir a través de las instrucciones para esos sobre cómo configurar, por ejemplo, Google, así que por ahora, comenzaremos con solo iniciar sesión por correo electrónico, así los usuarios pondrán su correo electrónico. Les enviaré un enlace mágico para iniciar sesión. Y para ese enlace mágico, necesitamos realmente enviar correos electrónicos. Para enviar correos electrónicos, vamos a utilizar esta herramienta llamada Reenviar y este reenvío esencialmente le permite enviar hasta 3,000 correos electrónicos al mes de forma gratuita Esta es una gran opción. Así que adelante y empieza a crear una cuenta para Reenviar Yo voy a hacer lo mismo por aquí. Todo bien. Entonces, una vez que estés dentro, puedes crear una clave API para tus cuentas, seguir adelante y hacerlo. Y asegúrate de copiarlo. Ahora lo que vas a querer hacer es que vas a volver en tu Cursor o donde sea que tengas tus archivos y vas a crear un nuevo archivo, y lo vas a llamar exactamente deletreado punto ENV punto Local Por lo que este es un archivo de entorno donde se almacenarán todas tus claves API para que estas claves API puedan ser utilizadas para autenticar tu app con reenvío para enviar correos electrónicos Este es un archivo súper privado. No quieres publicar o publicar esto en GitHub. Es por eso que en realidad está automáticamente en el archivo Ignorar lo que ignorará la carga de ese archivo Este archivo en realidad define lo que se insertará en GitHub versus lo que no es y los archivos ENV punto no lo serán Estos son secretos. Quieres mantenerlo en secreto y en tu máquina. Um, así que por aquí, realmente puedes teclearlo como quieras, pero me gusta simplemente hacer Resend underscore API underscore key, equals, y luego pegar tu Una vez que pegue su valor, presione Guardar, cierre ese archivo. Ahora, también queremos configurar Auth JS. Entonces vamos a contar, ya sabes, Cursor para que nos ayude con eso. Pero primero, en realidad voy a copiar el diseño de nuestras pantallas de autenticación. Entonces solo voy a hacer esta de aquí. Voy a ir por aquí. Ahí vamos. Implementemos esta pantalla de inicio de sesión desde Figma. Primero, sigamos adelante e implementemos el diseño antes de integrar realmente la pantalla de inicio de sesión. Voy a estar seguro de usar elementos Shad CN. Y esta página debe ser recortada Iniciar sesión. Te estoy diciendo qué nombre crearlo, aunque probablemente lo hubieras descubierto de todos modos, pero te estoy diciendo explícitamente que hagas una página de inicio de sesión bajo nuestra aplicación Cuando vas a tu app.com barra de inicio de sesión, personas y en esta página Empezaremos con eso. Volveremos en un segundo para ver cómo le va. Vamos a cortar Iniciar sesión. Y ahí vamos. No está nada mal, muy cerca de lo que tenemos. Nos preocuparemos por el gráfico aquí más tarde una vez que tengamos nuestra aplicación en marcha. Pero esto es genial. Hay cosas menores de nuevo que arreglar cuando estoy pasando el cursor sobre los botones, este botón de inicio de sesión no muestra el Cursor correcto Nuevamente, para esas pequeñas cosas, solo asegúrate de hacérselo saber en el botón de inicio de sesión, el enlace correcto El tipo de cursor no aparece. Así es como quieres acercarte a tu conjunto de arreglos pequeños y uno a la vez. Entonces vemos que tenemos un cartel. Todavía no tenemos una pantalla de registro, así que también le voy a pedir que duplique esta página y también haga una versión de registro en slash sign up Yo hago cola eso. A continuación, trabajará en eso. Y mientras está haciendo eso y terminando eso, volvamos en la siguiente conferencia para continuar con nuestra configuración de autenticación. 19. Base de datos: Bien, tengo una página de registro que va a y antes de que realmente podamos hacer que nuestra autenticación realmente funcione, necesitamos configurar una base de datos. Entonces la base de datos es donde se almacenan los datos. Entonces, una vez que un usuario pone en su correo electrónico, la contraseña y quiere crear una cuenta, aquí es donde en la base , esencialmente se creará un registro de cuenta, y en cualquier momento necesitamos hacer actualizaciones a ese usuario o necesitamos agregar viajes o necesitamos agregar gastos. Todos esos tienen que estar separados. Se pueden pensar en ellos como tablas o categorías separadas de documentos que necesitamos usando una base de datos. Para nuestra base de datos, vamos a estar usando MongoDB. Por supuesto, hay otras opciones como Postgres y Neon y un montón de otras. Si ya estás acostumbrado a uno, cógelo. Si no, comenzar con Mongo DB es sencillo. Dirígete a mongodb.com, empieza. Ya tengo una cuenta, voy a iniciar sesión. Una vez que hayas iniciado sesión, asegúrate de ir a crear un nuevo proyecto. sólo voy a nombrar mi proyecto Por ahora sólo voy a nombrar mi proyecto trip Expense app. Nuevamente, puedes cambiar esto más tarde. Golpea siguiente. Golpear Crear proyecto. Entonces una vez que estés aquí, quieres seguir adelante y crear un clúster. El clúster es esencialmente un contenedor para su base de datos. Aquí es donde van a aparecer algunas opciones. Voy a elegir el gratuito es lo suficientemente bueno para empezar, y luego a medida que consigas más y más usuarios, es posible que quieras actualizar a los otros. Solo para dejarlo clúster cero para el nombre y luego dejarlos con la configuración predeterminada, cree despliegue. Ahora, enseguida, verás alguna contraseña de nombre de usuario aquí. Vas a seguir adelante y golpear Crear usuario de base de datos. Vas a elegir un método de conexión y yo voy a elegir brújula. Entonces Compass es esta aplicación que vive en tu máquina y puedes administrar esencialmente los datos por ahí puedes ver los datos. No es necesario que inicie sesión en mongodb.com cada vez en su navegador De hecho, solo puedes usar esta aplicación MongoDB Compass para hacer eso Adelante y descárgalo. Tómate un segundo para hacerlo si no lo tienes. Ya lo tengo, así que voy a golpear tengo instalado Compass. Entonces aquí abajo, obtendrás algo de cadena para tu conexión. Necesitas esta cadena nuevamente para tenerla dentro de tu código. Asegúrate de copiar eso. Hit hecho aquí. Vuelve a tu código y dentro de punto punto Local que creamos, vas a crear una nueva línea Mongo subrayado URI es igual, y luego pega en esa cadena que obtuviste de Mongo Golpea Guardar y Cerrar eso. Ahora, una vez que estés dentro de la brújula MongoDB, puedes agregar una nueva conexión, pegar en ese URI que tienes Voy a cambiar el nombre a la app de gastos de viaje aquí y luego guardar y conectar. Así que ahora estoy dentro de aquí. Aún no hay datos, así que aquí no hay nada que puedas ver. Vamos a hacer una cosa más. Vas a volver a tu on local al final de tu cadena aquí donde dice mongodb.net slash, vas a No importa necesariamente cómo lo escribas o incluso si escribes desarrollo o tal. Eso es todo solo para crear una carpeta aquí llamada Dev o un contenedor, puedes pensarlo que básicamente separa tu base de datos Dev of testing de tu producción. Una vez que estemos en vivo y otros usuarios puedan usar esto, querrás que normalmente permanezca en otro contenedor en tu base de datos o en tu clúster para que no esté todo mezclado. Esto es más para la organización y las mejores prácticas. Una vez que lleguemos a la producción real, ya verás cómo hacerlo. Pero por ahora, asegúrate de agregar ese slash Dev. Todos estamos arreglados aquí. Volvamos ahora en la siguiente conferencia para comenzar realmente a autenticar a los usuarios 20. Finalizar la autenticación: Para llegar a crear usuarios. Una cosa que sí quiero señalar es que ahora mismo dentro de mi app, tenemos este correo electrónico y contraseña. Voy a elegir no ir con contraseña y simplemente mantenerla simple para que los usuarios solo pongan su correo electrónico, obtengan un enlace para realmente iniciar sesión en la aplicación fácilmente. De esta manera, es mucho más sencillo y no necesitan recordar contraseña y así sucesivamente. Obviamente, puedes optar por hacerlo si quieres. Por supuesto, estos botones probablemente no funcionarán para empezar. Después, si tenemos el tiempo, siempre podemos configurarlo. Pero por ahora, centrémonos en conseguir que los usuarios inicien sesión con correo electrónico. Para hacer eso, voy a ir por aquí y en una nueva charla. Vamos a instalar next auth e implementar la autenticación, funciona y además agregaremos un modelo de usuario y los archivos necesarios para Mongo Vas a escribir eso y básicamente todo lo que te estás diciendo que hagas es instalar esa siguiente biblioteca JS de la que hablamos, y luego seguirá adelante y creará un modelo de usuario. Cada vez que hablamos de algo así como un modelo, significa básicamente definir cuáles son los parámetros de un usuario, por ejemplo, un usuario tiene un correo electrónico tiene una contraseña, tienen nombre, tienen viajes que crearon y los viajes son aquellos que podrían vincularse a otro modelo, esencialmente. Quieres pensar en ello como cuáles son los datos relacionados con el usuario o cualquier otro modelo que estemos creando. Una vez que empecemos a crear el modelo de viaje, de manera similar, vamos a necesitar campos de fecha desde qué día hasta qué día. Um, cuanta gente forma parte de esto, ¿quién forma parte de este viaje? Qué gastos hay bajo este viaje. Podemos ver que Cursor ya armó uno para nuestro usuario dot js. Así es como se ve, ¿verdad? Tenemos el nombre, tenemos el correo electrónico, tenemos la contraseña. Añadió contraseña porque la vio en los diseños, pero de nuevo, no vamos a necesitar. Se trata de timestamps, que básicamente solo muestra ¿cuándo se creó este usuario? ¿Cuándo se actualizaron por última vez o cuándo se actualizaron sus datos por última vez? Simplemente por defecto, deberían estar ahí. Vamos a conservar este archivo. Cometí un error aquí y olvidé decirle que realmente elimine la contraseña y use reenviar para enviar correos electrónicos de verificación Eso es lo que estoy haciendo exactamente en este momento, diciéndole que elimine la contraseña de la aplicación y la autenticación y en su lugar use el campo de correo electrónico y reenvíe para su verificación Voy a esperar a que esto termine y luego vuelva. Más cosas que tienes que hacer para Next Auth funcione es que necesitamos esta clave secreta de autenticación para poder integrarla o agregarla a nuestro archivo local o archivo de entorno Simplemente copie este NPXotSecret desde aquí y luego ejecútelo en su terminal Voy a abrir una nueva terminal aquí y luego solo ejecutar eso. Tú haces lo mismo. Entonces podría indicarle que instale un nuevo paquete, así que simplemente escriba Y y presione Enter como para sí. Te voy a dar algo de valor. Solo asegúrate de copiar eso y ponerlo en tu archivo local. Cursor incluso ha armado ejemplo para mí para ver cuáles son las cosas que necesito. También necesito esto reciente del correo electrónico. Asegúrate de agregar eso. Para las pruebas, solo puedes quedártelo así. Una vez que compramos un dominio, queremos usar realmente el dominio real. Voy a reiniciar mi servidor golpeando Control C y luego subiendo aquí para ejecutar NPM Run Dev Solo estoy usando la tecla de flecha hacia arriba para volver al último comando que he escrito ahí, presionar Enter y luego abrir mi proyecto una vez más. Tenemos este correo electrónico. Bienvenido de nuevo. Ahora, no tengo una cuenta, así que voy a hacer registro. Asegúrate aquí de poner la dirección de correo electrónico que te registraste con Resend para fines de prueba. Ahí vamos. Cuando reviso mi correo electrónico, me sale algo así. Parece que no pegamos correctamente el siguiente de secreto, igual que lo tiene en este archivo de ejemplo. Entonces probemos eso una vez más, haga clic para iniciar sesión, y ahí lo tenemos. Estamos conectados. En realidad tenemos un usuario ahora. Dice nuestro correo aquí, podemos cerrar sesión desde aquí. Si voy a nuestro Mongo DB Compass y actualizo esta app de gastos de viaje, podemos ver que tenemos esta carpeta ahora Dev porque ponemos ese slash Entonces si voy por aquí, tenemos usuarios, y ahí vamos. Ese es mi usuario, así que se presentó ahí arriba. Aquí no tenemos nombre. Quizás en la página de registro, podamos tenerla para que el usuario llene ahí su nombre de pila. Originalmente, mi diseño, pensé que iba a hacer una página separada, pero es una tontería tener solo un campo aquí. Voy a crear un nuevo chat y pedirle a Cursor que agregue un nuevo campo de nombre a la página de registro anterior correo electrónico el nombre del usuario también se guarda en la base de datos abreviatura de base de datos. Voy a dejar que eso funcione y prácticamente tenemos nuestra autenticación completada. Ahora tenemos usuarios, tenemos una base de datos, y estamos un paso más cerca de hacer que esta aplicación sea completamente funcional. Volvamos a continuación para enfocarnos realmente en permitir a los usuarios crear viajes. 21. Cómo crear viajes: Bien. Creo que estoy listo para comenzar a hacer el crear un nuevo viaje aquí para que la gente pueda golpear Crear un nuevo viaje. Estoy pensando MVP, mantenlo simple, alerta rápida pantalla modelo que aparece, les pide el nombre del viaje, y las fechas, las fechas serán opcionales, pero voy a mantener eso ahí Y me aseguraré de usar los componentes hat CN porque ya tienen los selectores de fecha resueltos, así que no es necesario que lo descubran. Entonces para lo demás, realmente no necesitamos nada más del usuario. Entonces tal vez solo tenga un viaje de creación rápida y tinta, copie el enlace de invitación. Simplemente hacen eso y luego lo pueden enviar a quien quieran para que se una a su viaje. Empecemos con eso. Voy a regresar y crear un nuevo chat aquí y decir, um, hagamos agregar un viaje funcional los usuarios pueden agregar un nuevo viaje. Asegúrese de agregarlo al modelo de usuario. Asegúrese de crear un nuevo modelo de viaje. Así que de nuevo, modelo de aquí es cómo hacemos un seguimiento de diferentes tipos de datos, un viaje debe tener sus propios datos separados del usuario, y el viaje incluirá cosas como, como hablamos antes el nombre del viaje, um, el número de gastos o los gastos por debajo de él, quién es parte de este viaje para que podamos mostrar o permitir que los usuarios vean los viajes correctos y así sucesivamente y así sucesivamente. Entonces como parte de ese modelo de viaje, así que solo escribiré como parte del modelo de viaje, asegúrate de agregar el siguiente nombre propietario, así que quién creó este viaje los usuarios que forman parte de él. Posteriormente agregaremos gastos. No tenemos un modelo de gastos, así que simplemente dejaremos eso fuera. Fecha de inicio, fecha de finalización de los viajes. Realmente no necesitamos una ubicación, ese sería solo el nombre. ¿Qué más necesitamos? Creo que es bueno para empezar. Entonces vamos a hacer que cree un nuevo modelo usando Shad CN los componentes que se mostrarán cuando el usuario golpee, cree un nuevo viaje y solo pida el nombre y fechas y fechas de inicio Hacer fechas opcionales, pero se requiere nombre y hacer el CTA primario o llamado a la acción, crear viaje y copiar enlace de invitación con un CTA secundario para simplemente crear Vamos a correr eso, darle un segundo y volver a ver qué hace. Es importante saber qué está pasando en segundo plano ya que está haciendo esto y agregando eso. Quiero asegurarme de que entiendas lo que está haciendo el agente de IA en segundo plano porque de nuevo, creo que es importante tener también algunos antecedentes. Es hacer algunas cosas. Es crear un modelo para nuestro viaje. Si seguimos aquí, vemos todos los datos que le dijimos que queremos. Incluso agregué algunos extra como Invitar código que no le dije que agregara, pero lo está haciendo de tal manera que pueda generar un código de viaje que la gente pueda enviarse entre sí. También se ha creado una ruta API. La ruta API es esencialmente una forma para que el front-end hable con el back end y haga cosas como crear nuevos viajes. Si entramos aquí, hace algunas cosas comprobando primero para ver si el usuario está autenticado Hace algunas comprobaciones iniciales, asegurándose de que se agregue el nombre del viaje. Si el usuario no los agrega e intenta crear un nuevo viaje, esencialmente esta ruta API le impedirá hacerlo. Pero si todo parece correcto, entonces seguirá adelante y dejará que cree el viaje con la siguiente información con el nombre, a quién pertenece, quién forma parte de él, dónde están los usuarios, ¿ cuándo es la fecha de inicio? Cuando es la fecha de finalización. Esencialmente, todo lo que está haciendo este código es permitir que el front-end hable con el back end usando esta ruta API. Um, obviamente está haciendo algunas suposiciones por sí solo. Entonces la IA hará eso si no le das suficiente información o contexto. Creo que no hablé completamente de lo que queremos hacer en la página de viajes, ya sea que vaya a reemplazar ese tipo de tarjetas vacías o tarjetas falsas que creamos hasta ahora. Veamos qué hace y luego vamos a partir de ahí. Bien, entonces parece que en este momento no tengo viajes. Todavía no implementó la página vacía que ya diseñé, pero aún no le he dado esa página. Eso es lo siguiente en las cosas que hacer. Pero intentemos crear un nuevo viaje. Vamos a llamarlo Bali 2025. Fecha de inicio. Escojamos el 2 de marzo, hagamos el sexto, creemos viaje y copiemos tinta de invitación, no podamos crear Trip. Algo pasó. Veamos qué se ha ido. Por aquí en tu terminal, siempre verás cualquier error que pueda haber ocurrido. Parece que hubo algún error con algo que ver con el siguiente aquí que está escrito. Lo que puedes hacer aquí en el Cursor es que realmente puedes hacer en y luego ir a los terminales y puedes seleccionar este es el terminal de nodo, así puedes seleccionar el terminal de nodo y decir, tenemos un error y dejar que lo resuelva. Parece que lo arregló. Intentemos eso una vez más. Y todavía hay un problema. Nuevamente, repita exactamente el mismo proceso. Hay otro error, parece que el error está en otro lugar ahora. A ver si podemos arreglarlo. Veces el encanto. Vamos a golpear Crear viaje y copiar Invitar tinta. Boom, sigue siendo un error. Asegúrate de vez en cuando después de las correcciones, detienes el servidor, así que pulsa Control C en tu terminal y ejecuta tu entorno de desarrollo nuevamente, ejecuta tu aplicación nuevamente y luego hagamos eso una vez más. Bali 2025 y vamos a fijar algunas fechas, aunque no sea necesario. Y ahí vamos. Estamos dentro de Bali 2025. Incluso se creó este enlace por aquí. Ahora bien, no estoy seguro si realmente copió el enlace. Intentemos que sea crear una tinta de invitación por sí misma y la ejecutamos afuera. En realidad no tenemos el enlace correcto aquí, así que no implementó la parte de invitación correctamente, pero eso es solo porque nos apresuramos a crear el viaje y no dimos más detalles sobre cómo va a manejar la invitación de amigos y así sucesivamente. Entonces mi lógica es, primero terminemos la creación del viaje. Consigamos la creación de gastos y todo eso resuelto. Entonces vamos a trabajar en cómo los usuarios realmente pueden invitar a amigos a unirse. Por ahora, esto es increíble. Si volvemos por aquí, se ha creado el viaje, y esto no es solo falso, sino que esto realmente ha pasado por nuestro bagend y si actualizamos nuestra brújula Mongo DB, podemos ver que tenemos esta carpeta de viajes por aquí ahora con todo el viaje que creamos, este viaje que creamos, podemos ver quién forma parte de él Alguna vez ves ID de objeto que hace referencia a otra tabla en otra carpeta. Este es el usuario que tengo por aquí. Ese es el ID del objeto aquí. Coincide con el usuario o el propietario y como parte de los usuarios, también es mi cuenta. Soy tanto el dueño de este viaje como el usuario, lo cual tiene sentido. Tenemos la fecha de inicio fecha de finalización. Se ha creado algún código de invitación. Nuevamente, no dimos más información sobre cómo deberían funcionar las invitaciones, pero lo volveremos a hacer más tarde, una vez que termine todo el flujo para un viaje. Volvamos y en realidad trabajemos en los gastos. Um, y luego entrar en invitaciones. 22. Flujo de gastos: Entonces parece que estamos en un rollo aquí. Entonces, ¿por qué no lo seguimos avanzando haciendo que los gastos sean reales? Así que agreguemos funcionalidad a los gastos, creemos un modelo de gastos con todos los parámetros necesarios, y asegurémonos agregar gastos al modelo de viajes, si no existe ya. Asegúrese de que los gastos realmente calculen saldos de diferentes usuarios. Ahí vamos. Estamos enviando eso a través. Tiempo para probar nuestro flujo de gastos. Agreguemos un gasto. Digamos que eran 20 dólares y era para abarrotes. Y obviamente yo solo tengo una persona agregada al viaje, así que en realidad no tiene sentido. Pero vamos a seguir adelante y ponerlo y ver si eso funciona. Ahí vamos. Se ha agregado. Obviamente, necesita algo de trabajo en este momento es mostrar el correo electrónico aquí en lugar del nombre de pila. Estoy adivinando en algún lugar del código, está mostrando el correo electrónico si no hay nombre para el usuario, en realidad vamos a probar eso Voy a ir a Mongo DB Compass y en vez de que el nombre aquí esté vacío o nulo, adelante y realmente hagamos un cambio a esto Si presionamos Actualizar, pongamos el nombre. Por Nima Tahiti. Este conjunto esencialmente está cambiando este nombre a Nima Tommy. Por lo general, puedes editarlo directamente ahí, pero como era nulo, en realidad tuvimos que hacerlo así. Ahora si estamos frescos, tenemos un nombre. Si me refresco en la app, y ahí vamos. Tenía razón el código está sustituyendo el correo electrónico por nombre. Si el usuario no tiene nombre, éste mostrará esto. Pero me aseguré de que a partir de ahora, recojo nombre de los usuarios en el flujo de registro para ver eso si volvemos a todos los viajes y salimos. Vayamos a inscribirnos ya. Voy a pedir nombre completo, a menos que pongas tu nombre completo, en realidad no voy a dejar que te inscribas, tienes que poner tu nombre completo en. Ahí vamos. El flujo de gastos también está funcionando. Si actualizamos nuestra base de datos aquí, debería ver los gastos como una tabla separada, y ahí vamos. Tenemos el viaje al que pertenece, um, pagado por, ¿quién pagó realmente por este viaje? ¿Cuál era la cantidad? ¿Cuál es la descripción? ¿Cómo se divide? De hecho, tenía todo eso en mente, así como las divisiones también. ¿A quién le debe cuánto? Esto se ve bastante bien. No voy a mentir. Obviamente, todavía hay mejoras que puedo hacer en esto permitiendo a los usuarios eliminar gastos, asegurándose de que esta división entre funcione bien. En el futuro, voy a hacer algunas pruebas para asegurarme de que esto funcione. Siguiente paso, voy a hacer que el flujo de Invitar amigos funcione para que los usuarios puedan copiar un enlace por aquí, presionar Invitar amigos, copiar un enlace y luego poder invitar a otros amigos a la aplicación. El problema es que en este momento no podemos crear múltiples cuentas porque Reenviar solo nos permite enviar correos electrónicos desde dominios que poseemos y realmente no hemos marcado esta app ni hemos encontrado un dominio ni nada por el estilo Sí necesitamos hacer una pausa, hablar un poco sobre la marca y crear un nombre y todo eso. Una vez que hayamos terminado con eso, en realidad podemos seguir probando este flujo. Por ahora, no necesito preocuparme por eso. Eso es más en la fase de pruebas. Por ahora, voy a asegurarme de que primero, se implemente, esto Invitar amigos funcione. Los usuarios que no estén autenticados pueden ver la página, solo la información del viaje por aquí, y luego tal vez un botón para unirse al 23. Identidad de marca: Entonces necesitamos llegar a una marca antes de continuar. Ya sabes, en algún momento de tu proyecto, tienes que hacer esto. Es una de esas cosas que a veces lleva un poco de tiempo llegar a ocurrir, especialmente elegir el nombre correcto, el logotipo correcto, ya sabes, fuentes, colores, etcétera Me enfrento a ese problema muchas veces, como se puede imaginar, um, construyendo, no sé, 16 apps más. Y así llegar a una aplicación yo mismo para ayudar realmente con eso. Ahora, por supuesto, alternativamente, puedes hacer esto en ChatGPT No es necesario que lo hagas exactamente en esta herramienta, pero esencialmente armé esta herramienta para poder darte una marca rápida, incluyendo colores, ideas de dominio, ideas de nombres, etc. Entonces ya tengo un dominio tripvela.com, y como tenía esto para un proyecto anterior que en realidad nunca cobró vida, quiero usarlo para este proyecto porque es muy relevante, pero no tengo logo para ello y realmente no tengo fuentes y colores específicos Entonces voy a usar Brand kit para llegar a eso. Vas a escribir la marca o, ya sabes, la idea aquí, una app para ayudar a los amigos a dividir los gastos en los viajes. Porque ya tengo nombre, voy a decir que se llama Tripvela No necesito el nombre D. solo necesito logo y tal vez algunos colores de fuente. Tomará un segundo aquí. Obviamente, está mostrando Tripvela como nombre. Aquí hay un logo sencillo que puedo usar. Este es un logotipo básico, pero también puedes obtener uno premium. Voy a probar logo premium. Este esquema de color no está mal, pero voy a cambiarlo y tratar de ver qué más podemos conseguir aquí. Esta es una decente. Este gris también es bonito. Podría usar algunos de estos colores. Pero por ahora, veamos, este es el logo premium que se le ocurrió. Vamos a darle una vuelta más a eso. Obviamente, tripl.com se toma porque ese es el dominio que tengo, pero te muestra otros dominios disponibles también Si quieres otros nombres, puedes barajarlo. No tienes que traer tu propio nombre a la herramienta. Cualquier cosa viene con una firma de correo electrónico para ti, así que puedes usarla para tu correo electrónico. Siéntete libre de jugar con esto, inventar una idea de nombre, inventar algunas fuentes y colores. Nuevamente, puedes usar esto o puedes chatear con ChatGPT para idearlo, y luego seguir adelante y comprar un dominio Asegúrate de comprar un dominio y luego volver a integrar tu dominio en Reenviar solo para que podamos crear múltiples usuarios para que podamos probar nuestro flujo de Invitación o al menos para mi aplicación Si tu aplicación es diferente y no necesitas hacer esto, puedes dejarlo hasta el final. Te veré en un minuto. 24. Conectar el dominio para reenviar: Espero que a estas alturas ya hayas comprado el dominio que vas a usar para tu proyecto. Una vez que lo haces, ahora estoy usando Namechep aquí, así que podrías estar usando Go Daddy, Namechep Asegúrate de encontrar la sección DNS avanzado para que puedas agregar algunos registros aquí. Estos registros nos permitirán enviar correos electrónicos desde reenviar a los usuarios Tenemos que ir bajo dominios aquí en resend.com en un Escribe tu dominio. También puedes hacer agregar dominio. Puedes enviar correos electrónicos desde, por ejemplo, notificación dotdmain.com Yo voy a hacer lo mismo. Voy a hacer notificaciones.tripvela.com, que es mi dominio. Y luego vamos a hacer agregar dominio. Entonces te voy a dar algunas instrucciones aquí. Incluso puedes ver un video si quieres. Pero es bastante simple. Todo lo que necesitas hacer es copiar estos registros en tu DNS, en tu proveedor de dominio. Vas a agregar un nuevo disco. Si miras hacia atrás, este es un registro TXT, quieres seleccionar el registro TXT. Para el anfitrión, de nuevo, pega lo que veas aquí. Por el valor, pega lo que ves aquí, puedes copiarlo fácilmente y solo asegurarte de que estás haciendo esto bien. Tómate tu tiempo con él. También vas a hacer un disco MX. Los registros de MC en realidad están por aquí. Ya tengo enviar notificaciones de punto. Entonces quiero copiar este de aquí. Va a agregar otro registro MX, de hecho, o en realidad, este es un registro TXT, no un registro MX, sino otro registro TXT aquí arriba, pega el host y pega este de aquí, el valor. Ya hemos hecho estos aquí, y este es opcional, pero te recomiendo que lo hagas. Otro registro TXT. Entonces y pulsa Enter. El único que quiero asegurarme de que tú también haces es establecer la prioridad aquí en diez para el registro MX. Debido a que no vamos a recibir correos electrónicos de esto, solo se va a enviar para que la gente inicie sesión. No necesitamos habilitar la recepción. He agregado los registros y luego comprobará el DNS. Sólo dale algo de tiempo. Si lo has hecho bien, pronto todo será bandera verde. Entonces sabes que tienes esta configuración y puedes comenzar a enviar correos electrónicos desde este dominio. Veces esto podría tardar un poco más de lo habitual, dale algo de tiempo. Puede tomar hasta algunas horas o minutos, pero normalmente esto se hace instantáneamente y estamos verificados. Estamos bien para irnos. Ahora, todo lo que necesitamos hacer es regresar a nuestra base de código y asegurarnos de que en la base de código en su local on dot, como tenemos en el ejemplo on dot aquí, tal como tenemos en el ejemplo on dot aquí, cambie el reenvío de correo electrónico a ese correo electrónico que acaba de crear Pero claro, acabas de crear un dominio. El mío era notificación, punto tripvela.com, pero necesitas un comienzo para el correo electrónico y para este, normalmente, puedes hacer algo como no responder Sin respuesta en notifications.tripvela.com. Voy a simplemente verificar doble que eso es lo que tengo aquí. Asegúrese de reemplazar ese correo electrónico reenviado del correo electrónico para que lo sepa y lo envíe desde el correo electrónico correcto Solo estoy probando esto ahora desde otro correo electrónico para ver si funciona. Veo que sí funciona. Ahora lo estoy recibiendo de las notificaciones de Tripvela en tribella.com, envíame, y luego puedo Ahora que hemos creado otro usuario, puedo crear viajes bajo ese usuario. Pero lo que me interesa es poder unirme a un viaje que alguien más ya tiene. Volvamos y trabajemos en ese flujo en la próxima conferencia. 25. Configuración de Invita a amigos: Entonces desde el usuario que acabo de crear, que es un usuario diferente con el que creé el viaje inicial, intenté acceder al mismo enlace que ese usuario tiene para ese viaje. Este es el enlace para ese viaje. Pero ahora lo que veo es que no tengo acceso a este viaje. Porque no soy el creador del viaje y no soy uno de los usuarios dentro del viaje, no puedo tener acceso a él. Pero lo que queremos es que realmente queremos mostrar alguna información sobre el viaje, tal vez solo esta parte superior aquí, que este es un viaje a Bali, este es el dueño, estas son las fechas y cuánta gente va. Uh, y luego en vez de ver toda la otra información como los saldos y la actividad del viaje porque aún no es relevante para mí , no me he unido al viaje. Lo que podemos hacer es que podemos tener un botón que diga unirse a este viaje para ver actividad o algo así. Hacen clic en el botón. Entonces, si no tienen una cuenta o si están desconectados, les pedirá que luego creen una cuenta o inicien sesión. Una vez que lo hayan hecho, entonces deberían poder formar parte automáticamente de esta franja y luego ver todos los saldos y la actividad del viaje. Por ahora, vamos a seguir adelante y decirle a Cursor o agente de IA de Cursor. Queremos permitir a los usuarios tanto públicos anónimos como conectados, pero no forman parte de un viaje, para poder ver información de alto nivel sobre el viaje. Eso incluye solo la parte superior, no las secciones de saldo o actividad de viaje. En cambio, debería haber un botón para unirse al viaje. Si un usuario hace clic en él, debe ser llevado a la página de inicio de sesión, y si no forma parte del viaje, entonces debe formar parte del viaje y ver toda la información relevante. Lo que te estamos diciendo es que estamos diciendo que queremos que la gente en Internet pueda encontrar esta tira por este enlace. Si tienes este enlace, significa que puedes acceder al viaje. Entonces alguien lo compartió contigo que tenga acceso a ese enlace. Entonces no es un enlace de acceso público que todo el mundo conozca. Es un vínculo único. Como ves aquí, tiene alguna identificación aquí que normalmente la gente no va a encontrar. A menos que alguien haya compartido este enlace contigo, similar a cómo funciona también un enlace de Google Dog o Figma Las personas pueden ir a esta página, pero no pueden ver ninguno de los datos hasta que realmente crean una cuenta y se unen al viaje. Así veremos a amigos unirse al viaje. Yo como propietario de un viaje, enviaré este enlace a mis amigos y luego les permitiré crear una cuenta o iniciar sesión si ya tienen una para poder unirse a este viaje y participar en agregar gastos y ver saldos que deben o adeudan. Voy a dejar que eso termine y luego volveremos a ver cómo se ve a partir de ahí. 26. Prueba de enlaces de invitación: Um, pasé un prompt más a Cursor una vez hecho, y dije que cuando un usuario hace clic en Invitar amigos, muéstralo brindis, lo que en otras palabras, esto significa un pequeño mensaje que surge para mostrar éxito, etcétera, o errores, y decir enlace copiado, enviarlo a un amigo o dos, eso es solo un mensaje amigable y luego copiarlo en su portapapeles para que puedan enviarlo Porque me di cuenta cuando voy a Invitar amigos, no funciona, así que me aseguré de que también agregue funcionalidad para eso. Siéntase libre de enviar siempre múltiples mensajes para poder agregar cosas en la cola que una vez que el agente de IA haya hecho una cosa, también funcione en otra Por supuesto, puedes ejecutar agentes en paralelo creando un nuevo agente y haciendo que varios se ejecuten en paralelo. A mí me gusta hacer eso si estoy trabajando en algo un poco más complicado. Este proyecto es lo suficientemente simple como para que podamos ejecutar uno a la vez. Todo bien. Vamos a probarlo. Vamos a ir por aquí y echar un vistazo enseguida, aunque este no es mi viaje, es un viaje al que accedí en otra cuenta de usuario que tengo. De hecho puedo unirme al viaje. Entonces, si golpeo Joint Trip Boom, puedo ver toda la información e incluso puedo agregar un gasto. Ahí vamos. Este usuario se llama Tim Cook, así que en realidad puedo ver el gasto aquí. Si agrego 20 aquí, se puede ver que está dividido igualmente hermoso si hago porcentaje. El porcentaje no está funcionando bien. Tiene que averiguar por porcentaje, así que va a cambiar estos campos a porcentaje. Lo mismo por el dólar y lo mismo por día. Obviamente, necesita algo de trabajo. Todavía no estamos aquí para perfeccionar nada. Estamos aquí solo para asegurarnos de que la base funcione y luego comenzaremos a hacer pequeños ajustes. Si sí agrego gasto, Bien, éste se agrega. Hermoso. Se muestra dividido entre esta persona y esta persona. Nuevamente, pequeños ajustes aquí y allá que hacer. Puedo ver que se me deben $10, así que eso es lindo y puedo marcarlo como pagado, pero eso no funciona porque hasta el momento, no tenemos esto implementado. Vamos a asegurarnos de que también los saldos se implementen correctamente. Así que vamos a seguir adelante y hacer eso también. Pero por ahora, podemos ver que todo está funcionando muy bien para que otros usuarios puedan unirse a los viajes. Tenemos dos problemas que Next JS es Cada vez que tengas algunos errores, solo cópialos a Cursor así y abre un nuevo chat y solo comparte el error y ojalá lo arreglemos . Lo mismo con este. Voy a hacer eso en un nuevo chat. Voy a hacer que arregle esos errores. trabajas en tus funciones y luego volveremos en la próxima conferencia para trabajar en saldos para que la gente pueda También trabajas en tus funciones y luego volveremos en la próxima conferencia para trabajar en saldos para que la gente pueda ver realmente sus saldos y sea inteligente y calcule automáticamente o simplifique la deuda similar a lo que hace Spitwise Entonces una vez que eso esté listo, voy a hacer algunos pequeños cambios. Volveré y explicaré los cambios que hice. Podemos ver que esos errores se han ido por cierto, así que eso es lindo. Pero por ahora, creo que estamos más o menos preparados. Si voy a todos los viajes, puedo ver este viaje aquí. Esto no está bien porque dice solo tú, pero de hecho debería decir cuánta gente forma parte de este viaje porque no solo yo ahora, hay tres miembros, dice, aunque deberían ser dos. Nuevamente, pequeños errores aquí y allá. Anota todos los errores que veas. Cuando estés probando tu app así, anota todos los problemas que surjan para que puedas solucionarlos uno por uno. Um, eso es lo mejor que se puede hacer. No intentes solucionar todos los problemas a la vez. Cursor podría estropear más las cosas, um, pero tengo una lista de cosas que hacer, incluyendo, ya sabes, un mejor formato para mostrar dividido entre un mejor icono aquí, así que este ícono podría cambiar en función del nombre del gasto, um, ya sabes, ahora mismo , me permitió agregar un gasto sin decir para qué era. Entonces, bastantes cosas que arreglar aquí buscando temas como por qué eligió a tres miembros. Voy a regresar y hacer esos cambios al final. Luego, por último, quiero asegurarme también antes de concluir nuestro MVP de que la aplicación también es compatible con dispositivos móviles en caso los usuarios intenten acceder a ella en el móvil, cual estoy seguro que lo harán para una aplicación como esta Tal vez necesitemos hacer algunos ajustes a eso también. Volvamos, trabajemos en balances, asegurémonos de que la funcionalidad funcione y luego procedamos a pequeñas correcciones y pantallas móviles. 27. Cómo agregar balances: De vuelta en la app, creé otro usuario y agregué otro gasto ahí. Ahora mi saldo es cero porque un usuario me debe $10, el otro, yo debo $10 Ahora quiero asegurarme de que esta función de saldo funcione y que la gente pueda marcar las cosas como pagadas. Quiero asegurarme de que las deudas simplificadas sucedan para que si los usuarios se deben entre sí, se simplifique quién tiene que pagar a quién para que la gente de todas partes no tenga que hacer transacciones o transferencias y simplemente lo simplifica a quién debe a quién para mantener el número de transacciones Obviamente, hay otras cosas que quiero arreglar, pero antes de eso, voy a ir aquí a Cursor, abrir un nuevo chat y vamos a decir, quiero que los equilibrios funcionen y sean funcionales. tal manera que los usuarios pueden usarlo para realizar un seguimiento de Mark como pagado por cada usuario al que le deben dinero o al que se le debe. También quiero que se simplifique el cálculo de los saldos tal manera que automáticamente calcule quién debe pagar qué cantidad para favorecer el menor número de transacciones o transferencias que los usuarios en el viaje tengan que hacer entre sí. Agrega una alternancia en la parte superior derecha de los saldos, diciendo, El cálculo automático está encendido. Si lo apagan, entonces muestran cuánto se le debe o le debe cada usuario individual al usuario Plana y sencilla, te estoy diciendo que hagas esto funcional, lo hagas un seguimiento en la base de datos, quién se le paga a quién para que pueda ser visible aquí para el usuario, que, por ejemplo, si pagué um este usuario aquí, haga un seguimiento de eso. O supongo, en este caso, si el usuario me ha pagado, puedo decir que Mark ha pagado. Lo mismo con este, hacer un seguimiento de eso y hacerlo vivir, y luego también simplificar las deudas para que si los usuarios se deben entre sí, nuevamente, haga el menor número de transferencias requeridas, igual que lo hace en split wise. Esos son dos cambios que hice. Veamos cómo les va. Un ojo hacia fuera en Cursor ya que está haciendo algo porque a veces noto que trata de hacer algo nuevo. Le pedí que me asegurara de que el botón de pago aquí funcione y quería crear una nueva lista que ni siquiera necesitamos. Ahora vemos las calculadoras automáticas encendidas y si veo en este otro usuario, sí funciona porque ahora mismo está apagada y veo que estas dos personas me deben $10 cada una Pero si hago Auto calculo, esta persona me paga 20 pavos y estoy asentado. Esto funciona, eso es bueno, pero tenemos que asegurarnos de que la marca pagada funcione también. Está diciendo que funciona ahora, veamos. Simplemente desapareció de ahí. Eso es interesante. Vamos a asegurarnos de que las tarjetas no desaparezcan. Hablé muy pronto ahí. Todavía está trabajando en esta función, así que vamos a darle algo de tiempo ahora. Vemos que esto funciona ahora. Puedo revertir estos pagos, marcarlos como pagados. Están pasando algunos problemas donde está duplicando las tarjetas Voy a asegurarme de que en realidad está guardando la misma tarjeta y solo cambiando el esto. Pasando por este proceso, también me estoy dando cuenta de que aquí hay una brecha de UX que podría mejorarse. He usado split wise innumerables veces y una de las cosas es que nunca se sabe cuándo actuar. ¿Cuándo deberías empezar a pagar a otras personas? Lo que pienso hacer es agregar un botón de ajuste con el que pueda interactuar el dueño del viaje. Tienen un botón que dice, um, conformarse que cerrará actividad del viaje para que la gente ya no pueda agregar gastos. Después enviará un correo electrónico a cada participante y diciendo cuánto le deben exactamente a quién de esta manera, ni siquiera necesitan venir a la app para verla y simplemente pueden tener un simple botón en el correo electrónico que dice Mark pagó. Voy a trabajar en esa próxima conferencia y luego asegurarme de que todo el bucle esté cerrado antes de regresar y en realidad solo arreglando algunos problemas más que están en la aplicación, y luego deberíamos estar listos para comenzar. 28. Conclusión: Todo bien. Aquí es donde estamos. Le dije a Cursor que agregara ese botón listo para asentarse. Ahora como dueño de este viaje, puedo marcar esto como listo para asentarse. Ahí vamos. Está listo para asentarse. no puedo agregar transacciones Ya no puedo agregar transacciones aquí y tampoco nadie más en el viaje y los participantes diciendo lo que tienen que hacer. Aquí hay un usuario diciendo que estás todo arreglado. Increíble. Aquí hay otro que dice, le debes $20 a este usuario. Ahí vamos. Esto funciona bastante bien ahora para un MVP, es muy bueno Tenemos un botón de deshacer si es necesario aquí. A continuación, compilé una lista de todas las pequeñas y más grandes correcciones en las que quiero trabajar. Obviamente, esto sería demasiado para mí, para que hagamos esto juntos, y es un poco redundante porque voy a estar simplemente alimentando estas notas de UI UX en Cursor para que las arregle una por una. Entonces voy a hacer pruebas, asegurarme de que funcione, y tratar de no dedicar demasiado tiempo a esto. Por supuesto, es importante no enviar producto buggy. Pero para mí, probablemente estos van a tomar algunas horas como máximo, tal manera que al final de hoy, tengo una versión de trabajo de Tripvela funcionando y luego vamos a volver y aprender cómo podemos realmente empujar nuestra app a través de Verso para vivir en producción para que la gente pueda visitar nuestro dominio y ver nuestro dominio y ver nuestra aplicación y registrarse también en él Ahora una cosa importante que aún no hemos implementado, es también el pago. La capacidad de permitir a los usuarios pagar por este producto. Lo que vamos a hacer es que realmente vamos a trabajar en eso cuando armamos nuestra página de destino en las siguientes conferencias o módulo para que el usuario pueda pagar en ese punto de la página de destino y luego haremos la integración esencialmente funcione en ese punto en su lugar. Será un poco demasiado para hacerlo actualmente ya que también estamos armando la app. Entonces haz lo mismo, envuelve tus páginas que tienes y tu funcionalidad es la principal y luego empieza a tomar notas de pequeñas cosas que notas en el camino. También puedes mostrarle tu app a uno o dos amigos en tu máquina por ahora para que también obtengan sus comentarios y tal vez uno de ellos anote algo que te has perdido. Pero también es un buen ejercicio. Entonces, una vez que estés listo, regresa y continuaremos en nuestra siguiente sección, que va a ser la página de destino , marketing y pagos. 29. Revisión final de la aplicación: Todo bien. Pasé un par de horas arreglando todo esto y listo para enviar realmente. Entonces voy a repasar algunos cambios que hice. He añadido algunos estados de carga por aquí. Tenía Cursor en realidad hacer un esqueleto de carga de esta tarjeta. Entonces cuando se está cargando, se ve bien. Ahora también tengo un estado vacío, así que cuando los usuarios entran al tablero y no tienen ningún viaje similar a como lo tenía en Figma. También creé un logo. Coloqué el logo aquí arriba y el nombre. Crear un nuevo viaje es prácticamente lo mismo excepto que cambié el campo de fecha aquí para que sea un poco más agradable y entremos en un viaje que ya existe Entonces agregué algunas cosas aquí, la capacidad de ver a todas las personas como parte del viaje, las tarjetas de saldo funcionan ahora, y los gastos todos tienen iconos personalizados basados en el gasto. Si no encuentras un ícono, solo hará el signo del dólar así. Agregar gastos funciona ahora. Yo agregué quién pagó, así que en realidad puedes cambiar el usuario que pagó. Se puede cambiar la fecha y ahora todos estos funcionan correctamente. Las divisiones tienen sentido. Si hago 20 dólares, todos estos tienen sentido. Incluso se puede hacer de día. Esto es bueno para cosas como hoteles, Airbnbs, donde quieres dividirlo por día Sí, y luego puedes agregar ese gasto. Si agregaste gastos, tienes que asegurarte de decir para qué sirve. Digamos que gasté 200 dólares en un anuncio de hotel, y luego me devuelven 150 y puedo ver quién estaba entre. Todos esos pequeños cambios agregué el total gastado en este viaje, ajusté un poco el Snavbr y agregué un desplegable para el perfil aquí o el desplegable de perfil Entonces también hice algunos cambios para el móvil. En el móvil, también se ve bien ahora y déjame mostrarte esto es solo para mostrarte en el móvil, cómo se ve. Ahora es compatible con dispositivos móviles. Nuevamente, le di a cada individuo las cosas poco a poco. Dije para móvil, haz lo siguiente y ahora puedes ver que todas las tarjetas se ven bien. En cuanto a la aplicación en sí, está lista. Um aunque todavía no tenemos una landing page, y necesitamos una landing page antes de empujar esto a través de la producción y permitir que los usuarios la usen. Eso es lo que vamos a hacer en el siguiente módulo para volver y comenzar a armar más activos de marketing, incluida la página de destino, e incluyendo la capacidad cobrar pagos de los usuarios para esta aplicación antes de que podamos enviarla en vivo para que la gente la use. Pero en general, probé la aplicación. Funciona bien y te animo a que hagas lo mismo con tu app, y una vez que estés listo para comenzar con más cosas de marketing, entonces te veré en la próxima conferencia. 30. Revisión de la página de aterrizaje: Armar mi página de destino que voy a usar para Tripvela, mi aplicación de seguimiento de gastos de viaje Dejé de lado alrededor de un día para armar esto, y voy a repasar cómo seguí la plantilla que presenté y cómo decidí los elementos que tengo aquí. primero es lo primero, seguí adelante y agregué realmente pegadizo H one text, y eso es lo que te recomiendo que vuelvas a hacer Tu sección de héroes es una de las secciones más importantes, así que quieres asegurarte de mencionar exactamente el punto de dolor que estás resolviendo para los clientes. Um, entonces, ya sabes, escribí mi H one de una manera para hablar sobre el tipo de molestia de dividir los gastos en los viajes. Entonces escribí gastos de viaje divididos sin la molestia. Y entonces el subtexto es donde explicas un poco más sobre, ya sabes, um, lo que hace este producto. Así que he realizado un seguimiento de los gastos compartidos y los liquido instantáneamente para que todos puedan concentrarse en disfrutar del. Y luego podrás planificar tu primer viaje. Ese es el principal llamado a la acción. De hecho, llevará a los usuarios a la página de registro para crear una cuenta. Un bonito gráfico aquí a un lado, un poco agradable Su animación aquí para mostrar diferentes viajes por aquí se puede ver a la gente gastando en un viaje. De verdad platico exactamente cuál es el producto y cuál es el problema. Entonces vas aquí abajo y lees la declaración del problema. Ir en grupo Los gastos se acumulan rápido, una persona paga la cena, otra reserva boletos, alguien más paga el Uber y así nadie recuerda quién debe qué. Esto es cierto que pasa mucho en los viajes y así realmente habla de la emoción del usuario y de la experiencia que tiene. Entonces tengo la declaración de solución. TriplLA te ayuda a realizar un seguimiento para que puedas disfrutar del viaje. Nuevamente, la aplicación te ayuda a realizar un seguimiento, así que en su lugar te enfocas en el viaje. Así es como invitas a tus amigos a tu viaje, configura un viaje y compartes el enlace con tus amigos y familiares. Aquí hay un viaje de muestra y te lo mostraré en un segundo, agrega gastos. Aquí hay un gasto de muestra aquí. Agregue gastos a su viaje y realice un seguimiento de las transacciones, y luego aquí abajo, liquide. De nuevo, pequeñas y agradables animaciones de vuelo estacionario. No tienes que hacer esto en tu landing page, sino de nuevo, porque estoy usando el diseño como diferenciador de mi producto, um, estoy aplicando algunas animaciones um y microinteracciones agradables y microinteracciones Nuevamente, acomódese, vea quién debe qué, Mark pagó cuando estás al cuadrado y mantén ordenado el viaje Antes de mostrarte un viaje de muestra aquí, voy a bajar aquí y mostrarte el resto. De nuevo, una pequeña sección de descanso, dividir el costo, conformarse, sin charlas incómodas de pagaré, y luego otra llamada a la acción, crea tu primer viaje Como puede ver, la llamada a la acción está muy alineada entre sí. Planifica tu primer viaje, crea tu primer viaje alrededor de un llamado a la acción principal. No tengo 1 millón de diferentes. Este que ves en el tablero de navegación, ir a mis viajes solo se muestra porque ya estoy conectado como usuario, lo contrario solo diría registrarse o iniciar sesión. Y luego se me ocurrió el precio basado en lo que platicamos. Decidí hacer dos planes, uno por viaje. Entonces, si hay clientes que solo quieren usar esto y probarlo, pueden pagar simplemente diez dólares por viaje y luego tener gastos ilimitados a diferencia los otros competidores en el mercado, um, y luego dividirse con tantos amigos como sea posible. No hay límite en eso, o simplemente pagan $40 una vez, entonces tienen viajes ilimitados para siempre, todo en este plan, más no por tarifas de viaje, ilimitados nuevamente, gastos, así que esto es una gran relación calidad-precio. Alguien que está mirando esto y viaja mucho probablemente esté pensando, si viajo más de cuatro veces mi vida y divido los gastos con amigos, lo que habla exactamente con el público objetivo que quiero, entonces seguro que obtendrán este trato en lugar de este. Y luego estoy cerrando en base algunas preguntas frecuentes. Así que de nuevo, se me ocurrieron algunas preguntas que podrían estar encima de las mentes de la gente, ya sabes. ¿Cuándo marco a alguien como pagado? ¿Otras personas o otras personas necesitan pagar para unirse? ¿Hay una prueba gratuita? Y así respondí a todos esos uno por uno. Te animo a que hagas lo mismo para tu sección de preguntas frecuentes. Por supuesto, hay una página de términos, página de privacidad, esas que aún no he configurado, pero podrías utilizar diferentes recursos para esa, incluyendo mirar términos de la competencia o consultar con ChatGPT sobre eso Te lo dejo completamente a ti porque esas son impresiones finas y sí importan un poco, para algunos mucho dependiendo de qué tipo de app estés construyendo. Te los dejaré a ti y voy a seguir adelante y hacerlos. Um, solo hay una cosa más que eso que se necesita para esta landing page para que sea funcional o en realidad dos cosas más. Uno es configurar favicon y compartir imagen social para que los usuarios vean los metadatos y todo correctamente Ahora mismo, solo dice Tripvela que es genial. Pero nuevamente, el icono es genérico, es solo un logotipo versal. Los vamos a configurar en la próxima conferencia porque seguro que se aplicará a tu proyecto, así como una imagen de compartir en redes sociales, que es una imagen que aparece cada vez que envíes tu enlace a las personas a las que les envío un aparece cada vez que envíes tu enlace mensaje o en LinkedIn y redes sociales. Debido a que vamos a hacer algo de marketing más tarde, es importante que los establezcas bien. Y luego una vez que hagamos eso, realmente vamos a conectar Stripe para que podamos cobrar a los usuarios. Ahora mismo, tenemos esta cosa del pago, pero en realidad no podemos cobrar a los usuarios todavía. Estos realmente no hacen nada, así que en realidad los conectaremos a Stripe más adelante también. Prometo mostrarte el viaje de muestra. Pongo aquí la muestra de viaje de Barcelona al que pueden entrar los usuarios, y parece que lo haría un viaje real, les da una idea de lo que pueden esperar, sobre todo porque no tengo un plan gratuito. Pueden hacerse una idea de cómo se ve agregar gastos, e incluso pueden jugar con él y les gusta agregar gastos así como lo harían en la aplicación real. Pero claro, esto no está conectado con el back end. Todo esto hice que Cursor hiciera como un sitio web simulado, nada aquí se está guardando. Es solo sobre todo para que la gente juegue y se haga una idea de cómo se ve la aplicación. Creo que eso es muy importante para darles una idea de la app. Vamos a volver y hablar sobre los toques finales a la landing page requeridos antes de continuar e iniciar nuestro marketing y distribución. 31. Configuración de Stripe: Selecciona pagos en nuestra página de destino, vamos a usar Stripe para procesar pagos. Es la forma más sencilla de hacer que esto funcione. Cuando se trata de configurar una cuenta, es la forma más rápida y otra vez, más fácil de manejar los pagos en línea. Entonces, una vez que creas una cuenta a través de stripe.com, podría hacerte preguntas como esta para configurar las cosas. No tienes que responderlas. Puedes omitirlos, pero puedes elegir si tienes pagos recurrentes o pagos no recurrentes. Nuestros pagos no están basados en suscripción, así que vamos a seguir adelante y elegir pagos no recurrentes y luego golpear Continuar, y vamos a continuar aquí. Ahora, te preguntó, ¿quieres ir a Sandbox o cuenta Live La cuenta en vivo es tu cuenta de producción para tu aplicación real cuando está en vivo para los usuarios. Sandbox es para entornos de pruebas. Por ahora vamos a ir a Sandbox. Entonces vas a seguir adelante y buscar claves API para desarrolladores. Por lo general, esto también se muestra en su página de inicio aquí. Así que adelante y obtén dos piezas de clave de ahí para agregarlas a tu archivo de entorno. Una es la clave API. El otro es secreto. Nuevamente, desea asegurarse de que esos estén protegidos y agregados solo a su archivo de entorno. En el archivo de ejemplo aquí, voy a tener la clave API de Stripe. Tienes la clave API de Stripe y luego Stripe la nombra Stripe secret. Desea seguir adelante y asegurarse de que estos se agreguen en su archivo de entorno real y luego agregar esos valores para que esto funcione. Tómate un momento para hacerlo. Ahora que he agregado esas claves, voy a pedirle a Cursor que implemente Stripe para procesar los pagos de los dos planes presentes en nuestra página principal. Sólo voy a explicarle que el plan por viaje es por viaje y cuesta 999 permitiendo a los usuarios crear un solo viaje. Si los usuarios intentan crear más viajes, diríjalos a la página de pagos de Stripe, asegúrate de realizar un seguimiento de los créditos por viaje como parte del modelo de usuario. Entonces aquí lo que te estoy diciendo es información sobre el primer plan, que es por plan de viaje, y cuesta 999 y permite al usuario solo crear un solo viaje. Y si intentan crear más viajes, volverá a abrir esa página de pago para que paguen y, ya sabes, compren otro viaje. Te estoy diciendo que te asegures de hacer un seguimiento del crédito del viaje. Entonces, cuántos viajes la gente puede hacer en base eso como parte del modelo de usuario. Entonces el otro plan un plan es de por vida y cuesta 39 99 y permite a los usuarios crear viajes ilimitados en su cuenta. Asegúrese de realizar un seguimiento de esto en el modelo de usuario también. Voy a asegurarme de que sepa que los usuarios no pueden crear viajes sin tener créditos o un acceso de por vida. Todo bien. Voy a mandar eso y sólo otra vez hablaré brevemente de lo que hice. Le expliqué los dos planes que tengo, los precios para ellos, y le pedí que implementara Stripe para esos. Le di instrucciones específicas para asegurarme de actualizar el modelo de usuario, que es de nuevo, cómo estamos almacenando información sobre los usuarios y se puede ver eso en los modelos aquí. Entonces el modelo de usuario y enseguida, lo puedes ver actualizado, por lo que agregó créditos de viaje. Entonces por viaje actualizaría este número aquí. Entonces sabemos cuántos viajes puede crear la gente debido a cuántos créditos tienen. O si tienen un acceso de por vida, es un valor booleano aquí que creó, que es verdadero o falso y te permite hacer un seguimiento de Voy a seguir adelante y conservar este archivo y asegurarme de que cuando la app esté cambiando de modelo, en realidad detienes el servidor y luego lo vuelves a ejecutar más tarde. Entonces voy a esperar hasta que esté hecho y luego volverlo a ejecutar. Me lo dijo, asegúrate de agregar tus valores de Stripe. Ya lo hemos hecho , así que eso es bueno. Entonces seguiremos adelante y agregaremos los scripts API para eso. Parece que la implementación está lista. Voy a seguir adelante y probar la implementación ahora. Como usuario que no tiene ningún crédito, voy a intentar crear un nuevo viaje. Hagamos Bali y solo golpeemos Create Trip. Necesitas un plan para crear un viaje, compra por viaje o acceso de por vida. El único inconveniente de eso es que de manera realista me muestra las opciones aquí en lugar de simplemente decirme que necesito los créditos de viaje Ahora, vamos a probar desde la página de inicio real si estos funcionan. Hubo un error, así que voy a seguir adelante y asegurarme de pasar ese error de vuelta. ¿Qué pasa con conseguir de por vida? Lo mismo. Nuevamente, cualquier error, pasarlo de nuevo al Cursor y hacer que los analice. Entonces parece que lo ha arreglado. Parece que el error fue en realidad de mi parte. Me pidió que fijara el ID de precio de Stripe por viaje y también el ID de precio de por vida al archivo local de entorno. De hecho, necesitamos crear estos planes en Stripe. Te da las instrucciones, ve al tablero de Stripe, catálogo de productos anuncio producto. Eso lo vamos a hacer. Vamos a ir al catálogo de productos, crear producto y nombrar este por viaje. Es un pago único de 999 y vamos a seguir adelante y agregar producto y asegurarnos de que vayas dentro de ese producto y realmente copies el ID de precio por aquí. Al igual que lo hizo en mi archivo de ejemplo por aquí. Voy a copiar eso y asegurarme de pegar ese ID de precio en ese archivo de entorno. Tómate un segundo para hacerlo. De vuelta en Stripe, también voy a crear un producto para toda la vida y convertirlo en uno de 39 99. Producto, misma idea. Copia el ID de precio y de nuevo en el archivo Environment, voy a pegarlo, asegurándome de que tus valores comiencen con el subrayado del precio Ahora que eso está en su lugar, voy a probar esto. Ahí vamos. Cada vez que estés haciendo pruebas con una cuenta de Stripe, puedes simplemente poner 42, cuatro, dos, cuatro, dos repetirlo varias veces para la tarjeta de crédito, poner alguna caducidad aleatoria y pagar CVC ahora Aquí está la cosa. Ahora mismo, hemos conectado la cuenta de Stripe y hemos conectado el precio o los planes que tenemos a la cuenta de Stripe y a nuestro producto. Ahora nuestro producto realmente puede generar ese vínculo para que las personas compren el plan. Pero necesitamos lo que se llama webhook o webhook Stripe para poder entender realmente o tener nuestra aplicación y nuestras aplicaciones back end, entender y escuchar cuando Stripe le dice que sí, de hecho, esta persona sí compró un plan Así que hemos conectado el primer paso. Necesitamos ahora volver y conectar realmente el webhook que también se menciona aquí, como ves, en un punto final de webhook, debería verse algo así Y agrega este evento a él, y también necesitas establecer un secreto de webhook de Stripe en tu entorno, archivo local Como estamos probando esto localmente en nuestra máquina y aún no tenemos nuestro servidor de producción, también necesitamos usar el oyente webhook localmente en indicaciones de Stripe de que un usuario realmente ha creado o comprado planes Volvamos a la siguiente sectura para implementar el webhook de Stripe 32. en Stripe: Así que hemos conectado Stripe, y ahora necesitamos conectarnos realmente al webhook, que es esencialmente como nuestro back end sabrá cuándo los usuarios compran planes a través de Stripe Porque ahora mismo, cuando realmente permitimos que la gente cree un plan, redirigimos a Stripe, y este es en realidad el sitio web de Stripe No es nuestro sitio web. No sabemos cuándo se realiza realmente el pago de un usuario hasta que Stripe nos dice que eso sucede a través de lo que se llama webhook Si vas aquí a desarrolladores en Stripe, ve a los webhooks. De hecho, puedes configurar un webhook desde aquí o puedes probar con un oyente local Por ahora, vamos a probar con un oyente local. Sigue las instrucciones aquí y asegúrate de iniciar sesión y puedes hacer todo eso a través de tu terminal aquí abajo. Siga el enlace desde la terminal y presione Permitir acceso. Entonces asegúrate de copiar esta línea por aquí y dejarla caer también en tu terminal. Ahora cuando pegues eso en tu terminal, obtendrás un secreto de webhook Quieres asegurarte de que también agregas un secreto de webhook de Stripe como así es igual, y luego ingresa tu secreto de webhook que comienza así WHSECunderscore Tómate un momento para localizarlo y hacerlo. Una vez que lo hice, me encontré con un problema aquí. Entonces, si te encuentras con algún problema, simplemente encuentra este terminal de Stripe y envíalo y di que hubo errores a Cursor. Te pedirá que sigas adelante y entiendas qué salió mal y te dirá de qué debes hacer. Otro problema más, pero sí explicó que necesitamos asegurarnos de que sea localhost punto Colon 3,000 slash APISISH webhook Asegúrate de seguir exactamente esto. Probemos eso una vez más. He actualizado mi secreto otra vez, y vamos a seguir adelante y crear esto en otra ocasión. A ver si va a funcionar esta vez. Verás, obtuvimos un regreso de 200 de nuestro webhook API SIPEash significa que funcionó localmente. Puedes ver en nuestros datos de usuario sobre Mongo, tengo este crédito de viaje ahora de uno Eso solo sucedió porque el webhook de Stripe funcionó, lo que significa que ahora puedes crear un viaje. Vamos a probar eso. Sólo voy a poner Bali dos crear y ahí vas. Ahora tengo este viaje creado porque tenía créditos. Refresco los créditos o si actualizo mi base de datos de usuarios, como pueden ver que el crédito de viaje se ha ido. Eso está funcionando correctamente ahora. Si vuelvo y trato de crear otro viaje más como Bali tres, sabe que me quedo sin créditos y me navegará de regreso a la página de pago. Sé que eso funciona ahora. También voy a probar mi plan de por vida, misma configuración, pero con la vida, debería poder crear múltiples viajes. Te dejaré hacer eso por tu propia configuración. Es posible que tengas suscripción, sigue las instrucciones y Cursor para configurarlo . Eso sí, que hasta ahora solo hemos configurado el webhook de Stripe para que funcione localmente y aún no en nuestra producción. Necesitamos regresar una vez que empujemos nuestra aplicación a producción para conectar realmente nuestra Stripe de producción a la aplicación. Una vez que hagamos eso, debemos presionar Cambiar a la cuenta Live y copiar nuestros precios de la prueba a la producción. Lo haremos en un segundo cuando nos preparemos para impulsar nuestra aplicación. 33. Configuración de seguridad: Nos estamos preparando para llevar nuestra aplicación a producción y permitir que cualquier persona en el mundo la use. Tenemos que hacer dos pequeñas cosas más aquí, pero realmente importantes. Lo primero está en tu proyecto en MongoDB, quieres seguir adelante e iniciar sesión, ir a tu Entonces por aquí bajo la pestaña Seguridad, quieres ir debajo de base de datos y acceso a la red. Después accede a la lista de acceso IP. Esta es esencialmente la lista de direcciones IP que pueden acceder a la base de datos. este momento, aquí se incluye tu dirección IP, que te permite, desde tu máquina local, realizar cambios en la base de datos, um, pero la cosa es que una vez que entremos en vivo, los usuarios con diferentes direcciones IP todo el mundo van a estar usando tu aplicación. Um, así que eso no necesariamente funcionaría porque entonces la base de datos no funcionará y permitirá nuevas entradas o eliminaciones de diferentes direcciones IP Entonces es por eso que necesitas seguir adelante y agregar una dirección IP por aquí y asegurarte de escribir en Lista de Acceso entrada cero punto cero punto cero punto cero. Entonces cuatro ceros y luego cero. Se quiere seguir adelante y confirmar eso y luego se debe agregar por aquí y activo. Ahora bien, esto por supuesto, tiene un poco de riesgo de seguridad con él y hay otras formas de hacerlo, pero esta es la forma más fácil de configurarlo. Solo asegúrate de que tu contraseña de base de datos y nombre de usuario sean seguros. El que te fue dado por Mongo Di B cuando configuraste este cluster Eso es lo más importante es asegurarse de que eso esté protegido para que nadie pueda ingresar a su base de datos. Una cosa más que vamos a hacer de nuevo en la base de código para que nuestra aplicación sea segura es que vamos a hacer una auditoría de seguridad para asegurarnos de que nada esté públicamente expuesto o incorrecto y asegúrese expuesto o incorrecto y asegúrese implementar la limitación de la tasa de API para evitar que los abusadores hagan una verificación de seguridad exhaustiva de todas las funciones de Bend y hayan entrado Esto es solo para asegurarse de que Cursor hará una verificación final más de la seguridad de su proyecto y revisará su base de código, asegúrese de que haya algún límite de velocidad vigente, lo que esencialmente evita que las personas envíen spam a su servidor o envíen spam a su API varias veces Nuevamente, por ahí, hay muchos usuarios y algunos de ellos podrían intentar aprovechar tu plataforma. Ahora, esto le sucede a cualquier desarrollador, así que asegúrate de ejecutar este prompt y por supuesto, probablemente haya otros prompts que también puedas ejecutar para asegurarte de eso Pero esta es la que normalmente usa IE en este momento está comprobando todo en términos de autenticación, middleware, rutas API, deja haga lo suyo para que tu código sea más seguro Pero antes regresamos y realmente empujamos nuestra aplicación en vivo en nuestro dominio para que otros usuarios puedan usarla. 34. El impulso a la producción: Todo bien. Estos son tiempos emocionantes. Finalmente estamos listos para llevar nuestra aplicación en la que tanto trabajamos a la web públicamente permitiendo que cualquier persona en el mundo la use realmente. Entonces esto es emocionante y vamos a estar haciendo esto de nuevo, como se explica en nuestro stack, estamos usando Versal para desplegar nuestra aplicación. Entonces, esencialmente, Versal es la plataforma que aloja nuestro proyecto, y es una gran plataforma. Puedes comenzar de forma gratuita y también hacer un seguimiento de, ya sabes, los registros que están llegando. Así que asegúrate de hacer una prueba final de tu aplicación, asegúrate de que funcione push to Github si no lo has hecho. Te registras en Verso, creas un nuevo proyecto, y luego te pediremos que conectes tu Github. Asegúrate de conectar tu Github para que realmente puedas conectar tu aplicación o importarla a Verso con solo un clic de un botón. Ya lo hice. Voy a seguir adelante y renombrarle este Tripvela. Entonces aquí hay otra cosa importante que debes hacer. Necesitas agregar realmente las variables de entorno aquí para que una vez que tu app sea empujada, esto funcione. Voy a hacer una pausa aquí solo para explicarme rápidamente. Realmente quieres ir en tu entorno, el archivo local, copiar cada una de estas cadenas individuales. Mongo URI, por ejemplo, vas a pegar eso en la clave y luego para el valor, vas a pegar el valor que viene después del signo igual aquí Tómate tu tiempo con este porque es muy fácil cometer un error y también necesitas actualizar algunos de estos para que sean ligeramente diferentes. Por ejemplo, para el Mongo, si recuerdas para nuestro sitio para desarrolladores o nuestro sitio de desarrollo, creamos Dev En tu producción, realmente quieres hacer slash Prod o producción para que tus datos de usuario de usuarios del mundo real se almacenen en una parte diferente del clúster que los datos de prueba Y entonces vas a seguir adelante y sumar más. Nuevamente, teniendo en cuenta, algunos de estos serán diferentes. Mong seguirá igual, excepto por esa última parte en lugar de Dev, asegúrate de que sea slash Siguiente Auth Secret seguirá igual. Siguiente URL de Auth será tu URL donde las personas accederán a este sitio web Asegúrate de poner HTTPS, así que asegúrate de incluir la S para asegurar y luego Colin forward slash forward slash, y luego coloca tu sitio web real allí Para mi caso, esto será tripvelala.com, HTTPS. Tripvela.com. No hace falta poner ningún corte al final clave de reenvío será la misma porque estás enviando correos electrónicos desde la misma cuenta El correo electrónico from también debe permanecer igual. No es necesario cambiarlo. Ahora, la API de Stripe, Stripe secret y Stripe webhook serán diferentes Este, necesitarás cambiar a Stripe cambiar a tu cuenta real. Si tienes algún acuerdo, solo asegúrate de revisarlo en el documento de Stripe Live, y luego puedes copiar cosas . Elige qué copiar. Queremos copiar nuestros productos , pulsa Continuar. Entonces tienes tus llaves por aquí que puedes copiar para la cuenta real, eso debería volver a entrar de aquí en Versll Ahora, deja fuera el secreto del webhook. Eso lo haremos juntos en la próxima conferencia. Tu ID de precio de Stripe por viaje o cualquier ID de Stripe que tengas para tu tipo de pago también será diferente. Asegúrate de copiarlos también directamente desde la versión en vivo de tu Stripe así que asegúrate de hacer clic dentro de aquí, copiarlos correctamente. Nuevamente, el único otro que debería ser diferente es un secreto de webhook de Stripe, que haremos eso en la próxima conferencia juntos Adelante, ingresa esas variables correctamente. Tomaré un minuto para hacerlo, revisarlos, asegurarme de que los tiene correctamente configurados, y nos vemos en un minuto. Una vez que hayas copiado todos esos, asegúrate de presionar Deploy. Una vez que golpeas Deploy, entonces puedes ver que la aplicación comienza a construir realmente o Versa comenzará a construir tu próximo proyecto en sus propios servidores y te dará un resumen de lo que está hecho. Hay una posibilidad, a veces una gran posibilidad que obtengas o te encuentres con algún error. Si lo haces, solo tienes que seguir adelante y expandir esto, copiar esos errores y alimentarlo en Cursor para asegurarte de que se actualice o haga cambios allí. Si lo has hecho bien, todo está bien, deberías tener un despliegue en vivo. Ahora, ten en cuenta, todavía no hemos conectado nuestro dominio. Otra cosa buena de Verll es que cada vez que empujas a tu sucursal principal de Github, realidad actualizará tu aplicación en vivo, así que no necesitas hacer nada más adicionalmente para hacerlo Si haces algún cambio en tu aplicación, alguna actualización de funciones y similares, y presionas a GitHub, automáticamente tu aplicación se actualizará para los usuarios. Asegúrate de que se prueben antes de enviar algo a GitHub. Mientras tanto, vayamos a dominios y agreguemos realmente dominio existente a este proyecto, trilala.com, y vamos a golpear guardar por aquí Ya tengo este dominio en otra app, solo voy a trasladar los dominios a este proyecto. Lo único que tienes que hacer desde aquí es asegurarte de ir a tu registro de dominio. Si tienes chip de nombre o Go Daddy, asegúrate de ir allí y dirígete al DNS avanzado y agrega estos valores, como lo hemos hecho para las claves de reenvío Sigue estas instrucciones en tu proveedor de dominio y luego vuelve a reunirte conmigo aquí. Ahora, asegúrate de actualizar esos ajustes tanto para la versión sin WWW como para la versión con ya hecho. Entonces puedes intentar presionar refrescar una vez que hayas hecho eso, lo has configurado correctamente. Ahí vamos. algunos problemas aquí pasando con el diseño en la página de inicio, así que los voy a alimentar a Cursor para arreglarlos. Espero que no tengas ningún problema o si lo haces, tómate tu tiempo para solucionarlos y luego volveremos a configurar webhook de Stripe correctamente para que toda la aplicación funcione correctamente Pero enhorras por hacer pública tu app. 35. Integración de la franja final: Un último paso para configurar nuestra aplicación para que esté lista para aceptar pagos, y es configurar nuestro webhook de Stripe en producción Ahora bien, si recuerdas el webhook es lo que nos permite entender si un usuario realmente ha pagado y luego darle la suscripción o darle el beneficio, el plan, etcétera Un Cursor o agente de IA, adelante y pídele que le dé instrucciones sobre cómo configurar webhook para producción para su aplicación Darte paso a paso en función de lo que necesites hacer. Para mi caso, se ha ido adelante y me dijo, necesito seguir este paso, ir a Stripe Dashboard. Aquí hay un panel de Stripe, vaya a los desarrolladores y luego presione webhooks luego desea agregar destino Una vez que agregues el destino, este es el enlace que deseas, pero lo necesitaremos en un segundo. Para mi app, solo necesito finalizar la sesión de Checkout. Voy a buscar checkout punto sesión punto Finalizado, y ya va a salir. Para tu app, esto podría ser diferente. Este es el evento que escuchará el webhook. En mi caso, cada vez que se completó con éxito una sesión de checkout, entonces queremos seguir adelante y escuchar en este punto final para eso. La URL del punto final es la que obtuviste de la aplicación, pero claro, quieres reemplazar esto con tu dominio menos trip.com barra APISIS webhook, y luego voy a presionar Crear destino asegurarme de copiar este secreto y luego volver a tu Deployment, ir a la configuración Asegúrate de seleccionar tu proyecto, ir a tu configuración, ir a variables de entorno, y luego quieres seguir adelante y agregar variable de entorno. Ahora bien, si recuerdas en tu código, debería ser así, Stripe underscore webhook underscore Asegúrate de copiar eso y luego pegar ese valor que obtuviste de Stripe. Golpea guardar y luego presionar redesplegar. Cada vez que realice cambios en las variables de su entorno, desea continuar y volver a implementarlo para que su última implementación tenga esa clave de entorno agregada Entonces en tu proyecto, puedes hacer un seguimiento de tus implementaciones, vemos que ahora se está construyendo Ahora, una vez que haces push, la única forma de saber que este webhook de Stripe funciona es seguir adelante y hacer un pago de prueba Puedes sacar tu tarjeta de crédito y usarla o puedes ir a crear un cupón aquí en Stripe, configurar un cupón con 100% de descuento y luego asegurarte de decirle a Cursor que habilite los códigos de promoción. Y una vez que haces eso, en realidad puedes simplemente enchufar tu código de cupón y luego probar que tu suscripción a la aplicación o los precios funcionan. Entonces ahora con eso fuera del camino, tenemos nuestra aplicación en funcionamiento. Puedes compartir esto con amigos. Ahora, prometo mostrarte cómo se ve la imagen OG y los metadatos que configuramos. Entonces si pegas tu enlace a tu app en digamos que me mensaje, puedes ver por aquí tenemos Tripvela raja gastos de viaje sin la molestia Así que cada vez que alguien comparte tripvela.com, lo mostrará así, que quedó genial. Podría en el futuro hacer el cambio lugar de simplemente tener el nombre por aquí, tal vez tener una descripción de lo que hace el producto. Eso termina armando nuestro producto. El siguiente paso es realmente contarle a gente sobre ello y comenzar a obtener ventas. 36. ¿Qué sigue?: Felicidades por llegar tan lejos en el curso. Quiero hablar un poco sobre lo que pasa desde aquí. ¿A dónde vamos? ¿Qué haces con tu producto y cómo te aseguras de mantenerte encaminado con tu éxito y cómo se ve el éxito de aquí en adelante? Mucha gente asume que solo porque lanzan un producto, van a conseguir que miles de usuarios lo usen de inmediato. Realidad, los números son mucho menos que eso y lleva más tiempo. Más allá de solo necesitar más pacientes con tu progreso, necesitas entender que ahora mismo durante las próximas semanas o meses, tu objetivo es obtener la mayor cantidad de comentarios posible de esos primeros 50 a 100 usuarios que puedas obtener. No te concentres en ir por los miles todavía. Habla con esos 50 a 100 usuarios, asegúrate de mejorar tu producto y escucharlos y mejorar en función los comentarios que realmente te brindan. El verdadero objetivo es compartir su producto en su versión más actual con la gente y aprovechar los comentarios para construir un producto que luego pueda escalar a miles de usuarios en el futuro. retroalimentación de usuarios reales es un gran apalancamiento y muchos fundadores ignoran esto, pero si lo aprovechas correctamente, construirás un producto para cierto segmento de la audiencia o el mercado objetivo que podrás escalar y crecer rápidamente con el tiempo. este momento, estamos haciendo algunas suposiciones en torno a nuestro producto, pero lo ponemos frente a los usuarios, en realidad aprendemos quién es nuestro cliente real y qué es lo que realmente les importa de nuestro producto. Una vez que obtengamos esas respuestas, podemos duplicar el marketing y podemos duplicar la creación de los conjuntos de características adecuados para ellos. También aprendes qué métodos de marketing funcionan mejor para ti. Es video, o es una publicación de blog, o es una asociación o tal vez es un alcance directo. Experimentando y aprendiendo qué método funciona mejor, aprenderás en qué duplicar para que cuando llegues a gastar dinero en tu marketing, no estés desperdiciando tus dólares y lo estés gastando correctamente en los canales de marketing adecuados Buscando buenas señales de tu producto como usuarios compartiendo tu producto, hablando de tu producto, respondiéndote y dando retroalimentación sobre tu producto A veces es posible que deba salirse de su propio camino para poder hablar con los clientes y obtener algunos comentarios directamente de ellos. A veces es posible que a los clientes no les importe lo suficiente como para compartir sus comentarios contigo a menos que los pidas. Así que asegúrate de llegar a ellos y preguntar por su experiencia. Algunos de estos podrían establecerse como correos electrónicos automáticos que salen de su aplicación, asegúrese de aprovechar mucho los correos electrónicos, especialmente a su base de usuarios existente. Voy a seguir compartiendo mi producto Tripvela a lo largo las diferentes comunidades de viajes así como alcance directo con el fin de conseguir los primeros cien usuarios y a partir de ahí explorar formas en las que pueda apuntar quizás a nómadas digitales que tengan seguidores en las redes sociales que tengan seguidores en las redes sociales para crear contenido para promocionarlo por Esas van a ser mis próximas semanas y meses y espero que aprovechen todas las herramientas y métodos de marketing de los que hablamos y hagan crecer su producto a más de miles de usuarios y desearle todo mejor con él. Gracias por sumarse al curso.