2.2 Einführung in Project Firefly

Ziele

  • Verstehen Sie Project Firefly.
  • Erfahren Sie, wie Sie ein Beispielprojekt mit Project Firefly einrichten.

Voraussetzungen

Bevor Sie mit dieser Übung beginnen, stellen Sie sicher, dass Sie NodeJS und Adobe I/O CLI auf Ihrem Computer installiert und eingerichtet haben. Weitere Informationen finden Sie unter Übung 22.1 - Einrichten der Umgebung .

2.2.1 Persönliches Projekt einrichten

Für die ersten Schritte mit Project Firefly verwenden wir die Adobe I/O-Konsole, um unser persönliches Projekt einzurichten.

Melden Sie sich mit Ihrer Adobe ID bei Adobe Developer Console an.

Wenn Sie mit einem neuen Assistenten Willkommen bei der neuen Adobe Developer Console willkommen sind, klicken Sie auf Überspringen oder klicken Sie auf Weiter , um ihn schrittweise durchzugehen.

Willkommensassistent

Stellen Sie sicher, dass Sie oben rechts die richtige Organisation auswählen: --envName--.

Organisation

Klicken Sie auf Projekt aus Vorlage erstellen.

Wählen Sie im Assistenten-Bildschirm Vorlagen durchsuchen die Option Project Firefly.

Template Firefly

Geben Sie im Assistenten-Bildschirm Vorlagenprojekt einrichten die folgenden Details ein:

Template1

  • Projekttitel: [ldapname] Realtime Dashboard for EXP News wobei Sie [ldapname] durch Ihren eigenen LDAP-Namen der Adobe ersetzen, z. B. rmaur Realtime Dashboard for EXP News.
  • App name: [ldapname]EXPNews wobei Sie [ldapname] durch Ihren eigenen LDAP-Namen der Adobe ersetzen, z. B. rmaurEXPNews.
  • Stellen Sie sicher, dass Laufzeitumgebung mit jedem Arbeitsbereich ausgewählt ist.

Klicken Sie auf + Arbeitsbereich hinzufügen , um einen weiteren Arbeitsbereich hinzuzufügen.

Geben Sie die folgenden Details für den Arbeitsbereich an:

  • Workspace name: Development.

  • Workspace-Beschreibung: Development workspace for EXP News RT Dashboard.

Template2

Klicken Sie auf Speichern , um den neuen Arbeitsbereich zu speichern.

Klicken Sie auf Speichern , um Ihr Projekt zu speichern.

Ihr Projekt wird erstellt und nach einiger Zeit wird es im Übersichtsbildschirm angezeigt.

Übersicht

Klicken Sie in der Kachel Entwicklung auf Entwicklung , um weitere Details zur spezifischen Laufzeitumgebung anzuzeigen, die für Ihre Projekt-Firefly-Anwendung erstellt wurde.

OverviewDevelopment

Sie können die als Teil der Anwendung erstellte Laufzeitnamespace-Umgebung sehen. im Beispiel ist es 133309-rmaurexpnews-development

Jetzt haben wir die Erstellung unserer Adobe I/O Runtime-Umgebung abgeschlossen, die wir für unsere Project Firefly-Anwendung benötigen.

22.2.2 Anmelden über Adobe I/O CLI

Um ein Beispiel für eine Projekt-Firefly-Anwendung zu erstellen, müssen wir die Befehlszeile entweder unter Windows oder Mac OS verwenden. Die folgenden Screenshots basieren auf Mac OS X, aber die ausgeführten Befehle sind identisch.

Öffnen Sie Terminal unter Mac OS oder eine Eingabeaufforderung unter Windows.

Navigieren Sie zu der Stelle auf Ihrem Laufwerk, an der Sie Ihr erstes Projekt erstellen möchten. z. B. Entwicklung

% cd Development

Anmelden mit

% aio login

TerminalLogin

Es sollte ein Browser-Fenster geöffnet werden, in dem Sie aufgefordert werden, sich mit Ihrer Adobe ID anzumelden. Wenn das Fenster nicht automatisch geöffnet wurde, können Sie auch die in Ihrem Browser gedruckte URL kopieren, um sich anzumelden.

% aio login
Visit this url to log in: 
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

Nachdem Sie sich angemeldet haben, können Sie das Browser-Fenster schließen und zu Ihrem Terminal zurückkehren. Im Terminal wird eine Zeichenfolge gedruckt. Dies ist Ihr Benutzer-Token. Sie wird automatisch in Ihrer Konfiguration gespeichert, sodass Project Firefly das Token verwenden kann, um mit Adobe Developer Console zu sprechen.

TerminalLoggedIn

2.2.3 Bootstrap einer neuen App über die Adobe I/O CLI

Beginnen Sie in Terminal unter Mac OS oder an einer Eingabeaufforderung unter Windows mit der Erstellung einer neuen App, die Sie [ldap]HelloWorld nennen.

z. B.:

% aio app init rmaurHelloWorld

Sie erhalten einige Fragen dazu, wie Ihre App per Bootstrapping und Konfiguration bereitgestellt werden soll:

  • Wählen Sie Organisation aus. Um schnell nach der Organisation --envName-- zu suchen, geben Sie die ersten Zeichen hinter Wählen Sie Organisation aus. Wählen Sie dann --envName-- aus der resultierenden Liste aus.

