Anzisha uundaji wako wa mwonekano wa mbele wa mfumo mtawanyo wa kimamlaka kwa kutumia create-eth-app

Mara ya mwisho tuliangalia picha kubwa 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 vimeunganishwa 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 mwonekano wa mbele na inakuja na miunganisho kadhaa ya hiari ya kuchagua.

Usakinishaji

Usakinishaji unahitaji Yarn 0.25 au toleo la juu 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/. Ukiwa tayari kupeleka kwenye utendakazi, tengeneza kifurushi kidogo kwa kutumia yarn build. Njia moja rahisi ya kuhifadhi hii itakuwa Netlify (opens in a new tab). Unaweza kuunda repo ya GitHub, kuiongeza kwenye Netlify, kuweka amri ya kujenga na umemaliza! Programu yako itahifadhiwa na itatumika na kila mtu. Na yote hayo bila malipo.

Vipengele

React & create-react-app

Kwanza kabisa, kiini cha 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 hufanya uundaji wa UI ingiliani kuwa rahisi sana. Inaweza isiwe rahisi kwa wanaoanza kama Vue (opens in a new tab), lakini bado inatumika sana, ina vipengele zaidi na muhimu zaidi ina maelfu ya maktaba za ziada za kuchagua. create-react-app hurahisisha sana kuanza nayo pia na inajumuisha:

• Usaidizi wa sintaksia za React, JSX, ES6, TypeScript, Flow.
• Viongezeo vya lugha zaidi ya ES6 kama vile kiendeshaji cha kusambaza object.
• CSS yenye viambishi awali vya kiotomatiki, kwa hivyo huhitaji -webkit- au viambishi vingine.
• Kiendeshaji cha majaribio ya kitengo cha haraka na ingiliani chenye usaidizi uliojengewa ndani kwa ajili ya kuripoti ufikiaji.
• Seva ya uundaji wa moja kwa moja inayoonya kuhusu makosa ya kawaida.
• Hati ya kujenga ya kufunga JS, CSS, na picha kwa ajili ya utendakazi, ikiwa na hashi na ramani za chanzo.

Hasa, create-eth-app inatumia hooks effects (opens in a new tab) mpya. Njia ya kuandika vipengele vyenye nguvu, lakini vidogo sana vinavyoitwa vipengele vya kufanya kazi. Angalia sehemu hapa chini kuhusu Apollo kwa jinsi zinavyotumika katika create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) hukuruhusu kuwa na vifurushi vingi, lakini kuwa na uwezo wa kuvidhibiti vyote kutoka kwenye folda kuu na kusakinisha vitegemezi kwa vyote mara moja kwa kutumia yarn install. Hii ina mantiki hasa kwa vifurushi vidogo vya ziada kama vile usimamizi wa anwani/ABI za mikataba-erevu (taarifa kuhusu wapi ulipeleka mikataba-erevu ipi na jinsi ya kuwasiliana nayo) au muunganisho wa grafu, vyote vikiwa sehemu ya create-eth-app.

ethers.js

Ingawa Web3 (opens in a new tab) bado inatumika sana, 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 iwe Web3 au fikiria kusasisha hadi ethers.js v5 (opens in a new tab) ambayo karibu itoke 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 kuliko API za Restful, hasa kwa data ya mnyororo wa bloku uliogatuliwa. Ikiwa unapenda kujua sababu za hili, angalia GraphQL Will Power the Decentralized Web (opens in a new tab).

Kawaida ungepata data kutoka kwa mkataba-erevu wako moja kwa moja. Unataka kusoma muda wa biashara ya hivi karibuni? Ita tu MyContract.methods.latestTradeTime().call() ambayo hupata data kutoka kwenye nodi ya Ethereum na kuipeleka kwenye mfumo wako mtawanyo wa kimamlaka. Lakini vipi ikiwa unahitaji mamia ya alama za data tofauti? Hiyo ingesababisha mamia ya upataji data kwenye nodi, kila mara ikihitaji RTT (opens in a new tab) na kufanya mfumo wako mtawanyo wa kimamlaka kuwa wa polepole na usio na ufanisi. Njia moja ya kuepuka hili inaweza kuwa kazi ya wito wa kupata ndani ya mkataba wako inayorudisha data nyingi kwa wakati mmoja. Hata hivyo, hii si bora kila wakati.

