Architettura di un’applicazione sviluppata con Apache Cordova 23

All’interno dei linguaggi nativi utilizzati per lo sviluppo di applicazioni mobile, esiste un componente denominato WebView.

Come si evince dal nome una WebView è una particolare tipologia di View utilizzabile per la rappresentazione di contenuti Web, permettendo quindi la lettura di contenuti scritti utilizzando HTML, CSS e JavaScript.

Utilizzando la WebView è pertanto possibile sviluppare un’applicazione (o una sua parte) tramite linguaggi per il Web. Apache Cordova utilizza infatti questo metodo (vedi Figura 3.3).

Figura 3.3: Struttura di un’applicazione sviluppata tramite Apache Cordova (Fonte: https:

//cordova.apache.org/docs/en/latest/guide/overview/)

Cordova permette lo sviluppo di un’interfaccia tramite l’utilizzo di linguaggi per la creazione di siti web. Se l’applicazione richiede l’utilizzo di particolari funzionalità native del dispositivo ( come ad esempio sensori, speciali librerie per la grafica, accesso ai contatti o alle informazioni sulla batteria) o una parte dell’applicazione è stata sviluppata in nativo, è possibile utilizzare i Plugin per effettuare un collegamento tra le due parti.

24 CAPITOLO 3. LO STAGE Un plugin non è altro che codice JavaScript che permette l’accesso a funzionalità native, e se necessario restituisce risposte sotto forma di funzioni di callback. Ad ogni plugin sono associate diverse API native, tante quante sono le piattaforme supportate, le quali eseguono le operazioni la cui richiesta è stata inoltrata dal plugin. Pertanto un plugin nasconde le funzionalità native di un dispositivo dietro del codice JavaScript.

Cordova offre una serie di plugin di base, corrispondenti alle principali funzionalità di un dispositivo (ad esempio GPS, camera, contatti, batteria). È possibile cercare altri plugin sviluppati dalla community o svilupparne uno proprio.

3.3.3 Architettura del progetto

La struttura dell’applicazione segue il pattern definito per tutte le applicazioni iOS, ovvero il pattern Model-View-Controller. Questa struttura è inoltre suddivisa in una parte Front-end sviluppata tramite Apache Cordova, e un lato Back-end sviluppato tramite linguaggio nativo. La comunicazione tra queste due avviene tramite il plugin sviluppato con Cordova chiamato arkit.js, il quale inoltra eventi e richieste ricevute dal lato Front-end verso il Back-end.

Front-end

Il Front-end dell’applicazione, corrispondente alla sua rappresentazione grafica, è for-mato da un’insieme di componenti che ho sviluppato usando Apache Cordova.

I componenti principali sono descritti in seguito.

ARKitPage.js

Questo componente corrisponde alla schermata principale dell’applicazione (vedi Figura 3.4)

Figura 3.4: Schermata principale dell’applicazione Essa esegue le seguenti funzionalità:

3.3. PROGETTAZIONE E SVILUPPO 25

∗ cattura gli eventi necessari al posizionamento, la rotazione e lo spostamento di un oggetto virtuale, per poi propagarli al Back-end tramite il plugin arkit.js;

∗ permette l’apertura del menù per la selezione di altri oggetti virtuali;

∗ permette lo scatto di foto;

∗ visualizza errori legati a problemi di riconoscimento delle superfici;

∗ visualizza una schermata d’aiuto al primo avvio dell’applicazione.

ARKitProductsModalView.js

Questo componente è una finestra modale usata per la selezione di un prodotto avente un modello 3D virtuale. Una finestra modale è una finestra utilizzata per inter-rompere l’interazione con la finestra "padre" (in questo caso la schermata principale ARKitPage.js) per richiedere lei stessa l’interazione con l’utente. La selezione di un prodotto avviene in tre passaggi:

∗ selezione della categoria del prodotto;

∗ selezione del prodotto desiderato;

∗ selezione del colore del prodotto.

Al termine di questa procedura la schermata di ARKitProductsModalView.js si chiuderà, tornando quindi a quella principale, e comparirà il modello 3D associato al prodotto e al colore scelto. Inoltre questa finestra modale possiede le seguenti funzionalità:

∗ permette il riposizionamento di un oggetto virtuale già posizionato;

∗ permette le selezione rapida di un colore per un oggetto virtuale già posizionato, evitando quindi la ripetizione della procedura in tre passaggi.

ARKitProductsModalView.js è formato da tre diversi componenti corrispondenti ai tre diversi passaggi da effettuare per la selezione del prodotto:

∗ ARKitCategoriesPage.js: pagina contenente le categorie dei prodotti (vedi Figura 3.5);

∗ ARKitProductsListPage.js: pagina contenente la lista di prodotti appartenenti alla categoria scelta (vedi Figura3.6);

∗ ARKitColorsListPage.js: pagina contenente la lista dei colori appartenenti al prodotto scelto precedentemente (vedi Figura3.7).

26 CAPITOLO 3. LO STAGE

Figura 3.5: Selezione di una categoria di prodotti

Figura 3.6: Selezione di un prodotto dalla lista

3.3. PROGETTAZIONE E SVILUPPO 27

Figura 3.7: Selezione del colore del prodotto

28 CAPITOLO 3. LO STAGE

ARKitScreenshotModalView.js

Questo componenente è una finestra modale che ha lo scopo di visualizzare una foto appena scattata. Da qui è possibile condividere la foto o salvarla (vedi Figura3.8).

Queste ultime funzionalità descritte sono state sviluppate utilizzando un plugin creato dalla community.

Figura 3.8: Visualizzazione di una foto appena scattata

ARKitController.js

Questo componente è un controller che ha lo scopo di creare il Viewstack dell’applica-zione ed esegue le operazioni che permettono l’avvio dell’applicadell’applica-zione.

Un Viewstack (vedi Figura3.9)non è altro che il luogo il cui vengono inserite le View dell’applicazione secondo una struttura a strati: quando una View diventa visibile a causa di qualche operazione o interazione dell’utente essa viene spostata verso l’alto, nello strato superiore, e tutte le altre vengono spinte verso uno strato inferiore.

Questo approccio permette uno scambio rapido tra le finestre dell’applicazione, senza dovere aspettare operazioni come la creazione di una View.

3.3. PROGETTAZIONE E SVILUPPO 29

Figura 3.9: Esempio di Viewstack (Fonte:https://github.com/vash15/backbone.

viewstack)

Back-end

Il Back-end dell’applicazione, sviluppato tramite linguaggio nativo, si occupa di ef-fettuare tutte le funzionalità legate alla realtà aumentata e all’utilizzo di un oggetto virtuale, come il suo posizionamento, spostamento o rotazione. Esso riceve informazioni ed eventi come l’interazione di un utente dal Front-end tramite il plugin sviluppato con Apache Cordova arkit.js. Il Back-end è formato da una serie di componenti che ho sviluppato i quali utilizzano funzionalità offerte da ARKit legate al riconoscimento dell’ambiente.

I suoi componenti principali sono descritti in seguito.

ARKitViewController.swift

Questa classe è un View Controller (vedi3.3.1). Le sue funzionalità principali sono le seguenti:

∗ inizializzazione dei componenti necessari all’utilizzo della realtà aumentata;

∗ ricezione di eventi e informazioni inoltrati dal plugin arkit.js;

∗ propagazione degli eventi verso le classi che effettivamente eseguono le operazioni legate agli eventi;

∗ creazione della sessione di ARKit utilizzata per il riconoscimento dell’ambiente;

∗ ogni volta che ARKit trova una nuova superficie, questa classe ne riceve la notifica e la propaga verso le classi che possono utilizzare quest’informazione;

∗ effettua lo screenshot della scena, creandone l’immagine per poi inviarla al Front-end tramite il plugin come stringa Base64^[g]per poter essere poi utilizzata dal componente ARKitScreenshotModalView.js.

30 CAPITOLO 3. LO STAGE Un’altra funzionalità importante che questa classe possiede è la visualizzazione della scena contenente l’oggetto virtuale. Infatti dato che il Back-end viene completamente nascosto dal Front-end tramite l’utilizzo del plugin, al fine di visualizzare la scena di realtà aumentata rappresentata dal feed della camera e l’oggetto virtuale posizionato nell’ambiente, essa viene inserita all’interno di una View "figlia" della WebView (vedi 3.3.2). Pertanto il risultato ottenuto consiste nella scena di realtà aumentata sovrappo-sta a ARKitPage.js, come si può anche vedere in Figura3.4.

VirtualObject.swift

Questa classe rappresenta un’istanza di un oggetto virtuale. Essa possiede le seguenti funzionalità:

∗ effettua il caricamento del modello 3D in base alle informazioni ricevute da ARKitViewController.swift ;

∗ effettua il posizionamento e spostamento dell’oggetto virtuale sia in base all’in-terazione dell’utente, sia in base allo spostamento su superfici riconosciute da ARKit, nel caso in cui esse siano abbastanza grandi da contenere l’oggetto;

∗ effettua la rotazione dell’oggetto virtuale;

∗ effettua l’eliminazione dell’oggetto virtuale su richiesta dell’utente o al termine di una sessione di utilizzo dell’applicazione.

Gesture.swift

Questa classe viene chiamata da ARKitViewController.swift alla ricezione di eventi legati al movimento dell’oggetto virtuale, generati da tocchi effettuati dall’utente sullo schermo del dispositivo.

Quanto il Front-end riconosce dei tocchi sullo schermo, esso percepisce le coordinate, espresse tramite i pixel con cui è stata effettuata l’interazione, e il numero di tocchi avvenuti contemporaneamente. Esistono i seguenti tipi di eventi legati al tocco:

∗ touchstart : corrisponde all’inizio di un tocco, ovvero quando viene toccato lo schermo;

∗ touchend : corrisponde alla fine di un tocco, ovvero quando l’utente ha smesso di toccare lo schermo;

∗ touchmove: corrisponde al movimento di un dito sullo schermo senza averlo mai rilasciato;

∗ touchcancel : viene chiamato quando un tocco è stato interrotto. A differenza di touchend, che segna la fine di un tocco e quindi la fine di un’evento, touchcancel ne segna l’interruzione, la quale potrebbe portare ad ignorare l’evento di tocco.

In base al tipo di evento chiamato e alle sue informazioni, ricevute tramite ARKit-ViewController.swift, questa classe si occupa di riconoscere l’operazione da effettuare (spostamento o rotazione) e di convertire le coordinate dell’evento in un sistema di coordinate a tre dimensioni utilizzabile sull’oggetto virtuale, per poi chiamare i metodi di VirtualObject.swift per effettuare l’operazione vera e propria.

Utilities.swift