Cree una aplicación de transmisión de películas Web3 con NextJs, Tailwind y Sia Renterd

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 Odysee 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, Sia está transformando el almacenamiento de datos, brindando un enfoque centrado en el usuario y centrado en la privacidad.

Únase a nosotros en un viaje para crear una aplicación descentralizada de transmisión de películas Web3 de vanguardia 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.

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

Mire el video de demostración a continuación para ver el proyecto en acción y suscríbase a nuestro canal para obtener más contenido innovador como este.

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á:

• Parte 1: Configuración del proyecto : red de pruebas Renterd Zen, instalaciones de paquetes y variables de entorno.
• Parte 2: Desarrollo de backend : creación del servicio de backend
• Parte 3: Desarrollo de frontend : integración del frontend con el servicio backend.

Si prefieres ver todo el proceso de desarrollo, te recomiendo ver esta lista de reproducción , en la lista de reproducción, todo lo que aquí está escrito y más están capturados en los videos.

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 .env en la raíz de este proyecto y aplique las claves siguientes:

 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.

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 descargándolo del sitio web oficial si aún no lo has hecho. Otra opción es utilizar una plataforma en línea gratuita como Gitpod o un VPS para ejecutar una instancia de Docker, si es posible. De lo contrario, instálalo en tu computadora local.

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: $ docker compose -f "docker-compose.yml" down . Ejecútelo cuando desee apagar su instancia de Docker (pero no ahora).

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.

El video anterior comienza en la marca de 6:41 minutos, deténgase en la marca 20:01 , esta parte lo guiará visualmente a través del proceso de configuración de Renterd.

Tenga en cuenta que el proceso de sincronización de blockchain, junto con la coincidencia del host, demora hasta 25 min en estar listo, por lo que tendrá que ser paciente con todo el proceso.

Cree un nuevo depósito en Renterd llamado vidtv , 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.

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.

Configuración del proyecto de back-end Realice las siguientes instrucciones para tener los paquetes de servicio de back-end instalados y listos para un mayor desarrollo.

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 $ yarn build && yarn start para poner en marcha el backend y también para confirmar que esté libre de errores.

Configuración del proyecto frontend Por último, ejecute los siguientes comandos para instalar los paquetes asociados con el frontend. Luego, lo ejecutaremos.

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 Walletconnect para obtener tu ID de proyecto. Después de haber proporcionado la ID de proyecto a la variable de entorno, ejecuta $ yarn build && yarn start para poner en marcha el backend y también para confirmar que no tiene errores.

En este punto, verá la interfaz a continuación cuando visite el navegador en http://localhost:3000 .

Próximo paso ¡ Felicitaciones por alcanzar este hito! Continúe con la Parte 2 para completar el desarrollo del servicio backend.

El servicio backend – Parte 2

¡Bienvenido de nuevo! 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.

Hemos proporcionado un código de inicio para el backend, que actualmente muestra un mensaje de "Bienvenida" cuando inicia el servidor y visita http://localhost:9000 en su navegador. Construyamos sobre esta base.

Actualmente tenemos estos códigos en el directorio de origen del backend. Permítanme explicárselos brevemente.

Archivos de utilidad Esta carpeta, a la que se puede dirigir completamente a backend/src/utils contiene dos archivos esenciales: una función de controlador de excepciones HTTP y una interfaz para manejar la información de carga de archivos.

Este código define una clase HttpException personalizada que extiende la clase Error de JavaScript incorporada, lo que permite la creación de instancias de error con códigos de estado y mensajes HTTP específicos.

https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621

Este código define una interfaz FileUpload 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.

https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e

Y luego, en la carpeta raíz backend/src , tenemos este archivo index.ts 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.

https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f

Ahora que hemos cubierto los archivos clave, creemos dos archivos nuevos en una carpeta services , cada uno con un propósito distinto en nuestra aplicación.

Archivos de servicio

En la carpeta backend/src , crea una nueva carpeta llamada services en esta ubicación, aquí es donde crearemos dos servicios:

1. Servicio Sia : maneja la carga, descarga, transmisión y almacenamiento en caché de archivos, comunicándose con el servicio Renterd.
2. Servicio en segundo plano : administra los archivos almacenados en caché y los elimina automáticamente después de 7 días a la medianoche todos los días.

El servicio Sia

Creemos un archivo llamado sia.service.ts en la carpeta backend/src/services y sigamos los pasos a continuación para formular este servicio.

