Erste Schritte mit AEM Sites - WKND-Tutorial

Willkommen bei einem mehrteiligen Tutorial, das für Entwickler konzipiert wurde, die neu in Adobe Experience Manager (AEM) sind. Dieses Tutorial durchläuft die Implementierung einer AEM Website für eine fiktive Lifestyle-Marke der WKND. Das Lernprogramm behandelt grundlegende Themen wie Projekteinrichtung, Kernkomponenten, bearbeitbare Vorlagen, clientseitige Bibliotheken und Komponentenentwicklung mit Adobe Experience Manager Sites.

Überblick

Ziel dieses mehrteiligen Lernprogramms ist es, Entwicklern beizubringen, wie eine Website mit den neuesten Standards und Technologien in Adobe Experience Manager (AEM) implementiert wird. Nach Abschluss dieses Lernprogramms sollte ein Entwickler die Grundlagen der Plattform und die Kenntnisse über gängige Designmuster in AEM verstehen.

Das Tutorial wurde für die Verwendung mit AEM als Cloud Service entwickelt und ist rückwärtskompatibel mit AEM 6.5.5.0+ und AEM 6.4.8.1+. Die Site wird wie folgt implementiert:

Schätzen Sie sich 1-2 Stunden, um die einzelnen Teile des Tutorials zu durchlaufen.

Lokale Entwicklungsumgebung

Eine Umgebung zur lokalen Entwicklung ist erforderlich, um dieses Lernprogramm abzuschließen. Screenshots und Videos werden mit dem AEM als Cloud Service-SDK erfasst, das auf einer Mac OS-Umgebung mit Visual Studio-Code als IDE ausgeführt wird. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.

Erforderliche Software

Folgendes sollte lokal installiert werden:

HINWEIS

Neu bei AEM as a Cloud Service? Sehen Sie sich das folgende Handbuch an, um eine lokale Entwicklungs-Umgebung mit dem AEM als Cloud Service-SDK einzurichten.

Neu zu AEM 6.5? Sehen Sie sich das folgende Handbuch an, um eine lokale Entwicklungs-Umgebung einzurichten.

Über die Schulung

Das WKND ist eine fiktive Online-Zeitschrift und ein Blog, die sich mit Nachtleben, Aktivitäten und Ereignisse in verschiedenen internationalen Städten beschäftigt.

Adobe XD UI Kit

Um dieses Tutorial einem realen Szenario näher zu bringen, haben talentierte UX-Designer der Adobe die Mocker für die Site mit Adobe XD erstellt. Im Laufe des Tutorials werden verschiedene Teile der Entwürfe in eine vollständig autorfähige AEM Site implementiert. Besonderer Dank an Lorenzo Buosi und Kilian Amenola, die das schöne Design für die WKND-Site erstellt haben.

Laden Sie die XD UI-Kits herunter:

Der Name WKND ist passend, weil wir erwarten, dass ein Entwickler den besseren Teil eines wochenendes nimmt, um das Tutorial abzuschließen.

GitHub

Der gesamte Code für das Projekt finden Sie auf Github im AEM Guide Repo:

GitHub: WKND-Sites-Projekt

Darüber hinaus hat jeder Teil des Tutorials seine eigene Filiale in GitHub. Ein Benutzer kann das Lernprogramm an einem beliebigen Punkt beginnen, indem er einfach die Verzweigung ausprobiert, die dem vorherigen Teil entspricht.

HINWEIS

Wenn Sie mit der vorherigen Version dieses Tutorials gearbeitet haben, können Sie weiterhin die Lösungspakete und Code auf GitHub finden.

Referenzsite

Eine fertige Version der WKND-Site ist auch als Referenz verfügbar: https://wknd.site/

Das Tutorial behandelt die wichtigsten Entwicklungsfähigkeiten, die für einen AEM-Entwickler erforderlich sind, erstellt aber nicht die gesamte Site von Ende zu Ende. Die fertige Referenz-Website ist eine weitere großartige Ressource, um mehr von AEM vordefinierten Funktionen zu erforschen und zu sehen.

Um den neuesten Code zu testen, bevor Sie in das Tutorial springen, laden Sie die neueste Version von GitHub herunter und installieren Sie sie.

Powered by Adobe Stock

Viele der Bilder auf der WKND-Referenz-Website stammen von Adobe Stock und sind Material von Drittanbietern, wie in den zusätzlichen Begriffen für das Demoelement unter https://www.adobe.com/legal/terms.html definiert. Wenn Sie ein Adobe Stock-Bild für andere Zwecke als die Anzeige dieser Demo-Website verwenden möchten, z. B. für die Darstellung auf einer Website oder in Marketingmaterialien, können Sie eine Lizenz auf Adobe Stock erwerben.

Mit Adobe Stock haben Sie Zugang zu über 140 Millionen hochwertigen, gebührenfreien Bildern, darunter Fotos, Grafiken, Videos und Vorlagen, um Ihre Kreativprojekte in Gang zu setzen.

Nächste Schritte

Worauf wartest du? Beginn Sie das Lernprogramm, indem Sie zum Kapitel Projektualisierung navigieren und lernen, wie ein neues Adobe Experience Manager-Projekt mit dem AEM-Projektarchiv erstellt wird.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free