Créez une dApp de streaming de films Web3 à l'aide de NextJs, Tailwind et Sia Renterd

Introduction

Le Web évolue et les technologies Web3 révolutionnent les secteurs traditionnels, notamment le streaming vidéo. Des plateformes comme Odysee mènent la danse en proposant des alternatives décentralisées à YouTube et Rumble. De même, contrairement aux fournisseurs traditionnels comme Google Drive et Dropbox, Sia transforme le stockage des données en proposant une approche axée sur la confidentialité et l'utilisateur.

Rejoignez-nous dans un voyage pour créer une application décentralisée de streaming de films Web3 de pointe à l'aide de NextJs, TypeScript, Tailwind CSS et Sia Renterd. Cette série de tutoriels vous guidera dans la création d'une application décentralisée qui exploite la technologie blockchain de Sia pour garantir la propriété et la confidentialité des données des utilisateurs.

À la fin de ce didacticiel, vous aurez acquis l’expertise nécessaire pour :

• Créez une plate-forme de streaming de films entièrement fonctionnelle à partager avec des amis ou à utiliser comme projet scolaire
• Lancez votre propre application SaaS (Software as a Service)
• Exploitez le potentiel des technologies Web3 dans le secteur du streaming vidéo

Regardez la vidéo de démonstration ci-dessous pour voir le projet en action et abonnez-vous à notre chaîne pour plus de contenu innovant comme celui-ci !

Prérequis

Pour suivre, assurez-vous d'avoir installé les outils suivants. Une connaissance des piles améliorera également votre compréhension :

• NodeJs
• SuivantJs
• CSS du vent arrière
• Manuscrit
• Docker (obligatoire)

Cette série en trois parties couvrira :

• Partie 1 : Configuration du projet - Renterd Zen testnet, installations de packages et variables d'environnement.
• Partie 2 : Développement du backend – Création du service backend
• Partie 3 : Développement du frontend - Intégration du frontend au service backend.

Si vous préférez regarder l'intégralité du processus de développement, je vous recommande de regarder cette playlist , dans la playlist, tout ce qui est écrit ici et plus encore est capturé dans les vidéos.

Cela étant dit, passons à la mise en place de ce projet.

Mise en place du projet – Partie 1

Nous allons commencer par cloner un référentiel préparé qui comprend le script docker compose de Sia Renterd et les services backend et frontend. Exécutez les commandes suivantes :

 $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv

Il est désormais essentiel que nous passions à notre branche de démarrage sur ce projet GitHub nouvellement cloné et que nous exécutions la commande ci-dessous pour terminer cela.

 $ git checkout 01_starter_branch

Ensuite, configurons la variable d'environnement associée à ce service Renterd. Créez un fichier .env à la racine de ce projet et appliquez les clés ci-dessous :

 RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error

Pour obtenir ces clés API, vous devrez avoir Sia Renterd installé sur votre machine ; veuillez regarder la courte vidéo ci-dessous, qui résume à peu près tout.

Générez une phrase de départ avec l'application Renterd comme indiqué dans la vidéo ci-dessus et incluez-la dans votre variable d'environnement comme indiqué dans la vidéo ci-dessus. Remplacez le mot de passe par quelque chose dont vous pouvez facilement vous souvenir.

Ensuite, nous devons installer Docker en le téléchargeant depuis le site officiel si vous ne l'avez pas déjà fait. Vous pouvez également utiliser une plateforme en ligne gratuite comme Gitpod ou un VPS pour exécuter une instance Docker, si possible. Sinon, installez-le sur votre ordinateur local.

Enfin, nous pouvons lancer un conteneur Docker en exécutant la commande Docker suivante à la racine de ce projet. Assurez-vous que le terminal se trouve au même emplacement de répertoire que ce fichier docker-compose.yml .

 $ docker compose -f "docker-compose.yml" up -d --build

Notez la commande permettant de retirer le conteneur : $ docker compose -f "docker-compose.yml" down . Exécutez cette commande lorsque vous souhaitez arrêter votre instance Docker (mais pas maintenant).

Si vous avez suivi correctement les instructions ci-dessus, vous devriez voir l'interface ci-dessous lorsque vous visitez votre navigateur à l'adresse http://localhost:9880 .

