Comment créer une plateforme caritative décentralisée avec Next.js, TypeScript et Solidity

Ce que vous allez construire, consultez la démo en direct sur le réseau de test Bitfinity et le dépôt git .

Introduction

Bienvenue dans ce guide complet dans lequel nous allons créer une plate-forme caritative décentralisée Web3 à l'aide de Next.js, Solidity et TypeScript. À la fin de ce didacticiel, vous aurez une compréhension claire de :

• Construire des interfaces dynamiques avec Next.js
• Créer des contrats intelligents Ethereum avec Solidity
• Intégration de la vérification de type statique à l'aide de TypeScript
• Déployer et interagir avec vos contrats intelligents
• Comprendre les principes fondamentaux des plateformes caritatives basées sur la blockchain

En prime pour avoir participé à ce didacticiel, vous pouvez facilement gagner un exemplaire de notre prestigieux livre pour devenir un développeur Solidity très demandé. Cette offre est gratuite pour les 300 premières personnes , pour savoir comment gagner, regardez la courte vidéo ci-dessous.

Conditions préalables

Vous aurez besoin des outils suivants installés pour construire avec moi :

• Noeud.js
• Fil
• Git-Bash
• MétaMasque
• Suivant.js
• Solidité
• Boîte à outils Redux
• CSS vent arrière

Pour configurer MetaMask pour ce didacticiel, veuillez regarder la vidéo d'instructions ci-dessous :

Une fois la configuration terminée, vous êtes éligible pour recevoir un exemplaire gratuit de notre livre. Pour réclamer votre livre, veuillez remplir le formulaire pour soumettre votre preuve de travail .

Regardez les vidéos pédagogiques suivantes pour recevoir jusqu'à 3 mois de cours premium gratuits sur

Dapp Mentors Academy, comprenant :

• Cours de frappe Fullstack NFT
• Cours Fullstack NFT Marketplace
• Cours Fullstack Blockchain
• etc.

Commencez votre voyage avec Bitfinity dès aujourd'hui. Découvrez un processus de développement rapide, simple et sans tracas lorsque vous créez votre première dApp de suivi des dons caritatifs. Déployez vos contrats intelligents sur le réseau Bitfinity et ayez un impact positif.

Cela dit, passons au didacticiel et configurons notre projet.

Installation

Nous allons commencer par cloner un référentiel frontend préparé et configurer les variables d'environnement. Exécutez les commandes suivantes :

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

Ensuite, créez un fichier .env à la racine du projet et incluez les clés suivantes :

 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

Remplacez <YOUR_ALCHEMY_PROJECT_ID> et <WALLET_CONNECT_PROJECT_ID> par vos ID de projet respectifs.

YOUR_ALCHEMY_PROJECT_ID : Obtenez la clé ici WALLET_CONNECT_PROJECT_ID : Obtenez la clé ici

Enfin, exécutez yarn dev pour démarrer le projet.

Notre interface pour ce projet est solide et prête pour une intégration de contrats intelligents, mais nous aurons besoin de Reduxify notre application pour activer un espace de données partagé.

Construire le magasin Redux

L'image ci-dessus représente la structure de notre boutique Redux, elle sera simple puisque nous ne créons pas de projet trop complexe.

Nous allons configurer Redux pour gérer l'état global de notre application. Suivez ces étapes:

1. Créez un dossier store à la racine du projet.
2. Dans store , créez deux dossiers : actions et states .
3. Dans states , créez un fichier globalStates.ts .

4. Dans actions , créez un fichier globalActions.ts .

5. Créez un fichier globalSlices.ts dans le dossier store .

6. Créez un fichier index.ts dans le dossier store .

7. Mettez à jour le fichier pages/_app.ts avec le fournisseur Redux.

Notre application a été enveloppée avec la boîte à outils Redux, et nous reviendrons sur Redux lors de l'intégration du backend avec le frontend.

Développement de contrats intelligents

Ensuite, nous développerons le contrat intelligent pour notre plateforme :

1. Créez un dossier contracts à la racine du projet.
2. Dans contracts , créez un fichier DappFund.sol et ajoutez le code du contrat ci-dessous.

Le contrat DappFund facilitera la création, la mise à jour et les dons à des organismes de bienfaisance, ainsi que des fonctions administratives telles que la modification de la taxe sur les œuvres caritatives et l'interdiction d'un organisme de bienfaisance.

Voici une répartition fonction par fonction :

