Kuidas luua oma esimene rakendus rakenduse web3.js kaudu

Ðrakendus on detsentraliseeritud rakenduse lühendatud vorm, mille taustkood töötab p2p (peer-to-peer) võrgus. Selles artiklis keskendume rakenduste käitamisele Ethereumi võrgus (kui soovite rohkem teada saada ethereumist, võite lugeda eelmist postitust). Rakendus koosneb kahest osast:

Frontend pakub kasutajaliidest

Taustprogramm täidab arvutamise ja salvestamise.

Ðrakenduste arhitektuur

Rakenduse / nutika lepingu juurutamiseks on mitu meetodit. Eelmises postituses saate õppida, kuidas nutikaid lepinguid privaatsesse võrku trükkimise kaudu juurutada. Selles artiklis saate teada, kuidas kasutada veeb3.js rakenduse rakenduse juurutamiseks ja rakenduse kasutajaliidese loomiseks.

  1. Installige MetaMask

Metamask võimaldab arendajatel käivitada teie brauseris Ethereum ÐApps ilma ethereumi täielikku sõlme käivitamata. See sisaldab turvalist identiteedivõlvi, pakkudes kasutajaliidest teie identiteetide haldamiseks erinevatel saitidel ja allkirjastamise tehingute allkirjastamiseks.

Kuid seda toetatakse ainult google chrome'is. Lae alla.

2. Installige Meteor

Meteor on JavaScripti täisversioon, mis aitab arendajatel veebirakendust üles ehitada. See võimaldab arendajatel töötada ühes keeles, JavaScriptis, kõigis keskkondades: rakendusserveris, veebibrauseris ja mobiilseadmes. Selle saate alla laadida oma käsurealt (Linuxis või OSX-is):

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

Kuid meteoor on vaid keskkond, mis pakub lihtsat viisi esipaneeli ja taustprogrammiga manipuleerimiseks. Kui olete palju tuttav muude keskkondadega, nagu jQuery, AngularJS jne, on need ka head tööriistad teie rakenduse loomiseks.

3. Ehitage teid üles

$ meteor loob dappDemo
$ cd dappDemo
$ meteoor

Seejärel minge localhost: 3000. Näete meteooride vaikedemo. Saate kontrollida, kas veeb3.js on teie meteoorias installitud, avades brauseri konsooli ja tippides

web3.eth.accounts

Kui web3.js pole installitud, saate paketi ise lisada

$ meteor add ethereum: web3

Pärast oma rakenduse ehitamist peaks teie dappDemo kaust välja nägema

Enne kasutajaliidese tegemist peame kõigepealt nutika lepingu üles ehitama. Selles artiklis loome põhilise nutika lepingu, mis võtab saatjalt eetri vastu ja edastab vastuvõtjale. see on väga lihtne, kuid see aitab meil teada saada eeterumi lepingu ülesehitust. Lepingut saame programmeerida trühvli või veebikompilaatori remiksi kaudu. Kindluse kood

pragma tugevus ^ 0,4,0;
lepingu palgaaeg {
 pöörduda avaliku maksja poole;
 pöörduda eraviisilise komisjoni poole;
 uint väärtus;
/ * Ainult omanik saab seda funktsiooni kasutada * /
 ainult modifikaatorOmanik () {
 if (msg.sender! = saatja) viska;
 _;
 }
/ * Initsialiseerige omanik * /
 funktsiooni palgaaeg (aadressi vastuvõtja) makstav {
 väärtus = msg.väärtus;
 rekomitee = vastuvõtja;
 re Committee.transfer (väärtus);
 }
/ * Hankige komisjon *
 funktsioon getRemitee () ainult avalik Omaniku tagastab (aadress) {
 tagasisaatmise komisjon;
 }
}

pragma kindlus ^ 0.4.0 kuulutab kompilaatori versiooni mitte varem kui 0.4.0 ega tööta versioonis 0.5.o (see teine ​​tingimus lisatakse, kasutades nuppu ^). payontime on lepingu nimi. Ja kindlat tüüpi põhiandmetüüpe on mitut tüüpi.

aadress: 160-bitised väärtused, ärge lubage aritmeetilist operatsiooni

uint / int: erineva suurusega allkirjastamata ja allkirjastamata täisarvud

uint8: allkirjastamata täisarv suurusega 8 bitti. Lisaks on uint varjunimi uint256.

tõeväärtus: tõene, vale

bait / bait32: fikseeritud suurusega baitimassiivid

baiti: dünaamiliselt suurusega baitimassiiv

string: dünaamiliselt suurusega märkide massiiv

ainult modifikaatorOmanik () piirab funktsiooni kasutamist ainult lepingu omanikul. modifikaatorit saab kasutada funktsioonide käitumise hõlpsaks muutmiseks. Näeme, kuidas see funktsiooni getRemittee kasutab.

Saate määrata iga funktsiooni parameetrid, nagu ka meie põhifunktsiooni palgaaeg. Kuna see on eetri ülekandmiseks payontime funktsioonis, peame funktsiooni päisesse lisama tasumisele kuuluva, et öelda kompilaatorile, et funktsiooni kasutatakse maksmiseks.

