DokumentationAEM 6.4Användarhandbok om mobila appar

Utveckla appar med PhoneGap CLI developing-apps-with-phonegap-cli

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • User
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.
NOTE
Adobe rekommenderar att du använder SPA Editor för projekt som kräver ramverksbaserad klientåtergivning för en sida (t.ex. Reagera). Läs mer.

Som utvecklare kan du när som helst köra programmet på en enhet eller i en emulator, förutsatt att du har konfigurerat utvecklingsmiljön.

För att kunna köra följande exempel behöver du ett system som kör OSx (Mac) med Xcode, eller ett Mac/Win/Linux-system med Android SDK installerat.

Bootstrap din utvecklingsmiljö bootstrap-your-development-environment

Konfigurera PhoneGap CLI

För iOS: Om du vill utveckla för iPhone och iPad behöver du Apple Xcode IDE.

För Android: Om du vill utveckla för iPhone och iPad behöver du Google Android Studio IDE.

Hämta källan download-the-source

När du har startat om utvecklingsmiljön hämtar du källan från AEM App Build Tile:

  • Klicka på den nedrullningsbara menyn PhoneGap Build.

chlimage_1-45

  • Klicka på Hämta källa.
  • Välj önskad källa från modalen Hämtningskälla.

chlimage_1-46

NOTE
Utvecklingskällan innehåller det senaste läget för din app, med ändringar som inte har mellanlagrats. Använd mellanlagringskällan för att skapa releaseförslag för att skicka till appbutiksleverantörer.
Om du aldrig mellanlagring av programmet aktiveras mellanlagringsarbetsflödet när du väljer Förproduktion (tips: detta visas som en mellanlagrad app i PhoneGap Enterprise Viewer App som finns i AppStore och Google PlayStore).
  • Klicka på Hämta och spara ZIP-filen på datorn.
  • Extrahera den hämtade ZIP-filen till arbetsytan.

Skapa och läsa in appen (från källa) build-and-load-the-app-from-source

PhoneGap CLI kan skapa ett plattformsprojekt, kompilera källan och distribuera appen med ett enda kommando.

NOTE
Du kan göra alla dessa steg separat, se PhoneGap CLI docs.
  1. Kontrollera att du har installerat PhoneGap CLI, se ovan.
  2. I ett konsolfönster (eller terminalfönster) går du till rotkatalogen för den extraherade källan.
  3. Ange följande kommando:
phonegap run android

// -- or -- //

phonegap run ios
NOTE
Om du har problem kan du gå tillbaka till grunderna för felsökning -
  1. Skapa en ny mapp (mkdir test)
  2. Navigera till den nya mappen (cd test)
  3. Kör 'phonegap create helloWorld'
  4. Navigera till helloWorld (cd helloWorld)
  5. Kör 'phonegap run android (eller ersätt android med ios som ovan).
  6. Emulatorn kommer att öppna och köra din nya PhoneGap-app och säga 'Device Ready' om JavaScript-bryggan till native fungerar.
Detta verifierar att PhoneGap CLI-utvecklingsmiljön fungerar som den ska.

Felsöka Javascript med felsökningen Safari och IOS debug-javascripts-with-safari-and-ios-debug

Du kan felsöka appens JavaScript-skript med hjälp av utvecklarverktygen i Safari, på samma sätt som med ett webbprogram.

Aktivera Safari Developer Tools enable-safari-developer-tools

Så här aktiverar du utvecklarverktygen:

  • Öppna Safaris inställningar

    • Klicka på Safari i menyraden
    • Klicka på Inställningar

  • Klicka på Avancerat i inställningsfönstret

chlimage_1-47

  • Markera "Visa menyn Framkalla i menyraden"
  • Stäng inställningsfönstret

Ansluta Safari till iOS connect-safari-to-ios

Du kan ansluta Safari till en iOS-enhet eller emulator.

  • Navigera till rotkatalogen för den extraherade källan i ett konsolfönster.
  • Ange följande kommando för att starta programmet på enheten eller emulatorn.
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • Öppna Safari
  • Klicka på Utveckla på menyraden
  • Välj undermenyn iOS Simulator
  • Klicka på home.html

chlimage_1-48

Felsöka JavaScript med Safaris webbinspektör debug-javascript-with-safari-s-web-inspector

Du kan ange brytpunkter var som helst i källan. När du interagerar med emulatorn eller enheten stoppas körningen av appen vid dessa brytpunkter. Du kan stega dig igenom körningen och kontrollera värdena i variabler.

  • Klicka på Resurser i webbinspektören
  • Navigera i källträdet och klicka på den önskade källfilen
  • Klicka på radnumret bredvid för att lägga till en brytpunkt
  • Interagera med enhet eller emulator

chlimage_1-49

  • Använd kontrollknapparna för att fortsätta köra, stega över, stega in i och ta bort metoder:

NOTE
Håll musen om du vill se variabelvärdena i den aktuella metoden.

Nästa steg the-next-steps

När du har lärt dig mer om hur du utvecklar appar med PhoneGap CLI går du till Åtkomst till enhetsfunktioner.

recommendation-more-help
547b817b-14b5-4d82-aa0f-a64750e0e592