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

Mara ya mwisho tuliangalia picha kamili ya Solidity (opens in a new tab) na tayari tulitaja create-eth-app (opens in a new tab). 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 (opens in a new tab), 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 (opens in a new tab) 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 (opens in a new tab). 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 (opens in a new tab) yenyewe inafanya ujenzi wa UI zinazoingiliana kuwa rahisi sana. Inaweza isiwe rafiki kwa wanaoanza kama Vue (opens in a new tab), 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) bado inatumika zaidi, Ethers.js (opens in a new tab) 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 (opens in a new tab) ambayo inakaribia kutoka kwenye beta.

The Graph

GraphQL (opens in a new tab) ni njia mbadala ya kushughulikia data ikilinganishwa na API ya Restful (opens in a new tab). 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 (opens in a new tab).

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 (opens in a new tab) 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 (opens in a new tab) na uibadilishe kulingana na mikataba yako mwenyewe. Ikiwa unatafuta mikataba mahiri maarufu, kunaweza hata kuwa na grafu ndogo tayari. Angalia kigunduzi cha grafu ndogo (opens in a new tab).

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 (opens in a new tab) unaweza kuunganisha grafu kwa urahisi katika dapp yako ya React. Hasa unapotumia React hooks na Apollo (opens in a new tab), 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab). Aave inatumia The Graph na tayari inakupa grafu ndogo kadhaa zilizo tayari kutumika kwenye Ropsten (opens in a new tab) na Mtandao Mkuu (opens in a new tab) katika muundo ghafi (opens in a new tab) au ulioumbizwa (opens in a new tab).

Compound

Compound (opens in a new tab) inafanana na Aave. Muunganisho tayari unajumuisha Grafu ndogo ya Compound v2 (opens in a new tab) mpya. Tokeni zinazopata riba hapa kwa kushangaza zinaitwa cTokens.

Uniswap

Uniswap (opens in a new tab) 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 (opens in a new tab).

Sablier

Sablier (opens in a new tab) 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 (opens in a new tab).

Nini kinafuata?

Ikiwa una maswali kuhusu create-eth-app, nenda kwenye seva ya jamii ya Sablier (opens in a new tab), 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 (opens in a new tab), kuandika hoja za GraphQL kwa data unayohitaji haswa na kusanidi usambazaji.