Comment construire votre première application via web3.js

Ðapp est la forme abrégée de l'application décentralisée, dont le code backend s'exécute sur un réseau p2p (peer-to-peer). Dans cet article, nous nous concentrons sur l'application Ðapp exécutée sur le réseau Ethereum (si vous voulez en savoir plus sur Ethereum, vous pouvez lire le post précédent). Un app est composé de deux parties:

Frontend fournit une interface utilisateur

Backend exécute le calcul et le stockage.

Ðapp Architecture

Il existe plusieurs méthodes pour déployer Ðapp / smart contract. Vous pouvez apprendre à déployer des contrats intelligents sur le réseau privé via truffle dans le post précédent. Vous apprendrez à utiliser web3.js pour déployer une app et créer une interface utilisateur pour la app dans cet article.

  1. Installer MetaMask

Metamask permet aux développeurs d'exécuter Ethereum ÐApps dans votre navigateur sans exécuter de nœud Ethereum complet. Il comprend un coffre-fort d'identité sécurisé, fournissant une interface utilisateur pour gérer vos identités sur différents sites et signer des transactions en chaîne.

Cependant, il n'est supporté que par Google Chrome. Télécharger.

2. Installer Meteor

Meteor est un environnement JavaScript complet qui aide les développeurs à créer l'application Web. Il permet aux développeurs de développer en un seul langage, JavaScript, dans tous les environnements: serveur d'applications, navigateur Web et périphérique mobile. Vous pouvez le télécharger sur votre ligne de commande (sous Linux ou OSX):

$ curl https://install.meteor.com/ | sh

Mais météore est juste un environnement qui fournit un moyen facile de manipuler le front-end et le back-end. Si vous connaissez bien d’autres environnements tels que jQuery, AngularJS, etc., ils constituent également de bons outils pour construire votre Ðapp.

3. Construisez vous Ðapp

$ meteor create dappDemo
$ cd dappDemo
météore

Ensuite, allez à localhost: 3000. Vous pouvez voir une démo par défaut de météore. Vous pouvez vérifier si le web3.js a été installé sur votre météore en ouvrant la console de votre navigateur et en tapant

web3.eth.accounts

Si le web3.js n'a pas été installé, vous pouvez ajouter le paquet vous-même.

$ météore ajouter éthéré: web3

Après avoir construit votre Ðapp, votre dossier dappDemo devrait ressembler à

Avant de créer l'interface utilisateur, nous devons d'abord créer le contrat intelligent. Dans cet article, nous construisons le contrat intelligent de base qui reçoit l'éther de l'expéditeur et le transfère au destinataire. c'est très simple mais cela nous aide à connaître la structure du contrat ethereum. Nous pouvons programmer le contrat via truffle ou le remix du compilateur en ligne. Le code de solidité

solidité du pragma ^ 0.4.0;
contrat payontime {
 adresse publique remise;
 adresse privée remission;
 valeur uint;
/ * Seul le propriétaire peut utiliser cette fonction * /
 modificateur onlyOwner () {
 if (msg.sender! = remitter) jeter;
 _;
 }
/ * Initialise le propriétaire * /
 fonction payontime (destinataire de l'adresse) payable {
 valeur = msg.value;
 remittee = receiver;
 remittee.transfer (valeur);
 }
/ * Obtenez le remissions * /
 function getRemitee () public onlyOwner renvoie (adresse) {
 restitution
 }
}