1. constructor() : Cette fonction définit la taxe caritative initiale lorsque le contrat est déployé. Il n'est exécuté qu'une seule fois lors du déploiement du contrat.
2. createCharity() : Cette fonction permet aux utilisateurs de créer un nouvel organisme de bienfaisance. Cela nécessite plusieurs paramètres tels que le nom, la description, l’image, le profil et le montant de l’association. Il vérifie que ces paramètres sont valides, puis crée un nouveau CharityStruct et l'ajoute au mappage des charities .
3. updateCharity() : Cette fonction permet au propriétaire d'un organisme de bienfaisance de mettre à jour ses coordonnées. Il vérifie que l'organisme de bienfaisance existe et que l'expéditeur est le propriétaire de l'organisme de bienfaisance avant de mettre à jour les détails de l'organisme de bienfaisance.
4. deleteCharity() : Cette fonction permet au propriétaire d'un organisme de bienfaisance de le marquer comme supprimé. Il vérifie que l'organisme de bienfaisance existe et que l'expéditeur est le propriétaire de l'organisme de bienfaisance avant de le marquer comme supprimé.
5. toggleBan() : Cette fonction permet au propriétaire du contrat de bannir ou de débannir un organisme de bienfaisance. Il vérifie que l'organisme de bienfaisance existe avant de basculer son statut d'interdiction.
6. donate() : Cette fonction permet aux utilisateurs de faire un don à un organisme de bienfaisance. Il vérifie que l'association existe, n'est pas interdite et n'a pas encore atteint son objectif de collecte de fonds. Il incrémente ensuite le nombre total de dons, crée un nouveau SupportStruct et l'ajoute au mappage supportersOf . Il met également à jour le montant collecté et le nombre de dons de l'organisme de bienfaisance.
7. changeTax() : Cette fonction permet au titulaire du contrat de modifier la taxe caritative. Il vérifie que le nouveau pourcentage de taxe est valide avant de mettre à jour la taxe.
8. getCharity() : Cette fonction permet à quiconque d'obtenir les détails d'un organisme de bienfaisance. Il renvoie le CharityStruct associé à l'ID donné.
9. getCharities() : Cette fonction permet à quiconque d'obtenir les détails de tous les organismes de bienfaisance actifs. Il renvoie un tableau d'objets CharityStruct .
10. getMyCharities() : Cette fonction permet à un utilisateur d'obtenir les détails de toutes ses associations caritatives actives. Il renvoie un tableau d'objets CharityStruct .
11. getSupports() : Cette fonction permet à quiconque d'obtenir les détails de tous les sympathisants d'un organisme de bienfaisance spécifique. Il renvoie un tableau d'objets SupportStruct .
12. payTo() : Cette fonction interne est utilisée pour transférer des fonds. Il envoie la quantité spécifiée d’Ether à l’adresse indiquée.
13. currentTime() : Cette fonction interne renvoie l'heure actuelle en secondes depuis l'époque Unix. Il est utilisé pour horodater les dons et les créations caritatives.

Déploiement et amorçage du contrat

Maintenant, déployons notre contrat intelligent et remplissons-le avec des données factices :

1. Créez un dossier scripts à la racine du projet.
2. Dans scripts , créez un fichier deploy.js et un fichier seed.js et ajoutez les codes suivants.

Déployer le script

Script de départ

3. Exécutez les commandes suivantes pour déployer le contrat et l'amorcer avec des données :

    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

Si vous avez fait cela correctement, vous devriez voir un résultat similaire à celui ci-dessous :

À ce stade, nous pouvons commencer l'intégration de notre contrat intelligent à notre frontend.

Intégration frontale

Tout d’abord, créez un dossier services à la racine du projet et, à l’intérieur, créez un fichier blockchain.tsx . Ce fichier contiendra des fonctions pour interagir avec notre contrat intelligent.

Le code fourni est une implémentation TypeScript de notre service blockchain pour interagir avec notre contrat intelligent. Ce service permet aux utilisateurs d'effectuer des actions sur notre plateforme caritative, notamment de créer et de mettre à jour des œuvres caritatives, de faire des dons, etc.

Voici une répartition fonction par fonction :

1. getEthereumContracts() : Cette fonction obtient les instances de contrat Ethereum avec lesquelles le service interagira. Il vérifie si l’utilisateur dispose d’un compte Ethereum connecté et l’utilise pour interagir avec le contrat, sinon il utilise un portefeuille créé aléatoirement.
2. getAdmin() : Cette fonction renvoie le propriétaire du contrat.
3. getCharities() , getMyCharities() , getCharity() : ces fonctions récupèrent respectivement toutes les associations caritatives, les associations caritatives créées par l'utilisateur actuel et une association caritative spécifique par son ID.
4. getSupporters() : Cette fonction récupère les partisans d'un organisme de bienfaisance spécifique par son identifiant.
5. createCharity() , updateCharity() : Ces fonctions permettent respectivement à un utilisateur de créer un nouvel organisme de bienfaisance ou de mettre à jour un organisme de bienfaisance existant.
6. makeDonation() : Cette fonction permet à un utilisateur de faire un don à un organisme de bienfaisance spécifique.
7. deleteCharity() : Cette fonction permet au propriétaire d'un organisme de bienfaisance de le supprimer.
8. banCharity() : Cette fonction permet au propriétaire du contrat de bannir un organisme de bienfaisance.
9. structuredCharities() , structuredSupporters() : ce sont des fonctions d'assistance qui structurent les données renvoyées par le contrat dans un format plus utilisable.

