1.7.2 Verwenden Sie Cursor, um Ihr Projekt zu entwickeln

1.7.2.1 Einrichten von Verzeichnis und Tools

Erstellen Sie auf Ihrem Desktop ein neues Verzeichnis mit dem Namen --aepUserLdap---commerce

Klicken Sie mit der rechten Maustaste auf den Ordner und wählen Sie Neues Terminal unter Ordner.

Sie sollten das dann sehen.

Sie müssen jetzt ein vorhandenes GitHub-Repository klonen, das Sie anzeigen können https://github.com/adobe/commerce-integration-starter-kit.

Dieses Repository ist das Integrations-Starter-Kit von Adobe, das Adobe Developer App Builder verwendet, um die Verbindungszuverlässigkeit in Echtzeit zu verbessern und die Time-to-Market für Integrationen zwischen Adobe Commerce und anderen Back-Office-Systemen wie ERPs, CRMs und PIMs zu reduzieren.

Es gibt mehrere Möglichkeiten, dieses Repository zu klonen, in diesem Beispiel wird Terminal verwendet.

Geben Sie den folgenden Befehl in Ihr Terminal-Fenster ein und führen Sie ihn aus.

git clone https://github.com/adobe/commerce-integration-starter-kit

Nach einigen Sekunden sollten Sie dieses Ergebnis sehen.

Als Nächstes sollten Sie zum soeben erstellten Ordner navigieren. Geben Sie den folgenden Befehl ein und führen Sie ihn dann aus.

cd commerce-integration-starter-kit

Sie sollten das dann sehen.

Als Nächstes müssen Sie die Commerce-Erweiterbarkeits-Tools für Cursor einrichten. Geben Sie den folgenden Befehl ein und führen Sie ihn dann aus.

aio commerce extensibility tools-setup

Wählen Sie Aktuelles Verzeichnis aus.

Wählen Sie Cursor.

Wählen Sie npm aus.

Nach ein paar Minuten sollten Sie das hier sehen.

Durch die Installation der Commerce-Erweiterbarkeits-Tools für den Cursor steht nun ein MCP-Server als Teil Ihrer Cursor-Umgebung zur Verfügung. In den nächsten Übungen verwenden Sie diesen MCP-Server, um das App Builder-Projekt zu entwickeln und bereitzustellen.

1.7.2.2 Webhook einrichten

Für diese Übung benötigen Sie einen Webhook, der so konfiguriert werden muss, dass bei der Erstellung einer Bestellung das Auftragsereignis an diesen Webhook gestreamt werden kann. In dieser Übung verwenden Sie einen Beispielendpunkt mit https://pipedream.com/requestbin.

Wechseln Sie zu https://pipedream.com/requestbin, erstellen Sie ein Konto und dann einen Arbeitsbereich. Nachdem der Arbeitsbereich erstellt wurde, sehen Sie etwas Ähnliches.

Klicken Sie Kopieren, um die URL zu kopieren. Sie müssen diese URL in der nächsten Übung angeben. Die URL in diesem Beispiel lautet https://eodts05snjmjz67.m.pipedream.net.

1.7.2.3 App mit Cursor erstellen

Cursor öffnen. Klicken Sie Projekt öffnen.

Navigieren Sie zu dem von Ihnen erstellten Ordner, der --aepUserLdap---commerce benannt werden sollte. Wählen Sie in diesem Ordner den Ordner aus, der commerce-integration-starter-kit heißt. Klicken Sie auf Öffnen.

Sie sollten das dann sehen. Stellen Sie vor dem Fortfahren sicher, dass der Ordner der obersten Ebene, der in Cursor geöffnet ist, commerce-integration-starter-kit ist.

Verwenden Sie den Tastaturbefehl Cmd + Shift + J, um die Cursor-Einstellungen zu öffnen. Sie sollten das dann sehen. Navigieren Sie zu Tools und MCP.

Aktivieren Sie den MCP-Server commerce-extensibility. Klicken Sie anschließend auf das X, um das Fenster zu schließen.

Kopieren Sie die folgende Eingabeaufforderung und fügen Sie sie in den Cursor ein. Klicken Sie dann auf die Schaltfläche Senden.

I would like to build an app that subscribes to order created events and sends them to a configurable URL with basic authentication

Der Cursor beginnt mit dem Denken und der Ausführung. Der Cursor wird Sie einige Male um Bestätigung bitten. Klicken Sie dann auf Ausführen. Dies kann je nach den Überlegungen und Ihren Einstellungen 5 bis 10 Mal passieren.

