Webtoepassingen verpakken als systeemeigen mobiele toepassingen met PhoneGap Build

Zoeken

Laatst bijgewerkt op 2 mei 2021 | Ook van toepassing op Adobe Dreamweaver CS6

PhoneGap Build is een cloudservice waarmee u uw webtoepassingen kunt verpakken als systeemeigen mobiele toepassingen. PhoneGap Build ondersteunt het verpakken van systeemeigen toepassingen voor de volgende besturingsystemen voor mobiele apparaten:

iOS
Android
BlackBerry
webOS
Symbian
Windows Telefoon 8

Ga naar de PhoneGap-website voor meer informatie over de PhoneGap Build-service.

Raadpleeg de documentatie van PhoneGap Build voor meer informatie over het gebruik van de PhoneGap Build-service.

De rechtstreekse integratie van Dreamweaver met PhoneGap Build voor het verpakken van toepassingen wordt niet ondersteund in de nieuwste update voor de 2014-versie van Dreamweaver CC (oktober 2014) en hoger. U hebt echter wel rechtstreeks toegang tot de online PhoneGap Build-service en u kunt gebruikmaken van de meest recente functie-updates om uw webtoepassingen te verpakken.

De PhoneGap Build-service gebruiken in Dreamweaver CC (oktober 2014 en hoger)

Meld u aan bij de PhoneGap Build-service. U kunt uw bestaande Adobe ID blijven gebruiken.
Nadat u zich hebt aangemeld, wordt u doorgestuurd naar de sectie Apps van de site. Upload uw webmiddelen als ZIP-bestand met HTML-, CSS- en JavaScript-bestanden of wijs een Git- of SVN-gegevensopslagruimte aan.

De Apps-sectie van de PhoneGap Build-service
De PhoneGap Build-service compileert en verpakt de inhoud in enkele minuten en u ontvangt downloadkoppelingen voor alle mobiele platforms.

Ga voor assistentie bij het gebruik van de PhoneGap Build-service naar de ondersteuningspagina of het forum van de gebruikersgemeenschap.

De PhoneGap Build-service gebruiken in Dreamweaver CC (juni 2014)

Een PhoneGap Build-serviceaccount maken

U kunt PhoneGap Build en Dreamweaver niet gebruiken zonder een PhoneGap Build-serviceaccount. De accounts zijn gratis en eenvoudig in te stellen. Ga naar de PhoneGap Build-website om een account te maken.

U moet uw account valideren met een bevestigings-e-mail voordat uw account actief wordt.

De ontwikkelomgeving instellen

Afhankelijk van welke typen toepassingen u wilt verpakken en op welke apparaten u wilt testen, zijn er verschillende instellingstaken die u moet uitvoeren voordat u een toepassing kunt verpakken. U kunt bepaalde, alle of geen van de volgende opties instellen:

Android-SDK Als u Android-toepassingen wilt testen op uw lokale computer met een Android-emulator, moet u de Android-SDK downloaden en installeren. Raadpleeg de documentatie van Android voor instructies.

Nadat u de Android-SDK hebt geïnstalleerd, moet u de Android-SDK en de AVD-beheerfunctie starten en de Android-gereedschappen selecteren waarmee u lokaal wilt werken op de computer. Dreamweaver gebruikt de informatie die u selecteert tijdens deze eerste instelprocedure om de instellingen voor de Android-emulator in te voeren in het deelvenster PhoneGap Build-service. Raadpleeg de documentatie van Android voor meer informatie over het opgeven van deze instellingen.

BELANGRIJK: als u een Android-emulator wilt gebruiken om uw toepassing lokaal te testen, moet u voordat u gaat testen de emulator zo instellen dat deze onafhankelijk van Dreamweaver werkt zoals u dat wilt.

webOS SDK/PDK Als u webOS-toepassingen wilt testen op uw lokale computer met een webOS-emulator, moet u de webOS SDK/PDK downloaden en installeren.

