Treceți la conținutul principal

Ajutați-ne să actualizăm această pagină

🌏

Există o nouă versiune a acestei pagini, dar este doar în limba engleză pentru moment. Ajutați-ne să traducem versiunea cea mai recentă.

Traduceți pagina
Afișați versiunea în limba engleză

Nici o eroare aici!🐛

Această pagină nu este tradusă. Am lăsat în mod intenționat această pagină în limba engleză deocamdată.

Începeţi dezvoltarea aplicației dvs. dapp de frontend cu create-eth-app

create-eth-appfront-endjavascriptethers.jsthe graphaavecompounduniswapsablier
Începător
✍️Markus Waas
📚soliditydeveloper.com
📆27 aprilie 2020
⏱️6 minute de citit

Ultima dată am examinat imaginea Solidity în ansamblu şi am menționat deja create-eth-app. Acum veţi afla cum să o folosiţi, ce funcţionalităţi sunt integrate şi câteva idei suplimentare despre cum să-i dezvoltaţi utilitatea. Lansat de Paul Răzvan Berg, fondatorul Sablier, această aplicație vă va da startul pentru dezvoltarea frontend și pune la dispoziţie mai multe integrări opționale din care să alegeți.

Instalare

Instalarea necesită Yarn 0.25 sau o versiune ulterioară (npm install yarn --global). Este la fel de simplu ca și în cazul în care rulați:

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

Acesta folosește create-react-app în culise. Pentru a vă vedea aplicația, deschideți http://localhost:3000/. Când sunteți gată să vă lansați aplicația în producție, creați un pachet micșorat cu yarn build. O modalitate ușoară de a găzdui această aplicație ar fi prin Netlify. You can create a GitHub repo, add it to Netlify, setup the build command and you are finished! Aplicația dvs. va fi găzduită și utilizabilă pentru toată lumea. Și toate acestea sunt gratuite.

Funcţionalităţi

React & create-react-app

Înainte de toate, esenţa aplicației: React și toate funcțiile adiționale care sunt puse la dispoziţie cu create-react-app. Folosirea acesteia este o opțiune excelentă dacă nu doriți să integraţi Ethereum. React în sine facilitează mult construcția interfețelor grafice interactive. Poate că nu este la fel de uşor de utilizat de către începători ca Vue, dar este cel mai utilizat, având mai multe funcţionalităţi şi, cel mai important, mii de biblioteci suplimentare din care să alegeți. Comanda create-react-app facilitează mult începerea unui nou proiect, incluzând:

  • React, JSX, ES6, TypeScript, suport de sintaxă Flow.
  • Suplimente lingvistice mai mari decât ES6, precum operatorul de răspândire a obiectului.
  • CSS cu autoprefix, deci nu aveţi nevoie de -webkit- sau alte prefixe.
  • Un executor de teste unit rapid și interactiv, cu suport încorporat pentru raportarea acoperirii.
  • Un server live de dezvoltare care avertizează cu privire la greșelile obișnuite.
  • Un script de build pentru JS, CSS și imagini pentru producție, cu hash-uri și sourcemaps.

În special comanda create-eth-app folosește noul efect de hooks. O metodă de scriere a unor aşa-numite componente funcționale puternice, dar foarte mici. Uitaţi-vă mai jos la secțiunea despre Apollo pentru a afla cum sunt folosite în create-eth-app.

Yarn Workspaces

Yarn Workspaces vă permite să aveți mai multe pachete, dar fiind în măsură să le gestioneze pe toate din dosarul rădăcină și să instaleze dependențe pentru toate deodată folosind yarn install. Acest lucru este util în special pentru pachetele suplimentare mai mici, cum ar fi adresele de contracte inteligente/gestionarea ABI (informații privind locul în care ați implementat contractele inteligente și modul de comunicare cu acestea) sau integrarea graficelor, ambele făcând parte din create-eth-app.

ethers.js

Chiar dacă Web3 este încă utilizat cel mai des, sunt mult mai mulţi cei care au aderat la ethers.js ca alternativă în ultimul an și este cel integrat în create-eth-app. Puteți lucra cu acesta, să îl schimbați cu Web3 sau să luați în considerare actualizarea la ethers.js v5, care mai are puţin şi iese din stadiul beta.

The Graph

GraphQL este o alternativă pentru manipularea datelor comparativ cu Restful API. Are mai multe avantaje față de Restful Apis, în special pentru datele descentralizate ale blockchain-ului. Dacă sunteți interesat de raționamentul ce stă la baza acestuia, aruncați o privire la GraphQL Will Power the Decentralized Web.