Nach ein paar Minuten sollten Sie so etwas sehen.

Der nächste Schritt besteht darin, wie vom Cursor angegeben, eine Datei mit dem Namen .env zu erstellen und dort die erforderlichen Variablen anzugeben.

1.7.2.4 Erstellen der Datei .env

Wählen Sie die Datei env.dist aus. Geben Sie den Cmd + C und dann den Cmd + V ein.

Benennen Sie die neu erstellte Datei in .env um.

Als Nächstes müssen Sie die Werte für alle Variablen in der Datei .env angeben.

Hier finden Sie alle erforderlichen Informationen.

Commerce-Endpunkte

Diese Variablen finden Sie unter https://experience.adobe.com. Auf Commerce.

Sie sollten das dann sehen. Klicken Sie auf information-Symbol neben Ihrer ACS-Umgebung, die --aepUserLdap-- - ACCS benannt werden sollte. Kopieren Sie die Werte des REST-Endpunkts und des GraphQL-Endpunkts.

In diesem Beispiel sind dies die Werte, die kopiert werden sollen. Fügen Sie sie neben den folgenden Variablen in die Datei .env in Zeilen 6 und 7 ein.

Sie sollten dies dann in der Datei .env haben.

Adobe I/O-Projektvariablen

Diese Variablen finden Sie unter https://developer.adobe.com/console. Navigieren Sie Projekte und klicken Sie, um das in der vorherigen Übung erstellte Adobe I/O-Projekt zu öffnen, das --aepUserLdap-- Commerce Events benannt werden sollte.

Wechseln Sie zu Produktion.

Wechseln Sie zu OAuth Server-zu-Server. Sie sollten das dann sehen.

Kopieren Sie die Werte der Felder Client-ID, Client-Geheimnis, ID des technischen Kontos, E-Mail-Adresse des technischen Kontos und Organisations-ID und fügen Sie sie neben den folgenden Variablen in die Datei .env in den Zeilen 13-17 ein.

Sie sollten dies dann in der Datei .env haben.

COMMERCE_ADOBE_IO_EVENTS_MERCHANT_ID

Geben Sie für das Feld COMMERCE_ADOBE_IO_EVENTS_MERCHANT_ID= den Wert --aepUserLdap--_commerce_events in Zeile 34 in der Datei .env ein.

Sie sollten dies dann in der Datei .env haben.

Workspace-Konfigurationen

Um diese Variablen abzurufen, gehen Sie zurück zu Ihrem Adobe I/O-Projekt und klicken Sie auf Übersicht über Workspace.

Nachdem Sie zur Übersicht über Workspace gewechselt haben, sollten Sie sich die URL ansehen, die wie folgt aussehen sollte: https://developer.adobe.com/console/projects/133309/4566206088345586770/workspaces/4566206088345619105/details.

Die erste Zahl in diesem Beispiel, 133309, ist der Wert, der für das Feld IO_CONSUMER_ID“ verwendet.
Die zweite Zahl in diesem Beispiel, 4566206088345586770, ist der Wert, der für das Feld IO_PROJECT_ID“ verwendet.
Die dritte Zahl in diesem Beispiel, 4566206088345619105, ist der Wert, der für das Feld IO_WORKSPACE_ID“ verwendet.

Kopieren Sie diese Werte und fügen Sie sie neben den folgenden Variablen in die Datei .env in den Zeilen 42-44 ein.

EVENT_PREFIX

Geben Sie für das Feld EVENT_PREFIX = den Wert --aepUserLdap--_ Zeile 47 in der Datei .env ein.

Sie sollten dies dann in der Datei .env haben.

Webhook

Für das Feld ORDER_WEBHOOK_URL sollten Sie die URL des zuvor in dieser Übung erstellten Webhooks einfügen, der wie folgt aussehen sollte: https://eodts05snjmjz67.m.pipedream.net.

Sie sollten dies dann in der Datei .env haben.

App Builder-Anmeldedaten

Sie sollten die folgenden Variablen in der Datei .env in den Zeilen 54-55 aktualisieren:

Sie können die Werte für diese Variablen abrufen, indem Sie zu Ihrem Adobe I/O-Projekt zurückkehren. Gehen Sie zu Übersicht über Workspace und klicken Sie auf Alle herunterladen.

Eine Datei wie diese wird dann heruntergeladen. Öffnen Sie diese Datei mit einem Texteditor.

