Ist Ihre Hybrid-App für AEM Mobile bereit?

HINWEIS

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen

Sie haben also Ihre Hybrid PhoneGap- oder Cordova-App in AEM importiert, was? Wahrscheinlich möchten Sie Ihrer App authentifizierbaren Inhalt hinzufügen. Für diese Aufgabe benötigen Sie ein allgemeines Verständnis der Struktur einer AEM App. Eine App in AEM wird in der Regel in zwei Teile unterteilt. Die 'Shell' und 'content'. Die Shell umfasst die statischen Teile Ihrer App. wie die PhoneGap-Konfigurationsdateien, das App-Framework und die Navigationssteuerelemente. Der Inhalt des von Ihnen importierten Archivs wird als Teil der Shell gespeichert. Im Kontext dieses Dokuments ist die Shell der nicht AEM verfasste Inhalt Ihrer Hybrid PhoneGap-App, die vom App-Entwickler erstellt wurde.

Inhalt bezieht sich auf die Komponenten, Vorlagen und erstellten Seiten, die in AEM erstellt wurden, die vom AEM Developer erstellt wurden. Inhalte werden entweder als Entwicklerinhalt oder als verfasster Inhalt kategorisiert. Komponenten, Entwürfe und Seitenvorlagen gelten als Dev-Content, da sie von einem Entwickler erstellt wurden. Autoreninhalt sind Seiten, die mit den Komponenten und Vorlagen erstellt wurden. Diese werden normalerweise von einem Designer oder Vermarkter durchgeführt.

Das Hinzufügen von erstellten AEM zu einer Hybrid-App erfordert die Koordination zwischen dem App-Entwickler und dem AEM Entwickler. Überall in der App, wo Sie verfasste Inhalte hinzufügen möchten, muss der App-Entwickler diese Seiten in einer Struktur organisieren, die in AEM überlagert werden kann. Der App-Entwickler muss in der Lage sein, dem AEM-Entwickler die Pfade bereitzustellen, zu denen die AEM erstellten Inhalte hinzugefügt werden sollen, und dann eine Platzhalterseite in der Hybrid-App bereitzustellen, die ersetzt wird, nachdem der AEM Entwickler den Seiteninhalt erstellt hat.

Um die Erläuterung leichter zu befolgen, verwenden wir das AEM Marketing Cloud: AEM Mobile Hybrid-Referenz zur Erläuterung der Konzepte. Die Hybrid-Referenz-App besteht aus einer Begrüßungsseite mit einem Seitenmenü.

chlimage_1-76

In diesem Beispiel erstellen wir die Begrüßungsseite des Antrags. Sehen Sie sich die Quelle https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75 an. Der App-Entwickler hat eine Begrüßungsseite definiert und eine Vorlage für die Seite bereitgestellt, die von der App gerendert wird. Hier müssen sich Entwickler und AEM Entwickler der App abstimmen. Der Pfad zur Vorlage der Begrüßungsseite in der Hybrid-Referenzanwendung ist als "content/mobileapps/hybrid-reference-app/en/welcome.template.html"definiert. Dieser Pfad ist äußerst wichtig, da der AEM-Entwickler seine Begrüßungsseite im AEM Repository unter demselben Pfad erstellen wird.

chlimage_1-77

Es ist wichtig, dass die Hybrid-App und die AEM erstellten Inhalte denselben Pfad verwenden, da wir darauf angewiesen sind, Inhalte mithilfe der Inhaltssynchronisierung zu überlagern, um der Hybrid-App neue Seiten hinzuzufügen. Wenn die Hybrid-App im Rahmen des Importvorgangs in AEM importiert wird, werden Inhaltssynchronisierungskonfigurationen eingerichtet.

chlimage_1-78

Wenn Sie "Quelle herunterladen"aus dem App-Dashboard ausführen, werden diese ContentSync-Skripten ausgeführt, um ein Archiv Ihrer Hybrid-App zu erstellen.

chlimage_1-79

ContentSync ruft zunächst die Shell der App ab, in der der gesamte von der App entwickelte Inhalt der Hybrid-App gespeichert wird, und ruft dann den Inhalt der App ab. Wenn es nun Seiten in der 'Shell' gibt, die denselben Pfad wie in 'content' haben, werden die Seiten unter 'shell' durch die Seiten unter 'content' ersetzt. Anders ausgedrückt: Wenn Sie im Beispiel für eine Hybrid-Referenz-App eine Seite in AEM erstellen, die beim Ausführen von ContentSync denselben Pfad wie "content/mobileapps/hybrid-reference-app/en/welcome.template.html"hat, wird die Seite, die Teil der Hybrid-Referenz-App war, mit dem Inhalt, der sich an diesem Speicherort AEM befindet, überlagert. Die Überlagerung wird von ContentSync übernommen, damit die Updates für die App mit AEM erstellten Inhalten nahtlos aussehen und nicht neu erstellt werden müssen. Wenn Sie die App ausführen, wird die Begrüßungsseite wie folgt angezeigt:

chlimage_1-80

Auf dieser Seite