Was Sie erstellen werden, sehen Sie sich die im Bitfinity-Testnetzwerk und im an. Live-Demo Git-Repo Einführung 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: 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 wird“ gewinnen. Dieses Angebot ist für die ersten kostenlos. Anweisungen zum Gewinnen finden Sie im kurzen Video unten. Soliditätsentwickler 300 Personen 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: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true 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 an, um bis zu 3 Monate lang kostenlose Premium-Kurse zu erhalten Lehrvideos Dapp Mentors Academy, darunter: Fullstack NFT-Minting-Kurs Fullstack NFT Marketplace-Kurs Fullstack-Blockchain-Kurs usw. 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 Datei im Stammverzeichnis des Projekts und fügen Sie die folgenden Schlüssel ein: .env 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 und durch Ihre jeweiligen Projekt-IDs. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Schlüssel hier abrufen WALLET_CONNECT_PROJECT_ID Schlüssel hier abrufen Führen Sie abschließend aus, um das Projekt zu starten. yarn dev 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 -Ordner im Projektstammverzeichnis. store Erstellen Sie im zwei Ordner: und . store actions states Erstellen Sie innerhalb von eine Datei . states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Erstellen Sie in eine Datei . actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Erstellen Sie eine Datei im -Ordner. globalSlices.ts store https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Erstellen Sie eine Datei im -Ordner. index.ts store https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Aktualisieren Sie die Datei mit dem Redux-Anbieter. pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true 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 im Projektstammverzeichnis. contracts Erstellen Sie innerhalb eine Datei und fügen Sie den Vertragscode unten hinzu. contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true Der Vertrag erleichtert die Erstellung, Aktualisierung und Spende an Wohltätigkeitsorganisationen sowie Verwaltungsfunktionen wie die Änderung der Wohltätigkeitssteuer und das Verbot einer Wohltätigkeitsorganisation. DappFund Hier ist eine Funktionsaufschlüsselung: : Diese Funktion legt die anfängliche Wohltätigkeitssteuer fest, wenn der Vertrag bereitgestellt wird. Es wird nur einmal während der Vertragsbereitstellung ausgeführt. constructor() : 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 und fügt sie der Zuordnung der hinzu. createCharity() CharityStruct charities : 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. updateCharity() : 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. deleteCharity() : 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. toggleBan() : 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 erstellt und zur Zuordnung hinzugefügt. Außerdem werden der gesammelte Betrag und die Spendenanzahl der Wohltätigkeitsorganisation aktualisiert. donate() SupportStruct supportersOf : 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. changeTax() : Mit dieser Funktion kann jeder die Details einer Wohltätigkeitsorganisation abrufen. Es gibt die zurück, die der angegebenen ID zugeordnet ist. getCharity() CharityStruct : Mit dieser Funktion kann jeder die Details aller aktiven Wohltätigkeitsorganisationen abrufen. Es gibt ein Array von Objekten zurück. getCharities() CharityStruct : Mit dieser Funktion kann ein Benutzer die Details aller seiner aktiven Wohltätigkeitsorganisationen abrufen. Es gibt ein Array von Objekten zurück. getMyCharities() CharityStruct : Mit dieser Funktion kann jeder die Details aller Unterstützer einer bestimmten Wohltätigkeitsorganisation abrufen. Es gibt ein Array von Objekten zurück. getSupports() SupportStruct : Diese interne Funktion wird zum Überweisen von Geldern verwendet. Es sendet die angegebene Menge Ether an die angegebene Adresse. payTo() : 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. currentTime() Vertragsbereitstellung und Seeding Nun stellen wir unseren Smart Contract bereit und füllen ihn mit einigen Dummy-Daten: Erstellen Sie einen im Projektstammverzeichnis. scripts Erstellen Sie in eine Datei und eine -Datei und fügen Sie die folgenden Codes hinzu. scripts deploy.js seed.js Skript bereitstellen https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Seed-Skript https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true 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: An diesem Punkt können wir mit der Integration unseres Smart Contracts in unser Frontend beginnen. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Frontend-Integration Erstellen Sie zunächst einen Ordner im Projektstammverzeichnis und erstellen Sie darin eine Datei. Diese Datei enthält Funktionen zur Interaktion mit unserem Smart Contract. services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true 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: : 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. getEthereumContracts() : Diese Funktion gibt den Eigentümer des Vertrags zurück. getAdmin() , , : Diese Funktionen rufen alle Wohltätigkeitsorganisationen, die vom aktuellen Benutzer erstellten Wohltätigkeitsorganisationen bzw. eine bestimmte Wohltätigkeitsorganisation anhand ihrer ID ab. getCharities() getMyCharities() getCharity() : Diese Funktion ruft die Unterstützer einer bestimmten Wohltätigkeitsorganisation anhand ihrer ID ab. getSupporters() , : Mit diesen Funktionen kann ein Benutzer eine neue Wohltätigkeitsorganisation erstellen bzw. eine bestehende Wohltätigkeitsorganisation aktualisieren. createCharity() updateCharity() : Mit dieser Funktion kann ein Benutzer eine Spende an eine bestimmte Wohltätigkeitsorganisation tätigen. makeDonation() : Mit dieser Funktion kann der Besitzer einer Wohltätigkeitsorganisation diese löschen. deleteCharity() : Mit dieser Funktion kann der Vertragseigentümer eine Wohltätigkeitsorganisation verbieten. banCharity() , : Dies sind Hilfsfunktionen, die die zurückgegebenen Daten aus dem Vertrag in ein benutzerfreundlicheres Format strukturieren. structuredCharities() structuredSupporters() Aktualisieren Sie die Datei innerhalb mithilfe der folgenden Codes, um das Netzwerk einzuschließen. provider.tsx services bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true Seite interagiert mit Smart Contract Als nächstes verknüpfen wir die Funktionen im Blockchain-Dienst mit ihren jeweiligen Schnittstellen im Frontend: Aktualisieren Sie , um Daten von der Funktion abzurufen. Nr. 1: Alle Wohltätigkeitsorganisationen anzeigen pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Beachten Sie, wie Redux zum Speichern von Blockchain-Daten verwendet wird, bevor sie auf dem Bildschirm angezeigt werden. Aktualisieren Sie die , um den -Hook zu verwenden, um die Wohltätigkeitsorganisationen des aktuellen Benutzers abzurufen. Nr. 2: Anzeigen der Wohltätigkeitsorganisationen des Benutzers pages/projects.tsx useEffect() https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Bitte beachten Sie die Verwendung des -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. useEffect() Aktualisieren Sie , um die Funktion für die Formularübermittlung zu verwenden. Nr. 3: Erstellen neuer Wohltätigkeitsorganisationen pages/donations/create.tsx createCharity() https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true Aktualisieren Sie , um die Funktionen , und zu verwenden, um Wohltätigkeitsorganisationen und Unterstützer nach ID abzurufen. Nr. 4: Anzeigen einzelner Wohltätigkeitsorganisationen. pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters() https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Aktualisieren Sie um die Funktion zu verwenden, um Wohltätigkeitsorganisationen nach ID abzurufen und die Formularfelder auszufüllen. Nr. 5: Vorhandene Wohltätigkeitsorganisationen bearbeiten. pages/donations/edit/[id].tsx getCharity() https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Haben Sie gesehen, wie die Funktion verwendet wurde, um Wohltätigkeitsorganisationen anhand der ID abzurufen, und wie sie auch zum Ausfüllen der Formularfelder verwendet wurde? getCharity() Komponenten mit Smart Contract Lassen Sie uns wie auf den obigen Seiten die folgenden Komponenten aktualisieren, um mit dem Smart Contract zu interagieren: Aktualisieren Sie , um die Funktion zum Aufrufen der Funktion “ zu verwenden. Nr. 1: Handhabung von Charity-Verboten components/Ban.tsx handleBanning() banCharity() https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true Aktualisieren Sie die Datei , um die Funktionen und zu verwenden, um eine Prozedur zum Aufheben der Liste von Wohltätigkeitsorganisationen auszuführen. Nr. 2: Handhabung der Löschung von Wohltätigkeitsorganisationen. components/Delete.tsx handleDelete() deleteCharity() https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Aktualisieren Sie die Datei , um die Funktion zu verwenden, um die Zahlung mithilfe der Funktion an den Smart Contract zu senden. Nr. 3: Spenden an Wohltätigkeitsorganisationen components/Donor.tsx handleSubmit() makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Andere Komponenten Hier sind die restlichen Komponenten, die Sie aufgrund der Integration von Redux ebenfalls aktualisieren sollten. Ü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 NavBtn-Komponente https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true ü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 Zahlungskomponente https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true überprüft und aktualisiert die Implementierung von Redux, um das Supporter-Modal zu schließen, wenn auf die Schaltfläche „Schließen“ geklickt wird. Die Supports-Komponente https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true Durch die Implementierung dieser Updates sind nun alle Komponenten und Seiten mit dem Smart Contract verbunden, was den Abschluss des Projekts markiert. Wenn Ihr Server die ganze Zeit über ausgefallen war, können Sie ihn durch Ausführen von wieder hochfahren. Nextjs- yarn dev Für weitere Informationen empfehlen wir, das vollständige Video dieses Builds auf unserem anzusehen. YouTube-Kanal 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!
