Cryptomonnaie

Connectez React à Ethereum – FullStacked

Connectez React à Ethereum - FullStacked


La vision d'Ethereum était de créer une plate-forme qui allait devenir la prochaine génération d'Internet, Web 3.0. Cette nouvelle génération permettrait aux utilisateurs d'explorer à la fois le Web traditionnel et le Web décentralisé. En plus d'Ethereum, une nouvelle génération d'applications serait créée, des applications décentralisées (dApps), qui utilisent Ethereum comme back-end au lieu de placer la sécurité dans les serveurs.

Comme le système de partage de contenu BitTorrent, les nœuds de réseau Ethereum fonctionneront sur des milliers d'ordinateurs à travers le monde et, à moins de fermer Internet, ses opérations ne peuvent pas être arrêtées.
- Joseph Lubin

Alors que Bitcoin était un protocole conçu pour stocker et transférer de la valeur, agissant comme une banque centrale d'Internet, Ethereum était un protocole conçu pour créer des applications décentralisées, ajouter de la logique aux transactions financières, rendre les monnaies numériques programmables.

Cette couche programmable vers la monnaie numérique est le contrat intelligent. Le contrat intelligent permet la création d'accords contraignants appliqués par code. L'application d'un contrat intelligent peut être un transfert de valeur d'une partie à une autre, devenant idéale pour une utilisation dans les monnaies numériques.

Aujourd'hui, Ethereum est la principale plate-forme de contrats intelligents au monde, devenant le premier grand livre de réseau programmable au monde. Grâce à Ethereum, les développeurs n'ont pas besoin de créer une blockchain à partir de zéro pour utiliser la technologie blockchain.

En guise d'introduction à la façon de s'appuyer sur Ethereum, nous traiterons des parties les plus fondamentales de la création d'une dApp: communiquer avec un contrat intelligent à partir d'un site Web / d'une interface utilisateur.

Pour ce projet, notre pile comprend Ethereum et React. Je préfère garder les fichiers dans des répertoires séparés pour organiser un projet donné.

Pour le projet complet, veuillez consulter l'exemple de projet sur Github.

Pour cette pile, nous utiliserons la suite d'outils de développement Truffle.js. Tout d'abord, installez Truffle, si ce n'est déjà fait sur votre machine.

J'ai créé un nouveau répertoire pour stocker nos fichiers en créant notre contrat intelligent ./blockchain. Dans ./blockchain, nous pouvons initialiser notre code Ethereum à l'aide de Truffle. Dans votre ligne de commande:

Quelques fichiers et répertoires devraient remplir ./blockchain maintenant.

Dans ./contrats il devrait y avoir un Migrations.solcontrat intelligent. La migration est le processus de publication d'un contrat intelligent vers une blockchain donnée. Tous les codes de démarrage pour configurer les migrations sont inclus, à l'exception du code pour migrer les nouveaux contrats que nous créons.

Pour simplement comprendre le processus de migration locale, pour tester notre interface utilisateur, nous utiliserons un contrat intelligent très simple pour commencer. Les documents Solidity contiennent un court exemple de contrat intelligent pour un stockage simple. Nous utiliserons ce code de contrat. Créer et remplir SimpleStorage.sol.

Ce contrat intelligent fait deux choses:

  • Stocke un entier positif (ensemble())
  • Récupère cet entier positif du stockage (avoir())

Nous avons notre contrat intelligent pour le projet. Nous pouvons compiler notre code. Nous le faisons avec Truffle.

Cela devrait créer un nouveau répertoire appelé ./build/contracts. Il devrait y avoir deux fichiers pour notre projet: Migrations.json et SimpleStorage.json. Chacun de ces fichiers JSON doit contenir un nom de contrat, un ABI et d'autres informations utilisées dans le déploiement.

En utilisant les fichiers JSON que nous avons compilés, nous pouvons créer nos fichiers de migration. Dans ./blockchain/migrations vous devriez voir un fichier de migration existant 1_initial_migrations.js. Le fichier doit contenir les éléments suivants:

Dans la variable Migrations, tu peux voir "Migrations" en cours d'importation. "Migrations" est le nom du contrat fourni dans ./build/contracts/Migrations.json. Cette 1_initial_migrations.js utilise Migrations.json pour déployer le contrat Migrations. Nous allons créer une nouvelle migration en utilisant le nom du contrat pour le nouveau contrat que nous avons créé,
"SimpleStorage".

Créer un nouveau fichier de migration 2_first_contracts.js. Nous allons le remplir avec un code similaire à 1_initial_migrations.js mais inclure notre SimpleStorage contrat intelligent.

