Show Menu
THEMEN×

Erstellen und Bearbeiten von Apps mit der Apps-Konsole

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
Der Entwicklungsprozess für mobile Anwendungen in AEM erkennt, dass Benutzer unterschiedlicher Expertise zur Entwicklung von mobilen Anwendungen beitragen. Die folgende Prozesszuordnung veranschaulicht die allgemeine Reihenfolge, in der Inhaltsersteller und Anwendungsentwickler Aufgaben durchführen.
Informationen zur Durchführung der Aufgaben von Marketer werden auf dieser Seite angezeigt. Weitere Informationen zu den Developer-Aufgaben finden Sie unter Erstellen von PhoneGap-Anwendungen.

Die Struktur von Mobilanwendungen

AEM Mobile bietet den Phonegap-App-Entwurf zum Erstellen von Mobilanwendungen. Der Entwurf definiert die Struktur der von Ihnen erstellten Anwendungen. Anträge umfassen die folgenden Elemente:
  • Die Stammseite.
  • Die Sprachvarianten der Anwendung.
  • Die Startseite der Sprachvariante.

Der Stamm einer PhoneGap-App

Die Stammseite der mobilen Anwendungen, die Sie in AEM erstellen, wird in der Apps-Konsole angezeigt.
Die Stammeseite wird unter der Eigenschaft Zielpfad der Anwendung gespeichert, die beim Erstellen der Anwendung angegeben wurde (der Standardpfad lautet /content/phonegap/apps). Der Seitenname ist die Name-Eigenschaft der Anwendung. Die Standard-URL der Stammseite der Site myphonegapapp lautet beispielsweise http://localhost:4502/content/phonegap/apps/myphonegapapp.html .

Die Sprachvariation einer PhoneGap-App

Die ersten untergeordneten Seiten der Stammseite sind die Sprachvarianten der Anwendung. Der Name jeder Seite ist die Sprache, für die die Anwendung erstellt wird. Beispielsweise ist Englisch der Name der englischen Variante des Antrags.
Hinweis: Der standardmäßige PhoneGap-Blueprint erstellt nur eine englische Anwendung. Ihr Entwickler kann den Entwurf so ändern, dass er weitere Sprachvarianten erstellen kann.
Die Sprachseite dient zwei Zwecken:
  • Der Seiteninhalt ist die Seite, auf der die Sprachvariation der Anwendung angezeigt wird.
  • Die Seiteneigenschaften steuern verschiedene Designaspekte der Anwendung, z. B. die URL zum Anfordern von Inhaltsaktualisierungen und Informationen zum Herstellen einer Verbindung mit dem Cloud-Build und der Adobe Analytics Services-Integration.

Die Startseite

Die Startseite oder die Seite "index.html"einer Sprachvariante einer Anwendung wird beim Öffnen der Anwendung angezeigt. Die Startseite bietet den Benutzern ein Menü mit Links zu verschiedenen Seiten der Anwendung. Mit dem Absatzsystem können Sie Komponenten zur Seite hinzufügen, um Inhalte zu erstellen.

Erstellen einer Mobilanwendung

Mobile Anwendungen basieren auf einem Entwurf, der eine Seitenstruktur und Eigenschaften definiert. Sie können die folgenden Anwendungseigenschaften konfigurieren:
  • Titel: Der Titel der Anwendung.
  • Zielpfad: Der Speicherort im Repository, in dem die Anwendung gespeichert wird. Lassen Sie die Standardeinstellung, um einen Pfad basierend auf dem App-Namen zu erstellen.
  • Name: Der Standardwert ist der Wert der Title-Eigenschaft, bei der Leerzeichen entfernt werden. Der Name wird in CQ verwendet, um auf die Anwendung zu verweisen, z. B. auf den Repository-Knoten, der die Anwendung darstellt.
  • Beschreibung: Eine Beschreibung des Antrags.
  • Server-URL: Die URL, die OTA-Inhalte (Over-the-Air) bereitstellt, wird der Anwendung aktualisiert. Der Standardwert ist die Veröffentlichungsserver-URL der Instanz, die zum Erstellen einer Anwendung verwendet wird (vom Externalisierungs-Dienst genommen). Beachten Sie, dass es sich hierbei nicht um einen Autor, sondern um eine Instanz im Veröffentlichungsserver handeln muss. Hierfür ist eine Authentifizierung erforderlich.
