1.6.3 Externe DAM-App erstellen und bereitstellen
1.6.3.1 Herunterladen von Beispiel-App-Dateien
Navigieren Sie zu https://github.com/woutervangeluwe/genstudio-external-dam-app. Klicken Sie auf Code und wählen Sie dann ZIP herunterladen.
Entpacken Sie die ZIP-Datei auf Ihrem Desktop.
1.6.3.2 Konfigurieren der Adobe Developer-Befehlszeilenschnittstelle
Klicken Sie mit der rechten Maustaste auf den Ordner genstudio-external-dam-app und wählen Sie Neues Terminal im Ordner.
Sie sollten das dann sehen. Geben Sie den aio login ein. Dieser Befehl wird an Ihren Browser weitergeleitet und erwartet, dass Sie sich anmelden.
Nach erfolgreicher Anmeldung sollten Sie diese im Browser sehen.
Der Browser leitet dann zurück zum Terminal-Fenster. Sie sollten eine Meldung mit dem „Anmeldung erfolgreich und ein langes Token sehen, das vom Browser zurückgegeben wird.
Der nächste Schritt besteht darin, die Instanz und das Adobe IO-Projekt zu konfigurieren, die Sie für die externe DAM-App verwenden werden.
Dazu müssen Sie eine Datei aus dem zuvor konfigurierten Adobe IO-Projekt herunterladen.
Wechseln Sie zu https://developer.adobe.com/console/home und öffnen Sie das zuvor erstellte Projekt mit dem Namen --aepUserLdap-- GSPeM EXT. Öffnen Sie den Produktions Arbeitsbereich.
Klicken Sie Alle herunterladen. Dadurch wird eine JSON-Datei heruntergeladen.
Kopieren Sie die JSON Datei aus dem „Downloads“ in das Stammverzeichnis der externen DAM-App.
Zurück zum Terminal-Fenster. Geben Sie den aio app use XXX-YYY-Production.json ein.
Sobald der Befehl ausgeführt wurde, wird Ihre externe DAM-App mit dem zuvor erstellten Adobe IO-Projekt mit App Builder verbunden.
Installieren 1.6.3.3 GenStudio Extensibility SDK
Als Nächstes müssen Sie die GenStudio Extensibility SDK installieren. Weitere Informationen zur SDK finden Sie hier: https://github.com/adobe/genstudio-extensibility-sdk.
Um SDK zu installieren, führen Sie diesen Befehl im Terminal-Fenster aus:
npm install @adobe/genstudio-extensibility-sdk
Nach einigen Minuten wird die SDK installiert.
1.6.3.4 Überprüfen der externen DAM-App in Visual Studio Code
Öffnen Sie Visual Studio Code. Klicken Sie Öffnen…, um einen Ordner zu öffnen.
Wählen Sie den Ordner genstudio-external-dam-app-main aus, der die zuvor heruntergeladene App enthält. Klicken Sie auf Öffnen.
Klicken Sie, um die Datei .env zu öffnen.
Die Datei .env wurde vom aio app use erstellt, den Sie im vorherigen Schritt ausgeführt haben. Sie enthält die Informationen, die zum Herstellen einer Verbindung zu Ihrem Adobe IO-Projekt mit App Builder erforderlich sind.
Sie müssen jetzt die folgenden Details zur Datei .env hinzufügen, damit die externe DAM-App eine Verbindung zu dem zuvor erstellten AWS S3-Bucket herstellen kann.
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=
AWS_BUCKET_NAME=
Die AWS_ACCESS_KEY_ID und AWS_SECRET_ACCESS_KEY waren verfügbar, nachdem der IAM-Benutzer in der vorherigen Übung erstellt wurde. Sie wurden gebeten, sie aufzuschreiben. Sie können jetzt die Werte kopieren.
Das Feld AWS_REGION kann aus der AWS S3-Startansicht neben Ihrem -Behälternamen übernommen werden. In diesem Beispiel lautet die Region us-west-2.
Das Feld AWS_BUCKET_NAME sollte --aepUserLdap---gspem-dam sein.
Mit diesen Informationen können Sie die Werte der einzelnen Variablen aktualisieren.
AWS_ACCESS_KEY_ID=XXX
AWS_SECRET_ACCESS_KEY=YYY
AWS_REGION=us-west-2
AWS_BUCKET_NAME=--aepUserLdap---gspem-dam
Sie sollten diesen Text jetzt in die .env-Datei einfügen. Vergessen Sie nicht, Ihre Änderungen zu speichern.
Gehen Sie dann zurück zu Ihrem Terminal-Fenster. Führen Sie diesen Befehl aus:
export $(grep -v '^#' .env | xargs)
Schließlich müssen Sie die Beschriftung ändern, die in GenStudio for Performance Marketing angezeigt wird, damit Sie Ihre externe DAM-App von anderen Integrationen unterscheiden können. Öffnen Sie dazu die Datei Constants.ts die Sie finden können, indem Sie im Explorer nach "/genstudiopem > web-src > src“.
Zeile 14 muss geändert werden in
export const extensionLabel: string = "--aepUserLdap-- - External S3 DAM";
Vergessen Sie nicht, Ihre Änderungen zu speichern.
1.6.3.5 Ausführen einer externen DAM-App
Führen Sie im Terminal-Fenster den Befehl aio app run aus. Dies sollte dann nach 1-2 Minuten angezeigt werden.
aio app run zum ersten Mal ausführen, werden Sie möglicherweise zum Browser weitergeleitet, um ein neues Zertifikat zu akzeptieren. Akzeptieren Sie in diesem Fall das Zertifikat und Sie können mit den folgenden Schritten fortfahren.
Sie haben jetzt bestätigt, dass Ihre App ausgeführt wird. Der nächste Schritt besteht darin, sie bereitzustellen.
Drücken Sie zunächst STRG+C, um die Ausführung der App zu stoppen. Geben Sie dann den aio app deploy ein. Mit diesem Befehl wird der Code für Adobe IO bereitgestellt.
Daher erhalten Sie eine ähnliche URL für den Zugriff auf Ihr bereitgestelltes Programm:
https://133309-201burgundyguan.adobeio-static.net/index.html
Zu Testzwecken können Sie diese URL jetzt als Abfragezeichenfolgenparameter verwenden, indem Sie ?ext= als Präfix zur obigen URL hinzufügen. Dies führt zu diesem Abfragezeichenfolgen-Parameter:
?ext=https://133309-201burgundyguan.adobeio-static.net/index.html
Navigieren Sie zu https://experience.adobe.com/genstudio/create.
Fügen Sie als Nächstes den Abfragezeichenfolgenparameter unmittelbar vor dem # hinzu. Ihre neue URL sollte wie folgt aussehen:
https://experience.adobe.com/?ext=https://133309-201burgundyguan.adobeio-static.net/index.html#/@experienceplatform/genstudio/create
Die Seite wird normal geladen. Klicken Sie auf Banner, um mit der Erstellung eines neuen Banners zu beginnen.
Wählen Sie eine Vorlage aus und klicken Sie auf Verwenden.
Klicken Sie Aus Inhalt auswählen.
Anschließend sollten Sie in der Lage sein, Ihr externes DAM auszuwählen, das --aepUserLdap-- - External S3 DAM aus der Dropdown-Liste benannt werden sollte.
Sie sollten das dann sehen. Wählen Sie das Bild neon_rabbit_banner.jpg aus und klicken Sie auf Verwenden.
Sie haben jetzt ein Bild aus Ihrem externen DAM ausgewählt, das in einem S3-Bucket ausgeführt wird. Wenn Sie das Bild ausgewählt haben, können Sie jetzt dem normalen Workflow folgen, wie in der Übung 1.3.3.4 Erstellen und Genehmigen der Meta-Anzeige beschrieben.
Wenn Sie Änderungen am Code auf Ihrem lokalen Computer vornehmen, müssen Sie Ihre App erneut bereitstellen. Verwenden Sie bei der erneuten Bereitstellung diesen Terminal-Befehl:
aio app deploy --force-build --force-deploy
Ihre App kann jetzt veröffentlicht werden.
Nächste Schritte
Gehen Sie zu App privat veröffentlichen
Zurück zu GenStudio for Performance Marketing - Erweiterbarkeit
Zurück zu Alle Module