Construyendo una aplicación SaaS a escala completa: Una guía completa

El orador introduce el tema de construir una aplicación SAS, destacando la experiencia común de ver a los Indie hackers en Twitter publicando capturas de pantalla de altos ingresos. El orador promete guiar a la audiencia a través del proceso técnico de principio a fin, incluyendo la creación de un sitio de marketing, la integración con Kind para la autenticación, la construcción de un panel personalizable con funciones como la creación, edición y eliminación de notas, la gestión de suscripciones utilizando Stripe, y más.

El orador muestra una demostración de la aplicación SAS que se está construyendo, con un sitio de marketing visualmente atractivo, un cambiador de temas con ajustes persistentes utilizando almacenamiento local, autenticación a través de Kind con inicio de sesión de Google, funcionalidad de creación y gestión de notas, personalización de ajustes de usuario incluyendo cambios de nombre y esquema de color, gestión de suscripciones a través de Stripe, e integración de un portal de clientes sin problemas.

El orador describe las tecnologías utilizadas en la construcción de la aplicación SAS, incluyendo Next.js 14 con el enrutador de la aplicación para el frontend, Chakra UI y styled-components para el estilo, Auth0 para la autenticación, Prisma y Superbase para la capa de base de datos, y Stripe para manejar las suscripciones.

Para comenzar el proceso de desarrollo, el orador navega hasta el directorio del escritorio, crea una nueva aplicación Next.js utilizando el comando CLI 'npx create-next-app' y nombra la aplicación 'Marshall Das SAS'. Esto marca el primer paso en la construcción de la aplicación SAS.

El orador planea usar TypeScript, ES lint y Tailwind CSS para la configuración del proyecto. Mencionan no usar el directorio de origen, optando por el enrutador de la aplicación en su lugar. La CLI instalará Next.js, tardando aproximadamente un minuto o dos.

El CLI instala con éxito Next.js, permitiendo al hablante abrir el proyecto en Visual Studio Code.

La plantilla predeterminada incluye una página de índice (page.TSX) como página principal. El presentador muestra cómo iniciar el servidor de desarrollo para ver la plantilla predeterminada en localhost:3000.

El orador elimina el contenido existente en la página de índice y lo reemplaza con una etiqueta H1 simple para probar la funcionalidad. Abordan el problema de un fondo negro modificando el archivo CSS global para lograr un fondo blanco.

El orador decide usar Shaden UI, una biblioteca de componentes estilizados basada en Radix UI, para dar estilo a los componentes en el proyecto. Siguen la guía de instalación para Shaden UI, incluyendo la configuración de la CLI e instalando componentes como botones y menús desplegables.

Para crear un interruptor de tema oscuro, comienza instalando el paquete 'next themes', que ayuda a almacenar las preferencias de tema en el almacenamiento local. Este paquete asegura que la preferencia de tema del usuario persista incluso después de que el sitio web se recargue.

Después de instalar el paquete, crea un componente 'proveedor de tema' en la carpeta 'components'. Este componente pasará la preferencia de tema a todos los componentes hijos, asegurando una tematización consistente en toda la aplicación.

Integre un componente de 'cambio de tema' que permita a los usuarios alternar entre los modos claro y oscuro. Este componente de alternancia debe ser renderizado en la aplicación para proporcionar a los usuarios la opción de cambiar la preferencia de tema.

Desarrolla un componente de 'barra de navegación' exportando una función en la carpeta 'components'. Este componente debe incluir un elemento 'nav' para mejorar la navegación dentro de la aplicación.

Comenzando con el estilo de la barra de navegación, el ponente agrega un nombre de clase para el borde inferior y el color de fondo utilizando variables CSS de Shatan UI. La altura se establece en 10 viewport height, con flex y elementos centrados. Se utiliza un componente de enlace importado de Next.js para renderizado del lado del cliente y navegación, con un título 'Marshall SAS' mostrado.

El orador explica los beneficios de usar el componente de enlace sobre una etiqueta de anclaje normal, como la representación del lado del cliente, el precargado y una experiencia de usuario más fluida sin actualizaciones bruscas. El componente de enlace requiere un atributo href, establecido en '/' para la página de índice.

Para mejorar la visibilidad, el orador aumenta el tamaño del logotipo agregando una clase con negrita y tamaño de texto '3xl', lo que resulta en una visualización más prominente.

En el lado derecho de la barra de navegación, el orador agrega un botón de alternancia de tema para el modo claro y oscuro. A continuación, se incluyen botones de inicio de sesión y registro con diferentes estilos utilizando el componente de botón de Shat CN UI, mejorando la interfaz y experiencia del usuario.

Kind es un proveedor de autenticación que patrocina el video, ofreciendo soluciones de autenticación fáciles. Admite varios métodos de autenticación como GitHub, Google y inicio de sesión sin contraseña con enlaces mágicos. Kind también proporciona servicios de gestión de usuarios y autorización, lo que lo hace más asequible y rentable que competidores como Auth0. Los usuarios obtienen 10,500 usuarios activos gratuitos.

Para comenzar con Kind, los usuarios pueden iniciar sesión o comenzar de forma gratuita. Los nuevos usuarios pueden hacer clic en 'comenzar de forma gratuita' para crear una cuenta. Los usuarios existentes pueden iniciar sesión utilizando su método preferido como GitHub. Al iniciar sesión, los usuarios son redirigidos al panel de control de Kind.

Dentro del panel de control de Kind, los usuarios pueden gestionar proyectos o negocios. Pueden cambiar entre negocios, crear nuevos proyectos y establecer detalles del proyecto como nombre, dominio y región. Elegir la región donde se almacenan los datos es crucial para el despliegue y el rendimiento de la aplicación.

Después de crear un nuevo proyecto, los usuarios pueden configurarlo seleccionando opciones como empezar desde cero o integrar Kind en un proyecto existente. Pueden elegir tecnologías como Next.js y métodos de autenticación como correo electrónico, Google y GitHub. Una vez configurado, los usuarios pueden iniciar el proyecto y explorar el panel de control.

Para instalar el SDK de Nexs, haz clic en el comando de instalación en la documentación, abre la terminal, pega el comando e instala con éxito el SDK de Nexs.

Para configurar la URL de devolución de llamada, ve a configuración, haz clic en aplicaciones, ve los detalles de la aplicación y asegúrate de que las URL de devolución de llamada estén configuradas correctamente.

Para configurar variables de entorno, agregue el ID de cliente de Kind, el secreto de cliente, la URL de ISS, la URL del sitio y las URL de redirección en el archivo EnV para mantener los secretos privados y garantizar la redirección correcta después del inicio de sesión o cierre de sesión.

Para configurar los Controladores de Ruta, crea carpetas API, off y kind off, junto con un archivo route.TS para que el Controlador de Ruta funcione de manera efectiva.

Después de configurar los Controladores de Ruta y asegurarse de que no se necesita la guía de migración, el proceso se completa con éxito, indicando que la aplicación ahora está completamente funcional.

Configurar la autenticación es sencillo al obtener los enlaces de inicio de sesión y registro, e integrarlos en los botones de la aplicación para un acceso fácil a las funciones de autenticación.

Para configurar los botones de inicio de sesión y registro, el ponente demostró envolver los botones con los enlaces de inicio de sesión y registro. Esto implicó importar los componentes necesarios y probar para asegurar la funcionalidad.

Después de configurar los botones, el orador procedió a probar la funcionalidad haciendo clic en el botón de registro. Esta acción redirigió con éxito al usuario al dominio designado, permitiendo el registro a través de GitHub.

Al encontrar un error de '404 no encontrado', el hablante se dio cuenta de la necesidad de crear una página de tablero. Esto implicó crear una nueva carpeta llamada 'tablero' y una página correspondiente para mostrar un mensaje de saludo.

Para mostrar el botón de cierre de sesión solo cuando el usuario esté autenticado, el ponente utilizó la función 'isAuthenticated' de Kind OSS. Al verificar el estado de autenticación del usuario, el ponente mostró dinámicamente tanto los enlaces de inicio de sesión y registro como el botón de cierre de sesión en la barra de navegación.

