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 (si apre in una nuova scheda) e abbiamo già menzionato create-eth-app (si apre in una nuova scheda). Ora scoprirai come usarla, quali funzionalità sono integrate e ulteriori idee su come espanderla. Creata da Paul Razvan Berg, il fondatore di Sablier (si apre in una nuova scheda), 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 (si apre in una nuova scheda) 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 (si apre in una nuova scheda). 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 (si apre in una nuova scheda) stesso rende la creazione di interfacce utente interattive davvero semplice. Potrebbe non essere così adatto ai principianti come Vue (si apre in una nuova scheda), 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 (si apre in una nuova scheda). 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 (si apre in una nuova scheda) 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 (si apre in una nuova scheda) sia ancora il più utilizzato, ethers.js (si apre in una nuova scheda) 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 (si apre in una nuova scheda) che è quasi fuori dalla fase beta.

The Graph

GraphQL (si apre in una nuova scheda) è un modo alternativo per gestire i dati rispetto a un'API Restful (si apre in una nuova scheda). 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 (si apre in una nuova scheda).

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 (si apre in una nuova scheda) 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 (si apre in una nuova scheda) e adattalo ai tuoi contratti. Se stai cercando smart contract popolari, potrebbe esserci già un sottografo. Dai un'occhiata all'esploratore di sottografi (si apre in una nuova scheda).

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 (si apre in una nuova scheda) puoi integrare facilmente The Graph nella tua dapp React. Soprattutto quando si utilizzano gli hook di React e Apollo (si apre in una nuova scheda), 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 (si apre in una nuova scheda) è 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 (si apre in una nuova scheda) 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 (si apre in una nuova scheda). Aave utilizza The Graph e ti fornisce già diversi sottografi pronti all'uso su Ropsten (si apre in una nuova scheda) e Mainnet (si apre in una nuova scheda) in formato grezzo (si apre in una nuova scheda) o formattato (si apre in una nuova scheda).

Compound

Compound (si apre in una nuova scheda) è simile ad Aave. L'integrazione include già il nuovo sottografo di Compound v2 (si apre in una nuova scheda). I token che maturano interessi qui sono sorprendentemente chiamati cToken.

Uniswap

Uniswap (si apre in una nuova scheda) è 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 (si apre in una nuova scheda).

Sablier

Sablier (si apre in una nuova scheda) 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 (si apre in una nuova scheda).

Quali sono i prossimi passi?

Se hai domande su create-eth-app, vai al server della community di Sablier (si apre in una nuova scheda), 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 (si apre in una nuova scheda), scrivere query GraphQL per i dati di cui hai effettivamente bisogno e configurare la distribuzione.