Anzisha uundaji wa sehemu ya mbele ya programu tumizi iliyogatuliwa (dapp) yako kwa create-eth-app

sehemu ya mbele

JavaScript

ethers.js

the graph

defi

Mwanzilishi

Markus Waas

soliditydeveloper.com

27 Aprili 2020

6 dakika za kusoma

Mara ya mwisho tuliangalia picha kamili ya Solidity (inafunguka katika kichupo kipya) na tayari tulitaja create-eth-app (inafunguka katika kichupo kipya). Sasa utagundua jinsi ya kuitumia, ni vipengele vipi vilivyounganishwa na mawazo ya ziada kuhusu jinsi ya kuipanua. Ilianzishwa na Paul Razvan Berg, mwanzilishi wa Sablier (inafunguka katika kichupo kipya), programu hii itaanzisha uundaji wako wa sehemu ya mbele na inakuja na miunganisho kadhaa ya hiari ya kuchagua.

Usakinishaji

Usakinishaji unahitaji Yarn 0.25 au toleo jipya zaidi (npm install yarn --global). Ni rahisi kama kuendesha:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Inatumia create-react-app (inafunguka katika kichupo kipya) kwa ndani. Ili kuona programu yako, fungua http://localhost:3000/. Unapokuwa tayari kusambaza kwenye uzalishaji, tengeneza kifurushi kilichopunguzwa kwa kutumia yarn build. Njia moja rahisi ya kupangisha hii itakuwa Netlify (inafunguka katika kichupo kipya). Unaweza kuunda hazina ya GitHub, kuiongeza kwenye Netlify, kusanidi amri ya ujenzi na umemaliza! Programu yako itapangishwa na kutumika kwa kila mtu. Na yote haya ni bure.

Vipengele

React na create-react-app

Kwanza kabisa moyo wa programu: React na vipengele vyote vya ziada vinavyokuja na create-react-app. Kutumia hii pekee ni chaguo zuri ikiwa hutaki kuunganisha Ethereum. React (inafunguka katika kichupo kipya) yenyewe inafanya ujenzi wa UI zinazoingiliana kuwa rahisi sana. Inaweza isiwe rafiki kwa wanaoanza kama Vue (inafunguka katika kichupo kipya), lakini bado inatumika zaidi, ina vipengele vingi na muhimu zaidi maelfu ya maktaba za ziada za kuchagua. create-react-app inafanya iwe rahisi sana kuanza nayo pia na inajumuisha:

Usaidizi wa sintaksia ya React, JSX, ES6, TypeScript, Flow.
Ziada za lugha zaidi ya ES6 kama vile opereta ya usambazaji wa kipengee (object spread operator).
CSS iliyowekwa viambishi awali kiotomatiki, kwa hivyo huhitaji -webkit- au viambishi awali vingine.
Kiendesha jaribio la kitengo cha haraka kinachoingiliana na usaidizi uliojengewa ndani wa kuripoti ufikiaji.
Seva ya uundaji ya moja kwa moja inayoonya kuhusu makosa ya kawaida.
Hati ya ujenzi ya kufunga JS, CSS, na picha kwa ajili ya uzalishaji, pamoja na heshi na ramani za chanzo.

create-eth-app haswa inatumia hooks effects (inafunguka katika kichupo kipya) mpya. Njia ya kuandika vipengele vyenye nguvu, lakini vidogo sana vinavyoitwa vipengele vya utendaji. Tazama sehemu iliyo hapa chini kuhusu Apollo kwa jinsi zinavyotumika katika create-eth-app.

Nafasi za Kazi za Yarn

Nafasi za Kazi za Yarn (inafunguka katika kichupo kipya) zinakuruhusu kuwa na vifurushi vingi, lakini kuweza kuvisimamia vyote kutoka kwenye folda kuu na kusakinisha vitegemezi kwa vyote kwa wakati mmoja ukitumia yarn install. Hii inaleta maana hasa kwa vifurushi vidogo vya ziada kama vile usimamizi wa anwani za mikataba mahiri/ABI (taarifa kuhusu wapi ulisambaza mikataba mahiri ipi na jinsi ya kuwasiliana nayo) au muunganisho wa grafu, zote zikiwa sehemu ya create-eth-app.

ethers.js

Ingawa Web3 (inafunguka katika kichupo kipya) bado inatumika zaidi, Ethers.js (inafunguka katika kichupo kipya) imekuwa ikipata mvuto zaidi kama mbadala katika mwaka uliopita na ndiyo iliyounganishwa kwenye create-eth-app. Unaweza kufanya kazi na hii, kuibadilisha kuwa Web3 au kufikiria kusasisha hadi Ethers.js v5 (inafunguka katika kichupo kipya) ambayo inakaribia kutoka kwenye beta.

The Graph

GraphQL (inafunguka katika kichupo kipya) ni njia mbadala ya kushughulikia data ikilinganishwa na API ya Restful (inafunguka katika kichupo kipya). Zina faida kadhaa juu ya API za Restful, hasa kwa data ya mnyororo wa vitalu iliyogatuliwa. Ikiwa una nia ya kujua sababu ya hii, angalia GraphQL Itawasha Wavuti Iliyogatuliwa (inafunguka katika kichupo kipya).

