Passer au contenu principal

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.

Traduire la page
Voir l'anglais

Aucun bogue ici !🐛

Cette page n'est pas traduite. Nous laissons volontairement cette page en anglais pour le moment.

Bibliothèques d'API JavaScript

Dernière modification: , Invalid DateTime
Modifier la page
(opens in a new tab)

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 cet objectif, chaque client Ethereum implémente la spécification JSON-RPC pour 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 ?

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 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// 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"
19
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.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(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-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 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 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.

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.

Complément d'information

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

Cet article vous a été utile ?