Share
Vuoi imparare come usare PhoneGap, ma non sai da dove iniziare? Unisciti a noi mentre mettiamo insieme "Sculder", non solo un tributo ad una serie televisiva di fantascienza eccellente, ma un'applicazione mobile nativa a tutti gli effetti per il credente in te!
In questa serie, creeremo un'applicazione mobile utilizzando alcune delle funzionalità di PhoneGap. Passeremo dall'installazione dell'SDK alla distribuzione negli app store delle due principali piattaforme: iOS e Android. I concetti trattati in questa serie includeranno l'accesso alla fotocamera del dispositivo, all'archiviazione locale e alla geolocalizzazione.
In questa prima parte, daremo una rapida occhiata a cosa sia PhoneGap in realtà e a cosa è possibile utilizzarlo, quindi osserveremo l'installazione del framework PhoneGap e degli SDK necessari per il test su OS X, Windows e Linux ambienti. Quindi creeremo ed eseguiremo la semplice applicazione PhoneGap "Hello World" per assicurarci che tutto funzioni correttamente.
Ormai probabilmente hai una buona idea di cosa sia PhoneGap e probabilmente lo hai anche usato, ma, in caso contrario, ecco una breve panoramica.
PhoneGap è nato da iPhoneDevCamp nel 2008, dove è stato creato semplicemente perché non c'erano molti sviluppatori Objective-C rispetto ai Web Developer. La sfida consisteva nel mettere insieme un framework che consentisse agli sviluppatori web di utilizzare HTML, CSS e JavaScript per codificare le applicazioni che potevano sfruttare le funzionalità native del dispositivo mobile, come le funzioni Camera, Storage e GeoLocation. Inizialmente costruito per funzionare con l'iPhone, nel giro di un anno PhoneGap stava crescendo e stava iniziando a supportare anche Android. Ora, a quasi 4 anni, PhoneGap è uno dei toolkit più chiacchierati per lo sviluppo di applicazioni mobili e supporta una gamma molto più ampia di dispositivi mobili tra cui iOS, Android, Blackberry, Symbian, webOS, WP7 e Bada.
Al momento della pubblicazione (ad esempio, gennaio 2012), il framework supporta attualmente Accelerometer, Camera, Compass, Contatti, File, Geolocation, Media, Rete, Notifiche (Avviso, Suono e Vibrazione) e API del dispositivo di archiviazione. C'è pieno supporto per tutte queste funzionalità nei nuovi dispositivi iOS (3GS +) e Android. Per ulteriori dettagli sul supporto per dispositivi Blackberry, WP7, Sybian, webOS e Bada, controllare la tabella di compatibilità ufficiale.
Nonostante la convinzione contraria, PhoneGap non è una scrittura una volta, distribuisce ovunque la soluzione (anche se si avvicina). È sicuramente un framework multipiattaforma in grado di funzionare su molti dispositivi supportati, ma per poterlo implementare correttamente è necessario testare e modificare il codice su ciascuno dei dispositivi di destinazione.
Se si desidera sviluppare per iOS, è necessario un computer basato su Intel con MAC OS X versione 10.6 o successiva. Avrai anche bisogno dell'ultima versione di Xcode (versione 4 al momento della stesura) e dell'SDK iOS per i test. Per scaricare Xcode, devi registrarti come membro del Programma per gli sviluppatori Apple.
Vai su www.phonegap.com e nell'angolo in alto a sinistra vedrai un pulsante per scaricare l'ultima versione di PhoneGap. Cliccando su questo verrà richiesto il download di un file ZIP contenente tutto il necessario per iniziare.
La decompressione del file ti darà numerose cartelle, ciascuna etichettata con il sistema operativo mirato. Mentre stiamo installando per iOS, apri la cartella iOS e monta il file dmg file. Il dmg contiene a pkg file. Fare clic su questo e andare attraverso il processo di installazione. Dopo aver completato l'installazione, puoi andare avanti e avviare Xcode e quando verrai a creare un nuovo progetto, dovresti essere in grado di scegliere PhoneGap come modello.
Ora possiamo impostare le opzioni per il nostro progetto e la posizione dei nostri file. Una volta fatto, il nostro progetto è costruito nella directory specificata e Xcode ci presenta la nostra pagina di riepilogo. Qui possiamo facilmente aggiungere icone di app e modificare un paio di impostazioni quando la nostra applicazione è pronta per essere impacchettata e inoltrata all'app store - per ora andremo avanti e premeremo RUN nell'angolo in alto a sinistra. Questo compilerà l'app e accenderà il simulatore iOS.
Se provi questo ora, dopo la schermata iniziale dovresti ricevere un errore che indica che il file index.html il file non è stato trovato. Non c'è bisogno di preoccuparsi, questo è in realtà ciò che dovrebbe accadere. Dobbiamo andare nella directory di lavoro per il progetto (fare clic con il tasto destro del mouse sul progetto in Xcode e fare clic su Mostra nel Finder) e vedremo un www directory nella radice del progetto.
Ora dobbiamo trascinare la directory INTO Xcode e aggiungerla al progetto.
Nelle opzioni per questi file dobbiamo assicurarci di selezionare "Crea riferimento cartella per eventuali cartelle aggiunte", quindi fare clic su Fine. Nostro www la directory è ora aggiunta al progetto. Ora possiamo fare nuovamente clic su Esegui e otterrete il "Hello World" di base per PhoneGap.
Il www la directory diventerà la nostra directory root per l'app. È qui che manterremo qualsiasi HTML, CSS o JavaScript che verrà utilizzato dalla nostra app, proprio come ci si aspetterebbe da qualsiasi altra applicazione web. Il phonegap.js file è il file JavaScript che fungerà da nostra API, dandoci l'accesso alle API native che potremmo voler utilizzare nella nostra applicazione in seguito.
A differenza dello sviluppo per iOS, puoi sviluppare per Android su qualsiasi piattaforma. Anche se si consiglia di utilizzare Eclipse IDE con un paio di plugin, esiste un modo alternativo per usare PhoneGap (tramite Command Line), ma è positivo se si inizia a farlo prima con un IDE e poi si prova il modo in linea di comando e vedi quale preferisci. In questo tutorial useremo il metodo IDE.
Per prima cosa, devi andare sul sito Web di Eclipse e scaricare l'IDE per la tua piattaforma preferita. La versione classica va bene per ciò di cui abbiamo bisogno. Una volta scaricato, avvia Eclipse e dobbiamo installare il plugin ADT. Devi andare a Aiuto => Installa nuovo software e fai clic su aggiungi nell'angolo a destra.
È quindi possibile inserire il plugin ADT per il nome del plug-in e immettere quanto segue per l'URL del repository.
https://dl-ssl.google.com/android/eclipse/
Il plugin verrà scaricato e installato e Eclipse richiederà di riavviare. Una volta riavviato, puoi creare un nuovo progetto Android.
Passerai quindi attraverso la procedura guidata del progetto in cui darai un nome alla tua app e imposterai il suo spazio di lavoro. selezioni anche il tuo SDK di destinazione build - puoi selezionare l'ultimo per ora (4.0.3 al momento della scrittura). Passare attraverso il resto della procedura guidata e impostare le informazioni rimanenti per l'app.
Ti verrà chiesto se desideri scaricare e installare gli SDK Android richiesti a questo punto. Se li hai già sul tuo computer, vai avanti e vai alla cartella. Altrimenti, puoi lasciare che Eclipse li scarichi per te.
All'interno della directory root dell'applicazione è necessario creare una directory chiamata coperchi e all'interno della directory assets creare un'altra directory chiamata www. Ora, tornando al file PhoneGap originale che è stato scaricato e nella cartella Android è necessario copiare il file phonegap.jar file al libs directory creata e quindi copiata phonegap.js al www elenco.
La tua struttura dovrebbe assomigliare alla seguente:
All'interno del nostro www directory, creare un index.html file e rilascia il codice qui sotto:
Mobiletuts PhoneGap Benvenuto in PhoneGap
Modifica risorse / www / index.html
Ora dobbiamo apportare alcune modifiche al file Java principale che può essere trovato in src cartella. Per prima cosa, dobbiamo cambiare la classe ' estendere a partire dal Attività a DroidGap.. Abbiamo quindi bisogno di sostituire setContentView (R.layout.main); con super.loadUrl ( "file: ///android_asset/www/index.html"); e quindi aggiungere import com.phonegap. *; dopo le prime due importazioni. Il tuo file Java al termine dovrebbe assomigliare a questo:
pacchetto com.shaundunneTest; importare android.app.Activity; importare android.os.Bundle; import com.phonegap. *; classe pubblica TestActivity estende DroidGap / ** Chiamato quando l'attività viene creata per la prima volta. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ( "file: ///android_asset/www/index.html");
Eclipse probabilmente genererà alcuni errori ora, basta fare clic destro sulla cartella libs e andare a Build Path => Configure Build Path e quindi nella scheda librerie, fare clic su aggiungi JAR e vai avanti e includi il phonegap.jar file. Questo dovrebbe chiarire gli errori. Ora, dobbiamo aggiungere alcune autorizzazioni al file manifest per assicurarci che PhoneGap funzioni correttamente.
Apri il AndroidManifest.xml file e aggiungere quanto segue prima del applicazione iscrizione:
Nel tag attività, aggiungi il seguente attributo:
Android: configChanges = "orientamento | keyboardHidden"
Questo assicura che l'app non ricarichi il index.html ogni volta che accadono questi eventi.
L'ultima cosa da fare è copiare il xml cartella dal download di PhoneGap al res directory nel progetto. Ora sei pronto per eseguire questo nell'emulatore.
È possibile fare clic con il tasto destro del mouse sul progetto ora e correre come un'applicazione Android. Se non hai ancora configurato un dispositivo, ti verrà richiesto di farlo, se hai bisogno di aiuto per farlo, consulta la documentazione qui
E questo è tutto ciò che serve per iniziare su Android!
Finora, abbiamo coperto solo due delle piattaforme mobili per la nostra applicazione, ma è probabile che vorremmo distribuire su tutte le piattaforme supportate da PhoneGap, giusto? Beh, piuttosto che installare altri SDK, un altro IDE con qualche plugin in più e configurare una macchina virtuale per i test, questa serie utilizzerà il servizio PhoneGap: Build quando arriva il momento di distribuire l'app.
PhoneGap: Build, come afferma sul sito Web, è un servizio basato su cloud che richiederà un'applicazione HTML / CSS / JS zippata e ti restituirà l'applicazione, compilata e pronta per la distribuzione (un avvertimento: per Android, iOS e BB avrete bisogno dei certificati richiesti per la distribuzione). PhoneGap: Build è in BETA al momento, e mentre ci sono opzioni a pagamento (che vale la pena avere se si sta andando ad usarlo regolarmente), c'è un'opzione gratuita che consentirà un'applicazione privata. Questo è tutto ciò di cui abbiamo bisogno per il nostro progetto al momento, quindi vai avanti e iscriviti ora poiché useremo il servizio Build alla fine della serie.
Ora il nostro ambiente è pronto per lo sviluppo con PhoneGap. Nella parte successiva di questa serie, inizieremo a esaminare le API che PhoneGap ci consente di accedere e come utilizzarle nella nostra app.
Accentsconagua