UNIVERSITà DEGLI STUDI DI MODENA E REGGIO EMILIA Assistenza interventi tecnici: progetto e sviluppo di un’App ibrida attraverso il framework Phonegap Buon pomeriggio a tutti, sono Gianluca Stazione, e presento Assistenza interventi tecnici: progetto e sviluppo di un'app ibrida attraverso il framework phonegap . Candidato: Gianluca Stazione Relatore: Prof.ssa Sonia Bergamaschi Anno Accademico 2013/2014 1/15

Obiettivi / Pubblicazione Progettazione Realizzazione sugli store Richiesta di assistenza Assistenza Interventi Tecnici Assegna l’assistenza ad un tecnico La tesi è stata svolta presso la software house Eurosystem2000… Tra i numerosi software prodotti dall’azienda, è presente quello per la gestione delle assistenze tecniche interne all’azienda. L’idea di questo progetto si basa sul migliorare e velocizzare il tradizionale metodo di lavoro delle assistenze, ovvero un’azienda riceve una richiesta di assistenza, poi la assegna ad un suo tecnico. Viene quindi stampato il rapportino di lavoro che verrà poi compilato a mano dal tecnico ad assistenza terminata. Dopodiché il tecnico dovrà consegnare il rapportino ad un operatore amministrativo che si occuperà della sua archiviazione (in un archivio fisico o digitale). Nelle prossime slide verranno mostrati gli obiettivi posti in sede di progettazione, si passerà alla fase di realizzazione per poi concludere con i risultati finali raggiunti con la pubblicazione. Compilazione manuale del rapportino di lavoro Stampa rapportino di lavoro Obiettivi / Progettazione Pubblicazione sugli store Realizzazione Archiviazione manuale del rapportino 2/15

obiettivi Portare in mobilità dati di supporto all’attività di assistenza tecnica (Smartphone\tablet) Eliminare completamente il cartaceo Velocizzare la gestione delle assistenze Gli obiettivi progettuali sono stati: portare in mobilità dati e le informazioni per le assistenze tecniche, eliminare completamente il cartaceo, velocizzare la gestione delle assistenze, creare un sistema operante su varie piattaforme mobili, creare un’app il più possibile user-friendly. Creare un sistema cross-platform (Android, iOS) Creare un'APP user-friendly Pubblicare sugli store (google play, apple store) 3/15

Scelta del tipo di app e del Metodo di sviluppo App nativa Web App Phonegap App ibrida La prima problematica affrontata ha riguardato il metodo di sviluppo per la creazione dell’app. I tre metodi studiati sono stati: l’app nativa: cioè il software scritto in un linguaggio di programmazione espressamente concepito per il sistema operativo sul quale risiede, ha funzionalità e prestazioni molto elevate ma l’implementazione e la modifica, richiede la scrittura del codice per ogni piattaforma nella quale si vuole creare l’applicazione; web app: è sostanzialmente un collegamento verso un applicativo remoto e quindi il suo utilizzo necessita della rete internet, presenta il vantaggio di non occupare spazio nella memoria del dispositivo, ma il forte limite è che le prestazioni sono legate alla connessione internet; app ibrida: è un’app creata combinando tecnologie di sviluppo native con soluzioni web-based, il core dell’applicazione è scritto in un linguaggio più comune, come è HTML5, CSS3 e JavaScript e viene inserito in un contenitore sviluppato in codice nativo che facilita l’integrazione con le risorse del relativo sistema operativo. Questo approccio è meno performante rispetto alla controparte nativa, ma offre la possibilità di creare un’app trasversale con la scrittura di un singolo codice senza essere lagato alla connessione internet. Ia scelta è ricaduta su quest’ultimo, utilizzando il framwork Phonegap: prodotto da Nirobi e attualmente in possesso di Adobe Systems I vantaggi ottenuti dall’approccio ibrido e da Phonegap sono: sviluppo su più piattaforme utilizzando dei linguaggi comune come HTML5,css3 e javascript; si ha accesso a funzionalità native, come ad esempio l’uso della fotocamera e file system; la possibilità di utilizzo offline, caratteristica che verrà approfondita più avanti Vantaggi: sviluppo multipiattaforma (utilizzando HTML5,css3 e javascript) accesso a funzionalità native possibilità di utilizzo offline 4/15

phonegap Fotocamera\galleria Sharing SQLite 5/15 Phonegap funge da ponte tra la parte scritta in HTLM5, css3,javascrpit e le sistema operativo ospitante. Fornendo in aggiunta diverse api per poter interagire con le risorse del dispositivo SQLite 5/15

