Erste Schritte - Entwickler-Tutorial

In diesem Tutorial lernen Sie alles über ein neues Adobe Experience Manager(AEM)-Projekt. In zehn bis zwanzig Minuten haben Sie Ihre eigene Site erstellt und können eigene Inhalte, Stile und neue Bausteine erstellen, in der Vorschau ansehen und veröffentlichen.

Voraussetzungen:

In diesem Tutorial werden macOS, Chrome und Visual Studio Code als Entwicklungsumgebung verwendet, und die Screenshots und Anweisungen spiegeln diese Einrichtung wider. Sie können ein anderes Betriebssystem, einen anderen Browser und einen anderen Code-Editor verwenden, aber die angezeigte Benutzeroberfläche und die erforderlichen Schritte können entsprechend variieren.

Erste Schritte mit der vordefinierten Repository-Vorlage

Die schnellste und einfachste Möglichkeit für den Einstieg in die Best Practices für AEM besteht darin, Ihr Repository mit dem Textbaustein-GitHub-Repository als Vorlage zu erstellen.

https://github.com/adobe/aem-boilerplate

Klicken Sie auf die Schaltfläche Use this template, wählen Sie Create a new repository aus und wählen Sie die Benutzerorganisation aus, der das Repository gehört

Es wird empfohlen, das Repository auf public festzulegen.

Der einzige verbleibende Schritt in GitHub besteht darin, die AEM Code Sync GitHub App über diesen Link in Ihrem Repository zu installieren: https://github.com/apps/aem-code-sync/installations/new

Stellen Sie in den Repository access der AEM Code Sync App sicher, dass Sie Only select Repositories (nicht All Repositories) auswählen. Wählen Sie dann das neu erstellte Repository aus und klicken Sie auf Save.

Hinweis: Wenn Sie GitHub Enterprise mit IP-Filterung verwenden, können Sie der Zulassungsliste die folgende IP hinzufügen: 3.227.118.73

Herzlichen Glückwunsch! Es gibt eine neue Website, die auf https://<branch>--<repo>--<owner>.aem.page/ ausgeführt wird. Im obigen Beispiel ist dies https://main–mysite–aemtutorial.aem.page/

Verknüpfen Ihrer eigenen Inhaltsquelle mit Google Drive

In Ihrem Formular des Textbaustein-GitHub-Repositorys verweist die Site auf eine vorhandene Inhaltsquelle in Google Drive. Siehe diesen Ordner für einige Beispielinhalte.

Dieser Inhalt ist schreibgeschützt, kann jedoch in Ihren Google Drive-Ordner kopiert werden, um als Ausgangspunkt zu dienen.

Um eigene Inhalte zu erstellen, erstellen Sie einen Ordner in Ihrem eigenen Google Drive und geben Sie den Ordner für den Adobe Experience Manager-Benutzer frei (helix@adobe.com).

Eine gute Möglichkeit, mit der Erstellung eigener Inhalte zu beginnen, besteht darin, index, nav und footer aus dem Beispielinhalt zu kopieren und sich mit der Inhaltsstruktur vertraut zu machen. nav und footer werden in einem Projekt nicht häufig geändert und haben eine besondere Struktur. Die meisten Dateien in einem Projekt ähneln index mehr.

Öffnen Sie die Dateien und kopieren Sie den gesamten Inhalt in die entsprechenden Dateien in Ihrem eigenen Google Drive. Sie können die Dateien auch über Download All herunterladen oder einzelne Dateien herunterladen. Denken Sie jedoch daran, die heruntergeladenen .docx-Dateien wieder in native Google Docs zu konvertieren, wenn Sie sie in Ihren Ordner in Google Drive hochladen.

Nachdem Sie nun über Ihre Inhalte verfügen, müssen Sie diese Inhalte mit Ihrem GitHub-Repository verbinden. Ändern Sie dazu den Verweis in fstab.yaml in Ihrem GitHub-Repository in den Ordner, den Sie gerade freigegeben haben.
Kopieren Sie die Ordner-URL aus Ihrem Google-Laufwerk nach fstab.yaml.