Mettez à jour le fichier provider.tsx dans services pour inclure le réseau bitfinity à l'aide des codes suivants.

Page interagissant avec le contrat intelligent

Ensuite, nous relierons les fonctions du service blockchain à leurs interfaces respectives dans le frontend :

No 1 : Afficher toutes pages/index.tsx pour obtenir les données de la fonction getCharities() .

Remarquez comment Redux est utilisé pour stocker les données de la blockchain avant qu'elles ne soient affichées à l'écran.

No 2 : Affichage des associations caritatives de l'utilisateur Mettez à jour pages/projects.tsx pour utiliser le hook useEffect() pour obtenir les associations caritatives de l'utilisateur actuel.

Veuillez noter l'utilisation du hook useEffect() pour récupérer les associations caritatives de l'utilisateur actuel et la manière dont Redux est utilisé pour gérer et afficher les données de la blockchain sur plusieurs composants. Ce sera un modèle répété sur les pages et les composants.

No 3 : Création de nouveaux organismes de bienfaisance Mettez à jour pages/donations/create.tsx pour utiliser la fonction createCharity() pour la soumission du formulaire.

No 4 : Affichage pages/donations/[id].tsx de bienfaisance unique pour utiliser les fonctions getServerSideProps() , getCharity() et getSupporters() pour récupérer l'organisme de bienfaisance et les sympathisants par identifiant.

No 5 : Modification des organismes de bienfaisance existants Mettez à jour pages/donations/edit/[id].tsx pour utiliser la fonction getCharity() pour récupérer l'organisme de bienfaisance par identifiant et remplir les champs du formulaire.

Avez-vous vu comment la fonction getCharity() a été utilisée pour récupérer la charité par identifiant et également comment elle a été utilisée pour remplir les champs du formulaire ?

Composants avec contrat intelligent

Comme nous l'avons fait avec les pages ci-dessus, mettons à jour les composants suivants pour interagir avec le contrat intelligent :

No 1 : Gestion de l'interdiction des organismes de bienfaisance Mettez à jour components/Ban.tsx pour utiliser la fonction handleBanning() pour appeler la fonction banCharity() .

No 2 : Gestion de la suppression des organismes de bienfaisance Mettez à jour le fichier components/Delete.tsx pour utiliser les fonctions handleDelete() et deleteCharity() pour exécuter une procédure de désinscription d'un organisme de bienfaisance.

No 3 : Faire des dons à des organismes de bienfaisance Mettez à jour le fichier components/Donor.tsx pour utiliser la fonction handleSubmit() pour envoyer le paiement au contrat intelligent à l'aide de la fonction makeDonation() .

Autres composants

Voici le reste des composants que vous devez également mettre à jour en raison de l'intégration de Redux.

Le composant NavBtn Révisez et mettez à jour le composant qui permet aux utilisateurs de parcourir, supprimer et modifier les informations sur les organismes de bienfaisance. Utilisez Redux pour déclencher le modal de suppression en cliquant.

Le composant de paiement Examinez et mettez à jour la mise en œuvre de Redux pour déclencher les modaux de don, de supporters et d'interdiction en cliquant sur leurs boutons respectifs.

Le composant Supports Révise et met à jour l'implémentation de Redux pour fermer le modal Supports lorsque vous cliquez sur le bouton de fermeture.

En mettant en œuvre ces mises à jour, tous les composants et pages sont désormais connectés au contrat intelligent, marquant l'achèvement du projet.

Si votre serveur Nextjs était en panne pendant tout ce temps, vous pouvez le relancer en exécutant yarn dev .

Pour en savoir plus, nous vous recommandons de regarder la vidéo complète de cette version sur notre chaîne YouTube .

Conclusion

Dans ce didacticiel, nous avons créé une plateforme caritative décentralisée à l'aide de Next.js, Solidity et TypeScript. Nous avons configuré l'environnement de développement, construit le magasin Redux et déployé le contrat intelligent sur la blockchain. En intégrant le contrat intelligent au frontend, nous avons créé une expérience utilisateur transparente.

Tout au long du didacticiel, vous avez acquis de précieuses compétences dans la création d'applications Web3, la création de contrats intelligents et l'intégration de la vérification de type statique.

Vous êtes maintenant prêt à créer votre propre plateforme caritative décentralisée. Bon codage et libérez votre innovation dans le monde du Web3 !