Para implementar la funcionalidad de cierre de sesión, los usuarios necesitan envolver el elemento que desean bloquear con un componente de enlace de cierre de sesión. Este proceso es similar a configurar los enlaces de inicio de sesión y registro. Al envolver el botón con el componente de enlace de cierre de sesión, los usuarios pueden cerrar sesión exitosamente y ser redirigidos a la página de inicio.

El proceso de autenticación, incluyendo las funcionalidades de inicio de sesión, registro y cierre de sesión, funciona sin problemas. Los usuarios pueden navegar fácilmente entre iniciar sesión con GitHub, Google o métodos sin contraseña. El sistema permite crear cuentas, iniciar y cerrar sesión sin esfuerzo, y gestionar cuentas de usuario con facilidad.

Una vez autenticados con éxito, los usuarios pueden acceder al panel de control donde pueden ver a los usuarios activos. El panel de control muestra información como el número de usuarios activos, proporcionando una visión general conveniente de la actividad del usuario.

La página de inicio o sitio de marketing, inicialmente vacía, se puede personalizar modificando la página de índice. Al crear un elemento de sección con estilos específicos, los usuarios pueden diseñar una página de inicio visualmente atractiva. Agregar elementos como divs con clases apropiadas y spans permite crear contenido atractivo en la página de inicio.

Cambió el nombre de la clase de un elemento span para estilizarlo con fuente pequeña, texto mediano y color primario. Actualizó el color del tema a naranja modificando las variables CSS en el archivo CSS global, lo que resultó en un diseño visualmente atractivo.

Agregué una etiqueta H1 con el título 'Crear notas con facilidad' y la estilicé con clases específicas para el tamaño de fuente, negrita y espaciado. Incluí una etiqueta P con texto Lorem Ipsum para una descripción, estilizada con clases para margen, tamaño de texto y color.

Inserté un botón de registro debajo de la descripción, lo estilicé con propiedades flex para alineación y margen. Utilicé un componente de botón con el texto 'Regístrate Gratis', ajusté su tamaño y ancho para una mejor apariencia.

Integré el botón de registro con el componente de enlace de registro para permitir la redirección al sitio web de Kind al hacer clic. Verifiqué la funcionalidad al redirigir con éxito a la página especificada.

Para mejorar la estructura del panel de control, se crea un archivo de diseño global llamado layout.TSX en la carpeta del panel de control. Este diseño será aplicable a todas las páginas dentro del subdirectorio del panel de control, evitando la necesidad de recrear el mismo diseño para cada nueva página.

Una función de exportación predeterminada llamada layout de dashboard está implementada dentro del archivo layout.TSX. Esta función establece la base para la estructura visual y la organización del contenido del panel de control.

Para mostrar contenido dentro del diseño del panel de control, se pasa el parámetro children para renderizar las páginas reales. Esto asegura que la página de índice, la página de configuración y otras páginas se muestren correctamente dentro del panel de control.

El diseño del panel de control está estilizado para mejorar su atractivo visual y funcionalidad. Se crea un contenedor flexible con nombres de clase específicos y ajustes de cuadrícula para estructurar el diseño de manera efectiva.

La configuración de la cuadrícula MD, como '200 píxeles uncore 1fr', se explica para definir la estructura del diseño. Esta configuración asigna espacio para los enlaces de navegación en el lado izquierdo y el contenido en el lado derecho del panel de control.

Para crear el componente de navegación del panel de control, se creó un nuevo archivo llamado 'dashboard nav.tsx' dentro de la carpeta de componentes del directorio de la aplicación. El componente se inició con una función de exportación llamada 'dashboard nav' y inicialmente devolvía un elemento H1 con 'hola'.

En lugar de renderizar directamente el elemento H1, se renderizó el componente recién creado 'dashboard nav' dentro del archivo 'dashboard nav.tsx'. El componente fue importado desde la carpeta de componentes, asegurando que todo continuara funcionando como antes.

El estilo del componente de navegación del panel de control comenzó utilizando el elemento nav con un nombre de clase 'grid items start' y un espacio de dos. Los elementos se renderizaron dinámicamente mapeando sobre un array de objetos que contenían nombres, enlaces e iconos para cada elemento de navegación.

Se creó un array llamado 'nav items' con múltiples objetos que representan diferentes enlaces de navegación. Cada objeto incluía propiedades como nombre, enlace e icono importados de Lucid React, definiendo los elementos de navegación como 'inicio', 'configuración' y 'facturación'.

El array 'nav items' fue mapeado dinámicamente para renderizar cada enlace de navegación utilizando el componente Next Link. A cada enlace se le asignó una clave utilizando el índice y un atributo href basado en la propiedad de enlace del elemento. El nombre e icono de cada elemento de navegación se mostraron dentro de elementos span.

Para estilizar los elementos de navegación, el elemento span padre se estilizó con propiedades de Flexbox como 'display: flex', 'align-items: center' para centrar los elementos horizontalmente. Se aplicaron clases de estilizado adicionales a los elementos de icono y nombre para garantizar una alineación y espaciado adecuados.

Ajusté el relleno, el tamaño de fuente y el espaciado del texto para mejorar su apariencia. Añadí efectos al pasar el cursor con un color de fondo de acento y cambié el color del texto al pasar el cursor al color de primer plano de acento, lo que resultó en un diseño visualmente atractivo.

Utilizó una función auxiliar para obtener el nombre de la ruta y establecer condicionalmente el color de fondo del enlace de la página de inicio según el nombre de la ruta actual. Comprobó si el nombre de la ruta coincide con un valor específico y aplicó el color de fondo de acento correspondiente.

Creó un nuevo componente 'usernav.tsx' para mejorar la experiencia de navegación del usuario. Planeado para mostrar la imagen de perfil del usuario e implementar un menú desplegable para una funcionalidad y estética mejoradas.

Para agregar el componente Avatar, el orador navegó a ui.chan.com para buscar el componente Avatar. Después de encontrar el comando de instalación, instalaron el componente Avatar en la terminal y reiniciaron el servidor def usando npm run def.

El orador comenzó a configurar la navegación del usuario creando una declaración de retorno e importando componentes. Enfatizaron la importación de componentes desde el directorio 'components' en lugar de 'RX UI' para garantizar un estilo adecuado. Los componentes importados incluyeron el menú desplegable, el desencadenador del menú desplegable, el botón y el Avatar.

Incorporando la imagen del Avatar, el orador la importó de los componentes y estableció la fuente de la imagen en una URL temporal del sitio web de la interfaz de usuario de shatan. Destacaron la importancia de renderizar correctamente la imagen del Avatar dentro del componente de navegación del usuario.

Para mejorar la apariencia de la navegación del usuario, el orador estilizó el botón con una variante 'ghost' para eliminar el color de fondo y aplicó un estilo redondeado. También estilizó el componente Avatar con propiedades específicas de altura, ancho y redondeo para lograr un diseño visualmente atractivo.

Abordando posibles problemas de renderización de imágenes, el orador implementó un componente de respaldo de Avatar para mostrar un nombre predeterminado si la imagen no se carga o no está disponible. Esto garantiza una experiencia de usuario fluida incluso en casos donde la imagen del Avatar no se muestra.

Jan demuestra cómo renderizar la información del usuario en una página web. Inicialmente, solo se muestra el nombre del usuario. Cuando se descomenta una imagen, se carga junto al nombre. Se muestra un avatar de respaldo si la imagen no se carga. El nombre y el correo electrónico del usuario se muestran en un menú desplegable.

Jan planea crear un menú desplegable para la interacción del usuario. Importa un componente de contenido de menú desplegable y lo estiliza según corresponda. Dentro del contenido del menú desplegable, Jan tiene la intención de mostrar su nombre y correo electrónico utilizando estilos apropiados.

