Negli ultimi mesi ho iniziato ad approfondire il tema del web3 e chi segue il mio blog avrà sicuramente già letto qualche mia riflessione a riguardo (qui o qua, e se non siete ancora iscritti alla newsletter cliccate quo 🙂 ). Questo nuovo trend mi sta affascinando parecchio e, oltre a studiare gli aspetti tecnici, mi piace provare a comprendere quali potrebbero essere i risvolti pratici in ambito sociale e di business. Addentrandomi nella proverbiale tana del coniglio, dopo avere divorato molti articoli, ho voluto iniziare a sporcarmi le mani provando a sviluppare la mia prima app decentralizzata con Solana, una blockchain pubblica.
In questo articolo vi mostrerò la demo che ho sviluppato (spoiler: non ho scoperto la cura per il cancro né risolto la fame nel mondo) e vi darò qualche indicazione per chi volesse provare a capirci qualcosa in più.
Innanzitutto vorrei partire dal perché.
Ho deciso di implementare questa demo per i seguenti motivi:
- Mi piace imparare nuove tecnologie e ritengo che sia parte integrante del lavoro di chi si occupa di innovazione e sviluppo software. Imparare qualcosa di nuovo significa aumentare il proprio bagaglio tecnico ed apre la strada a nuove opportunità.
- La richiesta di mercato nell’ambito sviluppo blockchain sta aumentando a dismisura e tantissimi sviluppatori si stanno spostando verso questo settore, acquisendo competenze di backend (sviluppo applicazioni decentralizzate ~ dApp) e frontend (web app che permettono agli utenti di interagire con le dApp).
- Il web3 è un mondo nuovo in cui si sta riscrivendo l’attuale paradigma di internet ed è in corso di definizione quello che potrebbe essere il lavoro del prossimo futuro. Mi piacerebbe entrare a far parte di questa rivoluzione e contribuire con dei progetti che possano aiutare a costruire questo mondo. Quindi, non ci resta che imparare!
Ci tengo a precisare che per quanto riguarda gli aspetti di sviluppo sono un principiante, ma reputo che condividere questa mia prima esperienza possa essere d’aiuto per alimentare la community e per incentivare altre persone ad approfondire questo argomento.
Cos’è Solana
Solana è una blockchain pubblica che adotta un algoritmo di consenso di tipo Proof of Stake e sfrutta il meccanismo di Proof of History per risolvere i problemi legati alla veridicità dei timestamp in una rete distribuita.
Il progetto è stato avviato a Ginevra nel 2018 in seguito alla pubblicazione del white paper che vi suggerisco di leggere se vi interessano gli aspetti tecnici; il codice sorgente è open-source e la sua criptovaluta si chiama SOL.
Grazie all’implementazione del Proof of History Solana riesce a raggiungere 65000 transazioni al secondo andando a superare, in termini di scalabilità, quelli che sono i limiti attuali di altre blockchain.
Ethereum è la blockchain che ha reso popolari le applicazioni decentralizzate, fornendo agli sviluppatori gli strumenti per alimentare il suo ecosistema. Ogni transazione svolta sulla blockchain porta con sé un costo che su Ethereum oscilla attorno a qualche decina di $. Attualmente esistono tantissime dApp su Ethereum ma le interazioni che gli utenti possono avere con le stesse sono limitate dai costi di transazione.
Per sopperire a questi limiti sono state introdotte delle sovrastrutture alla blockchain di base oppure vengono utilizzate delle sidechain che permettono poi di riconvertire i token su Ethereum, andando però a perdere in termini di decentralizzazione. Ethereum v2.0 punta a risolvere questi problemi alla base, ma la data del suo arrivo è ancora incerta.
Per quanto riguarda Solana, la capacità di svolgere così tante transazioni al secondo abbatte i costi di transazione (~ $0.00001) rendendo possibile realizzare applicazioni decentralizzate che siano utilizzabili dagli utenti a basso costo.
Perché Solana?
Attualmente Solana sta cercando di attirare sviluppatori per incentivare la community e fare crescere l’ecosistema di applicazioni decentralizzate sulla propria blockchain. Ethereum fornisce già da tempo strumenti per gli sviluppatori e le tecnologie a riguardo sono ormai abbastanza consolidate e mature. Solana su questo è ancora qualche passo indietro rispetto ad Ethereum ma sta puntando verso la stessa direzione.
Personalmente non ho mai sviluppato su Ethereum, seppure avevo già approfondito un po’ la documentazione. Ho scelto di partire con Solana perché sono stato convinto dai vantaggi in termini di prestazioni, considerando che questo potesse essere un punto di forza in ottica di sviluppo futuro.
Entriamo ora un po’ più nel dettaglio.
Sviluppare su Solana
Un’applicazione interagisce con un cluster Solana inviando transazioni contenenti una o più istruzioni. Il runtime di Solana inoltra queste istruzioni ai program (così si chiamano le dApp su Solana) caricati dagli sviluppatori.
Le transazioni devono contenere una serie di informazioni, tra queste bisogna specificare chi è il mittente, chi è il destinatario quali sono le istruzioni che devono essere eseguite e i dati contestuali alle stesse. Tutte le transazioni relative ad un program sono pubbliche e visualizzabili tramite lo strumento Solana Explorer.
Se un program necessita di salvare dati tra una transazione ad un’altra deve ricorrere agli account. Per esempio se un’applicazione deve salvare sulla blockchain i messaggi inviati da un utente deve utilizzare un account. Gli account creati da un program sono di sua proprietà e contengono esclusivamente i dati relativi al program stesso.
Per sviluppare un’applicazione decentralizzata nel web3, in modo simile a quanto avviene nel web2, bisogna sviluppare la parte di backend (program in Solana), dove risiedono i dati e la logica applicativa, e la parte di frontend che permette agli utenti di interagire con la applicazione.
La differenza rispetto al web tradizionale è che la parte di backend non deve essere caricata ed eseguita su uno specifico server, bensì viene caricata ed eseguita in modo decentralizzato su una blockchain.
Linguaggi di programmazione e framework
Per quanto riguarda i program possono essere sviluppati in C oppure in Rust, entrambi linguaggi di programmazione in grado di sviluppare applicazioni ad alte prestazioni, il primo un po’ più datato ma sicuramente molto diffuso mentre il secondo più recente e moderno.
La parte di frontend attualmente è molto sviluppata per l’ambito web, visto che tradizionalmente la maggior parte dei wallet utilizzati dagli utenti per autenticarsi ed interagire con le dApp è su web. Viene utilizzata la libreria javascript @solana/web3.js. Esistono già o (sono in fase di sviluppo) API per altri linguaggi e framework come per esempio Flutter.
Esiste un framework in forte sviluppo che punta a semplificare lo sviluppo di dApp su Solana, si chiama Anchor e fornisce degli strumenti per gli sviluppatori in grado di evitare di reinventare la ruota e rendere più accessibile l’implementazione su Rust e javascript (un po’ come fa Solidity per Ethereum).
Per realizzare questo progetto ho deciso di utilizz<re Anchor.
Toplus Fractal GIF Portal
Veniamo ora alla demo che ho realizzato. Come ho già spoilerato nell’introduzione l’applicazione non cambierà la vita di nessuno, specialmente la mia :).
Si tratta di un portale che permette a chiunque di visualizzare, caricare e votare delle GIF a tema sui frattali.
Perché ho scelto proprio i frattali? Vi svelo un piccolo aneddoto.
La mia tesina delle scuole superiori era incentrata sull’argomento “geometria frattale” e sul suo inventore, il professore Benoît Mandelbrot, ricercatore matematico precursore nell’ambito della computer grafica.
All’epoca (primavera del 2009) avevo acquistato per la prima volta il dominio www.toplus.it e avevo realizzato un sito a tema sui frattali, che includeva anche due mie applet sviluppate in Java che permettevano di disegnare e animare i frattali Mandelbrot set e Julia set, interagendo con i parametri per realizzare “infinite” combinazioni grafiche.
I frattali sono un argomento che mi hanno sempre affascinato e incuriosito e per questo motivo ho scelto di prenderli come tema.
Per realizzare questa demo ho seguito un percorso di apprendimento creato da buildspace, una super startup incentrata sulla diffusione della conoscenza nel mondo web3 per gli sviluppatori, sostenuta da alcuni dei più importanti incubatori e investitori a livello mondiale (tra cui YCombinator, a16z).
Il percorso di apprendimento permette anche di sviluppare l’applicazione web sfruttando Repl.it, che è una figata e facilita molto sia la fase di set-up di un ambiente sia il deploy del frontend.
In seguito troverete una descrizione ad alto livello dell’applicazione, se volete provare a riprodurlo vi invito a seguire il loro percorso di apprendimento, sarebbe inutile (e scorretto) in questo post riproporre il medesimo tutorial.
Struttura del programma
Program – Rust
Ogni program ha una coppia di chiave pubblica e privata che permette di essere identificato univocamente nel cluster. Per fare questo bisogna generare questa coppia di chiavi, prima di caricarlo sulla blockchain.
Il program ha un baseAccount, dove vengono storicizzate le informazioni relative al programma. In questo caso abbiamo:
- total_gifs: rappresenta il numero totale di GIF
- gif_list: array di GIF, dove ogni elemento dell’array è una specifica struct chiamata ItemStruct
ItemStruct è composta dalle seguenti variabili:
- gif_link: la GIF viene caricata e visualizzata attraverso il link, utilizzando i siti esistenti per condividere GIF, come per esempio giphy
- user_address: chiave pubblica dell’utente che ha caricato la specifica GIF
- votes: numero di voti per la specifica GIF
Come potete vedere, l’applicazione backend ha bisogno di storicizzare dei dati sulla blockchain. Lo può fare creando un account (in questo caso baseAccount) che contiene le variabili da storicizzare. Questa operazione viene fatta sfruttando le funzionalità rese disponibili dal SystemProgram di Solana.
Oltre alla parte di storicizzazione dei dati il program deve permettere al frontend di eseguire delle operazioni su questi dati. Per questo motivo vengono implementate delle funzioni raggiungibili poi dal frontend attraverso delle RPC.
Le funzioni implementate e rese disponibili verso il frontend sono le seguenti:
- AddGif: riceve in input un gif_link e opera sul baseAccount aggiungendo un ItemStruct contenente il link e la chiave pubblica dell’utente che ha inviato la transazione
- UpVoteGif: permette di ricevere l’id della GIF che si vuole votare, recupera la GIF dalla gif_list del baseAccount ed incrementa di uno la variabile votes.
Ci sono altre funzioni di base utilizzate per inizializzare il sistema e per facilitare il testing (creazione del baseAccount e svuotamento dello stesso).
Come vedete di per sé la struttura dati e la logica dell’applicazione sono molto semplici, ma rappresentano uno scheletro utile per andare a costruire sopra qualcosa di più complesso.
Frontend – React
Come già anticipato Anchor offre dei grossi vantaggi che permettono di velocizzare la fase di sviluppo. In fase di build della applicazione viene generato un file .idl che permette di esportare in json le strutture dati e le funzioni messe a disposizione dal program.
Questo permette sia di velocizzare la fase di testing, andando ad implementare un file di test in javascript che permette di validare in locale le funzioni esposte dal program, sia la fase di sviluppo del frontend.
Il file .idl deve essere quindi importato nella applicazione web per potere sfruttare questi vantaggi e avere già a disposizione le strutture dati e le chiamate RPC. Ovviamente, ogni volta che si modifica il program dovrà essere aggiornato il file .idl anche nel frontend.
La applicazione frontend deve anche conoscere l’id del program al quale si deve connettere, questo id viene generato automaticamente nella fase di inizializzazione con Anchor.
Ogni applicazione frontend deve possedere una coppia di chiave pubblica e privata, che deve essere generata ed utilizzata per identificare il baseAccount. In questo modo il program potrà inizializzare il baseAccount per uno specifico frontend. Questa coppia di chiave pubblica e privata dovrà essere conservata dal frontend.
Come prima cosa, per permettere all’utente di accedere al program, bisogna accertarsi che l’utente abbia un wallet Solana installato sul browser e che questo wallet sia autenticato. Per questa demo è stata predisposta l’integrazione con il wallet Phantom uno dei più semplici e diffusi per quanto riguarda la blockchain Solana.
La prima fase della applicazione web consiste quindi nella verifica della connessione dell’utente al proprio wallet. Questo viene fatto sfruttando la libreria web3.js.
Una volta che l’utente è autenticato viene effettuata la connessione con il program e viene letto il baseAccount, permettendo di scaricare la gif_list. Questo ci permette già di visualizzare le GIF e le relative informazioni (autore e voti) nella nostra UI.
Nella UI viene predisposto anche un campo di input per inserire un link e caricare una nuova GIF sul portale. Una volta che l’utente svolge questa operazione, bisognerà chiamare la RPC addGif per permettere all’applicazione di inviare la gif al program. Questa operazione deve essere prima approvata attraverso il wallet, perché ovviamente comporterà un costo di transazione, seppure molto contenuto.
Oltre ad inserire le proprie GIF preferite l’utente potrà anche votare le GIF già presenti. Questa operazione chiamerà la RPC upVoteGif, che a sua volta dovrà essere approvata attraverso il wallet.
In questo modo abbiamo implementato lato frontend tutte le chiamate al nostro program caricato sulla blockchain Solana.
Semplice vero? 😀
Effettuare l’upload
Ovviamente il program dev’essere pubblicato sulla blockchain Solana per poter essere resa pubblica e raggiungibile dall’applicazione frontend. La procedura di deploy si può fare sempre attraverso Anchor, in modo abbastanza semplice.
Per una applicazione demo è consigliato effettuare il deploy sulla devnet di Solana, una blockchain equivalente a quella principale (mainnet) eccetto per il fatto che i token sono gratuiti. No, questo non significa che potete diventare ricchi, significa solo che effettuare transazioni non rappresenta nessun costo, né per i developer né per gli utenti che utilizzano (e testano) le applicazioni.
Una volta pubblicato il program bisogna poi pubblicare anche la applicazione web. Questo si può fare con le modalità in cui siete abituati a farlo attualmente, visto che non sono necessari ulteriori step, eccetto ovviamente la generazione della coppia di chiavi pubblica e privata necessarie per generare e accedere il baseAccount.
Ecco la demo!
La demo è raggiungibile al seguente link.
E di seguito troverete gli step per accedere a questa mia prima applicazione nel web3 e provare a sperimentare con le vostre mani.
Prima di tutto, se non ce l’avete, dovete installare il wallet Phantom, potete farlo gratuitamente dal loro sito installando l’estensione del browser e seguendo la procedura guidata (attenti a memorizzare in modo sicuro sia la password sia la chiave privata!).
Dovete considerare che il wallet vi permette di identificarvi (attraverso la chiave pubblica) nel web3, ed è un po’ il corrispettivo di quello che attualmente rappresentano gli account nei siti del web2, con la grossa differenza che con un unico wallet potete autenticarvi su qualsiasi applicazione nel web3 e che tutti i token e gli asset che acquisite su un sito rimangono nel vostro wallet.
Una volta che vi siete assicurati di avere installato il wallet è necessario seguire la seguente procedura per impostare il wallet sulla devnet e ottenere dei token in modo gratuito (airdrop). Potrà sembrarvi un po’ complesso all’inizio ma vi assicuro che una volta compreso (e avviato) il meccanismo risulterà più semplice di quanto non sembri.
Ora potete accedere al sito, vi troverete davanti questa schermata.
Cliccando sul pulsante “Connect to Wallet” potrete effettuare l’autenticazione sul sito. Vi comparirà la schermata di login di Phantom.
Inserendo la vostra password effettuate l’autenticazione e subito vi troverete di fronte alla mia fantastica selezione di GIF.
Come vedete ora è possibile visualizzare le GIF caricate dagli utenti e potete a vostra volta contribuire arricchendo la selezione con i frattali che vi piacciono di più, oppure votando i frattali già presenti.
Per caricare un nuovo frattale è sufficiente inserire un link nel campo di input e cliccare il pulsante “Submit“. Questa operazione ovviamente dovrà essere approvata attraverso Phantom.
Come potete vedere, i costi di transazione sono bassissimi e in ogni caso stiamo parlando di token gratuiti.
Cliccando su “Approve” potrete vedere la vostra GIF caricata nel portale! Benvenuti nel web3 :D.
Se volete poi osservare le transazioni relative a queste applicazioni potete farlo sempre attraverso l’explorer, specificando il program ID: “7p3kSDKRGuo7YAFTEp5Tt76q1rALnay2bc7eYfWp3xWQ” (oppure cliccando qua).
Allo stesso modo potete provare a votare alcune GIF già presenti, dovrete sempre approvare la transazione su Phantom.
Ora mi aspetto di vedere tanti altri bei frattali caricati da voi!
Riassumendo
Questo è stato il mio primo assaggio di sviluppo nel web3, spero di avere fornito degli input e colpito l’interesse di altri sviluppatori che vorrebbero provare a cimentarvi in questo mondo. Ovviamente per apprendere le basi dello sviluppo in ambito blockchain è necessario prima avere una visione d’insieme degli aspetti teorici e degli elementi che caratterizzano l’ecosistema web3. Potrebbe essere quindi utile documentarvi prima su questi argomenti qualora partiste da zero.
Personalmente credo di avere appena scalfito la superficie di quello che significa sviluppare nel web3 ma sicuramente reputo che realizzare un’applicazione completa, seppure semplice come questa demo, possa permettere di farsi un’idea relativamente agli elementi in gioco e di quantificare la complessità che potrebbe avere un progetto più strutturato.
Avere esperienza di programmazione backend/frontend nel web2 rappresenta sicuramente una buona base per apprendere come sviluppare applicazioni decentralizzate.
Ovviamente, i protocolli che si possono implementare su un’applicazione blockchain possono avere una complessità di gran lunga superiore rispetto a quella mostrata in questo demo. Raggiungere quel livello richiede una profonda esperienza e comprensione dell’argomento.
Reputo che quello rappresenti un punto di arrivo e che bisogna partire dalle basi per capirne le logiche e comprendere se questo mondo possa essere di vostro interesse.
Ora come ora non vedo l’ora di buttarmi nel prossimo progetto e acquisire sempre più esperienza e competenze!
Spero che questo post vi abbia incuriosito e sarei felice di sapere alcuni vostri pareri, dubbi, domande o critiche a riguardo. Vi invito a provare la demo se non avete mai avuto esperienze nel web3 e mi metto a disposizione per aiutarvi nei passaggi descritti sopra qualora trovaste qualche difficoltà.
Scrivete pure nei commenti o a contattatemi in privato per qualsiasi domanda o per un confronto!
Se invece volete rimanere aggiornati con i nuovi articoli di questo blog iscrivetevi qua!
Vi aspetto nel web3 😀
Toplus