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

L'ultima volta abbiamo dato un'occhiata al quadro generale di Solidity(opens in a new tab) e abbiamo già accennato a create-eth-app(opens in a new tab). Ora scoprirai come usarlo, quali funzionalità sono integrate e alcune idee aggiuntive su come approfondilo. Creata da Paul Razvan Berg, fondatore di Sablier(opens in a new tab), quest'app avvierà lo sviluppo del tuo frontend, offrendo diverse integrazioni facoltative 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(opens in a new tab). 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(opens in a new tab). 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(opens in a new tab) stesso rende semplicissima la costruzione di UI interattive. Potrebbe non esser facile per i principianti come Vue(opens in a new tab), 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(opens in a new tab). 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(opens in a new tab) 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(opens in a new tab) è ancora molto usato, nell'ultimo anno ethers.js(opens in a new tab) 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(opens in a new tab), che ha quasi terminato la fase beta.

Graph

GraphQL(opens in a new tab) è un metodo alternativo per gestire i dati rispetto a un'API di Restful(opens in a new tab). 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(opens in a new tab).

Solitamente recupereresti i dati direttamente dal tuo smart contract. Vuoi leggere l'ora dell'ultima operazione? Basta chiamare MyContract.methods.latestTradeTime().call(), che recupera i dati da un nodo di Ethereum nella tua dapp. E se ci fossero centinaia di punti di dati diversi? Ciò risulterebbe in centinaia di recuperi di dati al nodo, richiedendo ogni volta un RTT(opens in a new tab) e rendendo la tua dapp lenta e inefficace. 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(opens in a new tab) e adattalo ai tuoi contratti. Se stai cercando degli smart contract popolari, potrebbe anche esistere già un subgraph. Dai un'occhiata al subgraph explorer(opens in a new tab).

Una volta che hai un grafico secondario, ti consente di scrivere una semplice richiesta nella tua dapp che recuperi tutti i dati importanti della blockchain, inclusi quelli storici che necessiti, tramite un solo recupero necessario.

Apollo

Grazie all'integrazione di Apollo Boost(opens in a new tab), puoi integrare facilmente il grafico nella tua dapp di React. Specialmente quando si utilizzano gli hook di React e Apollo(opens in a new tab), 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])
 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(opens in a new tab) è 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(opens in a new tab) 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(opens in a new tab). Aave usa The Graph e ti fornisce già diversi subgraph pronti all'uso su Ropsten(opens in a new tab) e sulla rete principale(opens in a new tab) in forma grezza(opens in a new tab) o formattata(opens in a new tab).

Compound

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

Uniswap

Uniswap(opens in a new tab) è 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 propri ETH per DAI.

Sfortunatamente, al momento della redazione del del presente articolo, l'integrazione è solo per Uniswap v1 e non per la recente v2(opens in a new tab).

Sablier

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

E poi?

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