Kuidas arendada DAC-d VeChainil (III): komponendid ja kodeerimine

Palju õnne! Olete lõpetanud selle õpetuse viimase osa. Siin paneme kõik, mida me teame, kokku ja teeme kasuliku programmi: VTHO tokeniülekande tööriista. Ametlik sünkroonimine pakub ainult kutsehariduse ja -koolituse ülekandmise funktsioone, meie VTHO tööriistad on status quo väga heaks täienduseks.

Ettevalmistus

Veenduge, et teil oleks järgmised asjad valmis:

  • Sünkroonige arvuti arvutis seadistamine ja töötamine.
  • Testimiskonto, mis on juba sünkroonis esitatud.
  • Teie testimiskontol on mõni kutseharidus ja -koolitus.
  • Sünkroonimine töötab testvõrgus.
Kui te ei tea, kuidas ülalnimetatud nõudeid täidetakse, siis vaadake eelmist osa: https://medium.com/@laalaguer/how-to-develop-a-dapp-on-vechain-ii-setup-walk-around- 109a01bf7ae9

Seadistamine 3 minutiga

Tore! Nüüd hakkame üles ehitama tõelist veebilehte DApp. Pangem kõigepealt üles projekt ja vajadused. Oma sihtasutusena kasutame Vue.js ja BootstrapVue.

> mkdir vtho-transfer
> cd vtho-transfer /
> npm install -g @ vue / cli # install vue-cli.

> vue create -b -n my-project # Looge puhas Vue-projekt.
> cd my-project # Nüüd olete Vue tööruumis!
> npm install vue bootstrap-vue bootstrap # Installi BootstrapVue.
> npm install bignumber.js # matemaatikakogu.
> npm run serve # Alusta arendusserverit taustal.

Oleme kõik valmis! Vaadakem nüüd meie väärtuslikku projekti Sync'is. Avage vahekaart ja liikuge aadressile http: // localhost: 8080. See peaks olema selline:

Kodeerimine

Selle õpetuse pikkuse tõttu kirjutame ühe põhikomponendi ja tutvustame põhifunktsioone. Ülejäänud koodi ja keerukama näite leiate selle õpetuse alt.

Välimus

Rakendus peab olema stiilne! Puhastage vaikimisi main.js ja lisage BootstrapVue teegi, see on üsna lihtne:

Pange komponent radari ekraanile, redigeerides App.vue:

Tore! Salvestage mõlemad failid ja värskendage vahekaarti Sünkroonimine, näiv veebisait näeb nüüd välja selline:

Nüüd, kui meil on skelett, liigume edasi funktsioonide loomiseks, mis muudavad rakenduse elavaks. Looge main.js kõrvale eraldi tühi fail, pange sellele nimeks operatsioonid.js ja pange mitu funktsiooni sinna.

Päringu VTHO saldo küsimine

Olgu, loome kõigepealt funktsiooni, mis pärib VTHO-lepingu VTHO-saldo testvõrgus, tegelikult saab seda kasutada päringute tegemiseks mis tahes VIP180-ga ühilduva lepingu kohta. See peaks olema selline:

Üsna iseenesestmõistetav, see funktsioon getTokenBalance küsib lepingult, kui palju sümboleid kasutaja käes on, kui talle helistame, siis sisestame selle tegeliku lepingu aadressi ja kasutaja konto aadressiga. Pange tähele, et kasutasime connex.js funktsiooni call (), mille tutvustasime eelmises osas.

Allkirjastage tehing ja saatke VTHO

Kuidas tehingule alla kirjutada ja teisele isikule saata? Lihtne, me lihtsalt kasutame ühenduses.js manustatud sisselogimise ja saatmise API-d. Loome funktsiooni ka selleks. Lisage siiski operatsiooni.js see kood:

Ülaltoodud fragment on peamiselt abouttransferToken, mis on üldotstarbeline ülekandetoiming. See võtab lepingu aadressi, saatja aadressi, vastuvõtja aadressi, ülekande summa, seejärel palub ühendusel tehingule alla kirjutada ja välja saata!

Lõpetage nüüd toimingud.js fail eksportimisjaotisega nagu tavaliselt:

Numbrite vormindamine

Nutilises lepingus komakohti ei eksisteeri. Kõik numbrid on täisarvud. Numbrite esitamiseks paremal kümnendkohani võtame seda kümme korda suurema täpsusega. Nii et kui me ütleme: 123.456 inimkeeles, tuleks see esitada järgmiselt:

123.456 * (10 ^ 18) ja seejärel saatke EVM-i. Ja vastupidi.

Seega vajame vahendajana mõningaid utiliite, mis aitaksid meid numbrite vormindamisel. Looge uus fail utils.js ja asetage sisule järgmine sisu:

Tore! Kõik on valmis, nüüd paneme asjad kokku ja muudame oma rakenduse elavaks!

Pange asjad kokku

Aeg minna tagasi App.vue'i, et täita Javascripti jaotis.

Esiteks, helistagem VTHO lepingule ja kuvage meie VTHO saldo, siin on see, mida tegin koodiga:

  • Parandage VTHO nutika lepingu aadressil.
  • Paranda minu konto aadress. (Genereeritud eelmisest õppematerjalide jaotisest)
  • Enne komponendi paigaldamist lähtestage VTHO tasakaalupäring.
Märkus. Konto saldode rekursiivseks küsimiseks võite alati kasutada väärtust ticker (), mitte setTimeout () asemel.

Teiseks lisame nupule funktsiooni VTHO sümboolsete tehingute saatmine, et saaksime hoiatuse saada alati, kui see õnnestub või ebaõnnestub.

Tore! Nüüd värskendage meie malli, et siduda need andmed:

Nüüd on kõik kood valmis, veenduge, et oleksite selle salvestanud:

Kõigi lähtekoodide GitHubi repo: [GitHub Link]

Testige rakendust

Vaadakem nüüd oma esimest triumfi VeChain DApp teekonnal!

Külastage sünkroonimisbrauseris aadressi http: // localhost: 8080 ja tehke järgmist:

  1. Sisestage vastuvõtja: 0x422D582C08d7965cD5Fefef1572faaA15783f473
  2. Sisestage summa: 10 VTHO
  3. Klõpsates väikest sinist nuppu „Transfer“.

Siis oota seda…. maagiline aeg! Sünkroonimine palub mul konto tühistada, et tehing saata:

Muidugi sisestan parooli õigesti ja tehingu üksikasju näete testvõrgus siin:

Lõpuks on meie näide valmis! Täname kõva töö eest!

Üks asi veel

Kui olete huvitatud, on see lähtekood saadaval ka allpool asuvas GitHubis:

https://github.com/laalaguer/token-transfer-demo

VeChaini tokeni täielik edastus on keerulisem, GitHub on allpool:

https://github.com/laalaguer/vechain-token-transfer

Kõik õpetuste jaod:

  • Kuidas arendada DAC-d VeChainil (I) tro Sissejuhatus
  • Kuidas arendada DApp-i VeChainil (II): seadistamine ja jalutamine
  • Kuidas arendada DAC-d VeChainil (III): komponendid ja kodeerimine

Nagu minu õpetused? Sünni abil annetamise ootamine, klõpsates allpool: