1,290 Lesungen

So bauen Sie eine dezentrale Wohltätigkeitsplattform mit Next.js, TypeScript und Solidity auf

von Darlington Gospel 8m2024/01/16

Zu lang; Lesen

Willkommen zu diesem umfassenden Leitfaden, in dem wir eine dezentrale Web3-Wohltätigkeitsplattform mit Next.js, Solidity und TypeScript erstellen. Am Ende dieses Tutorials werden Sie Folgendes genau verstehen:

featured image - So bauen Sie eine dezentrale Wohltätigkeitsplattform mit Next.js, TypeScript und Solidity auf

Was Sie erstellen werden, sehen Sie sich die Live-Demo im Bitfinity-Testnetzwerk und im Git-Repo an.

Einführung

Erstellen dynamischer Schnittstellen mit Next.js
Erstellen Sie intelligente Ethereum-Verträge mit Solidity
Integrieren Sie die statische Typprüfung mithilfe von TypeScript
Bereitstellung und Interaktion mit Ihren Smart Contracts
Verständnis der Grundlagen von Blockchain-basierten Wohltätigkeitsplattformen

Als Bonus für die Teilnahme an diesem Tutorial können Sie ganz einfach ein Exemplar unseres prestigeträchtigen Buches „Wie man ein gefragter Soliditätsentwickler wird“ gewinnen. Dieses Angebot ist für die ersten 300 Personen kostenlos. Anweisungen zum Gewinnen finden Sie im kurzen Video unten.

Voraussetzungen

Sie müssen die folgenden Tools installiert haben, um mit mir zusammen zu bauen:

Node.js
Garn
Git Bash
MetaMask
Next.js
Solidität
Redux-Toolkit
Rückenwind-CSS

Um MetaMask für dieses Tutorial einzurichten, schauen Sie sich bitte das folgende Anleitungsvideo an:

Sobald Sie die Einrichtung abgeschlossen haben, haben Sie Anspruch auf ein kostenloses Exemplar unseres Buchs. Um Ihr Buch anzufordern, füllen Sie bitte das Formular aus, um Ihren Arbeitsnachweis einzureichen .

Sehen Sie sich die folgenden Lehrvideos an, um bis zu 3 Monate lang kostenlose Premium-Kurse zu erhalten

Dapp Mentors Academy, darunter:

Beginnen Sie noch heute Ihre Reise mit Bitfinity. Erleben Sie einen schnellen, einfachen und problemlosen Entwicklungsprozess, während Sie Ihre erste dApp zur Spendenverfolgung für wohltätige Zwecke erstellen. Stellen Sie Ihre Smart Contracts im Bitfinity-Netzwerk bereit und erzielen Sie einen positiven Einfluss.

Nachdem dies gesagt ist, beginnen wir mit dem Tutorial und richten unser Projekt ein.

Aufstellen

Wir beginnen mit dem Klonen eines vorbereiteten Frontend-Repositorys und dem Einrichten der Umgebungsvariablen. Führen Sie die folgenden Befehle aus:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

Erstellen Sie als Nächstes eine .env Datei im Stammverzeichnis des Projekts und fügen Sie die folgenden Schlüssel ein:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

Ersetzen Sie <YOUR_ALCHEMY_PROJECT_ID> und <WALLET_CONNECT_PROJECT_ID> durch Ihre jeweiligen Projekt-IDs.

YOUR_ALCHEMY_PROJECT_ID : Schlüssel hier abrufen WALLET_CONNECT_PROJECT_ID : Schlüssel hier abrufen

Führen Sie abschließend yarn dev aus, um das Projekt zu starten.

Unser Frontend für dieses Projekt ist solide und bereit für eine Smart-Contract-Integration, aber wir müssen unsere Anwendung reduxifizieren, um einen gemeinsamen Datenraum zu ermöglichen.

Aufbau des Redux Stores

Das obige Bild stellt die Struktur unseres Redux-Shops dar. Es wird einfach sein, da wir kein übermäßig komplexes Projekt erstellen.

Wir richten Redux ein, um den globalen Status unserer Anwendung zu verwalten. Folge diesen Schritten:

Erstellen Sie einen store -Ordner im Projektstammverzeichnis.
Erstellen Sie im store zwei Ordner: actions und states .
Erstellen Sie innerhalb von states eine Datei globalStates.ts .

Erstellen Sie in actions eine Datei globalActions.ts .