Sie können auch eine Bilddatei zur Verwendung als Anwendungsminiaturansicht angeben, die PhoneGap Build-Konfiguration auswählen und die zu verwendende Mobile App-Analysekonfiguration auswählen. Dieses Bild wird nur als Miniaturansicht für Ihre Mobilanwendung in der App-Konsole in Experience Manager verwendet.
Zusätzliche (und optionale) Registerkarten sind vorhanden, um den Cloud-Dienst zu erstellen und das Adobe Mobile Services SDK-Plug-In in Ihre App zu integrieren.
  • Erstellen: Klicken Sie auf Konfigurationen verwalten und richten Sie hier Ihren Build-Dienst build.phonegap.com ein. Dann können Sie aus der Dropdownliste den neu erstellten PhoneGap Build Cloud-Dienst auswählen.
  • Analytics: Klicken Sie auf Konfigurationen verwalten und richten Sie Ihren Adobe Mobile Services SDK -Cloud-Dienst ein. Anschließend können Sie aus der Dropdownliste den neu erstellten Mobile Service auswählen, der in Ihre mobile App integriert werden soll.
Entwickler können das AEM PhoneGap Starter Kit verwenden, um Apps zu erstellen und sie der Konsole hinzuzufügen.
Im folgenden Verfahren wird die Touch-Benutzeroberfläche zum Erstellen einer mobilen Anwendung verwendet.
  1. Klicken Sie in der Leiste auf Apps.
  2. Klicken oder tippen Sie auf das Symbol Erstellen.
  3. (Optional) Geben Sie auf der Registerkarte "Erweitert"eine Beschreibung für die Anwendung ein und ändern Sie bei Bedarf die Server-URL.
  4. (Optional) Wenn Sie die Anwendung mit PhoneGap Build kompilieren, wählen Sie auf der Registerkarte "Erstellen"die zu verwendende Konfiguration aus.
    Um eine PhoneGap-Buildkonfiguration zu erstellen, klicken Sie auf Konfigurationen verwalten.
  5. (Optional) Wenn Sie SiteCatalyst zur Verfolgung der Aktivität von Anwendungen verwenden, wählen Sie auf der Registerkarte "Analytics"die zu verwendende Konfiguration aus.
    Um eine Mobile App-Konfiguration zu erstellen, klicken Sie auf Konfigurationen verwalten.
  6. (Optional) Um ein Anwendungssymbol bereitzustellen, klicken Sie auf die Schaltfläche "Durchsuchen", wählen Sie die Bilddatei im Dateisystem aus und klicken Sie auf "Öffnen".
  7. Klicken Sie auf Erstellen.

Eigenschaften einer Mobilanwendung ändern

Nachdem Sie eine Mobilanwendung erstellt haben, können Sie die Eigenschaften ändern.

Titel, Beschreibung und Symbol ändern

  1. Klicken Sie in der Leiste auf oder tippen Sie auf Apps.
  2. Wählen Sie die zu konfigurierende Ansicht aus und klicken Sie auf das Symbol Seiteneigenschaften.
  3. Um die Eigenschaftswerte zu ändern, klicken Sie auf das Symbol Bearbeiten oder tippen Sie darauf.
  4. Konfigurieren Sie die Eigenschaften "Einfach"und "Erweitert"und klicken Sie dann auf das Symbol "Fertig".

