Erstellen Sie eine Web3-Film-Streaming-dApp mit NextJs, Tailwind und Sia Renterd

Einführung

Das Internet entwickelt sich weiter und Web3-Technologien revolutionieren traditionelle Branchen, darunter auch Video-Streaming. Plattformen wie Odysee sind hier führend und bieten dezentrale Alternativen zu YouTube und Rumble. Im Gegensatz zu herkömmlichen Anbietern wie Google Drive und Dropbox verändert Sia die Datenspeicherung und bietet einen datenschutzorientierten und benutzerzentrierten Ansatz.

Begleiten Sie uns auf der Reise zum Erstellen einer hochmodernen Web3-Film-Streaming-dApp mit NextJs, TypeScript, Tailwind CSS und Sia Renterd. Diese Tutorial-Reihe führt Sie durch die Erstellung einer dezentralen Anwendung, die die Blockchain-Technologie von Sia nutzt, um das Eigentum und die Privatsphäre der Benutzerdaten zu gewährleisten.

Am Ende dieses Tutorials verfügen Sie über das erforderliche Fachwissen:

• Bauen Sie eine voll funktionsfähige Film-Streaming-Plattform auf, um sie mit Freunden zu teilen oder als Schulprojekt zu nutzen.
• Starten Sie Ihre eigene SaaS-Anwendung (Software as a Service)
• Schöpfen Sie das Potenzial der Web3-Technologien in der Video-Streaming-Branche

Sehen Sie sich das Demo-Video unten an, um das Projekt in Aktion zu sehen, und abonnieren Sie unseren Kanal für weitere innovative Inhalte wie diesen!

Voraussetzungen

Um mit den Schritten fortfahren zu können, stellen Sie sicher, dass Sie die folgenden Tools installiert haben. Die Vertrautheit mit den Stapeln wird Ihr Verständnis ebenfalls verbessern:

• NodeJs
• WeiterJs
• Rückenwind CSS
• Typoskript
• Docker (erforderlich)

Diese dreiteilige Serie behandelt:

• Teil 1: Projekteinrichtung – Renterd Zen-Testnetz, Paketinstallationen und Umgebungsvariablen.
• Teil 2: Backend-Entwicklung – Erstellen des Backend-Dienstes
• Teil 3: Frontend-Entwicklung – Integration des Frontends mit dem Backend-Dienst.

Wenn Sie lieber den gesamten Entwicklungsprozess verfolgen möchten, empfehle ich Ihnen, sich diese Playlist anzusehen . In der Playlist ist alles, was hier geschrieben steht und mehr, in den Videos festgehalten.

Nachdem das gesagt ist, können wir mit der Einrichtung dieses Projekts beginnen.

Projekt-Setup – Teil 1

Wir beginnen mit dem Klonen eines vorbereiteten Repositorys, das das Docker-Compose-Skript von Sia Renterd sowie die Backend- und Frontend-Dienste enthält. Führen Sie die folgenden Befehle aus:

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

Jetzt ist es wichtig, dass wir zu unserem Starter-Zweig in diesem neu geklonten GitHub-Projekt wechseln und den folgenden Befehl ausführen, um dies abzuschließen.

 $ git checkout 01_starter_branch

Als Nächstes richten wir die zugehörige Umgebungsvariable für diesen Renterd-Dienst ein. Erstellen Sie eine .env Datei im Stammverzeichnis dieses Projekts und wenden Sie die folgenden Schlüssel an:

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

Um diese API-Schlüssel zu erhalten, muss Sia Renterd auf Ihrem Computer installiert sein. Sehen Sie sich bitte das kurze Video unten an, in dem alles im Wesentlichen zusammengefasst wird.

Generieren Sie mit der Renterd-Anwendung eine Seed-Phrase, wie im obigen Video gezeigt, und fügen Sie sie wie im obigen Video beschrieben in Ihre Umgebungsvariable ein. Ersetzen Sie das Passwort durch etwas, das Sie sich leicht merken können.

Als Nächstes müssen wir Docker installieren, indem wir es von der offiziellen Website herunterladen, falls Sie dies noch nicht getan haben. Alternativ können Sie, wenn möglich, eine kostenlose Online-Plattform wie Gitpod oder einen VPS verwenden, um eine Docker-Instanz auszuführen. Andernfalls installieren Sie es auf Ihrem lokalen Computer.

Schließlich können wir einen Docker-Container starten, indem wir den folgenden Docker-Befehl im Stammverzeichnis dieses Projekts ausführen. Stellen Sie sicher, dass sich das Terminal am selben Verzeichnisspeicherort befindet wie diese Datei docker-compose.yml .

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

Beachten Sie den Befehl zum Herunterfahren des Containers: $ docker compose -f "docker-compose.yml" down . Führen Sie diesen Befehl aus, wenn Sie Ihre Docker-Instanz herunterfahren möchten (aber nicht jetzt).

Wenn Sie die obigen Anweisungen korrekt ausgeführt haben, sollten Sie die folgende Benutzeroberfläche sehen, wenn Sie Ihren Browser unter http://localhost:9880 aufrufen.

Geben Sie Ihr Passwort (aus Ihrer Umgebungsvariable) ein, um sich anzumelden. Folgen Sie dann dem Konfigurationsverfahren im Video unten, um Ihre Sia Renterd-Instanz für Datei-Uploads, -Downloads und -Streaming einzurichten.

Das obige Video beginnt bei Minute 6:41 Bitte halten Sie bei Minute 20:01 an. Dieser Teil führt Sie visuell durch den Konfigurationsprozess von Renterd.

Beachten Sie, dass der Blockchain-Synchronisierungsprozess zusammen mit dem Host-Matching bis zu 25 min dauert. Sie müssen also während des gesamten Vorgangs Geduld haben.

Bitte erstellen Sie auf Renterd einen neuen Bucket mit dem Namen vidtv , in dem alle unsere Dateien für dieses Projekt gespeichert werden. Wenn Sie die obigen Anweisungen erfolgreich ausgeführt haben, sollte Ihr Renterd-Knoten zum Hoch- und Herunterladen bereit sein. Siehe das Bild unten.

Erstaunlich. An diesem Punkt ist unser Renterd-Dienst bereit, Dateien zu empfangen, aber wir müssen programmgesteuert mit ihm kommunizieren.

Lassen Sie uns den ersten Teil des Tutorials abrunden, indem wir die Pakete und Umgebungsvariablen für das Backend und das Frontend einrichten.

Einrichten des Backend-Projekts. Führen Sie die folgenden Anweisungen aus, um die Backend-Servicepakete zu installieren und für die weitere Entwicklung vorzubereiten.

Navigieren Sie mit den folgenden Befehlen von einer neuen Terminalinstanz zum Backend-Verzeichnis:

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

Geben Sie als Nächstes die folgenden Informationen in die Umgebungsvariablen ein.

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

Führen Sie jetzt $ yarn build && yarn start aus, um das Backend zu starten und zu bestätigen, dass es keine Fehler enthält.

Frontend-Projekt-Setup Führen Sie abschließend die folgenden Befehle aus, um die mit dem Frontend verknüpften Pakete zu installieren. Anschließend werden wir es ausführen.

Navigieren Sie mit den folgenden Befehlen von einer neuen Terminalinstanz zum Backend-Verzeichnis:

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

Geben Sie als Nächstes die folgenden Informationen in die Umgebungsvariablen ein.

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

Melden Sie sich an und erstellen Sie ein Projekt mit Walletconnect , um Ihre Projekt-ID zu erhalten. Nachdem Sie die Projekt-ID der Umgebungsvariable zugewiesen haben, führen Sie $ yarn build && yarn start aus, um das Backend zu starten und zu bestätigen, dass es fehlerfrei ist.

Wenn Sie den Browser unter http://localhost:3000 aufrufen, sehen Sie nun die folgende Benutzeroberfläche.

Nächster Schritt Herzlichen Glückwunsch zum Erreichen dieses Meilensteins! Fahren Sie mit Teil 2 fort, um die Entwicklung des Backend-Dienstes abzuschließen.

Der Backend Service – Teil 2

Willkommen zurück! Bitte lesen Sie Teil 1 durch, falls Sie dies noch nicht getan haben. Lassen Sie uns nun in Teil 2 eintauchen: Erstellen des Backend-Dienstes für unsere Web3-Film-Streaming-Plattform.

Wir haben einen Startercode für das Backend bereitgestellt, der derzeit eine Willkommensnachricht anzeigt, wenn Sie den Server starten und http://localhost:9000 in Ihrem Browser aufrufen. Lassen Sie uns auf dieser Grundlage aufbauen.

Diese Codes liegen aktuell im Quellverzeichnis des Backends. Ich erkläre sie euch kurz.

Dienstprogrammdateien Dieser Ordner, der vollständig an backend/src/utils adressiert werden kann, enthält zwei wichtige Dateien: eine HTTP-Ausnahmehandlerfunktion und eine Schnittstelle zur Handhabung von Datei-Upload-Informationen.

Dieser Code definiert eine benutzerdefinierte HttpException -Klasse, die die integrierte JavaScript- Error erweitert und die Erstellung von Fehlerinstanzen mit bestimmten HTTP-Statuscodes und -Meldungen ermöglicht.

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

Dieser Code definiert eine Schnittstelle „ FileUpload , die eine hochgeladene Datei darstellt und ihre Eigenschaften wie Name, Daten, Größe, Kodierung usw. angibt und so eine strukturierte Möglichkeit zum Umgang mit Datei-Uploads in dieser Backend-Anwendung bietet.

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

Und dann haben wir im Stammordner backend/src diese Datei index.ts , die einen Express.js-Server mit CORS und Datei-Upload-Unterstützung einrichtet, eine einzelne GET-Route definiert, die eine „Willkommens“-Nachricht zurückgibt, und Fehler behandelt, indem sie diese abfängt und als benutzerdefinierte HttpExceptions erneut auslöst, und dann den Server auf Port 9000 startet, wie in den Umgebungsvariablen angegeben.

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

Nachdem wir nun die Schlüsseldateien abgedeckt haben, erstellen wir zwei neue Dateien in einem services , von denen jede einen bestimmten Zweck in unserer Anwendung erfüllt.

Dienstdateien

Erstellen Sie im Ordner backend/src an dieser Stelle einen neuen Ordner mit dem Namen „ services . Hier erstellen wir zwei Dienste:

1. Sia-Dienst : Verarbeitet Datei-Uploads, Downloads, Streaming und Caching und kommuniziert mit dem Renterd-Dienst.
2. Hintergrunddienst : Verwaltet zwischengespeicherte Dateien und entfernt sie automatisch täglich nach 7 Tagen um Mitternacht.

Der Sia-Dienst

Erstellen wir eine Datei mit dem Namen sia.service.ts im Ordner backend/src/services und befolgen Sie die folgenden Schritte, um diesen Dienst zu formulieren.

Dieser Code definiert eine SiaService Klasse, die mit Umgebungsvariablen für Sia-API-Einstellungen und einer Ursprungs-URL initialisiert wird und so eine Grundlage für die Verwaltung von Interaktionen mit dem Sia-Dienst bietet. Lassen Sie uns nun den Rest des Codes für diesen Dienst bereitstellen.

Hochladen von Dateien zu Sia Renterd Um Dateien zum Sia-Netzwerk hochzuladen, müssen wir diese drei Methoden zur Klasse hinzufügen, zwei sind privat und eine öffentlich.

Dieser Code definiert eine private Methode generateRandomString , die eine zufällige Zeichenfolge einer bestimmten Länge generiert, die aus Groß- und Kleinbuchstaben sowie Zahlen besteht. Dabei wird eine Schleife verwendet, um zufällig Zeichen aus einer vordefinierten Zeichenfolge auszuwählen. Wir werden sie verwenden, um jede Datei eindeutig umzubenennen, bevor wir sie an Renterd senden.

Der obige Code definiert eine private Methode uploadToSiaService , die eine Datei mithilfe von Axios zu Sia Renterd hochlädt, den Upload-Fortschritt und -Fehler verarbeitet und die Axios-Antwort zurückgibt oder einen Fehler auslöst, wenn der Upload fehlschlägt.

Die Renterd-Endpunkte sind in der API-Dokumentation beschrieben, die Sie sich ansehen können, oder schauen Sie sich das Video unten an, in dem ich die Sia Renterd-API-Dokumentation erkläre.

Lassen Sie uns nun die öffentliche Methode einbinden, die wir später als Endpunkt in unserer Anwendung verfügbar machen.

Dieser Code definiert eine öffentliche Methode uploadFile , die eine Datei hochlädt, indem sie eine eindeutige Kennung generiert, die Datei in einem lokalen Cache speichert und sie dann zum Sia Renterd hochlädt. Dabei werden die URL der Datei und eine Erfolgsmeldung zurückgegeben oder ein Fehler ausgegeben, wenn der Upload fehlschlägt.

Herunterladen von Dateien zum Sia-Netzwerk: Um Dateien zum Sia-Netzwerk herunterzuladen, müssen wir diese beiden Methoden zur Klasse hinzufügen, eine ist privat und die andere öffentlich.

Dieser Code definiert eine private Methode downloadFromSiaService , die eine Datei vom Sia-Dienst abruft, sie lokal zwischenspeichert und einen lesbaren Stream der Datei zurückgibt, Fehler behandelt und ein 404-Bild zurückgibt, wenn die Datei nicht gefunden wird.

Sorgen Sie dafür, dass diese response_files im Backend-Verzeichnis verfügbar sind, da sonst beim Aufruf der Datei 404.png ein Fehler auftritt. Erstellen Sie im backend -Verzeichnis einen weiteren Ordner mit dem Namen response_files und kopieren Sie die folgenden Bilder hinein.

Perfekt, jetzt vervollständigen wir diesen Dateidownloaddienst. Fügen Sie auch die folgende Methode in der Klasse SiaService hinzu.

Dieser Code definiert eine öffentliche Methode downloadFile , die die private Methode downloadFromSiaService aufruft, um eine Datei vom Sia Renterd abzurufen, und den lesbaren Stream der abgerufenen Datei zurückgibt.

Dienstendpunkte

Es ist an der Zeit, diese verschiedenen Methoden mit ihren jeweiligen Endpunkten zu koppeln. Derzeit haben wir nur einen, aber wir werden zwei weitere zum Hoch- und Herunterladen von Dateien benötigen. Beim Datei-Streaming wird auch der Download-Endpunkt verwendet.

Gehen Sie zur Datei backend/src/index.ts und aktualisieren Sie ihren Inhalt mit diesen Codes.

Dieser Code richtet einen Express.js-Server mit CORS- und Datei-Upload-Unterstützung ein und definiert drei Endpunkte: eine Willkommensnachricht, einen Datei-Upload in das Sia-Netzwerk und einen Datei-Download aus dem Sia-Netzwerk. Dabei wird die Klasse SiaService zur Handhabung von Dateioperationen und HttpException zur Fehlerbehandlung verwendet.

Sehen Sie sich diesen Abschnitt des Videos unten an, wenn Sie visuelle Hilfe benötigen. Achten Sie darauf, bei der Zeitmarke 01:50:44 anzuhalten.

Wir müssen einen Cache-Verwaltungsdienst erstellen, um sicherzustellen, dass unser Server nicht mit ungenutzten Dateien vollgestopft wird, indem wir steuern, wie lange Dateien im Cache bleiben. Es ist wichtig zu wissen, dass der einzige Grund, warum wir diesen Dienst brauchen, die Reduzierung der Datenlatenz ist.

Der Hintergrunddienst

Gehen Sie zum Ordner backend/src/services , erstellen Sie eine Datei namens background.service.ts und fügen Sie diese Codesequenzen hinzu.

Dieser Code definiert eine BackgroundService Klasse, die ein Cache-Verzeichnis einrichtet und tägliche Jobs mithilfe der node-cron Bibliothek plant, die Hintergrundjobs initialisiert und eine Bestätigungsnachricht protokolliert. Lassen Sie uns eine Methode erstellen, die für das Löschen von Dateien im Cache zuständig ist, die älter als 7 Tage sind.

Löschen alter Dateien. Fügen Sie diese Methode der Klasse BackgroundService hinzu.

Dieser Code definiert eine Methode namens „ deleteOldFiles , die Dateien aus einem Cache-Verzeichnis entfernt, die älter als 7 Tage sind, indem sie das Verzeichnis liest, die Erstellungszeit jeder Datei überprüft, Dateien entfernt, die die Zielzeit überschreiten, den Start und das Ende des Auftrags sowie alle Fehler oder erfolgreichen Löschungen protokolliert.