Este código define una clase SiaService 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.

Subir archivos a Sia Renterd 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.

Este código define un método privado generateRandomString 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.

El código anterior define un método privado uploadToSiaService 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.

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.

Ahora incluyamos el método público que luego expondremos como un punto final en nuestra aplicación.

Este código define un método público uploadFile 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.

Descargar archivos a Sia Renterd 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.

Este código define un método privado downloadFromSiaService 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.

Tengamos esos response_files disponibles en el directorio del backend, de lo contrario experimentaremos un error al llamar al archivo 404.png . En el directorio backend cree otra carpeta llamada response_files y copie las siguientes imágenes en ella.

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 .

Este código define un método público downloadFile que llama al método privado downloadFromSiaService para recuperar un archivo de Sia Renterd y devuelve la secuencia legible del archivo recuperado.

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 backend/src/index.ts y actualiza su contenido con estos códigos.

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 .

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 backend/src/services y crea un archivo llamado background.service.ts y agrégale estas secuencias de código.

Este código define una clase BackgroundService que configura un directorio de caché y programa trabajos diarios utilizando la biblioteca node-cron , 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é.

Eliminar archivo antiguo Agregue este método a la clase BackgroundService .

Este código define un método llamado deleteOldFiles 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.

Ahora, escribamos una función que utilizará el paquete node-cron para programar cuándo ejecutar la eliminación del archivo.

Este código configura un trabajo cron diario para ejecutar el método deleteOldFiles todos los días a medianoche (00:00) para realizar una limpieza automática de archivos.

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.

Perfecto, por último, agreguemos esta operación en segundo plano como parte del proceso del servidor en la inicialización. Diríjase al archivo backend/src/index.ts y actualice el método de escucha de la aplicación para importar el archivo de servicio en segundo plano.

Debes volver a ejecutar el comando de servicio de backend usando $ yarn build && yarn start y ver una impresión de terminal como la que se muestra en la imagen a continuación.

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 .

Próximo paso Felicitaciones, ahora estás listo para la parte final de este tutorial, que es 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 /frontend/config/index.tsx . Ahora, agreguemos los siguientes códigos.

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 config . También necesitamos crear una API de contexto para realizar un seguimiento del estado de autenticación.

La API de contexto 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 /frontend/context/index.tsx . Agregue los siguientes códigos.

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.

Actualización del diseño : Actualicemos el diseño de nuestra aplicación para incluir las configuraciones anteriores. Diríjase a /frontend/app/layout.tsx y reemplace sus códigos con los que se muestran a continuación.

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.

El botón de inicio de sesión Ahora, debemos habilitar los botones de inicio de sesión en los componentes /frontend/app/components/layout/Header.tsx y /frontend/app/components/shared/Menu.tsx , y actualizar sus códigos usando la siguiente información.

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 .

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.

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.

Script de configuración de la base de datos 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.

Cree la ruta del archivo /frontend/app/api/database.ts y agréguele los códigos a continuación.

Este código configura una conexión a una base de datos SQLite, define dos funciones API, apiGet y apiPost , 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.

Script de migración de base de datos Necesitamos crear un archivo plano de base de datos y una tabla para almacenar todo nuestro contenido. Cree la ruta del archivo /frontend/app/api/migrations.ts y agréguele los códigos que se indican a continuación.

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 movies.db en la raíz del directorio de la interfaz. También hemos agregado este comando al script package.json, por lo que ejecutar $ yarn migrate en el directorio de la interfaz debería funcionar de la misma manera.

Para obtener ayuda visual, mire el video a continuación, simplemente deténgalo en la marca 03:10:54 .

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.

Crear punto final de película 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 /frontend/app/api/movies/create/route.ts y agréguele los códigos que se indican a continuación.

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.

Actualizar punto final de la película 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 /frontend/app/api/movies/update/route.ts y agréguele los códigos que se indican a continuación.

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.

Eliminar punto final de la película 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 /frontend/app/api/movies/delete/route.ts y agregue los códigos que se indican a continuación.

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.

Punto final de todas las películas 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 /frontend/app/api/movies/all/route.ts y agréguele los códigos que se indican a continuación.

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.