Erstellen Sie eine globalSlices.ts Datei im store -Ordner.

Erstellen Sie eine index.ts Datei im store -Ordner.

Aktualisieren Sie die Datei pages/_app.ts mit dem Redux-Anbieter.

Unsere Anwendung wurde mit dem Redux-Toolkit verpackt und wir werden Redux bei der Integration des Backends in das Frontend erneut verwenden.

Intelligente Vertragsentwicklung

Als Nächstes entwickeln wir den Smart Contract für unsere Plattform:

Erstellen Sie einen contracts im Projektstammverzeichnis.
Erstellen Sie innerhalb contracts eine DappFund.sol Datei und fügen Sie den Vertragscode unten hinzu.

Der DappFund Vertrag erleichtert die Erstellung, Aktualisierung und Spende an Wohltätigkeitsorganisationen sowie Verwaltungsfunktionen wie die Änderung der Wohltätigkeitssteuer und das Verbot einer Wohltätigkeitsorganisation.

Hier ist eine Funktionsaufschlüsselung:

constructor() : Diese Funktion legt die anfängliche Wohltätigkeitssteuer fest, wenn der Vertrag bereitgestellt wird. Es wird nur einmal während der Vertragsbereitstellung ausgeführt.
createCharity() : Mit dieser Funktion können Benutzer eine neue Wohltätigkeitsorganisation erstellen. Es sind mehrere Parameter wie Name, Beschreibung, Bild, Profil und Betrag der Wohltätigkeitsorganisation erforderlich. Es prüft, ob diese Parameter gültig sind, erstellt dann eine neue CharityStruct und fügt sie der Zuordnung der charities hinzu.
updateCharity() : Mit dieser Funktion kann der Eigentümer einer Wohltätigkeitsorganisation ihre Details aktualisieren. Es prüft, ob die Wohltätigkeitsorganisation existiert und ob der Absender der Eigentümer der Wohltätigkeitsorganisation ist, bevor die Details der Wohltätigkeitsorganisation aktualisiert werden.
deleteCharity() : Mit dieser Funktion kann der Eigentümer einer Wohltätigkeitsorganisation diese als gelöscht markieren. Es prüft, ob die Wohltätigkeitsorganisation existiert und ob der Absender der Eigentümer der Wohltätigkeitsorganisation ist, bevor sie als gelöscht markiert wird.
toggleBan() : Mit dieser Funktion kann der Vertragseigentümer eine Wohltätigkeitsorganisation sperren oder die Sperrung aufheben. Es prüft, ob die Wohltätigkeitsorganisation existiert, bevor der Sperrstatus geändert wird.
donate() : Mit dieser Funktion können Benutzer an eine Wohltätigkeitsorganisation spenden. Es prüft, ob die Wohltätigkeitsorganisation existiert, nicht verboten ist und ihr Spendenziel noch nicht erreicht hat. Anschließend wird die Gesamtzahl der Spenden erhöht, eine neue SupportStruct erstellt und zur Zuordnung supportersOf hinzugefügt. Außerdem werden der gesammelte Betrag und die Spendenanzahl der Wohltätigkeitsorganisation aktualisiert.
changeTax() : Mit dieser Funktion kann der Vertragseigentümer die Wohltätigkeitssteuer ändern. Es prüft, ob der neue Steuersatz gültig ist, bevor die Steuer aktualisiert wird.
getCharity() : Mit dieser Funktion kann jeder die Details einer Wohltätigkeitsorganisation abrufen. Es gibt die CharityStruct zurück, die der angegebenen ID zugeordnet ist.
getCharities() : Mit dieser Funktion kann jeder die Details aller aktiven Wohltätigkeitsorganisationen abrufen. Es gibt ein Array von CharityStruct Objekten zurück.
getMyCharities() : Mit dieser Funktion kann ein Benutzer die Details aller seiner aktiven Wohltätigkeitsorganisationen abrufen. Es gibt ein Array von CharityStruct Objekten zurück.
getSupports() : Mit dieser Funktion kann jeder die Details aller Unterstützer einer bestimmten Wohltätigkeitsorganisation abrufen. Es gibt ein Array von SupportStruct Objekten zurück.
payTo() : Diese interne Funktion wird zum Überweisen von Geldern verwendet. Es sendet die angegebene Menge Ether an die angegebene Adresse.
currentTime() : Diese interne Funktion gibt die aktuelle Zeit in Sekunden seit der Unix-Epoche zurück. Es wird verwendet, um Spenden und Wohltätigkeitskreationen mit einem Zeitstempel zu versehen.

