Comment créer un DApp avec Truffle, Oraclize, ethereum-bridge et Webpack

Un guide simple sur l'utilisation de données d'API externes dans un frontal Smart Contract

A propos de ce tutoriel

Une fois ce didacticiel terminé, votre DApp (application décentralisée) fonctionnant réagit aux événements émis via un contrat Solidity Smart en utilisant Oraclize pour extraire des données d’API externes de Coinbase. Pour la science!

Bien être:

  • Rédaction et déploiement d'un simple contrat intelligent
  • Mise en place d’un pont ethereum local pour la communication Oracle
  • Récupération de données externes à partir de l'API Coinbase à l'aide d'un serveur Oracle
  • Création d'un frontal personnalisé pour afficher les données de l'API
  • Faire cela dans un environnement de développement local
Remarque
Il y a une capture d'écran de ce que nous allons faire au bas de l'article

À propos de moi

Bonjour, je m'appelle Lander. Je suis un consultant numérique et un constructeur de produits en Belgique. Quand je ne me mêle pas de Solidity, je travaille sur TeamHut, un SaaS destiné à aider les pigistes et les équipes numériques à organiser et à partager leur contenu numérique.

Début

Conditions préalables

  1. Vous pouvez cloner un référentiel git et installer ses dépendances via npm
  2. Vous avez des connaissances de base en HTML, JavaScript, Webpack, terminal,…
  3. Vous souhaitez en savoir plus sur l’utilisation d’Oraclize & Solidity Events

Que ferons-nous?

Nous allons rédiger un contrat intelligent qui récupère des données d’API externes à l’aide d’un serveur Oracle local. Pour ce faire, nous émulerons Oracle avec Ethereum-bridge. Le contrat extrait le prix actuel de l’Ethereum USD de l’API du prix au comptant de Coinbase ETH-USD.

Nous allons créer une simple page HTML indiquant le solde total en ETH de notre contrat, en ETH et en USD. La valeur totale en USD de votre contrat est calculée à l'aide de l'API Coinbase. Les valeurs sont mises à jour automatiquement jusqu'à épuisement des fonds du contrat.

Les outils utilisés

  • Git, NPM
  • Truffe, boîte de Webpack à la truffe, oraclize-api
  • pont éthéré
  • Javascript, Webpack

Qu'est-ce qu'un Oracle?

Les contrats intelligents, de par leur nature, sont capables d'exécuter des calculs et de stocker et de récupérer des données. Comme chaque nœud exécute chaque calcul, il n’est pas pratique (et actuellement impossible) de faire des requêtes réseau arbitraires à partir d’un contrat Ethereum. Oracles comble ce vide en observant la blockchain pour y trouver des événements et en y répondant en publiant les résultats d'une requête dans le contrat. De cette manière, les contrats peuvent interagir avec le monde hors chaîne.

«Les oracles permettent aux données externes, comme dans les données non bloquées, d’être envoyées aux contrats.»

Les oracles sont des sources de données de confiance qui envoient des informations dans le contrat Smart, évitant ainsi aux contrats intelligents d'accéder directement aux informations en dehors de leur réseau, ce qui allège leur charge de travail. Les oracles sont généralement fournis par des tiers et autorisés par les entreprises qui les utilisent.

Le réseau oracle / oracle est la partie chargée de vous connecter à la source de données. Si vous souhaitez en savoir plus sur Oracles, voir ici.

Allons-y

Installer la truffe

Tout d’abord, allumons notre terminal et installons Truffle globalement:

$ npm installer -g truffe

Nous allons utiliser Truffle pour migrer nos contrats, exécuter notre réseau de test de développement et installer Oraclize. C’est un outil essentiel si vous êtes sérieux dans le développement de Solidity.

Créer un nouveau projet Truffle

Créez un nouveau dossier pour notre projet, appelé oraclize-test:

$ mkdir oraclize-test

