DApps & Smart Contracts Tutorial

[GUIDA] Come creare una DAPP Ethereum: la parte front-end

Proseguiamo con la seconda parte della nostra guida “Come creare una DAPP Ethereum”. Nella prima parte, pubblicata ieri, abbiamo trattato la parte back-end. Oggi invece, vedremo in dettaglio come realizzare la parte front-end della nostra DAPP Ethereum.

Vi ricordo prima di iniziare, come detto nel precedente articolo, che potete trovare tutto il codice al mio profilo GitLab al seguente indirizzo.

La DAPP in questione sarà una web app e come tale necessiterà di tecnologie web per funzionare a dovere.

dapp ethereum diagramma

Come è possibile vedere dallo schema soprastante la parte di sviluppo front end è necessaria per riuscire ad interagire e visualizzare i dati sulla blockchain sul nostro 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 potrete trovare varie alternative (per esempio a bootstrap o Jquery) ma ci semplificano la vita e rendono la nostra interfaccia più resposive, funzionale e migliore a livello estetico.

Lo scheletro della parte front end è stato preso dal seguente template completamente gratuito di Bootstrap (https://startbootstrap.com/templates/shop-homepage/) 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 potete vedere nell’immagine successiva.

Nel mio caso le librerie Jquery e Web3 sono state scaricate in versione minimizzata e riposte in una nuova cartella denominata vendor.

ethereum dapp smart contract front-end guida 1

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:

ethereum dapp smart contract front-end 2

Per poter richiamare il nostro smart contract è necessario dichiararlo come var nome_smart_contract = web3.eth.contract (ABI smart contract);

ABI e creazione dello Smart Contract

 

ABI è 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 nostro codice javascript.

ABI in sostanza è un file json di lunghezza variabile a seconda dell’implementazione dello smart contract che dovrete copiare e incollare 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

Aprite il file con il vostro editor di testo preferito e copiate e incollate tutto nella funzione.

Altro passo fondamentale sarà quello di specificare l’indirizzo ethereum dello smart contract da noi realizzato.

Per farlo scriviamo var contract= nome_smart_contract.at (“indirizzo_smart_contract”).

L’indirizzo potrete trovarlo su Ganache nelle prime transazioni effettuate.

Se avete proceduto nell’ordine indicato in questa guida dovrebbe essere la terza transazione, sotto la dicitura “contract creation”. Copiate l’indirizzo che trovate indicato come “created contract address” e inseritelo fra apici nella funzione precedente.

ethereum dapp smart contract front-end guida 3

Arrivati a questo punto è possibile interagire correttamente con il nostro smart contract richiamando le funzioni scritte precedentemente e le eventuali variabili pubbliche.

Il funzionamento dello Smart Contract

La funzione principale di questa DAPP Ethereum è quella di acquisto ed è stata definita nello Smart Contract nel seguente modo:

ethereum dapp smart contract front-end 4

Ecco spiegato in breve il suo 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 è abbastanza 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 e 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.

ethereum dapp smart contract front-end 5

Ho poi deciso di creare una seconda pagina denominata “Proprietari.html” al cui interno andiamo a creare dinamicamente una tabella che ad ogni reload della pagina richiama la funzione getBuyers() che restituisce la lista attuale degli indirizzi degli acquirenti delle opere d’arte. Questi dati li usiamo per riempire la tabella. Il tutto viene realizzato nel seguente modo:

ethereum dapp smart contract front-end 6

Se un indirizzo inizia con 0x00 significa che è un indirizzo Ethereum vuoto e che quindi non c’è stato nessun acquirente certificato per la data opera d’arte.

All’interno del body va ovviamente definita una tabella con un appropriato ID in modo da accederci facilmente grazie alla funzione document.getElementById fornita da jQuery.

ethereum dapp smart contract front-end 7

A questo punto l’intera infrastruttura è stata creata e dovrebbe funzionare tutto perfettamente.

Potrete vedere la tabella nella pagina Proprietari aggiornarsi dinamicamente con l’indirizzo dell’acquirente dell’opera d’arte e spostandovi su Ganache potrete 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.

Ricordo infine che potete trovare l’intero codice del progetto sul mio profilo GitLab in modo che possiate consultarlo più facilmente.

Per questa guida inerente a come creare una DAPP Ethereum è tutto!.

Happy coding!

cripto

Vi invitiamo a seguirci sul nostro canale Telegram ed anche sul gruppo ufficiale Telegram, dove sarà possibile discutere insieme delle notizie e dell’andamento del mercato, sulla nostra pagina Facebook e sul nostro account Twitter.


La più grande community italiana dedicata alle criptovalute: Italian Crypto Club (ICC)

Michele Porta

Ingegnere informatico. Da sempre appassionato di tecnologia, hardware e software. Sono entrato nel mondo delle criptovalute negli ultimi anni imparando a fare trading e studiando gli aspetti tecnologici e implementativi delle principali cryptocoin sul mercato. Spero in un futuro privo di contanti e basato sulla sicurezza garantita dalla blockchain.
Follow Me:

Related Posts

Rispondi