Bibliothèques d'API JavaScript

Pour qu'une application Web puisse interagir avec la blockchain Ethereum (c'est-à-dire lire les données de la blockchain et/ou envoyer des transactions sur le réseau), elle doit se connecter à un nœud Ethereum.

À cette fin, chaque client Ethereum met en œuvre la spécification JSON-RPC, de sorte qu'il existe un ensemble uniforme de méthodes sur lesquelles les applications peuvent s'appuyer.

Si vous voulez utiliser JavaScript pour vous connecter à un nœud Ethereum, il est possible d'avoir recours à Vanilla JavaScript, mais plusieurs bibliothèques de commodité existent à l'intérieur même de l'écosystème, ce qui rend les choses beaucoup plus simples. Grâce à ces bibliothèques, les développeurs peuvent rédiger des méthodes intuitives d'une seule ligne pour initialiser des demandes RPC JSON (sous le capot) qui interagissent avec Ethereum.

Veuillez noter que depuis La Fusion, deux parties de logiciels Ethereum connectés - un client d'exécution et un client de consensus - sont nécessaires pour exécuter un nœud. Veuillez vous assurer que votre nœud inclut à la fois un client d'exécution et un client de consensus. Si votre nœud n'est pas sur votre machine en local (par ex. votre nœud est exécuté sur une instance AWS), mettez à jour les adresses IP dans le tutoriel en conséquence. Pour plus d'informations, veuillez consulter notre page sur l'exécution d'un noeud.

Prérequis

Il peut être utile de comprendre non seulement en quoi consiste JavaScript, mais aussi la pile Ethereum et les clients Ethereum.

Pourquoi utiliser une bibliothèque ?

Ces bibliothèques suppriment une grande partie de la complexité d'une interaction directe avec un nœud Ethereum. Elles fournissent également des fonctions utilitaires (par ex. convertir des ETH en gwei) afin que vous puissiez, en tant que développeur, passer moins de temps à gérer les subtilités des clients Ethereum et plus de temps à vous consacrer aux fonctionnalités uniques de votre application.

Fonctionnalités d'une bibliothèque

Se connecter à des nœud Ethereum

En utilisant des fournisseurs, les bibliothèques vous permettent de vous connecter à Ethereum et de lire ses données, que ce soit sur JSON-RPC, INFURA, Etherscan, Alchemy ou Metamask.

Exemple Ether

1// Un BrowserProvider enveloppe un fournisseur Web3 standard, qui est
2// ce que MetaMask injecte comme window.ethereum dans chaque page.
3const provider = new ethers.providers.BrowserProvider (window.ethereum)
4
5// Le plugin MetaMask permet également de signer des transactions pour
6// envoyer de l'ether et payer pour changer l'état de la blockchain.
7// Pour cela, nous avons besoin du signataire du compte...
8const signer = provider.getSigner()
 Copier

Exemple Web3js

1var web3 = new Web3("http://localhost:8545")
2// or
3var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
4
5// change provider
6web3.setProvider("ws://localhost:8546")
7// or
8web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"))
9
10// Using the IPC provider in node.js
11var net = require("net")
12var web3 = new Web3("/Users/myuser/Library/Ethereum/geth.ipc", net) // mac os path
13// or
14var web3 = new Web3(
15  new Web3.providers.IpcProvider("/Users/myuser/Library/Ethereum/geth.ipc", net)
16) // mac os path
17// on windows the path is: "\\\\.\\pipe\\geth.ipc"
18// on linux the path is: "/users/myuser/.ethereum/geth.ipc"
Afficher tout
 Copier

Une fois la configuration effectuée, vous pourrez interroger la blockchain pour :

les numéros de blocs ;
le gaz estimé ;
les événements du contract intelligent ;
l'ID du réseau ;
et plus encore...

Fonctionnalités d'un portefeuille

Les bibliothèques vous permettent de créer des portefeuilles, gérer vos clés et signer des transactions.

Voici un exemple provenant de la bibliothèque Ethers

1// Créer une instance de portefeuille à partir d'un mnémonique...
2mnemonic =
3  "announce room limb pattern dry unit scale effort smooth jazz weasel alcohol"
4walletMnemonic = Wallet.fromPhrase(mnemonic)
5
6// ...or from a private key
7walletPrivateKey = new Wallet(walletMnemonic.privateKey)
8
9walletMnemonic.address === walletPrivateKey.address
10// true
11
12// The address as a Promise per the Signer API
13walletMnemonic.getAddress()
14// { Promise: '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1' }
15
16// A Wallet address is also available synchronously
17walletMnemonic.address
18// '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1'
19
20// The internal cryptographic components
21walletMnemonic.privateKey
22// '0x1da6847600b0ee25e9ad9a52abbd786dd2502fa4005dd5af9310b7cc7a3b25db'
23walletMnemonic.publicKey
24// '0x04b9e72dfd423bcf95b3801ac93f4392be5ff22143f9980eb78b3a860c4843bfd04829ae61cdba4b3b1978ac5fc64f5cc2f4350e35a108a9c9a92a81200a60cd64'
25
26// The wallet mnemonic
27walletMnemonic.mnemonic
28// {
29//   locale: 'en',
30//   path: 'm/44\'/60\'/0\'/0/0',
31//   phrase: 'announce room limb pattern dry unit scale effort smooth jazz weasel alcohol'
32// }
33
34// Note: A wallet created with a private key does not
35//       have a mnemonic (the derivation prevents it)
36walletPrivateKey.mnemonic
37// null
38
39// Signing a message
40walletMnemonic.signMessage("Hello World")
41// { Promise: '0x14280e5885a19f60e536de50097e96e3738c7acae4e9e62d67272d794b8127d31c03d9cd59781d4ee31fb4e1b893bd9b020ec67dfa65cfb51e2bdadbb1de26d91c' }
42
43tx = {
44  to: "0x8ba1f109551bD432803012645Ac136ddd64DBA72",
45  value: utils.parseEther("1.0"),
46}
47
48// Signing a transaction
49walletMnemonic.signTransaction(tx)
50// { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd64dba72880de0b6b3a7640000801ca0918e294306d177ab7bd664f5e141436563854ebe0a3e523b9690b4922bbb52b8a01181612cec9c431c4257a79b8c9f0c980a2c49bb5a0e6ac52949163eeb565dfc' }
51
52// The connect method returns a new instance of the
53// Wallet connected to a provider
54wallet = walletMnemonic.connect(provider)
55
56// Querying the network
57wallet.getBalance()
58// { Promise: { BigNumber: "42" } }
59wallet.getTransactionCount()
60// { Promise: 0 }
61
62// Sending ether
63wallet.sendTransaction(tx)
Afficher tout
 Copier