Naviguez dans le dossier et créez un nouveau projet Truffle.
Nous partons d’une boîte Web Pack de Truffes, ce qui nous facilitera la création du front-end de notre DApp.

$ cd oraclize-test
$ truffle unbox webpack

Ensuite, démarrez le testnet Truffle (testrpc):

$ truffes se développent

Vous devriez voir quelque chose comme ça:

Remarquer:

  1. Comment la deuxième ligne s'imprime
    Truffle Develop a commencé à http://127.0.0.1:9545
    Notez cette combinaison hôte: port, vous en aurez besoin pour démarrer ethereum-bridge.
  2. Le montant des comptes créés (= 10)

Bien, vous avez créé un projet bootstrap Truffle et lancé le réseau de test de développement Truffle. Fermez le réseau de test en appuyant sur (ctrl + c) et continuez en ajoutant Oraclize à Truffle.

Ajoutez Oraclize à la Truffe

Ajouter Oraclize à Truffle et redémarrer le réseau de test de développement Truffle

$ truffle installez oraclize-api
$ truffes se développent

Remarquez comment, après avoir installé oraclize-api, un nouveau dossier a été créé dans notre dossier oraclize-test: installed_contracts. Vous y trouverez le contrat Oraclize appelé usingOraclize.sol dont notre contrat Solidity héritera.

Notre dossier oraclize-test ressemble maintenant à ceci

contenu du dossier oraclize-test

Laissez le testnet actif et ouvrez une nouvelle fenêtre de terminal pour installer ethereum-bridge.

Installer ethereum-bridge

Créez un nouveau dossier (à côté de tooraclize-test) appelé ethereum-bridge
Clonez le référentiel ethereum-bridge et installez ses dépendances:

$ mkdir ethereum-bridge
$ git clone https://github.com/oraclize/ethereum-bridge ethereum-bridge
$ cd ethereum-bridge
$ npm install
Remarque
Nous créons le dossier ethereum-bridge à côté de notre test oraclize car nous pourrons le réutiliser dans des projets ultérieurs.

Vous pouvez exécuter node bridge -a 9 pour démarrer ethereum-bridge. L'argument -a 9 indique à ethereum-bridge d'utiliser le dernier compte créé par notre nœud Truffle Testnet local pour déployer le contrat Oraclize. Cette adresse ne doit être utilisée que pour Oraclize, aucun autre contrat n’est censée l’utiliser.

Le nœud Truffle Testnet crée 10 comptes avec lesquels vous pouvez travailler. Comme leur index est basé sur 0, nous utilisons l’index de 9.

Allez, essayez-le:

$ noeud de pont -a 9

Oups:

Comme vous pouvez le constater, nous avons rencontré une erreur.
Si vous lisez attentivement la ligne ERROR, vous constaterez que ethereum-bridge tente de se connecter à la mauvaise combinaison hôte: port (http: // localhost: 8545).

Cette combinaison doit refléter la combinaison que vous avez notée à l'étape précédente. Dans mon cas, il s’agit de http: // localhost: 9545. Assurez-vous de vérifier que les versions plus anciennes de Truffle utilisaient le port 8545.

Pour résoudre ce problème, démarrez ethereum-bridge en lui disant d'utiliser le bon hôte (-H) et le port (argument -p). Attention aux drapeaux, ils sont sensibles à la casse!

pont de nœud $ -a 9 -H 127.0.0.1 -p 9545 --dev

Le résultat devrait ressembler à ceci:

Recherchez la ligne qui ressemble à:

OAR = OraclizeAddrResolverI (0x6f485C8BF6fc43eA212E93BBF8ce046C7f1cb475)

Remarque
Si vous utilisez un mnémonique différent de celui de Truffle standard, l’adresse ETH indiquée entre parenthèses sera différente.

Assurez-vous d'écrire (copier / coller) la ligne completeOAR afin que nous puissions l'utiliser ultérieurement dans le constructeur de notre contrat. Encore une fois, laissez votre terminal en marche.

À ce stade, vous devriez avoir 2 fenêtres de terminal actives:

  • Votre truffe se développe testnet
  • Votre pont éthéré

Écrire le contrat Solidity Smart

Commençons par un exemple de contrat Smart. Recherchez le dossier des contrats dans le dossier oraclize-test et ajoutez un nouveau fichier OraclizeTest.sol. Cela deviendra le contrat intelligent qui envoie des transactions à Oracle pour récupérer les données de l'API. Copier coller l’essentiel suivant dans le fichier:

Remarque
Assurez-vous de remplacer le OAR = OraclizeAddrResolverI (0x ...); aligner avec celui que vous avez écrit à l'étape précédente.

N'oubliez pas de supprimer cette variable OAR de votre constructeur avant la production, ceci est juste pour le test. En production, le OAR sera automatiquement récupéré en fonction de la chaîne que vous exécutez, actuellement le VM Mainnet, Ropsten et la solidité du navigateur. environnement sont pris en charge.

Lors de la création du contrat, le constructeurOraclizeTest () est en cours d’exécution, ce qui permet au propriétaire de définir l’adresse avec laquelle le contrat est déployé et d’initialiser Oracle. Ensuite, il appelle la fonction update () une fois pour extraire le prix ETH actuel de l'API Coinbase.

La fonction update () vérifie si le contrat contient suffisamment de fonds pour créer une demande d'URL et continue de faire la demande à Oraclize, le cas échéant.

La fonction __callback () est appelée par Oraclize dès que la demande est terminée. Vous pouvez utiliser JSONPATH pour découper la réponse. Voir la documentation ici.

Nous pouvons utiliser le premier paramètre idin de la fonction __callback () pour traiter différentes requêtes. Nous allons sauter cela, car ce n’est qu’un exemple élémentaire.

Compiler le code

Recherchez le dossier de contrats dans oraclize-test et supprimez ConvertLib.sol et MetaCoin.sol. Ce sont des exemples de fichiers, nous n’en aurons pas besoin.

Copiez-collez le code de contrat mentionné ci-dessus dans OraclizeTest.sol et compilez le code à l'aide de

$ compiler des truffes

Si la compilation a réussi, vous devriez voir un nouveau dossier dans oraclize-test appelé build. Ce dossier contient la version compilée de vos contrats intelligents. Vous y trouverez des fichiers *, json contenant le bytecode qui sera déployé par Truffle.

Préparons maintenant Truffle pour déployer notre code sur notre réseau de test de développement.

Mise à jour de la configuration de la truffe

Ouvrez truffle.js dans votre dossier oraclize-test et ajoutez votre environnement de développement:

Ici, nous définissons le réseau de développement (= environnement) et le numéro de port.

Mettre à jour les migrations Truffle

Openoraclize-test / migrations / 2_deploy_contracts.js et modifiez-le pour qu'il ressemble à cet extrait:

Dans cet esprit, nous importons la version compilée du contrat OraclizeTest.sol et expliquons à la migration de Truffle comment migrer le contrat.

Si nous ne le faisions pas, Truffle ne saurait pas quels fichiers déployer. C’est assez classique, jetez un œil à la migration de Truffle si vous êtes intéressé.

Nous finançons le contrat Smart avec 0,5 ETH (500000000000000000 wei) afin de pouvoir parler à Oraclize. ETH doit pouvoir payer le gaz lors de l’envoi de transactions.

Exécutez truffle migrate --develop --reset pour déployer votre contrat sur le réseau de test. Vous devriez voir quelque chose qui ressemble à ceci:

Migration réussie de testnet de développement de Truffle

Ceci exécutera toutes les migrations situées dans le répertoire des migrations de votre projet. Dans leur forme la plus simple, les migrations sont simplement un ensemble de scripts de déploiement gérés. Si vos migrations ont déjà été exécutées avec succès, la migration de truffle démarrera l'exécution à partir de la dernière migration exécutée, en n'exécutant que les migrations nouvellement créées. Si aucune nouvelle migration n’existe, la migration de truffe n’exécutera aucune action. Vous pouvez utiliser l'option --reset pour exécuter toutes vos migrations depuis le début.

Comme vous pouvez le voir sur la capture d'écran, Truffle a déployé le contrat à cette adresse:

0x572309f98e9085f9122fbec9de20a00e19a0476a7cde7e7f84b5a7d168a7520e
Remarque
Si, comme moi, vous constatez des erreurs liées au gaz lorsque vous essayez d'exécuter vos migrations Truffle, essayez de modifier la quantité de gaz mentionnée dans la migration.
Si vous souhaitez obtenir une meilleure estimation, dirigez-vous vers votre terminal testnet de Truffle Development et entrez eth.getBlock ("en attente"). GasLimit.
Utilisez le numéro renvoyé pour résoudre le problème.
Testnet de développement de la truffe Terminal d'estimation de gasLimit

Créer un front-end

Ouvrez le dossier de l'application et éditez index.html pour ressembler à cet extrait:

Pas vraiment de choc ici, je suppose que tout est clair concernant le fichier HTML.

Editez javascripts / app.js pour ressembler à ceci:

J'ai délibérément gardé le JavaScript simple. Les commentaires devraient être suffisants pour une compréhension de base de ce qui se passe.

et éditez stylesheets / app.css pour ressembler à ceci:

Encore une fois, des choses de base. Je suppose que c'est assez clair.

Presque là…

Si vous souhaitez voir votre DApp, allez-y et tournez le front-end:

$ compiler des truffes
$ truffle migrate --development --reset
$ npm run dev

Votre contrat doit être compilé et déployé sur votre réseau de test local de développement. Assurez-vous de recompiler et de re-migrer lorsque vous apportez des modifications au contrat. Truffle-webpack rechargera automatiquement votre serveur lorsqu'il détectera des modifications du contrat. Soigné!

Ouvrez http: // localhost: 8080 et vous devriez voir le fichier HTML indiquant le solde du contrat intelligent et sa valeur en USD après quelques secondes. Les valeurs seront mises à jour automatiquement jusqu'à épuisement des fonds du contrat Smart. N’oubliez pas que nous devons payer pour notre communication Oraclize;).

Si tout se passe bien, vous devriez voir votre interface afficher le solde du contrat Smart en ETH et en USD sous Oraclize et Solidity Events:

Ouvrez http: // localhost: 8080 et vous devriez voir le fichier HTML illustrant le solde du contrat Oraclize Smart Contract et sa valeur en USD. Oraclize utilise l’API Coinbase pour extraire le prix au comptant actuel en ETH / USD et le renvoyer au contrat. Les valeurs initiales continueront à se mettre à jour jusqu'à épuisement des fonds du contrat Smart.

Projet de référence

J'ai chargé un projet de référence vers GitHub au cas où vous auriez des problèmes

Liens intéressants

  • Comprendre les oracles (par Oraclize)
  • Configuration d’une machine Oracle sur AWS d’Amazon
  • Comment Oraclize gère-t-il le secret TSLNotary?

Outils

  • référentiel ethereum-bridge
  • Documentation truffe
  • Documentation Oraclize
  • Documentation de solidité
  • Les codes de carbone
  • ganache
  • Oraclize Remix IDE

Merci d'avoir lu!

J'adorerais avoir de vos nouvelles et savoir ce que vous pensez de mon article.
Faites-le moi savoir si vous pensez qu'il manque quelque chose.

Si vous souhaitez rester en contact, répondez à cet article, suivez-moi sur Twitter ou inscrivez-vous à ma newsletter à l'aide du formulaire ci-dessous.