Vertragsbereitstellung und Seeding

Nun stellen wir unseren Smart Contract bereit und füllen ihn mit einigen Dummy-Daten:

Erstellen Sie einen scripts im Projektstammverzeichnis.
Erstellen Sie in scripts eine Datei deploy.js und eine seed.js -Datei und fügen Sie die folgenden Codes hinzu.

Skript bereitstellen

Seed-Skript

Führen Sie die folgenden Befehle aus, um den Vertrag bereitzustellen und ihn mit Daten zu füllen:

 yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

Wenn Sie das richtig gemacht haben, sollten Sie eine ähnliche Ausgabe wie die folgende sehen:

Einsatz

An diesem Punkt können wir mit der Integration unseres Smart Contracts in unser Frontend beginnen.

Frontend-Integration

Erstellen Sie zunächst einen services Ordner im Projektstammverzeichnis und erstellen Sie darin eine blockchain.tsx Datei. Diese Datei enthält Funktionen zur Interaktion mit unserem Smart Contract.

Der bereitgestellte Code ist eine TypeScript-Implementierung unseres Blockchain-Dienstes für die Interaktion mit unserem Smart Contract. Mit diesem Dienst können Benutzer Aktionen auf unserer Wohltätigkeitsplattform durchführen, einschließlich der Erstellung und Aktualisierung von Wohltätigkeitsorganisationen, Spenden und mehr.

Hier ist eine Funktionsaufschlüsselung:

getEthereumContracts() : Diese Funktion ruft die Ethereum-Vertragsinstanzen ab, mit denen der Dienst interagieren wird. Es prüft, ob der Benutzer über ein verbundenes Ethereum-Konto verfügt und nutzt dieses für die Interaktion mit dem Vertrag. Andernfalls wird eine zufällig erstellte Wallet verwendet.
getAdmin() : Diese Funktion gibt den Eigentümer des Vertrags zurück.
getCharities() , getMyCharities() , getCharity() : Diese Funktionen rufen alle Wohltätigkeitsorganisationen, die vom aktuellen Benutzer erstellten Wohltätigkeitsorganisationen bzw. eine bestimmte Wohltätigkeitsorganisation anhand ihrer ID ab.
getSupporters() : Diese Funktion ruft die Unterstützer einer bestimmten Wohltätigkeitsorganisation anhand ihrer ID ab.
createCharity() , updateCharity() : Mit diesen Funktionen kann ein Benutzer eine neue Wohltätigkeitsorganisation erstellen bzw. eine bestehende Wohltätigkeitsorganisation aktualisieren.
makeDonation() : Mit dieser Funktion kann ein Benutzer eine Spende an eine bestimmte Wohltätigkeitsorganisation tätigen.
deleteCharity() : Mit dieser Funktion kann der Besitzer einer Wohltätigkeitsorganisation diese löschen.
banCharity() : Mit dieser Funktion kann der Vertragseigentümer eine Wohltätigkeitsorganisation verbieten.
structuredCharities() , structuredSupporters() : Dies sind Hilfsfunktionen, die die zurückgegebenen Daten aus dem Vertrag in ein benutzerfreundlicheres Format strukturieren.

Aktualisieren Sie die Datei provider.tsx innerhalb services mithilfe der folgenden Codes, um das bitfinity Netzwerk einzuschließen.

Seite interagiert mit Smart Contract

Als nächstes verknüpfen wir die Funktionen im Blockchain-Dienst mit ihren jeweiligen Schnittstellen im Frontend:

Nr. 1: Alle Wohltätigkeitsorganisationen anzeigen Aktualisieren Sie pages/index.tsx , um Daten von der Funktion getCharities() abzurufen.

Beachten Sie, wie Redux zum Speichern von Blockchain-Daten verwendet wird, bevor sie auf dem Bildschirm angezeigt werden.

Nr. 2: Anzeigen der Wohltätigkeitsorganisationen des Benutzers Aktualisieren Sie die pages/projects.tsx , um den useEffect() -Hook zu verwenden, um die Wohltätigkeitsorganisationen des aktuellen Benutzers abzurufen.

