MagiCum S.r.l. Progetto Inno-School
Area applicazioni Autore: Alessio Salandi Revisione: 1.0 Data: 23/05/2013 Titolo: Documentazione tecnica - Grafica Diario File:Documentazione.pdf Sito: http://inno-school.netsons.org/
Indice pagina Introduzione al progetto. 1 1 La base di Android... 2 1.1 Caratteristiche della grafica di Java.. 3 1.2 Ambiente di lavoro 5 1.2.1 NetBeans.... 6 1.2.2 Eclipse..... 7 1.2.3 Confronto tra Eclipse e NetBeans.. 8 2 Android... 9 2.1 Caratteristiche grafiche... 10 2.2 Confronto tra Android e ios.... 11 3 Personalizzazione del Tab Diario.... 12 3.1 Cambiamenti a opera del utente. 12 3.2 Cambiamenti a opera del programmatore.. 13 4 Evoluzione.... 14 4.1 Applicazione per tablet 7... 14 4.2 Applicazione per tablet di altre dimensioni.. 16 Pagina I
Indice figure pagina Figura 1 - Stemma Java.... 2 Figura 2 - Stemma NetBeans. 5 Figura 3 - Stemma Eclipse..... 5 Figura 4 - Stemma OracleJDeveloper.... 5 Figura 5 - Stemma JCreator... 5 Figura 6 - Stemma BlueJ..... 5 Figura 7 - Screen dell interfaccia di NetBeans.. 6 Figura 8 - Screen dell interfaccia di Eclipse...... 7 Figura 9 - Stemma Android...... 9 Figura 10 Esempio di personalizzazione immagini... 12 Figure 11 Screen del layout di login. 14 Figure 11 Screen del layout della pagina principale 15 Figure 11 Screen del layout del calendario. 16 Pagina II
Introduzione al progetto Nel progetto, l area applicazioni si propone di progettare e sviluppare prodotti in grado di apportare innovazione nell ambito scolastico, col fine di introdurre con la corretta metodologia l uso delle tecnologie informatiche. In prima istanza questo processo di rinnovamento parte dalla scuola primaria per accompagnare la crescita digitale degli alunni. Parallelamente si prevede la pianificazione di prodotti informatici per gli altri settori dell istruzione e della formazione. Per promuovere l innovazione, insieme a prodotti prettamente didattici si è voluta introdurre l applicazione Tab Diario/ Tab Registro che appartengono all ambito scolastico ma non puramente didattico. Nel mondo della scuola, da qualche anno, cominciano a comparire prodotti informatici per la didattica ma l educazione digitale deve coinvolgere tutti i processi coinvolti, compreso quello della comunicazione scuola-famiglia, gestione presenze, ecc altrimenti si rischia di identificare l innovazione solo con l aspetto didattico. Per tanto si sono sviluppate le applicazioni Tab Diario e Tab Registro implementabili sul tablet Android. Pagina 1
1 La base di Android Le applicazioni, sviluppate per Android, sono basate su un linguaggio di programmazione, orientato agli oggetti, chiamato Java. Figura 1 - Stemma Java Java è lo standard globale per lo sviluppo e la distribuzione di applicazioni con prestazioni elevate per la più ampia gamma di piattaforme di elaborazione possibile. È alla base di qualsiasi tipo di applicazione in rete usato per sistemi portatili, giochi, contenuto basato su Web e software aziendale. La tecnologia Java consente ai programmatori di effettuare quanto segue: - Scrivere software su una piattaforma con la possibilità di eseguirlo su qualsiasi altra piattaforma. - Creare programmi che possono essere eseguiti all'interno di un browser Web e accedere ai servizi Web disponibili. - Sviluppare applicazioni lato server per forum in linea, negozi, sondaggi, elaborazione di form HTML e molto altro ancora. - Combinare applicazioni o servizi altamente personalizzati. - Scrivere applicazioni potenti ed efficienti per telefoni cellulari, processori remoti e qualsiasi altro dispositivo elettronico. I programmi scritti in linguaggio Java, dopo una fase iniziale di compilazione con ottenimento del cosiddetto bytecode, sono destinati all esecuzione sulla piattaforma Java attraverso una fase di interpretazione (per questo motivo il linguaggio Java è detto anche semi-interpretato) ad opera di una Java Virtual Machine e, a tempo di esecuzione, avranno accesso alle Interfacce di Programmazione delle Applicazioni (API) della libreria standard. Questi due step forniscono un livello di astrazione che permette alle applicazioni di essere interamente indipendenti dal sistema hardware su cui esse saranno eseguite. Un'implementazione della piattaforma java è il Java Runtime Environment (JRE), necessario per l'esecuzione del programma compilato, mentre per lo sviluppo dei programmi in Java a partire dal codice sorgente è necessario il Java Development Kit (JDK) che include anche il JRE. Pagina 2
1.1 Caratteristiche della grafica di Java La creazione dell interfaccia grafica di Java è composta dai cosiddetti componenti GUI (Graphics User Interface), essi sono dei componenti che servono per l input o per l output, ed hanno un aspetto grafico. Sono ad esempio dei componenti GUI di un programma tutti i menù, i bottoni, le label, eccetera di questo. Tutte queste GUI saranno ovviamente collegate ad una struttura che le contiene, le due strutture che vedremo, e che sono le più importanti, sono gli applet e le finestre. Elementi fondamentali: - Componenti e composizione: l interfaccia grafica viene costruita assemblando componenti pronti, quali finestre, bottoni, caselle di testo; - Layout: posizionamento degli elementi nell interfaccia grafica. E un problema non banale quando si vuole che l applicazione sia multipiattaforma e indipendente dalla risoluzione e dalla dimensione dei caratteri. - Event-oriented programming: il programma non è più in comando dell interazione con l utente. Deve reagire appropriatamente alle azioni svolte dall utente. - Programmazione grafica: è possibile creare componenti che si disegnano autonomamente. Swing è la libreria grafica di seconda generazione di Java, possedendo un toolkit di sviluppo di GUI portabile su vari sistemi operativi. Swing non effettua chiamate native al sistema operativo per la costruzione dei componenti, ma li ricostruisce da zero, definendo qualsiasi tipo di componente di qualsiasi sistema operativo e addirittura ne inventa di nuovi. I componenti Swing possono essere trovati nel package javax.swing. I nomi delle classi iniziano tutti per convenzione con la lettera J, la parte rimanente del nome della classe rappresenta il nome del componente Swing: JButton, JLabel, JTextField Un componente è un oggetto con determinate caratteristiche di comportamento conosciute e specificate. Gli oggetti Swing emettono eventi in modo asincrono, hanno caratteristiche legate ad essi stessi, e rispondono a un ben preciso set di comandi (specifico per componente). Pagina 3
Swing ha lo stesso aspetto su tutte le piattaforme, poiché il suo codice è scritto in Java: si parla a tal proposito di componenti leggeri, poiché non richiedono una allocazione di risorse da parte del sistema operativo al di fuori della JVM. L aspetto è espandibile e personalizzabile (look and feel), nel senso che ciascun utente può utilizzarne uno standard o inventarsene di nuovi. In più Swing è una libreria: - Facile; - Fuori dagli schemi; - A spedizione di eventi; - Con un thread unico. Facile: Cambiare l aspetto o il comportamento di un componente Swing si riduce semplicemente nell invocare metodi o definire sottoclassi. Fuori dagli schemi: i bordi dei componenti Swing non devono essere necessariamente rettangolari e sono facili da cambiare. A spedizione di eventi: Il modello prevede la possibilità per ogni componente o controllo grafico di generare un evento. Ad ogni evento generato corrisponde una classe specifica, che ne descrive l' origine e la causa dell' evento stesso, cioè viene fornito un resoconto completo sull 'evento generato. La gestione logica dell'evento viene affidata ad una sua interfaccia specifica detta listener, che contiene i metodi da implementare. Con un thread unico: lavora su un unico thread separato quindi la concorrenza è inevitabile. Pagina 4
1.2 Ambiente di lavoro Gli ambienti di sviluppo integrati (IDE) sono dei software che, in fase di programmazione, aiutano i programmatori nello sviluppo del codice. Normalmente è uno strumento software che consiste di più componenti, da cui appunto il nome integrato: un editor di codice sorgente; un compilatore e/o un interprete; un tool di building automatico; (solitamente) un debugger. Per lo sviluppo di applicazione scritte in linguaggio Java, possono essere utilizzati i seguenti IDE: - Figura 2 - Stemma NetBeans - Figura 3 - Stemma Eclipse - Figura 4 - Stemma Oracle JDeveloper - Figura 5 - Stemma JCreator - Figura 6 - Stemma BlueJ La competizione è più intensa tra Eclipse e NetBeans perché questi prodotti hanno le maggiori comunità di utenti attive e sono free ed open source. Pagina 5
1.2.1 NetBeans NetBeans è un completo strumento per seguire e realizzare ogni fase dello sviluppo di un software. Programmato in Java, pensato per Java, può essere utilizzato anche con molti altri linguaggi di programmazione e scripting, come C/C++, Ruby, UML, XML, JSP. Questo grazie ad una struttura completamente modulare, che permette di aggiungere e rimuovere facilmente estensioni e plugin, cioè un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni, ma il loro numero è limitato rispetto ad altri IDE. E stato sviluppato da Sun Microsystem e ora continua a essere supportato da Oracle. Una delle sue peculiarità che lo distinguono dagli altri IDE è di essere adatto al Rapid Development, poiché permette, con pochi click, di configurare lo scheletro base sia di un applicazione Web che di una di tipo Desktop. NetBeans è un ottimo strumento se si vogliono utilizzare le tecnologie standard offerte da Java. Pro: - multi-linguaggio e multi-piattaforma - Open Source e gratuito - Compatibile con vari linguaggi - Design grafico d interfacce Contro: - Richiede un computer potente - Complicato per un principiante Figura 7 - Screen dell interfaccia di NetBeans Pagina 6
1.2.2 Eclipse Eclipse è un ambiente di sviluppo multi-linguaggio e multi-piattaforma in quanto permette di sviluppare in diversi linguaggi oltre che in Java (tramite dei plug-in è possibile scrivere codice C, C++, Javascript, PHP, ecc ) ed è disponibile per numerosi S.O. quali Windows, Linux e MacOs, proprio perché è stato sviluppato in Java. Eclipse è stato sviluppato grazie a delle librerie grafiche (GUI) sviluppate appositamente che vengono chiamate Standard Widget Toolkit (SWT), di conseguenza non utilizzano quelle standard del linguaggio Java (Swing). E possibile utilizzare tali interfacce per sviluppare le proprie applicazioni. La caratteristica forte di Eclipse è di avere una sovrabbondanza di estensioni (plugin) che gli permettono di supportare diverse tecnologie e framework facilitando il lavoro allo sviluppatore. Pro: - multi-linguaggio e multi-piattaforma - Molto completo - Plugin per ogni necessità - Gratuito Contro: - Richiede un computer potente - Serve un po' di tempo per conoscerlo Figura 8 - Screen dell interfaccia di NetBeans Pagina 7
1.2.3 Confronto tra Eclipse e NetBeans Entrambi gli IDE sono semplici da scaricare ed installare. I siti web del download di entrambi gli IDE offrono varie configurazioni di caratteristiche e plugin che meglio rispecchiano le necessità del proprio progetto. Una volta installati, NetBeans si presenta più facile di Eclipse nel caricare un esistente progetto. Una finestra di wizard chiede l albero di directory del codice e dei test ed intelligentemente li carica entrambi. Necessita solo di specificare alcune librerie utilizzate che non sono note all IDE. Si possono avere progetti ovunque sul disco. Come la maggior parte degli IDE Java, NetBeans non ha il concetto equivalente di workspace di Eclipse e non impone requisiti simili sulla posizione dei proprio file di progetto. Entrambi gli IDE hanno molte caratteristiche utili per quanto riguarda la programmazione pura. È improbabile che un utente necessiti di qualcosa in Java che non possa riprodurre in entrambi gli IDE in modo confortevole. Eclipse ha un interfaccia grafica più facile e gestibile di NetBeanse e usa altre caratteristiche di progetto che sono uniche tra gli IDE Java. La principale è il concetto di prospettiva, cioè l idea che un utente può cliccare su una nuova prospettiva e tutte le finestre cambieranno rispetto al nuovo contesto. Eclipse supporta meglio lo sviluppo di applicazioni per Android, per ciò è stato utilizzato per la creazione delle applicazioni per il nostro progretto. Pagina 8
2 Android Android è un sistema operativo per dispositivi mobili organizzato in un'architettura software che include un sistema operativo di base e i middleware (insieme di programmi informatici che fungono da intermediari tra diverse applicazioni e componenti software) per le comunicazioni e le applicazioni di base. Figura 9 - Stemma Android Le caratteristiche principali di Android sono la struttura open source (escluse alcune versioni intermedie) e il suo basarsi su kernel Linux. La caratteristica open source ed il tipo di licenza (Licenza Apache) permette di modificare e distribuire liberamente il codice sorgente. Inoltre, Android dispone di una vasta comunità di sviluppatori che realizzano applicazioni con l'obiettivo di aumentare le funzionalitá dei dispositivi. Queste applicazioni sono scritte soprattutto con una versione modificata del linguaggio di programmazione Java. Questi fattori hanno permesso ad Android di diventare il sistema operativo più utilizzato in ambito mobile, oltre a rappresentare, per le aziende produttrici, la migliore scelta in termini di bassi costi, personalizzazione e leggerezza del sistema operativo stesso, senza dover scrivere un proprio sistema operativo da zero. Le applicazioni di Android sono sviluppate all'interno di un framework, ossia di una struttura dati specifica. La struttura del framework è molto chiara se si utilizza l'ambiente di sviluppo (SDK) con Eclipse; il mancato utilizzo di Eclipse, tuttavia, non impedisce di scrivere applicazioni Android funzionanti. Le applicazioni Android sono caratterizzate da una certa dualità: parti dinamiche scritte in Java e parti statiche scritte in XML. Tipico delle parti statiche possono essere quelle caratteristiche che non cambiano durante l'esecuzione dell'applicazione, come per esempio il colore dello sfondo. Tipico delle parti dinamiche sono gli aspetti programmatici come per esempio la gestione degli eventi. Questa dualità è però solo apparente. Durante l'esecuzione, infatti, la Dalvik Virtual Machine (DVM) esegue sempre un programma. Per lo Pagina 9
sviluppo delle applicazioni è disponibile una completa documentazione la quale, anche graficamente, riprende la struttura tipica della documentazione Java del sito Oracle. Tramite l'sdk possiamo passare dalla descrizione della nostra applicazione alla sua effettiva esecuzione sia in emulazione, sia su un dispositivo concreto. Per descrivere l'applicazione al dispositivo prescelto si utilizza il file Manifest.xml Possiamo quindi affermare che un'applicazione è descritta completamente da una tripletta: - Codice Java - Risorse statiche xml - Manifest.xml Il codice Java viene compilato insieme all'xml per generare un file con estensione.apk: esso contiene il bytecode per la DVM. I passi successivi servono per installare il bytecode nel dispositivo (ed eseguirlo in emulazione) 2.1 Caratteristiche grafiche Android permette la creazione d interfacce in tre modi: - Metodo procedurale: possiamo creare un interfaccia utente completamente in codice Java; - Metodo dichiarativo: Possiamo creare l interfaccia utente attraverso un descrittore XML; - Metodo ibrido: possiamo creare l interfaccia utente in modo dichiarativo e si specifica con il metodo procedurale richiamando il descrittore XML da codice. Il frammento è quella porzione di codice (quindi di applicazione) che gestisce la parte grafica, in base alle possibilità del dispositivo su cui è stato installato. Il problema dello sviluppatore è evidente quando si trova a dover sviluppare una applicazione che funzioni, ad esempio, sia su un tablet (generalmente questi hanno uno schermo touch-screen di grandi dimensioni) che su alcuni tipi di smartphone (che possono avere 2 schermi e non è detto che entrambi siano touch-screen). È stato allora deciso, dal team di Android, di creare il concetto di "fragments", ossia una classe tanto generica da permettere lo sviluppo di una applicazione con la parte grafica slegata a quella "decisionale", in modo da rendere agevole l'adattamento dell'applicazione alle varie situazioni. Il programmatore creerà vari frammenti della parte grafica e poi Android la ridisegnerà correttamente per il dispositivo in uso. Pagina 10
2.2 Confronto tra Android e ios Il maggiore rivale di Android è il sistema ios di Macintosh, usato anch esso per dispositivi portatili come telefoni cellulari e tablet. Le armi di attacco da parte di ios sono: - Interfaccia più intuitiva: interfaccia semplice e dinamica che rimane molto intuitiva e facile da utilizzare anche per nuovi utenti; - Siri: assistente personale intelligente che utilizza una interfaccia utente in linguaggio umano per rispondere alle domande, formulare raccomandazioni, e eseguire azioni delegando le richieste di un insieme di servizi Web; - icloud: sistema per archiviare i contenuti multimediali dell utente su server remoti, condivisi tra i vari dispositivi in possesso dell utente. Grazie alla tecnologia push vengono inviati a tutti i dispositivi via rete senza fili (3G o Wi- Fi), automaticamente e senza che si debba fare nulla se non configurare la modalità di funzionamento dal relativo pannello di controllo. Se si acquista un brano musicale, si scatta una foto, si redige un documento o un foglio dati, tali file verranno automaticamente scritti o aggiornati su ogni dispositivo dello stesso utente. Android, per difendersi, ha dalla sua parte: - Integrazione tra le app: gli sviluppatori possono effettuare delle integrazioni tra le app permettendo senza avviare l applicazione che consente il servizio. Questo non è attualmente possibile su ios; - Impostazioni veloci: è possibile attivare e disattivare tutta una serie di funzioni come il wifi, bluetooth o gps dalla schermata delle notifiche mi fa risparmiare un sacco di tempo; - Gestione dei file: consente di scaricare o caricare un file (di qualunque tipo) permettendo in questo modo di caricare anche le applicazioni che un utente ha sviluppato e testarlo (oltre che con l emulatore) anche sul proprio dispositivo. La nostra scelta di utilizzare Android è stata guidata dal fatto che è possibile programmare e pubblicare applicazioni in modo gratuito. Pagina 11
3 Personalizzazione del Tab Diario La mossa vincente di Windows è stata la creazione di interfacce grafiche che aiutassero l utente nelle operazioni al computer, cercando di migliorare la grafica rimanendo al passo con la tecnologia e seguendo i gusti sempre più esigenti degli utenti che adesso non si accontenta più di un impostazione grafica elevata, ma vogliono personalizzarla a piacimento adattandola ai propri gusti. Per accontentare gli utenti anche da questo punto di vista, l applicazione Tab Diario permette la personalizzazione sia dal singolo utente, in questo caso l alunno o il genitore, sia dal programmatore. 3.1 Cambiamenti a opera del utente Tab Diario permette al singolo alunno di personalizzare la propria copia dell applicazione inserendo in una cartella le proprie immagini per poterle visualizzare, in ordine casuale, a lato dello schermo nella pagina principale durante l utilizzo. Figura 10 Esempio di personalizzazione immagini Pagina 12
3.2 Cambiamenti a opera del programmatore Il programmatore può modificare: - L immagine della pagina di login; - Lo sfondo della pagina principale; - L asset dei tre layout. Per modificare l immagine presente nell interfaccia di login, il programmatore, deve sostituire l immagine presente con lo stemma della scuola, andando a cambiare il campo di riferimento dell ImageView. Analogamente, si deve svolgere la stessa procedura per il cambio dello sfondo della pagina principale, andando però a modificare il campo di background del layout. Infine, il programmatore, può anche modificare la disposizione degli oggetti su i layout come la scuola desidera, andando a ridefinire le impostazioni o dal codice XML o dalla anteprima grafica proposta dal IDE. Pagina 13
4 Evoluzione L applicazione Tab Diario è stata sviluppata per tablet con uno schermo di 7, ma, per aumentare la folla di mercato, l applicazione può essere adattata anche a schermi con dimensioni diverse. La scelta iniziale è stata suggerita dalla necessità di uno strumento facile da trasportare, con un peso e una dimensione limitata. L assenza di 3G nei tablet è stata scelta appositamente per non permettere all alunno di connettersi individualmente a internet, rimanendo in questo modo obbligato a connettersi al wifi della scuola sotto il controllo del maestro. 4.1 Applicazione per tablet 7 L applicazione, con le impostazioni predefinite per i tablet 7, si presenta all avvio con la pagina di login divisa verticalmente in due parti. - La parte sinistra dello schermo è occupata da un immagine (nel caso in figura, dallo stemma della MagiCum del settore Diario). - La parte destra permette l accesso all area riservata tramite una serie di caselle che richiedono l inserimento dei dati necessari (Nome, Cognome e Password). Una volta completato l inserimento e premendo sull oggetto Buttom nominato Accedi, se si è connessi a internet, le informazioni sono inviate al database per il confronto e se sono corrette, è consentito l accesso. Figure 11 Screen del layout di login Pagina 14
L area riservata è costituita dalla pagina principale, dove si può riceve le informazioni (avvisi, compiti, voti e note disciplinari) inviate dal maestro dall applicazione Tab Registro. Questa pagina si suddivide in tre parti: - La parte inferiore dove è presente una sequenza di RadioButton che permettono la selezione della materia di cui si vuole ricevere le informazioni; - La parte laterale a destra dove sono visibili le immagini, caricate su una ImageView, che mantengono un ambiente più allegro e simpatico agli occhi dello studente; - La parte centrale è costituita da quattro EditText, uno per ogni informazione, con i rispettivi TextView, che ne indicano l apparteneza, che consentono la visualizzazione delle informazioni da parte dell utente dopo che ha eseguito la richiesta al database di inviare i dati corrispondenti alla materia e al giorno selezionate premendo sull oggetto Button Ricevi (per default la data all avvio dell applicazione corrisponde alla data del sistema del dispositivo.) Figure 12 Screen del layout della pagina principale Pagina 15
Per selezionare il giorno interessato è possibile accedere alla pagina del calendario, premendo l oggetto Button indicato con la data odierna presente nella parte in alto sopra l immagine, dove, premendo sulla data desiderata, è possibile cambiare il giorno di riferimento. Figure 13 Screen del layout del calendatio 4.2 Applicazione per tablet di altre dimensioni L applicazione Tab Diario può essere adattata ai tablet con schermo di diversa dimensione dal programmatore, modificando la disposizione e le dimensioni degli oggetti e delle scritte presenti nel layout predisponendole in modo statico o dinamico. Risulta più facile e veloce modificare l adattamento in modo statico degli oggetti alla nuova dimensione perché basta andare da codice XML a cambiare i valori preesistenti, tenendo presente che la nuova interfaccia funziona correttamente solo per la nuova dimensione. Per evitare lo sfasamento che si presenta nel caricare l applicazione su tablet con dimensioni dello schermo diverso da quello configurato, si deve intervenire in maniera dinamica, cioè assegnare, da codice XML, ai campi che definiscono la dimensione degli oggetti, una variabile il cui valore dipende dalla grandezza dello schermo del tablet. Pagina 16