Jan estiliza el nombre y correo electrónico del usuario en el menú desplegable. Ajusta el tamaño del texto, el peso de la fuente y la alineación para mejorar el atractivo visual. El resultado final es visualmente agradable, con el nombre y correo electrónico mostrados de manera elegante.

Jan procede a agregar enlaces de navegación al menú desplegable. Importa componentes para separador, grupo e ítem para estructurar los enlaces. Al mapear los elementos de navegación, Jan genera dinámicamente enlaces para cada ítem, asegurando una experiencia de usuario fluida.

Para resolver errores en la navegación del panel de control de Nash, la tarjeta de crédito debe ser importada desde Lucid React. Después de importarla, los errores son eliminados y la navegación funciona correctamente.

Para mejorar la apariencia de los enlaces de navegación actuales, se realizan ajustes para alinear los nombres de los enlaces a la izquierda y los iconos a la derecha. Al modificar el CSS para justificar entre ellos, la navegación ahora se ve significativamente mejor.

Se agrega un botón de cierre de sesión para permitir a los usuarios cerrar sesión. Al incluir un componente de enlace de cierre de sesión y renderizarlo en la navegación del usuario, los usuarios ahora pueden cerrar sesión con éxito en el sistema.

La funcionalidad de cierre de sesión se prueba haciendo clic en el botón de cierre de sesión. Al hacer clic, los usuarios son redirigidos a la página de inicio, confirmando la implementación exitosa de la función de cierre de sesión.

Para evitar codificar datos de usuario de forma rígida, el proceso implica recuperar valores reales como nombre, correo electrónico e imagen. Esto se logra implementando la función obtener usuario y accediendo a propiedades del usuario como correo electrónico, nombre dado e imagen.

En el componente Nav de usuario, se crea una interfaz para estructurar y recuperar los datos del usuario, incluyendo nombre, correo electrónico e imagen. Se asignan tipos a cada propiedad (tipo string). Esto asegura que el componente pueda acceder y mostrar la información del usuario de forma dinámica.

Después de actualizar el componente Nav de usuario para usar valores dinámicos para el correo electrónico, nombre e imagen, los datos de usuario en vivo se renderizan con éxito. Esto permite mostrar el nombre, correo electrónico e imagen de perfil del usuario sin codificación rígida.

Inicialmente, la recuperación de la imagen de perfil resultó nula debido a Google Images. Después de cerrar sesión y volver a iniciar sesión con Google, la imagen de perfil del usuario se obtiene con éxito y se muestra en el componente Nav de usuario.

Con la exitosa implementación de la obtención de datos de usuario frescos y su visualización en el componente Nav de usuario, la funcionalidad está completamente operativa. El diseño funciona perfectamente, mostrando dinámicamente el nombre del usuario, su correo electrónico y su imagen de perfil.

Habiendo completado la funcionalidad de visualización de datos de usuario, el enfoque se desplaza hacia la configuración de una base de datos utilizando superbase y Prisma. Este paso tiene como objetivo habilitar la consulta y almacenamiento de datos de usuario en una base de datos personal para una funcionalidad mejorada.

El orador elige su organización y nombra el proyecto 'Producción Marshall dice um' para la construcción de la producción. Generan una contraseña, establecen la región en EE. UU. para una consistencia de alojamiento y crean un nuevo proyecto.

Mientras se crea el proyecto, el ponente instala Prisma, un ORM utilizado para consultar y modificar datos. Prisma se describe como un ORM seguro que simplifica las operaciones de datos. El ponente instala Prisma usando 'npm i -D Prisma' con fines de desarrollo.

Después de instalar Prisma, el hablante inicializa Prisma y Prisma Client usando 'npx Prisma init'. Prisma crea un archivo de esquema donde se definirán modelos como usuario, notas y suscripciones.

El orador configura una URL de base de datos en el archivo .env, reemplazando el ejemplo predeterminado con la URL real de superbase. Mencionan la importancia de agregar la URL de la base de datos y crear modelos basados en el esquema.

El orador comienza a crear el modelo de usuario en el esquema. Prisma solicita agregar un ID a cada modelo para garantizar la unicidad. El modelo de usuario incluye campos para ID, nombre y correo electrónico, con restricciones únicas para ID y correo electrónico.

Los campos del modelo de usuario discutidos incluyen el ID del cliente, que actualmente es opcional pero se demostrará que es necesario más adelante. El ID del cliente debe ser único. Otro campo añadido es el esquema de color, que permitirá a los usuarios personalizar el esquema de color en la configuración. El esquema de color predeterminado está configurado en 'tema-naranja'.

El modelo de usuario actualmente solo existe en el proyecto y no en la base de datos. Para enviar la tabla local a la base de datos remota (Superbase), se utiliza el comando 'npx prisma db push'. Puede ocurrir un error debido a cambios en la configuración de la base de datos, que requieren ajustes en la URL de la base de datos.

Después de resolver el problema de la URL de la base de datos, la tabla de usuario se crea con éxito en Superbase. La tabla incluye campos como nombre, correo electrónico, ID personalizado de Stripe y esquema de color. El proceso de implementación garantiza que el modelo ahora sea accesible para consultas y manipulación de datos.

Para evitar crear múltiples instancias del cliente Prisma en un entorno de desarrollo, se crea un archivo global de Prisma 'db.ts'. Este archivo gestiona la instanciación del cliente Prisma basada en el entorno, asegurando una única instancia del cliente en entornos de desarrollo y producción.

El orador discute el tema de redirigir a los usuarios en función de su estado de autenticación. Demuestran el proceso de redirigir a los usuarios registrados a la ruta /dashboard y a los usuarios no registrados a la página de índice. El orador explica el uso de la función get server session para verificar la existencia de la sesión y la función is authenticated para determinar el estado de autenticación del usuario.

El orador aborda el manejo del estado de autenticación del usuario para prevenir el acceso no autorizado. Hacen hincapié en la importancia de verificar la existencia del usuario y redirigir a los usuarios a la ruta de índice si no se encuentra ningún usuario. El orador muestra la implementación de declaraciones condicionales y la función de redirección de la navegación de next SL para lograr esta funcionalidad.

El orador demuestra un problema con los datos de usuario en la base de datos, mostrando que aunque hay dos usuarios mostrados en el panel de control, la base de datos real no contiene ningún campo de usuario. Esta discrepancia provoca la necesidad de rectificar la situación creando usuarios en la base de datos.

Para abordar la discrepancia de datos del usuario, el orador crea una función asíncrona llamada 'obtener datos' para recuperar información del usuario como correo electrónico, ID, nombre, apellido e imagen de perfil. Se proporcionan definiciones de tipo para correo electrónico, ID, nombre, apellido e imagen de perfil para garantizar la consistencia de los datos.

El orador utiliza Prisma para obtener datos de usuario de la base de datos utilizando 'Prisma.user.findUnique' con una declaración 'where' para hacer coincidir el ID. El orador selecciona el ID y el ID personalizado de stripe para el usuario.

Se implementa una comprobación 'if' para crear un nuevo usuario si no se encuentra ningún dato de usuario en la base de datos. El orador utiliza 'Prisma.user.create' para crear un nuevo usuario con los datos proporcionados, incluyendo ID, correo electrónico y el nombre del usuario como la combinación del primer nombre y apellido.

Para configurar los datos de usuario en Prisma, asegúrate de pasar el correo electrónico, el nombre, el ID, el apellido y la imagen de perfil. Esto implica recuperar valores como user.email, user.given name, user.id, user.family name y user.picture respectivamente.

Para eliminar usuarios en la base de datos, haz clic en las tres marcas, selecciona 'eliminar usuario', confirma la eliminación de todos los datos y procede a eliminar al usuario. Esta acción elimina a todos los usuarios de la base de datos.

Para resolver el error de llamada a la función, asegúrate de llamar a la función 'obtener datos' en el diseño de la ruta del panel cuando no exista ningún usuario. Pasa los parámetros requeridos como correo electrónico, nombre, ID, apellido e imagen de perfil para evitar errores.

