Webtoepassingen verpakken

Zoeken

Laatst bijgewerkt op 2 mei 2021

Webtoepassingen verpakken als systeemeigen mobiele toepassingen (CS5.5)

Dankzij de integratie van Dreamweaver met jQuery Mobile en PhoneGap kunt u webtoepassingen maken en verpakken voor distributie op Android™- en iOS-apparaten. Dreamweaver gebruikt PhoneGap SDK's om het pakket te maken (bestand .apk voor Android en bestand .xcodeproj voor iPhone/iPad)

Nadat u een mobiele toepassing hebt verpakt met Dreamweaver, kunt u de toepassing weergeven in een apparaatemulator of de toepassing naar uw eigen apparaat distribueren.

Opmerking:

De mobiele toepassing die u verpakt met Dreamweaver, is alleen bedoeld voor foutopsporing. De toepassing kan worden uitgevoerd in de Android- en iOS-emulators, of op uw eigen mobiele apparaat als u de toepassing overdraagt, maar u kunt deze mobiele toepassingen voor foutopsporing niet uploaden naar de onlinewinkels van Apple en Android. U kunt uw iOS- of Android-toepassingen alleen uploaden als u ze ook nog ondertekent buiten Dreamweaver. Raadpleeg de Android-documentatie of het programmahandboek op de Apple iOS Provisioning Portal voor meer informatie over het uploaden van toepassingen naar de onlinewinkels van Apple en Android. (Voordat u toegang krijgt tot de Apple iOS Provisioning Portal moet u zich aanmelden bij het Apple Developer Program [gratis] en u inschrijven voor het iOS Developer Program [jaarlijkse betaling].)

Een webtoepassing maken met de startpagina

U kunt elke startpagina gebruiken om uw webtoepassing te maken. Als uw webtoepassing echter systeemeigen functies van mobiele apparaten gebruikt wanneer de toepassing wordt gedistribueerd als mobiele toepassing, moet u de pagina jQuery Mobile (PhoneGap) gebruiken.

De startpagina jQuery Mobile (PhoneGap) bevat het bestand phonegap.js en de overige jQuery Mobile-bestanden. Het bestand phonegap.js bevat de API's die vereist zijn voor de samenwerking met de systeemeigen functies van mobiele apparaten, zoals een GPS, versnellingsmeter, camera enzovoort.

Selecteer Bestand > Nieuw.
Selecteer Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (PhoneGap).
Klik op Maken.
Selecteer jQuery Mobile in het deelvenster Invoegen (Venster > Invoegen). De onderdelen die u kunt toevoegen aan de webtoepassing, worden weergegeven.
Plaats de cursor in de ontwerpweergave op de plaats waar u het onderdeel wilt invoegen en klik op het onderdeel in het deelvenster Invoegen. Pas de onderdelen aan met de opties in het dialoogvenster dat verschijnt.

Opmerking:

Als u het bestand PhoneGap.js wilt bewerken, moet u het toepassingsframework en de toepassingsinstellingen configureren. Zie de onderwerpen over het maken van toepassingspakketten voor meer informatie.

Bekijk een voorvertoning van de pagina weer in Live View. Bepaalde CSS-klassen worden alleen toegepast in Live View.

Systeemvereisten voor verpakken van toepassingen

Zorg dat uw systeem voldoet aan de volgende vereisten voordat u begint met het verpakken van een toepassing.

MAC OS - iOS

Mac OS X Snow Leopard 10.6.x of hoger
Xcode 3.2.x met de iOS SDK (installatie-instructies verderop).

MAC OS - Android

Mac OS X 10.5.8 of hoger (alleen x86)
Android SDK (installatie-instructies verderop).

Windows - iOS

iOS is alleen beschikbaar voor gebruikers met een Apple-computer

Windows - Android

Windows XP (32-bits), Vista (32- of 64-bits) of Windows 7 (32- of 64-bits)
Android SDK (installatie-instructies verderop).

Een toepassingspakket maken (Windows)

Bekijk deze zelfstudie op Dreamweaver Developer Center voor met informatie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.

Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.

Opmerking:

Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.
Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.
Klik op Eenvoudig installeren om de Android-SDK te installeren.

Opmerking:

Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.
Selecteer een locatie waar u de SDK-bestanden wilt installeren en klik op Selecteren. Klik op Opslaan nadat de installatie is voltooid.
Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.
Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.
Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.
Geef desgewenst het volgende op:
1. Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
2. Geef een doelpad voor het pakket op.
3. Klik op AVD's beheren om de nieuwste SDK-onderdelen van Google te downloaden en installeren. Gebruik Android SDK and AVD Manager om de Android SDK bij te werken. Zie http://developer.android.com/sdk/adding-components.html voor meer informatie over het gebruik van de Manager.
  
  Opmerking:
  
  Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.
Voer een van de volgende handelingen uit:
- Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.
- Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.

Een toepassingspakket maken (Mac OS)

Lees dit artikel op Dreamweaver Developer Center voor een zelfstudie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.

Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.

Opmerking:

Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.
Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.
Installeer de SDK voor iOS of Android, afhankelijk van uw vereisten:
- Klik op de koppeling Apple iOS Dev Center om de xcode- en iOS-SDK te downloaden en installeren. De toepassing wordt standaard geïnstalleerd in de map OS <versienummer>/developer.
  
  Meld u aan bij Dev Center met uw Apple-id. De registratie is gratis. Maak een account als u nog geen geregistreerde gebruiker bent.
Opmerking:

Het SDK-pakket dat u downloadt van Apple Dev Center kunt u gebruiken om te testen. Als u uw toepassing echter uploadt naar de Apple Store, moet u zich registreren als Apple-ontwikkelaar nadat u de vereiste kosten hebt betaald.
- Klik op Eenvoudig installeren om de Android-SDK te installeren.
Opmerking:

Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.
Klik op Opslaan.
Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.
Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.
Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.
Voer desgewenst de volgende handelingen uit:
- (Android) Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de Android-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
- (Mac® OS 10.6.x) Geef bij PNG van startpagina een PNG-bestand op dat wordt gebruikt als pictogram voor de iOS-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
- (Mac OS 10.6.x) Selecteer een versie van de iPhone/iPod Touch/iPad waarvoor u het pakket maakt.
- Geef een ander doelpad voor het pakket op.
Opmerking:

Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.
Voer een van de volgende handelingen uit:
- Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.
- Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.