Lire les documents complets(opens in a new tab)

Une fois la configuration effectuée, vous pourrez :

créer un compte ;
envoyer des transactions ;
signer des transactions ;
et plus encore...

Interagir avec les fonctions d'un contrat intelligent

Les bibliothèques clientes JavaScript autorisent votre application à appeler des fonctions de contrat intelligent en lisant l'interface binaire d'application (ABI) d'un contrat compilé.

L'ABI explique principalement les fonctions du contrat au format JSON et vous permet de l'utiliser comme un objet JavaScript standard.

Ainsi, le contrat Solidity ci-dessous :

1contract Test {
2    uint a;
3    address d = 0x12345678901234567890123456789012;
4
5    function Test(uint testInt)  { a = testInt;}
6
7    event Event(uint indexed b, bytes32 c);
8
9    event Event2(uint indexed b, bytes32 c);
10
11    function foo(uint b, bytes32 c) returns(address) {
12        Event(b, c);
13        return d;
14    }
15}
Afficher tout
 Copier

Donnerait le JSON suivant :

1[{
2    "type":"constructor",
3    "payable":false,
4    "stateMutability":"nonpayable"
5    "inputs":[{"name":"testInt","type":"uint256"}],
6  },{
7    "type":"function",
8    "name":"foo",
9    "constant":false,
10    "payable":false,
11    "stateMutability":"nonpayable",
12    "inputs":[{"name":"b","type":"uint256"}, {"name":"c","type":"bytes32"}],
13    "outputs":[{"name":"","type":"address"}]
14  },{
15    "type":"event",
16    "name":"Event",
17    "inputs":[{"indexed":true,"name":"b","type":"uint256"}, {"indexed":false,"name":"c","type":"bytes32"}],
18    "anonymous":false
19  },{
20    "type":"event",
21    "name":"Event2",
22    "inputs":[{"indexed":true,"name":"b","type":"uint256"},{"indexed":false,"name":"c","type":"bytes32"}],
23    "anonymous":false
24}]
Afficher tout
 Copier

Cela veut dire que vous pouvez :

envoyer une transaction vers le contrat intelligent et exécuter sa méthode ;
faire un appel afin d'estimer le gaz nécessaire pour exécuter une méthode quand exécutée par le EVM ;
déployer un contrat ;
et plus encore...

Fonctions utilitaires

Les fonctions utilitaires vous offrent des raccourcis pour améliorer le développement Ethereum.

Les valeurs ETH sont en wei par défaut. 1 ETH = 1 000 000 000 000 000 000 WEI – ça en fait, des chiffres à gérer ! web3.utils.toWei convertit l'ether en wei pour vous.

Et en ethers, cela ressemble à ce qui suit :

1// Obtenir le solde d'un compte (par l'adresse ou le nom ENS)
2balance = await provider.getBalance("ethers.eth")
3// { BigNumber: "2337132817842795605" }
4
5// Vous devrez souvent formatter la sortie pour l'utilisateur
6// qui préfère voir les valeurs en ether (plutôt qu'en wei)
7ethers.utils.formatEther(balance)
8// '2.337132817842795605'
 Copier

Bibliothèques disponibles

Web3.js - _Api JavaScript Ethereum _

Ethers.js - Implémentation complète d'un portefeuille Ethereum, et utilitaires en JavaScript et TypeScript

The Graph - Protocole permettant d'indexer les données Ethereum et IPFS, et d'exécuter des requêtes sur celles-ci en utilisant GraphQL

light.js - Bibliothèque JS réactive de haut niveau optimisée pour les clients légers

GitHub(opens in a new tab)

Web3-wrapper - Alternative Typescript à Web3.js.

Alchemyweb3 - Enveloppe autour de Web3.js avec nouvelles tentatives automatiques et API améliorées.

Alchemy NFT API - API pour récupérer les données NFT, y compris la détention, les attributs de métadonnées et plus encore.

viem - Interface TypeScript pour Ethereum.

Complément d'information

Une ressource communautaire vous a aidé ? Modifiez cette page et ajoutez-la !

Configurer Web3js pour utiliser la blockchain Ethereum avec JavaScript_ - Instructions pour installer et intégrer Web3js à votre projet_
Appel d'un contrat intelligent à partir de JavaScript _ - À l'aide du jeton DAI, découvrez comment appeler une fonction de contrat en utilisant JavaScript._
Envoi des transactions en utilisant Web3 et Alchemy _ - Procédure étape par étape pour envoyer des transactions depuis le backend._