Na kisha unaweza kupendezwa na data ya kihistoria pia. Unataka kujua sio tu muda wa biashara ya mwisho, bali nyakati za biashara zote ulizowahi kufanya 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-erevu maarufu, huenda tayari kuna grafu ndogo. Angalia kigunduzi cha grafu ndogo (opens in a new tab).

Mara tu unapokuwa na grafu ndogo, inakuruhusu kuandika hoja moja rahisi katika mfumo wako mtawanyo wa kimamlaka inayopata data zote muhimu za mnyororo wa bloku ikiwa ni pamoja na zile za kihistoria unazohitaji, upataji mmoja tu unahitajika.

Apollo

Shukrani kwa muunganisho wa Apollo Boost (opens in a new tab) unaweza kuunganisha grafu kwa urahisi katika mfumo wako mtawanyo wa kimamlaka wa React. Hasa unapotumia React hooks na Apollo (opens in a new tab), kupata data ni rahisi kama kuandika hoja moja ya GraphQl katika kijenzi chako:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Nakala

Violezo

Juu ya hayo unaweza kuchagua kutoka kwa violezo kadhaa tofauti. Kufikia sasa unaweza kutumia muunganisho wa Aave, Compound, UniSwap au Sablier. Zote huongeza anwani muhimu za mikataba-erevu ya huduma pamoja na miunganisho ya grafu ndogo iliyotengenezwa tayari. Ongeza tu kiolezo kwenye amri ya uundaji kama yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) ni soko la kukopesha pesa lililogatuliwa. Waweka amana hutoa ukwasi sokoni ili kupata mapato yasiyotumika, huku wakopaji wakiweza kukopa kwa kutumia dhamana. Kipengele kimoja cha kipekee cha Aave ni mikopo ya haraka (opens in a new tab) inayokuruhusu kukopa pesa bila dhamana yoyote, mradi tu unarejesha mkopo ndani ya muamala mmoja. Hii inaweza kuwa muhimu kwa mfano kwa kukupa pesa za ziada kwenye biashara ya usuluhishi.

Tokeni zinazouzwa na kukupatia riba huitwa aTokens.

Unapochagua kuunganisha Aave na create-eth-app, utapata muunganisho wa grafu ndogo (opens in a new tab). Aave hutumia 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 fomu ghafi (opens in a new tab) au iliyopangiliwa (opens in a new tab).

Compound

Compound (opens in a new tab) inafanana na Aave. Muunganisho tayari unajumuisha Compound v2 Subgraph (opens in a new tab) mpya. Tokeni zinazopata riba hapa kwa mshangao huitwa cTokens.

Uniswap

Uniswap (opens in a new tab) ni soko la kubadilishana fedha lililogatuliwa (DEX). Watoa ukwasi wanaweza kupata ada kwa kutoa tokeni au ether zinazohitajika kwa pande zote mbili za biashara. Inatumika sana na kwa hivyo ina moja ya viwango vya juu zaidi vya ukwasi kwa anuwai kubwa sana ya tokeni. Unaweza kuiunganisha kwa urahisi katika mfumo wako mtawanyo wa kimamlaka ili, kwa mfano, kuwaruhusu watumiaji kubadilisha ETH zao kwa DAI.

Kwa bahati mbaya, wakati wa kuandika hili muunganisho ni wa Uniswap v1 pekee na sio v2 iliyotolewa hivi karibuni (opens in a new tab).

Sablier

Sablier (opens in a new tab) huwaruhusu watumiaji kutiririsha malipo ya pesa. Badala ya siku moja ya malipo, unapata pesa zako kila wakati bila usimamizi zaidi baada ya usanidi wa awali. Muunganisho unajumuisha grafu yake ndogo (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 hatua za kwanza zinazofuata unaweza kutaka kuunganisha mfumo wa UI kama Material UI (opens in a new tab), andika hoja za GraphQL kwa data unayohitaji hasa na uweke usanidi wa upelekaji.

Ukurasa ulihaririwa mwisho: 29 Septemba 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Ona wachangiaji