Schritt 1

  • Wählen Sie Projekt aus. Um schnell nach Ihrem Projekt zu suchen, geben Sie Ihren LDAP-Namen ein, wählen Sie dann das Projekt aus, das Sie in Übung 22.2.1 erstellt haben. Suchen Sie beispielsweise nach rmaur und wählen Sie dann rmaur Realtime Dashboard for EXP News aus der resultierenden Liste aus.

Schritt 1

Wählen Sie Arbeitsbereich aus. Wählen Sie den Arbeitsbereich Development aus, den Sie im Rahmen von Übung 22.2.1 erstellt haben.

Schritt 1

Welche Adobe I/O App-Funktionen möchten Sie für dieses Projekt aktivieren?

Wählen Sie die einzuschließenden Komponenten aus. Wählen Sie Actions: Deploy Runtime actions aus.

Schritt 1

Welche Beispielaktionen möchten Sie erstellen?

Wählen Sie den Typ der zu erzeugenden Aktionen aus. Wählen Sie Generic aus.

Schritt 1

Welchen UI-Typ möchten Sie Ihrem Projekt hinzufügen?

Wählen Sie die zu erzeugende Vorlage aus. Wählen Sie React Spectrum 3 aus. Dies bedeutet, dass wir Adobe Spectrum, unser Designsystem, verwenden werden, um die App zu erstellen.

Schritt 1

Wir sind im Begriff, eine neue Beispielaktion zu erstellen, die zeigt, wie auf eine externe API zugegriffen werden kann.

Wie möchten Sie diese Aktion benennen?. Drücken Sie die Eingabetaste , um die Standardeinstellung (generic) zu akzeptieren.

Schritt 1

Wir sind im Begriff, eine neue Beispielaktion zu erstellen, die Nachrichten im Cloud-Ereignisformat erstellt und in Adobe I/O-Ereignissen veröffentlicht.

Wie möchten Sie diese Aktion benennen?. Drücken Sie die Eingabetaste , um die Standardeinstellung (publish-events) zu akzeptieren.

Schritt 1

Der Assistent generiert jetzt den erforderlichen Code für Ihre Anwendung und sollte den erfolgreichen Abschluss mit ✔ App initialization finished! anzeigen.

Schritt 1

Wechseln Sie zum neu erstellten App-Verzeichnis [ladp]HelloWorld und listen Sie die generierten Dateien auf.
% cd rmaurHelloWorld
% ls (Mac OS) oder
> dir (Windows)

Schritt 1

21.2.4 App erstellen und bereitstellen

Es gibt zahlreiche Möglichkeiten, die Anwendung zu erstellen/zu testen/bereitzustellen. Für diese Aktivierung halten wir sie jedoch einfach und stellen die App sofort mithilfe der Experience Cloud Shell bereit.

Erstellen und Bereitstellen der App:

Vergewissern Sie sich in Terminal unter Mac OS oder an der Eingabeaufforderung unter Windows, dass Sie sich in dem Ordner befinden, der als Teil Ihrer App erstellt wurde ([ldap]rmaurHelloWorld), und geben Sie Folgendes ein:
% aio app deploy

Schritt 1

Die Ausgabe kann in Ihrem Fall und mit den Änderungen in Project Firefly unterschiedlich sein. Es ist jedoch wichtig, dass Sie zuerst die Meldung Build success sehen, Ihre App bereit zur Bereitstellung ist?, die nach einer Weile mit der endgültigen Nachricht Gut gemacht gefolgt wird, Ihre App ist jetzt online ??.

Nachdem Ihre App bereitgestellt wurde, verfügen Sie über zwei URLs, um Ihre endgültige App anzuzeigen.

Kopieren Sie die URL, die die Experience Cloud-Shell verwendet, wie durch So zeigen Sie Ihre bereitgestellte Anwendung in der Experience Cloud-Shell an: …. Die URL verwendet Ihren Workspace-Namen für die Adobe I/O-Entwicklung als eindeutige Kennung.

Öffnen Sie einen neuen Inkognito-Browser und navigieren Sie zu https://experience.adobe.com. Wählen Sie nach der Anmeldung die richtige Organisation oben rechts aus: --envName--.

Fügen Sie die URL aus Schritt 2 in den Browser ein. Wenn alles in Ordnung ist, wird der folgende Bildschirm angezeigt.

Schritt 2

Wählen Sie Ihre App-Aktionen in der linken Leiste aus. Führen Sie im die Backend-Aktionen für die Anwendung aus.

  • Wählen Sie Generic aus der Dropdown-Liste Aktionen (erforderlich) aus.
  • Klicken Sie auf Aufrufen
  • Die Ergebnisse dieses Aufrufs werden im Feld results angezeigt. Sie können sie vergrößern, um weitere Inhalte anzuzeigen.

Schritt 3

Sie haben Ihre erste Projekt-Firefly-App erfolgreich bereitgestellt und diese Übung abgeschlossen.

Nächster Schritt: 22.3 Erstellen Sie Ihr EXP News-Echtzeit-Dashboard

Zurück zu Modul 22

Zu allen Modulen zurückkehren

Auf dieser Seite