Schreiben wir nun eine Funktion, die das Node-Cron-Paket verwendet, um den Zeitpunkt der Dateilöschung zu planen.

Dieser Code richtet einen täglichen Cron-Job ein, um die Methode deleteOldFiles jeden Tag um Mitternacht (00:00) auszuführen und so eine automatische Dateibereinigung durchzuführen.

Wir müssen auch die Konstruktorfunktion aktualisieren, um die täglichen Jobs bei der Instanziierung der Hintergrunddienstklasse zu planen.

Perfekt, zum Schluss fügen wir diesen Hintergrundvorgang als Teil des Serverprozesses bei der Initialisierung hinzu. Gehen Sie zur Datei backend/src/index.ts und aktualisieren Sie die App-Listener-Methode, um die Hintergrunddienstdatei zu importieren.

Sie sollten den Backend-Dienstbefehl mit $ yarn build && yarn start erneut ausführen und einen Terminalausdruck wie den im Bild unten anzeigen.

Wenn Sie lieber sehen möchten, wie ich den gesamten Hintergrunddienst codiert habe, ist das folgende Video das Richtige für Sie; achten Sie nur darauf, beim Zeitstempel 02:16:07 anzuhalten.

Nächster Schritt Herzlichen Glückwunsch, Sie sind jetzt bereit für den letzten Teil dieses Tutorials, Teil 3 .

Tauchen wir nun in den letzten Teil dieser Tutorial-Reihe ein, in dem wir das Backend mit dem Frontend integrieren und die Teile verbinden, um die Datei-Upload-Anwendung fertigzustellen. Wir beginnen damit, sicherzustellen, dass die Authentifizierungen im Frontend aktiv sind.

Web3-Modalauthentifizierung – Teil 3

Erstellen Sie einen neuen Ordner mit dem Namen „config“ im Frontend-Verzeichnis und fügen Sie eine Indexdatei hinzu, sodass der Pfad /frontend/config/index.tsx entsteht. Fügen wir nun die folgenden Codes hinzu.

Dieser Code richtet eine Wagmi-Konfiguration für unsere Web3-Anwendung ein, definiert Metadaten, unterstützte Ketten und Authentifizierungseinstellungen, einschließlich Wallet- und Social-Login-Optionen, und speichert sie im config . Wir müssen auch eine Kontext-API erstellen, um den Authentifizierungsstatus zu verfolgen.

Die Context-API Als nächstes erstellen Sie einen neuen Ordner namens „context“, noch im Frontend-Verzeichnis, und fügen eine Indexdatei hinzu, sodass der Pfad /frontend/context/index.tsx entsteht. Fügen Sie die folgenden Codes hinzu.

Dieser Code richtet einen Web3Modal-Anbieter mit Wagmi und React Query ein, konfiguriert das Web3-Modal mit der Projekt-ID und den Designvariablen und verpackt die Anwendung in einen WagmiProvider und QueryClientProvider.

Layout aktualisieren : Lassen Sie uns unser Anwendungslayout aktualisieren, um die oben genannten Konfigurationen einzuschließen. Gehen Sie zu /frontend/app/layout.tsx und ersetzen Sie die Codes durch die folgenden.

Der obige Code richtet das Stammlayout für eine Next.js-Anwendung ein, einschließlich Metadaten, Schriftarten, Stilen und Anbietern für Web3-Modal, Toastbenachrichtigungen und Layoutkomponenten wie Kopf- und Fußzeilen.

Die Anmeldeschaltfläche Jetzt müssen wir die Anmeldeschaltflächen in den Komponenten /frontend/app/components/layout/Header.tsx und /frontend/app/components/shared/Menu.tsx aktivieren und ihre Codes mit den folgenden Informationen aktualisieren.

Dieser Code definiert eine React-Komponente für eine Navigationsleiste, die ein Logo, Navigationslinks, ein benutzerdefiniertes Menü und eine Anmeldeschaltfläche enthält, die ein Web3-Modal mit einem ansprechenden Design für verschiedene Bildschirmgrößen startet.

Die folgenden Bilder sollten als Beweis dafür auftauchen, dass das, was wir getan haben, funktioniert, wenn Sie auf die Anmeldeschaltfläche klicken und mit Ihrem bevorzugten Anbieter (X, Facebook, Google, Discord oder Ethereum) fortfahren.

Hervorragend, gehen wir tiefer und richten unsere Datenbank und das API-basierte NextJs-System ein. Bei Unklarheiten zum Vorgang schauen Sie sich bitte den Videoabschnitt unten an. Achten Sie jedoch darauf, bei der Marke 02:57:59 anzuhalten.

Datenbankskripte

Aktualisieren wir zunächst das NextJs-Konfigurationsskript, um unsere Seiten und Endpunkte richtig anzusprechen und unsere Remote-Bilder von Warnungen und Kontrollen zu befreien.

Dieser Code definiert ein Next.js-Konfigurationsobjekt, das das Umschreiben der API-Route und die Bildoptimierung einrichtet und Remote-Bilder von jedem HTTPS-Hostnamen und lokale Bilder aus der Localhost-Domäne zulässt.

Datenbankkonfigurationsskript Wir werden für diese Anwendung SQLite verwenden, aber Sie können auch eine robustere Lösung wie MySQL- oder NOSQL-Anbieter verwenden. Der Einfachheit halber arbeiten wir mit einer SQLite-Flatfile.

