Share
PhoneGap è un framework open source per la creazione di applicazioni mobili multipiattaforma con HTML, CSS e JavaScript. Questa è una soluzione ideale per gli sviluppatori web interessati allo sviluppo mobile in quanto consente loro di sfruttare le competenze esistenti piuttosto che iniziare a formattare con un linguaggio compilato specifico del dispositivo. Questa è anche una soluzione ideale per chi è interessato a creare un'applicazione che può essere eseguita su più dispositivi con lo stesso codice base. In questo tutorial, imparerai come configurare l'ambiente di sviluppo di PhoneGap e imparerai alcune delle considerazioni fondamentali sullo sviluppo della piattaforma.
Le applicazioni create con PhoneGap non sono come i normali siti Web mobili. Le applicazioni PhoneGap sono in grado di interagire con l'hardware del dispositivo mobile, come l'Accelerometro o il GPS, in modi che non sono disponibili per le normali applicazioni Web. Le applicazioni PhoneGap sono anche costruite e pacchettizzate come applicazioni native, il che significa che possono essere distribuite attraverso l'App Store di Apple o l'Android Market.
PhoneGap supporta un certo numero di diverse piattaforme mobili, tra cui:
PhoneGap SDK fornisce un'API che è un livello di astrazione che fornisce allo sviluppatore l'accesso a funzionalità specifiche dell'hardware e della piattaforma. Poiché PhoneGap astrae la piattaforma mobile nativa, lo stesso codice può essere utilizzato su più piattaforme mobili con modifiche minime o nulle, rendendo la tua applicazione disponibile a un pubblico più ampio.
Le funzionalità specifiche dell'hardware supportate dall'API PhoneGap includono:
Per creare applicazioni con PhoneGap, devi prima installare l'SDK standard per le piattaforme mobili che desideri utilizzare come target per la tua app. Questo perché PhoneGap utilizzerà effettivamente questi SDK durante la compilazione della tua app per quella piattaforma.
Quindi, se stai sviluppando per Android, avrai bisogno di:
Ci sono anche alcuni requisiti specifici di PhoenGap per lo sviluppo di Android, tra cui:
La documentazione di PhoneGap per Android fornisce l'elenco completo dei requisiti con le istruzioni di installazione per ciascuno.
Se stai sviluppando per l'iPhone, avrai bisogno di:
Leggi la nostra guida introduttiva allo sviluppo di iPhone per ulteriori informazioni sulla configurazione di un ambiente di sviluppo per iPhone.
Dopo aver scaricato e decompresso PhoneGap, vedrai che contiene una cartella separata per ogni piattaforma supportata da PhoneGap:
PhoneGap viene fornito con un'applicazione predefinita che può essere utilizzata per mostrare la potente funzionalità dell'SDK. Il resto di questo tutorial sarà dedicato a mostrare come configurare questa app predefinita per Android e iPhone.
Per creare uno spazio di lavoro per l'app PhoneGap su Android, vai alla cartella "phonegap-android" sul prompt dei comandi o sul terminale.
Esegui il seguente comando:
ruby ./droidgap "[android_sdk_path]" [nome] [nome_pacchetto] "[www]" "[percorso]"
Una volta eseguito correttamente questo comando, lo spazio di lavoro dell'applicazione verrà generato nel percorso specificato. Quindi puoi aprire Eclipse e scegliere prima "Nuovo progetto Android" e quindi scegliere "Crea da sorgente esistente" e selezionare lo spazio di lavoro dell'applicazione che è stato creato con il comando precedente.
Una volta fatto, copia i seguenti file dalla cartella phonegap / phonegap-android / example alla cartella www nel tuo spazio di lavoro:
Quindi fare clic su Esegui per vedere l'app esempio di PhoneGap nel simulatore Android.
Per creare un'app PhoneGap per iPhone, vai alla cartella phonegap-iphone in cui hai decompresso i file PhoneGap.
Una volta che sei in quella cartella nel tuo terminale digita "make" per compilare PhoneGapLibInstaller.pkg.
Quindi dovrai eseguire PhoneGapLibInstaller.pkg che installerà PhoneGapLib e il modello PhoneGap in Xcode.
Quindi puoi avviare Xcode e creare un "Nuovo progetto". Quindi selezionare il modello di applicazione basato su PhoneGap.
Quindi, copia i seguenti file nella cartella www del tuo spazio di lavoro:
Esegui l'applicazione per avviare l'applicazione demo PhoneGap in iPhone Simulator.
Quindi ora hai la demo app PhoneGap in esecuzione sul tuo simulatore. Puoi giocare con l'app e vedere come si comporta. Questa app di base mostra l'uso generale delle diverse API esposte
dall'SDK PhoneGap.
Vai avanti e apri index.htm. Nella parte superiore della pagina vedrai il seguente codice:
PhoneGap
La prima cosa è un collegamento a master.css che dà tutto lo stile al pulsante che hai visto sullo schermo.
La seconda riga include phonegap.js che viene generato quando abbiamo creato uno spazio di lavoro per la nostra applicazione. Questo file ha tutta la magia di chiamare le API native tramite JavaScript.
Ora se scorri fino alla fine di index.html vedrai il seguente codice:
Benvenuto in PhoneGap!
questo file si trova in assets / index.html
Piattaforma:
Versione:
UUID:
Questo codice HTML crea i collegamenti visualizzati come pulsanti sullo schermo del dispositivo mobile. Esistono gestori onclick collegati a questi collegamenti che chiamano le funzioni JavaScript definite nello stesso file che sono responsabili della chiamata all'API PhoneGap per interagire con l'hardware nativo del dispositivo.
La prima funzione chiamata in JavaScript è init (). Questo registrerà la nostra funzione JavaScript Informazioni sul dispositivo all'evento PhoneGap.
Evento di Deviceready
Il deviceready evento viene generato da PhoneGap quando tutti i componenti dell'SDK sono alloggiati correttamente. Ha senso quindi che le API JavaScript di PhoneGap dovrebbero essere utilizzate dopo l'attivazione di questo evento.
Puoi leggere di più su deviceready nella documentazione dell'API.
Oggetto dispositivo
L'oggetto dispositivo contiene informazioni di base sul dispositivo su cui è in esecuzione l'app, come la piattaforma, la versione ecc. Questi valori possono essere utilizzati per eseguire controlli specifici del dispositivo nel codice.
Puoi leggere ulteriori informazioni sull'oggetto dispositivo nella documentazione ufficiale dell'API.
Accelerometro
Il primo collegamento nel corpo chiama la funzione watchAccel:
Guarda l'accelerometro
Questa parte dell'API guarda e invia notifiche sull'accelerazione del dispositivo a intervalli regolari. Restituisce l'accelerazione attuale del dispositivo passando le coordinate x, yez al callBackonSuccess funzione registrata. I valori x, y, z possono quindi essere utilizzati nell'applicazione per rispondere al movimento.
Leggi di più sull'accelerometro qui.
GPS e posizionamento
Il secondo link nel corpo è responsabile della raccolta dell'attuale posizione del dispositivo:
Ottieni la posizione
Il callBackonSuccessla funzione passa un oggetto che contiene le coordinate GPS che possono essere utilizzate nell'applicazione per eseguire l'elaborazione basata sulla posizione.
Puoi leggere ulteriori informazioni sull'API di geolocalizzazione.
Effettuare le chiamate
La terza riga del corpo avvierà il dialer del dispositivo con il numero "411":
Chiama il 411
Notifiche del dispositivo
Le due linee successive nel corpo vengono utilizzate per emettere un segnale acustico o vibrare un dispositivo:
Beep vibra
Leggi di più su segnale acustico e vibrazione nei documenti ufficiali.
Usando la fotocamera
La riga successiva nel corpo chiama la funzione show_pic fare una foto:
Prendi un'immagine
Questa API avvia l'applicazione della fotocamera del dispositivo e attende
per l'utente di catturare un'immagine.
Ulteriori informazioni su come scattare foto nella documentazione ufficiale dell'API.
Conclusione
PhoneGap è un framework molto potente per lo sviluppo multipiattaforma. Se hai già un forte background di sviluppo web e sei interessato a creare app per uno o più dispositivi, PhoneGap è sicuramente un forte concorrente da considerare!
Accentsconagua