Schnelleinstellungen

Die schnelle Einrichtung ist eine schnelle Anleitung, die veranschaulicht, wie die WKND-App und als Remote-SPA installiert und ausgeführt und mit AEM SPA Editor erstellt wird.

Die schnelle Einrichtung bringt Sie direkt zum Endstatus dieses Tutorials.

Ein Video mit einer Anleitung zur schnellen Einrichtung

Voraussetzungen

Dieses Tutorial erfordert Folgendes:

Dieses Tutorial setzt voraus, dass:

  • Microsoft® Visual Studio Code als IDE
  • Ein Arbeitsverzeichnis von ~/Code/wknd-app
  • Ausführen des AEM SDK als Autorendienst in http://localhost:4502
  • Ausführen des AEM SDK mit dem lokalen admin Konto mit Kennwort admin
  • Ausführen des SPA auf http://localhost:3000

Starten des AEM SDK-Schnellstarts

Laden Sie den AEM SDK-Schnellstart auf Port 4502 herunter und installieren Sie ihn, standardmäßig admin/admin Anmeldedaten.

  1. Laden Sie das neueste AEM SDK herunter

  2. Entpacken Sie das AEM SDK in ~/aem-sdk

  3. Ausführen der AEM SDK-Schnellstart-JAR

    $ java -jar aem-sdk-quickstart-xxx.jar
    
    # Provide `admin` as the admin user's password
    

AEM SDK startet und startet automatisch am http://localhost:4502. Melden Sie sich mit den folgenden Anmeldedaten an:

  • Benutzername: admin
  • Passwort: admin

Herunterladen und Installieren des WKND Site-Pakets

Dieses Tutorial hängt von WKND 2.1.0+ Projekt (für Inhalt).

  1. Laden Sie die neueste Version von herunter. aem-guides-wknd.all.x.x.x.zip
  2. Melden Sie sich beim Package Manager AEM SDK an unter http://localhost:4502/crx/packmgr mit dem admin Anmeldedaten.
  3. Hochladen die aem-guides-wknd.all.x.x.x.zip heruntergeladen in Schritt 1
  4. Tippen Sie auf Installieren Schaltfläche für den Eintrag aem-guides-wknd.all-x.x.x.zip

Herunterladen und Installieren von WKND App SPA Packages

Um eine schnelle Einrichtung durchzuführen, werden hier AEM Pakete bereitgestellt, die die endgültige AEM und den Inhalt des Tutorials enthalten.

  1. Download
  2. Download
  3. Melden Sie sich beim Package Manager AEM SDK an unter http://localhost:4502/crx/packmgr mit dem admin Anmeldedaten.
  4. Hochladen die wknd-app.all.x.x.x.zip heruntergeladen in Schritt 1
  5. Tippen Sie auf Installieren Schaltfläche für den Eintrag wknd-app.all.x.x.x.zip
  6. Hochladen die wknd-app.ui.content.sample.x.x.x.zip heruntergeladen in Schritt 2
  7. Tippen Sie auf Installieren Schaltfläche für den Eintrag wknd-app.ui.content.sample.x.x.x.zip

WKND-App-Quelle herunterladen

Laden Sie den Quellcode der WKND-App von Github.com herunter und wechseln Sie die Verzweigung, die die Änderungen an der in diesem Tutorial durchgeführten SPA enthält.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Starten Sie die SPA.

Installieren Sie im Stammverzeichnis des Projekts die npm-Abhängigkeiten der SPA Projekte und führen Sie die Anwendung aus.

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

Wenn bei der Ausführung Fehler auftreten npm install Führen Sie die folgenden Schritte aus:

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

Stellen Sie sicher, dass der SPA ausgeführt wird unter http://localhost:3000.

Inhaltserstellung in AEM SPA Editor

Bevor Sie Inhalte erstellen, ordnen Sie Ihre Browserfenster wie AEM Author (http://localhost:4502) auf der linken Seite und die Remote-SPA (http://localhost:3000) läuft auf der rechten Seite. Auf diese Weise können Sie sehen, wie Änderungen an AEM-bezogenen Inhalten sofort in der SPA widergespiegelt werden.

  1. Anmelden bei AEM SDK-Autorendienst as admin
  2. Navigieren Sie zu Sites > WKND App > us > en
  3. Bearbeiten WKND-App-Startseite
  4. Wechseln zu Bearbeiten mode

Erstellen der festen Komponente der Startansicht

  1. Tippen Sie auf den Text WKND Adventures zur Aktivierung der fixen Titelkomponente (fest in der SPA-Startansicht codiert)
  2. Tippen Sie auf Schraubenschlüssel Symbol in der Aktionsleiste der Titel-Komponente
  3. Ändert den Inhalt der Titelkomponente und speichert ihn
  4. SPA aktualisieren, auf dem ausgeführt wird http://localhost:3000 und sehen, dass die Änderungen

Container-Komponente der Home-Ansicht erstellen

  1. Während Sie die WKND-App-Startseite
  2. Erweitern Sie die Seitenleiste SPA Editors (links)
  3. Tippen Sie auf Komponenten icons
  4. Hinzufügen, Ändern oder Entfernen von Komponenten aus der Container-Komponente, die sich unter dem WKND-Logo und über der fixierten Titelkomponente befindet
  5. SPA aktualisieren, auf dem ausgeführt wird http://localhost:3000 und sehen, dass die Änderungen

Container-Komponente auf einer dynamischen Route erstellen

  1. Wechseln zu Vorschau Modus im SPA Editor
  2. Tippen Sie auf die Bali Surf Camp Karte und navigieren Sie zur dynamischen Route
  3. Hinzufügen, Ändern oder Entfernen von Komponenten aus der Container-Komponente, die sich über dem Route heading
  4. SPA aktualisieren, auf dem ausgeführt wird http://localhost:3000 und sehen, dass die Änderungen

Neue AEM unter WKND-App-Startseite > Abenteuer must haben einen AEM Seitennamen, der dem Namen des entsprechenden Abenteuers Inhaltsfragment entspricht. Dies liegt daran, dass die SPA Route zu AEM Seitenzuordnung auf dem letzten Segment der Route basiert, nämlich dem Namen des Inhaltsfragments.

Herzlichen Glückwunsch!

Sie haben einfach einen schnellen Überblick darüber erhalten, wie AEM SPA Editor Ihre SPA mit kontrollierten, bearbeitbaren Bereichen verbessern kann! Wenn Sie daran interessiert sind - sehen Sie sich den Rest des Tutorials an, aber stellen Sie sicher, dass Sie neu beginnen, da Ihre lokale Entwicklungsumgebung bei dieser schnellen Einrichtung jetzt den Endstatus des Tutorials aufweist!

Auf dieser Seite