Anforderungen

Grundlagen

  • Grundlagen von AEM Mobile
  • Grundlagen des Erstellens und Veröffentlichens von Inhalten über das On-Demand-Portal
  • Kenntnisse in Apache Cordova (http://cordova.apache.org)

Erforderliche Produkte

  • AEM Mobile

Cordova-Erweiterung

Experience Manager Mobile Runtime ermöglicht es Benutzern, komplexe Apps mit Erweiterung durch Apache Cordova und Developer Tools (Beta) zum Testen zu erstellen.

Cordova-Erweiterungen können in HTML-Artikeln und bei Webüberlagerungen in InDesign-basierten Artikeln verwendet werden und erlauben den Zugriff auf die folgenden Funktionen:

  • Cordova-Hauptzusatzmodule: Verwenden Sie Cordova-Hauptzusatzmodule wie „Kamera“, „Kontakte“, „Geografischer Standort“ und „Dateifreigabe“.
  • Benutzerdefinierte Cordova-Zusatzmodule: Verwenden Sie Zusatzmodule aus der Cordova-/Phonegap-Community oder erstellen Sie eigene. Beispiele: Scannen von Barcodes und mobile Datenbanken.
  • AEM Mobile-spezifische Cordova-kompatible Zusatzmodule: Verwenden Sie Zusatzmodule für lokale Anwendungs- und Inhaltsmetadaten.

 

Cordova-Hauptzusatzmodule

Die Cordova-Hauptzusatzmodule erlauben den Zugriff auf native Gerätefunktionen innerhalb von AEM Mobile-Inhaltsansichten über JavaScript. Zusatzmodule können beim Erstellen von Apps für jede einzelne App aktiviert oder deaktiviert werden.

Die folgenden Cordova-Hauptzusatzmodule sind verfügbar:

  • Kamera Zum Aufnehmen von Fotos und Auswählen von Bildern aus der Bildbibliothek des Systems.
  • Kontakte Ermöglicht den Zugriff auf die Kontaktdatenbank des Geräts. Für Windows-Apps ist „pickContact“ die einzige unterstützte API des Zusatzmoduls.
  • Geräteinformationen Beschreibt die Hardware und Software des Geräts.
  • Gerätebewegung (Beschleunigungsmesser) Ermöglicht den Zugriff auf den Bewegungssensor, der eine Änderung der Bewegung relativ zur aktuellen Ausrichtung des Geräts in den drei Dimensionen entlang der x-, y- und z-Achse erkennt.
  • Geräteausrichtung (Kompass) Sensor, der die Richtung erkennt, in die das Gerät weist, in der Regel bezogen auf den oberen Rand des Geräts.
  • Dateizugriff Ermöglicht den Lese-/Schreibzugriff auf Dateien auf dem Gerät.
  • Dateiübertragung Ermöglicht den Zugriff auf Dateiuploads und -downloads.
  • Geografischer Standort Stellt GPS-Informationen zum Standort des Geräts bereit, z. B. Breiten- und Längengrad.
  • Globalisierung Verwendet auf Gebietsschema, Sprache und Zeitzone des Benutzers ausgerichtete Vorgänge.
  • Medien (Cordova-Zusatzmodulmedien) Bietet die Möglichkeit, Audiodateien auf einem Gerät aufzuzeichnen und wiederzugeben.
  • Medienerfassung Bietet Zugriff auf die Audio-, Bild- und Videoaufnahmefunktionen des Geräts.
  • Netzwerkinformationen Informationen zur Mobilfunk- und WLAN-Verbindung des Geräts sowie über das Bestehen einer Internetverbindung.
  • Benachrichtigungsdialoge Bietet Zugriff auf einige native Benutzeroberflächenelemente von Dialogfeldern, z. B. Warnung und Signalton.
  • Vibration (nur iOS und Android) Option für die Vibration des Geräts.
  • WKWebView (nur iOS) – Sie können das WKWebView-Zusatzmodul aktivieren, um HTML-Dateien wie in Mobile Safari zu rendern. Diese Option verwendet WKWebView (WebKit) anstelle von UIWebView für HTML-Artikel und Webüberlagerungen auf Geräten mit iOS 9. In einer App, die auf Geräten mit iOS 8 ausgeführt wird, werden Inhalte weiterhin mit UIWebView gerendert. (Siehe Erstellen von AEM Mobile-Apps für iOS.)

Weitere Informationen finden Sie unter Cordova-Hauptzusatzmodule.

Beispiele können Sie von Github herunterladen.

Benutzerdefinierte Cordova-Zusatzmodule

Sie können einer AEM Mobile-App benutzerdefinierte Cordova-Zusatzmodule hinzufügen und damit Inhalte mit den vielen in der Cordova-/PhoneGap-Community verfügbaren Zusatzmodulen oder eigenen Zusatzmodulen erstellen. Beispiele für zusätzliche App-Funktionen: Smartphone als Barcodescanner, Geofencing, mobile Datenbank.

Wenn Sie benutzerdefinierte Cordova-Zusatzmodule verwenden, weicht der Arbeitsablauf von der Standardmethode für die App-Erstellung ab. In diesem Fall wird das aktualisierte AEM Mobile Developer Tool verwendet, mit dem Sie festlegen können, welche Cordova-Zusatzmodule Sie einsetzen möchten. Bei einer iOS-App wird mit dem Developer Tool dann die heruntergeladene IPA-Datei bearbeitet. Bei einer Android-App wird anschließend mit dem Developer Tool eine APK-Datei erstellt, die Sie dann über die neue Registerkarte „Benutzerdefinierte App-Shell“ hochladen können. Diese Registerkarte wird angezeigt, wenn Sie eine Android-App erstellen oder bearbeiten.

Siehe https://cordova.apache.org/plugins/.

 

Hinweis:

Cordova-Zusatzmodule können derzeit nur auf Artikelebene verwendet werden. Nur wenn ein Artikel geöffnet ist, können Zusatzmodule durch die AEM Mobile-App ausgeführt werden. Für iOS-Geräte: Wenn das erste Element der Sammlung auf der obersten Navigationsebene ein Artikel ist, wird dieser Artikel beim Start der App geladen und im Arbeitsspeicher vorgehalten. Dieser Artikel kann weiterhin ausgeführt werden und die gleichen Cordova-Zusatzmodule aufrufen, nachdem der Benutzer zu anderen Inhalten gewechselt ist. Allerdings sind die Zusatzmodule in diesem Artikel der obersten Ebene nicht für Verweise aus anderen Artikeln verfügbar.

 

AEM Mobile-spezifische Cordova-Zusatzmodule

Bei AEM Mobile-spezifischen Cordova-kompatiblen Zusatzmodulen handelt es sich um eine Gruppe von JavaScript-APIs, die Zugriff auf bestimmte Daten im Zusammenhang mit der AEM Mobile Runtime-Anwendung und ihren Inhalten aus der Artikelinhaltsanzeige bereitstellen. Um die Cordova-Zusatzmodule für AEM Mobile zu verwenden, müssen Erweiterungen für die Inhalte durch Auswählen der Option „Erweiterungsfunktionen aktivieren“ in den Artikeleigenschaften aktiviert sein. Diese Zusatzmodule werden in AEM Mobile-Apps automatisch aktiviert.

Die AEM Mobile-spezifischen Cordova-Zusatzmodule umfassen die folgenden APIs:

  • Zugriff auf Entitätsmetadaten (Inhaltstitel, Berechtigung)
  • Geräteinformationen (Plattform, Version, Bezeichner)
  • Informationen zu Push-Benachrichtigungen (Push-Token)
  • Miniaturen (Hintergrund- und Social Sharing-Bild)

Eine ausführliche Dokumentation finden Sie unter Verwenden von AEM Mobile-spezifischen Cordova-kompatiblen Zusatzmodulen.

Beispiele für Cordova-Zusatzmodule

Erweiterungsfunktionen in der App aktivieren

  1. Erstellen Sie HTML-Quellinhalte für die Inhaltsanzeige oder die Web-Überlagerung, die auf die Cordova-APIs verweisen.

    Wenn Ihr HTML-Code auf die Cordova-Hauptzusatzmodule oder AEM Mobile-spezifischen Cordova-kompatiblen Zusatzmodule verweist, fügen Sie die folgende Zeile hinzu:

    <script type="text/javascript" src="cordova.js"></script>

    Die Datei „cordova.js“ wird automatisch in Ihre App eingebunden. Sie müssen sie lediglich zur Laufzeit laden.

    Für die Cordova-Zusatzmodule und die AEM Mobile-spezifischen Cordova-kompatiblen Zusatzmodule muss Cordova vollständig geladen werden, bevor es problemlos verwendet werden kann. Andernfalls kann bei einem Skript, das eine bestimmte Cordova-API aufruft, ein Fehler auftreten, weil Cordova noch nicht geladen wurde.

    Wenn Cordova bereit ist, wird ein deviceready-Ereignis ausgelöst, mit dem Sie bestimmen können, wann Ihr Code ausgeführt wird.

    Fügen Sie den folgenden Code in der HTML-Datei ein:

    document.addEventListener("deviceready", function() {
        // Cordova is now ready,
        // start initializing the rest of the code
    }, false);

    Weitere Informationen finden Sie unter Cordova-Ereignisse.

  2. Aktivieren Sie für alle Inhalte, die diese Zusatzmodule verwenden, in den Inhaltseigenschaften die Option „Erweiterungsfunktionen aktivieren“. (Sie können die Inhaltseigenschaften im Abschnitt „Inhalt und Layouts“ des On-Demand-Portals bearbeiten.)

    Sie können die Erweiterungsfunktionen für die Artikel auch über die On-Demand Services API aktivieren. Wenn Sie die Artikelentitäts-Metadaten erstellen oder aktualisieren, legen Sie den Parameter isTrustedContent auf „true“ (boolesch) fest. Dieser Wert ist standardmäßig auf „false“ festgelegt.

    Standardmäßig ist die Option „Erweiterungsfunktionen aktivieren“ für alle Artikel deaktiviert. Sie können diese Standardeinstellung in den Projekteinstellungen ändern.

  3. Wenn Sie in Ihrer App Cordova-Hauptzusatzmodule, nicht aber benutzerdefinierte Cordova-Zusatzmodule verwenden, erstellen Sie eine App, in der die Cordova-Zusatzmodule aktiviert sind. (Eine Anleitung für benutzerdefinierte Cordova-Zusatzmodule finden Sie im nächsten Abschnitt.)

    Verwenden Sie beim Erstellen einer App die Registerkarte „Zusatzmodule“, um die für Ihre Inhalte verwendeten APIs zu aktivieren.

    Das Aktivieren von Zusatzmodulen ist für AEM Mobile-spezifische Cordova-kompatible Zusatzmodule nicht erforderlich.

    Zusatzmodule für iOS-Apps

    Hinweis:

    Die besten Ergebnisse erzielen Sie, wenn Sie nur die Cordova-Zusatzmodule wählen, die Sie auch verwenden möchten.

  4. Testen Sie die App.

Arbeitsablauf für die App-Erstellung mit benutzerdefinierten Cordova-Zusatzmodulen

Wenn Sie in Ihrer App benutzerdefinierte Cordova-Zusatzmodule verwenden, legen Sie mit dem AEM Mobile Developer Tool fest, welche Cordova-Zusatzmodule für die App aktiviert werden sollen. Anschließend verwenden Sie das Developer Tool, um eine IPA-Datei (iOS) zu bearbeiten oder eine APK-App-Shell (Android) zu erstellen, die Sie hochgeladen können, wenn Sie die Android-App erstellen.

Diese Schritte müssen nur ausgeführt werden, wenn Sie in Ihrer App benutzerdefinierte Cordova-Zusatzmodule verwenden möchten. Mit dem Developer Tool können Sie alle Arten von in der App verwendeten Zusatzmodulen (benutzerdefinierte, Haupt- und AEM Mobile-spezifische Zusatzmodule) aktivieren. Wenn Sie das Developer Tool verwenden, um eine App zu erstellen oder zu bearbeiten, werden alle Einstellungen auf der Registerkarte „Zusatzmodule“, die Sie beim Erstellen der App vornehmen, ignoriert. Verwenden Sie das Developer Tool, um alle notwendigen Angaben zu Cordova-Zusatzmodulen zu machen.

Video zu benutzerdefinierten Cordova-Zusatzmodulen

Video zu benutzerdefinierten Cordova-Zusatzmodulen

iOS-Arbeitsablauf für die App-Erstellung mit benutzerdefinierten Cordova-Zusatzmodulen

  1. Erstellen Sie Inhalte mit Cordova-Zusatzmodulen. Befolgen Sie die Schritte im Abschnitt „Erweiterungsfunktionen in der App aktivieren“ oben, um die Erweiterbarkeit in allen Artikeln zuzulassen, die Cordova-Zusatzmodule verwenden.

  2. Erstellen Sie im On-Demand-Portal eine iOS-App und laden Sie die IPA-Datei herunter. (Siehe Erstellen von AEM Mobile-Apps für iOS.)

  3. Richten Sie mit dem AEM Mobile Developer Tool ein Projekt ein, testen Sie Ihre Inhalte und bestimmen Sie, welche Cordova-Zusatzmodule in der App verwendet werden. Bearbeiten Sie mit dem Developer Tool dann die heruntergeladene IPA-Datei und machen Sie Angaben zu den verwendeten Cordova-Zusatzmodulen.

    Ausführliche Informationen dazu finden Sie im Abschnitt über die Verwendung des AEM Mobile Developer Tool (siehe unten).

  4. Signieren Sie die geänderte IPA-Datei.

Android-Arbeitsablauf für die App-Erstellung mit benutzerdefinierten Cordova-Zusatzmodulen

  1. Erstellen Sie Inhalte mit Cordova-Zusatzmodulen. Befolgen Sie die Schritte im Abschnitt „Erweiterungsfunktionen in der App aktivieren“ oben, um die Erweiterbarkeit in allen Artikeln zuzulassen, die Cordova-Zusatzmodule verwenden.

  2. Richten Sie mit dem AEM Mobile Developer Tool ein Projekt ein, testen Sie Ihre Inhalte und geben Sie an, welche Cordova-Zusatzmodule in der App verwendet werden sollen. Erstellen Sie mit dem Developer Tool dann eine App-Shell (APK-Datei) mit den Angaben zu den verwendeten Cordova-Zusatzmodulen.

    Ausführliche Informationen dazu finden Sie im Abschnitt über die Verwendung des AEM Mobile Developer Tool (siehe unten).

  3. Erstellen Sie im On-Demand-Portal eine Android-App. Geben Sie auf der Registerkarte „Benutzerdefinierte App-Shell“ die APK-Datei an, die Sie mit dem Developer Tool erstellt haben.

  4. Laden Sie die APK-Datei aus dem On-Demand-Portal herunter und signieren Sie sie.

AEM Mobile Developer Tool verwenden

Beim AEM Mobile Developer Tool handelt es sich um ein Befehlszeilen-Dienstprogramm, das einen nahtlosen Arbeitsablauf für Entwickler ermöglicht. Das Werkzeug wird auf dem lokalen Desktop eines Entwicklers installiert und bietet die folgenden Funktionen:

  • Projekte erstellen Erstellt eine AEM Mobile-Projektordnerstruktur, die für die lokale Entwicklung vorbereitet ist. Diese Projektstruktur wird nur für Testzwecke verwendet.
  • Inhalte erstellen Erstellt eine AEM Mobile-Inhaltsvorlage, mit der die verfügbaren Cordova- und Runtime-APIs verwendet werden können.
  • Cordova-Zusatzmodule hinzufügen und App erstellen Wenn Sie in Ihrer App Cordova-Zusatzmodule verwenden, können Sie mit dem Developer Tool die Zusatzmodule wählen und eine App-Shell (Android) erstellen bzw. eine IPA-Datei (iOS) bearbeiten. Die entsprechende Datei enthält dann die angegebenen Zusatzmodule.
  • Im Simulator ausführen (1) Startet den Simulator, (2) installiert den Simulator-Build und (3) startet den AEM Mobile Runtime-Simulator-Build, der lokale Inhalte aus der lokalen Umgebung anzeigt. Schritt 1 wird ignoriert, wenn der Zielsimulator gestartet wird. Schritt 2 wird ignoriert, wenn der Simulator-Build installiert wurde.
  • Hilfe Zeigt die Hilfe zu den Befehlszeilenbefehlen an.

AEM Mobile-Befehlsstruktur

Das AEM Mobile Developer Tool ist für zwei wichtige Arbeitsabläufe notwendig:

  • Entwickeln und Testen von Inhalten, die Cordova-Zusatzmodule verwenden
  • Erstellen von Apps, die benutzerdefinierte Cordova-Zusatzmodule enthalten

 

Lizenzvereinbarung

Hinweis:

Durch die Installation der unten aufgeführten Software bestätigen Sie, dass Sie die Bedingungen der Adobe.com-Nutzungsbedingungen gelesen haben und ihnen zustimmen.

Abhängigkeiten installieren

Installieren Sie die je nach Betriebssystem erforderlichen Abhängigkeiten:

  • Mac OS X:
    • Node.js (Die aktuelle Version wird empfohlen; Version 6.2.2 ist mindestens erforderlich.)
    • Xcode für die iOS-Entwicklung (Version 7.0 oder höher)
    • Java für die Android-Entwicklung (abhängig von der OS X-Version)
  • Windows:

 

Befehlszeilenwerkzeug für AEM Mobile installieren (Mac OS)

Führen Sie beim Entwickeln für Windows alle Befehle in PowerShell statt an der Eingabeaufforderung aus.

  1. Starten Sie Terminal.

  2. Führen Sie folgenden Code aus, um das AEM Mobile-Befehlszeilenwerkzeug über „Node.js“ zu installieren:

    npm install -g aemm

    Wenn eine Meldung angezeigt wird, dass die Berechtigung für den Benutzer verweigert wird, versuchen Sie, das oben aufgeführte Skript mit „sudo“ auszuführen:

    sudo npm install -g aemm

    Nach dem Abschluss wird eine symbolische Verknüpfung erstellt, damit Sie das AEM Mobile-Befehlszeilenwerkzeug (aemm) in jedem beliebigen Verzeichnis aus Terminal ausführen können.

Developer Tool aktualisieren

Führen Sie den Befehl npm install -g aemm (oder sudo npm install -g aemm) aus, wenn das AEM Mobile Developer Tool in einer neuen Version vorliegt.

Umgebung für Android konfigurieren

Um den Android-Build zu emulieren, müssen Sie das erforderliche Android-SDK installieren und die Umgebung für die Ausführung des Android-Emulators konfigurieren.

  1. Führen Sie in Terminal den folgenden Befehl aus, um das erforderliche SDK und die Konfigurationen zu installieren:

    aemm platform install android
  2. Möglicherweise werden Sie aufgefordert, der Lizenzvereinbarung für das Android-SDK zuzustimmen. Geben Sie y ein, um die Vereinbarung zu akzeptieren, oder n, um sie abzulehnen. Wenn Sie sie ablehnen, können Sie die erforderlichen SDKs nicht installieren und den Android-Emulator nicht ausführen.

Das Konfigurieren der Umgebung für iOS (sudo aemm platform install ios) ist nur erforderlich, wenn Sie Apps erstellen, die benutzerdefinierte Cordova-Zusatzmodule verwenden.

Simulator-Build installieren

Für das AEM Mobile-Befehlszeilenwerkzeug wird ein AEM Mobile Runtime-Simulator-Build benötigt, der installiert und ausgeführt wird, wenn Sie das Projekt erstellen. Dieser Vorgang ist erforderlich, um HTML-Inhalte mit dem Simulator zu testen. Er ist nicht notwendig, um Apps mit benutzerdefinierten Cordova-Zusatzmodulen zu erstellen.

Um den AEM Mobile Runtime-Simulator-Build zu installieren, führen Sie einen der folgenden Schritte aus:

  1. Führen Sie in Terminal den folgenden Befehl aus, um die neueste Version des Simulator-Builds zu installieren:

    aemm app install <platform>

    Die verfügbaren Werte für <platform> lauten wie folgt: ios, android

Alternativ können Sie die Version des Simulator-Builds angeben. Dies ermöglicht es Ihnen, eine ältere Version aus der Liste der verfügbaren Simulator-Builds zu installieren.

  1. Rufen Sie in Terminal die Liste der verfügbaren Simulatorversionen ab:

    aemm app install --list
  2. Geben Sie die Simulatorversion während des Installationsvorgangs an:

    aemm app install <platform> <simulator-version>

    Beispielsweise installieren Sie den Simulator in der Version 2016.4 wie folgt unter iOS:

    aemm app install ios 2016.4

    Hinweis:

    Wenn beim Ausführen des Simulators eine Fehlermeldung angezeigt wird, rufen Sie Xcode auf und signieren Sie ggf. die Lizenzvereinbarung. Alternativ können Sie in Terminal den Befehl sudo xcodebuild –license accept eingeben.

     

Projekt erstellen

Für das AEM Mobile-Befehlszeilenwerkzeug ist eine bestimmte Verzeichnisstruktur erforderlich, um das Projekt zu erstellen und zu testen. Dieses Projekt wird nur für Testzwecke verwendet. Nachdem Sie die Inhalte getestet haben, können Sie diese im On-Demand-Portal Ihrem Projekt hinzufügen.

Um diese Projektstruktur einzurichten, führen Sie die folgenden Schritte aus:

  1. Navigieren Sie in Terminal zu dem Verzeichnis, in dem das neue Projekt verwaltet werden soll.
  2. Erstellen Sie die Ordnerstruktur (ersetzen Sie <project-name> durch den gewünschten Projektnamen):
aemm project create <project-name>

Dadurch werden das Verzeichnis mit dem angegebenen Projektnamen und darin ein Beispielverzeichnis für Inhalte mit der Bezeichnung „SampleArticle“ erstellt.

Simulator ausführen

Nachdem das Projektverzeichnis erstellt wurde, können Sie mit dem Erstellen der App beginnen. Dieser Vorgang ist erforderlich, um HTML-Inhalte mit dem Simulator zu testen. Er ist nicht notwendig, um Apps mit benutzerdefinierten Cordova-Zusatzmodulen zu erstellen.

Um den Simulator zu öffnen (falls er nicht bereits geöffnet ist), den AEM Mobile Runtime-Simulator-Build zu installieren (falls noch nicht installiert) und den Simulator auszuführen, führen Sie die folgenden Schritte aus:

  1. Navigieren Sie in Terminal zum erstellten Projektverzeichnis, indem Sie den folgenden Befehl verwenden:

    cd <drag and drop the project-name directory>
  2. (Optional) Legen Sie die Standardausrichtung fest, mit der der Emulator/Simulator gestartet wird. Die Optionen sind Querformat und Hochformat.

    aemm config --set screenOrientation <<orientation>>

    Beispielsweise legen Sie die Ausrichtung im Querformat wie folgt fest:

    aemm config --set screenOrientation landscape

    So wird auch der Standardausrichtungsmodus ersetzt, falls verfügbar. So rufen Sie den aktuellen Standardmodus für die Ausrichtung ab:

    aemm config --get screenOrientation

    So entfernen Sie den aktuellen Standardmodus für die Ausrichtung:

    aemm config --unset screenOrientation
  3. Öffnen und installieren Sie den Simulator-Build und führen Sie ihn aus.

    aemm run <platform>

    Die verfügbaren Werte für <platform> lauten wie folgt: ios, android

  4. Durch den Befehl „run“ wird das Terminal kontinuierlich überwacht. Zum Beenden drücken Sie in demselben Terminal-Fenster die folgende Tastenkombination: Strg+C

Wenn die Simulator-App gestartet wurde, sollten Sie den Beispielartikel „SampleArticle“ sehen, der zuvor erstellt wurde. Alle Änderungen an den Dateien im Verzeichnis „SampleArticle“ führen dazu, dass die Simulator-App automatisch neu geladen wird und die aktualisierten Inhalte angezeigt werden.

Drücken Sie, während der Simulator ausgeführt wird, Befehl+Umschalt+H, um zum Startbildschirm zurückzukehren.

Sie können festlegen, welches Simulatorgerät verwendet werden soll, indem Sie den Gerätenamen angeben. Dies ist beim Testen auf einem anderen dem Simulatorgerät praktisch.

  1. Rufen Sie die Liste der verfügbaren Simulatoren ab, die derzeit im System installiert sind:

    aemm run <platform> --list
  2. Geben Sie in der Liste <uuid><device-name> das Gerät an:

    aemm run <platform> --target "<device-name>"

    Beispielsweise führen Sie den Simulator auf dem iPhone 6s unter iOS 9.2 wie folgt aus:

    aemm run ios --target "iPhone-6s, 9.2"

Inhalte erstellen

Das Projekt erstellt eine Standardvorlage für HTML-Inhalte, Sie können jedoch weitere Vorlagen zur Liste hinzufügen, indem Sie folgende Schritte ausführen:

  1. Navigieren Sie in Terminal zum erstellten Projektverzeichnis:

     cd <drag and drop the project-name directory>
  2. Erstellen zusätzlicher HTML-Inhalte:

    aemm article create <article-name>

    Dadurch wird ein anderes HTML-Inhaltsverzeichnis mit dem angegebenen Wert für <article-name> im Projektverzeichnis erstellt.

    Die Ordnerstruktur für HTML-Inhalte ist einfach ein Verzeichnis mit „index.html“ und allen erforderlichen Ressourcen (CSS/JS/Bilder usw.), die in „index.html“ angegeben sind. Sie können daher alternativ einfach einen Ordner in <Verzeichnis mit Namen des Projekts>/www/<Benutzerdefinierter Ordner> erstellen und „index.html“ darin einschließen, anstatt das oben aufgeführte Skript auszuführen. Dies kann nützlich sein, wenn Sie HTML-Inhalte bereits an anderer Stelle ausgewählt haben und die Cordova-Erweiterbarkeit testen möchten. Sie können die HTML-Inhalte mit Drag & Drop in den Ordner <Verzeichnis mit Namen des Projekts>/www/ verschieben. Der Simulator erkennt sie dann automatisch.

Cordova-Zusatzmodule zum Projekt hinzufügen (für benutzerdefinierte Cordova-Zusatzmodule)

Diese Befehle sind nur erforderlich, wenn Sie in Ihrer App benutzerdefinierte Cordova-Zusatzmodule verwenden möchten. Wenn Sie in Ihrer App benutzerdefinierte Cordova-Zusatzmodule verwenden, geben Sie mit dem AEM Mobile Developer Tool an, um welche Cordova-Zusatzmodule (benutzerdefinierte, Haupt- und AEM Mobile-spezifische Zusatzmodule) es sich handelt.

  1. Vergewissern Sie sich, dass Node.js mindestens in der Version 6.2.2 installiert wurde.

    Wenn auf Ihrem System die LTE-Version installiert war, wird empfohlen, die aktuelle Version herunterzuladen und zu installieren.

  2. Navigieren Sie in Terminal zum erstellten Projektverzeichnis:

    cd <drag and drop the project-name directory>
  3. Fügen Sie die Cordova-Zusatzmodule (benutzerdefinierte und Hauptzusatzmodule) hinzu, die in Ihrer App verwendet werden sollen:

    aemm plugin add [plugin_0] [plugin_1] [...]

    So aktivieren Sie die Cordova-Zusatzmodule, die in AEM Mobile-Apps standardmäßig verwendet werden:

    aemm plugin add aemm-plugin-application aemm-plugin-user aemm-plugin-context aemm-plugin-device aemm-plugin-inappbrowser aemm-plugin-fullscreen-video aemm-plugin-navto aemm-plugin-html-contract

    So wechseln Sie von der Standardeinstellung „UIWebView“ zu „WKWebView“ (entspricht der Auswahl von „WKWebView“ auf der Registerkarte „Zusatzmodule“):

    aemm plugin add https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine.git#2.0.0

    Hier wird derzeit die Version 2.0.0 verwendet, möglicherweise ist jedoch ein Update verfügbar. Die aktuelle Version finden Sie hier: https://github.com/adobe-marketing-cloud-mobile/cordova-plugin-wkwebview-engine/releases

    So aktivieren Sie alle in AEM Mobile-Apps verwendeten Cordova-Zusatzmodule (nicht gewünschte Module können entfernt werden):

    aemm plugin add cordova-plugin-camera cordova-plugin-compat cordova-plugin-contacts cordova-plugin-device cordova-plugin-device-motion cordova-plugin-device-orientation cordova-plugin-dialogs cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-geolocation cordova-plugin-globalization cordova-plugin-media cordova-plugin-media-capture cordova-plugin-network-information cordova-plugin-vibration

    Mit diesem Befehl können Sie eine Liste der zum Projekt hinzugefügten Zusatzmodule abrufen:

    aemm plugin list

    Verwenden Sie diesen Befehl, um bereits hinzugefügte Zusatzmodule wieder zu entfernen:

    aemm plugin remove [plugin]

    Mit dem Befehl „help“ können Sie zusätzliche Informationen abrufen:

    aemm plugin help

Benutzerdefinierte App (für benutzerdefinierte Cordova-Zusatzmodule) erstellen

Diese Befehle sind nur erforderlich, wenn Sie in Ihrer App benutzerdefinierte Cordova-Zusatzmodule verwenden möchten.  

Bei iOS-Apps: Bearbeiten Sie die IPA-Datei, die Sie aus dem Abschnitt „Apps“ des On-Demand-Portals heruntergeladen haben.

Bei Android-Apps: Erstellen Sie eine App-Shell (APK-Datei) und laden Sie sie in das On-Demand-Portal hoch, wenn Sie die App erstellen.

Hinweis: Einstellungen, die Sie beim Erstellen der App im Abschnitt „Zusatzmodule“ vorgenommen haben, werden ignoriert und mit den Einstellungen aus dem AEM Mobile Developer Tool überschrieben.

Hinweis:

Der Befehl „aemm“ basiert auf dem Befehl „cordova“. Viele Befehle werden daher an cordova-lib weitergegeben. Möglicherweise erhalten Sie Fehlermeldungen, in denen empfohlen wird, den Befehl „cordova“ auszuführen. In den meisten Fällen sollten Sie den Befehl cordova zunächst durch den Befehl aemm ersetzen und dann die empfohlene Aktion ausführen.

  1. (iOS) Konfigurieren Sie die iOS-Umgebung so, dass Xcode ein nicht signiertes Framework erstellen kann.

    sudo aemm platform install ios
    aemm platform add ios
  2. Navigieren Sie zum erstellten Projektverzeichnis und fügen Sie die gewünschten Cordova-Zusatzmodule hinzu, wie im vorigen Abschnitt beschrieben.

  3. Erstellen Sie die Cordova-Struktur (iOS) bzw. die App-Shell (Android).

    aemm build [platform]

    Beispiel für iOS:

    aemm build ios --device --release

    Wenn Sie den Parameter --device anhängen, wird die App für iOS-Geräte statt für den Simulator erstellt.

    Durch Hinzufügen des Parameters --release wird eine Release-Version statt der standardmäßigen Debug-Version erstellt.

    Beispiel für Android:

    aemm build android --release

    Hinweis:

    Wenn die App nicht erstellt werden kann, wird empfohlen, NodeJS zu deinstallieren und die aktuelle Version von NodeJS zu installieren (Einzelheiten finden Sie auf der NodeJS-Website). Führen Sie außerdem die Befehle sudo npm uninstall -g aemm und sudo npm install -g aemm aus.

    Beheben der Fehlermeldung zur Codesignatur

    Wenn Sie Xcode aktualisiert haben, erhalten Sie möglicherweise folgende Fehlermeldung: „Error: CODE_SIGNING_REQUIRED must be set to NO in order to build for device. You can resolve this by running 'aemm platform install ios'.“

    Wenn dieses Problem auftritt, führen Sie als Workaround folgenden Befehl in Terminal aus:

     

    sudo /usr/libexec/PlistBuddy -c "Set DefaultProperties:CODE_SIGNING_REQUIRED NO" "$(xcode-select -p)/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/SDKSettings.plist"

    Dieser Workaround muss bei jeder Aktualisierung von Xcode ausgeführt werden.

  4. (iOS) Verpacken Sie die IPA-Datei.

    aemm package ios --device <drag and drop .ipa file>

    Beispiel:

    aemm package ios --device /Users/jdoe/Downloads/coffee_2062.ipa
  5. Führen Sie eine der folgenden Aktionen aus:

    • (iOS) Signieren Sie die geänderte IPA-Datei.
    • (Android) Laden Sie die im On-Demand-Portal erstellte APK-App-Shell hoch. Erstellen Sie die APK-Datei, laden Sie sie herunter und signieren Sie sie.

    Weitere Informationen über diesen Arbeitsablauf finden Sie im vorigen Abschnitt in diesem Artikel über das Erstellen von Apps mit benutzerdefinierten Cordova-Zusatzmodulen.

Testen von benutzerdefinierten Cordova-Zusatzmodulen im Simulator

Führen Sie die folgenden Befehle aus:

aemm build ios
aemm package ios
aemm run ios

Lassen Sie den Parameter --device weg, um den Befehl an den Simulator zu richten. Mit dem Befehl aemm package ios verpacken Sie die benutzerdefinierten Zusatzmodule in den Simulator-Build. Um den ursprünglichen Simulator-Build wiederherzustellen, führen Sie erneut den Befehl aemm app install ios aus.

Remote-Debuggen

Im Simulator können Sie HTML-Inhalte wie in einem modernen Browser remote überprüfen. Diese Funktion ermöglicht es Ihnen, Inhalte über das DOM-Element anzuzeigen und zu ändern, über die Konsole generierte Fehler zu suchen, JavaScript-/jQuery-Befehlen direkt einzugeben und vieles mehr. Weitere Informationen finden Sie in den folgenden Ressourcen:

Inhaltspakete erstellen

Die HTML-Inhalte im Projektverzeichnis befinden sich auch in der erforderlichen Struktur für die Generierung der Inhaltsdatei für das AEM Mobile-On-Demand-Dienste-Portal. Sie können alle HTML-Inhalte innerhalb des Projektverzeichnisses auswählen und per Drag & Drop im AEM Mobile Packager ablegen.

Weitere Informationen finden Sie unter Erstellen von HTML-Artikeln für AEM Mobile.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie