Introducción La web está evolucionando y las tecnologías Web3 están revolucionando las industrias tradicionales, incluida la transmisión de video. Plataformas como están liderando el camino, ofreciendo alternativas descentralizadas a YouTube y Rumble. De manera similar, a diferencia de los proveedores tradicionales como Google Drive y Dropbox, está transformando el almacenamiento de datos, brindando un enfoque centrado en el usuario y centrado en la privacidad. Odysee Sia utilizando NextJs, TypeScript, Tailwind CSS y Sia Renterd. Esta serie de tutoriales lo guiará en la creación de una aplicación descentralizada que aprovecha la tecnología blockchain de Sia para garantizar la propiedad y la privacidad de los datos del usuario. Únase a nosotros en un viaje para crear una aplicación descentralizada de transmisión de películas Web3 de vanguardia Al finalizar este tutorial, adquirirá la experiencia para: Cree una plataforma de transmisión de películas completamente funcional para compartir con amigos o usar como proyecto escolar. Lanza tu propia aplicación SaaS (Software como Servicio) Descubra el potencial de las tecnologías Web3 en la industria de la transmisión de vídeo para ver el proyecto en acción y para obtener más contenido innovador como este. Mire el video de demostración a continuación suscríbase a nuestro canal https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true Prerrequisitos Para continuar, asegúrese de tener instaladas las siguientes herramientas; la familiaridad con las pilas también mejorará su comprensión: Node.js SiguienteJs CSS de viento de cola Mecanografiado Docker (requerido) Esta serie de tres partes cubrirá: : red de pruebas Renterd Zen, instalaciones de paquetes y variables de entorno. Parte 1: Configuración del proyecto : creación del servicio de backend Parte 2: Desarrollo de backend : integración del frontend con el servicio backend. Parte 3: Desarrollo de frontend Si prefieres ver todo el proceso de desarrollo, , en la lista de reproducción, todo lo que aquí está escrito y más están capturados en los videos. te recomiendo ver esta lista de reproducción Dicho esto, comencemos a configurar este proyecto. Configuración del proyecto – Parte 1 Comenzaremos clonando un repositorio preparado que incluye el script de composición de Docker de Sia Renterd y los servicios de frontend y backend. Ejecute los siguientes comandos: $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv Ahora, es crucial que cambiemos a nuestra rama de inicio en este proyecto de GitHub recién clonado y ejecutemos el siguiente comando para completarlo. $ git checkout 01_starter_branch A continuación, configuremos la variable de entorno asociada para este servicio de Renterd. Cree un archivo en la raíz de este proyecto y aplique las claves siguientes: .env RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error Para obtener estas claves API, necesitará tener Sia Renterd instalado en su máquina; mire el breve video a continuación, que prácticamente lo resume todo. https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true Genere una frase inicial con la aplicación Renterd como se ve en el video anterior e inclúyala dentro de su variable de entorno como se indica en el video anterior. Reemplace la contraseña con algo que pueda recordar fácilmente. A continuación, debemos instalar Docker si aún no lo has hecho. Otra opción es utilizar una plataforma en línea gratuita como o un VPS para ejecutar una instancia de Docker, si es posible. De lo contrario, instálalo en tu computadora local. descargándolo del sitio web oficial Gitpod Por último, podemos crear un contenedor Docker ejecutando el siguiente comando Docker en la raíz de este proyecto. Asegúrese de que la terminal se encuentre en la misma ubicación del directorio que este archivo . docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build Tenga en cuenta el comando para descargar el contenedor: . Ejecútelo cuando desee apagar su instancia de Docker (pero no ahora). $ docker compose -f "docker-compose.yml" down Si realizó las instrucciones anteriores correctamente, debería ver la interfaz a continuación cuando visite su navegador en . http://localhost:9880 Ingrese su contraseña (de su variable de entorno) para iniciar sesión. Luego, siga el procedimiento de configuración que se muestra en el video a continuación para configurar su instancia de Sia Renterd para cargas, descargas y transmisión de archivos. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true El video anterior comienza en la marca de minutos, deténgase en la marca , esta parte lo guiará visualmente a través del proceso de configuración de Renterd. 6:41 20:01 Tenga en cuenta que el proceso de sincronización de blockchain, junto con la coincidencia del host, demora hasta en estar listo, por lo que tendrá que ser paciente con todo el proceso. 25 min Cree un nuevo depósito en Renterd llamado , donde se almacenarán todos los archivos de este proyecto. Si ha ejecutado las instrucciones anteriores correctamente, su nodo Renterd debería estar listo para cargar y descargar. Vea la imagen a continuación. vidtv Increíble. En este punto, nuestro servicio Renterd está listo para comenzar a recibir archivos, pero necesitamos comunicarnos con él mediante programación. Terminemos esta primera parte de este tutorial configurando los paquetes y las variables de entorno para el backend y el frontend. Realice las siguientes instrucciones para tener los paquetes de servicio de back-end instalados y listos para un mayor desarrollo. Configuración del proyecto de back-end Navegue al directorio backend desde una nueva instancia de terminal usando los siguientes comandos: $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory A continuación, proporcione la siguiente información en las variables de entorno. SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000 Y ahora, ejecute para poner en marcha el backend y también para confirmar que esté libre de errores. $ yarn build && yarn start Por último, ejecute los siguientes comandos para instalar los paquetes asociados con el frontend. Luego, lo ejecutaremos. Configuración del proyecto frontend Navegue al directorio backend desde una nueva instancia de terminal usando los siguientes comandos: $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory A continuación, proporcione la siguiente información en las variables de entorno. NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000 Regístrate y crea un proyecto con para obtener tu ID de proyecto. Después de haber proporcionado la ID de proyecto a la variable de entorno, ejecuta para poner en marcha el backend y también para confirmar que no tiene errores. Walletconnect $ yarn build && yarn start En este punto, verá la interfaz a continuación cuando visite el navegador en . http://localhost:3000 Felicitaciones por alcanzar este hito! para completar el desarrollo del servicio backend. Próximo paso ¡ Continúe con la Parte 2 El servicio backend – Parte 2 Lee la Parte 1 si aún no lo has hecho. Ahora, profundicemos en la Parte 2: creación del servicio backend para nuestra plataforma de transmisión de películas web3. ¡Bienvenido de nuevo! Hemos proporcionado un código de inicio para el backend, que actualmente muestra un mensaje de "Bienvenida" cuando inicia el servidor y visita en su navegador. Construyamos sobre esta base. http://localhost:9000 Actualmente tenemos estos códigos en el directorio de origen del backend. Permítanme explicárselos brevemente. Esta carpeta, a la que se puede dirigir completamente a contiene dos archivos esenciales: una función de controlador de excepciones HTTP y una interfaz para manejar la información de carga de archivos. Archivos de utilidad backend/src/utils Este código define una clase personalizada que extiende la clase de JavaScript incorporada, lo que permite la creación de instancias de error con códigos de estado y mensajes HTTP específicos. HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 Este código define una interfaz que representa un archivo cargado, especificando sus propiedades como nombre, datos, tamaño, codificación y más, proporcionando una forma estructurada de manejar las cargas de archivos en esta aplicación backend. FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e Y luego, en la carpeta raíz , tenemos este archivo que configura un servidor Express.js con CORS y soporte para carga de archivos, define una única ruta GET que devuelve un mensaje de "Bienvenida" y maneja los errores al capturarlos y volver a lanzarlos como HttpExceptions personalizadas, luego inicia el servidor en el puerto 9000 como se especifica en las variables de entorno. backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f Ahora que hemos cubierto los archivos clave, creemos dos archivos nuevos en una carpeta , cada uno con un propósito distinto en nuestra aplicación. services Archivos de servicio En la carpeta , crea una nueva carpeta llamada en esta ubicación, aquí es donde crearemos dos servicios: backend/src services : maneja la carga, descarga, transmisión y almacenamiento en caché de archivos, comunicándose con el servicio Renterd. Servicio Sia : administra los archivos almacenados en caché y los elimina automáticamente después de 7 días a la medianoche todos los días. Servicio en segundo plano El servicio Sia Creemos un archivo llamado en la carpeta y sigamos los pasos a continuación para formular este servicio. sia.service.ts backend/src/services https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true Este código define una clase que se inicializa con variables de entorno para la configuración de la API de Sia y una URL de origen, lo que proporciona una base para administrar las interacciones con el servicio Sia. Ahora, proporcionemos el resto de los códigos para este servicio. SiaService Para subir archivos a la red Sia, necesitaremos agregar estos tres métodos a la clase, dos serán privados mientras que uno será público. Subir archivos a Sia Renterd https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true Este código define un método privado que genera una cadena aleatoria de una longitud específica, compuesta por letras mayúsculas y minúsculas y números, utilizando un bucle para seleccionar caracteres al azar de una cadena predefinida. Lo utilizaremos para cambiar el nombre de cada archivo de forma única antes de enviar un archivo a Renterd. generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true El código anterior define un método privado que carga un archivo a Sia Renterd usando Axios, manejando el progreso de la carga y los errores, y devolviendo la respuesta de Axios o arrojando un error si la carga falla. uploadToSiaService Los puntos finales de Renterd están escritos en la documentación de la API que puedes consultar o ver el video a continuación donde expliqué cómo funciona la documentación de la API de Sia Renterd. https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true Ahora incluyamos el método público que luego expondremos como un punto final en nuestra aplicación. https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true Este código define un método público que carga un archivo generando un identificador único, guardando el archivo en un caché local y luego cargándolo en Sia Renterd, devolviendo la URL del archivo y un mensaje de éxito o arrojando un error si la carga falla. uploadFile Para descargar archivos a la red Sia, necesitaremos agregar estos dos métodos a la clase, uno será privado y el otro será público. Descargar archivos a Sia Renterd https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true Este código define un método privado que recupera un archivo del servicio Sia, lo almacena en caché localmente y devuelve una secuencia legible del archivo, manejando errores y devolviendo una imagen 404 si no se encuentra el archivo. downloadFromSiaService Tengamos esos response_files disponibles en el directorio del backend, de lo contrario experimentaremos un error al llamar al archivo . En el directorio cree otra carpeta llamada y copie las siguientes imágenes en ella. 404.png backend response_files Perfecto, ahora vamos a completar este servicio de descarga de archivos. También agregue el método que se muestra a continuación en la clase . SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true Este código define un método público que llama al método privado para recuperar un archivo de Sia Renterd y devuelve la secuencia legible del archivo recuperado. downloadFile downloadFromSiaService Puntos finales del servicio Es hora de que acoplemos estos distintos métodos a sus respectivos puntos finales. Actualmente, solo tenemos uno, pero necesitaremos dos más para cargar y descargar archivos. La transmisión de archivos también utilizará el punto final de descarga. Dirígete al archivo y actualiza su contenido con estos códigos. backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true Este código configura un servidor Express.js con CORS y soporte para carga de archivos, definiendo tres puntos finales: un mensaje de bienvenida, carga de archivos a la red Sia y descarga de archivos desde la red Sia, utilizando la clase SiaService para manejar operaciones de archivos y HttpException para el manejo de errores. Mire esta sección del video a continuación si necesita ayuda visual, asegúrese de detenerse en la marca de tiempo . 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true Necesitamos crear un servicio de administración de caché para garantizar que nuestro servidor no se llene con archivos no utilizados al controlar el tiempo que los archivos permanecen en la caché. Es importante saber que la única razón por la que necesitábamos este servicio era para reducir . la latencia de los datos El servicio de fondo Dirígete a la carpeta y crea un archivo llamado y agrégale estas secuencias de código. backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true Este código define una clase que configura un directorio de caché y programa trabajos diarios utilizando la biblioteca , inicializando los trabajos en segundo plano y registrando un mensaje de confirmación. Vamos a crear un método que será responsable de eliminar archivos con más de 7 días de antigüedad en la caché. BackgroundService node-cron Agregue este método a la clase . Eliminar archivo antiguo BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true Este código define un método llamado que elimina archivos de un directorio de caché que tienen más de 7 días, leyendo el directorio, verificando el tiempo de creación de cada archivo, eliminando archivos que exceden el tiempo objetivo, registrando el inicio y el final del trabajo y cualquier error o eliminación exitosa. deleteOldFiles Ahora, escribamos una función que utilizará el paquete node-cron para programar cuándo ejecutar la eliminación del archivo. https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true Este código configura un trabajo cron diario para ejecutar el método todos los días a medianoche (00:00) para realizar una limpieza automática de archivos. deleteOldFiles También necesitamos actualizar la función constructora para programar los trabajos diarios en la instanciación de la clase de servicio en segundo plano. https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true Perfecto, por último, agreguemos esta operación en segundo plano como parte del proceso del servidor en la inicialización. Diríjase al archivo y actualice el método de escucha de la aplicación para importar el archivo de servicio en segundo plano. backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true Debes volver a ejecutar el comando de servicio de backend usando y ver una impresión de terminal como la que se muestra en la imagen a continuación. $ yarn build && yarn start Si prefieres ver cómo codifiqué todo el servicio en segundo plano, el video a continuación es para ti; solo asegúrate de detenerte en la marca de tiempo . 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true Felicitaciones, ahora estás listo para la parte final de este tutorial, que es . Próximo paso la Parte 3 Pasemos a la parte final de esta serie de tutoriales, en la que integraremos el backend con el frontend y conectaremos las piezas para completar la aplicación de carga de archivos. Comenzaremos por asegurarnos de que las autenticaciones en el frontend estén en funcionamiento. Autenticación modal Web3 – Parte 3 Cree una nueva carpeta llamada 'config' en el directorio Frontend y agregue un archivo de índice, lo que dará como resultado la ruta . Ahora, agreguemos los siguientes códigos. /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true Este código establece una configuración de Wagmi para nuestra aplicación Web3, definiendo metadatos, cadenas compatibles y configuraciones de autenticación, incluidas las opciones de inicio de sesión de billetera y redes sociales, y las almacena en la exportación . También necesitamos crear una API de contexto para realizar un seguimiento del estado de autenticación. config A continuación, cree una nueva carpeta llamada 'context' en el directorio Frontend y agregue un archivo de índice, lo que dará como resultado la ruta . Agregue los siguientes códigos. La API de contexto /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true Este código configura un proveedor Web3Modal usando Wagmi y React Query, configurando el modal Web3 con el ID del proyecto y las variables del tema y envolviendo la aplicación en un WagmiProvider y QueryClientProvider. : Actualicemos el diseño de nuestra aplicación para incluir las configuraciones anteriores. Diríjase a y reemplace sus códigos con los que se muestran a continuación. Actualización del diseño /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true El código anterior configura el diseño raíz para una aplicación Next.js, incluidos metadatos, fuentes, estilos y proveedores para Web3 modales, notificaciones emergentes y componentes de diseño como encabezado y pie de página. Ahora, debemos habilitar los botones de inicio de sesión en los componentes y , y actualizar sus códigos usando la siguiente información. El botón de inicio de sesión /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true Este código define un componente React para una barra de navegación que incluye un logotipo, enlaces de navegación, un menú personalizado y un botón de inicio de sesión que lanza un modal Web3 con un diseño adaptable para diferentes tamaños de pantalla. Las siguientes imágenes deberían aparecer como prueba de que lo que hemos hecho funciona cuando hace clic en el botón de inicio de sesión y continúa con su proveedor preferido, X, Facebook, Google, Discord o Ethereum. Excelente, profundicemos y configuremos nuestra base de datos y el sistema basado en la API de NextJs. Si tiene alguna duda sobre el proceso, mire el video a continuación; solo asegúrese de detenerse en la marca . 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true Scripts de base de datos Primero, actualicemos el script de configuración de NextJs para abordar adecuadamente nuestras páginas y puntos finales y liberar nuestras imágenes remotas de advertencias y escrutinio. https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true Este código define un objeto de configuración Next.js que configura la reescritura de rutas de API y la optimización de imágenes, lo que permite imágenes remotas desde cualquier nombre de host HTTPS e imágenes locales desde el dominio del host local. Usaremos SQLite para esta aplicación, pero usted puede usar una solución más robusta, como los proveedores MYSQL o NOSQL. Para simplificar, trabajaremos con un archivo plano de SQLite. Script de configuración de la base de datos Cree la ruta del archivo y agréguele los códigos a continuación. /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true Este código configura una conexión a una base de datos SQLite, define dos funciones API, y , para realizar solicitudes GET y POST en la base de datos, con manejo de errores y ejecución asincrónica basada en promesas. Usaremos estos códigos siempre que queramos enviar o recuperar datos de la base de datos. apiGet apiPost Necesitamos crear un archivo plano de base de datos y una tabla para almacenar todo nuestro contenido. Cree la ruta del archivo y agréguele los códigos que se indican a continuación. Script de migración de base de datos /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true Este código define una función de migración de base de datos que crea una tabla 'movies' con columnas específicas si no existe, utilizando SQLite, y registra el resultado de la operación. Ahora ejecute el siguiente comando en una terminal que apunte al directorio . /frontend $ cd frontend $ npx esrun app/api/migrations.ts Cabe señalar que este proceso también creará un archivo plano de base de datos llamado en la raíz del directorio de la interfaz. También hemos agregado este comando al script package.json, por lo que ejecutar en el directorio de la interfaz debería funcionar de la misma manera. movies.db $ yarn migrate Para obtener ayuda visual, mire el video a continuación, simplemente deténgalo en la marca . 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true Puntos finales de la aplicación Ahora, definamos algunos puntos finales para crear, leer, actualizar y eliminar películas. Usaremos la API de NextJs para crear estos puntos finales. Para crear una película, la información requerida incluye el ID de usuario, el nombre de la película, la imagen, la URL del video, la fecha de lanzamiento, el género, la clasificación, el idioma, la duración y la descripción del fondo. Cree la ruta del archivo y agréguele los códigos que se indican a continuación. Crear punto final de película /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true Este código define un punto final para manejar solicitudes POST, validar y procesar datos de películas, generar un slug único e insertar los datos en una base de datos utilizando una función apiPost mientras maneja errores y devuelve respuestas JSON. Para actualizar una película, la información requerida incluye el ID de usuario, el slug y otra información proporcionada al crear una película. Cree la ruta del archivo y agréguele los códigos que se indican a continuación. Actualizar punto final de la película /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true Este código define un punto final para manejar solicitudes POST para actualizar una película, validar las propiedades requeridas y ejecutar una consulta SQL para actualizar los datos de la película en la base de datos utilizando la función apiPost. Para eliminar una película, la información requerida incluye el ID de usuario y el slug de la película. Cree la ruta del archivo y agregue los códigos que se indican a continuación. Eliminar punto final de la película /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true Este código define un punto final para manejar solicitudes POST para eliminar una película, validar las propiedades requeridas (userId y slug) y ejecutar una consulta SQL para eliminar la película de la base de datos utilizando la función apiPost. Los datos opcionales necesarios para obtener las películas son pageSize y userId, que se pueden pasar como parámetros de consulta para filtrar y paginar los resultados. Cree la ruta del archivo y agréguele los códigos que se indican a continuación. Punto final de todas las películas /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true El código anterior define un punto final para manejar solicitudes GET para recuperar películas, permitiendo el filtrado opcional por userId y la paginación por pageSize, y devuelve los resultados en formato JSON. Para recuperar una sola película, los datos necesarios son el slug de una película. Cree la ruta del archivo y agréguele los códigos que se indican a continuación. Punto final de una sola película /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true Este código define un punto final para manejar solicitudes GET para recuperar una película por su slug, validar el parámetro slug y ejecutar una consulta SQL para recuperar los datos de la película de la base de datos utilizando la función apiGet. Eso marca todos los puntos finales que necesitaremos para esta aplicación. Si necesita una ayuda visual para comprender mejor estos puntos finales, mire el video a continuación. Solo asegúrese de detenerse en la marca de tiempo . 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true Integración de puntos finales Nuestra tarea es revisar y actualizar los componentes y páginas precodificados, explicando el propósito y la funcionalidad de cada uno y documentando los cambios que realizamos en el código existente. Comenzaremos creando un servicio para interactuar con los puntos finales que creamos previamente en el directorio . api Cree la ruta del archivo y agréguele los códigos a continuación. /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true Este servicio proporciona un conjunto de funciones para interactuar con una base de datos de películas, lo que permite a la aplicación obtener películas, obtener una sola película por slug, crear una nueva película, actualizar una película existente, eliminar una película y cargar archivos mediante solicitudes de API y manejo de errores. Páginas de aplicación Revisemos y actualicemos las distintas páginas asociadas a nuestra aplicación. No necesitarías cambiar muchas cosas, solo las que están resaltadas aquí. Crear página de película Esta página es un formulario de publicación de películas que permite a los usuarios cargar archivos de video e imágenes, ingresar detalles de la película y enviar el formulario para publicar la película, con validación y manejo de errores, utilizando las bibliotecas React y Wagmi. Ahora, actualice el archivo que se encuentra en con los códigos a continuación. /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true Los cambios realizados en este código respecto al original son: Importé la función de y la usé en la función para crear una nueva película. createMovie api.service handleSubmit Se agregó el parámetro a la llamada a la función , pasando la dirección del usuario desde el gancho . userId createMovie useAccount Se actualizó la función para usar para manejar la promesa devuelta por . handleSubmit toast.promise createMovie Se agregó manejo de errores a la llamada a la función en la función . createMovie handleSubmit Estos cambios permiten que el formulario envíe datos de películas a la API y cree una nueva entrada de película al mismo tiempo que maneja errores y muestra un mensaje de éxito. Editar página de la película Esta página de edición de películas permite a los usuarios autorizados actualizar los detalles de las películas, cargar carteles y videos, y guardar cambios, con validación y manejo de errores, utilizando React, Wagmi y Next.js, diseñados específicamente para que los usuarios editen sus películas. Ahora, actualice el archivo que se encuentra en con los códigos a continuación. /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true Las mejoras realizadas al código que lo diferencia del original son: Importé las funciones y de y las usé en el gancho y en la función , respectivamente. fetchMovie updateMovie @/app/services/api.service useEffect handleSubmit Se reemplazó el método con la función para recuperar datos de la película. posters.find() fetchMovie Se actualizó la función para llamar a la función con los detalles actualizados de la película. handleSubmit updateMovie Se agregó manejo de errores a la llamada a la función en la función . updateMovie handleSubmit Estos cambios permiten que nuestra aplicación interactúe con nuestros puntos finales de API para recuperar y actualizar datos de películas, mientras que el código original dependía de nuestra matriz locales. posters Página de inicio Esta página de inicio muestra el componente de banners, una lista de películas (ya sea desde una fuente API o una UI de carga) y opciones de suscripción, utilizando React y Next.js, para proporcionar una página de destino atractiva e informativa para los usuarios. Actualice el archivo que se encuentra en con los siguientes códigos. /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true Los cambios que hicimos en la página de inicio son: Importé la función de y la usé en el gancho para recuperar datos de películas de nuestra API. fetchMovies ./services/api.service useEffect Reemplazamos los datos locales con la llamada a la función , que obtiene datos de nuestra API. posters fetchMovies Se agregó la palabra clave para esperar a que se resuelva la promesa devuelta por antes de establecer el estado . await fetchMovies movies Estos cambios ayudan a nuestra aplicación a recuperar datos de películas desde nuestra API en lugar de depender de datos locales, lo que hace que la aplicación sea más dinámica y basada en datos. Página de cuenta de usuario Esta página muestra una lista de películas publicadas por el usuario actualmente conectado, con un marcador de posición de esqueleto de carga mientras se obtienen los datos y un mensaje que solicita al usuario que conecte su cuenta si aún no lo ha hecho, utilizando Wagmi y react-loading-skeleton. Actualice el archivo que se encuentra en con los siguientes códigos. /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true Los cambios realizados en la página son: Importé la función de y la usé en el gancho para recuperar datos de películas de nuestra API. fetchMovies @/app/services/api.service useEffect Reemplazamos los datos locales con la llamada a la función , que obtiene datos de nuestra API. posters fetchMovies Se pasa como argumento a la función para recuperar datos de películas específicos del usuario. address fetchMovies Se eliminó la verificación condicional de antes de renderizar la lista de películas, ya que la función ahora maneja esta lógica. address fetchMovies Se simplificó la declaración condicional para mostrar el esqueleto de carga, ya que ahora solo depende del estado . loaded Estos cambios recuperan datos de películas de nuestra API, específicos del usuario conectado, y muestran un esqueleto de carga mientras se obtienen los datos. Página de detalles de películas Esta página muestra los detalles de una sola película, incluido su nombre, año de lanzamiento, clasificación, duración, género e información de fondo, junto con un reproductor de video y películas relacionadas, y brinda opciones para editar o eliminar la película si el usuario es el propietario, utilizando Next.js y Wagmi. Actualice el archivo que se encuentra en con los siguientes códigos. /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true ¡Hemos realizado grandes cambios aquí! A continuación, se incluye un resumen de lo que hicimos: Importé las funciones , y de y las usé para interactuar con nuestros puntos finales de API. deleteMovie fetchMovie fetchMovies @/app/services/api.service Se reemplazaron los datos locales con llamadas API para recuperar datos de películas. Se implementó la funcionalidad de eliminación de películas mediante la función . deleteMovie Se utilizó para mostrar una notificación al eliminar una película. toast.promise Se eliminaron los datos locales de los y los reemplazaron con llamadas API. posters Se actualizó la función para llamar a la función y manejar la respuesta. handleSubmit deleteMovie Se actualizó el gancho para llamar a las funciones y . useEffect fetchMovie fetchMovies Estos cambios hacen que nuestra aplicación interactúe con nuestra API para recuperar y eliminar datos de películas y mostrar notificaciones al usuario durante el proceso de eliminación. Esta parte del video que se encuentra a continuación le mostrará de forma práctica cómo integramos estas páginas con el punto final. No dude en mirar esa parte si tiene algún problema. Solo asegúrese de detenerse en la marca de tiempo . 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true Componentes de la aplicación Analicemos el propósito de cada componente de nuestra aplicación. Actualizaremos cualquier componente que necesite ser modificado. Componente de banner Este componente muestra una imagen de fondo rotatoria de banners de películas, que se desplaza por una serie de imágenes de películas cada 5 segundos, creando un efecto de presentación de diapositivas simple y automático. El código de este componente se puede consultar en . /frontend/app/components/home/Banner.tsx Componente de carteles Este componente muestra un carrusel interactivo y responsivo de carteles de películas utilizando la biblioteca Swiper, con funciones como reproducción automática, paginación y navegación, mostrando una lista de películas pasadas como un elemento adicional, con un diseño dinámico que se adapta a diferentes tamaños de pantalla. El código de este componente se puede consultar en . /frontend/app/components/home/Posters.tsx Componente de interfaz de usuario del póster Este componente muestra un diseño de esqueleto de marcador de posición para una sección de carteles de películas, utilizando la biblioteca react-loading-skeleton, mostrando una cantidad dinámica de carteles de esqueleto basados en la propiedad "posters", con un diseño responsivo que se adapta a diferentes tamaños de pantalla, indicando un estado de carga hasta que se obtengan y muestren los datos reales de los carteles. Este código de componente se puede consultar en . /frontend/app/components/home/PosterUI.tsx Componente de suscripciones Este componente muestra una sección de planes de suscripción, que muestra varios planes ficticios con sus detalles, precios y beneficios. Permite a los usuarios elegir un plan que se adapte a sus necesidades, utilizando un diseño de cuadrícula adaptable y efectos de desplazamiento interactivos para mejorar la experiencia del usuario. Este código de componente se puede consultar en . /frontend/app/components/home/Subscription.tsx Componente de encabezado Este componente muestra una barra de navegación fija en la parte superior de la página, que incluye un logotipo, un menú de navegación con enlaces a varias secciones, un botón de alternancia de menú para un diseño responsivo y un botón de inicio de sesión, lo que proporciona una sección de encabezado coherente y accesible en toda la aplicación. El código de este componente se puede consultar en . /frontend/app/components/layout/Header.tsx Componente de pie de página Este componente muestra una sección de pie de página en la parte inferior de la página, que incluye el logotipo de la aplicación, una breve descripción, enlaces de navegación, información de contacto y un crédito que menciona la solución de almacenamiento descentralizado impulsada por Sia Foundation, lo que proporciona una sección de pie de página clara y organizada con información y enlaces relevantes. El código de este componente se puede consultar en . /frontend/app/components/layout/Footer.tsx Componente de menú Este componente muestra un botón de alternancia de menú interactivo que, al hacer clic, abre o cierra un menú desplegable que contiene enlaces de navegación, lo que permite a los usuarios acceder a varias secciones de la aplicación en pantallas más pequeñas y ocultar el menú en pantallas más grandes donde los enlaces de navegación ya están visibles. El código de este componente se puede consultar en . /frontend/app/components/shared/Menu.tsx Componente de tarjeta de película Este componente muestra el póster de una sola película con un efecto de desplazamiento, que muestra información adicional como el nombre de la película, el año de estreno y un resumen de antecedentes, y también sirve como enlace a la página de detalles de la película, utilizando un diseño responsivo y transiciones animadas para mejorar la experiencia del usuario. Este código de componente se puede consultar en . /frontend/app/components/shared/MovieCard.tsx Componente cargado Este componente muestra una vista previa de un archivo cargado, ya sea una imagen o un video, con una barra de progreso y un botón de eliminación, lo que permite a los usuarios revisar y eliminar el archivo cargado, al mismo tiempo que proporciona una interfaz visualmente atractiva e interactiva con animaciones y efectos de desplazamiento. El código de este componente se puede consultar en . /frontend/app/components/shared/Uploaded.tsx Componente de carga Este componente proporciona una interfaz de usuario para cargar archivos, específicamente videos o carteles, con funciones como arrastrar y soltar, validación de tipo de archivo, límites de tamaño, seguimiento del progreso de carga y notificaciones de éxito/error, utilizando una combinación de gestión de estado de React, manejo de eventos e integración de API para manejar el proceso de carga. Actualice el archivo que se encuentra en con los siguientes códigos. /frontend/app/components/shared/uploader.tsx https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true Los cambios realizados a este componente son: : el código original no tenía implementada la funcionalidad de carga de archivos real. Solo mostraba una notificación de éxito sin cargar el archivo. Este código actualizado incluye la función de que maneja la carga del archivo. Funcionalidad de carga de archivos uploadFile api.service : el código actualizado rastrea el progreso de carga y lo muestra en la interfaz de usuario. Seguimiento del progreso : el código actualizado incluye manejo de errores para el proceso de carga de archivos. Manejo de errores : el código actualizado utiliza una validación de tipo de archivo más sólida utilizando una expresión regular. Validación de tipo de archivo : el código actualizado está mejor organizado, con funciones separadas para manejar diferentes tareas, lo que hace que sea más fácil de leer y mantener. Organización del código : el código actualizado incluye algunas actualizaciones de la interfaz de usuario, como mostrar el progreso de carga y un botón para cancelar durante la carga. Actualizaciones de la interfaz de usuario Este código actualizado es más completo y sólido, con funcionalidad real de carga de archivos, seguimiento del progreso, manejo de errores y una mejor organización del código. El video a continuación explica con más detalle lo que hace cada componente, por favor échale un vistazo para tu mejora. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true Y eso es todo, chicos, hemos completado este proyecto y el último paso que debemos dar es iniciar este proyecto en el navegador. Ejecuten para ver el proyecto en vivo en el navegador. $ yarn build && yarn start Si tiene algún problema, consulte los siguientes recursos para solucionarlo. ¡Hasta la próxima, todo lo mejor! 🏠 Sitio web de Sia 🔥Sia Renterd 👨💻 API de Sia Renterd 🚀 Canal de Discord de Sia 💡 Lista de reproducción de vídeos de YouTube Acerca del autor Soy desarrollador web3 y fundador de , una empresa que ayuda a empresas e individuos a crear y lanzar aplicaciones descentralizadas. Tengo más de 8 años de experiencia en la industria del software y me apasiona usar la tecnología blockchain para crear aplicaciones nuevas e innovadoras. Tengo un donde comparto tutoriales y consejos sobre desarrollo web3 y publico regularmente artículos en línea sobre las últimas tendencias en el espacio blockchain. Dapp Mentors canal de YouTube llamado Dapp Mentors
