Vai al contenuto principale

Aiuta ad aggiornare questa pagina

🌏

C'è una nuova versione di questa pagina, ma al momento è solo in inglese. Aiutaci a tradurre l'ultima versione.

Traduci la pagina
Visualizza in inglese

Nessun bug qui!🐛

Questa pagina non è stata tradotta. Per il momento, è stata intenzionalmente lasciata in inglese.

Avvia lo sviluppo del frontend della tua dapp con create-eth-app

create-eth-app
frontend
javascript
ethers.js
the graph
aave
compound
uniswap
sablier
Principiante
✍Markus Waas
📚soliditydeveloper.com
📆27 aprile 2020
⏱️6 minuti letti

L'ultima volta abbiamo dato un'occhiata al quadro generale di Solidity e abbiamo già accennato a create-eth-app. Ora scoprirai come usarlo, quali funzionalità sono integrate e alcune idee aggiuntive su come approfondilo. Creata da Paul Razvan Berg, fondatore di Sablier, quest'app avvierà lo sviluppo del tuo frontend, offrendo diverse integrazioni opzionali tra cui scegliere.

Installazione

L'installazione richiede Yarn 0.25 o superiore (npm install yarn -- global). L'esecuzione è semplicissima:

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

Come sistema sottostante utilizza create-react-app. Per vedere la tua app, apri http://localhost:3000/. Quando sei pronto a distribuire in produzione, crea un pacchetto minimizzato con yarn build. Un modo facile per ospitarlo sarebbe Netlify. Puoi creare una repo di GitHub, aggiungerla a Netlify, configurare il comando build e hai finito! La tua app sarà ospitata e utilizzabile da tutti. E tutto gratuitamente.

Caratteristiche

React e create-react-app

Prima di tutto, il cuore dell'app: React e tutte le funzionalità aggiuntive fornite con create-react-app. Usare solo questo strumento è un'ottima opzione se non vuoi integrare Ethereum. React stesso rende semplicissima la costruzione di UI interattive. Potrebbe non esser facile per i principianti come Vue, ma è comunque molto usato, ha più funzionalità e, soprattutto, ha migliaia di librerie aggiuntive tra cui scegliere. create-react-app è facilissimo per iniziare e include:

  • Supporto alla sintassi di React, JSX, ES6, TypeScript, Flow.
  • Extra linguistici oltre ES6 come l'operatore di diffusione dell'oggetto.
  • CSS auto-prefissato, così da non necessitare -webkit- o altri prefissi.
  • Un veloce esecutore di test unitari interattivi con supporto integrato per la segnalazione della copertura.
  • Un server di sviluppo live che avverte degli errori comuni.
  • Uno script di costruzione per riunire JS, CSS e immagini per la produzione, con hash e mappe sorgente.

create-eth-app in particolare, fa uso dei nuovi effetti hook. Un metodo per scrivere componenti funzionali potenti ma molto piccoli. Vedi di seguito la sezione su Apollo per capire come vengono usati in create-eth-app.

Yarn Workspaces

Yarn Workspaces ti consente di utilizzare più pacchetti e di gestirli tutti dalla cartella di root e installare le dipendenze per tutti in una volta, usando yarn install. Ciò è utile soprattutto per i pacchetti aggiuntivi più piccoli, come la gestione di indirizzi/ABI degli smart contract (le informazioni su dove hai distribuito quali smart contract e come comunicare con essi) o l'integrazione di Graph, entrambi parte di create-eth-app.

ethers.js

Mentre Web3 è ancora molto usato, nell'ultimo anno ethers.js ha riscosso molto successo come strumento alternativo ed è integrato in create-eth-app. Puoi lavorare con questo strumento, passare a Web3 o considerare di aggiornare a ethers.js v5, che ha quasi terminato la fase beta.

Graph

GraphQL è un metodo alternativo per gestire i dati rispetto a un'API di Restful. Ha diversi vantaggi rispetto alle Api di Restful, specialmente per i dati della blockchain decentralizzata. Se sei interessato al ragionamento dietro questo metodo, dai un'occhiata a GraphQL Will Power the Decentralized Web.