Beachten Sie, dass nach dieser Änderung "404 not found " angezeigt wird, da Ihr Inhalt noch nicht in der Vorschau angezeigt wurde. Im nächsten Abschnitt erfahren Sie, wie Sie mit der Bearbeitung und Vorschau Ihrer Inhalte beginnen. Wenn Sie über index kopiert haben, nav und footer, sind alle drei separate Dokumente mit ihren eigenen Vorschau- und Veröffentlichungszyklen. Stellen Sie daher sicher, dass Sie bei Bedarf alle Dokumente in der Vorschau anzeigen (und veröffentlichen).

Übergeben Sie Ihre Änderungen und Sie haben Ihre eigene Inhaltsquelle mit Ihrer Website verbunden.

Vorschau und Veröffentlichen Ihres Inhalts

Nach Abschluss des letzten Schritts ist Ihre neue Inhaltsquelle nicht leer, aber es wurden keine Inhalte in die preview oder live Stadien hochgestuft, was bedeutet, dass Ihre Website 404 s bereitstellt.

Um eine Vorschau von Inhalten anzuzeigen, muss ein Autor die Sidekick Chrome-Erweiterung installieren. Suchen Sie die Erweiterung Chrome im Chrome Web Store.

Vergessen Sie nicht, die Erweiterung nach dem Hinzufügen zu Chrome anzuheften, damit Sie sie leichter finden können.

Um die Chrome-Erweiterung einzurichten, klicken Sie in Ihrem zuvor freigegebenen Google Drive-Ordner auf das Erweiterungssymbol in der Browser-Symbolleiste und wählen Sie Add this project aus.

Sobald die Erweiterung installiert und Ihr Projekt hinzugefügt wurde, können Sie eine Vorschau anzeigen und Ihre Inhalte von Ihrem Google Drive aus veröffentlichen.

Wählen Sie alle drei Dokumente aus und aktivieren Sie die AEM Sidekick, indem Sie auf die angeheftete Erweiterung klicken. Eine neue Symbolleiste wird angezeigt. Durch Klicken auf die Schaltflächen preview oder publish wird der entsprechende Vorgang Trigger.

Öffnen Sie das index und nehmen Sie einige Änderungen vor. Aktivieren Sie die Sidekick, indem Sie auf die angeheftete Erweiterung und dann auf die Schaltfläche Preview klicken. Dadurch wird der Vorschauvorgang Trigger und eine neue Registerkarte mit der Vorschaudarstellung des Inhalts geöffnet.

Entwickeln von Stilen und Funktionen

Um mit der Entwicklung zu beginnen, ist es am einfachsten, die AEM-Befehlszeilenschnittstelle (Command Line Interface, CLI) zu installieren und Ihr Repository lokal mithilfe der folgenden Schritte zu klonen.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Wechseln Sie von dort in Ihren Projektordner und starten Sie Ihre lokale Entwicklungsumgebung wie folgt.

cd <repo>
aem up

Dadurch wird http://localhost:3000/ geöffnet, und Sie können Änderungen vornehmen.
Am besten beginnen Sie mit dem Ordner blocks , in dem sich der größte Teil des Stils und des Codes für ein Projekt befindet. Nehmen Sie einfach eine Änderung an einem .css oder .js vor. Sie sollten die Änderungen sofort in Ihrem Browser sehen.

Sobald Sie bereit sind, Ihre Änderungen per Push zu übertragen, verwenden Sie einfach Git, um Ihren Code hinzuzufügen, zu übertragen und an Ihre Vorschau- (https://<branch>--<repo>--<owner>.aem.page/) und Produktions- (https://<branch>--<repo>--<owner>.aem.live/)-Sites zu übertragen.

Das war's, du hast es geschafft! Glückwunsch, Ihre erste Site ist betriebsbereit. Wenn du Hilfe im Tutorial brauchst, du unserem Discord-Kanal beitreten oder ​ kontaktiere uns **.**