Erstellen Sie den Dateipfad /frontend/app/api/database.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code richtet eine SQLite-Datenbankverbindung ein und definiert zwei API-Funktionen, apiGet und apiPost , um GET- und POST-Anfragen an die Datenbank auszuführen, mit Fehlerbehandlung und versprechenbasierter asynchroner Ausführung. Wir werden diese Codes immer dann verwenden, wenn wir Daten an die Datenbank senden oder von ihr abrufen möchten.

Datenbankmigrationsskript Wir müssen sowohl eine Datenbank-Flatfile als auch eine Tabelle erstellen, um alle unsere Inhalte aufzunehmen. Erstellen Sie den Dateipfad /frontend/app/api/migrations.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code definiert eine Datenbankmigrationsfunktion, die mithilfe von SQLite eine „movies“-Tabelle mit den angegebenen Spalten erstellt, wenn sie nicht vorhanden ist, und das Ergebnis der Operation protokolliert. Führen Sie nun den folgenden Befehl in einem Terminal aus, das auf das Verzeichnis /frontend zeigt.

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

Es ist zu beachten, dass dieser Vorgang auch eine Datenbank-Flatfile namens movies.db im Stammverzeichnis des Frontend-Verzeichnisses erstellt. Wir haben diesen Befehl auch zum Skript package.json hinzugefügt, daher sollte die Ausführung $ yarn migrate im Frontend-Verzeichnis genauso funktionieren.

Sehen Sie sich zur visuellen Unterstützung das Video unten an. Halten Sie es einfach bei der Marke 03:10:54 an.

Anwendungsendpunkte

Definieren wir nun einige Endpunkte zum Erstellen, Lesen, Aktualisieren und Löschen von Filmen. Wir werden die NextJs-API-Bereitstellung verwenden, um diese Endpunkte zu erstellen.

Endpunkt zum Erstellen eines Films: Zu den erforderlichen Informationen gehören Benutzer-ID, Filmname, Bild, Video-URL, Veröffentlichungsdatum, Genre, Bewertung, Sprache, Dauer und Hintergrundbeschreibung. Erstellen Sie den Dateipfad /frontend/app/api/movies/create/route.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code definiert einen Endpunkt zum Verarbeiten von POST-Anfragen, Validieren und Verarbeiten von Filmdaten, Generieren eines eindeutigen Slug-Eintrags und Einfügen der Daten in eine Datenbank mithilfe einer APIPost-Funktion, während Fehler verarbeitet und JSON-Antworten zurückgegeben werden.

Endpunkt zum Aktualisieren von Filmen : Um einen Film zu aktualisieren, sind die Benutzer-ID, der Slug und andere Informationen erforderlich, die beim Erstellen eines Films angegeben wurden. Erstellen Sie den Dateipfad /frontend/app/api/movies/update/route.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code definiert einen Endpunkt zum Verarbeiten von POST-Anfragen zum Aktualisieren eines Films, zum Validieren erforderlicher Eigenschaften und zum Ausführen einer SQL-Abfrage zum Aktualisieren der Filmdaten in der Datenbank mithilfe der Funktion „APIPost“.

Endpunkt zum Löschen von Filmen: Um einen Film zu löschen, sind die Benutzer-ID und der Slug des Films erforderlich. Erstellen Sie den Dateipfad /frontend/app/api/movies/delete/route.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code definiert einen Endpunkt zur Verarbeitung von POST-Anfragen zum Löschen eines Films, zur Validierung der erforderlichen Eigenschaften (Benutzer-ID und Slug) und zur Ausführung einer SQL-Abfrage zum Löschen des Films aus der Datenbank mithilfe der Funktion „APIPost“.

Endpunkt „Alle Filme“: Die optionalen Daten, die zum Abrufen von Filmen erforderlich sind, sind Seitengröße und Benutzer-ID, die als Abfrageparameter übergeben werden können, um die Ergebnisse zu filtern und zu paginieren. Erstellen Sie den Dateipfad /frontend/app/api/movies/all/route.ts und fügen Sie die folgenden Codes hinzu.

Der obige Code definiert einen Endpunkt zur Verarbeitung von GET-Anfragen zum Abrufen von Filmen, ermöglicht optionales Filtern nach Benutzer-ID und Paginierung nach Seitengröße und gibt die Ergebnisse im JSON-Format zurück.

Endpunkt für einzelnen Film: Um einen einzelnen Film abzurufen, sind die erforderlichen Daten der Slug eines Films. Erstellen Sie den Dateipfad /frontend/app/api/movies/[slug]/route.ts und fügen Sie die folgenden Codes hinzu.

Dieser Code definiert einen Endpunkt zum Verarbeiten von GET-Anfragen zum Abrufen eines Films anhand seines Slug-Parameters, zum Validieren des Slug-Parameters und zum Ausführen einer SQL-Abfrage zum Abrufen der Filmdaten aus der Datenbank mithilfe der Funktion „apiGet“.

Damit sind alle Endpunkte markiert, die wir für diese Anwendung benötigen. Wenn Sie eine visuelle Hilfe benötigen, um diese Endpunkte besser zu verstehen, schauen Sie sich bitte das Video unten an. Achten Sie jedoch darauf, bei der Zeitmarke 03:48:22 anzuhalten.

Endpunktintegration

Unsere Aufgabe besteht darin, vorcodierte Komponenten und Seiten zu überprüfen und zu aktualisieren, den Zweck und die Funktionalität jeder einzelnen Komponente zu erklären und die Änderungen zu dokumentieren, die wir am vorhandenen Code vornehmen. Wir beginnen mit der Erstellung eines Dienstes für die Interaktion mit den Endpunkten, die wir zuvor im api -Verzeichnis erstellt haben.