pragma solidity ^ 0.4.0 déclare la version du compilateur non antérieure à 0.4.0 et ne fonctionnant pas dans 0.5.o (cette deuxième condition est ajoutée à l'aide de ^). payontime est le nom du contrat. Et il existe plusieurs types de types de données de base en solidité.

adresse: valeurs de 160 bits, ne permet pas d'opération arithmétique

uint / int: entiers non signés et signés de différentes tailles

uint8: entier non signé de 8 bits. De plus, uint est un alias pour uint256.

booléen: vrai, faux

byte / bytes32: tableaux d'octets de taille fixe

octets: tableau d'octets de taille dynamique

chaîne de caractères: tableau de caractères de taille dynamique

Le modificateur onlyOwner () limite uniquement le propriétaire du contrat peut utiliser la fonction. modificateur peut être utilisé pour changer facilement le comportement des fonctions. Nous pouvons voir comment il utilise en fonction getRemittee.

Vous pouvez définir des paramètres pour chaque fonction, tout comme notre fonction principale payontime. Parce que c'est pour transférer l'éther dans la fonction payontime, nous devons ajouter un payant sur l'en-tête de la fonction pour indiquer au compilateur que la fonction est utilisée pour payer.

Note: J'utilise virement ici pour envoyer l'argent au destinataire car il sera annulé et le contrat en cours s'arrêtera avec une exception lorsque l'exécution est à court d'essence ou qu'elle échoue de quelque manière que ce soit. Cependant, si nous utilisons send, cela ne renverrait que faux lorsque l'exécution échouera. Par conséquent, les concepteurs doivent vérifier la valeur de retour de send pour s'assurer que le contrat fonctionne correctement. Malheureusement, la fonction de transfert ne prend en charge que la version postérieure à 4.0.10. Truffle ne supporte pas 4.0.10 pour le moment. Donc, si vous voulez utiliser la fonction, vous devez utiliser d'autres compilateurs.

Après avoir terminé notre code de contrat intelligent, nous avons besoin du bytecode et de l’ABI. Il existe un moyen facile de les faire traverser le remix. Ensuite, créez un fichier nommé Payontime.json pour enregistrer l'interface.

Modifier le code de démonstration dans les fichiers client / main.html et client / main.js


  Envoyer Ether </ title>
</ head>
<body>
 <h1> Envoyer un Ether </ h1>
  {{> sendEther}}</pre><pre></ body></pre><pre><template name = "sendEther">
 <div> <label pour = "montant"> montant: </ label> <type d'entrée = "text" id = "montant" placeholder = "unité: eth" /> </ div>
 <div> <label pour = "destinataire"> À l'adresse: </ label> <type d'entrée = "text" id = "destinataire" /> </ div>
 <div> <button id = "send"> Envoyer un Ether </ button> </ div> <br>
 <div> Remittee a {{startBalance}} eth avant d'exécuter le contrat </ div>
 <div> Remittee a {{endBalance}} eth après l'exécution du contrat </ div>
</ template></pre><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567275007847.png" /><p>Ensuite, nous aurions l'interface utilisateur de base de notre app.</p><p>Après avoir terminé l’UI, nous devons modifier le fichier client / main.js pour rendre l’exécutable app exécutable.</p><pre>importer {Template} depuis 'météore / templating';
importer {ReactiveVar} de 'météore / reactif-var';
import payontime_artifacts depuis ‘./lib/Payontime.json’;
importer «./main.html»;</pre><pre>var payontime = web3.eth.contract (payontime_artifacts);
var bytecode = “your_bytecode”;</pre><pre>Template.sendEther.onCreated (
 fonction helloOnCreated () {
 this.start_balance = new ReactiveVar (0);
 this.end_balance = new ReactiveVar (0);
 }
)</pre><pre>Template.sendEther.helpers ({
 startBalance () {
 return Template.instance (). start_balance.get ();
 },
 endBalance () {
 return Template.instance (). end_balance.get ();
 },
});</pre><pre>Template.sendEther.events ({
 'Click #send' (événement, instance) {
 laisser l'expéditeur = web3.eth.Compte [0];
 let receiver = $ (‘# receiver’). val ();
 let eth_amount = $ ('# amount'). val ();
 let amount = web3.toWei (eth_amount, “ether”);</pre><pre>web3.eth.getBalance (destinataire, fonction (erreur, résultat) {
 si (! erreur) {
 console.log (“Avant transfert:“ + résultat);
 instance.start_balance.set (web3.fromWei (result, «ether»));
 }autre{
 console.log (erreur);
 }
 });</pre><pre>// déploie un nouveau contrat, la fonction de rappel s'exécutera deux fois
 var newContract = payontime.new (destinataire, {données: bytecode, à partir de: expéditeur, valeur: montant}, fonction (err, résultat) {
 si (! err) {
 console.log (newContract);
 si (! result.address) {
 console.log (result.transactionHash); // Le hash de la transaction, qui déploie le contrat
 // vérifier l'adresse sur le deuxième appel (contrat déployé)
 } autre {
 var addr = result.address;
 console.log (addr);
 web3.eth.getBalance (destinataire, fonction (erreur, résultat) {
 si (! erreur) {
 console.log (“Après le transfert:“ + résultat);
 instance.end_balance.set (web3.fromWei (result, «ether»));
 }autre{
 console.log (erreur);
 }
 });
 }
 }autre{
 console.log (err);
 }
 });
 }
});</pre><p>payontime.new () consiste à déployer le contrat intelligent sur le réseau. Dans la fonction principale du contrat, payontime (adresse du destinataire), un paramètre, récepteur, est nécessaire. Par conséquent, nous devons passer le paramètre lorsque nous déployons l'application app; pendant ce temps, nous attribuons d’où vient le contrat et combien le remetteur veut envoyer au contrat.</p><p>Après le déploiement du contrat, nous recevrons deux rappels. La première fois, il renvoie une chaîne de 64 longueurs, qui correspond au hachage de transaction. Vous pouvez les utiliser pour suivre une transaction en cours. Il existe un site Web Etherscan qui aide l’utilisateur à suivre sa transaction. Après cela, il renvoie l'adresse du contrat intelligent dans le réseau. Lorsque vous souhaitez appeler le contrat la prochaine fois, l'adresse indique au compilateur le contrat que vous souhaitez utiliser car plusieurs contrats similaires existent dans le réseau.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567275008907.png" /><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567275010945.png" /><p>Le Ðapp fonctionne bien lorsque le solde de la commission augmente après l'envoi de l'éther.</p><p>L'article présente l'application de base de Ðapp. Cependant, les apps peuvent faire plus que envoyer de l'argent, ils peuvent être utilisés pour la transparence des organisations, la chaîne d'approvisionnement, les soins de santé, etc.</p><p>Vous pouvez télécharger le code source ici.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-implement-log-aggregation-for-aws-lambda-9c61e8/" title="Comment implémenter l'agrégation de journaux pour AWS Lambda">Comment implémenter l'agrégation de journaux pour AWS Lambda</a><a href="/article/how-to-design-responsive-layouts-in-framer-d71a8d/" title="Comment concevoir des mises en page réactives dans Framer">Comment concevoir des mises en page réactives dans Framer</a><a href="/article/how-to-find-a-job-in-chile-and-get-a-work-permit-along-the-way-714084/" title="Comment trouver un emploi au Chili (et obtenir un permis de travail en cours de route)">Comment trouver un emploi au Chili (et obtenir un permis de travail en cours de route)</a><a href="/article/how-to-truly-apologize-a2dc7d/" title="Comment s'excuser vraiment">Comment s'excuser vraiment</a><a href="/article/how-to-find-meaningful-work-in-tech-10-companies-to-consider-505e07/" title="Comment trouver du travail utile en technologie: 10 entreprises à prendre en compte">Comment trouver du travail utile en technologie: 10 entreprises à prendre en compte</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="sk flag"></i></a><a href="https://ru.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="ru flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="es flag"></i></a><a href="https://et.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="ee flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="fi flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-build-your-first-app-through-web3-js-4f28f9/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>