Le Web3.0 arrive, est-il compatible avec le front-end ?

Récemment, les appels en faveur du web3.0 sont de plus en plus forts et de plus en plus fous. Pour notre front-end, de quelle technologie avons-nous besoin ? Est-ce convivial pour le front-end ? L’article suivant vous permettra d’en parler, j’espère qu’il vous sera utile ! web3.0 的呼声真的是越来越高，也越来越疯狂。对于我们前端来说，我们需要具备什么技术呢？它对前端友好吗？下面本篇文章就来带大家聊聊，希望对大家有所帮助！

首先先介绍一下 web3.0

Présentons d'abord parlons de la façon dont le web3.0 est dérivé d'Internet

Web1.0

Web2.0

Web3.0

• Web sémantique - C'est la clé du Web3.0 et permet aux machines de traiter facilement les données.

• IA - L'IA est l'un des principaux facteurs clés affectant la popularité de la technologie Web3.0. Il permet aux machines de devenir plus intelligentes grâce à de grandes quantités de données Web pour répondre aux besoins des utilisateurs.

• Graphiques 3D - Le Web3.0 a surpassé l'Internet traditionnel en raison de sa technologie tridimensionnelle, qui offre un monde en ligne tridimensionnel plus réaliste que la 2D.

• Ubiquité – Le concept d'être présent ou partout en même temps, l'essor des appareils mobiles a permis à de nombreuses personnes d'accéder plus facilement à Internet à tout moment et en tout lieu.

• Ouverture et interopérabilité, qui fait référence à l'ouverture en termes d'interfaces de programmation d'applications, de formats de données, de protocoles et d'interopérabilité entre les appareils et les plateformes.

• Référentiel mondial de données, la possibilité d'accéder aux informations à travers les programmes et les réseaux.

Introduction

• Web3 : C'est la connexion entre la blockchain Ethereum et vos Smart Contracts.
• Ethereum : Une blockchain blockchain open source décentralisée qui permet aux utilisateurs d'interagir avec le réseau en créant des contrats intelligents. Sa crypto-monnaie native est Ethereum. Ethereum est la deuxième crypto-monnaie la plus précieuse en termes de capitalisation boursière après Bitcoin. Elle a été créée en 2013 par Vitalik Buterin.
• Contrats intelligents : ce sont des programmes informatiques stockés sur la blockchain qui s'exécutent lorsque des conditions prédéterminées sont remplies. Les contrats intelligents sont rédigés en langage Solidity.
• Décentralisé : le statut des données n'est pas collecté par une entité centrale, une plateforme ou un individu.
• Blockchain : un réseau blockchain est une connexion point à point où les informations sont partagées entre plusieurs appareils, ce qui rend presque impossible le piratage. Il s'agit d'un système d'enregistrement d'informations d'une manière qui rend difficile, voire impossible, la modification des informations enregistrées sur le réseau.
• Solidity : Un langage de programmation orienté objet pour rédiger des contrats intelligents. Il est utilisé pour mettre en œuvre des contrats intelligents sur diverses plateformes blockchain, notamment Ethereum. La syntaxe de Solidity est similaire à javascript. Pour comprendre Solidity, il est préférable d’avoir une formation dans un langage de programmation tel que javascript. Se lancer directement dans Solidity est une mauvaise idée
• Dapp : signifie Decentralized App. Ce sont des applications qui exécutent leur code backend (contrats intelligents principalement écrits en Solidity) sur un réseau décentralisé ou une blockchain. Les Dapps peuvent être créées à l'aide de frameworks front-end tels que React, Vue ou Angular.
• Bitcoin : la première crypto-monnaie largement utilisée au monde.
• Crypto : Également connue sous le nom de Crypto-monnaie, crypto-monnaie, une monnaie numérique décentralisée.
• NFT : Non-Fungible Token, un actif numérique dont la propriété est enregistrée sur la chaîne.
• DAO : Organisation Autonome Décentralisée, organisation autonome décentralisée.
• Metaverse : un concept de monde virtuel créé par des moyens technologiques.
• DeFi Decentralized Finance : Système financier décentralisé.
• Token : Il peut être compris comme le nom collectif des actifs numériques tels que la crypto-monnaie et le NFT.
• GameFi : Game + DeFi, un terme chinois pour les jeux en chaîne. Le système financier du jeu peut être mappé à la réalité grâce aux crypto-monnaies et aux NFT.

Après avoir présenté ce qui précède, parlons de la classification de la blockchain pour les développeurs. Principalement le développement de blockchain de base (les ingénieurs de blockchain de base sont responsables de l'architecture et des protocoles de sécurité du système blockchain) et le développement de logiciels de blockchain (ces développeurs de blockchain créent des Dapps en utilisant l'architecture de conception fournie par les développeurs de blockchain de base).