Scrollen Sie nach rechts, bis Sie runtime sehen. Anschließend sollte das Feld name angezeigt werden, das den Wert für AIO_RUNTIME_NAMESPACE enthält.

Scrollen Sie weiter nach rechts, bis Sie auth sehen, das den Wert für AIO_RUNTIME_AUTH enthält.

Fügen Sie beide Werte in die Datei .env in die Zeilen 54-55 ein. Sie sollten dann über dieses verfügen.

Ihre .env-Datei ist jetzt vollständig konfiguriert.

1.7.2.5 workspace.json

Im vorherigen Schritt haben Sie eine Datei wie diese aus Ihrem Adobe I/O-Projekt heruntergeladen.

Benennen Sie diese Datei um und verwenden Sie den Namen workspace.json.

Kopieren Sie die Datei in das Verzeichnis scripts>onboarding>config.

1.7.2.6 Adobe I/O-Anmeldung

Navigieren Sie zurück zum Terminal-Fenster, das Sie zuvor verwendet hatten. Geben Sie den aio login ein.

Dies sollte Ihnen dann nach der Anmeldung über Ihren Browser angezeigt werden.

1.7.2.7 bereit zur Bereitstellung

Kopieren Sie die folgende Eingabeaufforderung und fügen Sie sie in den Cursor ein. Klicken Sie dann auf die Schaltfläche Senden.

Please deploy this code to Adobe I/O

Klicken Sie Ausführen, um die Aktion zuzulassen. Der Cursor bittet Sie möglicherweise mehrmals, eine Aktion zu bestätigen.

Die Bereitstellung ist dann nach einigen Minuten abgeschlossen.

Kopieren Sie die folgende Eingabeaufforderung und fügen Sie sie in den Cursor ein. Klicken Sie dann auf die Schaltfläche Senden.

run the onboarding to commerce

Nach ein paar Minuten sollten Sie das hier sehen.

Kopieren Sie die folgende Eingabeaufforderung und fügen Sie sie in den Cursor ein. Klicken Sie dann auf die Schaltfläche Senden.

subscribe to commerce events

Nach ein paar Minuten sollten Sie das hier sehen.

1.7.2.8 Konfiguration in Adobe Commerce as a Cloud Service überprüfen

Navigieren Sie zu https://experience.adobe.com. Auf Commerce.

Klicken Sie auf Ihre Adobe Commerce as a Cloud Service-Umgebung, um sie zu öffnen, und melden Sie sich an.

Navigieren Sie System und dann zu Ereignisabonnements.

Sie sollten dann diese Liste der Ereignisabonnements sehen.

Wechseln Sie zu Stores und dann zu Configuration.

Navigieren Sie zu Adobe Services und wählen Sie Adobe I/O Events aus. Anschließend sollten Sie sehen, dass das Feld Adobe I/O Workspace Konfigurationeinen Wert von einigen Asterisken hat und das Feld Händler-ID auch einen Wert wie --aepUserLdap--_commerce_events haben sollte.

Mit dieser Konfiguration können Sie jetzt Ihre Konfiguration testen.

1.7.2.9 Testen des Szenarios

Öffnen Sie Ihre Website.

Navigieren Sie zu Uhren und klicken Sie auf ein beliebiges Produkt.

Konfigurieren Sie das Produkt und klicken Sie auf Zum Warenkorb hinzufügen.

Klicken Sie auf Warenkorb und wählen Sie Checkout aus.

Füllen Sie Ihre Daten aus und klicken Sie auf Bestellung aufgeben.

Anschließend sollte eine Bestellbestätigung angezeigt werden.

Wechseln Sie zu Ihrer Webhook-Anwendung. Sie sollten jetzt ein eingehendes Ereignis für die gerade bestätigte Bestellung sehen.

1.7.2.10 des Adobe I/O-Debuggens

Kehren Sie zu Ihrem Adobe I/O-Projekt zurück. Zur Übersicht über Workspace. Sie sollten etwas Ähnliches sehen. Scroll ein bisschen nach unten.

Klicken, um Commerce Order Sync zu öffnen.

Navigieren Sie zu Debug-Ablaufverfolgung. Dort finden Sie die neuesten eingehenden Ereignisse zusammen mit ihrer Payload. Dies ist hilfreich, um zu verstehen, welche Ereignisse verarbeitet wurden und ob sie erfolgreich verarbeitet wurden.

Nächste Schritte

Zurück zu Intelligent Developer Tools for Adobe Commerce

Zurück zu „Alle Module“