Erstellen Sie den Dateipfad /frontend/app/services/api.service.ts und fügen Sie die folgenden Codes hinzu.

Dieser Dienst bietet eine Reihe von Funktionen für die Interaktion mit einer Filmdatenbank. Dadurch kann die Anwendung Filme abrufen, einen einzelnen Film per Slug abrufen, einen neuen Film erstellen, einen vorhandenen Film aktualisieren, einen Film löschen und mithilfe von API-Anfragen und Fehlerbehandlung Dateien hochladen.

Anwendungsseiten

Lassen Sie uns die verschiedenen Seiten überprüfen und aktualisieren, die mit unserer Anwendung verknüpft sind. Sie müssen nicht viele Dinge ändern, nur die hier hervorgehobenen.

Filmseite erstellen

Diese Seite ist ein Formular zur Veröffentlichung von Filmen, mit dem Benutzer Video- und Bilddateien hochladen, Filmdetails eingeben und das Formular zur Veröffentlichung des Films mit Validierung und Fehlerbehandlung unter Verwendung der React- und Wagmi-Bibliotheken absenden können.

Aktualisieren Sie nun die Datei in /frontend/app/pages/create/page.tsx mit den folgenden Codes.

Die in diesem Code im Vergleich zum Original vorgenommenen Änderungen sind:

1. Die Funktion createMovie wurde aus api.service importiert und in der Funktion handleSubmit verwendet, um einen neuen Film zu erstellen.
2. Dem Funktionsaufruf createMovie wurde der Parameter userId hinzugefügt, der die Adresse des Benutzers vom useAccount -Hook übergibt.
3. Die Funktion handleSubmit wurde aktualisiert, um toast.promise für die Verarbeitung des von createMovie zurückgegebenen Versprechens zu verwenden.
4. Fehlerbehandlung zum Funktionsaufruf createMovie in der Funktion handleSubmit “ hinzugefügt.

Diese Änderungen ermöglichen es dem Formular, Filmdaten an die API zu übermitteln und einen neuen Filmeintrag zu erstellen, während gleichzeitig Fehler verarbeitet und eine Erfolgsmeldung angezeigt werden.

Filmseite bearbeiten

Auf dieser Seite zur Filmbearbeitung können autorisierte Benutzer Filmdetails aktualisieren, Poster und Videos hochladen und Änderungen mit Validierung und Fehlerbehandlung speichern. Dabei kommen React, Wagmi und Next.js zum Einsatz, die speziell für Benutzer zur Bearbeitung ihrer Filme entwickelt wurden.

Aktualisieren Sie nun die Datei in /frontend/app/pages/movies/edit/[slug]/page.tsx mit den folgenden Codes.

Die am Code vorgenommenen Verbesserungen unterscheiden sich vom Original:

1. Importierte die Funktionen fetchMovie und updateMovie aus @/app/services/api.service und verwendete sie jeweils im useEffect Hook und in der Funktion handleSubmit .
2. Die Methode posters.find() wurde durch die Funktion fetchMovie ersetzt, um Filmdaten abzurufen.
3. Die Funktion handleSubmit wurde aktualisiert, um die Funktion updateMovie mit den aktualisierten Filmdetails aufzurufen.
4. Fehlerbehandlung zum Funktionsaufruf updateMovie in der Funktion handleSubmit “ hinzugefügt.

Diese Änderungen ermöglichen unserer Anwendung die Interaktion mit unseren API-Endpunkten, um Filmdaten abzurufen und zu aktualisieren, während der ursprüngliche Code auf unserem lokalen posters Array basierte.

Startseite

Diese Homepage rendert die Bannerkomponente, eine Liste von Filmen (entweder aus einer API-Quelle oder einer Lade-Benutzeroberfläche) und Abonnementoptionen unter Verwendung von React und Next.js, um den Benutzern eine ansprechende und informative Zielseite bereitzustellen.

Aktualisieren Sie die Datei in /frontend/app/pages/page.tsx mit den folgenden Codes.

Die Änderungen, die wir an der Homepage vorgenommen haben, sind:

1. Funktion fetchMovies aus ./services/api.service importiert und im useEffect Hook verwendet, um Filmdaten von unserer API abzurufen.
2. Die lokalen posters wurden durch den Funktionsaufruf fetchMovies ersetzt, der Daten von unserer API abruft.
3. Das Schlüsselwort await wurde hinzugefügt, um auf die Einlösung des von fetchMovies zurückgegebenen Versprechens zu warten, bevor der movies festgelegt wird.

Diese Änderungen helfen unserer Anwendung, Filmdaten von unserer API abzurufen, anstatt sich auf lokale Daten zu verlassen, wodurch die Anwendung dynamischer und datengesteuerter wird.

Seite „Benutzerkonto“

Auf dieser Seite wird eine Liste der vom aktuell verbundenen Benutzer geposteten Filme angezeigt. Während die Daten abgerufen werden, wird ein Platzhalter für ein Ladeskelett angezeigt. Außerdem wird der Benutzer mithilfe von Wagmi und react-loading-skeleton aufgefordert, sein Konto zu verbinden (sofern er dies noch nicht getan hat).

Aktualisieren Sie die Datei in /frontend/app/pages/account/page.tsx mit den folgenden Codes.

Die an der Seite vorgenommenen Änderungen sind:

