Nella prima parte della guida “Come creare una DAPP Ethereum” è stata trattata la parte back-end. In questa seconda parte si andrà a vedere nel dettaglio come realizzare la parte front-end della DAPP Ethereum.
Prima di iniziare, come scritto nel precedente articolo, è possibile trovare tutto il codice su questo profilo GitLab.
La DAPP in questione sarà una web app e come tale necessiterà di tecnologie web per funzionare a dovere.
Come è possibile vedere dallo schema soprastante la parte di sviluppo front-end è necessaria per riuscire ad interagire e visualizzare i dati sulla blockchain attraverso un browser.
Come creare una DAPP Ethereum
Tecnologie utilizzate in questo progetto:
Alcune delle tecnologie sopra menzionate non sono per forza necessarie e per alcune di esse è possibile trovare varie alternative (per esempio a bootstrap o Jquery) ma semplificano il lavoro e rendono l’ interfaccia più resposive, funzionale e migliore a livello estetico.
Lo scheletro della parte front-end è stato preso dal seguente template completamente gratuito di Bootstrap, ma è stato con il tempo modellato ed espanso con varie modifiche.
L’implementazione
Il cuore pulsante che permette il collegamento fra la blockchain Ethereum e la parte front-end avviene grazie alla libreria Web3.js, che, come per le altre librerie presenti per la realizzazione di questo progetto, devono essere richiamate nel codice prima dell’effettivo utilizzo.
Solitamente è buona norma richiamarle all’interno del tag <head>, come possibile vedere dall’immagine successiva.
In questo caso le librerie Jquery e Web3 sono state scaricate in versione minimizzata e riposte in una nuova cartella denominata vendor.
Il secondo passaggio necessario è definire l’istanza dell’oggetto Web3 in cui andrà specificato l’indirizzo locale in cui si trova la blockchain Ethereum, nel seguente modo:
Per poter richiamare lo smart contract precedentemente sviluppato è necessario dichiararlo come var nome_smart_contract = web3.eth.contract (ABI smart contract);
ABI e creazione dello Smart Contract
ABI è l’acronimo di application binary interface e non è altro che l’interfaccia necessaria per fare da ponte fra lo smart contract scritto in Solidity e il codice javascript.
In sostanza si tratta di un file json, di lunghezza variabile a seconda dell’implementazione dello smart contract, che deve essere copiato e incollato all’interno delle parentesi tonde.
Per ottenere facilmente l’ABI è necessario procedere nel seguente modo:
- Dalla powershell digitare: npm install -g truffle-export-abi
- Digitare successivamente: truffle-export-abi
- Il file ABI verrà creato nella cartella build
Aprire il file con un editor di testo e copiare e incollare tutto all’interno della funzione.
Altro passaggio fondamentale sarà quello di specificare l’indirizzo Ethereum dello smart contract realizzato.
Per farlo basterà scrivere var contract= nome_smart_contract.at (“indirizzo_smart_contract”).
L’indirizzo è facilmente individuabile su Ganache nelle prime transazioni effettuate.
Procedendo nell’esatto ordine indicato in questa guida dovrebbe trovarsi alla terza transazione, sotto la dicitura “contract creation”. Ora va copiato l’indirizzo che si trova indicato come “created contract address” e va inserito fra apici nella funzione precedente.
Arrivati a questo punto è possibile interagire correttamente con lo smart contract richiamando le funzioni scritte precedentemente e gli eventuali attributi pubblici.
Il funzionamento dello Smart Contract
La funzione principale di questa DAPP Ethereum è quella di acquisto ed è stata definita nello smart contract nel seguente modo:
Ecco spiegato in breve il proprio compito.
Essa prende in ingresso l’ID dell’opera d’arte e il suo costo. Dopodiché viene preso l’indirizzo dell’acquirente e del venditore. Viene controllato se il saldo dell’acquirente è sufficiente per potersi permettere l’oggetto e in caso positivo viene richiamato lo smart contract per certificare l’acquisto su blockchain. Inoltre, viene effettuata la transazione in cui vengono spostati gli ether necessari all’acquisto dall’indirizzo dell’acquirente a quello del venditore.
In seconda battuta un pop up compare a schermo per avvisare l’utente del successo o dell’insuccesso dell’operazione. Dopo di che viene ricaricata la pagina per permettere l’aggiornamento della homepage in modo tale da far sì che le opere d’arte già acquistate vengano assegnate come vendute e non sia possibile effettuare un secondo acquisto dello stesso prodotto. Questa possibilità viene negata attraverso l’interfaccia grafica ma in ogni caso non sarebbe possibile acquistare due volte lo stesso elemento per il controllo inserito nello smart contract.
La funzione di acquisto viene poi richiamata all’interno nella funzione onclick di ogni card che rappresenta l’opera d’arte messa in vendita, come mostrato nell’immagine qui sotto.
La tabella Proprietari
È stata creata una seconda pagina denominata “Proprietari.html” al cui interno è stata realizzata dinamicamente una tabella che ad ogni reload della pagina richiama la funzione getBuyers(). Essa restituisce la lista attuale degli indirizzi degli acquirenti delle opere d’arte. Questi dati vengono utilizzati per riempire la tabella.
Il tutto viene realizzato nel seguente modo:
Se un indirizzo inizia con “0x00” significa che è un indirizzo Ethereum vuoto e che di conseguenza non c’è stato nessun acquirente certificato per la data opera d’arte.
All’interno del body va definita una tabella con un appropriato ID in modo da accedervi facilmente grazie alla funzione document.getElementById fornita da jQuery.
A questo punto l’intera infrastruttura è stata creata e dovrebbe funzionare tutto perfettamente.
La tabella nella pagina Proprietari si aggiornerà dinamicamente con l’indirizzo dell’acquirente dell’opera d’arte e recandosi su Ganache si potrà vedere ogni singola chiamata allo smart contract che certifica la proprietà da parte di un indirizzo di una data opera d’arte.
La proprietà è garantita dal fatto che solo l’effettivo proprietario di quell’indirizzo Ethereum può accedere al wallet corrispondente attraverso la propria chiave privata.
Potete trovare l’intero codice del progetto, contenente sia la parte back-end che quella front-end, su questo profilo GitLab.
