Proseguiamo la nostra guida per creare un un’app con PhoneGap, la piattaforma open source per creare app multi-piattaforma utilizzando tecnologie web.
In questa terza parte vi mostro quali sono le librerie necessarie da includere nel progetto. Vi ricordo di leggere l’introduzione e la seconda parte di questo tutorial.
La prima libreria da includere è chiaramente quella di phonegap. Indichiamo quindi nel nostro file index.html, prima della chiusura del tag </body>, il markup di inclusione javascript:
<script type="text/javascript" src="phonegap.js"></script>
Questo .js viene iniettato nella root del progetto al momento della compilazione, quindi non è necessario copiarlo nel progetto.
Includiamo anche le altre librerie accessorie, cioè angularjs, jquery e bootstrap. Chiaramente jquery sembra superfluo, visto l’utilizzo di angularjs, ma è necessario perchè Bootstrap ne fa uso. Cercheremo quindi di usarlo con parsimonia. Aggiungiamo quindi:
<script type="text/javascript" src="lib/angular-1.1.5.js"></script> <script type="text/javascript" src="lib/jquery-1.10.2.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
L’ultima libreria necessaria è quella che mappa la tecnologia Phonegap in un servizio AngularJs, in modo da integrarle insieme. E’ quello che in gergo si chiama wrapper. Sostanzialmente questa libreria permette di utilizzare le API che PhoneGap mette a disposizione all’interno di Angularjs. Non è possibile farlo direttamente perchè le API sono utilizzabili solo dal momento in cui uno specifico evento, phonegapReady, è stato chiamato. Questa libreria riesce ad accodare le richieste fin tanto che non risultano disponibili.
Andiamo a creare il file sensor-services.js nella cartella lib/ :
…che andiamo ad includerlo in index.html sempre allo modo:
<script type="text/javascript" src="js/sensor-services.js"></script>
Struttura AngularJs
Gli ultimi .js che rimangono da includere sono quelli relativi al funzionamento di AngularJs. In particolare serve includere app.js che crea il modulo principale del progetto e definisce le routes disponibili, controller.js che implementa i controller dell’applicazione e services.js che contiene i modelli dei dati utilizzati.
Nel file index.html andiamo ad aggiungere quindi:
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/services.js"></script> <script type="text/javascript" src="js/controllers.js"></script>
Nelle prossime lezioni andremo ad analizzare questi ultimi 3 file nel dettaglio.