Kuinka rakentaa ensimmäinen sovelluksesi web3.js: n kautta

Ðapp on hajautetun sovelluksen lyhennetty muoto, jonka taustakoodi on käynnissä p2p-verkossa (vertaisverkko). Tässä artikkelissa keskitymme heresovelluksen ajamiseen Ethereum-verkossa (jos haluat tietää enemmän ethereumista, voit lukea edellisen viestin). Sovellus koostuu kahdesta osasta:

Frontend tarjoaa käyttöliittymän

Taustaohjelma suorittaa laskennan ja tallennuksen.

Ðsovellusarkkitehtuuri

Ðapp / smart -sovelluksen käyttöönottoon on useita tapoja. Voit oppia älykkäiden sopimusten käyttöönottamisen yksityiseen verkkoon tryffelin avulla edellisestä viestistä. Tässä artikkelissa opit käyttämään web3.js: tä sovelluksen asentamiseen ja käyttöliittymän luomiseen Ð-sovellukselle.

  1. Asenna MetaMask

Metamaskin avulla kehittäjät voivat suorittaa Ethereum ÐApps -sovelluksen selaimessa ajamatta täyttä Ethereum-solmua. Se sisältää suojatun identiteettivarasto, joka tarjoaa käyttöliittymän henkilöllisyytesi hallitsemiseksi eri sivustoilla ja allekirjoitusketjukauppojen allekirjoittamiseksi.

Sitä kuitenkin tuetaan vain google chromissa. Ladata.

2. Asenna Meteor

Meteor on täyspinoinen JavaScript-ympäristö, joka auttaa kehittäjiä rakentamaan verkkosovelluksen. Sen avulla kehittäjät voivat kehittää JavaScriptiä yhdellä kielellä kaikissa ympäristöissä: sovelluspalvelimessa, selaimessa ja mobiililaitteessa. Voit ladata sen komentoriviltä (Linux tai OSX):

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

Mutta meteoriitti on vain ympäristö, joka tarjoaa helpon tavan manipuloida etuosaa ja taustaa. Jos tunnet paljon muita ympäristöjä, kuten jQuery, AngularJS jne., Ne ovat myös hyviä työkaluja sinun rakentamiseen.

3. Rakenna sinulle Ðapp

$ meteor luoda dappDemo
$ cd dappDemo
$ meteori

Siirry sitten localhost: 3000. Voit nähdä meteorin oletusdemon. Voit tarkistaa, onko web3.js asennettu meteorisiisi, avaamalla selaimen konsolin ja kirjoittamalla

web3.eth.accounts

Jos web3.js-tiedostoa ei ole asennettu, voit lisätä paketin itse

$ meteor add ethereum: web3

Kun olet luonut sovelluksen, dappDemo-kansiosi tulisi näyttää

Ennen käyttöliittymän tekemistä meidän on ensin rakennettava älykäs sopimus. Tässä artikkelissa rakennetaan älykäs perussopimus, joka vastaanottaa eetterin lähettäjältä ja siirtää vastaanottajalle. se on hyvin yksinkertainen, mutta se auttaa meitä tuntemaan ethereum-sopimuksen rakenteen. Voimme ohjelmoida sopimuksen tryffelin tai online-kääntäjän remixin avulla. Vakavuuskoodi

pragman vakavuus ^ 0,4,0;
sopimuksen palkka-aika {
 osoittaa julkinen lähettäjä;
 osoite yksityinen valiokunta;
 uint-arvo;
/ * Vain omistaja voi käyttää näitä toimintoja * /
 vain muuttajaOmistaja () {
 if (msg.sender! = lähettäjä) heittää;
 _;
 }
/ * Alusta omistaja * /
 toiminto payontime (osoitteen vastaanottaja) maksetaan {
 arvo = msg.arvo;
 valiokunta = vastaanottaja;
 remittee.transfer (arvo);
 }
/ * Hanki komitea * /
 funktio getRemitee () vain julkinenOmistaja palauttaa (osoite) {
 paluukomitea;
 }
}

pragma-vakavuus ^ 0.4.0 ilmoittaa kääntäjäversion aikaisintaan 0.4.0 eikä toimi 0,5.o: ssa (tämä toinen ehto lisätään käyttämällä ^). payontime on sopimuksen nimi. Ja vakavuudella on useita erilaisia ​​perustietotyyppejä.

osoite: 160-bittiset arvot, älä salli aritmeettista toimintaa

uint / int: erikokoiset allekirjoittamattomat ja allekirjoitetut kokonaisluvut

uint8: Allekirjoittamaton kokonaisluku, jonka koko on 8 bittiä. Lisäksi uint on alias uint256: lle.

boolean: totta, vääriä

tavu / tavut32: Kiinteän koon tavumallit

tavua: Dynaamisesti kokoinen tavuryhmä

merkkijono: Dynaamisesti kokoinen merkkijono

only modifierOwner () rajoittaa vain sopimuksen omistajaa, joka voi käyttää toimintoa. modifikaattorilla voidaan helposti muuttaa toimintojen käyttäytymistä. Voimme nähdä, kuinka sitä käytetään getRemittee-toiminnossa.

Voit asettaa parametreja jokaiselle toiminnolle, aivan kuten päätoiminnon payontime. Koska se on tarkoitettu eetterin siirtämiseen payontime-funktiossa, funktion otsikkoon on lisättävä maksettava, jotta kertoa kääntäjälle, että funktiota käytetään maksamaan.