În mod normal, ați prelua date direct din contractul dvs. inteligent. Doriți să citiți ora ultimei tranzacții? Trebuie doar să apelați MyContract.methods.latestTradeTime().call(), care preia datele dintr-un nod Ethereum precum Infura în aplicația dvs. Dapp. Dar dacă aveți nevoie de sute de puncte de date diferite? Acest lucru ar duce la preluarea a sute de date către nod, de fiecare dată fiind nevoie de un RTT, ceea ce face ca aplicaţia dvs. Dapp să fie înceată și ineficientă. O soluţie ar putea fi o apelare a unei funcții fetcher în cadrul contractului care răspunde prin mai multe date simultan. Totuși, nu este întotdeauna ideal să acţionăm astfel.

În plus, v-ar putea interesa şi nişte date istorice. Vreţi să știți nu numai data ultimei tranzacții, ci și datele pentru toate tranzacțiile pe care le-ați făcut vreodată. Utilizați pachetul subgraph din create-eth-app, citiți documentația și adaptați-l la propriile contracte. Dacă sunteți în căutarea unor contracte inteligente cunoscute, este posibil să existe deja un subgraf. Accesați exploratorul de subgrafuri.

Odată ce aveți un subgraf, acesta vă permite să scrieți o simplă interogare în aplicația dvs. Dapp, care preia toate datele importante din blockchain, inclusiv cele istorice de care aveți nevoie, fiind necesară doar o preluare.

Apollo

Datorită integrării Apollo Boost, puteți integra cu ușurință graful în aplicația dvs. Dapp React. Mai ales când folosiți React hooks și Apollo, preluarea datelor este la fel de simplă ca scrierea unei singure interogări GraphQL în componenta dvs.:

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

Șabloane

În plus, puteți alege dintre mai multe șabloane diferite. Până acum puteți folosi integrarea Aave, Compound, UniSwap sau sablier. Toate acestea adaugă adrese importante pentru contractele de servicii inteligente, precum și integrări prefabricate ale subgrafurilor. Trebuie doar să adăugați șablonul la comanda de creare yarn create eth-app my-eth-app --with-template aave.

Aave

Aave este o piață descentralizată de acordare a împrumuturilor. Depozitarii oferă lichidități pieței pentru a câștiga un venit pasiv, în timp ce debitorii pot lua împrumuturi folosind garanții. O funcţionalitate unică deţinută de Aave o constituie acele împrumuturi flash care vă permit să împrumutați bani fără garanții, atâta timp cât returnați împrumutul printr-o singură tranzacție. Acest lucru poate fi util, de exemplu, oferindu-vă bani în plus pentru tranzacțiile de arbitraj.

Tokenurile tranzacționate de pe urma cărora câştigaţi dobândă se numesc aTokens.

Când optaţi să integrați Aave cu create-eth-app, veți obține integrarea de subgrafuri. Aave uses The Graph and already provides you with several ready-to-use subgraphs on Ropsten and Mainnet in raw or formatted form.

Memă de împrumut flash Aave – "Daaa, dacă aș putea să îmi păstrez împrumutul flash mai mult de 1 tranzacție ar fi perfect"

Compound

Compound este similar cu Aave. Integrarea include deja noul Subgraf-ul Compound v2. Tokenurile câştigătoare de dobândă aici se numesc în mod surprinzător cTokens.

Uniswap

Uniswap este un schimb descentralizat (DEX). Furnizorii de lichidități pot câștiga comisioane prin furnizarea tokenurilor necesare sau ether-ului necesar ambelor părți ale tranzacției. Acesta este utilizat pe scară largă și, prin urmare, are una dintre cele mai mari lichidități pentru o gamă largă de tokenuri. Puteți să îl integrați cu ușurință în aplicația dvs. Dapp, astfel încât aceasta, de exemplu, să permită utilizatorilor să își schimbe ETH-ul în DAI.

Din nefericire, în momentul la care scriem acestea integrarea este doar pentru Uniswap v1, nu și pentru versiunea v2 recent lansată.

Sablier

Sablier permite utilizatorilor să acceseze bani în streaming. În loc de o singură plată, primiți banii în mod constant, fără alte necesităţi de administrare după configurarea inițială. Integrarea include propriul subgraf.

Ce urmează?

Dacă aveți întrebări despre create-eth-app, accesați server-ul comunității Sablier, unde puteți lua legătura cu autorii create-eth-app. Ca primi pași în continuare, ați putea dori integrarea unui framework UI precum Material UI, scrierea de interogări GraphQL pentru datele de care aveți chiar nevoie și configurarea implementării.

Ultima modificare: , Invalid DateTime
Modificați pagina

A fost utilă această pagină?