Konfigurieren einer Sprachvariation der Anwendung

  1. Klicken Sie in der Leiste auf oder tippen Sie auf Apps.
  2. Klicken Sie auf , um einen Drilldown für die mobile Anwendung durchzuführen, die Sie in der Admin-Konsole von Apps bearbeiten möchten. Wählen Sie die zu konfigurierende Sprachversion der Ansicht aus und klicken Sie auf das Symbol Anwendungseigenschaften.
  3. Um die Eigenschaftswerte zu ändern, klicken Sie auf das Symbol Bearbeiten oder tippen Sie darauf.
  4. Konfigurieren Sie die Eigenschaften auf den Registerkarten "Einfach", "Erweitert", "Erstellen"und "Analytics"und klicken Sie dann auf das Symbol "Fertig".

Erstellen des Inhalts einer mobilen Anwendung

Nachdem Sie die Mobilanwendung erstellt haben, fügen Sie Inhalte hinzu, die als Benutzeroberfläche der Anwendung verwendet werden.
  1. Klicken Sie in der Leiste auf oder tippen Sie auf Apps.
  2. Klicken Sie auf oder tippen Sie auf die Anwendung und klicken Sie dann auf oder tippen Sie auf Englisch.
  3. Bearbeiten Sie die Startseite oder fügen Sie nach Bedarf untergeordnete Seiten hinzu.

Verschieben von Inhalten in mobile Anwendungen

Der Inhaltssynchronisierungscache in der AEM-Veröffentlichungsinstanz wird als Repository für Inhalte für mobile Anwendungen verwendet:
  • Inhalte im Inhaltssynchronisierungs-Cache werden in der Anwendung enthalten, wenn Entwickler die Anwendung kompilieren.
  • Inhalte im Cache stehen für installierte Mobilanwendungen zur Aktualisierung des Anwendungsinhalts zur Verfügung.
Mobile Anwendungen enthalten einen Befehl "Updates", mit dem aktualisierte Anwendungsinhalte heruntergeladen und installiert werden. Wenn eine Anwendungsinstanz eine Aktualisierungsanforderung sendet, bestimmt die Inhaltssynchronisierung, welche Inhalte sich seit der letzten Aktualisierung oder Installation der Anwendung geändert haben, und stellt den neuen Inhalt bereit.
Um aktualisierte Inhalte für Anwendungen verfügbar zu machen, aktualisieren Sie den Content Sync-Cache. Wenn Sie den Cache zum ersten Mal aktualisieren, werden alle veröffentlichten Inhalte hinzugefügt. Bei nachfolgenden Aktualisierungen werden nur die veröffentlichten Inhalte hinzugefügt, die sich seit der letzten Aktualisierung geändert haben.
Bei der Inhaltssynchronisierung wird auch verfolgt, wann die Aktualisierungen stattfinden. Anhand dieser Informationen kann die Inhaltssynchronisierung bestimmen, welches Cache-Update an eine Mobilanwendung gesendet werden soll.
Führen Sie das folgende Verfahren für die Instanz durch, auf der Sie den Cache aktualisieren möchten. Wenn Ihre Anwendung beispielsweise Updates von der Veröffentlichungsinstanz anfordert, führen Sie das Verfahren für die Veröffentlichungsinstanz aus.
  1. Klicken Sie in der Leiste auf oder tippen Sie auf Apps und dann auf Ihre Anwendung.
  2. Wählen Sie die Begrüßungsseite aus und klicken Sie dann auf das Symbol "Cache aktualisieren"oder tippen Sie darauf.

Verwenden von App-Vorlagen

