Aider à mettre à jour cette page

🌏

Il existe une nouvelle version de cette page, mais seulement en anglais pour le moment. Aidez-nous à traduire la dernière version.

Cette page est incomplète. Si vous êtes un expert sur le sujet, veuillez éditer cette page et l'enrichir de votre sagesse.

Bibliothèques d'API JavaScript

Dernière modification: , Invalid DateTime
Edit page

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.

Dans ce but, chaque client Ethereum implémente la spécification JSON-RPC afin de former un ensemble uniforme de points de terminaison sur lesquels 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. Avec ces bibliothèques, les développeurs peuvent rédiger des méthodes intuitives d'une seule ligne pour initialiser les demandes JSON RPC (pas directement visibles) qui interagissent avec Ethereum.

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 ?

Les bibliothèques suppriment une grande partie de la complexité de l'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 Web3Provider enveloppe un fournisseur Web3 standard, qui est
2// ce que Metamask injecte comme window.ethereum dans chaque page.
3const provider = new ethers.providers.Web3Provider(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()
9
📋 Copier

Exemple Web3js

1var web3 = new Web3("http://localhost:8545")
2// ou
3var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"))
4
5// changer de fournisseur
6web3.setProvider("ws://localhost:8546")
7// ou
8web3.setProvider(new Web3.providers.WebsocketProvider("ws://localhost:8546"))
9
10// Utiliser le fournisseur IPC en node.js
11var net = require("net")
12var web3 = new Web3("/Users/monutilisateur/Library/Ethereum/geth.ipc", net) // Chemin type mac os
13// ou
14var web3 = new Web3(
15 new Web3.providers.IpcProvider(
16 "/Users/monutilisateur/Library/Ethereum/geth.ipc",
17 net
18 )
19) // Chemin type mac os
20// sous windows le chemin est : "\\\\.\\pipe\\geth.ipc"
21// sous linux le chemin est : "/users/monutilisateur/.ethereum/geth.ipc"
22
Afficher tout
📋 Copier

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

  • les numéros de blocs
  • le carburant 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.fromMnemonic(mnemonic)
5
6// ...ou à partir d'une clé privée
7walletPrivateKey = new Wallet(walletMnemonic.privateKey)
8
9walletMnemonic.address === walletPrivateKey.address
10// true
11
12// Adresse Promise par le signataire de l'API
13walletMnemonic.getAddress()
14// { Promise: '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1' }
15
16// Une adresse de portefeuille est aussi disponible de façon synchrone
17walletMnemonic.address
18// '0x71CB05EE1b1F506fF321Da3dac38f25c0c9ce6E1'
19
20// Composants cryptographiques internes
21walletMnemonic.privateKey
22// '0x1da6847600b0ee25e9ad9a52abbd786dd2502fa4005dd5af9310b7cc7a3b25db'
23walletMnemonic.publicKey
24// '0x04b9e72dfd423bcf95b3801ac93f4392be5ff22143f9980eb78b3a860c4843bfd04829ae61cdba4b3b1978ac5fc64f5cc2f4350e35a108a9c9a92a81200a60cd64'
25
26// Portefeuille mnémonique
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// Remarque : Un portefeuille créé avec une clé privée ne comporte pas
35// de mnémonique (la dérivation l'empêche)
36walletPrivateKey.mnemonic
37// null
38
39// Signature d'un message
40walletMnemonic.signMessage("Hello World")
41// { Promise: '0x14280e5885a19f60e536de50097e96e3738c7acae4e9e62d67272d794b8127d31c03d9cd59781d4ee31fb4e1b893bd9b020ec67dfa65cfb51e2bdadbb1de26d91c' }
42
43tx = {
44 to: "0x8ba1f109551bD432803012645Ac136ddd64DBA72",
45 value: utils.parseEther("1.0"),
46}
47
48// Signature d'une transaction
49walletMnemonic.signTransaction(tx)
50// { Promise: '0xf865808080948ba1f109551bd432803012645ac136ddd64dba72880de0b6b3a7640000801ca0918e294306d177ab7bd664f5e141436563854ebe0a3e523b9690b4922bbb52b8a01181612cec9c431c4257a79b8c9f0c980a2c49bb5a0e6ac52949163eeb565dfc' }
51
52// La méthode de connexion retourne une nouvelle instance du
53// portefeuille connecté à un portefeuille du fournisseur
54wallet = walletMnemonic.connect(provider)
55
56// Interrogation du réseau
57wallet.getBalance()
58// { Promise: { BigNumber: "42" } }
59wallet.getTransactionCount()
60// { Promise: 0 }
61
62// Envoi d'Ether
63wallet.sendTransaction(tx)
64
Afficher tout
📋 Copier

Lire les documents complets

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-programme (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}
16
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}]
25
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 carburant 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 dans l'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'
9
📋 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

Web3-wrapper - Alternative Typescript à Web3.js.

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

Complément d'information

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