Para la autenticación de Google, actualiza la URL con los parámetros correctos según la última documentación. Asegúrate de incluir 'PG bouncer sh' y 'connection limit one' al final de la URL para un funcionamiento adecuado.

Al actualizar la configuración de la base de datos, asegúrese de agregar la contraseña, 'PG bouncer true' y 'connection limit one' a la URL de la base de datos. Además, incluya la URL directa y especifique el esquema en el archivo schema.prisma para una configuración adecuada.

Después de configurar la base de datos, se realizó una prueba ejecutando npx Prisma DB push para asegurar que las variables de entorno correctas estuvieran configuradas. Se encontraron errores inicialmente pero se resolvieron, confirmando la funcionalidad de la base de datos.

Los usuarios de la base de datos fueron eliminados en la base de datos Cent, seguido por la eliminación de todos los usuarios en las bases de datos Kind y Prisma para comenzar de nuevo y evitar errores durante las pruebas.

Después de eliminar a todos los usuarios de las bases de datos, se creó un nuevo usuario al registrarse con Google. La verificación se realizó revisando la base de datos para asegurar que solo existiera un usuario, evitando duplicados.

Se proporcionó un resumen del proceso de configuración de la base de datos, que incluye la creación de una nueva URL de base de datos con configuraciones específicas, la configuración de una URL directa para migraciones e implementar la lógica de creación de usuarios en el diseño de la aplicación.

La próxima tarea planificada es crear una página de configuración donde los usuarios puedan personalizar su experiencia cambiando su nombre y seleccionando diferentes temas, como naranja, azul o rosa. Esta función tiene como objetivo mejorar la personalización del usuario y la interacción con la aplicación.

Se creó una nueva función de exportación predeterminada llamada 'página de configuración' para mostrar 'hola desde la página de configuración' cuando se accede. La función devuelve un div con una etiqueta H1 que contiene el mensaje.

Al acceder a la página de configuración, el color del enlace de navegación cambia a gris, indicando el cambio de ruta a 'SL dashboard SL settings'. El color de fondo refleja la ruta. La funcionalidad de la ruta se implementó con éxito.

Se realizaron ajustes de estilo en la página de configuración. La etiqueta H1 se estilizó con clases para el tamaño del texto, y la descripción se estilizó con un color de primer plano apagado. Se mejoró la apariencia de la página.

Una tarjeta de ajustes estaba planeada para permitir a los usuarios modificar su nombre y preferencias de color. Se instalaron e importaron componentes como tarjeta, etiqueta, entrada y selección para su uso en el formulario.

Una tarjeta que muestra 'Datos generales' con una descripción que invita a los usuarios a proporcionar información sobre ellos mismos se renderizó con éxito en la página de configuración. El diseño y contenido de la tarjeta eran visibles.

Cambió a modo oscuro para una mejor visibilidad. Creó contenido de tarjeta utilizando componentes como encabezado de tarjeta, contenido de tarjeta, etiqueta y entrada. Implementó campos para nombre, correo electrónico y selección de color.

Agregado un campo de entrada para el nombre del usuario con un marcador de posición 'Your Name' y tipo 'text'.

Se incluyó un campo de entrada para el correo electrónico del usuario con un marcador de posición 'Tu correo electrónico', tipo 'email' y deshabilitado para evitar la edición.

Implementado un campo de selección para que el usuario elija un esquema de color. Incluidas opciones como verde, azul, violeta, amarillo, naranja, rojo y rosa con temas correspondientes.

El orador demuestra cambiar el esquema de color de la página de configuración, mostrando opciones como verde, azul y violeta. Cambian al modo claro, que también se ve hermoso. El siguiente paso implica hacer que la página de configuración sea funcional al obtener datos del usuario.

Se crea una función asíncrona llamada 'obtener datos' para obtener los datos del usuario utilizando Prisma. La función recupera el nombre del usuario, su correo electrónico y el esquema de color basado en el ID de usuario actual. Luego, los datos se devuelven para su uso en el componente.

Los errores relacionados con funciones asíncronas y argumentos faltantes se abordan modificando las declaraciones de funciones e importando funciones necesarias como 'obtener tipo de sesión del servidor'. Se obtiene el ID de usuario para recuperar datos con éxito.

Los datos del usuario recuperados, incluyendo nombre, correo electrónico y esquema de color, se muestran en la página de configuración. Los valores predeterminados se establecen para manejar casos en los que los datos pueden ser indefinidos, asegurando una experiencia de usuario fluida.

Se agrega un botón de guardar a la página de configuración para permitir a los usuarios cambiar y guardar sus datos. El botón se coloca en la sección del pie de tarjeta para un fácil acceso, mejorando la interfaz de usuario y permitiendo la presentación de datos.

El orador planea hacer que la funcionalidad de mutación funcione para permitir a los usuarios cambiar su nombre y preferencia de color. Utilizarán una acción de servidor en Next.js para actualizar los datos del usuario directamente en un archivo, evitando la necesidad de rutas de API separadas.

El orador comienza creando una función asíncrona llamada post data para manejar la acción del servidor. Se aseguran de que la función se ejecute en el servidor marcándola como 'use server' para evitar la ejecución en el lado del cliente.

En la acción del servidor, el hablante utiliza Prisma para actualizar los datos del usuario. Especifican una declaración where para apuntar a un usuario específico por ID y luego crean una declaración de datos para actualizar el nombre y el esquema de color del usuario.

Para recuperar los datos del formulario para actualizar la información del usuario, el hablante crea constantes para el nombre y el esquema de color. Utilizan form data.get() para extraer los valores correspondientes a los nombres de entrada.

Después de implementar la acción del servidor y la recuperación de datos del formulario, el ponente prueba la funcionalidad cambiando su nombre a 'Jan Marshall' y el esquema de color a 'amarillo'. Al guardar, verifican que los cambios se mantienen en la base de datos.

Darse cuenta de la falta de retroalimentación del usuario al guardar cambios, el orador planea agregar un indicador de carga. Tienen la intención de crear una señal visual para que los usuarios sepan cuándo los datos se están procesando y actualizando.

Para implementar la funcionalidad del botón de enviar, el cliente necesita usar la función 'useFormStatus' para verificar eventos pendientes. Si hay un evento pendiente, el botón debe mostrar 'Por favor espere'; de lo contrario, debe mostrar 'Guardar ahora'. La función 'useFormStatus' se importa de React-DOM.

Para mejorar la apariencia del botón, cuando el evento está pendiente, el botón debe estar deshabilitado y mostrar un indicador de carga. Además, se debe aplicar un nombre de clase 'wfit' al botón. Cuando el evento no está pendiente, solo se debe aplicar el nombre de clase 'wfit'.

Para actualizar el esquema de color dinámicamente basado en las preferencias del usuario, el nombre de clase del elemento body en el archivo de diseño necesita ser cambiado. Obtener la preferencia de color del usuario en el archivo de diseño y añadirla al nombre de clase del elemento body para reflejar el tema elegido por el usuario.

El orador habla sobre hacer cambios de estilo en CSS eliminando ciertas clases, dejando otras para bordes y fondos, y pegando estilos de un archivo CSS global.

Para solucionar estilos faltantes debido a no apuntar al elemento body, el orador sugiere agregar un nombre de clase dinámicamente basado en la selección del usuario de un menú desplegable.

El orador demuestra cómo obtener datos con Prisma importándolos, encontrando un usuario único basado en su ID y seleccionando el esquema de color.

Para cambiar dinámicamente el tema basado en la preferencia del usuario, el orador utiliza funciones asíncronas para obtener los datos del usuario y establecer el esquema de color correspondiente.

Para garantizar que las actualizaciones se reflejen de inmediato, el orador explica la necesidad de volver a validar la caché en los componentes del servidor utilizando la función de revalidación proporcionada por Next.js.

Para revalidar el diseño raíz de la aplicación, la ruta debe ser proporcionada como una barra seguida de la página de índice y diseño. Este proceso permite la revalidación automática de cambios sin necesidad de refrescar manualmente.

En caso de que un usuario no esté registrado, puede aparecer un mensaje de error indicando la necesidad de al menos uno de los siguientes: ID, correo electrónico o ID personalizado de Stripe. Al implementar una declaración if para verificar el ID del usuario antes de obtener los datos, el error se puede resolver.

Cuando un usuario no ha iniciado sesión, es crucial asegurar los estilos predeterminados. Al utilizar una comprobación condicional para los datos del esquema de color y proporcionar un valor de respaldo como tema-Naranja, el sitio web mantiene una apariencia visualmente atractiva incluso para los usuarios no registrados.

Permitir a los usuarios cambiar dinámicamente los temas mejora la experiencia del usuario. Al habilitar a los usuarios para cambiar fácilmente de tema manteniendo las opciones predeterminadas, como el tema Naranja, el sitio web ofrece personalización sin comprometer la estética.

Para crear una página de edificio, navega hasta la carpeta de la aplicación dentro de la carpeta del panel de control y crea una nueva carpeta llamada 'building'. Dentro de esta carpeta, crea un nuevo archivo llamado 'page.TSX' para establecer una nueva ruta. Implementa una función de exportación predeterminada llamada 'building page' para mostrar contenido en la página de edificio.

Para desarrollar un componente de precios, comienza creando un nuevo elemento div con nombres de clase específicos para el estilo. Dentro de este elemento, diseña el diseño de la tarjeta de precios para mostrar la información de precios de manera efectiva, asegurando una presentación visualmente atractiva y amigable para el usuario.

El orador importó el componente de tarjeta y el componente de contenido de tarjeta de los componentes, aplicando nombres de clase para el estilo. Apilaron elementos verticalmente y estilizaron el elemento H3 con clases específicas para relleno, esquinas redondeadas, tamaño de fuente, peso de fuente, color de texto y color de fondo.

Después de mostrar el nombre de la categoría 'Mensual' en un elemento H3, el orador creó una visualización de precios utilizando un elemento div con un nombre de clase para el estilo. El precio se estableció en $30 por mes, seguido de un elemento span que indica el precio mensual. El estilo incluía tamaño de fuente, peso de fuente y color de texto.

Para proporcionar una descripción de nivel, el orador agregó un elemento de párrafo debajo de la pantalla de precios, utilizando texto de marcador de posición. El estilo incluyó margen superior, tamaño de fuente y color de texto para mejorar la legibilidad y el atractivo visual.

Para la lista de características, el orador creó un elemento div debajo del componente de contenido de la tarjeta, aplicando clases de estilo específicas. Se utilizó una etiqueta UL para mostrar viñetas de las características incluidas en el precio de $30 por mes. El orador definió un array de elementos de características para poblar la lista.

Dentro de una etiqueta UL, el orador mapea sobre un array de elementos de características utilizando la función map. Cada elemento se representa como una etiqueta Li con una clave prop de índice y un nombre de clase de flex y elementos de Center. El contenido incluye un icono de círculo de verificación, el nombre del elemento mostrado en una etiqueta p, y ajustes de estilo para una mejor presentación.

Para finalizar la tarjeta de precios, el orador agrega un elemento de formulario debajo de la etiqueta UL para crear un botón de envío. Se utiliza el componente de botón de sh y UI con el texto 'Comprar hoy'. Se realizan ajustes de estilo para asegurar que el botón y el formulario tengan un ancho completo para un diseño visualmente atractivo.

El orador navega a stripe.com para configurar el procesamiento de pagos para la tarjeta de precios. Crea una nueva cuenta, configura variables de entorno, obtiene la clave secreta y crea un nuevo producto en el catálogo llamado 'Marshall SAS premium' con un monto de suscripción recurrente de 30 unidades.

Después de crear un producto en el panel de control de Stripe con un precio de $30 al mes, se obtiene el ID de la API y se almacena en variables de entorno. Esto configura la configuración inicial para usar Stripe.

Para integrar Stripe, el ponente instala el paquete 'stripe' usando npm. Este paquete está específicamente diseñado para su uso en el lado del servidor, lo cual se alinea con la preferencia del ponente por un enfoque del lado del servidor para la integración de Stripe.

Se crea un nuevo archivo llamado 'stripe.ts' para alojar todo el código relacionado con Stripe. El primer paso implica importar el módulo 'Stripe' y configurar un cliente de Stripe con la clave de API almacenada en variables de entorno.

El orador configura variables de entorno, incluyendo la versión de la API y la configuración de TypeScript, para mejorar el proceso de desarrollo. Se realiza un ajuste menor para manejar posibles valores no definidos en las variables de entorno.

Una función asíncrona llamada 'getStripeSession' está definida para manejar el proceso de pago. Requiere parámetros como el ID del precio, la URL del dominio y el ID del cliente para mapear las suscripciones en el panel de control de Stripe.

Para crear una sesión de pago de Stripe, se establece una constante sesión igual a AIT stripe. El proceso implica iniciar una nueva sesión de pago de Stripe utilizando stripe.checkout.sessions.create. Se establecen varios parámetros, incluido el ID del cliente, el modo (pago, configuración o suscripción), la colección de dirección de facturación configurada en Auto, elementos de línea con ID de precio y cantidad, tipos de método de pago (por ejemplo, tarjeta), campo de actualización del cliente para actualizaciones de dirección y nombre, URL de éxito para suscripciones exitosas, URL de cancelación para suscripciones fallidas y devolución de la URL de sesión para redireccionar a la página de pago.

Para abordar el problema de pasar un ID de cliente de Stripe sin crear una cuenta de cliente, se describe un proceso. Cuando un usuario crea una cuenta, se realiza una verificación para ver si existe un ID de cliente de Stripe. Si no existe, se crea un nuevo cliente en Stripe utilizando el correo electrónico proporcionado. El ID de cliente de Stripe se almacena luego en la base de datos asociada con la cuenta del usuario.

Después de actualizar el ID personalizado de twipe, se crea un nuevo cliente de Stripe. El sistema verifica si el cliente existe; si no existe, se crea uno. Al revisar el panel de control de Stripe, el nuevo cliente es visible. Además, se confirma que los datos del cliente están presentes en la base de datos utilizando Prisma.

Para habilitar la experiencia de pago, se obtiene el ID del cliente de Stripe del usuario. Se crea una nueva función asíncrona 'obtener datos' para recuperar los datos de suscripción del usuario. Se agrega un nuevo modelo de 'suscripción' al esquema con campos como ID de suscripción de Stripe, intervalo, estado, ID de plan, inicio de período, fin de período, marcas de tiempo de creación y actualización.

Establecer una relación uno a uno entre usuarios y suscripciones, se modifica el modelo 'usuario' para eliminar el array de suscripciones y agregar un signo de interrogación para indicar una relación única. El modelo 'suscripción' se actualiza para incluir una referencia al usuario. Los cambios en el esquema se envían a la base de datos remota utilizando 'npx Prisma DB push'.

La base de datos ahora está sincronizada con el esquema de Prisma, garantizando la consistencia y precisión de los datos.

Crear un modelo de suscripción implica definir una suscripción única basada en el ID de usuario y seleccionar datos específicos como el estado de la suscripción y el ID personalizado de stripe.

Las funciones asíncronas son necesarias para manejar errores y garantizar una ejecución fluida. Errores como 'las expresiones aate solo están permitidas dentro de funciones asíncronas' deben ser abordados marcando las funciones como 'async'.

Para que un botón funcione, es necesario crear una acción de servidor. Esta acción debe ser marcada como una acción de servidor para ejecutarse exclusivamente en el servidor, garantizando un funcionamiento adecuado.

El proceso de crear una suscripción implica verificar si existe un ID personalizado válido, y luego proceder a crear la URL de la suscripción con los parámetros necesarios como el ID personalizado, la URL del dominio y el ID de precio.

