Questo tutorial è per i nuovi sviluppatori di Ethereum che vogliono apprendere le basi del collegamento di un Front-End JavaScript a uno Smart Contract. La seguente guida fornisce il minimo indispensabile di ciò che devi sapere.
Introduzione | Come collegare un Front-End Javascript a uno Smart Contract su Ethereum
Come nuovo sviluppatore di dApp, una delle prime cose che devi imparare è come connettere un Front-End a uno Smart Contract. Sapere come sviluppare il front-end nel modo giusto significa essere in grado di creare funzionalità rivolte all’utente in modo gestibile, sano e scalabile.
Questa è un’abilità incredibilmente importante da avere in questo momento poiché una buona UX è una delle maggiori sfide all’adozione diffusa della blockchain.
Una volta ottenuto lo sviluppo del front-end giusto, puoi concentrarti sulla vera innovazione di cui siamo tutti entusiasti: gli Smart Contract.
Quando ho iniziato a studiare lo sviluppo di dApp, è stato molto difficile capire come connettere un frontend a uno Smart Contract. Non esiste un semplice tutorial passo-passo che spieghi le meccaniche di base su come farlo. Come si configura un normale pulsante HTML in modo che quando lo si preme, viene eseguita una funzione su uno Smart Contract?
Capire una cosa basilare come collegare un Front-End Javascript a uno Smart Contract su Ethereum ha richiesto giorni di ricerche, e ho perso molto tempo. Così ho deciso di documentare e condividere un tutorial su come farlo nel modo più corretto.
Quindi di seguito ti condivido i vari step per collegare un Front-End Javascript a uno Smart Contract su Ethereum
Step 1 | Configura MetaMask come provider per Web3.js
La libreria Web3.js ti permette di collegare il tuo Front-End a uno Smart Contract su Ethereum. È l’API JavaScript ufficiale di Ethereum e ti consente di interagire con uno Smart Contract, quindi è necessario configurarlo correttamente.
Per configurare Web3.js sulla tua dApp, devi utilizzare un provider. Un provider consente ai tuoi utenti di interagire con Smart Contracts su Ethereum da una normale interfaccia Web. Senza un provider, ogni utente dovrebbe scaricare l’intero contenuto della blockchain di Ethereum ed eseguirlo come nodo indipendente (e tenerlo costantemente aggiornato con le nuove transazioni). Gli utenti standard non lo faranno mai. Quindi, la tua dApp ha bisogno di un provider.
Per le dApp basate su Ethereum, il provider più comune utilizzato è MetaMask. Come provider, MetaMask collega i tuoi utenti alla rete Ethereum da un’interfaccia Web. È anche un Wallet che consente ai tuoi utenti di pagare, come ad esempio il Gas, quando interagiscono con le dApp.
Gli utenti dovranno installare l’estensione MetaMask Chrome prima di interagire con la tua dApp. Una volta installato, aggiungerà un oggetto ethereum all’oggetto finestra principale del browser. Devi rilevare questo oggetto ethereum e quindi passarlo nel tuo costruttore Web3.
Se non è presente alcun oggetto window.ethereum, è necessario indicare all’utente di installare MetaMask. Quando e come farlo dipende da te, ma ci sono approcci progettuali eleganti che insegno agli sviluppatori.
import Web3 from 'web3'export function setProvider () => {
if (window.ethereum) {
const ethereum = window.ethereum
const web3Provider = new Web3(ethereum)
/* make web3Provider available to your entire app now */
}
}
Dopo aver implementato il codice sopra, spetta a te accertarti che l’istanza di web3Provider sia disponibile per tutta la tua dApp in modo da poter eseguire le chiamate al tuo Smart Contract. Uso Redux, un modello di sviluppo, per organizzare le mie chiamate agli Smart Contract Web3.js e per mantenere lo stato dell’applicazione.
Step 2 | Imposta l’account utente predefinito
Dopo aver rilevato che un utente ha MetaMask installato e dopo averlo impostato come provider per Web3.js come abbiamo fatto nel passaggio precedente, la prossima cosa che devi fare è ottenere l’ID account dell’utente da MetaMask. L’ID account MetaMask è l’ID * ufficiale * di un utente durante l’interazione con le dApp Ethereum.
MetaMask include una funzione chiamata enable() che mostrerà un popup a un utente che richiede l’approvazione prima di esporre gli account utente. È molto simile alla richiesta di accesso alla videocamera o al microfono di un utente. Dovrai eseguire questa funzione per ottenere l’ID account dell’utente.
Una volta che l’utente ha approvato, la funzione enable() restituirà l’ID account dell’utente. Devi prendere gli ID account e trasferirli come account predefinito nella tua istanza Web3.js, altrimenti non sarai in grado di effettuare chiamate Web3.js ai tuoi Smart Contract.
ethereum.enable().then((account) => {
const defaultAccount = account[0]
web3Provider.eth.defaultAccount = defaultAccount
})
Step 3 | Crea l’ABI del tuo Smart Contract
Per consentire al front-end JavaScript di comunicare con uno Smart Contract, è necessario creare quella che viene definita la “definizione ABI” del contratto. La definizione ABI del tuo Smart Contract è un file JSON simile al seguente e fornisce le funzioni disponibili per chiamare il tuo Smart Contract:
[donationlocker]
{
"contractName": "ProofOfExistence",
"abi": [
{
"constant": false,
"inputs": [
{
"name": "assetHash",
"type": "string"
}
],
"name": "registerAsset",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function",
"signature": "0x1ec04081"
}
]
}
[/donationlocker]
Ora presumo che tu stia utilizzando Truffle per sviluppare la tua dApp, il framework più popolare per lo sviluppo di dApp Ethereum. In Truffle, quando si esegue il comando “truffle compile” dalla directory principale della propria dApp, viene creato automaticamente il file di definizione ABI per lo Smart COntract. Dovrai importare questo file di definizione ABI nel tuo codice JavaScript.
Step 4 | Configura il Truffle-Contract
In questo momento, utilizzo una libreria JavaScript chiamata Truffle-Contract per aiutarmi a effettuare chiamate al mio Smart Contract dal codice JavaScript. Questa libreria mi ha aiutato molto; ma ce ne sono altre che potresti prendere in considerazione.
(Nota: molti sviluppatori usano Drizzle per collegare il loro front-end ai loro Smart Contract. Ma Drizzle ha alcuni problemi di UX e documentazione che speriamo ansiosamente vengano risolti quando verrà rilasciato Drizzle 2.0)
La prossima cosa che devi fare è importare il file JSON, la definizione ABI del tuo Smart Contract, quindi importa la libreria Truffle-Contract.
import ProofOfExistence from 'contracts/ProofOfExistence.json' import TruffleContract from 'truffle-contract'
Quindi è necessario passare il file JSON della definizione ABI nel costruttore Truffle-Contract. Una volta fatto, devi semplicemente passare il tuo provider Web3.js che hai impostato nello step 1 al Truffle-Contract e passare anche l’account predefinito recuperato nello step 2.
const ProofOfExContract = TruffleContract(ProofOfExistence)
ProofOfExContract.setProvider(web3Provider.currentProvider)
ProofOfExContract.defaults({from: web3Provider.eth.defaultAccount})
Dopo aver implementato il codice sopra riportato, sarai effettivamente in grado di chiamare le funzioni Smart Contract dal tuo codice JavaScript.
Step 5 | Effettuare le chiamate allo Smart Contract
Infine, sei pronto per effettuare le chiamate al tuo Smart Contract. L’oggetto creato nello step 4 con Truffle-Contract restituisce una Promise denominata .deployed(). All’interno della .then() sarai in grado di ottenere un riferimento al tuo Smart Contract e di chiamare le funzioni appropriate su di esso, proprio come in questo caso.
[donationlocker]
ProofOfExContract.deployed().then((poe) => {
return poe.registerAsset(assetHash)
})
[/donationlocker]
Questo è tutto! Ora hai effettuato con successo una chiamata al tuo Smart Contract dalla tua interfaccia utente.
Prossimi Step
Se stai leggendo questa guida per la prima volta, potresti essere ancora confuso. Va bene, sei nuovo nello sviluppo di dApp e c’è molto da imparare.
Ti consiglio di leggere, Solidity: la guida definitiva