Saisissez votre mot de passe (à partir de votre variable d'environnement) pour vous connecter. Ensuite, suivez la procédure de configuration dans la vidéo ci-dessous pour configurer votre instance Sia Renterd pour les téléchargements, les téléchargements et le streaming de fichiers.

La vidéo ci-dessus commence à 6:41 minutes, veuillez vous arrêter à 20:01 , cette partie vous guidera visuellement tout au long du processus de configuration de Renterd.

Veuillez noter que le processus de synchronisation de la blockchain, ainsi que la correspondance de l'hôte, prennent jusqu'à 25 min pour être prêts, vous devrez donc être patient avec l'ensemble du processus.

Veuillez créer un nouveau bucket sur Renterd appelé vidtv , où tous nos fichiers pour ce projet seront stockés. Si vous avez exécuté les instructions ci-dessus avec succès, votre nœud Renterd devrait être prêt pour le téléchargement. Voir l'image ci-dessous.

Incroyable. À ce stade, notre service Renterd est prêt à commencer à recevoir des fichiers, mais nous devons communiquer avec lui par programmation.

Terminons cette première partie de ce tutoriel en configurant les packages et les variables d'environnement pour le backend et le frontend.

Configuration du projet backend Suivez les instructions suivantes pour que les packages de services backend soient installés et prêts pour un développement ultérieur.

Accédez au répertoire backend à partir d’une nouvelle instance de terminal à l’aide des commandes suivantes :

 $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

Ensuite, fournissez les informations suivantes dans les variables d’environnement.

 SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000

Et maintenant, exécutez $ yarn build && yarn start pour lancer le backend et également confirmer qu'il est exempt de tout bug.

Configuration du projet Frontend Enfin, exécutez les commandes suivantes pour installer les packages associés au frontend. Ensuite, nous l'exécuterons.

Accédez au répertoire backend à partir d’une nouvelle instance de terminal à l’aide des commandes suivantes :

 $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

Ensuite, fournissez les informations suivantes dans les variables d’environnement.

 NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000

Inscrivez-vous et créez un projet avec Walletconnect pour obtenir l'ID de votre projet. Après avoir fourni l'ID du projet à la variable d'environnement, exécutez $ yarn build && yarn start pour lancer le backend et également confirmer qu'il est exempt de tout bug.

À ce stade, vous verrez l'interface ci-dessous lorsque vous visiterez le navigateur à l'adresse http://localhost:3000 .

Étape suivante Félicitations pour avoir atteint cette étape ! Passez à la partie 2 pour terminer le développement du service backend.

Le service backend – Partie 2

Bienvenue ! Veuillez lire la partie 1 si vous ne l'avez pas déjà fait. Passons maintenant à la partie 2 : création du service backend pour notre plateforme de streaming de films sur le Web3.

Nous avons fourni un code de démarrage pour le backend, qui affiche actuellement un message de « Bienvenue » lorsque vous démarrez le serveur et visitez http://localhost:9000 dans votre navigateur. Construisons sur cette base.

Nous avons actuellement ces codes dans le répertoire source du backend. Laissez-moi vous les expliquer brièvement.

Fichiers utilitaires Ce dossier qui peut être entièrement adressé à backend/src/utils contient deux fichiers essentiels : une fonction de gestion des exceptions HTTP et une interface pour gérer les informations de téléchargement de fichiers.

Ce code définit une classe HttpException personnalisée qui étend la classe JavaScript Error intégrée, permettant la création d'instances d'erreur avec des codes d'état et des messages HTTP spécifiques.

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

Ce code définit une interface FileUpload qui représente un fichier téléchargé, spécifiant ses propriétés telles que le nom, les données, la taille, l'encodage, etc., offrant ainsi une manière structurée de gérer les téléchargements de fichiers dans cette application backend.

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

Et puis, dans le dossier racine backend/src , nous avons ce fichier index.ts qui configure un serveur Express.js avec prise en charge CORS et de téléchargement de fichiers, définit une seule route GET qui renvoie un message « Bienvenue » et gère les erreurs en les capturant et en les renvoyant sous forme d'exceptions HttpExceptions personnalisées, puis démarre le serveur sur le port 9000 comme spécifié dans les variables d'environnement.

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

Maintenant que nous avons couvert les fichiers clés, créons deux nouveaux fichiers dans un dossier services , chacun servant un objectif distinct dans notre application.

Fichiers de service

Dans le dossier backend/src , créez un nouveau dossier appelé services à cet emplacement, c'est ici que nous allons créer deux services :

1. Service Sia : gère les téléchargements, les téléchargements, la diffusion en continu et la mise en cache des fichiers, en communiquant avec le service Renterd.
2. Service d'arrière-plan : gère les fichiers mis en cache, en les supprimant automatiquement après 7 jours à minuit tous les jours.

Le service Sia

Créons un fichier nommé sia.service.ts dans le dossier backend/src/services et suivons les étapes ci-dessous pour formuler ce service.

Ce code définit une classe SiaService qui s'initialise avec des variables d'environnement pour les paramètres de l'API Sia et une URL d'origine, fournissant ainsi une base pour la gestion des interactions avec le service Sia. Fournissons maintenant le reste des codes pour ce service.

Téléchargement de fichiers sur Sia Renterd Pour télécharger des fichiers sur le réseau Sia, nous devrons ajouter ces trois méthodes dans la classe, deux seront privées tandis qu'une sera publique.

Ce code définit une méthode privée generateRandomString qui génère une chaîne aléatoire d'une longueur spécifiée, composée de lettres majuscules et minuscules et de chiffres, en utilisant une boucle pour sélectionner des caractères de manière aléatoire dans une chaîne prédéfinie. Nous l'utiliserons pour renommer chaque fichier de manière unique avant d'envoyer un fichier à Renterd.

Le code ci-dessus définit une méthode privée uploadToSiaService qui télécharge un fichier sur Sia Renterd à l'aide d'Axios, gère la progression du téléchargement et les erreurs, et renvoie la réponse Axios ou génère une erreur si le téléchargement échoue.

Les points de terminaison Renterd sont écrits dans la documentation de l'API que vous pouvez consulter ou regarder la vidéo ci-dessous où j'ai expliqué comment fonctionne la documentation de l'API Sia Renterd.

Incluons maintenant la méthode publique que nous exposerons plus tard comme point de terminaison dans notre application.

Ce code définit une méthode publique uploadFile qui télécharge un fichier en générant un identifiant unique, en enregistrant le fichier dans un cache local, puis en le téléchargeant sur Sia Renterd, en renvoyant l'URL du fichier et un message de réussite ou en générant une erreur si le téléchargement échoue.

Téléchargement de fichiers sur Sia Renterd Pour télécharger des fichiers sur le réseau Sia, nous devrons ajouter ces deux méthodes dans la classe, l'une sera privée et l'autre sera publique.

Ce code définit une méthode privée downloadFromSiaService qui récupère un fichier du service Sia, le met en cache localement et renvoie un flux lisible du fichier, gérant les erreurs et renvoyant une image 404 si le fichier n'est pas trouvé.

Laissez ces fichiers de réponse disponibles dans le répertoire backend, sinon nous rencontrerons une erreur lors de l'appel du fichier 404.png . Dans le répertoire backend , créez un autre dossier appelé response_files et copiez-y les images suivantes.

Parfait, maintenant terminons ce service de téléchargement de fichiers. Ajoutez également la méthode ci-dessous dans la classe SiaService .

Ce code définit une méthode publique downloadFile qui appelle la méthode privée downloadFromSiaService pour récupérer un fichier du Sia Renterd et renvoie le flux lisible du fichier récupéré.

Points de terminaison de service

Il est temps de coupler ces différentes méthodes à leurs points de terminaison respectifs. Actuellement, nous n'en avons qu'un, mais nous en aurons besoin de deux supplémentaires pour télécharger et charger des fichiers. Le streaming de fichiers utilisera également le point de terminaison de téléchargement.

Accédez au fichier backend/src/index.ts et mettez à jour son contenu avec ces codes.

Ce code configure un serveur Express.js avec prise en charge de CORS et de téléchargement de fichiers, définissant trois points de terminaison : un message de bienvenue, un téléchargement de fichiers sur le réseau Sia et un téléchargement de fichiers depuis le réseau Sia, en utilisant la classe SiaService pour gérer les opérations de fichiers et HttpException pour la gestion des erreurs.

Regardez cette section de la vidéo ci-dessous si vous avez besoin d'une aide visuelle, assurez-vous de vous arrêter à l'horodatage 01:50:44 .

Nous devons créer un service de gestion du cache pour garantir que notre serveur ne se remplit pas de fichiers inutilisés en contrôlant la durée pendant laquelle les fichiers restent dans le cache. Il est important de savoir que la seule raison pour laquelle nous avons besoin de ce service est de réduire la latence des données .

Le service d'arrière-plan

Accédez au dossier backend/src/services et créez un fichier appelé background.service.ts et ajoutez-y ces séquences de code.

Ce code définit une classe BackgroundService qui configure un répertoire de cache et planifie les tâches quotidiennes à l'aide de la bibliothèque node-cron , en initialisant les tâches en arrière-plan et en enregistrant un message de confirmation. Créons une méthode qui sera responsable de la suppression des fichiers de plus de 7 jours dans le cache.

Suppression de l'ancien fichier Ajoutez cette méthode à la classe BackgroundService .

Ce code définit une méthode appelée deleteOldFiles qui supprime les fichiers d'un répertoire de cache datant de plus de 7 jours, en lisant le répertoire, en vérifiant l'heure de création de chaque fichier, en supprimant les fichiers qui dépassent l'heure cible, en enregistrant le début et la fin du travail, ainsi que toutes les erreurs ou suppressions réussies.

Maintenant, écrivons une fonction qui utilisera le package node-cron pour planifier le moment d'exécution de la suppression du fichier.

Ce code configure une tâche cron quotidienne pour exécuter la méthode deleteOldFiles tous les jours à minuit (00h00) pour effectuer un nettoyage automatique des fichiers.

Nous devons également mettre à jour la fonction constructeur pour planifier les tâches quotidiennes lors de l'instanciation de la classe de service d'arrière-plan.

Parfait, enfin, ajoutons cette opération d'arrière-plan dans le cadre du processus serveur lors de l'initialisation. Accédez au fichier backend/src/index.ts et mettez à jour la méthode d'écoute de l'application pour importer le fichier de service d'arrière-plan.

Vous devez réexécuter la commande du service backend en utilisant $ yarn build && yarn start et voir une impression de terminal comme celle de l'image ci-dessous.

Si vous préférez regarder comment j'ai codé l'intégralité du service d'arrière-plan, la vidéo ci-dessous est pour vous ; assurez-vous simplement de vous arrêter à l'horodatage 02:16:07 .

Étape suivante Félicitations, vous êtes maintenant prêt pour la dernière partie de ce tutoriel qui est la partie 3 .

Passons maintenant à la dernière partie de cette série de tutoriels, où nous intégrerons le backend au frontend, en connectant les éléments pour compléter l'application de téléchargement de fichiers. Nous commencerons par nous assurer que les authentifications dans le frontend sont opérationnelles.

Authentification modale Web3 – Partie 3

Créez un nouveau dossier nommé « config » dans le répertoire Frontend et ajoutez un fichier d'index, ce qui donne le chemin /frontend/config/index.tsx . Maintenant, ajoutons-y les codes suivants.

Ce code définit une configuration Wagmi pour notre application Web3, en définissant les métadonnées, les chaînes prises en charge et les paramètres d'authentification, y compris les options de connexion au portefeuille et aux réseaux sociaux, et les stocke dans l'exportation config . Nous devons également créer une API de contexte pour suivre l'état d'authentification.

Ensuite, créez un nouveau dossier nommé « context » toujours dans le répertoire Frontend et ajoutez un fichier d'index, ce qui donne le chemin /frontend/context/index.tsx . Ajoutez - y les codes suivants.

Ce code configure un fournisseur Web3Modal à l'aide de Wagmi et React Query, en configurant le modal Web3 avec l'ID du projet et les variables de thème et en enveloppant l'application dans un WagmiProvider et QueryClientProvider.

Mise à jour de la mise en page : nous allons mettre à jour la mise en page de notre application pour inclure les configurations ci-dessus. Accédez à /frontend/app/layout.tsx et remplacez ses codes par celui ci-dessous.

Le code ci-dessus configure la disposition racine d'une application Next.js, y compris les métadonnées, les polices, les styles et les fournisseurs pour la modale Web3, les notifications toast et les composants de mise en page comme l'en-tête et le pied de page.

Le bouton de connexion Maintenant, nous devons activer les boutons de connexion dans les composants /frontend/app/components/layout/Header.tsx et /frontend/app/components/shared/Menu.tsx , et mettre à jour leurs codes en utilisant les informations ci-dessous.

Ce code définit un composant React pour une barre de navigation qui comprend un logo, des liens de navigation, un menu personnalisé et un bouton de connexion qui lance un modal Web3 avec une conception réactive pour différentes tailles d'écran.

Les images suivantes devraient apparaître comme preuve que ce que nous avons fait fonctionne lorsque vous cliquez sur le bouton de connexion et continuez avec votre fournisseur préféré, X, Facebook, Google, Discord ou Ethereum.

Superbe, allons plus loin et configurons notre base de données et notre système basé sur l'API NextJs. Pour toute confusion sur le processus, veuillez regarder la section vidéo ci-dessous ; assurez-vous simplement de vous arrêter à la marque 02:57:59 .

Scripts de base de données

Tout d’abord, mettons à jour le script de configuration NextJs pour adresser correctement nos pages et nos points de terminaison et libérer nos images distantes des avertissements et de l’examen.

Ce code définit un objet de configuration Next.js qui configure les réécritures d'itinéraire API et l'optimisation d'image, autorisant les images distantes à partir de n'importe quel nom d'hôte HTTPS et les images locales à partir du domaine localhost.

Script de configuration de base de données Nous utiliserons SQLite pour cette application, mais vous êtes libre d'utiliser une solution plus robuste telle que les fournisseurs MYSQL ou NOSQL. Pour des raisons de simplicité, travaillons avec un fichier plat SQLite.

Créez le chemin du fichier /frontend/app/api/database.ts et ajoutez-y les codes ci-dessous.

Ce code établit une connexion à une base de données SQLite, définit deux fonctions API, apiGet et apiPost , pour exécuter des requêtes GET et POST sur la base de données, avec gestion des erreurs et exécution asynchrone basée sur les promesses. Nous utiliserons ces codes chaque fois que nous souhaitons envoyer ou récupérer des données de la base de données.

Script de migration de base de données Nous devons créer à la fois un fichier plat de base de données et une table pour contenir tout notre contenu. Créez le chemin du fichier /frontend/app/api/migrations.ts et ajoutez-y les codes ci-dessous.

Ce code définit une fonction de migration de base de données qui crée une table « movies » avec des colonnes spécifiées si elle n'existe pas, en utilisant SQLite, et enregistre le résultat de l'opération. Exécutez maintenant la commande ci-dessous dans un terminal pointant vers le répertoire /frontend .

 $ cd frontend $ npx esrun app/api/migrations.ts

Il convient de noter que ce processus créera également un fichier plat de base de données appelé movies.db à la racine du répertoire du frontend. Nous avons également ajouté cette commande au script package.json, donc l'exécution $ yarn migrate sur le répertoire du frontend devrait fonctionner de la même manière.

Pour une assistance visuelle, regardez la vidéo ci-dessous, arrêtez-la simplement à 03:10:54 .

Points de terminaison d'application

Maintenant, définissons quelques points de terminaison pour la création, la lecture, la mise à jour et la suppression de films. Nous utiliserons la provision de l'API NextJs pour créer ces points de terminaison.

Créer un point de terminaison de film Pour créer un film, les informations requises incluent l'ID utilisateur, le nom du film, l'image, l'URL de la vidéo, la date de sortie, le genre, la note, la langue, la durée et la description de l'arrière-plan. Créez le chemin du fichier /frontend/app/api/movies/create/route.ts et ajoutez-y les codes ci-dessous.

Ce code définit un point de terminaison pour gérer les requêtes POST, valider et traiter les données du film, générer un slug unique et insérer les données dans une base de données à l'aide d'une fonction apiPost tout en gérant les erreurs et en renvoyant des réponses JSON.

Mettre à jour le point de terminaison du film Pour mettre à jour un film, les informations requises incluent l'ID utilisateur, le slug et d'autres informations fournies lors de la création d'un film. Créez le chemin du fichier /frontend/app/api/movies/update/route.ts et ajoutez-y les codes ci-dessous.

Ce code définit un point de terminaison pour gérer les requêtes POST pour la mise à jour d'un film, la validation des propriétés requises et l'exécution d'une requête SQL pour mettre à jour les données du film dans la base de données à l'aide de la fonction apiPost.

Supprimer le point de terminaison du film Pour supprimer un film, les informations requises incluent l'ID utilisateur et le slug d'un film. Créez le chemin du fichier /frontend/app/api/movies/delete/route.ts et ajoutez-y les codes ci-dessous.

Ce code définit un point de terminaison pour gérer les requêtes POST pour la suppression d'un film, la validation des propriétés requises (userId et slug) et l'exécution d'une requête SQL pour supprimer le film de la base de données à l'aide de la fonction apiPost.

Point de terminaison de tous les films Les données facultatives requises pour obtenir des films sont pageSize et userId, qui peuvent être transmises comme paramètres de requête pour filtrer et paginer les résultats. Créez le chemin du fichier /frontend/app/api/movies/all/route.ts et ajoutez-y les codes ci-dessous.

Le code ci-dessus définit un point de terminaison pour gérer les requêtes GET pour la récupération de films, permettant un filtrage facultatif par userId et une pagination par pageSize, et renvoie les résultats au format JSON.

Point de terminaison d'un film unique Pour récupérer un seul film, les données requises sont le slug d'un film. Créez le chemin du fichier /frontend/app/api/movies/[slug]/route.ts et ajoutez-y les codes ci-dessous.

Ce code définit un point de terminaison pour gérer les requêtes GET permettant de récupérer un film par son slug, de valider le paramètre slug et d'exécuter une requête SQL pour récupérer les données du film à partir de la base de données à l'aide de la fonction apiGet.

Cela marque tous les points de terminaison dont nous aurons besoin pour cette application. Si vous avez besoin d'une aide visuelle pour vous aider à mieux comprendre ces points de terminaison, veuillez regarder la vidéo ci-dessous, assurez-vous simplement de vous arrêter à l'horodatage 03:48:22 .

Intégration des points de terminaison

Notre tâche consiste à examiner et à mettre à jour les composants et les pages pré-codés, en expliquant le but et la fonctionnalité de chacun et en documentant les modifications que nous apportons au code existant. Nous commencerons par créer un service pour interagir avec les points de terminaison que nous avons précédemment créés dans le répertoire api .

Créez le chemin du fichier /frontend/app/services/api.service.ts et ajoutez-y les codes ci-dessous.

Ce service fournit un ensemble de fonctions pour interagir avec une base de données de films, permettant à l'application de récupérer des films, de récupérer un seul film par slug, de créer un nouveau film, de mettre à jour un film existant, de supprimer un film et de télécharger des fichiers à l'aide de requêtes API et de gestion des erreurs.

Pages d'application

Passons en revue et mettons à jour les différentes pages associées à notre application. Vous n'aurez pas besoin de modifier beaucoup de choses, juste celles mises en évidence ici.

Créer une page de film

Cette page est un formulaire de publication de films qui permet aux utilisateurs de télécharger des fichiers vidéo et image, de saisir les détails du film et de soumettre le formulaire pour publier le film, avec validation et gestion des erreurs, à l'aide des bibliothèques React et Wagmi.

Maintenant, mettez à jour le fichier trouvé dans /frontend/app/pages/create/page.tsx avec les codes ci-dessous.

Les modifications apportées à ce code par rapport à l'original sont :

1. J'ai importé la fonction createMovie depuis api.service et je l'ai utilisée dans la fonction handleSubmit pour créer un nouveau film.
2. Ajout du paramètre userId à l'appel de fonction createMovie , en transmettant l'adresse de l'utilisateur à partir du hook useAccount .
3. Mise à jour de la fonction handleSubmit pour utiliser toast.promise pour gérer la promesse renvoyée par createMovie .
4. Ajout de la gestion des erreurs à l'appel de fonction createMovie dans la fonction handleSubmit .

Ces modifications permettent au formulaire de soumettre des données de film à l'API et de créer une nouvelle entrée de film tout en gérant les erreurs et en affichant un message de réussite.

Modifier la page du film

Cette page d'édition de films permet aux utilisateurs autorisés de mettre à jour les détails du film, de télécharger des affiches et des vidéos et d'enregistrer les modifications, avec validation et gestion des erreurs, en utilisant React, Wagmi et Next.js, spécialement conçus pour que les utilisateurs puissent éditer leurs films.

Maintenant, mettez à jour le fichier trouvé dans /frontend/app/pages/movies/edit/[slug]/page.tsx avec les codes ci-dessous.

Les mises à niveau apportées au code qui sont différentes de l'original sont :

1. J'ai importé les fonctions fetchMovie et updateMovie depuis @/app/services/api.service et je les ai utilisées respectivement dans le hook useEffect et la fonction handleSubmit .
2. Remplacement de la méthode posters.find() par la fonction fetchMovie pour récupérer les données du film.
3. Mise à jour de la fonction handleSubmit pour appeler la fonction updateMovie avec les détails du film mis à jour.
4. Ajout de la gestion des erreurs à l'appel de fonction updateMovie dans la fonction handleSubmit .

Ces modifications permettent à notre application d'interagir avec nos points de terminaison API pour récupérer et mettre à jour les données du film, alors que le code d'origine s'appuyait sur notre tableau posters locales.

Page d'accueil

Cette page d'accueil affiche le composant bannières, une liste de films (provenant soit d'une source API, soit d'une interface utilisateur de chargement) et des options d'abonnement, en utilisant React et Next.js, pour fournir une page de destination attrayante et informative pour les utilisateurs.

Mettez à jour le fichier trouvé dans /frontend/app/pages/page.tsx avec les codes suivants.

Les modifications que nous avons apportées à la page d'accueil sont les suivantes :

1. Fonction fetchMovies importée depuis ./services/api.service et utilisée dans le hook useEffect pour récupérer les données du film à partir de notre API.
2. J'ai remplacé les données posters locales par l'appel de fonction fetchMovies , qui récupère les données de notre API.
3. Ajout du mot-clé await pour attendre que la promesse renvoyée par fetchMovies soit résolue avant de définir l'état des movies .

Ces modifications aident notre application à récupérer les données de film à partir de notre API au lieu de s'appuyer sur des données locales, rendant l'application plus dynamique et axée sur les données.

Page de compte utilisateur

Cette page affiche une liste de films publiés par l'utilisateur actuellement connecté, avec un espace réservé au squelette de chargement pendant que les données sont récupérées et un message invitant l'utilisateur à connecter son compte s'il ne l'a pas fait, en utilisant Wagmi et react-loading-skeleton.

Mettez à jour le fichier trouvé dans /frontend/app/pages/account/page.tsx avec les codes suivants.

Les modifications apportées à la page sont :

1. Fonction fetchMovies importée depuis @/app/services/api.service et utilisée dans le hook useEffect pour récupérer les données du film à partir de notre API.
2. J'ai remplacé les données posters locales par l'appel de fonction fetchMovies , qui récupère les données de notre API.
3. address transmise comme argument à la fonction fetchMovies pour récupérer les données de film spécifiques à l'utilisateur.
4. Suppression de la vérification conditionnelle de address avant le rendu de la liste des films, car la fonction fetchMovies gère désormais cette logique.
5. Simplification de l'instruction conditionnelle pour l'affichage du squelette de chargement, car elle ne dépend désormais que de l'état loaded .

Ces modifications récupèrent les données du film à partir de notre API, spécifiques à l'utilisateur connecté, et affichent un squelette de chargement pendant que les données sont récupérées.

Page de détails des films

Cette page affiche les détails d'un seul film, y compris son nom, son année de sortie, sa note, sa durée, son genre et ses informations générales, ainsi qu'un lecteur vidéo et des films associés, et fournit des options pour modifier ou supprimer le film si l'utilisateur est le propriétaire, en utilisant Next.js et Wagmi.

Mettez à jour le fichier trouvé dans /frontend/app/pages/movies/[slug]/page.tsx avec les codes suivants.

Nous avons apporté d'énormes changements ici ! Voici un résumé de ce que nous avons fait :

1. J'ai importé les fonctions deleteMovie , fetchMovie et fetchMovies depuis @/app/services/api.service et je les ai utilisées pour interagir avec nos points de terminaison API.
2. Remplacement des données locales par des appels API pour récupérer les données du film.
3. Fonctionnalité de suppression de film implémentée à l'aide de la fonction deleteMovie .
4. Utilisé toast.promise pour afficher une notification lors de la suppression d'un film.
5. Les données locales posters ont été supprimées et remplacées par des appels API.
6. Mise à jour de la fonction handleSubmit pour appeler la fonction deleteMovie et gérer la réponse.
7. Mise à jour du hook useEffect pour appeler les fonctions fetchMovie et fetchMovies .

Ces modifications amènent notre application à interagir avec notre API pour récupérer et supprimer les données du film et afficher des notifications à l'utilisateur pendant le processus de suppression.

Cette partie de la vidéo ci-dessous vous montrera comment nous avons intégré ces pages au point de terminaison. N'hésitez pas à regarder cette partie si vous rencontrez un problème. Assurez-vous simplement de vous arrêter à l'horodatage 04:57:41 .

Composants d'application

Discutons de l'objectif de chaque composant de notre application. Nous mettrons à jour tout composant qui doit être modifié.

Composant de bannière

Ce composant affiche une image d'arrière-plan rotative de bannières de films, parcourant un ensemble d'images de films toutes les 5 secondes, créant ainsi un effet de diaporama simple et automatique. Le code de ce composant peut être évalué dans /frontend/app/components/home/Banner.tsx .

Composante Affiches

Ce composant affiche un carrousel réactif et interactif d'affiches de films à l'aide de la bibliothèque Swiper, avec des fonctionnalités telles que la lecture automatique, la pagination et la navigation, présentant une liste de films transmis comme accessoire, avec une mise en page dynamique s'adaptant à différentes tailles d'écran. Ce code de composant peut être évalué dans /frontend/app/components/home/Posters.tsx .

Composant d'interface utilisateur d'affiche

Ce composant affiche une disposition de squelette d'espace réservé pour une section d'affiches de films, en utilisant la bibliothèque react-loading-skeleton, montrant un nombre dynamique d'affiches squelettes basé sur l'accessoire « posters », avec une conception réactive s'adaptant à différentes tailles d'écran, indiquant un état de chargement jusqu'à ce que les données des affiches réelles soient récupérées et affichées. Ce code de composant peut être évalué dans /frontend/app/components/home/PosterUI.tsx .

Composant Abonnements

Ce composant affiche une section de plans d'abonnement, présentant divers plans factices avec leurs détails, leurs prix et leurs avantages. Il permet aux utilisateurs de choisir un plan adapté à leurs besoins, en utilisant une mise en page de grille réactive et des effets de survol interactifs pour améliorer l'expérience utilisateur. Ce code de composant peut être évalué dans /frontend/app/components/home/Subscription.tsx .

Composant d'en-tête

Ce composant affiche une barre de navigation fixe en haut de la page, comportant un logo, un menu de navigation avec des liens vers différentes sections, un bouton de basculement de menu pour une conception réactive et un bouton de connexion, offrant une section d'en-tête cohérente et accessible dans toute l'application. Ce code de composant peut être évalué dans /frontend/app/components/layout/Header.tsx .

Composant de pied de page

Ce composant génère une section de pied de page en bas de la page, comportant le logo de l'application, une brève description, des liens de navigation, des informations de contact et un crédit mentionnant la solution de stockage décentralisée propulsée par Sia Foundation, offrant ainsi une section de pied de page claire et organisée avec des informations et des liens pertinents. Le code de ce composant peut être évalué dans /frontend/app/components/layout/Footer.tsx .

Composant de menu

Ce composant génère un bouton de bascule de menu réactif qui, lorsqu'il est cliqué, ouvre ou ferme un menu déroulant contenant des liens de navigation, permettant aux utilisateurs d'accéder à diverses sections de l'application sur des écrans plus petits tout en masquant le menu sur des écrans plus grands où les liens de navigation sont déjà visibles. Ce code de composant peut être évalué dans /frontend/app/components/shared/Menu.tsx .

Composant de la carte de film

Ce composant affiche l'affiche d'un seul film avec un effet de survol, montrant des informations supplémentaires telles que le nom du film, l'année de sortie et le résumé de l'arrière-plan tout en servant également de lien vers la page de détails du film, en utilisant une conception réactive et des transitions animées pour améliorer l'expérience utilisateur. Ce code de composant peut être évalué à /frontend/app/components/shared/MovieCard.tsx .

Composant téléchargé

Ce composant affiche un aperçu d'un fichier téléchargé, qu'il s'agisse d'une image ou d'une vidéo, avec une barre de progression et un bouton de suppression, permettant aux utilisateurs de consulter et de supprimer le fichier téléchargé, tout en offrant une interface visuellement attrayante et interactive avec des animations et des effets de survol. Le code de ce composant peut être évalué dans /frontend/app/components/shared/Uploaded.tsx .

Composant de téléchargement

Ce composant fournit une interface utilisateur pour le téléchargement de fichiers, en particulier de vidéos ou d'affiches, avec des fonctionnalités telles que le glisser-déposer, la validation du type de fichier, les limites de taille, le suivi de la progression du téléchargement et les notifications de réussite/erreur, en utilisant une combinaison de gestion de l'état React, de gestion des événements et d'intégration API pour gérer le processus de téléchargement.

Mettez à jour le fichier trouvé dans /frontend/app/components/shared/uploader.tsx avec les codes suivants.

Les modifications apportées à ce composant sont :

1. Fonctionnalité de téléchargement de fichiers : le code d'origine n'avait pas la fonctionnalité de téléchargement de fichiers réellement implémentée. Il affichait uniquement une notification toast de réussite sans téléchargement du fichier. Ce code mis à jour inclut la fonction uploadFile de api.service qui gère le téléchargement du fichier.
2. Suivi de la progression : le code mis à jour suit la progression du téléchargement et l'affiche sur l'interface utilisateur.
3. Gestion des erreurs : le code mis à jour inclut la gestion des erreurs pour le processus de téléchargement de fichiers.
4. Validation du type de fichier : le code mis à jour utilise une validation de type de fichier plus robuste à l’aide d’une expression régulière.
5. Organisation du code : Le code mis à jour est mieux organisé, avec des fonctions distinctes pour gérer différentes tâches, ce qui le rend plus facile à lire et à maintenir.
6. Mises à jour de l'interface utilisateur : le code mis à jour inclut certaines mises à jour de l'interface utilisateur, telles que l'affichage de la progression du téléchargement et un bouton d'annulation pendant le téléchargement.

Ce code mis à jour est plus complet et plus robuste, avec une fonctionnalité réelle de téléchargement de fichiers, un suivi de la progression, une gestion des erreurs et une meilleure organisation du code.

La vidéo ci-dessous explique plus en détail ce que fait chaque composant, veuillez la consulter pour votre amélioration.

Et voilà les gars, nous avons terminé ce projet, et la dernière étape que nous devons franchir est de lancer ce projet sur le navigateur. Exécutez $ yarn build && yarn start pour voir le projet en direct sur le navigateur.

Si vous rencontrez des problèmes, reportez-vous aux ressources suivantes pour résoudre le problème. Jusqu'à la prochaine fois, bonne chance !

• 🏠 Site Web de Sia
• 🔥 Sia Renterd
• 👨‍💻 API de location de Sia
• 🚀Chaîne Discord de Sia
• 💡 Liste de lecture de vidéos YouTube

À propos de l'auteur

Je suis développeur web3 et fondateur de Dapp Mentors , une entreprise qui aide les entreprises et les particuliers à créer et à lancer des applications décentralisées. J'ai plus de 8 ans d'expérience dans l'industrie du logiciel et je suis passionné par l'utilisation de la technologie blockchain pour créer des applications nouvelles et innovantes. Je dirige une chaîne YouTube appelée Dapp Mentors où je partage des tutoriels et des conseils sur le développement web3, et je publie régulièrement des articles en ligne sur les dernières tendances dans le domaine de la blockchain.