1. Funktion fetchMovies aus @/app/services/api.service importiert und im useEffect -Hook verwendet, um Filmdaten von unserer API abzurufen.
2. Die lokalen posters wurden durch den Funktionsaufruf fetchMovies ersetzt, der Daten von unserer API abruft.
3. Übergebene address als Argument an die Funktion fetchMovies , um benutzerspezifische Filmdaten abzurufen.
4. Die bedingte address vor dem Rendern der Filmliste wurde entfernt, da die Funktion fetchMovies diese Logik jetzt verarbeitet.
5. Die bedingte Anweisung zur Anzeige des Ladeskeletts wurde vereinfacht, da sie jetzt nur noch vom loaded Zustand abhängt.

Diese Änderungen rufen Filmdaten aus unserer API ab, die für den verbundenen Benutzer spezifisch sind, und zeigen während des Abrufens der Daten ein Ladeskelett an.

Seite mit Filmdetails

Auf dieser Seite werden die Details eines einzelnen Films angezeigt, darunter Name, Erscheinungsjahr, Altersfreigabe, Dauer, Genre und Hintergrundinformationen. Außerdem werden ein Videoplayer und verwandte Filme angezeigt. Außerdem bietet sie unter Verwendung von Next.js und Wagmi Optionen zum Bearbeiten oder Löschen des Films, wenn der Benutzer der Eigentümer ist.

Aktualisieren Sie die Datei in /frontend/app/pages/movies/[slug]/page.tsx mit den folgenden Codes.

Wir haben hier einige große Änderungen vorgenommen! Hier ist eine Zusammenfassung dessen, was wir getan haben:

1. Importierte die Funktionen deleteMovie , fetchMovie und fetchMovies aus @/app/services/api.service und verwendete sie zur Interaktion mit unseren API-Endpunkten.
2. Lokale Daten zum Abrufen von Filmdaten durch API-Aufrufe ersetzt.
3. Implementierte Funktion zum Löschen von Filmen mithilfe der Funktion deleteMovie .
4. toast.promise wurde verwendet, um beim Löschen eines Films eine Benachrichtigung anzuzeigen.
5. Die lokalen Daten des posters wurden entfernt und durch API-Aufrufe ersetzt.
6. Die Funktion handleSubmit wurde aktualisiert, um die Funktion deleteMovie aufzurufen und die Antwort zu verarbeiten.
7. Der useEffect Hook wurde aktualisiert, um die Funktionen fetchMovie und fetchMovies aufzurufen.

Diese Änderungen bewirken, dass unsere Anwendung mit unserer API interagiert, um Filmdaten abzurufen und zu löschen und dem Benutzer während des Löschvorgangs Benachrichtigungen anzuzeigen.

Dieser Teil des folgenden Videos zeigt Ihnen praxisnah, wie wir diese Seiten mit dem Endpunkt integriert haben. Bitte schauen Sie sich diesen Teil an, wenn Sie auf ein Problem stoßen. Achten Sie nur darauf, beim Zeitstempel 04:57:41 anzuhalten.

Anwendungskomponenten

Lassen Sie uns den Zweck jeder Komponente in unserer Anwendung besprechen. Wir werden alle Komponenten aktualisieren, die geändert werden müssen.

Bannerkomponente

Diese Komponente zeigt ein rotierendes Hintergrundbild mit Filmbannern an und wechselt alle 5 Sekunden durch eine Reihe von Filmbildern, wodurch ein einfacher und automatischer Diashow-Effekt entsteht. Dieser Komponentencode kann unter /frontend/app/components/home/Banner.tsx ausgewertet werden.

Poster-Komponente

Diese Komponente zeigt ein reaktionsfähiges und interaktives Karussell mit Filmplakaten unter Verwendung der Swiper-Bibliothek mit Funktionen wie Autoplay, Seitennummerierung und Navigation. Es präsentiert eine Liste von Filmen, die als Requisite übergeben werden, mit einem dynamischen Layout, das sich an verschiedene Bildschirmgrößen anpasst. Dieser Komponentencode kann unter /frontend/app/components/home/Posters.tsx ausgewertet werden.

Poster-UI-Komponente

Diese Komponente zeigt ein Platzhalter-Skelettlayout für einen Abschnitt mit Filmplakaten an und verwendet dabei die Bibliothek „react-loading-skeleton“. Sie zeigt eine dynamische Anzahl von Skelettplakaten basierend auf der „Poster“-Eigenschaft mit einem responsiven Design, das sich an verschiedene Bildschirmgrößen anpasst und einen Ladezustand anzeigt, bis die eigentlichen Plakatdaten abgerufen und angezeigt werden. Dieser Komponentencode kann unter /frontend/app/components/home/PosterUI.tsx ausgewertet werden.

Abonnementkomponente

Diese Komponente zeigt einen Abschnitt mit Abonnementplänen an, in dem verschiedene Dummy-Pläne mit ihren Details, Preisen und Vorteilen präsentiert werden. Benutzer können einen Plan auswählen, der ihren Anforderungen entspricht. Dabei werden ein ansprechendes Rasterlayout und interaktive Hover-Effekte verwendet, um das Benutzererlebnis zu verbessern. Dieser Komponentencode kann unter /frontend/app/components/home/Subscription.tsx ausgewertet werden.

Header-Komponente

Diese Komponente rendert eine feste Navigationsleiste oben auf der Seite mit einem Logo, einem Navigationsmenü mit Links zu verschiedenen Abschnitten, einem Menü-Umschaltknopf für responsives Design und einem Anmeldeknopf und sorgt so für einen konsistenten und zugänglichen Kopfbereich in der gesamten Anwendung. Dieser Komponentencode kann unter /frontend/app/components/layout/Header.tsx ausgewertet werden.

Fußzeilenkomponente