El proceso implica copiar y pegar el ID del precio de la tienda como una cadena, agregar una redirección de retorno desde la siguiente navegación de SL, pasar la URL de la suscripción y configurar la acción del servidor para trabajar con el botón dando al formulario una acción llamada 'crear suscripción'.

Para mejorar la funcionalidad del botón, se crea una nueva función de exportación llamada 'botón de creación de suscripción de rayas' para manejar el estado pendiente usando el 'estado del formulario'. El botón se estiliza de manera diferente según el estado pendiente, con el tipo configurado como enviar y el nombre cambiado a 'crear suscripción'.

Se encuentra un error relacionado con 'no se pueden leer propiedades de nulo', lo que indica que falta el 'ID personalizado de stripe'. El error se resuelve al obtener el 'ID personalizado de stripe' dentro de la acción del servidor utilizando Prisma para encontrar un usuario único basado en el ID y seleccionando el 'ID personalizado de stripe'.

Después de resolver el error, la funcionalidad de suscripción se prueba haciendo clic en 'crear suscripción', lo que redirige a la página de Stripe mostrando un precio de suscripción de $30 por mes. El proceso permite a los usuarios suscribirse, proporcionar detalles de la tarjeta y realizar pagos.

El equipo encontró un error 404 en la página de inicio debido a la falta de una página para 'pago SL canell'.

Para resolver el problema, el equipo decidió crear dos carpetas dentro de la carpeta 'payment': 'success' y 'cancel'.

Dentro de la carpeta 'canell', se creó una nueva página 'cancel.tsx' para manejar la ruta de cancelación.

En la carpeta 'pago', se creó una carpeta 'éxito' con un archivo 'page.tsx' para manejar las rutas de pago exitosas.

El estilo para la ruta de cancelación incluía un div de ancho completo con propiedades flex para centrar elementos, y un componente de tarjeta con estilos específicos.

El icono X fue estilizado con clases específicas para ancho, alto, color de fondo, opacidad y propiedades de texto para mejorar la apariencia visual.

Se mostró un mensaje 'Pago fallido' utilizando una etiqueta H3 con estilos específicos para el tamaño del texto, el interlineado y el peso de la fuente.

Se mostró la información adicional 'No te preocupes, no se te cobrará. Por favor, inténtalo de nuevo' debajo del mensaje de fallo de pago.

Se agregó un componente de botón con un enlace a la página de inicio para permitir a los usuarios navegar fácilmente de regreso al panel de control.

El orador demuestra agregar un nombre de clase 'w full' a un botón, asegurando que mantenga el ancho completo. Al pasar el cursor sobre él, el botón enlaza a la página de inicio, redirigiendo con éxito a los usuarios.

Una página de 'éxito' se crea definiendo una función de exportación predeterminada en la ruta de éxito. El diseño de la página refleja la ruta de cancelación, con ajustes como el uso de un color verde, cambiar el texto a 'pago exitoso' e importar componentes como Card, Check, Button y Link.

El orador prueba la creación de una suscripción ingresando los detalles de la tarjeta de demostración (por ejemplo, número de tarjeta 424242, mes 4242, CVC 4242) y se suscribe con éxito a un plan. El pago se refleja como exitoso en Stripe, mostrando una suscripción de $30 creada por el cliente.

Después de la creación exitosa de la suscripción, el orador señala la capacidad de volver a suscribirse a pesar de ya estar suscrito. Para abordar esto, se sugiere realizar una verificación de suscripciones existentes antes de permitir más suscripciones, enfatizando la necesidad de un portal de clientes y configurar un webhook para actualizar el estado de la suscripción del usuario.

Para manejar eventos de Stripe, como la creación de suscripciones de usuarios, es necesario crear una ruta de API POST. Esta ruta recibirá datos de Stripe y actualizará la base de datos en consecuencia.

Crear la ruta de la API de publicación no es excesivamente complejo, pero un desafío significativo radica en escribir una cantidad sustancial de código de plantilla para manejar los eventos de Stripe de manera efectiva.

Un paso crucial implica obtener la firma de Stripe de las cabeceras para verificar la autenticidad de los datos del evento entrante. Esta firma es esencial para garantizar la integridad y seguridad de los datos.

El proceso implica construir un evento de webhook pasando el cuerpo del evento, la firma y el secreto del webhook. Se enfatiza la correcta escritura de 'firma de stripe' para evitar errores en el código.

Un bloque try-catch se utiliza para manejar errores durante la construcción del evento. Si ocurre un error, se devuelve una respuesta con un código de estado 400, indicando un error de webhook.

Almacenar el secreto del webhook en una variable de entorno mejora la seguridad y evita exponer información sensible en el código. Al recuperar el secreto de la variable de entorno, el código permanece seguro.

Extrayendo datos de sesión del evento permite un procesamiento adicional basado en el tipo específico de evento. Al especificar el tipo de datos de sesión, como una 'sesión de pago de stripe', el código gana claridad y precisión en el manejo de los datos.

Usando declaraciones condicionales, el código puede escuchar eventos de webhook y ejecutar lógica específica basada en el tipo de evento. Esto permite que el sistema responda adecuadamente a diferentes tipos de eventos recibidos de Stripe.

Para manejar una sesión de pago completada, el primer paso es recuperar la información de la suscripción utilizando la API de Stripe. Esto implica obtener los detalles de la suscripción basados en la sesión y marcarlo como una cadena para evitar errores.

Después de obtener los detalles de la suscripción, la siguiente tarea es obtener el ID personalizado del usuario de los datos de la sesión. Este ID personalizado se utiliza luego para consultar la base de datos y recuperar la información del usuario utilizando Prisma.

Una vez que se recuperan los datos del usuario, el proceso continúa creando una nueva suscripción para el usuario. Esto implica utilizar Prisma para crear una suscripción con varios detalles como el ID de la suscripción, el ID del usuario, el inicio del período actual, el estado, el ID del plan y el intervalo.

En respuesta al evento 'invoice.payment.succeeded', el sistema necesita actualizar la suscripción del usuario. Esto requiere recuperar los detalles de la suscripción nuevamente y luego actualizar la información de la suscripción del usuario en la base de datos utilizando Prisma.

Para configurar el gancho web, el primer paso es asegurarse de que el ID de suscripción coincida con el ID obtenido del evento. Luego, actualiza el ID del plan para que coincida con los datos de la suscripción, incluido el ID de precio. Después, recupera las fechas de inicio y fin del período actual junto con el estado de la suscripción.

Después de actualizar los datos necesarios, el paso final es crear una nueva respuesta para indicar el éxito del gancho web. Esta respuesta debe tener un código de estado 200, lo que significa una operación exitosa.

En un entorno de producción, es esencial crear y manejar varios eventos. Si bien hay numerosos eventos a considerar, enfocarse en eventos clave como pagos y abandono de carritos es crucial para un manejo efectivo de eventos.

Para probar el web hook, navega hasta el panel de control de Stripe, accede a la sección de desarrolladores y configura los web hooks para pruebas. Autentica la CLI usando la Stripe CLI, copia el bloque requerido y asegúrate de que la URL correcta y la clave secreta estén configuradas.

Después de configurar la URL del gancho web y la clave secreta, verifique la funcionalidad enviando eventos al gancho web. Mantenga abierta la pestaña del gancho web para garantizar un funcionamiento adecuado y reinicie el servidor si es necesario para realizar pruebas.

Después de ser redirigido a la página de éxito, la terminal mostró la exitosa creación de un modelo de suscripción utilizando Prisma Studio. El modelo incluía detalles como una suscripción activa con un intervalo de un mes, un ID de plan, fechas de inicio y fin del período actual, fecha de creación y mapeo a un usuario.

Para integrar el portal de clientes de Stripe, se utilizó una declaración if para verificar si el estado de la suscripción estaba activo. Si estaba activo, se renderizaba el portal de clientes; de lo contrario, se mostraba una tarjeta de precios. El portal incluía opciones para configuraciones de suscripción y se realizaron mejoras de estilo para un mejor atractivo visual.

