Che cosa sono in grado di realizzare in 24 ore? Quale sarebbe la qualità del risultato finale? Ne sarei soddisfatto?

Queste erano le domande che mi frullavano nella testa quando ho deciso di lanciarmi una sfida: realizzare una app in 24 ore.

Per questa sfida l’idea era quella di realizzare una app legata al mondo di Magic the gathering, il gioco di carte per eccellenza. Ho iniziato a giocare a Magic quando ero adolescente ed ultimamente, complice l’arrivo della versione online, ho ricominciato a giocarci.

Le carte di Magic, come ad esempio quelle dei Pokemon, posso valere anche molto, ed infatti online ci sono moltissimi siti dove è possibile scoprire la valutazione delle proprie carte, aggiornata giorno per giorno. Da qui è nata l’idea: realizziamo una app che ci permetta di scoprire la valutazione delle nostre carte….semplicemente inquadrandole con lo smartphone. Il progetto quindi è essenzialmente un progetto di realtà aumentata. Dopo questa introduzione, ecco come si sono svolte le 24 ore in cui l’app ha preso forma:

⏱️ 4 ore: Ricerca dei tool e delle API da utilizzare

Una volta definita macroscopicamente l’idea, le prime ore le ho dedicate alla ricerca degli strumenti giusti per realizzarla. Quello di cui avevo bisogno erano essenzialmente 2 cose:

  • Delle API da cui avere l’elenco di tutte le carte, le relative immagini ed i relativi prezzi. le immagini però dovevamo essere solo dell’artwork della carta, in modo da essere in grado di riconoscere la stessa carta in ogni lingua.

  • Una libreria di AR che, date in input le immagini di tutte le carte, fosse in grado di riconoscerle e di farne il “tracking”, così da poi mostrarne in AR il relativo prezzo

Questa fase si è rivelata fondamentale perchè:

  • Facendo delle ricerche approfondite abbiamo trovato una API ricchissima (Scryfall) in grado di fornirci tutto quello di cui avevamo bisogno. Addirittura Scryfall fornisce già per ogni carta l’immagine cropped dell’artwork! Altre API invece richiedevano di effettuare il crop manualmente oppure non avevano i dati aggiornati dei prezzi, forzandoci quindi ad usare API di provider diversi per avere tutte le informazioni richieste
  • Esistono molti strumenti per la realtà aumentata, ma nel nostro caso specifico avevamo bisogno di qualcosa che fosse in grado di gestire migliaia di immagini. La ricerca quindi si è focalizzata sulla verifica di questo requirement in quanto era un punto fondamentale per la riuscita del progetto. Scegliere lo strumento sbagliato sarebbe significato accorgersi con il progetto in uno stato avanzato di dover ripartire (quasi) da capo. I tool papabili emersi dalla ricerca erano:
    • AR foundation di Unity, ma gestisce pochi target (nell’ordine della decina) e non è semplice automatizzare l’import delle immagini.
    • Vuforia con database locale, interessante perché sarebbe stato veloce e supportava anche il riconoscimento di più target alla volta, ma anche qui i target gestibili erano troppo pochi (max 1000) e anche in questo caso non è immediato creare il database locale via script.
    • Ultima opzione, quella che poi è stata scelta, è il Cloud Recognition di Vuforia, scelto perché supporta milioni di immagini e perché ha delle API per la creazione del database delle immagini via script. Essendo però un Saas a tutti gli effetti ha un costo mensile che cresce all’aumentare delle scansioni effettuate, inoltre le performance del riconoscimento delle immagini dipendono dalla velocità di rete dell’utente.

Vuforia è disponibile come SDK per Android, iOS e Unity. Ho scelto di usare Unity così da avere il supporto di entrambe le piattaforme in un colpo solo. Realizzare anche la UI principale con Unity sarebbe stato scomodo (almeno per me), per cui ho deciso di usare Flutter, cosa che ha reso il progetto ancora più sfidante, perché sarebbe significato avere una app composta da molte tecnologie diverse (Unity, Flutter, e una parte nativa per farle comunicare).

⏱️ 4 ore: Implementazione CLI per creazione del database delle immagini da riconoscere

In questo primo step di vero sviluppo mi sono dedicato alla realizzazione di un tool che:

  • chiede in input il nome di un set di Magic (per evitare di importare migliaia di carte in un colpo solo ho deciso di importare un set alla volta)
  • ottiene dalle API di Scryfall l’elenco di tutte le carte del set scelto
  • per ogni carta, aggiunge al database in cloud di Vuforia (quello che verrà poi usato dall’app per riconoscere effettivamente le carte) l’immagine dell’artwork cropped, aggiungendo inoltre come metadato dell’immagine l’ID della carta stessa, così da poterlo usare per ottenere il prezzo aggiornato quando la carta verrà scansionata.