Diese Funktion ist mit Apps 6.1 Feature Pack 2 verfügbar und bietet eine einfache Möglichkeit, vorhandene App-Vorlagen für die Erstellung neuer Apps in AEM zu nutzen.
Was ist eine App-Vorlage? Stellen Sie sich dies als eine Sammlung von Seitenvorlagen und Komponenten vor, die eine Grundlage oder Grundlage einer App darstellen. Wenn Sie eine neue App erstellen, die auf der Vorlage einer anderen App basiert, erhalten Sie eine App mit einem Startpunkt, der der App entspricht, aus der sie erstellt wurde.
Sie müssen über eine vorhandene mobile App-Vorlage verfügen (oder eine App mit einer App-Vorlage installiert haben), um diese Funktion nutzen zu können.
Das neueste AEM Apps 6.1-Musterpaket enthält eine aktualisierte Version der Geometrixx-App mit einer App-Vorlage. Alternativ können Sie das StarterKit installieren, das auch eine Vorlage bereitstellt.
Schritte zum Erstellen einer neuen App basierend auf einer App-Vorlage:
  1. Vergewissern Sie sich, dass das neueste AEM Apps 6.1 Feature Pack und Referenzbeispiele installiert sind
  2. Klicken Sie in der linken Leiste auf Apps.
  1. Klicken Sie oben auf die Schaltfläche + Erstellen und wählen Sie App erstellen.
  2. Nachdem Sie die Liste der App-Vorlagen angezeigt haben, wählen Sie eine aus:
  1. Klicken Sie auf Weiter.
  2. Geben Sie eine App-ID und einen Titel ein, Sie sollten jedoch auch einen Namen und eine Beschreibung angeben.
    1. Darüber hinaus können Sie ein PNG-Format (unterstütztes PhoneGap-Symbolformat) als Symbol bereitstellen, indem Sie in AEM-Assets navigieren.
    2. Denken Sie daran, dass Sie alle diese Felder bearbeiten können, nachdem die App in der Kachel App verwalten erstellt wurde. Mit Ausnahme der App-ID können Sie die App-ID nach dem Festlegen nicht mehr ändern.
  1. Klicken Sie auf die Schaltfläche "Erstellen". Es stehen Ihnen zwei Optionen zur Verfügung: "Fertig"(Zurück zur App-Ansicht) oder "App verwalten"(Öffnen des App-Dashboards).
  2. Nach der Erstellung sollte die neue App im App-Katalog aufgeführt werden:
  1. Klicken Sie auf die App, um sie zu öffnen. Sie haben erfolgreich eine neue App erstellt, die auf der Vorlage einer vorhandenen App basiert.
Wenn Sie das Geometrixx Outdoors-Referenz-App-Paket aus AEM deinstallieren und eine App basierend auf der Vorlage erstellt haben, funktioniert diese App nicht mehr. Die Geometrixx Outdoors-App kann entfernt werden. Die App-Vorlage muss jedoch erhalten bleiben, wenn sie von anderen mobilen Anwendungen verwendet wird.

Die Beispielanwendung Geometrixx Outdoors

Die Geometrixx Outdoors-App ist eine Beispielanwendung für PhoneGap, die die Funktionen des standardmäßigen PhoneGap-Anwendungsblueprints und der mobilen Musterkomponenten demonstriert.
Um die Anwendung zu öffnen, klicken Sie in der Leiste auf Mobile Applications und wählen Sie dann Geometrixx Outdoors-App.

Allgemeine Seitenfunktionen - Geometrixx Mobile-App

Jede Seite der mobilen App umfasst die folgenden Funktionen:
  • Eine Zurück-Schaltfläche zum Zurückkehren zur übergeordneten Seite. Beachten Sie, dass die Schaltfläche "Zurück"nicht auf der Startseite angezeigt wird.
  • Eine erweiterte Leiste, die ein Menü mit Befehlen und Links Angebot:
    • Öffnen Sie die Seite "Speicherorte".
    • Öffnen Sie den Warenkorb.
    • Melden Sie sich an.
    • Aktualisieren Sie die Anwendung.
  • Das Absatzsystem zum Hinzufügen von Komponenten und Erstellen von Inhalten.

Startseite - Geometrixx-Mobil-App