C'est toute la configuration nécessaire pour déployer le code dans notre projet localement. La configuration des contrats plus compliqués peut différer. Cependant, sans ajouter notre contrat aux fichiers de migration, la migration dans Truffle ne fera que migrer le Migration.sol contrat et ne déploiera pas les autres contrats que nous avons créés et compilés. Cette étape est donc requise.

Ensuite, nous créons un réseau de test Ethereum local (testnet) et déployons notre code localement. Nous le faisons à nouveau avec Truffle. Lancer une blockchain de développement:

Truffle doit afficher un hôte et un port, ainsi qu'un ensemble de comptes avec leurs clés privées correspondantes.

L'hôte sera utilisé pour configurer notre portefeuille pour interagir avec ces contrats intelligents. Les comptes fournis sont financés pour le réseau hôte donné.

En utilisant cet environnement de développement, nous migrons nos contrats vers ce réseau de test local:

Cela devrait déployer les contrats définis dans les fichiers de migration à l'aide de la devise Ether à partir du premier compte fourni sur ce testnet local.

Continuons vers le front-end.

Pour le frontend, nous utiliserons le bootstrap React simple créer-réagir-app. Depuis la racine du projet, utilisez créer-réagir-app pour initialiser notre client.

Nous devrions maintenant avoir deux dossiers à la racine du projet, ./blockchain et ./client. Le répertoire client devrait maintenant contenir une application React de démarrage.

Pour interagir avec les contrats intelligents Ethereum sur un réseau, nous utilisons la bibliothèque web3. Ajoutons web3 à notre projet.

Pour que le client interagisse avec un contrat intelligent donné, il a besoin d'un modèle d'entrées et de sorties attendues pour les fonctions d'un contrat intelligent. Ce modèle est fourni dans l'ABI.

L'ABI d'un contrat intelligent donné est créé lorsqu'un contrat intelligent est compilé dans Truffle. Si nous revenons à la blockchain répertoire, si vos contrats ont été compilés, il devrait y avoir un chemin construction / contrats contenant un fichier JSON du contrat compilé. Au sein du JSON de notre SimpleStorage contrat, il devrait y avoir un champ nommé "abi" contenant l'objet ABI du contrat, qui est un tableau d'objets pour chaque fonction d'un contrat. Nous allons copier cela et le conserver chez notre client.

Dans un nouveau fichier abis.js . Dans ce document, nous enregistrerons notre ABI pour l'exportation. Créons ceci en supposant que nous souhaitons enregistrer et récupérer plusieurs ABI à partir de ce fichier. Pour chaque objet ABI pour un contrat intelligent donné, copier et coller l'objet à partir du fichier JSON du contrat compilé devrait suffire en ce qui concerne Javascript.

Nous pouvons maintenant commencer à écrire le code pour connecter React à Ethereum.

Dans App.js nous importons web3 et nos ABI, et Web3 prêt. De plus, nous allons configurer pour React Hooks.

Le fournisseur donné est le fournisseur Web 3 par défaut, appelé portefeuille Ethereum compatible avec les contrats intelligents, fourni par le navigateur de l'utilisateur. Dans de nombreux cas, il peut s'agir de l'extension de navigateur Metamask.

Nous pouvons commencer par lancer l'objet de contrat intelligent que nous utiliserons pour interagir avec nos déployées SimpleStorage contrat intelligent.

L'adresse du contrat est l'adresse du SimpleStorage fourni par Truffle lorsque nous avons effectué des migrations. Nous créons ensuite une nouvelle instance de contrat appelée SimpleContract en passant l'ABI simpleStorageAbi et adresse du contrat contractAddr dans new web3.eth.Contract (). Cette instance de contrat sera utilisée pour appeler et envoyer des actions de contrat intelligent.

Initions Hooks pour stocker la variable que nous enverrons à notre contrat et recevrons de notre contrat.

La chaîne «0x00» est la forme hexadécimale de «0».

Avant d'ajouter une fonctionnalité, nous allons commencer par configurer un formulaire pour afficher et pousser nos données.

Nous sauvons getNumber sous forme de chaîne hexadécimale dans le crochet car c'est la forme dans laquelle le contrat intelligent renverra notre numéro. Nous convertissons la forme hexadécimale en nombre à l'aide de l'outil Web3 hexToNumber (). Par défaut, nous définissons getNumber pour afficher «0».

Le formulaire et le bouton appellent les fonctions handleSet () et handleGet (). Nous allons créer ces fonctions maintenant.

