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à 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 avvierà lo sviluppo del tuo frontend e include diverse integrazioni opzionali tra cui scegliere.
Installazione
L'installazione richiede Yarn 0.25 o superiore (npm install yarn --global). È semplice come eseguire:
yarn create eth-app my-eth-appcd my-eth-appyarn react-app:startUtilizza create-react-app (opens in a new tab) dietro le quinte. Per vedere la tua app, apri http://localhost:3000/. Quando sei pronto per la distribuzione in produzione, crea un pacchetto minimizzato con yarn build. Un modo semplice per ospitarlo sarebbe Netlify (opens in a new tab). Puoi creare un repository GitHub, aggiungerlo 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 adatto ai principianti quanto 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. Anche create-react-app rende davvero facile iniziare a usarlo e include:
- Supporto per la sintassi di React, JSX, ES6, TypeScript e Flow.
- Extra del linguaggio oltre a ES6 come l'operatore spread per gli oggetti.
- CSS con prefissi automatici, così non hai bisogno di -webkit- o altri prefissi.
- Un esecutore di test unitari 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.
In particolare, create-eth-app fa uso dei nuovi effetti degli hook (opens in a new tab). Un metodo per scrivere componenti cosiddetti funzionali potenti, ma molto piccoli. Consulta 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 particolarmente senso per pacchetti aggiuntivi più piccoli come la gestione degli indirizzi/ABI dei contratti intelligenti (le informazioni su dove hai distribuito quali contratti intelligenti 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). Hanno 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 contratto intelligente. Vuoi leggere l'ora dell'ultimo scambio? Basta chiamare MyContract.methods.latestTradeTime().call() che recupera i dati da un nodo di Ethereum nella tua 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 rende 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.
E poi 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 tu stesso. Usa il pacchetto subgraph di create-eth-app, leggi la documentazione (opens in a new tab) e adattalo ai tuoi contratti. Se stai cercando contratti intelligenti 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 facilmente integrare The Graph nella tua dApp React. Specialmente quando si usano gli hook di React e Apollo (opens in a new tab), recuperare i dati è semplice come scrivere una singola query 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])Modelli
Inoltre puoi scegliere tra diversi modelli. Finora puoi usare un'integrazione Aave, Compound, UniSwap o Sablier. Tutti aggiungono importanti indirizzi di contratti intelligenti 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 collaterali. Una caratteristica unica di Aave sono i prestiti lampo (flash loan) (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 usa The Graph e ti fornisce già diversi sottografi 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 sottografo Compound v2 (opens in a new tab). I token che guadagnano 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 quindi ha una delle liquidità più elevate per una gamma molto ampia di token. Puoi facilmente integrarlo nella tua dApp per, ad esempio, consentire agli utenti di scambiare i 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 trasmettere pagamenti in denaro in streaming. Invece di un singolo giorno di paga, ottieni effettivamente i tuoi soldi costantemente senza ulteriore amministrazione dopo la configurazione iniziale. L'integrazione include il suo sottografo dedicato (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.
Ultimo aggiornamento della pagina: 3 marzo 2026