QR-codelezer (Quick Response) Als u uw verpakte toepassing eenvoudig wilt overbrengen naar uw apparaat, hebt u een QR-codelezer nodig. (Als u in Dreamweaver een toepassing verpakt, ontvangt u een QR-code voor de toepassing die wordt weergegeven in het deelvenster PhoneGap Build nadat de toepassing is verpakt.) Er zijn verschillende codelezers gratis verkrijgbaar bij een groot aantal aanbieders. Zoek op Google naar “QR-codelezer” voor meer informatie.

De Add-on van PhoneGap Build installeren

Voordat u in Dreamweaver de PhoneGap Build-service kunt gebruiken, moet u de Add-on van PhoneGap Build installeren.

Ga naar Venster > Bladeren in Add-ons om de Add-on te installeren. De pagina Adobe Creative Cloud Add-Ons wordt weergegeven. Ga naar de Add-on van PhoneGap Build en volg de instructies op het scherm om de Add-on te installeren.

Belangrijk: Voordat u Add-ons installeert, moet u controleren of u bestandssynchronisatie voor uw Adobe Creative Cloud-account hebt ingeschakeld. Zie Bestandssynchronisatie met Adobe Creative Cloud inschakelen voor meer informatie.

Mobiele toepassingen verpakken met PhoneGap Build

Zorg dat u een Dreamweaver-site hebt gemaakt die een pagina index.html bevat (gewoonlijk de startpagina van uw toepassing).

Opmerking: PhoneGap Build ondersteunt alleen het gebruik van HTML-, CSS- en JavaScript-bestanden. Uw site mag geen PHP- of CFM-pagina's of andere soorten serverpagina's bevatten.
Kies Site > PhoneGap Build-service > PhoneGap Build-service.
Geef uw aanmeldingsgegevens op en meld u aan bij PhoneGap Build. Zie Een PhoneGap Build-serviceaccount maken als u nog geen PhoneGap Build-account hebt gemaakt.
Laat Nieuw project maken ingeschakeld en klik op Doorgaan.
Geef de vereiste sleutel- en wachtwoordinformatie op voor de besturingssystemen waarop u zich richt. Informatie over de sleutel voor ondertekening is alleen vereist voor Android, iOS en Blackberry.

Als u niet meer dan één toepassing kunt maken, hebt u waarschijnlijk geen abonnement voor de PhoneGap-service.

Opmerking:

Als u onjuiste informatie invoert, mislukt het samenstellen en verschijnt een foutbericht waarin wordt aangegeven dat u onjuiste sleutel- of wachtwoordinformatie hebt ingevoerd. Als u geen informatie invoert, mislukt het samenstellen voor iOS en verschijnt een foutbericht waarin wordt aangegeven dat u de sleutel voor ondertekening met invoeren. Apps voor Android en Blackberry worden samengesteld met de certificaten voor foutopsporing.

Voer de vereiste sleutel- en wachtwoordinformatie in voor de besturingssystemen waarop u zich richt.
Houd er rekening mee dat Dreamweaver een bestand met projectinstellingen toevoegt aan de hoofdmap van de site. (Mogelijk moet u het deelvenster Bestanden vernieuwen om dit bestand te kunnen zien.) Dit bestand is erg belangrijk omdat de PhoneGap Build-service het gebruikt om uw toepassing te volgen.

Dreamweaver voegt ook een bestand config.xml toe aan de hoofdmap. Dubbelklik op dit eenvoudige XML-bestand om het te openen.

config.xml-bestand

Pas de identiteit van uw toepassing aan door de inhoud van dit bestand te bewerken. Als u dit niet doet, krijgen al uw toepassingen dezelfde standaardnaam.

Raadpleeg de documentatie van PhoneGap Build voor meer informatie over het werken met het bestand config.xml.
Sla het bewerkte bestand config.xml op en sluit het bestand. Klik vervolgens op de knop Opnieuw samenstellen in het deelvenster PhoneGap Build-service. Als PhoneGap klaar is met het verpakken van uw toepassing voor de afzonderlijke platformen, worden berichten weergegeven met de melding dat het samenstellen is voltooid.