Kawaida ungeleta data kutoka kwenye mkataba mahiri wako moja kwa moja. Unataka kusoma muda wa biashara ya hivi punde? Piga tu MyContract.methods.latestTradeTime().call() ambayo inaleta data kutoka kwenye nodi ya Ethereum hadi kwenye programu tumizi iliyogatuliwa (dapp) yako. Lakini vipi ikiwa unahitaji mamia ya pointi tofauti za data? Hiyo itasababisha mamia ya uletaji wa data kwenye nodi, kila wakati ikihitaji RTT (inafunguka katika kichupo kipya) na kufanya dapp yako kuwa polepole na isiyofaa. Njia moja mbadala inaweza kuwa kitendakazi cha wito wa kuleta ndani ya mkataba wako ambacho kinarudisha data nyingi kwa wakati mmoja. Hata hivyo, hii si bora kila wakati.

Na kisha unaweza pia kuvutiwa na data ya kihistoria. Unataka kujua si tu muda wa biashara ya mwisho, bali nyakati za biashara zote ambazo umewahi kufanya wewe mwenyewe. Tumia kifurushi cha grafu ndogo cha create-eth-app, soma nyaraka (inafunguka katika kichupo kipya) na uibadilishe kulingana na mikataba yako mwenyewe. Ikiwa unatafuta mikataba mahiri maarufu, kunaweza hata kuwa na grafu ndogo tayari. Angalia kigunduzi cha grafu ndogo (inafunguka katika kichupo kipya).

Mara tu unapokuwa na grafu ndogo, inakuruhusu kuandika hoja moja rahisi katika dapp yako ambayo inarejesha data zote muhimu za mnyororo wa vitalu ikiwa ni pamoja na zile za kihistoria unazohitaji, uletaji mmoja tu unahitajika.

Apollo

Shukrani kwa muunganisho wa Apollo Boost (inafunguka katika kichupo kipya) unaweza kuunganisha grafu kwa urahisi katika dapp yako ya React. Hasa unapotumia React hooks na Apollo (inafunguka katika kichupo kipya), kuleta data ni rahisi kama kuandika hoja moja ya GraphQL katika kipengele chako:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Violezo

Zaidi ya hayo unaweza kuchagua kutoka kwa violezo kadhaa tofauti. Kufikia sasa unaweza kutumia muunganisho wa Aave, Compound, Uniswap au Sablier. Zote zinaongeza anwani muhimu za mkataba mahiri wa huduma pamoja na miunganisho ya grafu ndogo iliyotengenezwa tayari. Ongeza tu kiolezo kwenye amri ya kuunda kama yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (inafunguka katika kichupo kipya) ni soko la ukopeshaji pesa lililogatuliwa. Wawekaji amana hutoa ukwasi kwenye soko ili kupata mapato tu, huku wakopaji wakiweza kukopa kwa kutumia dhamana. Kipengele kimoja cha kipekee cha Aave ni hiyo mikopo ya ghafla (inafunguka katika kichupo kipya) ambayo inakuruhusu kukopa pesa bila dhamana yoyote, mradi tu urudishe mkopo ndani ya muamala mmoja. Hii inaweza kuwa muhimu kwa mfano kwa kukupa pesa za ziada kwenye biashara ya usuluhishi (arbitrage trading).

Tokeni zinazofanyiwa biashara ambazo zinakupatia riba zinaitwa aTokens.

Unapochagua kuunganisha Aave na create-eth-app, utapata muunganisho wa grafu ndogo (inafunguka katika kichupo kipya). Aave inatumia The Graph na tayari inakupa grafu ndogo kadhaa zilizo tayari kutumika kwenye Ropsten (inafunguka katika kichupo kipya) na Mtandao Mkuu (inafunguka katika kichupo kipya) katika muundo ghafi (inafunguka katika kichupo kipya) au ulioumbizwa (inafunguka katika kichupo kipya).

Compound

Compound (inafunguka katika kichupo kipya) inafanana na Aave. Muunganisho tayari unajumuisha Grafu ndogo ya Compound v2 (inafunguka katika kichupo kipya) mpya. Tokeni zinazopata riba hapa kwa kushangaza zinaitwa cTokens.

Uniswap

Uniswap (inafunguka katika kichupo kipya) ni soko la kubadilishana lililogatuliwa (DEX). Watoa ukwasi wanaweza kupata ada kwa kutoa tokeni zinazohitajika au Etha kwa pande zote mbili za biashara. Inatumika sana na kwa hivyo ina moja ya ukwasi wa juu zaidi kwa anuwai kubwa sana ya tokeni. Unaweza kuiunganisha kwa urahisi katika dapp yako ili, kwa mfano, kuruhusu watumiaji kubadilisha ETH zao kwa DAI.

Kwa bahati mbaya, wakati wa kuandika haya muunganisho ni wa Uniswap v1 pekee na si v2 iliyotoka hivi karibuni (inafunguka katika kichupo kipya).

Sablier

Sablier (inafunguka katika kichupo kipya) inaruhusu watumiaji kutiririsha malipo ya pesa. Badala ya siku moja ya malipo, kwa kweli unapata pesa zako kila wakati bila usimamizi zaidi baada ya usanidi wa awali. Muunganisho unajumuisha grafu ndogo yake yenyewe (inafunguka katika kichupo kipya).

Nini kinafuata?

Ikiwa una maswali kuhusu create-eth-app, nenda kwenye seva ya jamii ya Sablier (inafunguka katika kichupo kipya), ambapo unaweza kuwasiliana na waandishi wa create-eth-app. Kama baadhi ya hatua zinazofuata za kwanza unaweza kutaka kuunganisha mfumo wa UI kama Material UI (inafunguka katika kichupo kipya), kuandika hoja za GraphQL kwa data unayohitaji haswa na kusanidi usambazaji.