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- Codeas als IDE
  • Ein Arbeitsverzeichnis von ~/Code/wknd-app
  • Ausführen des AEM SDK als Autorendienst auf http://localhost:4502
  • Ausführen des AEM SDK mit dem lokalen admin-Konto mit dem Kennwort admin
  • Ausführen des SPA auf http://localhost:3000

Starten des AEM SDK-Schnellstarts

Laden Sie das AEM SDK Quickstart auf Port 4502 herunter und installieren Sie es mit den Standardanmeldeinformationen admin/admin.

  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 auf http://localhost:4502. Melden Sie sich mit den folgenden Anmeldedaten an:

  • Benutzername: admin
  • Passwort: admin

Herunterladen und Installieren des WKND Site-Pakets

Dieses Tutorial weist eine Abhängigkeit vom WKND 0.3.0±Projekt (für Inhalte) auf.

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

Herunterladen und Installieren von WKND App SPA Packages

Für eine schnelle Einrichtung werden AEM Pakete bereitgestellt, die die endgültige AEM und den Inhalt des Tutorials enthalten.

  1. Download
  2. Download
  3. Melden Sie sich unter http://localhost:4502/crx/packmgr mit den Anmeldeinformationen admin im Package Manager AEM SDK an.
  4. ____ Laden Sie die in Schritt 1 wknd-app.all.x.x.x.zip heruntergeladenen Dateien hoch.
  5. Tippen Sie auf die Schaltfläche Installieren für den Eintrag wknd-app.all.x.x.x.zip
  6. ____ Laden Sie die in Schritt 2 wknd-app.ui.content.sample.x.x.x.zip heruntergeladenen Dateien hoch.
  7. Tippen Sie auf die Schaltfläche Installieren 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 beim Ausführen von npm install Fehler auftreten, 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 die SPA unter http://localhost:3000 ausgeführt wird.

Inhaltserstellung in AEM SPA Editor

Bevor Sie Inhalte erstellen, ordnen Sie die Browser-Fenster so an, dass sich die AEM-Autoreninstanz (http://localhost:4502) auf der linken Seite befindet und die Remote-SPA (http://localhost:3000) auf der rechten Seite ausgeführt wird. Auf diese Weise können Sie sehen, wie Änderungen an AEM-bezogenen Inhalten sofort in der SPA widergespiegelt werden.

  1. Melden Sie sich bei AEM SDK-Autorendienst als admin an.
  2. Navigieren Sie zu Sites > WKND-App > us > en
  3. Bearbeiten Sie WKND-App-Startseite
  4. Zum Modus Bearbeiten wechseln

Erstellen der festen Komponente der Startansicht

  1. Tippen Sie auf den Text WKND Adventures , um die feste Titelkomponente zu aktivieren (fest in der SPA-Startseite codiert).
  2. Tippen Sie auf das Symbol Schraubenschlüssel in der Aktionsleiste der Titelkomponente
  3. Ändert den Inhalt der Titelkomponente und speichert ihn
  4. Aktualisieren Sie den SPA, der auf http://localhost:3000 ausgeführt wird, und sehen Sie, dass die Änderungen übernommen wurden.

Container-Komponente der Home-Ansicht erstellen

  1. Beim Bearbeiten der WKND-App-Startseite
  2. Erweitern Sie die Seitenleiste SPA Editor (links).
  3. Tippen Sie auf die Symbole Komponenten
  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. Aktualisieren Sie den SPA, der auf http://localhost:3000 ausgeführt wird, und sehen Sie, dass die Änderungen übernommen wurden.

Container-Komponente auf einer dynamischen Route erstellen

  1. Wechseln Sie im SPA Editor zum Modus Vorschau .
  2. Tippen Sie auf die Karte Bali Surf Camp und navigieren Sie zur dynamischen Route
  3. Fügen Sie Komponenten der Container-Komponente hinzu, ändern Sie sie oder entfernen Sie sie aus der Überschrift Itinerary .
  4. Aktualisieren Sie den SPA, der auf http://localhost:3000 ausgeführt wird, und sehen Sie, dass die Änderungen übernommen wurden.

Neue AEM unter der WKND-App-Startseite > Adventure must haben einen AEM Seitennamen, der dem entsprechenden Inhaltsfragment des Abenteuers 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