Se realizaron mejoras de estilo en la página de suscripción, incluyendo ajustes en tamaños de texto, colores y diseño. El título 'Suscripción' y la descripción 'Configuraciones relacionadas con tu suscripción' se estilizaron para una mejor legibilidad y presentación visual. Se añadió un componente de tarjeta con la opción 'Editar Suscripción' y un botón para 'Iniciar Portal' para la interacción del usuario.

Antes de crear la acción real, el orador sugiere dar estilo al componente de botón llamado submit_buttons.tsx. Proponen crear una nueva función llamada 'portal de stripe' dentro del componente para manejar diferentes estados del botón, como pendiente y no pendiente.

Se introduce una nueva acción de servidor llamada 'crear portal de cliente' para manejar la creación de un portal de cliente. La función está marcada como 'usar servidor' para ejecutarse solo en el servidor. Implica importar Stripe desde la carpeta lib y crear una nueva sesión de portal con datos específicos como el ID de cliente de Stripe del usuario y la URL de retorno.

El orador prueba la acción del servidor conectándola al formulario y haciendo clic en 'ver detalles del pago'. Inicialmente, se produce un error debido a no guardar la configuración del portal del cliente en modo de prueba. Después de guardar la configuración y actualizar la página, la acción redirige correctamente al portal del cliente de Stripe, mostrando las suscripciones activas.

El orador sugiere crear un nuevo modelo en el esquema llamado 'nodo'. El modelo incluye campos como ID, título, descripción, marca de tiempo de creación, marca de tiempo de actualización y una relación con el modelo de usuario para una relación uno a muchos.

El orador menciona la extensión Prisma que se puede instalar para generar automáticamente código. Esta extensión simplifica el proceso de generar código relacionado con la sincronización del esquema y la base de datos.

El orador demuestra cómo usar 'npx Prisma DB push' para sincronizar el esquema de Prisma con la base de datos remota en Superbase. Esto asegura que la base de datos refleje los cambios realizados en el esquema.

El orador modifica la página del tablero agregando elementos como un diseño de cuadrícula, encabezados, descripciones y un botón para crear una nueva nota. Se aplican elementos de estilo para mejorar el atractivo visual de la página.

Para mostrar notas, se creó una función llamada 'getData' para obtener datos utilizando Prisma. La función recupera notas basadas en el ID del usuario actual, las ordena por la marca de tiempo de creación en orden descendente para mostrar primero las notas más recientes, y devuelve los datos.

Para manejar errores y pasar el ID de usuario a la función 'getData', se exportó una función asíncrona. El ID de usuario se obtiene importando 'getUser' de la sesión del servidor y extrayendo el ID del usuario. Esto garantiza una recuperación adecuada de datos y manejo de errores.

Se implementó el renderizado condicional para mostrar un mensaje cuando no hay notas. Si la longitud de los datos es cero, se muestra un div estilizado con un ícono de archivo para indicar al usuario que cree una nota. Esto mejora la experiencia del usuario al proporcionar retroalimentación clara.

Se realizaron ajustes de estilo para mejorar el atractivo visual de la interfaz. El div padre que contiene el ícono del archivo se estilizó con propiedades flexibles, esquinas redondeadas, color de fondo y opacidad para crear un elemento de tarjeta visualmente atractivo. Estas mejoras realzan la estética general del diseño.

Margen ajustado y estilo para los elementos H1 y descripción debajo del ícono de archivo y elemento de diferencia. Se agregaron nombres de clase para margen, texto y fuente para mejorar la apariencia.

Además, se estilizó la página agregando nombres de clase para el margen, alineación de texto, peso de fuente y color de texto. Se implementaron propiedades de ancho máximo y MX para un mejor diseño.

Incluido un botón 'Crear nueva nota' en la parte inferior de la página para la interacción del usuario. Estilizado el botón para mejorar su atractivo visual.

Desarrolló una nueva ruta en la carpeta de la aplicación dentro de la carpeta del panel para permitir a los usuarios crear nuevas notas. Implementó un elemento de formulario con un componente de tarjeta, encabezado de tarjeta, título y descripción.

Ajustado el diseño para crear espacio para que los usuarios ingresen los detalles de la nueva nota. Se agregaron propiedades Flex y Gap para mejorar el diseño. Se incluyeron componentes de etiqueta e input para la entrada del título con campo requerido y marcador de posición.

Creó un nuevo elemento de área de texto bajo un nombre de clase específico 'Flex Flex de llamada y Gap y de dos' para renderizar un campo de entrada de descripción. Instaló el componente de área de texto desde npm para habilitar la funcionalidad de entrada de descripción. Agregó un marcador de posición 'Describe tu nota' y marcó el campo como obligatorio.

Implementé un pie de tarjeta con dos botones: un botón de cancelar y un botón de guardar. Estilicé el botón de cancelar con una variante 'destructiva' para indicar una acción de peligro. Probé la funcionalidad del botón de cancelar, que redirige con éxito al panel de control.

Ajustadas las variantes de color de los botones de cancelar y guardar para separación visual. Verificada la funcionalidad de redirección del botón de cancelar al panel de control. Preparado para implementar una acción en el servidor para habilitar la creación de una nueva nota extrayendo datos de título y descripción del formulario.

El orador discute configurar los datos del formulario para recuperar una descripción y asignarle un nombre de 'descripción' como una cadena. Luego proceden a enviar los datos a la base de datos utilizando Prisma, importándolos y utilizando la función 'create' de Prisma para crear una nueva nota. Se requieren tres valores para esta operación: ID de usuario (cadena), descripción (cadena) y título (cadena).

El orador explica el proceso de obtener el ID de usuario utilizando una función proporcionada por 'kind'. Importan 'obtener sesión del servidor de kind' y recuperan el ID de usuario usando 'obtener usuario'. Se utiliza una función asíncrona para evitar errores relacionados con las expresiones AWA. Se implementa una declaración if para manejar casos en los que no hay usuario, lanzando un nuevo error con el mensaje 'no autorizado'.

Después de que se complete la acción del servidor, el hablante discute redirigir al usuario de vuelta al panel de control. Utilizan la función 'return redirect' importada de la navegación de next SL para redirigir a '/dashboard'. Esto garantiza una experiencia de usuario fluida después de enviar los datos.

Para mostrar notas en la página de índice del panel de control, el orador elimina una plantilla predeterminada y la reemplaza con un componente de tarjeta mapeada. Cada tarjeta muestra el título de una nota, con ajustes de estilo realizados para garantizar una presentación adecuada. El orador enfatiza la importancia de proporcionar una clave prop para cada elemento para evitar problemas de hidratación.

El orador discutió la representación de la fecha en que se crea una nota, utilizando el formato de fecha 'en-US' con estilo de fecha completo y formato 'punto'. La fecha se genera dinámicamente utilizando el valor 'item.createdAt'.

El orador explicó el proceso de agregar botones de edición y eliminación a la interfaz de notas. El botón de edición redirige a '/dashboard/new/item.ID', mientras que el botón de eliminación muestra un icono de basura rojo con una variante 'destructiva'.

El orador encontró un error '404 not found' debido a la falta de una ruta para el slug dinámico. Para resolver esto, se creó una nueva carpeta llamada 'ID' con una ruta dinámica en Next.js, permitiendo el enrutamiento dinámico basado en el parámetro 'ID'.

El orador importó varios componentes como título de tarjeta, descripción, etiqueta, entrada, contenido de tarjeta, área de texto, pie de tarjeta, botón y componente de enlace de la carpeta de componentes para construir un formulario.

El orador cambió el texto en el formulario de 'Nueva Nota' a 'Editar Nota' y actualizó la descripción a 'Ahora puedes editar tu nota'.

El orador expresó la necesidad de obtener datos para llenar los campos del formulario con el título y la descripción de la nota. Implementaron una función asincrónica 'obtener datos' para recuperar los datos utilizando Prisma mediante una consulta de una nota única basada en el ID del usuario y el ID de la nota.