Solitamente recupereresti i dati direttamente dal tuo smart contract. Vuoi leggere l'ora dell'ultima operazione? Basta chiamare MyContract.methods.latestTradeTime().call() per recuperare i dati da un nodo di Ethereum come Infura nella tua Dapp. E se ci fossero centinaia di punti di dati diversi? Ne deriverebbero centinaia di recuperi di dati al nodo, richiedendo ogni volta un RTT e rendendo lenta e inefficiente la tua Dapp. Una scappatoia potrebbe essere una funzione di chiamata del recuperatore nel tuo contratto, in modo da restituire più dati in una volta. Questa soluzione però non è sempre ideale.

E poi potresti essere interessato anche ai dati storici. Vuoi sapere non solo l'orario dell'ultima operazione, ma gli orari per tutte le operazioni che tu stesso hai mai eseguito? Usa il pacchetto subgraph create-eth-app, leggi la documentazione e adattalo ai tuoi contratti. Se stai cercando degli smart contract popolari, potrebbe anche esistere già un subgraph. Dai un'occhiata al subgraph explorer.

Una volta che hai un subgraph, ti consente di scrivere una semplice query nella tua Dapp che recuperi tutti i dati importanti della blockchain, inclusi quelli storici di cui hai bisogno, in un solo recupero.

Apollo

Grazie all'integrazione di Apollo Boost, puoi facilmente integrare il grafico nella tua Dapp di React. Specialmente quando si utilizzano gli hook di React e Apollo, recuperare i dati è tanto facile quanto scrivere una singola query di GraphQL nel tuo componente:

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

Modelli

Inoltre, puoi scegliere tra diversi modelli. Finora puoi usare un'integrazione di Aave, Compound, Uniswap o Sablier. Aggiungono tutti importanti indirizzi di servizi degli smart contract con integrazioni di subgraph pre-realizzate. Basta aggiungere il modello al comando di creazione come in yarn create eth-app my-eth-app --with-template aave.

Aave

Aave è un mercato per il prestito di denaro decentralizzato. I depositanti forniscono liquidità al mercato per guadagnare un reddito passivo, mentre i debitori possono prendere in prestito usando garanzie. Una funzionalità unica di Aave sono quei prestiti flash che ti consentono di prendere in prestito denaro senza alcuna garanzia, finché restituisci il prestito entro una transazione. Questo può essere utile, ad esempio, per fornirti denaro extra sul trading d'arbitraggio.

I token scambiati che ti fanno guadagnare interessi si chiamano aTokens.

Quando scegli di integrare Aave con create-eth-app, otterrai un'integrazione del subgraph. Aave usa The Graph e ti fornisce già diversi subgraph pronti all'uso su Ropsten e sulla rete principale in forma grezza o formattata.

Meme sui Prestiti Flash di Aave – "Eh già... se potessi mantenere il mio prestito flash per più di una transazione, sarebbe fantastico"

Compound

Compound è simile ad Aave. L'integrazione include già il nuovo Compound v2 Subgraph. A gran sorpresa, qui i token che guadagnano interessi sono chiamati cToken.

Uniswap

Uniswap è uno scambio decentralizzato (DEX). I fornitori di liquidità possono guadagnare commissioni fornendo i token richiesti o ether per ambe le parti di uno scambio. È ampiamente usato e dunque ha una delle liquidità più elevate per una gamma davvero ampia di token. Puoi integrarla facilmente nella tua Dapp, ad esempio per consentire agli utenti di scambiare i loro ETH per DAI.

Sfortunatamente, al momento della redazione del del presente articolo, l'integrazione è solo per Uniswap v1 e non per la recente v2.

Sablier

Sablier consente agli utenti di trasmettere pagamenti in denaro. Invece di un singolo giorno di pagamento, in realtà puoi ricevere denaro costantemente senza ulteriore amministrazione dopo la configurazione iniziale. L'integrazione include i propri subgraph.

E poi?

Se hai domande su create-eth-app, vai al server della community di Sablier, dove puoi contattare gli autori di create-eth-app. Come passaggi iniziali, potrebbe essere utile integrare un framework dell'UI come Material UI, scrivere query di GraphQL per i dati che ti servono realmente e configurare la distribuzione.

Ultima modifica: , Invalid DateTime
Modifica la pagina

Questa pagina è stata utile?