Tecnologie e progettazione di sistemi informatici e di telecomunicazioni - Parte 1: APPLICAZIONI MOBILE
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Tecnologie e progettazione di
sistemi informatici e di
telecomunicazioni
Classe V
Parte 1: APPLICAZIONI MOBILE
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
Applicazioni mobile Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
RoadMap
Sommario
Reti mobili e dispositivi: introduzione ............................................................................................. 4
Dalla prima alla quinta generazione: storia degli standard di telecomunicazione......................... 5
Sistemi operativi mobili ................................................................................................................... 8
Tipologie di Sistemi ...................................................................................................................... 8
Il kernel......................................................................................................................................... 8
Android....................................................................................................................................... 13
iOS .............................................................................................................................................. 15
Windows Phone ......................................................................................................................... 16
App per sistemi mobili ................................................................................................................... 17
Apache Cordova: Descrizione e Funzionamento ....................................................................... 19
Componenti di base ................................................................................................................... 21
Ambienti di sviluppo .................................................................................................................. 22
Creazione di un progetto ........................................................................................................... 23
Build e run di un progetto ......................................................................................................... 26
Eventi......................................................................................................................................... 27
Architettura di un’App .............................................................................................................. 28
Boilerplate di base (cordova+f7) ............................................................................................... 29
Componenti UI .......................................................................................................................... 33
Plugin.......................................................................................................................................... 35
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
Reti mobili e dispositivi: introduzione
Le reti mobili sono caratterizzate dal fatto che i dispositivi ad esse connesse si scambiano
informazioni senza utilizzare fili/cavi e possono mantenere attiva la connessione anche se
modificano la loro posizione, a differenza delle reti cablate, i cui dispositivi sono connessi tramite
cavi e sono quindi costituite perlopiù da postazioni fisse.
L’evidente vantaggio delle reti mobili è quindi quello di mantenere la connessione anche a Km di
distanza ed in movimento, con l’ulteriore comodità di poter individuare/rintracciare i dispositivi
anche quando sono appunto in movimento e a Km di distanza.
Anche se spesso non viene effettuata una distinzione tra reti wireless e reti mobili a tutti gli effetti,
è doveroso ricordare che le prime non sono altro che soluzioni per reti aziendali che permettono di
scambiare informazioni senza fili e una mobilità limitata solo all’area coperta dalla rete stessa.
I dispositivi mobili sono appunto apparati in grado di connettersi tra lori tramite una rete mobile,
spesso dotati di processori con capacità di calcolo assimilabili a quelle delle postazioni fisse, tuttavia,
per le loro caratteristiche fisiche, soprattutto la dimensione dello schermo, necessitano di
meccanismi di interfacciamento diversi rispetto alle postazioni fisse, primo fra tutti il thouch e sono
dotati di sistemi operativi e software specifico per ogni singolo tipo di dispositivo.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
Dalla prima alla quinta generazione: storia degli
standard di telecomunicazione
Fonte: http://www.sicomtesting.com/blog/dal-1g-al-5g-il-passato-e-il-futuro-degli-standard-gsm-
umts-hspa-ed-lte/
La comunicazione mobile si è evoluta moltissimo in pochi decenni, nei quali si sono avvicendate le
varie generazioni di dispositivi e reti compatibili con i nuovi standard di telecomunicazione.
I Generazione: i sistemi di prima generazione, apparsi negli “lontani” anni ’80 sotto la sigla 1G,
trasmettevano in modalità analogica ed erano in grado di gestire solo il traffico voce. La qualità della
comunicazione offerta dai telefoni cellulari di prima generazione, apparecchiature decisamente
voluminose, presentava evidenti limiti legati alla tipologia di segnale, come la scarsa qualità audio e
le frequenti interruzioni.
2^ Generazione: allo scopo di migliorare la qualità di trasmissione, la capacità di sistema e la
copertura del segnale, la seconda generazione di reti mobili 2G ha segnato un punto di rottura con
la tecnologia precedente, puntando tutto passaggio al digitale introdotto dallo standard GSM
(Global System for Mobile communications).
Nato in Europa nei primi anni ’90, ad oggi il GSM, implementato dalle sue successive evoluzioni, si
attesta come lo standard di telefonia mobile con il maggior numero di utenti a livello mondiale.
L’uso del digitale ha sancito la nascita dei primi servizi di trasmissione dati, sotto forma di messaggi
di testo (SMS – Short Message Service), messaggi multimediali (MMS – Multimedia Message
Service) e WAP (Wireless Application Protocol), lo standard che ha consentiva l’accesso a appositi
contenuti Internet da telefonino. Tutto questo è stato reso possibile dalle evoluzioni dello standard
GSM, la generazione 2.5 G, una via di mezzo fra la seconda (GSM) e la terza generazione (UMTS). La
tecnologia GPRS (General Packet Radio Service) prima,
seguita dalla tecnologia EDGE (Enhanced Data rates for
Global Evolution), hanno permesso un incremento
della velocità di connessione basandosi su un nuovo
sistema di trasmissione dati a commutazione di
pacchetto.
3^Generazione: le tecnologie di terza generazione
vengono lanciate in tutto il mondo nei primi anni 2000;
i nuovi standard internazionali di telefonia mobile 3G
seguono le specifiche tecniche IMT-2000 definite dal
ITU, Unione Internazionale delle Telecomunicazioni,
ponendosi come obiettivo la realizzazione di sistema
mondiale di comunicazione mobile per il roaming
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
globale dei terminali. Tra questi, lo standard UMTS (Universal Mobile Telecommunications System),
tutt’ora attuale e il più utilizzato in Europa, è anch’esso un evoluzione del GSM. L’introduzione del
protocollo W-CDMA (Wideband Code Division Multiple Access), una particolare tecnologia di
accesso multiplo al canale radio per reti cellulari di terza generazione, ha consentito allo standard
UMTS di offrire un ulteriore velocizzazione del trasferimento dati. Le prestazioni dell’UMTS,
migliorate dall’utilizzo di protocolli di trasmissione HSPA (High Speed Packet Access) hanno favorito
l’ampliamento e una maggiore qualità dei servizi multimediali fruibili da rete mobile, permettendo
ad esempio di effettuare videochiamate fluide e navigare su Internet potendo accedere alla versione
desktop dei siti web.
4^ Generazione: la sigla 4G identifica la quarta, ed attuale, generazione dei servizi di telefonia
mobile. La tecnologia LTE (Long Term Evolution), e la sua più recente evoluzione LTE Advanced (LTE-
A), sono state sviluppate a partire dal 2009 per incrementare le prestazioni delle reti cellulari 4G,
inviando e ricevendo dati ad una velocità di connessione in grado di competere con la velocità delle
connessioni domestiche.
Grazie ad una copertura rete sempre maggiore e all’aumento di dispositivi in grado di supportarla,
sempre più smartphone e tablet possono navigare e accedere a cloud, servizi di streaming e video
conferenza in alta definizione senza rallentamenti o interruzioni, resi possibili dalla connessione
veloce e dalla riduzione dei tempi di latenza raggiunti dalle reti 4G.
In Italia la rete 4G ha una velocità di connessione di 15Mbps, che ci colloca ta i primi paesi al mondo
come qualità del servizio anche se, purtroppo, non abbiamo ancora una buona copertura.
L’obiettivo dell’agenda digitale per l’Italia prevede una copertura a 30 Mbps entro il 2020.
Il seguente grafico riporta le previsioni di crescita della rete 4G rispetto alla rete 3G per il decennio
corrente.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
5^ Generazione: Operatori di telecomunicazione ed esperti del settore sono già impegnati nella
ricerca e sviluppo del 5G, l’infrastruttura tecnologica in grado migliorare ulteriormente la velocità di
trasmissione dati delle attuali reti per supportare il crescente numero di utenti e servizi accessibili
da rete mobile.
L’Unione Internazionale delle Telecomunicazioni sta iniziando a delineare le linee guida IMT-2020
su cui si baserà il nuovo standard 5G, grazie al quale potremo navigare da smarthphone e tablet ad
una velocità massima teorica di 20 Gbps, fino a 20 volte più veloci della velocità massima teorizzata
per il 4G (1 Gbps).
La nuova generazione di tecnologia mobile, che secondo le previsioni ITU potrebbe iniziare ad essere
disponibile dal 2020, oltre ad offrire maggiore velocità con tempi di latenza ridottissimi, sarà in
grado di connettere un altissimo numero di dispositivi per kmq e mantenere la connessione anche
viaggiando ad altissime velocità. Il 5G fornirà nuovi e migliori servizi per la comunicazione, migliorerà
prestazioni nel gaming e nella realtà aumentata, permetterà inoltre di sviluppare al meglio il
cosiddetto “Internet delle Cose” (IoT, Internet of Things): sempre più device, dai dispositivi
indossabili ai più svariati oggetti comuni dotati di un’identità elettronica, potranno dialogare in rete
ed essere controllabili a distanza.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
Sistemi operativi mobili
Tipologie di Sistemi
L'accesso diretto all'hardware può essere anche molto complesso. Il
Sistema Operativo e, in particolare il Kernel, “nascondono” le complessità
dell’hardware e rendono la macchina “gradevole” all’utente.
Pur nelle loro differenze c'è un elemento strutturale che accomuna ogni
sistema operativo – sia mobile sia desktop – oggi in uso: il kernel
(“nocciolo” o “fulcro in inglese).
Naturalmente, ognuno dei sistemi operativi (Windows, Android, iOS, Mac OS, …) ha un proprio
kernel, realizzato in base alle necessità del sistema operativo stesso. Per funzionare, però, tutti
hanno bisogno di questo componente.
Utilizzando varie modalità di gestione – tra le quali la comunicazione tra processi e le chiamate di
sistema – il kernel fa da ponte tra le componenti hardware di un computer – come processore, RAM
e hard disk – e i programmi in esecuzione sul computer stesso.
Data la sua rilevanza è il primo programma ad essere caricato in memoria quando si accende un
computer e l'ultimo ad essere chiuso in fase di spegnimento. (cfr. Wikipedia e altre fonti in rete).
Il kernel
I kernel implementano uno o più tipi di astrazione dall'hardware, il cosiddetto “Hardware
abstraction layer”. Queste astrazioni servono a "nascondere" la complessità e a fornire
un'interfaccia pulita ed uniforme all'hardware sottostante, in modo da semplificare il lavoro degli
sviluppatori.
I kernel si possono classificare - in base al grado di astrazione dell'Hardware - in almeno tre categorie
(vedi figura sottostante): monolitici, microkernel, ibridi.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
- Kernel monolitici, che implementano direttamente una completa astrazione dell'hardware
sottostante. Nei sistemi tradizionali la struttura a buccia di cipolla (gerarchica) presiede le
funzionalità del sistema operativo: dal kernel alla shell i livelli si parlano tramite primitive e i
processi applicativi intervengono sullo strato più elevato che fornisce i servizi di sistema.
- Microkernel, che forniscono un insieme ristretto e semplice di astrazione dell'hardware e usano
software (chiamati device driver o server) per fornire per fornire maggiori funzionalità. Tuttavia
per ragioni di prestazioni quasi nessun sistema operativo dispone di un microkernel puro (l'unica
eccezione è Mach). In Windows NT/Vista/Seven/10 molti servizi sono implementati in kernel
mode, fra i quali il file system, la gestione della memoria e anche la gestione della grafica. A
livello di prestazioni e di sicurezza questo equivale ai kernel monolitici (ad esempio UNIX e
Linux), ma permette una flessibilità maggiore.
- Kernel ibridi (o microkernel modificati), che si differenziano dai microkernel puri per
l'implementazione di alcune funzioni aggiuntive al fine di incrementare le prestazioni rispetto ai
kernel monolitici. I Microkernel, che forniscono I kernel ibridi sono essenzialmente dei
microkernel che hanno del codice "essenziale" al livello di spazio del kernel in modo che questo
codice possa girare più rapidamente che se fosse implementato ad alto livello. Questo fu un
compromesso adottato da molti sviluppatori di sistemi operativi. "Ibrido" implica che il kernel in
questione condivida concetti architetturali e meccanismi tipici sia dei kernel monolitici che dei
microkernel.
Infatti la definizione di microkernel prevede che solo i servizi essenziali debbano risiedere nel kernel,
e tutti gli altri servizi del sistema operativo, inclusi la gestione della memoria e l'Input/Output,
dovrebbero operare in user mode in spazi di memoria separati.
Nei sistemi basati sull’approccio Client-Server è il sistema operativo stesso che viene suddiviso in
più processi, ciascuno dei quali realizza un unico insieme di servizi.
Esistono servizi per la memoria, per la creazione dei processi, per la tempificazione dei processi etc.
Ogni servizio gira in modalità Kernel privilegiata. Il Client, che può essere un altro componente del
sistema, oppure un programma applicativo, che chiede un servizio mandando un messaggio al
server/servizio.
Il Kernel, che gira in “modo kernel”, consegna il messaggio al server: il server esegue l’operazione
richiesta e risponde al client con un altro messaggio.
Tra i Kernel ibridi, i più usati, consideriamo ad esempio Windows e la modalità con cui gestisce
l’interfaccia tra il microkernel e l’hardware. L’HAL costituisce la tecnologia ed i drivers che
permettono a Windows di comunicare con l'hardware.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni
In particolare:
“Hardware Abstraction Layer (HAL) o strato di astrazione dall'hardware, è un insieme di funzioni di
I/O il più possibile generiche e semplici, il cui compito è di tenere conto di tutte le differenze fra
dispositivi fisici diversi al posto del programma che lo userà, nascondendogli la vera identità e natura
di essi: per esempio il programma, invece di aprire personalmente un file chiederà all'HAL di farlo
per lui e l'HAL, appena esaudita la richiesta, gli passerà un riferimento al file per la lettura (o lo
leggerà per lui). Dotando un programma di un HAL se ne migliora la portabilità su altri tipi di
computer/sistemi operativi e la funzionalità con dispositivi diversi, perché eventuali modifiche e
adattamenti vanno fatti solamente nell' HAL senza toccare il codice del programma stesso; inoltre è
relativamente facile aggiungere, all'occorrenza, una sezione all'HAL per gestire un dispositivo che
non era stato inizialmente previsto.
Quindi i programmi non accedono mai alla memoria della scheda grafica quando devono modificare
l'immagine mostrata sullo schermo. I programmi comunicano al sistema operativo le operazioni da
compiere e il sistema operativo provvede a effettuare le modifiche necessarie. Questo consente di
Tecnologie e progettazione di sistemi informatici e di telecomunicazionimodificare l'hardware deposto alla visualizzazione senza dover modificare tutti i programmi. Basta
modificare lo strato che accede all'hardware, questo comunemente viene chiamato driver.
La HAL può essere utilizzata per emulare componenti non presenti nel sistema operativo o
nell'hardware. Per esempio le moderne schede grafiche non gestiscono nativamente le modalità
CGA, EGA o VGA. Queste modalità vengono emulate dall'HAL che provvede a tradurre le istruzioni
che gestiscono queste modalità in comandi comprensibili dalla scheda grafica. L'emulazione
utilizzando una HAL viene utilizzata in molti sistemi per consentire la retro compatibilità con
applicazioni arcaiche. Molte banche utilizzano computer moderni con programmi arcaici tramite
programmi di emulazione che interpongono una HAL tra l'hardware moderno e il software arcaico.”
(note tratte http://it.wikipedia.org/wiki/Hardware_abstraction_layer)
Sistemi Operativi mobili e wearable (Note tratte da Wikipedia, l’enciclopedia libera)
- “Un sistema operativo per dispositivi mobili, in inglese "mobile OS", è un sistema operativo che
controlla un dispositivo mobile con lo stesso principio con cui Mac OS, Unix, Linux o Windows
controllano un desktop computer oppure un laptop.”
- Tuttavia affronta problematiche legate alla natura del dispositivo mobile, più critiche rispetto
ad un desktop o un laptop, tra le tante:
• la limitatezza delle risorse (memoria, CPU),
• l'assenza di alimentazione esterna,
• differenti tecnologie per l'accesso a Internet (WiFi, GPRS, HSDPA...),
• nuovi metodi d'immissione (touchscreen, minitastiere),
• ridotte dimensioni del display.”
Esempi di SO mobile
Produttore OS Famiglia di Architettura CPU Linguaggio di
sistemi operativi supportata programmazione
Apple iOS macOS/Unix-like ARM C, C++,Objective C
Google Inc. Android Linux ARM/MIPS C, C++, Java
Microsoft Windows Windows CE ARM C++,C#
Mobile/Windows 5.2/Windows NT
Phone
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniLa rivoluzione della mobilità (https://e-
l.unifi.it/pluginfile.php/58454/mod_resource/content/1/Sistemi%20ed%20applicazioni%20mobile.
pdf)
- Il terminale è sempre disponibile all’utente: – in qualsiasi situazione – con tempi di accesso
brevissimi
- Il terminale deve essere comodo: – Ingombro e peso ridotti – Interazione con l’utente
semplicissima: un tablet o uno smartphone può essere utilizzato in piedi, un notebook no
- Il terminale deve essere consapevole dell’ambiente: – Vari sensori per rilevare la posizione,
l’orientamento nello spazio, la luce
- Il terminale deve essere rapido nell’accesso: – In viaggio non si possono aspettare decine di
secondi per avere informazioni importanti – Grazie ai marketplace si possono cercare, trovare
ed installare in pochi minuti nuove applicazioni, in un modo infinitamente più snello che con il
PC
- Il terminale deve avere autonomia: – Se il dispositivo è sempre con sé, la batteria deve durare
un giorno intero
Differenze desktop-mobile
- Esiste una e una sola applicazione attiva visibile – Posso eseguire dei task in secondo piano
- Abbiamo una e una sola finestra, con dimensioni fisse e non modificabili
- L’interfaccia è limitata: – non possiamo inserire troppi elementi
- Accesso limitato: – ogni applicazione ha un proprio «giardino» di privilegi
- Risorse limitate: – Dato il ricco contenuto grafico, è semplice esaurire la memoria disponibile
- Disponibilità di dispositivi aggiuntivi: – Fotocamera, accelerometro, bussola, giroscopio, GPS
- Diversa modalità di interazione: – Dita della mano invece del mouse – Sembra veramente di
utilizzare una mappa, un libro, una macchina fotografica, ecc…
Vantaggi dal punto di vista dell’utente:
- Facile catalogazione e ricerca dei contenuti
- Acquisto rapido e in pochi tap
- Installazione di software senza dover ricorrere al PC
- …………………
Vantaggi dal punto di vista del programmatore:
- Il singolo utente acquisisce la possibilità di sviluppare e distribuire software in maniera
completamente autonoma
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni- Costi di pubblicazione, hosting, marketing sono azzerati (o quasi)
- Possibilità di focalizzarsi principalmente sul lavoro di progettazione ed implementazione
Android
Android è un sistema operativo mobile (OS) inizialmente sviluppato da una società con sede nella
Silicon Valley (Android Inc.) che nel 2005 viene acquisita da Google. Android possiede un set
completo di software, che include il sistema operativo principale e software aggiuntivo.
Per il supporto multimediale, Android in grado di eseguire la grafica 2D e 3D , audio e video in vari
formati. Supportare input multi-touch e dispone del browser Google Chrome. Possiede interfacce
per televisori, auto, orologi (Android Wear), occhiali (Google Glass).
Uno dei punti di forza di Android è la grande comunità di sviluppatori che progetta le applicazioni e
migliora la capacità dei dispositivi . Queste applicazioni sono poi messe a disposizione tramite
Android Market di Google. Pertanto la filosofia di Android è opposta a quella di Apple (che vedremo
nel paragrafo successivo): è infatti realizzato con l’obiettivo di essere il primo S.O. completo di tipo
aperto e distribuito gratuitamente.
Modellato sul kernel di Linux , Android è stato rilasciato anche come codice open source (distribuito
sotto licenza Apache 2.0). Lo sviluppo per Android può essere effettuata tramite Windows , Linux o
Mac , e usa prevalentemente il linguaggio Java. Google ha inizialmente sviluppato Dalvik , una
macchina virtuale appositamente studiata per Android . Dalvik esegue codice Java ricompilato e lo
legge come Dalvik bytecode ed è stato progettato per ottimizzare la potenza della batteria e
mantenere la funzionalità in un ambiente con memoria limitata e la potenza della CPU , come quella
dei telefoni cellulari , netbook e tablet PC .
Alcune caratteristiche della Dalvik virtual machine:
Dalvik (Il nome Dalvik deriva dal villaggio di pescatori Dalvíkurbyggð (da cui proviene la famiglia
dell’autore)
- Macchina virtuale, componente di Android: – ottimizzata per sfruttare la poca memoria
presente – fa girare diverse istanze della VM contemporaneamente – nasconde al sistema
operativo la gestione della memoria e dei thread
- spesso associato alla VM Java, ma il bytecode non è Java.
- Include un compilatore Just In Time: – Ogni app compilata in parte dallo sviluppatore;
l’interprete software esegue il codice e lo compila in linguaggio macchina in tempo reale –
Maggiore versatilità nello sviluppo, minori prestazioni
Successivamente Dalvik viene superata dall’ART (Android RunTime) virtual machine
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni- Basato su tecnologia AOT (ahead-of-time): – Esegue l'intera compilazione del codice durante
l'installazione dell'app e non durante l'esecuzione stessa del software. – Vantaggio in prestazioni
e gestione delle risorse. – Maggior tempo per l'installazione di un App, comunque quasi
impercettibile.
Android in sintesi…
- La piattaforma è basata sul kernel Linux usa il database SQLite supporta lo standard OpenGL ES
2.0 per la grafica tridimensionale. Le applicazioni vengono eseguite tramite la Dalvik virtual
machine (DVM), una Java virtual machine adattata per l'uso su dispositivi mobili:
- Applicazione Android : compilazione -> bytecode ->DVM -> esecuzione reale dell'applicazione
Android. Android è fornito di una serie di applicazioni preinstallate: un browser, basato su
WebKit, una rubrica e un calendario.
- Il Sistema Operativo Android è costituito da uno stack software (set di sottosistemi software)
che possiamo individuare nello schema in figura:
Si possono quindi individuare quattro strati dell’Android Stack:
- Linux Kernel Layer
- Native Layer
- Application Framework Layer
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni- Application Layer
Il Kernel del S.O. è basato su Linux ed è composto da applicazioni Java sul quale si “appoggiano” le
applications, un insieme di funzioni base messe a disposizione degli sviluppatori per le funzionalità
basilari (effettuare telefonate, inviare SMS, navigare in Internet …). Questo si completa con
l’Hardware Abtraction Layer (HAL) che svolge un ruolo fondamentale e ha contribuito alla
diffusione e al successo di Android i quanto comprende un insieme di funzioni che tengono conto
e lo rendono compatibile con tutti i dispositivi fisici ( la shell virtualizza l’hardware e permette allo
steddo sw di funzionare du dispositivi differrenti).
Le applicazioni utente vengono eseguite tramite la Virtual Machine ART, come visto sopra.
Per le versioni di Android vedi “https://it.wikipedia.org/wiki/Android#Versioni”
iOS
iOS (Iphone OS fino a giugno 2010), è un sistema operativo sviluppato da Apple, rilasciato nel
mercato nel 2007. È un S.O. proprietario di Apple pertanto può essere eseguito solo sui dispositivi
Apple, inizialmente sviluppato per iPhone, ora utilizzato anche per iPod, iPad ed Apple TV. Come
Mac OS X, è una derivazione di UNIX (famiglia BSD) e usa un microkernel XNU Mach basato su
Darwin OS.
Tale S.O. occupa circa mezzo Gigabyte della memoria interna del dispositivo ed è strutturato in 4
livelli di astrazione:
- Core OS layer
- Core Service layer
- Media layer
- Cocoa thouch layer
Gli strati più in alto forniscono le astrazioni dei servizi dei livelli più in basso facilitando lo sviluppo
delle applicazioni: come tutti i sistemi organizzati gerarchicamente, ogni livello fornisce e
implementa nuov funzionalità beneficiando dei servizi offerti dal livello inferiore,
indipendentemente dai dettagli implementativi di quest’ultimo.
I livelli più bassi (Core OS – Core Service) si occupano di offrire i sevizi fondamentali del S.O.:
threading, gestione processi, funzioni per Input/output, gestione dello stack.
Il livello Media fornisce principalmente strumenti per lo sviluppo di grafica, per la gestione dell’audio
e del video.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniAl livello più basso troviamo lo stato Cocoa Touch che si compone dei framework UIKit e foundation
che rendono disponibili gli strumenti necessari per la realizzazione della grafica, la visualizzazione e
l’interazione con l’utente.
Gli sviluppatori possono comunque accedere ai livelli più bassi.
L’ottima qualità dei dispositivi Apple è soprattutto dovuta al fatto che hanno una perfetta
integrazione, dato che chi programma il S.O. si occupa anche di progettare la parte elettronica.
Tra i punti deboli dei sistemi Apple, oltre al prezzo decisamente elevato c’è il fatto che è un
“sistema chiuso”, questo è però anche un punto di forza poiché permette di ottenere performance
molto alte.
Windows Phone
I dispositivi Windows sono al terzo posto nel numero dei cellulari venduti, il S.O. Microsoft, our
essendo chiuso e a pagamento può essere istallato su diverse marche di cellulari.
L’aspetto più interessante è che a partire dalla versione 8 di Windows i sistemi operativi Microsoft
sono simili per dispositivi mobili e cellulari, con il vantaggio che un applicativo sviluppato per
desktop funziona anche su cellulare
L’attuale problema di Windows è la scarsa disponibilità di applicazioni, dal moment che la
diffusione del S.O. su sistemi mobile è ancora scarsa
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniApp per sistemi mobili
Il termine “App”, abbreviazione di " software applicativo " indica i programmi per dispositivi mobili,
progettati per funzionare su smartphone e tablet.
Le app sono nate come programmi di uso generale per applicazioni tradizionali come la posta
elettronica, la rubrica dei contatti e il meteo. In poco tempo la comodità di disporre sul telefono di
strumenti di questo genere ha portato a una richiesta sempre maggiore da parte degli utenti. Nel
frattempo gli strumenti di sviluppo erano pronti per rispondere a queste richieste del pubblico e
sono presto comparsi i giochi, il GPS, le app bancarie e finanziarie quelle per la prenotazione di
eventi e l’acquisto di biglietti. L'esplosione non si è più fermata e oggi abbiamo App di qualsiasi
genere, compresi i social network, la gestione della musica e dei filmati, giornali e libri, App
sanitarie...
Le app sono programmi leggeri solitamente progettati per implementare una singola funzionalità e,
a differenza delle applicazioni web che operano all’interno del browser, girano direttamente sul
sistema operativo del dispositivo e sono sono tipicamente interattive. Sfruttano le risorse interne
dei dispositivi: schermo touch, microfoni, GPS, accelerometri, giroscopi e talvolta dispositivi e
sensori esterni.
Le app sono di solito scaricabili appoggiandosi a piattaforme di distribuzione delle applicazioni:
Apple App Store, Google Play, Windows Phone Store, e BlackBerry App World. Alcune applicazioni
sono gratuite, altre sono a pagamento. Di solito, vengono scaricati dalla piattaforma di un
dispositivo di destinazione, ad esempio un iPhone , BlackBerry, telefono Android o Windows Phone
, ma a volte possono essere scaricati per computer portatili o computer desktop . Per le applicazioni
a pagamento una percentuale sul prezzo (20-30 % ) va al provider di distribuzione (come iTunes ),
mentre il resto va al produttore dell'applicazione .
Nelle prime fasi del mercato degli smartphone, la maggior parte delle applicazioni sono state
adattate per l'iPhone. Con il passare del tempo, però, la quota di mercato per Android è cresciuta
molto, così come il sistema operativo e la necessità di una funzionalità cross-platform è diventato
un problema .
Le app si possono classificare in tre tipi:
● Web App: messe a disposizione su Internet attraverso un browser. Le applicazioni Web sono
generalizzate per più piattaforme e non vengono installate in locale. Difatto sono siti web
solitamente ottimizzati per essere visualizzati sui dispositivi mobili
● App nativa: sviluppata esclusivamente per una particolare piattaforma o dispositivo di
elaborazione
● App ibrida (hybrid app) combina elementi di entrambe le applicazioni native e web. Non è
legata al dispositivo. Di fatto incorpora un browser per l’accesso ai contenuti online
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniApp nativa
Una (mobile) App nativa è un’applicazione che è scritta su misura per una specifica piattaforma e
non funziona su altri dispositivi. Per funzionare si serve direttamente delle funzioni del sistema
operativo che gira sul dispositivo mobile su cui viene istallata e, spesso, si serve dei linguaggi e delle
API offerte del produttore per avere accesso ai vari dispositivi tra cui la fotocamera o la rubrica.
Inoltre alcune applicazioni possono essere usate in locale, senza una connessione Internet.
Tali app sono codificate in un linguaggio di programmazione specifico, come Objective C per iOS e
Java per i sistemi operativi Android, o C# per Microsoft . Le applicazioni mobili native offrono
velocità e alte prestazioni con un buon grado di affidabilità . Esse hanno accesso ai vari dispositivi
del telefono , come la sua macchina fotografica e la rubrica . La maggior parte dei videogiochi o di
App che hanno bisogno di buone prestazioni, sono applicazioni mobili native.
Un’applicazione nativa ha il vantaggio di essere più veloce ed avere una maggiore integrazione con
il look-and-feel della piattaforma, lo svantaggio di non essere direttamente portabile su altre
piattaforme, poiché sviluppate per uno specifico sistema operativo, obbligando la società che le crea
a rilasciare versioni duplicate che funzionano su piattaforme diverse.
Lo sviluppo di queste applicazioni richiede l’utilizzo di di ambienti di sviluppo integrati specializzati.
App ibrida
Si tratta di un’applicazione scritto in linguaggio multipiattaforma come HTML5. Il vantaggio è quello
di un’applicazione che gira su dispositivi di produttori diversi essendo indipendente dal linguaggio
specifico e dal sistema operativo. Questa soluzione ha delle importanti conseguenze: questo tipo di
applicazioni, infatti, sono compatibili con i diversi sistemi operativi (cross–platform), e possono
comunque ancora accedere all’hardware di un telefono usando particolari librerie, sono tuttavia
limitate nelle nelle prestazioni e non sono sempre aggiornate ai nuovi rilasci di sistemi operativi e
driver di periferiche.
Lo sviluppo di queste applicazioni avviene tramite semplici editor di testo e consiste in file di tipo
testuale.
Per sviluppare App Ibride si utilizzano dei framework che offrono delle librerie (API) per interfacciarsi
con le funzionalità native del dispositivo, permettendo di utilizzare lo stesso progetto per tutte le
piattaforme supportate, questo comporta tuttavia una maggior pesantezza e quindi lentezza
dell’applicazione rispetto a quelle native. Altro svantaggio è una minore efficienza del rendering
grafico: senza particolari accorgimenti l’aspetto dell’interfaccia grafica potrebbe non risultare
abbastanza omogeneo con quello nativo della piattaforma (si ricorre spesso a piattaforme come
Sencha , PhoneGap e MoSync ).
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniApache Cordova: Descrizione e Funzionamento
Apache Cordova è un framework di sviluppo mobile open source.
Esso consente di utilizzare tecnologie web come HTML5, CSS3 e JavaScript per lo sviluppo di
applicazioni cross-platform, in grado cioè di funzionare sia in ambiente android, Ios o windows
phone.
Single code based
Native Wrapper Native Wrapper Native Wrapper
WEB BASED WEB BASED WEB BASED
CODE CODE CODE
CORDOVA API CORDOVA API CORDOVA API
ANDROID IOS WINDOWS PHONE
L’applicazione è sviluppata come una web app, o più precisamente come una web page in cui il file
index.html collega CSS, JavaScript, immagini, media e tutte le risorse necessarie al suo
funzionamento. Il codice viene poi inglobato in un wrapper (contenitore) specifico per la
piattaforma scelta che utilizza le API proprietarie per accedere alle funzionalità del dispositivo (ad
es. sensori, contatti, dati) ed infine viene eseguita nella WebView inclusa nel wrapper.
La WebView è simile alla finestra di un web browser che occupa l’intero schermo del dispositivo
senza url bar ne decoration.
WEB
VIEW
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniCordova espone, tramite un set di plugin, una serie di funzioni attraverso le quali è possibile
interfacciarsi alle funzioni hardware e software del dispositivo.
Un plugin è una libreria di funzioni javascript che consentono di accedere ed utilizzare una
particolare risorsa (es. fotocamera, accelerometro, rubrica,..). Cordova si occupa quindi di mappare
queste funzioni sulle chiamate native della piattaforma specifica.
In aggiunta è possibile trovare diversi plugin di terze parti ad esempio su gitHub, telerik,..
Figura 1 https://cordova.apache.org/docs/en/latest/guide/overview/
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniComponenti di base
Lo strumento principale per lo sviluppo di app cross-platform è la cordova cli (command line
interface) che consente di:
− Creare un progetto cordova
− Includere un plugin
− Aggiungere una piattaforma target
− Costruire il progetto per quella specifica piattaforma
− Emulare il progetto
− Eseguire il progetto su un dispositivo
I tool che Cordova utilizza per il suo funzionamento sono node.js, git, gradle, e le librerie SDK delle
piattaforme per cui si intende sviluppare l’app.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniAmbienti di sviluppo
Sebbene sia possibile istallare manualmente tutti i componenti sopradescritti, la configurazione
dell’ambiente è un’operazione articolata, utilizzeremo quindi un’ambiente preconfigurato.
Istallando Visual Studio e lo strumento aggiuntivo Cordova Tools possiamo ottenere in modo
immediato un ambiente funzionante seguendo pochi passaggi:
− Scaricare e lanciare l’istallazione di visual studio 2017
https://www.visualstudio.com/it/downloads/
− L’installer visualizza l’elenco dei componenti aggiuntivi disponibili, selezionare sviluppo
applicazioni con javascript
− Selezionare i componenti opzionali a destra (sdk ed emulatori per android e windows)
− Terminata l’installazione, registrare gratuitamente il software
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniCreazione di un progetto
Dal menu File -> Nuovo:
Il progetto creato avrà la seguente struttura (visibile nel pannello destro):
1. La directory WWW contiene i file dell’applicazione web, è quindi la directory di lavoro principale.
In particolare contiene il file index.html che rappresenta l’entry point dell’app quando viene
lanciata e le cartelle css e script in cui si trovano, rispettivamente i file index.css e index.js che
utilizzeremo per definire l’ui e la logica applicativa.
E’ possibile includere qui eventuali media e risorse aggiuntive necessarie per sviluppare l’app
(immagini, audio, librerie esterne).
2. La directory MERGES contiene gli script che devono essere eseguiti prima o dopo la build
dell’app per una specifica piattaforma (Ad esempio se è necessario rimuovere alcuni file
temporanei prima della build, definire impostazioni grafiche specifiche, ...).
3. La directory RES contiene icone e splashscreen dell’app.
4. Il file CONFIG.XML è un file di configurazione dell’app che consente di specificare alcune
informazioni tra cui il nome dell’app, impostazioni di plugin e di sicurezza, …
Nella cartella di progetto si trovano anche:
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni- La directory PLUGIN contiene le librerie js dei plugin necessari al funzionamento dell’app (che
devono essere aggiunte al bisogno)
- La directory PLATFORM contiene le directories e i files necessari di ogni piattaforma per cui si
sviluppa
Il nuovo progetto creato, nella sua versione di default contiene un’applicazione di test delle
funzionalità di cordova.
In particolare:
INDEX.HTML
appDefault
Apache Cordova
Connessione al dispositivo
Il dispositivo è pronto
Contiene gli elementi standard di una tipica pagina html (html, head, body, e tag standard) e i
collegamenti ai file css e js necessari.
I tag meta visibli nell’head specificano alcune norme di ‘comportamento’ dell’applicazione della web
view:
- Il primo è usato per definire i contenuti esterni (uri) permessi, cioè che l’applicazione è
autorizzata a caricare all’interno della pagina)
Ad esempio se fosse necessario prelevare contenuti dal server http://serverZZZ.org andrebbe
aggiunta la regola specifica content="default-src 'self' data: gap:http://serverZZZ.org
https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"
Per maggiori dettagli https://content-security-policy.com/
Tecnologie e progettazione di sistemi informatici e di telecomunicazioni- Il secondo è usato per definire il contenuto e la codifica della pagina
- Gli ultimi tre sono usati per impostare la web view in modo da non permettere lo zoom o la
selezione del testo al suo interno
INDEX.JS
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
function onDeviceReady() {
// Gestire gli eventi di sospensione e ripresa di Cordova
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova è stato caricato. Eseguire qui eventuali operazioni di
inizializzazione richieste da Cordova.
var parentElement = document.getElementById('deviceready');
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
};
function onPause() {
// TODO: questa applicazione è stata sospesa. Salvarne lo stato qui.
};
function onResume() {
// TODO: questa applicazione è stata riattivata. Ripristinarne lo stato qui.
};
} )();
E’ strutturato in modo da gestire i principali eventi che cordova espone.
In particolare viene gestito l’evento deviceready (di cui si parla in seguito) in modo da modificare
la pagina principale al verificarsi dell’evento stesso:
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniBuild e run di un progetto
Per lanciare l’esecuzione di un progetto è necessario:
1. Scegliere la piattaforma target, cioè la piattaforma di destinazione dell’app. A seconda delle
librerie sdk istallate è possibile scegliere tra windows phone, android, ios, ..
2. Scegliere il dispositivo o l’emulatore su cui l’app deve essere lanciata
Avviata l’app è possibile debuggare il codice js utilizzando la console o i breakpoint,
e utilizzare la finestra dom explorer per risolvere problemi di layout.
N.B. L’applicazione può essere emulata su browser, in particolare chrome. Il limite
dell’emulazione è pultroppo l’incapacità di simulare alcune caratteristiche del dispositivo, ad
esempio il gps si con coordinate fittizie ma il flash della fotocamera no.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniEventi
Gli eventi ci consentono di gestire il comportamento delle nostre app al verificarsi di una certa
azione dell’utente oppure di rispondere alle sollecitazioni che provengono dal sistema stesso.
Qualsiasi evento è intercettabile da codice js, così nelle web app tradizionali come nelle app ibride,
con alcune differenze:
- Nelle web app gli elementi html solitamente associano all’interno della loro definizione la
risposta ad un certo evento, ad es , la cui funzione è definita in uno script
collegato alla pagina.
- Nelle app ibride si utilizza una diversa sintassi per associare un evento ad un certo elemento:
ELEMENT.addEventListener (EVENT_NAME, CALLBACK, false)
Dove element è l’elemento su cui l’evento si verifica, event_name è il nome dell’evento e
callback è il codice che viene eseguito quando l’evento si verifica solitamente definito in una
funzione.
Inoltre nelle app ibride esistono un insieme di nuovi eventi da gestire tipici dell’ambiente mobile e
di cordova:
- Eventi generati dal sistema (deviceready, pause, resume, ..)
https://cordova.apache.org/docs/en/latest/cordova/events/events.html
- Eventi generati dall’utente (tap, swipe, …)
L’evento deviceready è un’evento fondamentale, si verifica quando Cordova risulta
completamente caricato, cioè quando le api di cordova sono pronte per essere utilizzate.
Per questo motivo la gestione degli eventi generati dall’utente e l’uso di eventuali pugin deve
essere successiva al verificarsi di deviceready
ESERCIZIO
Costruire la prima app composta da un’unica pagina. All’avvio dell’app e solo quando l’evento di
device ready si è verificato, visualizzare un messaggio di benvenuto al centro della pagina.
Emulare l’app su browser e successivamente testarla sul proprio dispositivo.
N.B. Il dispositivo deve:
- Avere le opzioni sviluppatore abilitate (7 click sul numero di build)
- Avere il debug usb attivo
- Essere collegato tramite usb al pc come adb (verificare che venga riconosciuto altrimenti
istallare gli opportuni driver)
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniArchitettura di un’App
L’architettura suggerita per app cross-platform è l’architettura SPA (Single Page Application), la
quale suggerisce di sviluppare l’applicazione in una singola pagina html in modo da caricare tutte le
risorse necessarie al funzionamento dell’app (html, js, css, …) durante la fase di avvio della stessa
per rendere pìù fluida la successiva navigazione tra i contenuti
Esistono diversi framework che possono essere utilizzati a questo scopo, Framework7
(http://framework7.io/docs), ad esempio, è un touch-friendly UI framework specifico per lo
sviluppo di app ibride che si propone di semplificare lo sviluppo di una spa seguendo due principali
approcci di funzionamento:
- approccio ajax pages (default)
- approccio stacked pages
Una pagina è l'unità principale di interazione in f7 e viene utilizzata per raggruppare contenuti in
sezioni logiche che possono essere mostrate nella view principale attraverso transizioni. Possiamo
associarla concettualmente ad una normale pagina web.
Secondo l’approccio stacked pages, che rappresenta una spa pura, si definiscono diverse sezioni
‘logiche’ all’interno di un’unica pagina html e la navigazione avviene localmente mostrando la
sezione corrente e nascondendo le altre.
- Il principale vantaggio è la velocità con la quale si può passare da una sezione ad un’altra dato
che tutto è già stato precaricato nel dom
- Il principale svantaggio è la poca leggibilità di cui l’unico file html può soffrire all’aumentare della
dimensione e della complessità delle pagine logiche che compongono l’applicazione.
Secondo l’approcio ajax pages si definisce ogni sezione logica dell’app in un diverso documento html
e la navigazione tra queste avviene tramite chiamata ajax che carica nella view il contenuto della
sezione corrente.
- Il codice risulta più pulito e più vicino allo sviluppo web
- Il principale file html è precaricato nel dom (insieme alle sue dipendenze css, js, ...) mentre le
pagine successive solo quando l’utente ci accede. Le transizioni tra pagine, pur non richiedendo
nessun page refresh grazie ad ajax, risulteranno più lente
È possibile utilizzare entrambe queste soluzioni all’interno della stessa applicazione inserendo le
pagine di uso frequente nel principale file html e le altre in file separati in modo da beneficiare dei
vantaggi dei diversi approcci.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniBoilerplate di base (cordova+f7)
La struttura di base delle applicazioni che realizzeremo sarà la seguente:
Index.html
La sezione head deve contenere, oltre agli elementi discussi prima, anche i link alle librerie di
framework7 (Affinchè l’app funzioni offline è preferibile scaricare i file necessari e includerli in una
directory dell’app)
...
...
La sezione body in un container principale (class app) descrive la view (class view main)
contenente l’homepage, cioè la pagina iniziale che verrà mostrata all’utente all’avvio dell’app.
- La pagina è definita all’interno dei contenitori app e view
- La pagina è definita all’interno di un div con class=page a cui si associa un nome attraverso
l’attributo data-page. Ogni pagina può contenere una navbar, una toolbar ed un page content
Index.html
Boiler cordova e framework7
Pagina di contenuti dell’app
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniIl file index.js di partenza sarà il seguente:
//-----------------------configurazione base di framework7-------------------------------
var app = new Framework7({
//contenitore principale
root: '#app',
//nome dell'app'
name: 'Boilerf7_onePage',
//id della'app (vedi anche config.xml per avere un dato coerente)
id: 'it.jo.Boilerf7_onePage',
});
//impostazione della view principale
var mainView = app.views.create('.view-main');
//dichiarazione dell'oggetto dom7, in sostanza una sorta di jquery sotto altro nome ma
//con stesse funzionalità . ad esempio $$('#bottone').click(function(){...});
var $$ = Dom7;
//-----------------------fine configurazione base di framework7------------------------
//gestione dell'evento di cordova device ready utilizzando $$, qui si può scrivere il
codice dell'app
$$(document).on('deviceready', function () {
//codice dell'app'
console.log('ready');
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
});
Il codice specifico dell’applicazione (la logica applicativa), come sopra spiegato, deve eseguito
successivamente a deviceready.
I vari eventlistener sulla ui della pagina vanno quindi specificati nella callback di gestione di questo
evento.
N.B. Framework 7 utilizza una propria libreria per la manipolazione del DOM che è identica, sia
come sintassi che come nome dei metodi, a jquery. Può essere chiamata con i simboli $$
(similmente a jquery che si abbrevia con $)
https://framework7.io/docs/dom.html
Jquery (o qualsiasi altra libreria si intenda utilizzare) può comunque essere integrata ed usata nel
progetto. In generale è bene valutare il rapporto benefici-costi prima di aggiungere pacchetti
esterni in quanto inevitabilmente appesantiranno l’applicazione in termini di dimensioni.
Index.css
È inizialmente vuoto, servirà per impostare, se necessario, regole di stile aggiuntive a quelle già
descritte in f7.
Abbiamo fino a qui definito un’app con una view contenente un’unica pagina
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniGestire più pagine
Come spiegato precedentemente esistono due approcci la cui scelta e basata sui
vantaggi/svantaggi già descritti, vediamone ora l’implementazione.
STACKED PAGE
La seconda pagina di contenuti della view viene definita direttamente nel file index.html
- La seconda pagina deve essere impostata con class stacked.
- È necessario inserire i link per la navigazione tra le due pagine
- Nel file index.js deve essere attivata la modalità stacked e definiti i comportamenti associati ai
link (routes)
...
...
Vai a pagina 2
ajax pages Back
Pagina2.html
Contenuto Pagina 2
Ogni pagina secondaria è definita in un file html separato in cui si specifica nuovamente navbar
toolbar
... e page content
var app = new Framework7({
root: '#app',
name: 'oneView_multiPages_stacked',
id: 'it.jo.multiPagesStacked',
routes: [{
path: '/pag2/',
pageName: 'second'
}]
});
var mainView = app.views.create('.view-main', { "stackPages": true });
...
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniQuando l’applicazione viene lanciata tutte le pagine sono precaricate nel dom, la prima che è
definita nel codice è resa visibile, mentre tutte quelle definite successivamente (stacked) sono
nascoste.
Il click su un link ha l’effetto di invertire le proprietà di visibilità, rendendo visibile quella linkata e
nascondendo quella di provenienza
AJAX PAGE
La seconda pagina di contenuti della view viene definita in un file html separato
- Il nuovo file html non deve definire l’intera struttura html+head+body ma solo il contenitore
page
- È necessario inserire i link per la navigazione tra le due pagine (come sopra con il tag a)
- Nel file index.js devono essere definiti i comportamenti associati ai link (routes)
Back
Contenuto Pagina 2
ajax pages
var app = new Framework7({
root: '#app',
name: 'oneView_multiPages_stacked',
id: 'it.jo.multiPagesStacked',
routes: [{
path: '/pag2/',
url: 'second.html'
}]
});...
Quando l’applicazione viene lanciata solo la prima pagina (presente nell’index) è caricata nel dom.
Il click su un link aziona una richiesta ajax verso la risorsa (second.html) che viene iniettata del
dom. La pagina carica viene impostata come pagina corrente (page current ) e visualizzata, mentre
quella già presente viene nascosta
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniComponenti UI
Framework7 è dotato di numerosi elementi UI e widget pronti per l'uso:
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniAd esempio l’elemento date picker può essere utilizzato nell’app aggiungendo, rispettivamente
nell’html e poi nel js, il seguente codice:
Nella documentazione sono descritti i diversi componenti disponibili, per ognuno è specificato il
codice pronto all’uso.
Qui la demo: https://framework7.io/kitchen-sink-material/
Qui a documentazione: https://framework7.io/docs/ (sezione components sulla sinistra)
ESERCIZIO
Costruire un’applicazione costituita da due pagine.
La pagina principale deve contenere un date picker in cui l’utente inserisce la propria data di
nascita e un bottone di conferma.
Quando l’utente preme il bottone, viene visualizzata la seconda pagina in cui, al centro compare il
numero dei giorni mancanti al compleanno.
Emulare l’app su browser e successivamente testarla sul proprio dispositivo.
Tecnologie e progettazione di sistemi informatici e di telecomunicazioniPuoi anche leggere