El orador pasó el ID de usuario y el ID de nota a la función 'obtener datos' para recuperar los datos específicos de la nota para el formulario. Obtuvieron el ID de usuario recuperando al usuario de la sesión del servidor y el ID de nota de los parámetros.

El orador estableció valores predeterminados para los campos de título y descripción del formulario para poblarlos con los datos obtenidos. Utilizaron 'data.title' para el campo de título y 'data.description' para el campo de descripción.

El botón de guardar no funcionaba inicialmente, pero después de probar el botón de cancelar y luego hacer clic en editar nuevamente, comenzó a funcionar correctamente. El siguiente paso consistió en crear una función asíncrona llamada post data para manejar acciones en el servidor.

Dentro de la función async de post data, se implementó una verificación para asegurar que un usuario esté conectado; de lo contrario, se lanza un error. Luego, la función extrae el título y la descripción de los datos del formulario, actualiza la nota utilizando el método note.update de Prisma, y configura una redirección al panel de control al completarse.

Después de asignar la acción de datos del post al formulario, se configuró una redirección al panel de control al completar la acción del servidor. La prueba de la funcionalidad implicó editar una nota, guardarla y verificar la redirección exitosa al panel de control.

Para abordar problemas de caché en un entorno de producción, se agregó una ruta de revalidación después de la operación de actualización de Prisma para garantizar la consistencia de los datos. Este paso fue crucial para mantener la visualización precisa de los datos y la funcionalidad.

Para habilitar la eliminación de notas, se creó una acción del servidor llamada eliminar nota. Esta acción recupera el ID de la nota de un campo de entrada oculto en el formulario, permitiendo la eliminación dirigida de notas específicas. La implementación reflejó prácticas de metodologías antiguas de PHP para una gestión eficiente de notas.

El orador planea nombrar una variable 'ID de nota' y asignarle el valor de 'item.ID'. Al acceder a los datos del formulario, recuperan el ID de la nota como una cadena para prepararse para la eliminación utilizando Prisma.

Para eliminar una nota, el hablante utiliza la función 'node.delete' de Prisma y especifica la nota a eliminar basándose en el ID que coincide con el 'ID de la nota'. Se encuentran con un problema de caché en Next.js, que requiere la revalidación de la caché para reflejar las actualizaciones.

Después de eliminar una nota con Prisma, el hablante utiliza 'revalidate' de Next.js para refrescar la caché de la ruta '/dashboard', asegurando que la nota eliminada desaparezca sin necesidad de una actualización completa.

El orador demuestra la creación, edición y eliminación de notas, mostrando la función de revalidación automática de caché. Simulan los procesos de creación, edición y eliminación de notas para confirmar la funcionalidad.

Cambió 'type submit' a 'disabled State' para la funcionalidad de estado pendiente. Se redirigió con éxito a /dashboard y se demostró el estado pendiente al eliminar una nota.

Probadas las funcionalidades de inicio de sesión, página de configuración, facturación, creación, edición y eliminación de notas. Verificados los cambios de tema, redirección al portal del cliente y revalidación de caché.

Identificó el problema donde los usuarios no suscritos podían crear notas. Implementó lógica para redirigir a los usuarios no suscritos a la página de facturación. Utilizó Prisma para verificar el estado de suscripción del usuario.

El orador discute la implementación de la lógica de redirección condicional en la aplicación. Si una cierta condición es verdadera, la aplicación se redirige a 'D / nuevo', y si es falsa, se redirige a 'tablero de SL' o 'facturación de SL'. El orador demuestra cómo ambos botones ahora redirigen correctamente a 'facturación de SL'.

El orador inicia sesión con una nueva cuenta que no tiene una suscripción activa. Al pasar el cursor sobre el botón, ahora se enlaza correctamente a 'Facturación de SL'. El orador se asegura de que ambos botones redirijan a la página correspondiente para diferentes escenarios de cuenta de usuario.

Antes de implementar la aplicación, el orador aborda un error relacionado con el almacenamiento en caché en entornos de desarrollo con Next.js. Explican la necesidad de evitar el almacenamiento en caché para ciertas páginas para garantizar datos dinámicos. El orador introduce la función 'no store' proporcionada por Next.js para manejar el almacenamiento en caché de forma explícita.

El orador demuestra la implementación de la función 'no store' en varias partes de la aplicación donde se obtienen datos. Muestran cómo usar 'no store' en funciones asíncronas como 'obtener datos' para evitar el almacenamiento en caché y mantener la frescura de los datos. La función 'no store' se agrega a diferentes páginas para garantizar contenido dinámico.

El orador discute la configuración del diseño raíz para la obtención de datos, enfatizando la importancia de obtener datos dentro del diseño raíz. Mencionan agregar una función asíncrona llamada 'obtener datos' e importar 'no store' para fines de almacenamiento en caché.

Para evitar errores al usar Next.js y Prisma, el ponente sugiere agregar un script post-install para ejecutar automáticamente el comando 'Prisma generate' durante el despliegue. Este paso es crucial para evitar errores relacionados con la generación de construcción en caché.

El orador demuestra el proceso de implementar código en GitHub creando un nuevo repositorio y subiendo el código. Luego importa el repositorio a Vercel, asegurándose de que se añadan las variables de entorno antes de implementar con éxito sin errores.

El orador guía sobre cómo configurar las URL de devolución de llamada para la autenticación, centrándose específicamente en la configuración de las URL de devolución de llamada y las URL permitidas de redirección de cierre de sesión en el panel de control de Kind. Hacen hincapié en la importancia de actualizar estas URL para que coincidan con la URL de la aplicación para un funcionamiento adecuado.

El orador discute la actualización de variables de entorno para Kind. Mencionan cambiar la URL del sitio de Kind copiándola de la fuente correcta y asegurándose de que termine con 'app'. También hablan sobre actualizar la URL de redirección de bloqueo posterior de Kind de manera similar, enfatizando la importancia de no agregar una barra al final. Luego, el orador procede a actualizar la URL de bloqueo posterior y redirección de Kind pegando la URL real para el panel de control.

El orador explica el proceso de agregar el secreto del webhook de Stripe. Navegan a la plataforma de Stripe, acceden a desarrolladores y agregan una URL de punto final para webhooks. El orador selecciona cuidadosamente los eventos a los que escuchar, como 'sesión de pago completada' y 'pago de factura exitoso'. Hacen hincapié en la importancia de deletrear correctamente la URL del punto final para garantizar que el webhook funcione correctamente.

Después de agregar el secreto del webhook de Stripe, el orador procede a volver a implementar la aplicación. Hacen clic en la pestaña de implementaciones e inician una nueva implementación para incorporar las nuevas variables de entorno. El orador espera pacientemente a que el proceso de implementación se complete con éxito.

El orador prueba el entorno de producción iniciando sesión y navegando al sitio web de Kind. Demuestran la creación de una nueva nota, cambiar la configuración como el esquema de color y ver los detalles de pago. Sin embargo, surge un problema donde la redirección ocurre a 'Local Host 3,000' en lugar de la ubicación deseada. El orador reconoce el problema y planea abordarlo.

Cuando intenta crear una nueva nota sin una suscripción, el usuario es redirigido a la página de facturación.

Después de hacer clic en 'crear suscripción', el usuario es redirigido al checkout de Stripe para agregar los datos de la tarjeta y completar el proceso de suscripción.

Después de suscribirse, se desencadena el evento del gancho web, actualizando la base de datos con un nuevo estado activo para la cuenta del usuario.

Para resolver un problema de URL, se agrega una URL de producción a la variable de entorno, asegurando una redirección adecuada basada en el entorno.

Los cambios de código se confirman y se envían a GitHub para actualizar el entorno de producción, lo que desencadena una reconstrucción automática de la aplicación en Vercel.

Después de implementar, probar los cambios muestra una redirección exitosa a las URL correctas y el correcto funcionamiento de la aplicación.

El presentador concluye la sesión, agradeciendo a los espectadores por ver, al patrocinador por el apoyo, y da pistas sobre futuros videos.