Het deelvenster PhoneGap Service geeft aan wanneer de bouw is voltooid.

Opmerking:

als u een build voor Windows 8 wilt verpakken, moet u zich rechtstreeks aanmelden op https://build.phonegap.com, de vereiste bestanden uploaden en de build compileren.
Dreamweaver gebruikt standaard versie 2.9.0 van PhoneGap Build. Als u de nieuwste versie van PhoneGap Build wilt gebruiken, voert u de volgende stappen uit:
1. Verwijder de volgende regel uit het bestand config.xml in de hoofdmap van de site:
2. Sla het bestand op.
3. Stel het project opnieuw samen.
Nadat de builds zijn voltooid, hebt u een aantal opties. U kunt de toepassingsbestanden downloaden naar uw computer, de QR-code van een build scannen om de toepassing over te brengen naar uw apparaat of de toepassing emuleren met een emulator (alleen Android en webOS).

Toepassingsbestanden downloaden

Als u een toepassing wilt downloaden van PhoneGap Build, klikt u op de knop Toepassing downloaden (de pijl omlaag) in het deelvenster PhoneGap Build-service.

Opmerking: iOS-toepassingen kunt u niet downloaden zonder handtekeningsleutel. Raadpleeg de documentatie van PhoneGap Build voor meer informatie.

De namen van de gedownloade toepassingsbestanden zijn als volgt:

iOS - app.ipa
Android - app.apk
BlackBerry - app.jad
webOS - app.ipk
Symbian- app.wgz

Een QR-code scannen om een toepassing naar een apparaat over te brengen

U moet beschikken over een QR-codelezer op uw apparaat voordat u doorgaat. Zie De ontwikkelomgeving instellen voor meer informatie.

Opmerking: QR-codes zijn niet beschikbaar voor iOS-toepassingen zonder handtekeningsleutel. Raadpleeg de documentatie van PhoneGap Build voor meer informatie.

Klik in het deelvenster PhoneGap Build-service op de QR-code van de toepassing die u wilt downloaden.
Start de QR-codelezer op uw mobiele apparaat en scan de QR-code.
Nadat de toepassing is gedownload, kunt u deze rechtstreeks starten op uw apparaat.
Klik op de knop Terug naar deelvenster Samenstellen om terug te keren naar de lijst met samengestelde toepassingen.

Opmerking: QR-codes zijn niet beschikbaar voor iOS-toepassingen zonder sleutels voor ondertekening.

Een toepassing emuleren (alleen Android en webOS)

BELANGRIJK: zorg dat u de Android-SDK en/of de webOS SDK/PDK hebt geïnstalleerd voordat u doorgaat. Ook moet u de SDK/AVD-gegevens hebben opgegeven die u lokaal beschikbaar wilt maken in de SDK-toepassingen. Zie De ontwikkelomgeving instellen voor meer informatie.

Open het deelvenster PhoneGap Build-instellingen via Site > PhoneGap Build-service > PhoneGap Build-instellingen.
Geef de locaties op voor de Android-SDK en/of webOS SDK/PDK en klik op Opslaan. Dreamweaver gebruikt deze locaties om te zoeken naar de informatie die nodig is om uw toepassing naar de emulators te verzenden.
Klik in het deelvenster PhoneGap Build-service (Site > PhoneGap Build-service > PhoneGap Build-service) op de knop Emuleren (pijl overdwars) voor de toepassing die u wilt emuleren.
Als u eerder in de SDK-toepassingen de SDK/AVD-gegevens hebt opgegeven, verschijnt er een venster waarin deze informatie is ingevoerd.
Selecteer de SDK/AVD die u wilt gebruiken voor de emulatie en klik op Starten.

Opmerking: Van emulators is bekend dat ze vaak traag zijn. Daarom kan het enige tijd duren voordat de emulator de toepassing heeft gestart en geladen.

Een Android-app maken en implementeren met PhoneGap en Dreamweaver

Kevin Hoyt - Adobe Developer-evangelist

Een iOS-app maken en implementeren met PhoneGap