Introduction Le Web évolue et les technologies Web3 révolutionnent les secteurs traditionnels, notamment le streaming vidéo. Des plateformes comme 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, transforme le stockage des données en proposant une approche axée sur la confidentialité et l'utilisateur. Odysee Sia à 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. Rejoignez-nous dans un voyage pour créer une application décentralisée de streaming de films Web3 de pointe À 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 pour voir le projet en action et pour plus de contenu innovant comme celui-ci ! Regardez la vidéo de démonstration ci-dessous abonnez-vous à notre chaîne https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true 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 : - Renterd Zen testnet, installations de packages et variables d'environnement. Partie 1 : Configuration du projet – Création du service backend Partie 2 : Développement du backend - Intégration du frontend au service backend. Partie 3 : Développement du frontend Si vous préférez regarder l'intégralité du processus de développement, , dans la playlist, tout ce qui est écrit ici et plus encore est capturé dans les vidéos. je vous recommande de regarder cette playlist 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 à la racine de ce projet et appliquez les clés ci-dessous : .env 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. https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true 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 si vous ne l'avez pas déjà fait. Vous pouvez également utiliser une plateforme en ligne gratuite comme ou un VPS pour exécuter une instance Docker, si possible. Sinon, installez-le sur votre ordinateur local. le téléchargeant depuis le site officiel Gitpod 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 : . Exécutez cette commande lorsque vous souhaitez arrêter votre instance Docker (mais pas maintenant). $ docker compose -f "docker-compose.yml" down 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true La vidéo ci-dessus commence à minutes, veuillez vous arrêter à , cette partie vous guidera visuellement tout au long du processus de configuration de Renterd. 6:41 20:01 Veuillez noter que le processus de synchronisation de la blockchain, ainsi que la correspondance de l'hôte, prennent jusqu'à pour être prêts, vous devrez donc être patient avec l'ensemble du processus. 25 min Veuillez créer un nouveau bucket sur Renterd appelé , 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. vidtv 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. Suivez les instructions suivantes pour que les packages de services backend soient installés et prêts pour un développement ultérieur. Configuration du projet backend 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 pour lancer le backend et également confirmer qu'il est exempt de tout bug. $ yarn build && yarn start Enfin, exécutez les commandes suivantes pour installer les packages associés au frontend. Ensuite, nous l'exécuterons. Configuration du projet Frontend 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 pour obtenir l'ID de votre projet. Après avoir fourni l'ID du projet à la variable d'environnement, exécutez pour lancer le backend et également confirmer qu'il est exempt de tout bug. Walletconnect $ yarn build && yarn start À ce stade, vous verrez l'interface ci-dessous lorsque vous visiterez le navigateur à l'adresse . http://localhost:3000 Félicitations pour avoir atteint cette étape ! pour terminer le développement du service backend. Étape suivante Passez à la partie 2 Le service backend – Partie 2 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. Bienvenue ! 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 dans votre navigateur. Construisons sur cette base. http://localhost:9000 Nous avons actuellement ces codes dans le répertoire source du backend. Laissez-moi vous les expliquer brièvement. Ce dossier qui peut être entièrement adressé à 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. Fichiers utilitaires backend/src/utils Ce code définit une classe personnalisée qui étend la classe JavaScript intégrée, permettant la création d'instances d'erreur avec des codes d'état et des messages HTTP spécifiques. HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 Ce code définit une interface 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. FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e Et puis, dans le dossier racine , nous avons ce fichier 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. backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f Maintenant que nous avons couvert les fichiers clés, créons deux nouveaux fichiers dans un dossier , chacun servant un objectif distinct dans notre application. services Fichiers de service Dans le dossier , créez un nouveau dossier appelé à cet emplacement, c'est ici que nous allons créer deux services : backend/src services : 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. Service Sia : gère les fichiers mis en cache, en les supprimant automatiquement après 7 jours à minuit tous les jours. Service d'arrière-plan Le service Sia Créons un fichier nommé dans le dossier et suivons les étapes ci-dessous pour formuler ce service. sia.service.ts backend/src/services https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true Ce code définit une classe 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. SiaService 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. Téléchargement de fichiers sur Sia Renterd https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true Ce code définit une méthode privée 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. generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true Le code ci-dessus définit une méthode privée 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. uploadToSiaService 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. https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true Incluons maintenant la méthode publique que nous exposerons plus tard comme point de terminaison dans notre application. https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true Ce code définit une méthode publique 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. uploadFile 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. Téléchargement de fichiers sur Sia Renterd https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true Ce code définit une méthode privée 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é. downloadFromSiaService Laissez ces fichiers de réponse disponibles dans le répertoire backend, sinon nous rencontrerons une erreur lors de l'appel du fichier . Dans le répertoire , créez un autre dossier appelé et copiez-y les images suivantes. 404.png backend response_files Parfait, maintenant terminons ce service de téléchargement de fichiers. Ajoutez également la méthode ci-dessous dans la classe . SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true Ce code définit une méthode publique qui appelle la méthode privée pour récupérer un fichier du Sia Renterd et renvoie le flux lisible du fichier récupéré. downloadFile downloadFromSiaService 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 et mettez à jour son contenu avec ces codes. backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true 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 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true 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 et créez un fichier appelé et ajoutez-y ces séquences de code. backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true Ce code définit une classe qui configure un répertoire de cache et planifie les tâches quotidiennes à l'aide de la bibliothèque , 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. BackgroundService node-cron Ajoutez cette méthode à la classe . Suppression de l'ancien fichier BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true Ce code définit une méthode appelée 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. deleteOldFiles Maintenant, écrivons une fonction qui utilisera le package node-cron pour planifier le moment d'exécution de la suppression du fichier. https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true Ce code configure une tâche cron quotidienne pour exécuter la méthode tous les jours à minuit (00h00) pour effectuer un nettoyage automatique des fichiers. deleteOldFiles 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. https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true Parfait, enfin, ajoutons cette opération d'arrière-plan dans le cadre du processus serveur lors de l'initialisation. Accédez au fichier et mettez à jour la méthode d'écoute de l'application pour importer le fichier de service d'arrière-plan. backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true Vous devez réexécuter la commande du service backend en utilisant et voir une impression de terminal comme celle de l'image ci-dessous. $ yarn build && yarn start 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 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true Félicitations, vous êtes maintenant prêt pour la dernière partie de ce tutoriel qui est . Étape suivante 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 . Maintenant, ajoutons-y les codes suivants. /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true 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 . Nous devons également créer une API de contexte pour suivre l'état d'authentification. config 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 . Ajoutez y les codes suivants. /frontend/context/index.tsx - https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true 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. : nous allons mettre à jour la mise en page de notre application pour inclure les configurations ci-dessus. Accédez à et remplacez ses codes par celui ci-dessous. Mise à jour de la mise en page /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true 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. Maintenant, nous devons activer les boutons de connexion dans les composants et , et mettre à jour leurs codes en utilisant les informations ci-dessous. Le bouton de connexion /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true 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 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true 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. https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true 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. 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. Script de configuration de base de données Créez le chemin du fichier et ajoutez-y les codes ci-dessous. /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true Ce code établit une connexion à une base de données SQLite, définit deux fonctions API, et , 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. apiGet apiPost 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 et ajoutez-y les codes ci-dessous. Script de migration de base de données /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true 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é à la racine du répertoire du frontend. Nous avons également ajouté cette commande au script package.json, donc l'exécution sur le répertoire du frontend devrait fonctionner de la même manière. movies.db $ yarn migrate Pour une assistance visuelle, regardez la vidéo ci-dessous, arrêtez-la simplement à . 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true 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. 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 et ajoutez-y les codes ci-dessous. Créer un point de terminaison de film /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true 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. 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 et ajoutez-y les codes ci-dessous. Mettre à jour le point de terminaison du film /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true 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. Pour supprimer un film, les informations requises incluent l'ID utilisateur et le slug d'un film. Créez le chemin du fichier et ajoutez-y les codes ci-dessous. Supprimer le point de terminaison du film /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true 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. 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 et ajoutez-y les codes ci-dessous. Point de terminaison de tous les films /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true 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. Pour récupérer un seul film, les données requises sont le slug d'un film. Créez le chemin du fichier et ajoutez-y les codes ci-dessous. Point de terminaison d'un film unique /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true 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 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true 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 et ajoutez-y les codes ci-dessous. /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true 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 avec les codes ci-dessous. /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true Les modifications apportées à ce code par rapport à l'original sont : J'ai importé la fonction depuis et je l'ai utilisée dans la fonction pour créer un nouveau film. createMovie api.service handleSubmit Ajout du paramètre à l'appel de fonction , en transmettant l'adresse de l'utilisateur à partir du hook . userId createMovie useAccount Mise à jour de la fonction pour utiliser pour gérer la promesse renvoyée par . handleSubmit toast.promise createMovie Ajout de la gestion des erreurs à l'appel de fonction dans la fonction . createMovie 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 avec les codes ci-dessous. /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true Les mises à niveau apportées au code qui sont différentes de l'original sont : J'ai importé les fonctions et depuis et je les ai utilisées respectivement dans le hook et la fonction . fetchMovie updateMovie @/app/services/api.service useEffect handleSubmit Remplacement de la méthode par la fonction pour récupérer les données du film. posters.find() fetchMovie Mise à jour de la fonction pour appeler la fonction avec les détails du film mis à jour. handleSubmit updateMovie Ajout de la gestion des erreurs à l'appel de fonction dans la fonction . updateMovie 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 locales. posters 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 avec les codes suivants. /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true Les modifications que nous avons apportées à la page d'accueil sont les suivantes : Fonction importée depuis et utilisée dans le hook pour récupérer les données du film à partir de notre API. fetchMovies ./services/api.service useEffect J'ai remplacé les données locales par l'appel de fonction , qui récupère les données de notre API. posters fetchMovies Ajout du mot-clé pour attendre que la promesse renvoyée par soit résolue avant de définir l'état des . await fetchMovies 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 avec les codes suivants. /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true Les modifications apportées à la page sont : Fonction importée depuis et utilisée dans le hook pour récupérer les données du film à partir de notre API. fetchMovies @/app/services/api.service useEffect J'ai remplacé les données locales par l'appel de fonction , qui récupère les données de notre API. posters fetchMovies transmise comme argument à la fonction pour récupérer les données de film spécifiques à l'utilisateur. address fetchMovies Suppression de la vérification conditionnelle de avant le rendu de la liste des films, car la fonction gère désormais cette logique. address fetchMovies 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 avec les codes suivants. /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true Nous avons apporté d'énormes changements ici ! Voici un résumé de ce que nous avons fait : J'ai importé les fonctions , et depuis et je les ai utilisées pour interagir avec nos points de terminaison API. deleteMovie fetchMovie fetchMovies @/app/services/api.service Remplacement des données locales par des appels API pour récupérer les données du film. Fonctionnalité de suppression de film implémentée à l'aide de la fonction . deleteMovie Utilisé pour afficher une notification lors de la suppression d'un film. toast.promise Les données locales ont été supprimées et remplacées par des appels API. posters Mise à jour de la fonction pour appeler la fonction et gérer la réponse. handleSubmit deleteMovie Mise à jour du hook pour appeler les fonctions et . useEffect fetchMovie 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 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true 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 avec les codes suivants. /frontend/app/components/shared/uploader.tsx https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true Les modifications apportées à ce composant sont : : 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 de qui gère le téléchargement du fichier. Fonctionnalité de téléchargement de fichiers uploadFile api.service : le code mis à jour suit la progression du téléchargement et l'affiche sur l'interface utilisateur. Suivi de la progression : le code mis à jour inclut la gestion des erreurs pour le processus de téléchargement de fichiers. Gestion des erreurs : le code mis à jour utilise une validation de type de fichier plus robuste à l’aide d’une expression régulière. Validation du type de fichier : 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. Organisation du code : 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. Mises à jour de l'interface utilisateur 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true 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 pour voir le projet en direct sur le navigateur. $ yarn build && yarn start 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 , 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 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. Dapp Mentors chaîne YouTube appelée Dapp Mentors