Huomaa: Käytän tilisiirtoa lähettääkseni rahat valiokunnalle, koska se palautetaan ja nykyinen sopimus lakkaa poikkeuksellisesti, kun täyttämiselle loppuu kaasu tai epäonnistuu millään tavalla. Jos kuitenkin käytämme lähettämistä, se palauttaa väärän vain, kun suorittaminen epäonnistuu. Siksi suunnittelijoiden on tarkistettava lähetysten palautusarvo varmistaakseen, että sopimus toimii hyvin. Valitettavasti siirtotoiminto tukee vain versiota 4.0.10 jälkeen. Tryffeli ei tue 4.0.10 juuri nyt. Joten jos haluat käyttää toimintoa, sinun on käytettävä muita kääntäjiä.

Älykkään sopimuskoodimme valmistumisen jälkeen tarvitsemme tavukoodin ja ABI: n. On helppo tapa saada ne remixin kautta. Seuraavaksi tee tiedosto nimeltä Payontime.json tallentaaksesi käyttöliittymä.

Muokkaa esittelykoodia asiakas / main.html ja asiakas / main.js


  Lähetä eetteri 


 

Lähetä eetteri

  {{> sendEther}}

 
määrä:
 
Osoitteeseen:
 
Lähetä eetteri

 
Remitteellä on {{startBalance}} eth ennen sopimuksen toteuttamista
 
Remitteellä on {{endBalance}} eth sopimuksen toteuttamisen jälkeen

Sitten meillä olisi Ð-sovelluksemme peruskäyttöliittymä.

Suoritetun käyttöliittymän suorittamisen jälkeen meidän on muokattava asiakasta / main.js jotta Ðapp olisi suoritettava.

tuo {malli} 'meteorista / mallinnuksesta';
tuo {ReactiveVar} meteorista / reaktiivisesta varista;
tuo payontime_artifacts from './lib/Payontime.json';
tuo './main.html';
var payontime = web3.eth.contract (payontime_artifacts);
var bytecode = ”oma_koodisi”;
Template.sendEther.onCreated (
 toiminto helloOnCreated () {
 this.start_balance = uusi ReactiveVar (0);
 this.end_balance = uusi ReactiveVar (0);
 }
);
Template.sendEther.helpers ({
 startBalance () {
 return Template.instance (). start_balance.get ();
 },
 endBalance () {
 return Template.instance (). end_balance.get ();
 },
});
Template.sendEther.events ({
 Napsauta #send (tapahtuma, esimerkki) {
 anna lähettäjä = web3.eth.accounts [0];
 anna vastaanottaja = $ ('# vastaanottaja'). val ();
 anna eth_amount = $ ('# määrä'). val ();
 anna määrä = web3.toWei (eth_amount, “eetteri”);
web3.eth.getBalance (vastaanotin, toiminto (virhe, tulos) {
 jos (! virhe) {
 console.log (“Ennen siirtoa:“ + tulos);
 esimerkki.start_tasapaino.set (web3.frWei (tulos, ”eetteri”));
 } Else {
 console.log (virhe);
 }
 });
// ottaa käyttöön uusi sopimus, takaisinsoitto-toiminto suoritetaan kahdesti
 var newContract = payontime.new (vastaanottaja, {data: tavukoodi, lähettäjältä: lähettäjä, arvo: määrä}, toiminto (virhe, tulos) {
 if (! err) {
 console.log (newContract);
 if (! tulos.osoite) {
 console.log (result.transactionHash); // Tapahtuman hajautus, joka käyttää sopimusta
 // tarkista toisen tarjouspyynnön osoite (sopimus on otettu käyttöön)
 } muuta {
 var addr = tulos.osoite;
 console.log (addr);
 web3.eth.getBalance (vastaanotin, toiminto (virhe, tulos) {
 jos (! virhe) {
 console.log (“Siirron jälkeen:“ + tulos);
 esimerkki.end_balance.set (web3.frWei (tulos, “eetteri”));
 } Else {
 console.log (virhe);
 }
 });
 }
 } Else {
 console.log (err);
 }
 });
 }
});

payontime.new () on älykkään sopimuksen käyttöönotto verkkoon. Sopimuksen päätoiminnossa maksuaika (osoitevastaanotin) vaatii parametrin, vastaanottimen. Siksi meidän on läpäistävä parametri, kun otamme käyttöön Ðappin; Sillä välin määrittelemme mistä sopimus on peräisin ja kuinka paljon maksaja haluaa lähettää sopimukseen.

Sopimuksen käyttöönoton jälkeen saamme takaisinsoiton kahdesti. Ensimmäisellä kerralla se palauttaa 64-pituisen merkkijonon, joka on tapahtumahajautus. Niiden avulla voit seurata käynnissä olevaa tapahtumaa. Etherscanilla on verkkosivusto, jonka avulla käyttäjä voi seurata tapahtumaaan. Sen jälkeen se palauttaa älykkään sopimuksen osoitteen verkossa. Kun haluat soittaa sopimukseen seuraavan kerran, osoite kertoo kääntäjälle, mitä sopimusta haluat käyttää, koska verkossa on useita samanlaisia ​​sopimuksia.

Sovellus toimii hyvin, kun komitean tasapaino kasvoi, kun lähetimme eetterin.

Artikkelissa esitetään Ðappin perussovellus. Sovellukset voivat kuitenkin tehdä enemmän kuin lähettää rahaa, niitä voidaan hyödyntää organisaation läpinäkyvyydessä, toimitusketjussa, terveydenhuollossa ja muussa.

Voit ladata lähdekoodin täältä.