Share
PhoneGap is een open source-framework voor het bouwen van platformonafhankelijke mobiele applicaties met HTML, CSS en JavaScript. Dit is een ideale oplossing voor webontwikkelaars die geïnteresseerd zijn in mobiele ontwikkeling, omdat het hen in staat stelt bestaande vaardigheden te gebruiken in plaats van met een apparaatspecifieke gecompileerde taal te beginnen. Dit is ook een ideale oplossing voor diegenen die geïnteresseerd zijn in het maken van een applicatie die op meerdere apparaten met dezelfde codebasis kan worden uitgevoerd. In deze tutorial leer je hoe je de ontwikkelomgeving van PhoneGap kunt instellen en wat van de fundamentele ontwikkelingsoverwegingen van het platform leert.
Toepassingen gebouwd met PhoneGap zijn niet alleen normale mobiele websites. PhoneGap-toepassingen kunnen communiceren met hardware van mobiele apparaten, zoals de versnellingsmeter of GPS, op manieren die niet beschikbaar zijn voor normale webtoepassingen. PhoneGap-applicaties zijn ook gebouwd en verpakt als native applicaties, wat betekent dat ze kunnen worden gedistribueerd via de Apple App Store of de Android Market.
PhoneGap ondersteunt een aantal verschillende mobiele platforms, waaronder:
De PhoneGap SDK biedt een API die een abstractielaag is die de ontwikkelaar toegang biedt tot hardware- en platformspecifieke functies. Omdat PhoneGap het native mobiele platform abstract, kan dezelfde code op meerdere mobiele platforms worden gebruikt met weinig of geen wijzigingen, waardoor uw applicatie beschikbaar is voor een breder publiek.
Hardware-specifieke functies die worden ondersteund door de PhoneGap API omvatten:
Om applicaties te maken met PhoneGap, moet u eerst de standaard SDK installeren voor de mobiele platforms die u wilt targeten voor uw app. Dit komt omdat PhoneGap deze SDK's daadwerkelijk zal gebruiken bij het compileren van uw app voor dat platform.
Dus, als u zich ontwikkelt voor Android, hebt u het volgende nodig:
Er zijn ook enkele aanvullende PhoenGap-specifieke vereisten voor Android-ontwikkeling, waaronder:
De Android-documentatie van PhoneGap biedt de volledige lijst met vereisten met installatie-instructies voor elk.
Als je je ontwikkelt voor de iPhone, heb je nodig:
Lees onze introductie tot iPhone Development handleiding voor meer informatie over het opzetten van een iPhone-ontwikkelomgeving.
Nadat je phonegap hebt gedownload en uitgepakt, zul je zien dat het een aparte map bevat voor elk platform dat wordt ondersteund door PhoneGap:
PhoneGap wordt geleverd met een standaardtoepassing die kan worden gebruikt om de krachtige functionaliteit van de SDK te demonstreren. De rest van deze tutorial zal gewijd zijn aan het tonen hoe je deze standaard app instelt voor zowel Android als iPhone.
Om een werkruimte te maken voor je PhoneGap-app op Android, ga je naar de map "phonegap-android" op de opdrachtprompt of terminal.
Voer de volgende opdracht uit:
ruby ./droidgap "[android_sdk_path]" [naam] [pakketnaam] "[www]" "[pad]"
Zodra deze opdracht met succes wordt uitgevoerd, wordt de toepassingswerkruimte gegenereerd in het pad dat u hebt gegeven. Vervolgens kunt u Eclipse openen en eerst "Nieuw Android-project" kiezen en vervolgens "Maken uit bestaande bron" kiezen en de werkruimte van de toepassing selecteren die met de vorige opdracht is gemaakt.
Als dat is gebeurd, kopieert u de volgende bestanden uit de map phonegap / phonegap-android / example naar de map www in uw werkruimte:
Klik vervolgens op uitvoeren om de voorbeeldapp voor phonegap in de Android-simulator te bekijken.
Als u een PhoneGap-app voor de iPhone wilt maken, gaat u naar de map phonegap-iphone, waar u de PhoneGap-bestanden hebt uitgepakt.
Zodra u in die map in uw terminal bent, typt u 'make' om PhoneGapLibInstaller.pkg te bouwen.
Dan moet je PhoneGapLibInstaller.pkg gebruiken om de PhoneGapLib en de PhoneGap-sjabloon in Xcode te installeren.
Vervolgens kunt u Xcode starten en een 'Nieuw project' maken. Kies vervolgens een op PhoneGap gebaseerde applicatiesjabloon.
Kopieer vervolgens de volgende bestanden naar de map www van uw werkruimte:
Start de applicatie om de demo PhoneGap-app in de iPhone Simulator te starten.
Dus nu heb je de demo PhoneGap-app die op je simulator draait. Je kunt met de app spelen en zien hoe het werkt. Deze basisapp toont algemeen gebruik van de verschillende API's die worden weergegeven
door de PhoneGap SDK.
Ga je gang en open index.htm. Bovenaan de pagina ziet u de volgende code:
PhoneGap
Het eerste is een link naar master.css die alle stijl geeft aan de knop die je op het scherm hebt gezien.
De tweede regel bevat phonegap.js die wordt gegenereerd wanneer we een werkruimte voor onze applicatie hebben gemaakt. Dit bestand doet al het magische van het aanroepen van de native API's via JavaScript.
Als u nu naar het einde van index.html scrolt, ziet u de volgende code:
Welkom bij PhoneGap!
dit bestand bevindt zich op assets / index.html
Platform:
Versie:
UUID:
Deze HTML maakt de links die worden weergegeven als knoppen op het scherm van uw mobiele apparaat. Aan deze links zijn onclick-handlers gekoppeld die JavaScript-functies aanroepen die in hetzelfde bestand zijn gedefinieerd en die verantwoordelijk zijn voor het aanroepen van de PhoneGap API voor interactie met de oorspronkelijke hardware van het apparaat.
De eerste functie die in JavaScript moet worden aangeroepen, is init (). Dit zal onze JavaScript-functie registreren apparaat info naar het PhoneGap-evenement.
Deviceready Event
De deviceready het evenement wordt afgevuurd door PhoneGap wanneer alle SDK-componenten correct zijn opgeslagen. Het is dan logisch dat de JavaScript-API's van PhoneGap worden gebruikt nadat dit evenement is gestart.
U kunt meer lezen over deviceready in de API-documentatie.
Device Object
Het apparaatobject bevat basisinformatie over het apparaat waarop de app wordt uitgevoerd, zoals het platform, de versie enz. Deze waarden kunnen worden gebruikt om apparaatspecifieke controles uit te voeren in uw code.
U kunt meer lezen over het apparaatobject in de officiële API-documentatie.
accelerometer
De eerste link in het lichaam roept de watchAccel-functie aan:
Bekijk Accelerometer
Dit gedeelte van de API kijkt en verzendt regelmatig meldingen over apparaatversnelling. Het retourneert de huidige versnelling van het apparaat door de x-, y- en z-coördinaten door te geven aan de callBackonSuccess functie geregistreerd. De x, y, z-waarden kunnen vervolgens in de toepassing worden gebruikt om op beweging te reageren.
Lees hier meer over de accelerometer.
GPS & Positionering
De tweede link in het lichaam is verantwoordelijk voor het verzamelen van de huidige apparaatlocatie:
Locatie ophalen
De callBackonSuccessfunctie wordt een object doorgegeven dat de GPS-coördinaten bevat die kunnen worden gebruikt in uw toepassing om locatiegebaseerde verwerking uit te voeren.
U kunt meer lezen over de Geolocation-API.
Telefoneren
De derde regel in de body start de dialer van het apparaat met het nummer "411":
Bel 411
Apparaatmeldingen
De volgende twee lijnen in het lichaam worden gebruikt om een apparaat te laten piepen of trillen:
Beep Vibrate
Lees meer over piepen en trillen in de officiële documenten.
De camera gebruiken
De volgende regel in het lichaam roept de functie aan show_pic een foto nemen:
Krijg een foto
Dit api start de camera-applicatie van het apparaat en wacht
voor gebruikers om een afbeelding te nemen.
Lees meer over het maken van foto's in de officiële API-documentatie.
Conclusie
PhoneGap is een zeer krachtig raamwerk voor platformonafhankelijke ontwikkeling. Als je al een sterke achtergrond hebt voor webontwikkeling en geïnteresseerd bent in het bouwen van apps voor een of meer apparaten, is PhoneGap zeker een sterke kanshebber om te overwegen!
Accentsconagua