Bitte beachten Sie die Verwendung des useEffect() -Hooks zum Abrufen der Wohltätigkeitsorganisationen des aktuellen Benutzers und wie Redux verwendet wird, um Daten aus der Blockchain über mehrere Komponenten hinweg zu verarbeiten und anzuzeigen. Dies wird ein sich wiederholendes Muster auf allen Seiten und Komponenten sein.

Nr. 3: Erstellen neuer Wohltätigkeitsorganisationen Aktualisieren Sie pages/donations/create.tsx , um die Funktion createCharity() für die Formularübermittlung zu verwenden.

Nr. 4: Anzeigen einzelner Wohltätigkeitsorganisationen. Aktualisieren Sie pages/donations/[id].tsx , um die Funktionen getServerSideProps() , getCharity() und getSupporters() zu verwenden, um Wohltätigkeitsorganisationen und Unterstützer nach ID abzurufen.

Nr. 5: Vorhandene Wohltätigkeitsorganisationen bearbeiten. Aktualisieren Sie pages/donations/edit/[id].tsx um die Funktion getCharity() zu verwenden, um Wohltätigkeitsorganisationen nach ID abzurufen und die Formularfelder auszufüllen.

Haben Sie gesehen, wie die Funktion getCharity() verwendet wurde, um Wohltätigkeitsorganisationen anhand der ID abzurufen, und wie sie auch zum Ausfüllen der Formularfelder verwendet wurde?

Komponenten mit Smart Contract

Lassen Sie uns wie auf den obigen Seiten die folgenden Komponenten aktualisieren, um mit dem Smart Contract zu interagieren:

Nr. 1: Handhabung von Charity-Verboten Aktualisieren Sie components/Ban.tsx , um die Funktion handleBanning() zum Aufrufen der Funktion banCharity() “ zu verwenden.

Nr. 2: Handhabung der Löschung von Wohltätigkeitsorganisationen. Aktualisieren Sie die Datei components/Delete.tsx , um die Funktionen handleDelete() und deleteCharity() zu verwenden, um eine Prozedur zum Aufheben der Liste von Wohltätigkeitsorganisationen auszuführen.

Nr. 3: Spenden an Wohltätigkeitsorganisationen Aktualisieren Sie die Datei components/Donor.tsx , um die Funktion handleSubmit() zu verwenden, um die Zahlung mithilfe der Funktion makeDonation() an den Smart Contract zu senden.

Andere Komponenten

Hier sind die restlichen Komponenten, die Sie aufgrund der Integration von Redux ebenfalls aktualisieren sollten.

Die NavBtn-Komponente Überprüfen und aktualisieren Sie die Komponente, die es Benutzern ermöglicht, Informationen zu Wohltätigkeitsorganisationen zu navigieren, zu löschen und zu bearbeiten. Nutzen Sie Redux, um beim Klicken das Löschmodal auszulösen.

Die Zahlungskomponente überprüft und aktualisiert die Implementierung von Redux, um die Modalitäten „Spenden“, „Unterstützer“ und „Verbot“ auszulösen, wenn auf die entsprechenden Schaltflächen geklickt wird.

Die Supports-Komponente überprüft und aktualisiert die Implementierung von Redux, um das Supporter-Modal zu schließen, wenn auf die Schaltfläche „Schließen“ geklickt wird.

Durch die Implementierung dieser Updates sind nun alle Komponenten und Seiten mit dem Smart Contract verbunden, was den Abschluss des Projekts markiert.

Wenn Ihr Nextjs- Server die ganze Zeit über ausgefallen war, können Sie ihn durch Ausführen von yarn dev wieder hochfahren.

Für weitere Informationen empfehlen wir, das vollständige Video dieses Builds auf unserem YouTube-Kanal anzusehen.

Abschluss

In diesem Tutorial haben wir eine dezentrale Wohltätigkeitsplattform mit Next.js, Solidity und TypeScript erstellt. Wir haben die Entwicklungsumgebung eingerichtet, den Redux-Store aufgebaut und den Smart Contract in der Blockchain bereitgestellt. Durch die Integration des Smart Contracts mit dem Frontend haben wir ein nahtloses Benutzererlebnis geschaffen.

Im Laufe des Tutorials haben Sie wertvolle Kenntnisse in der Erstellung von Web3-Anwendungen, der Erstellung intelligenter Verträge und der Einbindung der statischen Typprüfung erworben.

Jetzt können Sie Ihre eigene dezentrale Wohltätigkeitsplattform erstellen. Viel Spaß beim Programmieren und entfesseln Sie Ihre Innovation in der Welt von Web3!