Ce que vous allez construire, consultez la sur le réseau de test Bitfinity et le . démo en direct 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 très demandé. Cette offre est gratuite pour les , pour savoir comment gagner, regardez la courte vidéo ci-dessous. Solidity 300 premières personnes 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 : https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true 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 suivantes pour recevoir jusqu'à 3 mois de cours premium gratuits sur vidéos pédagogiques 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 à la racine du projet et incluez les clés suivantes : .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 Remplacez et par vos ID de projet respectifs. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Obtenez la clé ici WALLET_CONNECT_PROJECT_ID Obtenez la clé ici Enfin, exécutez pour démarrer le projet. yarn dev 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: Créez un dossier à la racine du projet. store Dans , créez deux dossiers : et . store actions states Dans , créez un fichier . states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Dans , créez un fichier . actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Créez un fichier dans le dossier . globalSlices.ts store https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Créez un fichier dans le dossier . index.ts store https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Mettez à jour le fichier avec le fournisseur Redux. pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true 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 : Créez un dossier à la racine du projet. contracts Dans , créez un fichier et ajoutez le code du contrat ci-dessous. contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true Le contrat 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. DappFund Voici une répartition fonction par fonction : : 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. constructor() : 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 et l'ajoute au mappage des . createCharity() CharityStruct charities : 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. updateCharity() : 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é. deleteCharity() : 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. toggleBan() : 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 et l'ajoute au mappage . Il met également à jour le montant collecté et le nombre de dons de l'organisme de bienfaisance. donate() SupportStruct supportersOf : 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. changeTax() : Cette fonction permet à quiconque d'obtenir les détails d'un organisme de bienfaisance. Il renvoie le associé à l'ID donné. getCharity() CharityStruct : Cette fonction permet à quiconque d'obtenir les détails de tous les organismes de bienfaisance actifs. Il renvoie un tableau d'objets . getCharities() CharityStruct : Cette fonction permet à un utilisateur d'obtenir les détails de toutes ses associations caritatives actives. Il renvoie un tableau d'objets . getMyCharities() CharityStruct : 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 . getSupports() SupportStruct : Cette fonction interne est utilisée pour transférer des fonds. Il envoie la quantité spécifiée d’Ether à l’adresse indiquée. payTo() : 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. currentTime() Déploiement et amorçage du contrat Maintenant, déployons notre contrat intelligent et remplissons-le avec des données factices : Créez un dossier à la racine du projet. scripts Dans , créez un fichier et un fichier et ajoutez les codes suivants. scripts deploy.js seed.js Déployer le script https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Script de départ https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true 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. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Intégration frontale Tout d’abord, créez un dossier à la racine du projet et, à l’intérieur, créez un fichier . Ce fichier contiendra des fonctions pour interagir avec notre contrat intelligent. services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true 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 : : 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. getEthereumContracts() : Cette fonction renvoie le propriétaire du contrat. getAdmin() , , : 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. getCharities() getMyCharities() getCharity() : Cette fonction récupère les partisans d'un organisme de bienfaisance spécifique par son identifiant. getSupporters() , : Ces fonctions permettent respectivement à un utilisateur de créer un nouvel organisme de bienfaisance ou de mettre à jour un organisme de bienfaisance existant. createCharity() updateCharity() : Cette fonction permet à un utilisateur de faire un don à un organisme de bienfaisance spécifique. makeDonation() : Cette fonction permet au propriétaire d'un organisme de bienfaisance de le supprimer. deleteCharity() : Cette fonction permet au propriétaire du contrat de bannir un organisme de bienfaisance. banCharity() , : ce sont des fonctions d'assistance qui structurent les données renvoyées par le contrat dans un format plus utilisable. structuredCharities() structuredSupporters() Mettez à jour le fichier dans pour inclure le réseau à l'aide des codes suivants. provider.tsx services bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true Page interagissant avec le contrat intelligent Ensuite, nous relierons les fonctions du service blockchain à leurs interfaces respectives dans le frontend : pour obtenir les données de la fonction . No 1 : Afficher toutes pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Remarquez comment Redux est utilisé pour stocker les données de la blockchain avant qu'elles ne soient affichées à l'écran. à jour pour utiliser le hook pour obtenir les associations caritatives de l'utilisateur actuel. No 2 : Affichage des associations caritatives de l'utilisateur Mettez pages/projects.tsx useEffect() https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Veuillez noter l'utilisation du hook 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. useEffect() Mettez à jour pour utiliser la fonction pour la soumission du formulaire. No 3 : Création de nouveaux organismes de bienfaisance pages/donations/create.tsx createCharity() https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true de bienfaisance unique pour utiliser les fonctions , et pour récupérer l'organisme de bienfaisance et les sympathisants par identifiant. No 4 : Affichage pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters() https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Mettez à jour pour utiliser la fonction pour récupérer l'organisme de bienfaisance par identifiant et remplir les champs du formulaire. No 5 : Modification des organismes de bienfaisance existants pages/donations/edit/[id].tsx getCharity() https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Avez-vous vu comment la fonction 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 ? getCharity() 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 : Mettez à jour pour utiliser la fonction pour appeler la fonction . No 1 : Gestion de l'interdiction des organismes de bienfaisance components/Ban.tsx handleBanning() banCharity() https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true Mettez à jour le fichier pour utiliser les fonctions et pour exécuter une procédure de désinscription d'un organisme de bienfaisance. No 2 : Gestion de la suppression des organismes de bienfaisance components/Delete.tsx handleDelete() deleteCharity() https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Mettez à jour le fichier pour utiliser la fonction pour envoyer le paiement au contrat intelligent à l'aide de la fonction . No 3 : Faire des dons à des organismes de bienfaisance components/Donor.tsx handleSubmit() makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Autres composants Voici le reste des composants que vous devez également mettre à jour en raison de l'intégration de Redux. 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 NavBtn https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true 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 de paiement https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true Révise et met à jour l'implémentation de Redux pour fermer le modal Supports lorsque vous cliquez sur le bouton de fermeture. Le composant Supports https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true 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 était en panne pendant tout ce temps, vous pouvez le relancer en exécutant . Nextjs 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 !