Märkus. Ma kasutan siin ülekannet raha tagasisaatmiseks komiteele, kuna see võetakse tagasi ja praegune leping peatub erandiga, kui selle täitmine otsa saab või mingil moel ebaõnnestub. Kui aga kasutame saatmist, tagastaks see vale ainult siis, kui täitmine ebaõnnestub. Seetõttu peavad disainerid kontrollima saatmise tagastusväärtust, et veenduda, kas leping töötab hästi. Kahjuks toetab ülekandefunktsioon ainult versiooni pärast 4.0.10. Trühvel ei toeta praegu 4.0.10. Nii et kui soovite funktsiooni kasutada, peate kasutama teisi kompilaatoreid.

Pärast nutika lepingukoodi valmimist vajame baitkoodi ja ABI-d. Remiksimise teel on neid lihtne saada. Järgmisena tehke liidese salvestamiseks fail nimega Payontime.json.

Muutke kliendi / main.html ja kliendi / main.js demo koodi


  saatke eeter 


 

saatke eeter

  {{> sendEther}}

 
summa:
 
aadressiks:
 
Eetri saatmine

 
Remittee'il on enne lepingu täitmist {{startBalance}} eth_div>  
Remittee'il on pärast lepingu täitmist {{endBalance}} eth

Siis oleks meil meie rakenduse põhiline kasutajaliides.

Pärast kasutajaliidese lõpuleviimist peame klienti / main.js modifitseerima, et muuta Ðapp käivitatavaks.

impordi {Template} rakendusest 'meteor / templates';
impordi {ReactiveVar} rakendusest 'meteor / reactive-var';
impordi payontime_artifacts saidist './lib/Payontime.json';
impordi './main.html';
var payontime = web3.eth.contract (payontime_artifacts);
var bytecode = “oma_baidikood”;
Template.sendEther.onCreated (
 funktsioon helloOnCreated () {
 this.start_balance = uus ReactiveVar (0);
 this.end_balance = uus ReactiveVar (0);
 }
);
Template.sendEther.helpers ({
 startBalance () {
 return Template.instance (). start_balance.get ();
 },
 endBalance () {
 return Template.instance (). end_balance.get ();
 },
});
Template.sendEther.events ({
 'Klõpsa #send' (sündmus, juhtum) {
 lase saatjal = web3.eth.accounts [0];
 lase vastuvõtjal = $ ('# vastuvõtja'). val ();
 lase eth_umount = $ ('# summa'). val ();
 las summa = web3.toWei (eth_amount, “eeter”);
web3.eth.getBalance (vastuvõtja, funktsioon (viga, tulemus) {
 if (! viga) {
 console.log (“Enne ülekandmist:“ + tulemus);
 instants.start_balance.set (web3.fromWei (tulemus, “eeter”));
 } veel {
 console.log (viga);
 }
 });
// juurutada uus leping, täidab tagasihelistamisfunktsioon kaks korda
 var newContract = payontime.new (vastuvõtja, {andmed: baitkood, saatjalt: väärtus: summa}, funktsioon (ekslik, tulemus) {
 if (! eksinud) {
 console.log (newContract);
 if (! tulemus.aadress) {
 console.log (tulemus.transactionHash); // Tehingu räsi, mis kasutab lepingut
 // kontrolli teise hanke aadressi (leping on sõlmitud)
 } veel {
 var addr = tulemus.aadress;
 console.log (addr);
 web3.eth.getBalance (vastuvõtja, funktsioon (viga, tulemus) {
 if (! viga) {
 console.log (“Pärast ülekandmist:“ + tulemus);
 instance.end_balance.set (web3.fromWei (tulemus, “eeter”));
 } veel {
 console.log (viga);
 }
 });
 }
 } veel {
 console.log (viga);
 }
 });
 }
});

payontime.new () on nutika lepingu juurutamine võrku. Lepingu põhifunktsiooni palgaaeg (aadressi vastuvõtja) nõuab parameetrit, vastuvõtjat. Seetõttu peame rakenduse loy kasutuselevõtmisel parameetri ületama; vahepeal määrame, kust leping on pärit ja kui palju maksja soovib lepingule saata.

Pärast lepingu juurutamist saame tagasihelistamise kaks korda. Esmakordselt tagastab see 64-pikkuse stringi, mis on tehingu räsi. Neid saate kasutada käimasoleva tehingu jälgimiseks. Etherscanil on veebisait, mis aitab kasutajal oma tehingut jälgida. Pärast seda tagastatakse võrgus aruka lepingu aadress. Kui soovite järgmisel korral lepingule helistada, ütleb aadress kompilaatorile, millist lepingut soovite kasutada, kuna võrgus on mitu sarnast lepingut.

Rakendus töötab hästi, kui retseptide jääk suurenes pärast eetri saatmist.

Artiklis on toodud rakenduse applicationapp põhiline rakendus. Rakendused saavad teha ka enamat kui raha saatmine, neid saab kasutada organisatsiooni läbipaistvuse, tarneahela, tervishoiu jms jaoks.

Lähtekoodi saate alla laadida siit.