Share
Wilt u leren hoe u PhoneGap kunt gebruiken, maar weet u niet waar u moet beginnen? Doe met ons mee als we "Sculder" samenstellen, niet alleen een eerbetoon aan een uitstekende science fiction tv-serie, maar een volwaardige native mobiele applicatie voor de gelovige in jou!
In deze serie zullen we een mobiele applicatie bouwen met behulp van een aantal functies in PhoneGap. We gaan van de installatie van de SDK naar de implementatie in de app stores van de twee belangrijkste platforms: iOS en Android. Begrippen die in deze reeks worden behandeld, omvatten toegang tot de camera van het apparaat, lokale opslag en geolocatie.
In dit eerste deel zullen we snel bekijken wat PhoneGap eigenlijk is en waar je het voor kunt gebruiken, en dan kijken naar de installatie van het PhoneGap-framework en de SDK's die we nodig hebben om te testen op OS X, Windows en Linux omgevingen. We zullen dan de zeer eenvoudige "Hello World" PhoneGap-applicatie bouwen en uitvoeren om ervoor te zorgen dat alles correct werkt.
Inmiddels heb je waarschijnlijk een goed idee van wat PhoneGap is en je hebt het waarschijnlijk zelfs gebruikt, maar zo niet, hier is een kort overzicht.
PhoneGap werd in 2008 geboren uit iPhoneDevCamp, waar het eenvoudig werd gecreëerd omdat er niet veel Objective-C-ontwikkelaars waren in vergelijking met webontwikkelaars. De uitdaging was om een raamwerk samen te stellen waarmee webontwikkelaars HTML, CSS en JavaScript zouden kunnen gebruiken om toepassingen te coderen die zouden kunnen profiteren van de native functionaliteit van het mobiele apparaat, zoals de camera-, opslag- en GeoLocation-functies. Oorspronkelijk gebouwd om met de iPhone te werken, groeide PhoneGap binnen een jaar en begon ook Android te ondersteunen. Nu, bijna 4 jaar oud, is PhoneGap een van de meest besproken toolkits voor het ontwikkelen van mobiele applicaties en ondersteunt een veel breder scala aan mobiele apparaten, waaronder iOS, Android, Blackberry, Symbian, webOS, WP7 en Bada.
Op het moment van publicatie (bijvoorbeeld januari 2012) ondersteunt het framework momenteel de API's Accelerometer, Camera, Kompas, Contactpersonen, Bestand, Geolocatie, Media, Netwerk, Meldingen (waarschuwing, geluid en trillen) en opslagapparaat. Er is volledige ondersteuning voor al deze functies in de nieuwere iOS-apparaten (3GS +) en Android. Raadpleeg de officiële compatibiliteitstabel voor meer informatie over ondersteuning voor Blackberry-, WP7-, Sybian-, webOS- en Bada-apparaten.
Ondanks tegengestelde opvatting is PhoneGap niet één keer schrijven, overal implementeren (hoewel het wel in de buurt komt). Het is zeker een platformoverschrijdend framework dat op veel ondersteunde apparaten kan worden uitgevoerd, maar om met succes te kunnen worden geïmplementeerd, moet je waarschijnlijk je code testen en aanpassen op elk van de doelapparaten..
Als u wilt ontwikkelen voor iOS, hebt u een op Intel gebaseerde computer nodig waarop MAC OS X versie 10.6 of hoger wordt uitgevoerd. Je hebt ook de nieuwste versie van Xcode nodig (versie 4 op het moment van schrijven) en de iOS SDK om te testen. Om Xcode te downloaden, moet u zich aanmelden als lid van het Apple Developer-programma.
Ga naar www.phonegap.com en in de linkerbovenhoek ziet u een knop om de nieuwste versie van PhoneGap te downloaden. Als u hierop klikt, wordt gevraagd om een ZIP-bestand te downloaden met daarin alles wat u nodig hebt om aan de slag te gaan.
Het uitpakken van het bestand geeft je een groot aantal mappen, elk gemarkeerd met het gerichte besturingssysteem. Terwijl we voor iOS aan het installeren zijn, open je de iOS-map en mount je de dmg het dossier. De dmg bevat een pkg het dossier. Klik hierop en doorloop het installatieproces. Na het voltooien van de installatie, kunt u doorgaan en Xcode opstarten en wanneer u een nieuw project gaat maken, moet u PhoneGap als een sjabloon kunnen kiezen.
We kunnen nu de opties voor ons project en de locatie van onze bestanden instellen. Zodra we dat gedaan hebben, is ons project gebouwd in de opgegeven directory en Xcode presenteert ons onze overzichtspagina. Hier kunnen we eenvoudig app-pictogrammen toevoegen en een aantal instellingen wijzigen wanneer onze applicatie klaar is om te worden verpakt en naar de app store wordt verzonden - voor nu gaan we gewoon door en raken RUN in de linkerbovenhoek. Hiermee wordt de app gecompileerd en wordt de iOS-simulator geactiveerd.
Als u dit nu probeert, krijgt u na het startscherm een foutmelding waarin staat dat index.html bestand kon niet worden gevonden. Geen zorgen, dit is eigenlijk wat er zou moeten gebeuren. We moeten de werkmap voor het project gaan (Klik met de rechtermuisknop op het project in Xcode en klik op show in finder) en daar zullen we een www map in de projectroot.
We moeten nu die map IN Xcode slepen en aan het project toevoegen.
In de opties voor deze bestanden moeten we ervoor zorgen dat we 'Mapreferentie maken voor toegevoegde mappen' selecteren en vervolgens op Voltooien klikken. Onze www map is nu toegevoegd aan het project. We kunnen nu nogmaals op Run klikken en u krijgt de basis 'Hello World' voor PhoneGap.
De www directory wordt nu onze hoofdmap voor de app. Hier bewaren we elke HTML, CSS of JavaScript die door onze app wordt gebruikt, net zoals je zou verwachten van een andere webapplicatie. De phonegap.js bestand is het JavaScript-bestand dat als onze API zal fungeren en ons toegang geeft tot de oorspronkelijke API's die we later in onze applicatie zouden willen gebruiken.
In tegenstelling tot ontwikkelen voor iOS, kun je op elk platform voor Android ontwikkelen. Hoewel geadviseerd wordt om de Eclipse IDE te gebruiken met een paar plug-ins, is er een alternatieve manier om PhoneGap te gebruiken (via Command Line), maar het is goed als je het eerst op de langere manier doet met een IDE en dan uitprobeert op de opdrachtregel en zie welke je voorkeur heeft. In deze zelfstudie gebruiken we de IDE-methode.
Eerst moet je naar de Eclipse-website gaan en de IDE downloaden voor je platform naar keuze. De klassieke versie is prima voor wat we nodig hebben. Na het downloaden start je Eclipse en moeten we de ADT-plug-in installeren. Je moet naar toe gaan Help => Nieuwe software installeren en klik op toevoegen in de rechterbovenhoek.
U kunt dan de ADT-plug-in voor de plugin-naam invoeren en het volgende invoeren voor de URL van de repository.
https://dl-ssl.google.com/android/eclipse/
De plug-in wordt gedownload en geïnstalleerd en Eclipse vraagt u om opnieuw te starten. Zodra het opnieuw is opgestart, kunt u een nieuw Android-project maken.
Je gaat vervolgens door de projectwizard waar je je app een naam geeft en zijn werkruimte instelt. u selecteert ook uw SDK voor het doel van uw build - u kunt nu de nieuwste SDK selecteren (4.0.3 op het moment van schrijven). Doorloop de rest van de wizard en stel de resterende informatie voor de app in.
U wordt nu gevraagd of u de vereiste Android SDK's wilt downloaden en installeren. Als je ze al op je computer hebt, ga je gang en blader je naar de map. Zo niet, dan kunt u Eclipse ze voor u laten downloaden.
In de hoofdmap van de toepassing moeten we een map maken met de naam deksels en maak binnen de map assets een andere map aan genaamd www. Nu, terug naar het originele PhoneGap-bestand dat is gedownload en in de Android-map moet je het kopiëren phonegap.jar bestand naar de libs map die we hebben gemaakt en kopieer vervolgens de phonegap.js naar de www directory.
Uw structuur moet er als volgt uitzien:
Binnen onze www map, maak een index.html bestand en drop in de onderstaande code:
mobiletuts phonegap Welkom bij PhoneGap
Bewerk items / www / index.html
Nu moeten we enkele wijzigingen aanbrengen in het belangrijkste Java-bestand dat in de src map. Eerst moeten we de klasse veranderen ' uitbreiden van Activiteit naar DroidGap.. We moeten dan vervangen setContentView (R.layout.main); met super.loadUrl ( "file: ///android_asset/www/index.html"); en voeg dan toe import com.phonegap. *; na de eerste twee invoer. Uw Java-bestand na voltooiing zou er ongeveer zo uit moeten zien:
pakket com.shaundunneTest; import android.app.Activity; import android.os.Bundle; import com.phonegap. *; public class TestActivity breidt DroidGap uit / ** Wordt gebeld wanneer de activiteit voor het eerst wordt gemaakt. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ( "file: ///android_asset/www/index.html");
Eclipse zal nu waarschijnlijk een aantal fouten veroorzaken, klik gewoon met de rechtermuisknop op de map libs en ga naar Bouwpad => Configureer het bouwpad en klik vervolgens op het tabblad Bibliotheken op voeg JAR toe en ga door en neem de phonegap.jar het dossier. Dit zou de fouten moeten verhelpen. Nu moeten we enkele machtigingen toevoegen aan het manifestbestand om ervoor te zorgen dat PhoneGap correct wordt uitgevoerd.
Open de AndroidManifest.xml bestand en voeg het volgende toe vóór de toepassing entry:
Voeg het volgende kenmerk toe aan de activiteitstag:
android: configChanges = "oriëntatie | keyboardHidden"
Dit zorgt ervoor dat de app het niet opnieuw laadt index.html telkens wanneer die gebeurtenissen plaatsvinden.
Het laatste wat je moet doen, is het kopiëren xml map van de PhoneGap-download naar de res map in het project. U bent nu klaar om dit in de emulator uit te voeren.
U kunt nu met de rechtermuisknop op uw project klikken en rennen als een Android-applicatie. Als u nog geen apparaat hebt ingesteld, wordt u gevraagd dit te doen. Als u hulp nodig hebt, raadpleegt u de documentatie hier
En dat is alles wat u nodig heeft om aan de slag te gaan op Android!
Tot nu toe hebben we slechts twee van de mobiele platforms voor onze toepassing behandeld, maar we willen waarschijnlijk alle platformen die PhoneGap ondersteunt, verspreiden, nietwaar? In plaats van het installeren van nog enkele SDK's, een andere IDE met een paar extra plug-ins en het instellen van een virtuele machine om te testen, zal deze serie de PhoneGap: Build-service gebruiken als het tijd is om de app te distribueren.
PhoneGap: Build, zoals het op de website vermeldt, is een op de cloud gebaseerde service die een ingepakte HTML / CSS / JS-toepassing zal nemen en u de toepassing terugstuurt, gecompileerd en gereed voor distributie (een waarschuwing: voor Android, iOS en BB hebt u de vereiste certificaten nodig voor distributie). PhoneGap: Build is op dit moment in BETA, en hoewel er betaalde opties zijn (die de moeite waard zijn als je deze regelmatig gaat gebruiken), is er een gratis optie die één privétoepassing toestaat. Dat is alles wat we nodig hebben voor ons project, dus ga je gang en meld je nu aan, want aan het einde van de serie zullen we de Build-service gebruiken.
We hebben nu onze omgeving klaar voor ontwikkeling met PhoneGap. In het volgende deel van deze serie zullen we beginnen met het bekijken van de API's die PhoneGap ons toestaat toegang te geven tot en hoe deze in onze app te gebruiken.
Accentsconagua