PhoneGap Build. Adobe s cloud mobile apps packager

Transcript

1 PhoneGap Build Adobe s cloud mobile apps packager Vittorio Maniezzo - University of Bologna - 1 PhoneGap Build (WikiPedia) PhoneGap è un framework di sviluppo mobile proposto da Adobe. Permette di sviluppare applicazioni per dispositivi mobili utilizzando JavaScript, HTML5 e CSS3 invece che basarsi su API native. Il software sottostante PhoneGap è Cordova Apache ( un progetto open source. Cordova estende HTML e Javascript in funzione del dispositivo. Le applicazioni ottenute sono ibride: né veramente native (il rendering è fatto tramite web views) né puramente web (sono confezionate come apps per la distribuzione e per avere accesso alle API native del device). È possibile mescolare liberamente parti di codice nativo e ibrido. il servizio di PhoneGap Build di Adobe consente di caricare il codice sorgente HTML, CSS e JavaScript in un "cloud compiler" che genera app per ogni piattaforma supportata. Vittorio Maniezzo - University of Bologna - 2 1

2 Architettura Le app PhoneGap utilizzano HTML5 e CSS3 per il rendering e JavaScript per la logica. Anche se HTML5 fornisce l'accesso all'hardware (accelerometro, fotocamera, GPS, ) il supporto dei browser ad HTML5 non è coerente tra i vari browser mobile (scarso su vecchie versioni di Android). Per questo, il framework di PhoneGap incorpora codice HTML5 dentro WebView native del dispositivo, utilizzando quindi un' interfaccia esterna per accedere alle risorse native. PhoneGap può essere esteso con plug-in nativi richiamati da JavaScript, permettendo la comunicazione diretta tra il livello nativo e la pagina di HTML5. PhoneGap include già plugin di base che consentono l'accesso ad accelerometro, fotocamera, microfono, bussola, filesystem e altro. L'uso di tecnologie web-based porta molte applicazioni PhoneGap ad essere più lente di applicazioni native con funzionalità simili, anche se il gap si sta riducendo. Vittorio Maniezzo - University of Bologna 3 Funzionalità supportate per SO Vittorio Maniezzo - University of Bologna 4 2

3 GitHub Nuove app possono essere impostate solo a partire da repository GitHub ( GitHub è il servizio di web di hosting per lo sviluppo di progetti software più usato al mondo. Usa il sistema di controllo di versione Git. Cfr. Vittorio Maniezzo - University of Bologna 5 App workflow Due fasi: 1. Creare un repository git con il progetto Necessario installare un client git locale (credo). Possibile un portable client ma non sono riuscito a farlo funzionare. Si può creare il repository via web ma l upload di file è possibile solo da client locale. 2. Compilare il progetto con PhoneGap Si può fare tutto via web Vittorio Maniezzo - University of Bologna 6 3

4 1) Repository git: cloud Per una nuova app, serve un nuovo repository github. Vari modi. Ad es. (windows) installare github desktop Collegarsi a In alto a dx, Sign in. (eventualmente farsi un account Adobe) Io arrivo in In alto a dx Create new Si arriva in scegliere name (qui Test15), descrption e lasciare public. Non aggiungere altri file. Si arriva in Vittorio Maniezzo - University of Bologna 7 2) Repository git: create local Dopo avere installato il client, nella shell digitare (nel mio caso) c:\test15>git config --global user.name "maniezzo" c:\test15>git config --global user. "vittorio.maniezzo@unibo.it Da prompt, nel direttorio locale del progetto, digitare (nel mio caso) c:\test15>git init Initialized empty Git repository in c:/test15/.git/ Copiare nel direttorio tutti i file del progetto (html e js). Inserire nell'head di index.html <script src="phonegap.js"></script> Poi digitare c:\test15>git add. c:\test15>git commit -m "First commit" [master (root-commit) 2475b12] First commit 6 files changed, 555 insertions(+) create mode algoritmi.js... create mode temp.js Vittorio Maniezzo - University of Bologna 8 4

5 3) Repository git: link remote Collegare il direttorio locale al repository cloud c:\test15>git remote add origin Upload dei file su cloud c:\test15>git push -u origin master Username for ' maniezzo Password for Counting objects: 8, done. Delta compression using up to 8 threads. Compressing objects: 100% (8/8), done. Writing objects: 100% (8/8), 4.56 KiB 0 bytes/s, done. Total 8 (delta 0), reused 0 (delta 0) To * [new branch] master -> master Branch master set up to track remote branch master from origin. Vittorio Maniezzo - University of Bologna 9 4) Repository git: add a file Se necessario aggiungere altri file, prima locale poi upload. Aggiungere i file in locale poi digitare c:\test15>git add. Commit (al progetto) dei nuovi file c:\test15>git commit -m "Second commit" [master ae8ac24] Second commit 1 file changed, 27 insertions(+) create mode config.xml Upload remoto c:\test15>git push origin master Username for ' maniezzo Password for ' Counting objects: 4, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 695 bytes 0 bytes/s, done. Total 3 (delta 1), reused 0 (delta 0) To b12..ae8ac24 master -> master Vittorio Maniezzo - University of Bologna 10 5

6 PhoneGap app Per utilizzare un repository github come base per una app mobile. Aggiungere al repository l opportuno file config.xml (v. Collegarsi a In alto a dx, sign in. (eventualmente farsi un account Adobe) Si arriva in Vittorio Maniezzo - University of Bologna 11 PhoneGap app Selezionare New app a destra. Dalla drop down list dei repo giuthub, selezionare quello di interesse e cliccare Pull from git repository Selezionare Ready to build Aspettare che diventino azzurri i marker delle piattaforme interessate. Vittorio Maniezzo - University of Bologna 12 6

7 Deploy, windows (no appstore) Il Qtcode nella pagina phonegap NON funziona. Necessario andare nella pagina del progetto e cliccare su "xap" per scaricare il file. Necessario essere registrati come sviluppatori ( Poi si copia il file sul device e da Store "Install local app", oppure su PC lanciare "Application deployment" (SDK o VisualStudio 2013) Vittorio Maniezzo - University of Bologna 13 7