Diese Komponente rendert einen Fußzeilenabschnitt am unteren Seitenrand, der das Logo der Anwendung, eine kurze Beschreibung, Navigationslinks, Kontaktinformationen und einen Hinweis auf die dezentrale Speicherlösung der Sia Foundation enthält und einen klaren und übersichtlichen Fußzeilenabschnitt mit relevanten Informationen und Links bietet. Dieser Komponentencode kann unter /frontend/app/components/layout/Footer.tsx ausgewertet werden.

Menükomponente

Diese Komponente rendert einen reaktionsfähigen Menü-Umschaltknopf, der beim Anklicken ein Dropdown-Menü mit Navigationslinks öffnet oder schließt. So können Benutzer auf kleineren Bildschirmen auf verschiedene Abschnitte der Anwendung zugreifen, während das Menü auf größeren Bildschirmen ausgeblendet wird, auf denen die Navigationslinks bereits sichtbar sind. Dieser Komponentencode kann unter /frontend/app/components/shared/Menu.tsx ausgewertet werden.

Filmkartenkomponente

Diese Komponente zeigt das Poster eines einzelnen Films mit einem Hover-Effekt an und zeigt zusätzliche Informationen wie den Namen des Films, das Erscheinungsjahr und eine Hintergrundzusammenfassung. Gleichzeitig dient sie als Link zur Detailseite des Films. Sie verwendet ein ansprechendes Design und animierte Übergänge, um das Benutzererlebnis zu verbessern. Dieser Komponentencode kann unter /frontend/app/components/shared/MovieCard.tsx ausgewertet werden.

Hochgeladene Komponente

Diese Komponente zeigt eine Vorschau einer hochgeladenen Datei, entweder eines Bildes oder eines Videos, mit einem Fortschrittsbalken und einer Schaltfläche zum Entfernen an, sodass Benutzer die hochgeladene Datei überprüfen und löschen können. Gleichzeitig bietet sie eine optisch ansprechende und interaktive Benutzeroberfläche mit Animationen und Hover-Effekten. Dieser Komponentencode kann unter /frontend/app/components/shared/Uploaded.tsx ausgewertet werden.

Uploader-Komponente

Diese Komponente bietet eine Benutzeroberfläche zum Hochladen von Dateien, insbesondere Videos oder Postern, mit Funktionen wie Drag & Drop, Dateitypvalidierung, Größenbeschränkungen, Upload-Fortschrittsverfolgung und Erfolgs-/Fehlerbenachrichtigungen. Dabei wird eine Kombination aus React-Statusverwaltung, Ereignisbehandlung und API-Integration zur Abwicklung des Upload-Vorgangs verwendet.

Aktualisieren Sie die Datei in /frontend/app/components/shared/uploader.tsx mit den folgenden Codes.

An dieser Komponente wurden folgende Änderungen vorgenommen:

1. Funktion zum Hochladen von Dateien : Im ursprünglichen Code war die eigentliche Funktion zum Hochladen von Dateien nicht implementiert. Es wurde nur eine Erfolgsmeldung angezeigt, ohne dass die Datei hochgeladen wurde. Dieser aktualisierte Code enthält die Funktion uploadFile von api.service , die den Dateiupload handhabt.
2. Fortschrittsverfolgung : Der aktualisierte Code verfolgt den Upload-Fortschritt und zeigt ihn auf der Benutzeroberfläche an.
3. Fehlerbehandlung : Der aktualisierte Code umfasst eine Fehlerbehandlung für den Datei-Upload-Prozess.
4. Dateitypvalidierung : Der aktualisierte Code verwendet eine robustere Dateitypvalidierung mithilfe eines regulären Ausdrucks.
5. Code-Organisation : Der aktualisierte Code ist besser organisiert und verfügt über separate Funktionen zur Handhabung verschiedener Aufgaben, was das Lesen und Warten erleichtert.
6. UI-Updates : Der aktualisierte Code enthält einige UI-Updates, z. B. die Anzeige des Upload-Fortschritts und eine Abbrechen-Schaltfläche während des Uploads.

Dieser aktualisierte Code ist vollständiger und robuster und verfügt über eine echte Datei-Upload-Funktion, Fortschrittsverfolgung, Fehlerbehandlung und bessere Code-Organisation.

Im folgenden Video wird die Funktion der einzelnen Komponenten genauer erläutert. Sehen Sie es sich zu Ihrem eigenen Verständnis an.

Und das war’s, Leute. Wir haben dieses Projekt abgeschlossen. Der letzte Schritt besteht darin, das Projekt im Browser zu starten. Führen Sie $ yarn build && yarn start um das Projekt live im Browser anzuzeigen.

Wenn Sie auf Probleme stoßen, finden Sie in den folgenden Ressourcen Hilfe zur Fehlerbehebung. Bis zum nächsten Mal, alles Gute!

• 🏠 Sia-Website
• 🔥 Sia Renterd
• 👨‍💻 Sia Renterd API
• 🚀 Sia Discord-Kanal
• 💡 YouTube-Video-Wiedergabeliste

Über den Autor

Ich bin Web3-Entwickler und Gründer von Dapp Mentors , einem Unternehmen, das Unternehmen und Einzelpersonen beim Erstellen und Starten dezentraler Anwendungen unterstützt. Ich habe über 8 Jahre Erfahrung in der Softwarebranche und bin begeistert davon, Blockchain-Technologie zum Erstellen neuer und innovativer Anwendungen zu verwenden. Ich betreibe einen YouTube-Kanal namens Dapp Mentors, auf dem ich Tutorials und Tipps zur Web3-Entwicklung teile, und poste regelmäßig Artikel über die neuesten Trends im Blockchain-Bereich online.