Einführung Das Internet entwickelt sich weiter und Web3-Technologien revolutionieren traditionelle Branchen, darunter auch Video-Streaming. Plattformen wie 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 die Datenspeicherung und bietet einen datenschutzorientierten und benutzerzentrierten Ansatz. Odysee Sia 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. Begleiten Sie uns auf der Reise zum Erstellen einer hochmodernen Web3-Film-Streaming-dApp 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 um das Projekt in Aktion zu sehen, und für weitere innovative Inhalte wie diesen! Sehen Sie sich das Demo-Video unten an, abonnieren Sie unseren Kanal https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true 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: – Renterd Zen-Testnetz, Paketinstallationen und Umgebungsvariablen. Teil 1: Projekteinrichtung – Erstellen des Backend-Dienstes Teil 2: Backend-Entwicklung – Integration des Frontends mit dem Backend-Dienst. Teil 3: Frontend-Entwicklung Wenn Sie lieber den gesamten Entwicklungsprozess verfolgen möchten, . In der Playlist ist alles, was hier geschrieben steht und mehr, in den Videos festgehalten. empfehle ich Ihnen, sich diese Playlist anzusehen 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 Datei im Stammverzeichnis dieses Projekts und wenden Sie die folgenden Schlüssel an: .env 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. https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true 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 falls Sie dies noch nicht getan haben. Alternativ können Sie, wenn möglich, eine kostenlose Online-Plattform wie oder einen VPS verwenden, um eine Docker-Instanz auszuführen. Andernfalls installieren Sie es auf Ihrem lokalen Computer. wir es von der offiziellen Website herunterladen, Gitpod 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: . Führen Sie diesen Befehl aus, wenn Sie Ihre Docker-Instanz herunterfahren möchten (aber nicht jetzt). $ docker compose -f "docker-compose.yml" down Wenn Sie die obigen Anweisungen korrekt ausgeführt haben, sollten Sie die folgende Benutzeroberfläche sehen, wenn Sie Ihren Browser unter aufrufen. http://localhost:9880 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true Das obige Video beginnt bei Minute Bitte halten Sie bei Minute an. Dieser Teil führt Sie visuell durch den Konfigurationsprozess von Renterd. 6:41 20:01 Beachten Sie, dass der Blockchain-Synchronisierungsprozess zusammen mit dem Host-Matching bis zu dauert. Sie müssen also während des gesamten Vorgangs Geduld haben. 25 min Bitte erstellen Sie auf Renterd einen neuen Bucket mit dem Namen , 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. vidtv 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. Führen Sie die folgenden Anweisungen aus, um die Backend-Servicepakete zu installieren und für die weitere Entwicklung vorzubereiten. Einrichten des Backend-Projekts. 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 aus, um das Backend zu starten und zu bestätigen, dass es keine Fehler enthält. $ yarn build && yarn start 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. Frontend-Projekt-Setup 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 , um Ihre Projekt-ID zu erhalten. Nachdem Sie die Projekt-ID der Umgebungsvariable zugewiesen haben, führen Sie aus, um das Backend zu starten und zu bestätigen, dass es fehlerfrei ist. Walletconnect $ yarn build && yarn start Wenn Sie den Browser unter aufrufen, sehen Sie nun die folgende Benutzeroberfläche. http://localhost:3000 Herzlichen Glückwunsch zum Erreichen dieses Meilensteins! um die Entwicklung des Backend-Dienstes abzuschließen. Nächster Schritt Fahren Sie mit Teil 2 fort, Der Backend Service – Teil 2 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. Willkommen zurück! Wir haben einen Startercode für das Backend bereitgestellt, der derzeit eine Willkommensnachricht anzeigt, wenn Sie den Server starten und in Ihrem Browser aufrufen. Lassen Sie uns auf dieser Grundlage aufbauen. http://localhost:9000 Diese Codes liegen aktuell im Quellverzeichnis des Backends. Ich erkläre sie euch kurz. Dieser Ordner, der vollständig an adressiert werden kann, enthält zwei wichtige Dateien: eine HTTP-Ausnahmehandlerfunktion und eine Schnittstelle zur Handhabung von Datei-Upload-Informationen. Dienstprogrammdateien backend/src/utils Dieser Code definiert eine benutzerdefinierte -Klasse, die die integrierte JavaScript- erweitert und die Erstellung von Fehlerinstanzen mit bestimmten HTTP-Statuscodes und -Meldungen ermöglicht. HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 Dieser Code definiert eine Schnittstelle „ , 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. FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e Und dann haben wir im Stammordner diese Datei , 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. backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f Nachdem wir nun die Schlüsseldateien abgedeckt haben, erstellen wir zwei neue Dateien in einem , von denen jede einen bestimmten Zweck in unserer Anwendung erfüllt. services Dienstdateien Erstellen Sie im Ordner an dieser Stelle einen neuen Ordner mit dem Namen „ . Hier erstellen wir zwei Dienste: backend/src services : Verarbeitet Datei-Uploads, Downloads, Streaming und Caching und kommuniziert mit dem Renterd-Dienst. Sia-Dienst : Verwaltet zwischengespeicherte Dateien und entfernt sie automatisch täglich nach 7 Tagen um Mitternacht. Hintergrunddienst Der Sia-Dienst Erstellen wir eine Datei mit dem Namen im Ordner und befolgen Sie die folgenden Schritte, um diesen Dienst zu formulieren. sia.service.ts backend/src/services https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true Dieser Code definiert eine 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. SiaService Um Dateien zum Sia-Netzwerk hochzuladen, müssen wir diese drei Methoden zur Klasse hinzufügen, zwei sind privat und eine öffentlich. Hochladen von Dateien zu Sia Renterd https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true Dieser Code definiert eine private Methode , 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. generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true Der obige Code definiert eine private Methode , 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. uploadToSiaService 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. https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true Lassen Sie uns nun die öffentliche Methode einbinden, die wir später als Endpunkt in unserer Anwendung verfügbar machen. https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true Dieser Code definiert eine öffentliche Methode , 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. uploadFile Um Dateien zum Sia-Netzwerk herunterzuladen, müssen wir diese beiden Methoden zur Klasse hinzufügen, eine ist privat und die andere öffentlich. Herunterladen von Dateien zum Sia-Netzwerk: https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true Dieser Code definiert eine private Methode , 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. downloadFromSiaService Sorgen Sie dafür, dass diese response_files im Backend-Verzeichnis verfügbar sind, da sonst beim Aufruf der Datei ein Fehler auftritt. Erstellen Sie im -Verzeichnis einen weiteren Ordner mit dem Namen und kopieren Sie die folgenden Bilder hinein. 404.png backend response_files Perfekt, jetzt vervollständigen wir diesen Dateidownloaddienst. Fügen Sie auch die folgende Methode in der Klasse hinzu. SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true Dieser Code definiert eine öffentliche Methode , die die private Methode aufruft, um eine Datei vom Sia Renterd abzurufen, und den lesbaren Stream der abgerufenen Datei zurückgibt. downloadFile downloadFromSiaService 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 und aktualisieren Sie ihren Inhalt mit diesen Codes. backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true 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 anzuhalten. 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true 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 ist. der Datenlatenz Der Hintergrunddienst Gehen Sie zum Ordner , erstellen Sie eine Datei namens und fügen Sie diese Codesequenzen hinzu. backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true Dieser Code definiert eine Klasse, die ein Cache-Verzeichnis einrichtet und tägliche Jobs mithilfe der 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. BackgroundService node-cron Fügen Sie diese Methode der Klasse hinzu. Löschen alter Dateien. BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true Dieser Code definiert eine Methode namens „ , 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. deleteOldFiles Schreiben wir nun eine Funktion, die das Node-Cron-Paket verwendet, um den Zeitpunkt der Dateilöschung zu planen. https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true Dieser Code richtet einen täglichen Cron-Job ein, um die Methode jeden Tag um Mitternacht (00:00) auszuführen und so eine automatische Dateibereinigung durchzuführen. deleteOldFiles Wir müssen auch die Konstruktorfunktion aktualisieren, um die täglichen Jobs bei der Instanziierung der Hintergrunddienstklasse zu planen. https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true Perfekt, zum Schluss fügen wir diesen Hintergrundvorgang als Teil des Serverprozesses bei der Initialisierung hinzu. Gehen Sie zur Datei und aktualisieren Sie die App-Listener-Methode, um die Hintergrunddienstdatei zu importieren. backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true Sie sollten den Backend-Dienstbefehl mit erneut ausführen und einen Terminalausdruck wie den im Bild unten anzeigen. $ yarn build && yarn start 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 anzuhalten. 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true Herzlichen Glückwunsch, Sie sind jetzt bereit für den letzten Teil dieses Tutorials, . Nächster Schritt 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 entsteht. Fügen wir nun die folgenden Codes hinzu. /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true 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 . Wir müssen auch eine Kontext-API erstellen, um den Authentifizierungsstatus zu verfolgen. config Als nächstes erstellen Sie einen neuen Ordner namens „context“, noch im Frontend-Verzeichnis, und fügen eine Indexdatei hinzu, sodass der Pfad entsteht. Fügen Sie die folgenden Codes hinzu. Die Context-API /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true 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. : Lassen Sie uns unser Anwendungslayout aktualisieren, um die oben genannten Konfigurationen einzuschließen. Gehen Sie zu und ersetzen Sie die Codes durch die folgenden. Layout aktualisieren /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true 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. Jetzt müssen wir die Anmeldeschaltflächen in den Komponenten und aktivieren und ihre Codes mit den folgenden Informationen aktualisieren. Die Anmeldeschaltfläche /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true 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 anzuhalten. 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true 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. https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true 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. 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. Datenbankkonfigurationsskript Erstellen Sie den Dateipfad und fügen Sie die folgenden Codes hinzu. /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true Dieser Code richtet eine SQLite-Datenbankverbindung ein und definiert zwei API-Funktionen, und , 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. apiGet apiPost Wir müssen sowohl eine Datenbank-Flatfile als auch eine Tabelle erstellen, um alle unsere Inhalte aufzunehmen. Erstellen Sie den Dateipfad und fügen Sie die folgenden Codes hinzu. Datenbankmigrationsskript /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true 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 zeigt. /frontend $ cd frontend $ npx esrun app/api/migrations.ts Es ist zu beachten, dass dieser Vorgang auch eine Datenbank-Flatfile namens im Stammverzeichnis des Frontend-Verzeichnisses erstellt. Wir haben diesen Befehl auch zum Skript package.json hinzugefügt, daher sollte die Ausführung im Frontend-Verzeichnis genauso funktionieren. movies.db $ yarn migrate Sehen Sie sich zur visuellen Unterstützung das Video unten an. Halten Sie es einfach bei der Marke an. 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true 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. 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 und fügen Sie die folgenden Codes hinzu. Endpunkt /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true 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. : 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 und fügen Sie die folgenden Codes hinzu. Endpunkt zum Aktualisieren von Filmen /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true 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“. Um einen Film zu löschen, sind die Benutzer-ID und der Slug des Films erforderlich. Erstellen Sie den Dateipfad und fügen Sie die folgenden Codes hinzu. Endpunkt zum Löschen von Filmen: /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true 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“. 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 und fügen Sie die folgenden Codes hinzu. Endpunkt „Alle Filme“: /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true 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. Um einen einzelnen Film abzurufen, sind die erforderlichen Daten der Slug eines Films. Erstellen Sie den Dateipfad und fügen Sie die folgenden Codes hinzu. Endpunkt für einzelnen Film: /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true 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 anzuhalten. 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true 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 -Verzeichnis erstellt haben. api Erstellen Sie den Dateipfad und fügen Sie die folgenden Codes hinzu. /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true 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 mit den folgenden Codes. /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true Die in diesem Code im Vergleich zum Original vorgenommenen Änderungen sind: Die Funktion wurde aus importiert und in der Funktion verwendet, um einen neuen Film zu erstellen. createMovie api.service handleSubmit Dem Funktionsaufruf wurde der Parameter hinzugefügt, der die Adresse des Benutzers vom -Hook übergibt. createMovie userId useAccount Die Funktion wurde aktualisiert, um für die Verarbeitung des von zurückgegebenen Versprechens zu verwenden. handleSubmit toast.promise createMovie Fehlerbehandlung zum Funktionsaufruf in der Funktion “ hinzugefügt. createMovie handleSubmit 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 mit den folgenden Codes. /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true Die am Code vorgenommenen Verbesserungen unterscheiden sich vom Original: Importierte die Funktionen und aus und verwendete sie jeweils im Hook und in der Funktion . fetchMovie updateMovie @/app/services/api.service useEffect handleSubmit Die Methode wurde durch die Funktion ersetzt, um Filmdaten abzurufen. posters.find() fetchMovie Die Funktion wurde aktualisiert, um die Funktion mit den aktualisierten Filmdetails aufzurufen. handleSubmit updateMovie Fehlerbehandlung zum Funktionsaufruf in der Funktion “ hinzugefügt. updateMovie handleSubmit 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 Array basierte. posters 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 mit den folgenden Codes. /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true Die Änderungen, die wir an der Homepage vorgenommen haben, sind: Funktion aus importiert und im Hook verwendet, um Filmdaten von unserer API abzurufen. fetchMovies ./services/api.service useEffect Die lokalen wurden durch den Funktionsaufruf ersetzt, der Daten von unserer API abruft. posters fetchMovies Das Schlüsselwort wurde hinzugefügt, um auf die Einlösung des von zurückgegebenen Versprechens zu warten, bevor der festgelegt wird. await fetchMovies movies 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 mit den folgenden Codes. /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true Die an der Seite vorgenommenen Änderungen sind: Funktion aus importiert und im -Hook verwendet, um Filmdaten von unserer API abzurufen. fetchMovies @/app/services/api.service useEffect Die lokalen wurden durch den Funktionsaufruf ersetzt, der Daten von unserer API abruft. posters fetchMovies Übergebene als Argument an die Funktion , um benutzerspezifische Filmdaten abzurufen. address fetchMovies Die bedingte vor dem Rendern der Filmliste wurde entfernt, da die Funktion diese Logik jetzt verarbeitet. address fetchMovies Die bedingte Anweisung zur Anzeige des Ladeskeletts wurde vereinfacht, da sie jetzt nur noch vom Zustand abhängt. loaded 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 mit den folgenden Codes. /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true Wir haben hier einige große Änderungen vorgenommen! Hier ist eine Zusammenfassung dessen, was wir getan haben: Importierte die Funktionen , und aus und verwendete sie zur Interaktion mit unseren API-Endpunkten. deleteMovie fetchMovie fetchMovies @/app/services/api.service Lokale Daten zum Abrufen von Filmdaten durch API-Aufrufe ersetzt. Implementierte Funktion zum Löschen von Filmen mithilfe der Funktion . deleteMovie wurde verwendet, um beim Löschen eines Films eine Benachrichtigung anzuzeigen. toast.promise Die lokalen Daten des wurden entfernt und durch API-Aufrufe ersetzt. posters Die Funktion wurde aktualisiert, um die Funktion aufzurufen und die Antwort zu verarbeiten. handleSubmit deleteMovie Der Hook wurde aktualisiert, um die Funktionen und aufzurufen. useEffect fetchMovie fetchMovies 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 anzuhalten. 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true 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 ausgewertet werden. /frontend/app/components/home/Banner.tsx 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 ausgewertet werden. /frontend/app/components/home/Posters.tsx 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 ausgewertet werden. /frontend/app/components/home/PosterUI.tsx 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 ausgewertet werden. /frontend/app/components/home/Subscription.tsx 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 ausgewertet werden. /frontend/app/components/layout/Header.tsx 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 ausgewertet werden. /frontend/app/components/layout/Footer.tsx 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 ausgewertet werden. /frontend/app/components/shared/Menu.tsx 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 ausgewertet werden. /frontend/app/components/shared/MovieCard.tsx 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 ausgewertet werden. /frontend/app/components/shared/Uploaded.tsx 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 mit den folgenden Codes. /frontend/app/components/shared/uploader.tsx https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true An dieser Komponente wurden folgende Änderungen vorgenommen: : 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 von , die den Dateiupload handhabt. Funktion zum Hochladen von Dateien uploadFile api.service : Der aktualisierte Code verfolgt den Upload-Fortschritt und zeigt ihn auf der Benutzeroberfläche an. Fortschrittsverfolgung : Der aktualisierte Code umfasst eine Fehlerbehandlung für den Datei-Upload-Prozess. Fehlerbehandlung : Der aktualisierte Code verwendet eine robustere Dateitypvalidierung mithilfe eines regulären Ausdrucks. Dateitypvalidierung : Der aktualisierte Code ist besser organisiert und verfügt über separate Funktionen zur Handhabung verschiedener Aufgaben, was das Lesen und Warten erleichtert. Code-Organisation : Der aktualisierte Code enthält einige UI-Updates, z. B. die Anzeige des Upload-Fortschritts und eine Abbrechen-Schaltfläche während des Uploads. UI-Updates 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true Und das war’s, Leute. Wir haben dieses Projekt abgeschlossen. Der letzte Schritt besteht darin, das Projekt im Browser zu starten. Führen Sie um das Projekt live im Browser anzuzeigen. $ yarn build && yarn start 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 , 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 auf dem ich Tutorials und Tipps zur Web3-Entwicklung teile, und poste regelmäßig Artikel über die neuesten Trends im Blockchain-Bereich online. Dapp Mentors YouTube-Kanal namens Dapp Mentors,
