Dai il via allo sviluppo del frontend della tua dapp con create-eth-app

La volta scorsa abbiamo dato un'occhiata al quadro generale di Solidity (opens in a new tab) e abbiamo già menzionato create-eth-app (opens in a new tab). Ora scoprirai come usarla, quali funzionalità sono integrate e ulteriori idee su come espanderla. Creata da Paul Razvan Berg, il fondatore di Sablier (opens in a new tab), questa app darà il via allo sviluppo del tuo frontend e include diverse integrazioni opzionali tra cui scegliere.

Installazione

L'installazione richiede Yarn 0.25 o versioni successive (npm install yarn --global). È semplice come eseguire:

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

Utilizza create-react-app (opens in a new tab) internamente. Per vedere la tua app, apri http://localhost:3000/. Quando sei pronto per distribuire in produzione, crea un bundle minimizzato con yarn build. Un modo semplice per ospitarla sarebbe Netlify (opens in a new tab). Puoi creare una repository su GitHub, aggiungerla a Netlify, configurare il comando di build e hai finito! La tua app sarà ospitata e utilizzabile da tutti. E tutto questo gratuitamente.

Funzionalità

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 è un'ottima opzione se non vuoi integrare Ethereum. React (opens in a new tab) stesso rende la creazione di interfacce utente interattive davvero semplice. Potrebbe non essere così adatto ai principianti come Vue (opens in a new tab), ma è comunque il più utilizzato, ha più funzionalità e, cosa più importante, migliaia di librerie aggiuntive tra cui scegliere. create-react-app rende anche molto facile iniziare a usarlo e include:

• Supporto per la sintassi di React, JSX, ES6, TypeScript e Flow.
• Funzionalità del linguaggio oltre a ES6, come l'operatore spread per gli oggetti.
• CSS con prefissi automatici, in modo da non aver bisogno di -webkit- o altri prefissi.
• Un esecutore di unit test interattivo e veloce con supporto integrato per i report di copertura.
• Un server di sviluppo live che avvisa degli errori comuni.
• Uno script di build per raggruppare JS, CSS e immagini per la produzione, con hash e sourcemap.

create-eth-app in particolare fa uso dei nuovi hook effect (opens in a new tab). Un metodo per scrivere i cosiddetti componenti funzionali, potenti ma molto piccoli. Vedi la sezione seguente su Apollo per scoprire come vengono utilizzati in create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) ti consente di avere più pacchetti, ma di poterli gestire tutti dalla cartella principale e di installare le dipendenze per tutti in una volta sola usando yarn install. Questo ha senso soprattutto per pacchetti aggiuntivi più piccoli come la gestione degli indirizzi/ABI degli smart contract (le informazioni su dove hai distribuito quali smart contract e come comunicare con essi) o l'integrazione di The Graph, entrambi parte di create-eth-app.

ethers.js

Sebbene Web3 (opens in a new tab) sia ancora il più utilizzato, ethers.js (opens in a new tab) ha ottenuto molta più trazione come alternativa nell'ultimo anno ed è quello integrato in create-eth-app. Puoi lavorare con questo, passare a Web3 o considerare l'aggiornamento a ethers.js v5 (opens in a new tab) che è quasi fuori dalla fase beta.

The Graph

GraphQL (opens in a new tab) è un modo alternativo per gestire i dati rispetto a un'API Restful (opens in a new tab). Presenta diversi vantaggi rispetto alle API Restful, specialmente per i dati decentralizzati della blockchain. Se sei interessato al ragionamento alla base di questo, dai un'occhiata a GraphQL Will Power the Decentralized Web (opens in a new tab).

Di solito recupereresti i dati direttamente dal tuo smart contract. Vuoi leggere l'ora dell'ultimo scambio? Basta chiamare MyContract.methods.latestTradeTime().call() che recupera i dati da un nodo Ethereum nella tua applicazione decentralizzata (dapp). Ma cosa succede se hai bisogno di centinaia di punti dati diversi? Ciò comporterebbe centinaia di recuperi di dati verso il nodo, richiedendo ogni volta un RTT (opens in a new tab) che renderebbe la tua dapp lenta e inefficiente. Una soluzione alternativa potrebbe essere una funzione di chiamata di recupero all'interno del tuo contratto che restituisce più dati contemporaneamente. Tuttavia, questo non è sempre l'ideale.