Der Inhalt der Startseite besteht aus den folgenden Navigationswerkzeugen:
  • Eine Menükomponente, die Links zu den Unterseiten "Gear", "Reviews", "News"und "Über uns"enthält.
  • Eine Swipe Carousel-Komponente, die die untergeordneten Seiten darstellt.

Zahnradseite - Geometrixx-Mobil-App

Die Seite "Gear"bietet Benutzern Zugriff auf Produktseiten. Eine Komponente der Menu-Liste bietet Zugriff auf die untergeordneten Seiten der Zahnradseite. Die untergeordneten Seiten sind Kategorien von Produkten, die die Website enthält.
  • Saison
  • Bekleidung
  • Geschlecht
  • Aktivität
Jede Seite der Kategorie verwendet dieselbe Inhaltsstruktur wie die Seite "Gear". Das Karussell bietet Zugriff auf untergeordnete Seiten, die Unterkategorien von Produkten sind. Die Seiten der Unterkategorie enthalten Produktauflistungen, die Links zu Produktseiten enthalten.

Produktseite - Geometrixx Mobile-App

Die Seite "Produkte"und ihre Hierarchie untergeordneter Seiten implementieren ein Klassifizierungssystem für Produktseiten. Die untersten Seiten in jeder Zweigstelle der Hierarchie sind Produktseiten, die eine ng-Produktkomponente enthalten.
Die Seite "Produkte"steht Anwendungsbenutzern nicht zur Verfügung. Die Zahnradseite bietet Zugriff auf jede Produktseite.

Reviews Page - Geometrixx Mobile App

Enthält eine Zurück-Schaltfläche. Mit dem Absatzsystem können Sie Komponenten hinzufügen.
Bei Verwendung der Anwendung ist die Seite "Reviews"im Karussell auf der englischen Seite verfügbar.

News-Seite - Geometrixx-Mobil-App

Enthält eine Zurück-Schaltfläche. Mit dem Absatzsystem können Sie Komponenten hinzufügen.
Wenn Sie die Anwendung verwenden, ist die Seite Nachrichten im Karussell auf der englischen Seite verfügbar.

Die Seite "Info"- Geometrixx-Mobil-App

Die Seite "Über uns"enthält mehrere Komponenten für zwei Spalten. Jede Spalte enthält entweder eine Bild- oder eine Text-Komponente. Die Komponenten können bearbeitet werden, und das Absatzsystem ermöglicht es Ihnen, Komponenten hinzuzufügen.
Wenn Sie die Anwendung verwenden, ist die Info-Seite im Karussell auf der englischen Seite verfügbar.

Die Seite "Speicherorte"- Geometrixx-Mobil-App

Die Seite "Speicherorte"enthält eine Komponente "Speicherorte".
Wenn Sie die Anwendung verwenden, ist die Seite "Speicherorte"in der Menü-Liste auf der englischen Seite verfügbar.

Beispiele für mobile Komponenten

Beim Authoring der Seiten einer mobilen Anwendung stehen in Sidekick sofort mehrere Komponenten zur Verfügung. Die Komponenten gehören zur Gruppe der PhoneGap-Komponenten.

Bild

Hinzufügen Sie ein Bild in Ihren Anwendungsinhalt.

Text

Hinzufügen Rich-Text in Ihren Anwendungsinhalt.

Filialen

Die Komponente "Speicherorte"bietet Benutzern Werkzeuge zum Suchen von Geschäftsfeldern:
  • Suchen
  • Listen von Positionen, die in der Nähe oder in der Entfernung zu den GPS-Koordinaten des Geräts liegen.
Die Komponente erfordert, dass das Repository Informationen zum Speicherort für jeden Store enthält. Beispielspeicherorte werden unter dem Knoten /etc/commerce/locations/adobe installiert.

Zeile mit zwei Spalten

Ermöglicht das Hinzufügen von Komponenten nebeneinander zu einer Seite.