Ho scelto di realizzare un tool eseguibile da riga di comando. Ho utilizzato Node (con la libreria inquirer, perfetta per realizzare CLI interattive) e TypeScript.

⏱️ 8 ore: Sviluppo app Unity

Dopo aver realizzato la CLI, iniziamo il vero sviluppo dell’app. Ho deciso di partire subito con lo sviluppo della parte di realtà aumentata in Unity, in quanto rappresenta il vero core dell’app.

Questo step non è stato super complicato perché avevo già utilizzato Unity e Vuforia Cloud in un altro progetto (Magic Moment). Il funzionamento della parte Unity è:

  • Viene inizializzato Vuforia con i parametri del database in cloud popolato con gli artwork nello step precedente
  • Quando Vuforia riconosce una delle immagini presenti nel database, viene effettuata una chiamata alle API di Scryfall per avere il prezzo aggiornato, passando come parametro l’ID della carta presente nei metadati dell’immagine riconoscita.
  • Ottenuto il prezzo dalle API, questo viene mostrato in realtà aumentata sulla carta

Ho cercato tramite i font, i colori, i suoni e le animazioni di richiamare lo stile del mondo Magic, per dare un po’ di personalità all’app.

⏱️ 4 ore: Sviluppo app Flutter

Ora il che il “core” dell’app è pronto e funzionante ci possiamo dedicare alla realizzazione della UI principale. L’idea era quella di realizzare una home con le ultime carte scansionate ed un bottone per avviare la scansione, il tutto mantenendo sempre uno stile un po’ Magic.

Ho realizzato la UI dell’app prima in Figma, e ho realizzato poi il tutto in Flutter. Ho scelto Flutter perché lo usiamo praticamente in ogni nuovo progetto e perché sapevo che mi avrebbe permesso di realizzare delle animazioni performanti in maniera semplice.

Una volta pronta la UI mi sono dedicato ad aggiungere qualche animazione sullo scroll e sull’apertura del dettaglio della carta. Questa è la parte che preferisco, perché è dove davvero si può trasformare una UI statica in qualcosa di vivo e che rende l’esperienza utente più coinvolgente.

⏱️ 4 ore: Sviluppo integrazione Flutter <> Unity

Ora che sia la parte Unity che la parte Flutter sono pronte e funzionanti non ci resta che farle “parlare” tra loro. Abbiamo usato la modalità “Unity as a library” (UAAL) per riuscire a embeddare il nostro progetto Unity nell’app Flutter, così da poter avere una app sola a tutti gli effetti (fino a questo punto erano due app separate!). Per riuscire a mostrare nella UI principale dell’app le ultime carte scansionate ho deciso di usare un classico database SQLite, in cui entrambe le parti potevano leggere e scrivere. Da notare che la parte Unity e la parte Flutter sono nella stessa app ma la parte Unity viene eseguita in un processo dedicato, per cui a conti fatti non condividono alcuna risorsa durante l’esecuzione, per cui il database mi è sembrata l’unica via percorribile per farle comunicare. Questa è stata la parte tecnicamente più intricata perché per configurare correttamente Unity come modulo del progetto Flutter e per far comunicare le due parti ho dovuto fare diversi tentativi, ma alla fine…l’app è pronta!

✌️Fine! Take aways?

Il progetto è ambizioso e ci sono delle casistiche che non gestisce ancora correttamente, come ad esempio le carte che hanno la stessa immagine in set diversi. La scelta di utilizzare le artwork cropped delle carte per effettuare il riconoscimento ci ha permesso di procedere spediti, ma ovviamente ci sono carte (come ad esempio Il nulla scintillante) che proprio non possono essere riconosciute per mancanza di caratteristiche utili.

Un’altra questione importante è il fatto che il servizio di Cloud recognition di Vuforia è a pagamento, per cui in ottica di rilascio pubblico sugli store va per forza inserita sin da subito una strategia di revenue per rendere il progetto sostenibile.

Sono comunque super contento del progetto perché:

  • Sono stato nei tempi
  • Penso che il risultato sia davvero figo e non abbia nulla da invidiare ad app più blasonate
  • Cosa non da poco, funziona! (con i limiti elencati sopra)

Questo progetto mi ha reso ancora più consapevole delle mie capacità, di quello che posso fare per TangoDev e per i nostri clienti, e credo che lanciarsi queste micro sfide sia molto importante anche per avere un confronto con noi stessi ed avere una prova tangibile del nostro “livello” attuale, sia per quanto riguarda le nostre skill tecniche, sia per quanto la nostra capacità di darci un obiettivo e perseguirlo fino alla fine.