Inoltre, potresti essere interessato anche ai dati storici. Vuoi conoscere non solo l'ora dell'ultimo scambio, ma gli orari di tutti gli scambi che hai mai effettuato. Usa il pacchetto del sottografo di create-eth-app, leggi la documentazione (opens in a new tab) e adattalo ai tuoi contratti. Se stai cercando smart contract popolari, potrebbe esserci già un sottografo. Dai un'occhiata all'esploratore di sottografi (opens in a new tab).

Una volta che hai un sottografo, ti consente di scrivere una semplice query nella tua dapp che recupera tutti i dati importanti della blockchain, inclusi quelli storici di cui hai bisogno, richiedendo un solo recupero.

Apollo

Grazie all'integrazione di Apollo Boost (opens in a new tab) puoi integrare facilmente The Graph nella tua dapp React. Soprattutto quando si utilizzano gli hook di React e Apollo (opens in a new tab), recuperare i dati è semplice come scrivere una singola query GraphQL nel tuo componente:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Modelli

Inoltre, puoi scegliere tra diversi modelli. Finora puoi utilizzare un'integrazione con Aave, Compound, Uniswap o Sablier. Tutti aggiungono importanti indirizzi di smart contract di servizio insieme a integrazioni di sottografi predefinite. Basta aggiungere il modello al comando di creazione come yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) è un mercato di prestito di denaro decentralizzato. I depositanti forniscono liquidità al mercato per guadagnare un reddito passivo, mentre i mutuatari sono in grado di prendere in prestito utilizzando dei collaterali. Una caratteristica unica di Aave sono i prestiti lampo (opens in a new tab) che ti consentono di prendere in prestito denaro senza alcun collaterale, a patto di restituire il prestito all'interno di una singola transazione. Questo può essere utile, ad esempio, per darti liquidità extra nel trading di arbitraggio.

I token scambiati che ti fanno guadagnare interessi sono chiamati aToken.

Quando scegli di integrare Aave con create-eth-app, otterrai un'integrazione del sottografo (opens in a new tab). Aave utilizza The Graph e ti fornisce già diversi sottografi pronti all'uso su Ropsten (opens in a new tab) e Mainnet (opens in a new tab) in formato grezzo (opens in a new tab) o formattato (opens in a new tab).

Compound

Compound (opens in a new tab) è simile ad Aave. L'integrazione include già il nuovo sottografo di Compound v2 (opens in a new tab). I token che maturano interessi qui sono sorprendentemente chiamati cToken.

Uniswap

Uniswap (opens in a new tab) è un exchange decentralizzato (DEX). I fornitori di liquidità possono guadagnare commissioni fornendo i token o gli ether richiesti per entrambi i lati di uno scambio. È ampiamente utilizzato e pertanto ha una delle liquidità più elevate per una gamma molto ampia di token. Puoi integrarlo facilmente nella tua dapp per consentire agli utenti, ad esempio, di effettuare lo swap dei loro ETH per DAI.

Sfortunatamente, al momento della stesura di questo articolo l'integrazione è solo per Uniswap v1 e non per la v2 appena rilasciata (opens in a new tab).

Sablier

Sablier (opens in a new tab) consente agli utenti di effettuare pagamenti in streaming. Invece di un singolo giorno di paga, ricevi effettivamente i tuoi soldi costantemente senza ulteriore amministrazione dopo la configurazione iniziale. L'integrazione include il proprio sottografo (opens in a new tab).

Quali sono i prossimi passi?

Se hai domande su create-eth-app, vai al server della community di Sablier (opens in a new tab), dove puoi metterti in contatto con gli autori di create-eth-app. Come primi passi successivi potresti voler integrare un framework per l'interfaccia utente come Material UI (opens in a new tab), scrivere query GraphQL per i dati di cui hai effettivamente bisogno e configurare la distribuzione.