22.3 Erstellen Sie Ihr EXP News-Dashboard in Echtzeit

Ziele

• Verstehen Sie, wie Project Firefly ein benutzerdefiniertes Echtzeit-Dashboard bereitstellen kann, das Informationen von AEP anzeigt.
• Erfahren Sie, wie Sie dieses Dashboard erstellen und ausführen.

Voraussetzungen

Vergewissern Sie sich, dass Sie NodeJS und Adobe I/O CLI auf Ihrem Computer installiert und eingerichtet haben, bevor Sie diese Übung Beginn haben. Weitere Informationen finden Sie unter Übung 21.1 - Einrichten Ihrer Umgebung.

22.3.1 Quellcode herunterladen

Der Quellcode für dieses Projekt ist intern auf https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboard verfügbar und wurde von Duy Nguyen vom Adobe I/O-Team entwickelt.
Um jedoch zu vermeiden, dass jeder verstehen muss, wie man Code aus einem github-Repository klont oder herunterlädt, haben wir den Code als ZIP-Datei direkt aus diesem Modul zur Verfügung gestellt. Wenn Sie mit github zufrieden sind, können Sie auch den Code von dort klonen.

So rufen Sie den Quellcode aus diesem Modul ab:

• Laden Sie es von hier herunter.
• Extrahieren Sie die ZIP-Datei an einen Speicherort auf Ihrem Computer.

22.3.2 Echtzeit-Dashboard erstellen

So erstellen Sie die Echtzeit-Dashboard-Firefly-App:

Gehen Sie zu dem Verzeichnis, in dem Sie die ZIP-Datei in Übung 22.3.1 extrahiert haben, z.B. poc-aep-realtime-dashboard-master.

Führen Sie im Ordner npm install aus, um alle erforderlichen Pakete für die Anwendung zu installieren.

Kopieren Sie die Umgebung .env (die alle Konfigurationen für Ihre Adobe I/O-Laufzeitumgebung enthält) aus Ihrem [ldap]HelloWorld-Projekt, das Sie in Übung 22.2 erstellt und bereitgestellt haben.

Beispiel: cp <rmaurHelloWorld directory>/.env . für Mac OS
oder copy <rmaurHellowWorld directory>\.env . für Windows.

Beachten Sie, dass die Umgebung-Datei eine so genannte versteckte Datei ist und Sie die Datei möglicherweise nicht im Finder/Explorer sehen, daher ist es besser, die Datei mit der Befehlszeile zu kopieren.

Sie können die .env-Umgebung mit Ihrem Lieblings-Texteditor oder -Befehl überprüfen. Sie sollte Ihren Adobe I/O-Namensraum und Ihren Authentifizierungscode definieren

Stellen Sie die App mit aio app deploy bereit. Auch hier kann sich die angezeigte Ausgabe von der unten angezeigten Abbildung unterscheiden. Warten Sie jedoch, bis Nun fertig ist, Ihre App ist jetzt online ??.

Ihre finale Dashboard-App ist jetzt unter der URL verfügbar, die als letzte im Ausgabebefehl des Befehls aio app deploy angegeben ist. z. B. https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

• URL kopieren.
• Öffnen Sie das Browserfenster new incognito und melden Sie sich bei https://experience.adobe.com an.
• Stellen Sie sicher, dass Sie sich in der richtigen Organisation befinden (rechts oben): --envName--.
• Fügen Sie die URL ein. Die Dashboard-App wird verfügbar.

Die Project Firefly EXP News Realtime Dashboard App wird noch keine Informationen liefern, da wir ihr noch nicht mitgeteilt haben, woher sie ihre Informationen erhalten soll. Hier wird das vorherige Aktivierungsmodul beim Hochladen der Adobe zum Side Forwarding (Serverseitige Weiterleitung) relevant, so weiter zur nächsten Übung.

Sie haben diese Übung jetzt abgeschlossen.

Nächster Schritt: 22.4 Verbinden Sie die Datenerfassung der EXP-Nachrichten mit Ihrem EXP-News-Echtzeit-Dashboard

Zurück zu Modul 22

Zurück zu allen Modulen