Gli attori in campo WWW 6/15 Server E-mail Database locale Dropbox L’applicazione è stata progetta per essere stand-alone, ossia per funzionare non necessità di una connessione continua ad internet e le maggiori interazioni le avrà con il proprio database locale. Avrà bisogno di connettersi solo in due casi: quando il tecnico chiude l’assistenza, per cui il sistema invierà il rapportino di lavoro per e-mail e quando vorrà collegarsi a Dropbox per effettuare il backup del database. Server E-mail Database locale Dropbox 6/15

SQLite Libreria compatta, veloce e multipiattaforma. Vantaggi: impossibilità di perdite dati maggior velocità nelle ricerche e nel caricamento Il database utilizzato è SQLite, una libreria scritta in linguaggio C molto compatta, veloce e multipiattaforma, con l’utilizzo di Phonegap. Il database viene creato alla prima installazione dell’app. In questo modo tutte le query vengono fatte su questo db. I vantaggi dell’utilizzo di questo approccio sono stati molto significativi, in particolare: si ha la sicurezza di non aver perdite di informazioni; le interrogazioni sono fatte direttamente sul database locale, la velocità di caricamento delle pagine non dipende dall’efficienza della connessione internet; il punto precedente implica anche un minor consumo di connessione dati e un minor consumo di batteria. Svantaggi: Occupa molta memoria minor consumo di batteria Svantaggio: occupazione della memoria 7/15

Logica di funzionamento Vediamo ora la logica di funzionamento del sistema. Per prima cosa ho realizzato le pagine HTML5 e css. Queste rappresentano la collegandole poi ai file di javascript 8/15

Home page 9/15 Vediamo ora la logica di funzionamento del sistema. Come si può notare dalla schermata, il primo passo da effettuare dopo l’installazione è selezionare il proprio paese d’origine per poter così scegliere la lingua. Le lingue supportate sono inglese, francese, tedesco, spagnolo e portoghese. Una volta scelto il paese, questa pagina non sarà più utilizzata e si verrà indirizzati all’home page. Questa sarà la schermata principale dell’app. Come si può notare, sono presenti 7 icone: Azienda: dove Clienti: gestiremo i clienti Materiali: salveremo i materiali utilizzati dall’azienda Inserisci chiamata: come suggerisce il nome, inseriremo la chiamata di assistenza di un dato cliente Gestisci chiamata: gestiremo tutte le chiamate Storico: vedremo le chiamate chiuse Impostazioni 9/15

E-mail predefinita allarmi Impostazioni Gestione lingua Dropbox { ‘‘Traduzione Impostazioni’’:[ ‘‘id’’: ‘‘impostazioniHeader’’, ‘‘Italiano’’: ‘‘Impostazioni generali’’, ‘‘Inglese’’: ‘‘General settings’’, ‘‘Francese’’: ‘‘Réglages généraux’’, ‘‘Tedesco’’: ‘‘Allgemeine einstellungen’’, ‘‘Spagnolo’’: ‘‘Configuraciòn general’’, ‘‘Portoghese’’: ‘‘Configurações gerais’’, }, … ] } var client = new Dropbox.Client(key:app_key); client.authDriver(new Dropbox.AuthDriver.Cordova()); client.authenticate( auth_callback); Api dropbox client.writeFile(percorso,dati,function); WWW JSON Dropbox 10/15

inserisci chiamata Home page 11/15

Gestisci chiamata Home page Api phonegap Sharing Applicazione e-mail socialsharing.shareViaEmail(…); Applicazione e-mail dispositivo 12/15

Creazione pdf var pdfOutput = doc.output(); JSPDF doc = new jsPDF('p', 'mm', [297, 210]); doc = new jsPDF(); doc.setFontSize(n); doc.text("Testo",X,Y); doc.roundedRect(X,Y,width,height,r1,r2, 'fill'); var pdfOutput = doc.output(); doc.addImage(image, Tipo, X, Y, width, height); doc.line(x1,y1,x2,y2); doc.addpage();

Uso fotocamera/galleria Vediamo l’uso della fotocamera\galleria Api phonegap per fotocamera\galleria camera.getPicture(…); Fotocamera\galleria dispositivo 14/15

conclusioni Sviluppi futuri Realizzato app ibrida perfettamente funzionante Sviluppi futuri User-friendly Database centralizzato Inserire e archiviare chiamate di assistenza Firma biometrica Inviare la mail contenente il rapportino di intervento tecnico Pubblicazione sugli store Google play ed Apple store 15/15