Punto final de una sola película Para recuperar una sola película, los datos necesarios son el slug de una película. Cree la ruta del archivo /frontend/app/api/movies/[slug]/route.ts y agréguele los códigos que se indican a continuación.

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 .

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 /frontend/app/services/api.service.ts y agréguele los códigos a continuación.

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 /frontend/app/pages/create/page.tsx con los códigos a continuación.

Los cambios realizados en este código respecto al original son:

1. Importé la función createMovie de api.service y la usé en la función handleSubmit para crear una nueva película.
2. Se agregó el parámetro userId a la llamada a la función createMovie , pasando la dirección del usuario desde el gancho useAccount .
3. Se actualizó la función handleSubmit para usar toast.promise para manejar la promesa devuelta por createMovie .
4. Se agregó manejo de errores a la llamada a la función createMovie en la función 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 /frontend/app/pages/movies/edit/[slug]/page.tsx con los códigos a continuación.

Las mejoras realizadas al código que lo diferencia del original son:

1. Importé las funciones fetchMovie y updateMovie de @/app/services/api.service y las usé en el gancho useEffect y en la función handleSubmit , respectivamente.
2. Se reemplazó el método posters.find() con la función fetchMovie para recuperar datos de la película.
3. Se actualizó la función handleSubmit para llamar a la función updateMovie con los detalles actualizados de la película.
4. Se agregó manejo de errores a la llamada a la función updateMovie en la función 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 posters locales.

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 /frontend/app/pages/page.tsx con los siguientes códigos.

Los cambios que hicimos en la página de inicio son:

1. Importé la función fetchMovies de ./services/api.service y la usé en el gancho useEffect para recuperar datos de películas de nuestra API.
2. Reemplazamos los datos posters locales con la llamada a la función fetchMovies , que obtiene datos de nuestra API.
3. Se agregó la palabra clave await para esperar a que se resuelva la promesa devuelta por fetchMovies antes de establecer el estado 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 /frontend/app/pages/account/page.tsx con los siguientes códigos.

Los cambios realizados en la página son:

1. Importé la función fetchMovies de @/app/services/api.service y la usé en el gancho useEffect para recuperar datos de películas de nuestra API.
2. Reemplazamos los datos posters locales con la llamada a la función fetchMovies , que obtiene datos de nuestra API.
3. Se pasa address como argumento a la función fetchMovies para recuperar datos de películas específicos del usuario.
4. Se eliminó la verificación condicional de address antes de renderizar la lista de películas, ya que la función fetchMovies ahora maneja esta lógica.
5. 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 /frontend/app/pages/movies/[slug]/page.tsx con los siguientes códigos.

¡Hemos realizado grandes cambios aquí! A continuación, se incluye un resumen de lo que hicimos:

1. Importé las funciones deleteMovie , fetchMovie y fetchMovies de @/app/services/api.service y las usé para interactuar con nuestros puntos finales de API.
2. Se reemplazaron los datos locales con llamadas API para recuperar datos de películas.
3. Se implementó la funcionalidad de eliminación de películas mediante la función deleteMovie .
4. Se utilizó toast.promise para mostrar una notificación al eliminar una película.
5. Se eliminaron los datos locales de los posters y los reemplazaron con llamadas API.
6. Se actualizó la función handleSubmit para llamar a la función deleteMovie y manejar la respuesta.
7. Se actualizó el gancho useEffect para llamar a las funciones fetchMovie y 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 .

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 /frontend/app/components/shared/uploader.tsx con los siguientes códigos.

Los cambios realizados a este componente son:

1. Funcionalidad de carga de archivos : 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 uploadFile de api.service que maneja la carga del archivo.
2. Seguimiento del progreso : el código actualizado rastrea el progreso de carga y lo muestra en la interfaz de usuario.
3. Manejo de errores : el código actualizado incluye manejo de errores para el proceso de carga de archivos.
4. Validación de tipo de archivo : el código actualizado utiliza una validación de tipo de archivo más sólida utilizando una expresión regular.
5. Organización del código : 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.
6. Actualizaciones de la interfaz de usuario : 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.

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.

Y eso es todo, chicos, hemos completado este proyecto y el último paso que debemos dar es iniciar este proyecto en el navegador. Ejecuten $ yarn build && yarn start para ver el proyecto en vivo en el navegador.

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 Dapp Mentors , 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 canal de YouTube llamado Dapp Mentors donde comparto tutoriales y consejos sobre desarrollo web3 y publico regularmente artículos en línea sobre las últimas tendencias en el espacio blockchain.