Démarrer

Regardons de plus près. Pour notre développement front-end, si nous voulons développer des applications décentralisées qui résident et interagissent avec la blockchain, nous devons utiliser les bibliothèques web3.js et Ethers.js.

web3.js

web3.js est une bibliothèque API JavaScript. Pour faire fonctionner un DApp sur Ethereum, nous pouvons utiliser les objets web3 fournis par la bibliothèque web3.js. web3.js communique avec les nœuds locaux via des appels RPC et peut être utilisé avec n'importe quel nœud Ethereum qui expose la couche RPC. web3 contient l'objet eth - web3.eth (spécialisé pour interagir avec la blockchain Ethereum) et l'objet shh - web3.shh (utilisé pour interagir avec Whisper)

L'ajout de web3

introduira web3 dans votre projet, en fait Fondamentalement cohérent avec notre méthode de référence existante

• npm : npm install web3
• bower : bower install web3
• metor : meteor add ethereum:web3
• vanilla : dist./web3.min.js

use

Ensuite, vous devez créer une instance de web3 et configurer un fournisseur. Afin de vous assurer de ne pas écraser un fournisseur existant, comme lors de l'utilisation de Mist, vous devez vérifier si l'instance web3 existe déjà

if (!web3) {
  web3 = new Web3(web3.currentProvider);
} else {
  web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

Étant donné que cette API est conçue pour interagir avec les nœuds RPC locaux, toutes les fonctions utilisent la synchronisation par défaut Requête HTTP. Si vous souhaitez faire une requête asynchrone. La plupart des fonctions permettent de passer une fonction de rappel facultative après la liste des paramètres pour prendre en charge l'asynchrone

web3.eth.getBlock(48, function(error, result){
  if(!error)
      console.log(result)
  else
      console.error(error);
})

Le répertoire spécifique de l'API peutcliquer pour voir

Ethers.js

pour la blockchain Ethereum et son écosystème Le système fournit un Bibliothèque API JavaScript petite mais complète qui était à l'origine utilisée avec ethers.io et a maintenant été étendue en une bibliothèque plus générale. La fonction est fondamentalement similaire à web3.js.

Les caractéristiques sont les suivantes :

• Conservez les clés privées côté client, sûres et dignes de confiance
• Prend en charge l'importation et l'exportation de fichiers de portefeuille JSON (Geth, Parity et crowdsale)
• Créez des objets métaclasse JavaScript à partir de n'importe quel contrat ABI, y compris ABIv2 et les ABI lisibles par l'homme
• Prend en charge la connexion aux nœuds Ethereum via JSON-RPC, INFURA, Etherscan ou MetaMask.
• La bibliothèque est très petite (compressée ~ 88 Ko ; non compressée 284 Ko)

Outils

Bien sûr, en plus de ce qui précède, nous utiliserons également de nombreux outils pour améliorer notre développement

• Truffle : fournit un moyen de utiliser l'environnement de développement Ethereum pour la compilation de machines virtuelles et le test de contrats intelligents, utilisés comme dépendances de construction dans les projets
• Remix IDE : L'environnement parfait pour écrire et utiliser des contrats intelligents, nous pouvons l'utiliser pour créer, modifier et exécuter des contrats intelligents directement à partir du navigateur. C'est plutôt un éditeur
• MetaMask : Une extension Chrome qui vous permet de vous connecter au réseau blockchain Ethereum depuis votre navigateur
• Ganache : Fournit un environnement blockchain local pour tester vos contrats intelligents

Build

Nous voulons créez une pile complèteDapp Si vous souhaitez ajouter une interface utilisateur à votre projet, réagissez.js, vue.js ou angulaire.js sont de bons frameworks front-end javascript car ils peuvent utiliser ethers.js ou web3 .js s'intègre facilement aux réseaux blockchain . Il existe différentes plateformes qui vous permettent de créer des Dapps complètes sans écrire de code telles que : Bunz, Dapp builder, Atra io, Bubble io

Conclusion

Dans l'ensemble, le Web3.0 n'est pas un technologie, mais un concept. Nous, les développeurs front-end, n’avons pas besoin de paniquer, quelle que soit l’évolution de la technologie, nous utiliserons toujours le front-end. Nous pouvons utiliser nos réactifs.js, vue.js ou angulaires.js pour créer notre propre plate-forme pour nos propres applications Dapp développées, ou nous pouvons utiliser nodejs pour la compléter en utilisant web3.js, la boîte à outils fournie par Ethereum. de la compilation du contrat, de la publication et de l'invocation de la méthode contractuelle.

(Partage de vidéos d'apprentissage : Démarrer avec le front-end Web, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!