Comment construire un DAPP simple sur un contrat intelligent?

Configuration de votre environnement de développement

Pour commencer à construire un simple DAPP en plus d'un contrat intelligent, vous devez d'abord établir un environnement de développement approprié. Truffle est l'un des outils les plus populaires pour le développement basé sur Ethereum , qui fournit un cadre pour compiler, déployer et tester des contrats intelligents.

• Installez Node.js et NPM pour gérer les packages JavaScript
• Exécutez npm install -g truffle pour installer la suite de truffes à l'échelle mondiale
• Utilisez truffle init dans votre répertoire de projet pour échafauder un nouveau projet

Une fois la truffe configurée, vous aurez également besoin d'une blockchain locale à des fins de test. La ganache est un outil couramment utilisé qui simule localement le réseau Ethereum. Téléchargez et installez Ganache, puis démarrez un nouvel espace de travail pour générer des comptes de test et des clés privées.

De plus, connectez votre navigateur à la blockchain à l'aide de Metamask , un portefeuille Ethereum qui permet une interaction avec des applications décentralisées. Assurez-vous d'ajouter le réseau local fourni par Ganache à Metamask pour des tests transparents.

Rédaction d'un contrat intelligent de base

Maintenant que votre environnement est prêt, il est temps d'écrire un contrat intelligent de base. La solidité est la langue principale utilisée pour rédiger des contrats intelligents Ethereum. Créez un nouveau fichier .sol dans le dossier contracts généré par truffe.

Voici un exemple de contrat:

 pragma solidity ^0.8.0; contrat simplesorage {


uint storedData; function set(uint x) public { storedData = x; } function get() public view returns (uint) { return storedData; }
 }

Ce contrat définit une variable storedData et deux fonctions: une pour mettre à jour sa valeur et une autre pour la récupérer. Assurez-vous que la version Solidity correspond à celle spécifiée dans votre configuration de truffe .

Après avoir écrit le contrat, créez un script de migration dans le dossier migrations . Ce script indique à Truffle comment déployer votre contrat sur la blockchain.

Compilation et déploiement du contrat intelligent

Avec votre contrat intelligent écrit, la prochaine étape consiste à le compiler et à le déployer. Dans votre terminal, accédez à la racine du projet et exécutez:

• truffle compile - Cela compile votre code de solidité dans Bytecode lisible par la machine virtuelle Ethereum (EVM)
• truffle migrate - Cela déploie votre contrat vers la blockchain locale gérée par Ganache

Assurez-vous que Ganache s'exécute avant d'exécuter la commande de migration . Vous devriez voir des journaux de transaction indiquant un déploiement réussi.

Après le déploiement, notez l'adresse du contrat imprimé dans la console. Cette adresse sera utilisée plus tard lors de la connexion de votre application Frontend au contrat intelligent.

Vous pouvez également vérifier le déploiement en vérifiant les transactions dans Ganache ou en utilisant la console de truffes avec truffle console et en interagissant manuellement avec le contrat déployé.

Construire l'interface frontend

Le frontend de votre DAPP permet aux utilisateurs d'interagir avec le contrat intelligent. Une pile commune pour la création de DAPP comprend React.js pour l'interface utilisateur et le web3.js ou Ethers.js pour les interactions blockchain.

Commencez par créer une application React:

• Exécutez npx create-react-app my-dapp pour échafaucher un nouveau projet React
• Accédez au répertoire du projet et installez la bibliothèque Web3 via npm install web3 ou npm install ethers

Ensuite, intégrez le contrat intelligent ABI (interface binaire d'application) et adressez-vous dans votre frontend. L'ABI est automatiquement généré pendant la compilation et peut être trouvé dans le répertoire build/contracts .

Dans votre composant React, importez WEB3 et instanciez une connexion au portefeuille de l'utilisateur (par exemple, Metamask):

 import Web3 from 'web3'; const web3 = new web3 (window.ethereum); attendre window.ethereum.enable ();

Ensuite, utilisez l'ABI et l'adresse du contrat pour créer une instance de contrat:

 const contractInstance = new web3.eth.Contract(abi, contractAddress);

Avec cette configuration, vous pouvez désormais appeler l' set et get des fonctions à partir de votre contrat intelligent dans les gestionnaires de bouton et afficher les résultats à l'écran.

Connexion du frontend au contrat intelligent

Une fois l'instance de contrat créée, vous pouvez implémenter des fonctionnalités qui permettent aux utilisateurs d'interagir directement avec lui via le navigateur.

Par exemple, pour appeler la fonction get :

 contractInstance.methods.get().call() .then(result => console.log(result));

Pour envoyer une transaction à l'aide de la fonction set :

 contractInstance.methods.set(42).send({ from: accountAddress }) .on('transactionHash', hash => console.log(hash));

Assurez-vous que Metamask est connecté et déverrouillé avant d'effectuer une transaction . Également gérer les erreurs gracieusement pour améliorer l'expérience utilisateur.

Mettez à jour vos composants d'interface utilisateur pour refléter les valeurs actuelles stockées sur la blockchain et permettez les champs d'entrée pour définir de nouvelles valeurs. Cela crée une interface entièrement fonctionnelle pour votre DAPP.

Testez l'intégralité du flux en exécutant l'application React avec npm start et en interagissant avec les boutons tout en observant les modifications de la ganache et de la console du navigateur.

Questions fréquemment posées

Quelle est la différence entre A DAPP et une application Web régulière?

A DAPP (application décentralisée) fonctionne sur un réseau de blockchain et utilise des contrats intelligents pour la logique backend, tandis qu'une application Web ordinaire repose sur des serveurs centralisés. Les DAPP offrent la transparence, l'immuabilité et la résistance à la censure en raison de leur nature décentralisée .

Dois-je payer des frais de gaz lors du déploiement d'un contrat intelligent localement?

Non, lorsque vous utilisez une blockchain locale comme la ganache, les frais de gaz sont simulés et ne nécessitent pas d'éther réel . Les transactions sont traitées instantanément sans coût réel, ce qui le rend idéal pour les tests.

Puis-je utiliser d'autres frameworks en plus de réagir pour le frontend d'un DAPP?

Oui, vous pouvez utiliser n'importe quel cadre Frontend tel que Vue.js, Angular ou même HTML / CSS / JavaScript. La clé est d'intégrer le fournisseur Web3 et d'interagir correctement avec le contrat intelligent .

Est-il possible de déployer un DAPP sur un testnet au lieu d'une blockchain locale?

Oui, vous pouvez déployer sur des réseaux comme Rinkeby, Ropsten ou Goerli pour des tests plus larges. Vous aurez besoin de test d'éther, qui peut être obtenu à partir de robinets associés à ces réseaux. Assurez-vous que votre configuration de truffes comprend les paramètres réseau corrects et mnémoniques .