Erstellen und Bearbeiten von Apps mit der Apps-Konsole

Der Entwicklungsprozess für AEM mobile Anwendungen erkennt, dass Benutzer mit unterschiedlichem Fachwissen 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 Marketing-Aufgaben finden Sie auf dieser Seite. Weitere Informationen zu den Developer-Aufgaben finden Sie unter Erstellen von PhoneGap-Anwendungen.

Die Struktur von Mobilanwendungen

AEM Mobile stellt den Phonegap App-Entwurf zum Erstellen von Mobilanwendungen bereit. 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 Stammeseite 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 der Anwendung.
• Server-URL: Die URL, die für die Anwendung OTA-Inhaltsaktualisierungen (Over-the-Air) bereitstellt. 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 angeben, die als Anwendungsminiaturansicht verwendet werden soll, die zu verwendende PhoneGap Build auswählen und die zu verwendende Mobile App Analytics-Konfiguration 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 den Cloud-Dienst Adobe Mobile Services SDK ein. Anschließend können Sie aus der Dropdownliste den neu erstellten Mobile Service auswählen, der in Ihre mobile App integriert werden soll.

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 mithilfe von PhoneGap Build kompilieren 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 Anwendungskonfiguration verwenden, wählen Sie auf der Registerkarte "Analytics"die zu verwendende Aktivität 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.

Ändern Sie Titel, Beschreibung und Symbol

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 Mobilanwendung

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 Mobilanwendungen

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 in 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 App 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 aktuelle AEM 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-Symbol (unterstütztes PhoneGap-Symbolformat) als Symbol bereitstellen, indem Sie AEM Assets durchsuchen.
   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.

Die Beispielanwendung Geometrixx Outdoors

Geometrixx Outdoors App ist eine Beispielanwendung für PhoneGap, die die Funktionen des standardmäßigen PhoneGap-Anwendungsblueprints und der mobilen Beispielkomponenten demonstriert.

Um die Anwendung zu öffnen, klicken Sie in der Leiste auf "Mobilanwendungen"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 Mobile 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 Mobile 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 Mobile 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.

Info-Seite - Geometrixx Mobile 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 Mobile 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.

Beispiel 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.

Swipe-Karussell

Die Komponente "Karussell blättern"ist ein Werkzeug zum Anzeigen und Navigieren auf Seiten der Site. Die Komponente enthält ein Karussell, das die Bilder für die Seiten über einer Liste von Seitenlinks durchläuft. Bearbeiten Sie die Komponente, um die anzuzeigenden Seiten und das Verhalten des Karussells anzugeben.

Beachten Sie, dass Bilder im Karussell für Seiten angezeigt werden, die auf eine bestimmte Weise mit einem Bild verknüpft sind. Wenn Seiten nicht mit Bildern verknüpft sind, wird nur die Liste der Links angezeigt.

Karussell-Eigenschaften, Registerkarte

Verhalten des Karussels konfigurieren:

• Abspielgeschwindigkeit: Die Zeit in Millisekunden, die jedes Bild angezeigt wird, bevor das nächste Bild angezeigt wird.
• Transition: Die Dauer der Animation in Millisekunden für Transitionen.
• Steuerelementstil: Die Art der Steuerelemente, die zum Wechseln zwischen Bildern bereitgestellt werden.

Registerkarte "Eigenschaften"

Geben Sie an, wie die Liste der Seite generiert wird:

• Liste erstellen mit: Die Methode zur Angabe der Seiten, die in das Karussell aufgenommen werden sollen. Siehe Erstellen der Liste "Seite".
• Reihenfolge nach: Wählen Sie eine Seiteneigenschaft zum Sortieren der Liste aus. Wählen Sie beispielsweise "jcr:title"aus, um die Seiten alphabetisch nach Titel zu sortieren.
• Maximal: Die maximale Anzahl der einzuschließenden Seiten. Diese Eigenschaft eignet sich für suchbasierte Methoden zum Erstellen der Liste der Seite.

Erstellen der Liste

Die Komponente "Karussell blättern"stellt die folgenden Werte für die Eigenschaft "Liste erstellen mit"bereit. Das Dialogfeld "Bearbeiten"ändert sich je nach ausgewähltem Wert:

Untergeordnete Seiten

Die Komponente Liste alle untergeordneten Seiten einer bestimmten Seite. Wählen Sie nach Auswahl dieses Wertes die Seite auf der Registerkarte "Untergeordnete Seiten"aus oder geben Sie keinen Wert für die Liste der untergeordneten Elemente der aktuellen Seite an.

Liste fester Werte

Geben Sie eine Liste der Einschlussseiten an. Nachdem Sie diesen Wert ausgewählt haben, konfigurieren Sie die Liste auf der Registerkarte "Feste Liste", die angezeigt wird, wenn Sie "Feste Liste"auswählen:

• Um eine Seite hinzuzufügen, klicken Sie auf Hinzufügen Element und suchen Sie dann nach der Seite.
• Verwenden Sie die Pfeilsymbole nach oben und unten, um die Liste zu verschieben.
• Klicken Sie auf die Schaltfläche "Entfernen", um eine Seite aus der Liste zu entfernen.

Die Eigenschaft "Reihenfolge nach"hat keine Auswirkungen auf die Reihenfolge der festen Listen.

Suchen

Füllen Sie die Liste mit den Ergebnissen einer Suchbegriffsuche. Die Suche wird in den untergeordneten Elementen einer Seite durchgeführt, die Sie angeben:

1. Um die Stammseite der Suche festzulegen, wählen Sie den Seitenpfad mit der Eigenschaft "Beginn in"aus. Geben Sie keinen Pfad für die Suche unterhalb der aktuellen Seite an.
2. Geben Sie in der Eigenschaft Abfrage suchen die Suchbegriffe ein.

Erweiterte Suche

Füllen Sie die Liste mit einer Querybuilder-Abfrage.

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.