Dans les contrats intelligents Ethereum, il existe deux types de fonctions, ou actions de contrat intelligent:

  • Actions nécessitant du gaz (ou envoyant de l'ETH)
  • Actions gratuites

Le fait qu'une action ait besoin de gaz dépend si nous écrivons sur la blockchain ou lisons dans la blockchain. Les actions qui transmettent des informations à la blockchain nécessitent du gaz en tant que frais. Les actions qui lisent les informations stockées sur la blockchain sont gratuites.

Nous pouvons identifier si une action de contrat intelligent nécessite du gaz en examinant l'accès défini lors de la déclaration d'une fonction. Les fonctions qui lisent uniquement ont les modificateurs d'accès suivants:

Toutes les autres actions nécessitent du gaz, car elles modifient l'état de la blockchain.

Les méthodes de contrat qui nécessitent du gaz sont appelées avec .envoyer() sur notre front-end. Alors que les méthodes contractuelles qui ne nécessitent pas de gaz sont appelées avec .appel() sur notre front-end. Actuellement, aucune erreur ou avertissement ne s'affiche si vous utilisez la mauvaise méthode, car vous souhaitez parfois tester les transactions altérant l'état avec appel(). Cependant, cela signifie que la fonctionnalité prévue ne se produira pas si vous choisissez le mauvais type d'appel. Il est important de savoir quel est le type d'appel correct pour une fonction donnée.

Si nous regardons le SimpleStorage contrat, nous pouvons voir quelles actions nécessitent du gaz.

La fonction ensemble() prend un entier et le stocke dans la blockchain. Il nécessite du gaz. La fonction avoir() est réglé sur vue accès, lecture uniquement de la variable les données stockées qui a été stocké. Il ne nécessite pas de gaz.

Pour les fonctions nécessitant du gaz, le gaz doit être calculé et l'autorisation d'accéder au compte Ethereum d'un utilisateur pour fournir ce gaz doit être fournie par l'utilisateur. Toutes les autres fonctions ne nécessitent aucune autorisation de gaz et d'utilisateur pour s'exécuter. Pour commencer, nous allons créer un appel à l'action qui n'a pas besoin de gaz, avoir().

  • La déclaration e.preventDefault empêche les événements par défaut du bouton.
  • Nous appelons de manière asynchrone la méthode du contrat avoir() sur l'instance de contrat SimpleContract avec attendre SimpleContract.methods.get.appel().
  • The Hook setter setGetNumber () stocke le nombre dans l'état à afficher dans l'interface utilisateur.

Pour toutes les autres transactions de contrat intelligentes, notre application doit avoir la permission d'accéder aux fonds des utilisateurs pour payer les frais de gaz, et toutes les fonctions payantes demandant Ether ou tout jeton ERC20. Un fournisseur Ethereum est injecté dans le navigateur d'un utilisateur lorsqu'un utilisateur dispose d'un logiciel compatible Web 3, tel que Metamask. Ce fournisseur est accessible par un site Web via la variable globale fenêtre dans window.ethereum. Ce fournisseur est appelé pour qu'une application accède à l'autorisation.

  • Nous demandons à un utilisateur la permission d'accéder à son portefeuille en appelant window.ethereum.enable ().
  • Si un utilisateur autorise l'accès à son compte, window.ethereum.enable () renverra un tableau d'adresses, en commençant par leur adresse actuellement activée, que nous enregistrons dans comptes.
  • Nous isolons le compte courant d'un utilisateur en sélectionnant la première adresse dans la liste des adresses avec comptes[0].
  • Nous estimons le gaz requis pour notre transaction de contrat intelligent en utilisant .estimateGas () sur la méthode que nous choisissons dans notre instance de contrat.
  • Nous créons notre transaction de contrat intelligent en transmettant nos paramètres de fonction à la méthode de contrat intelligent methods.set (), et le gaz estimé et l'adresse du compte utilisateur à .envoyer().
  • La réponse est enregistrée dans la console à des fins de test.

Remarque: Comme ce projet est maintenant, l'application entière pourrait exister dans App.js seul. Pour cette raison, le contrat et l'instance Web3 sont conservés en haut de App.js. Cependant, avec une application plus complexe où plusieurs composants nécessitent un accès au contrat ou à l'instance Web3, une bibliothèque de gestion d'état peut être utile pour stocker ces instances, les rendant accessibles partout dans l'application.

Maintenant, nous pouvons tester l'application localement. Exécutez une version locale de l'application React:

Cela devrait ouvrir l'application dans localhost: 3000.

Pour interagir avec Ethereum via l'application, nous avons besoin d'un portefeuille qui fournit des signatures pour chaque action de contrat intelligent. Pour cet exemple, nous utiliserons Metamask comme fournisseur de signature, mais il existe plus de fournisseurs de signature. Metamask est une extension de navigateur qui sert de portefeuille Ethereum.

Une fois Metamask installé sur votre navigateur, nous le configurons sur notre testnet local en utilisant l'adresse Truffle fournie. Dans notre cas, cette adresse se trouve dans la ligne Truffle Develop a commencé à http://127.0.0.1:9545/ . Nous montons sur les réseaux, cliquez sur RPC personnalisé et saisissons l'URL fournie par Truffle.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer