Dokumentation Commerce Adobe Commerce as a Cloud Service

Voraussetzungen für das Tutorial

Last update: Mon Mar 23 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
App Builder
Cloud

Erstellt für:

Fortgeschrittener
Entwickler

Auf dieser Seite werden die Voraussetzungen und Einrichtungsschritte für Adobe Commerce as a Cloud Service Tutorials aufgelistet, z. B das Tutorial zur Erweiterung von Bewertungen das Tutorial Erweiterung der Versandmethode.

Allgemeine Voraussetzungen

In diesem Tutorial sind die folgenden Tools für die Entwicklung von Erweiterungen und Storefronts erforderlich.

Node.js (Version 22.x.x) und npm (9.0.0 oder höher): Überprüfen Sie Ihre Installation mit dem folgenden Befehl:

code language-bash
`node --version npm --version`

Installieren von Git - Überprüfen Sie Ihre Installation:

code language-bash
`git --version`

Bash-Shell
- macOS/Linux: Keine Installation erforderlich
- Windows: Verwenden Sie Git Bash oder Windows Subsystem for Linux (WSL)
Laden Sie eine KI-unterstützte IDE herunter, z. BCursor (empfohlen). Andere IDEs wie Claude Code, Gemini CLI oder Copilot werden ebenfalls unterstützt, erfordern jedoch möglicherweise Änderungen an den Eingabeaufforderungen und anderen Schritten im Tutorial.

Voraussetzungen für Adobe Commerce as a Cloud Service

Installieren des Adobe I/O CLI

code language-bash
`npm install -g @adobe/aio-cli`

Installieren Sie die Plug-ins Adobe I/O CLI Commerce, Adobe I/O CLI Runtime und App Builder CLI:

code language-bash
`aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime`

Richten Sie nach der Installation des Adobe I/O CLI und der erforderlichen Plug-ins Ihren Erweiterbarkeitsarbeitsbereich ein. Adobe empfiehlt die Verwendung des automatisierten Setups für ein schnelleres Erlebnis.

Automatisierte Einrichtung (empfohlen) - Führen Sie einen einzelnen Befehl aus, um Ihren Arbeitsbereich automatisch zu konfigurieren.
Manuelles Setup - Folgen Sie den schrittweisen Anweisungen, um jede Komponente einzeln zu konfigurieren.

Automatisiertes Setup (empfohlen) automated-setup

TIP

Wenn beim automatisierten Setup Probleme auftreten, führen Sie die folgenden Schritte manuelles Setup aus.

Der Befehl app-setup automatisiert den Arbeitsbereich-Einrichtungsprozess, einschließlich der Erstellung eines Adobe Developer Console-Projekts, des Hinzufügens der erforderlichen APIs, der Konfiguration des Adobe I/O CLI, des Klonens des Starter Kits, der Verbindung Ihres lokalen Arbeitsbereichs und der Installation der Erweiterbarkeits-KI-Tools.

Der Befehl app-setup führt Sie durch die folgenden Schritte:

Auswählen oder Erstellen eines Adobe Developer Console mit den erforderlichen APIs
Konfigurieren der Adobe I/O CLI mit Ihrer Organisation, Ihrem Projekt und Ihrem Arbeitsbereich
Klonen des entsprechenden Starter Kits und Einrichten des Projekts
Konfigurieren der Umgebung und Verbinden des lokalen Arbeitsbereichs mit dem Remote-Arbeitsbereich
Installieren der Commerce-Erweiterbarkeits-Tools und Kenntnisse des Programmieragenten

Führen Sie den folgenden Befehl aus und befolgen Sie die interaktiven Eingabeaufforderungen:

aio commerce extensibility app-setup

Navigieren Sie nach Abschluss des Befehls zu Ihrem Projektverzeichnis und starten Sie Ihren Codierungsagenten neu, um die neuen MCP-Tools und -Kenntnisse zu laden. Wenn für das Tutorial eine Storefront erforderlich ist, führen Sie den Befehl erneut aus und wählen Sie das AEM Boilerplate Commerce Starter Kit aus.

Die folgende Beispielinstallation zeigt die interaktiven Eingabeaufforderungen und die Ausgabe für das Checkout-Starter-Kit.

Beispielinstallation (Checkout-Starter-Kit)

code language-shell-session

code language-shell-session
aio commerce extensibility app-setup 🚀 Adobe Commerce Extensibility App Setup ✔ Logged in 📁 Working directory: /Users/username/projects/my-commerce-project ✔ Which starter kit would you like to use? Checkout Starter Kit ✔ Enter a name for your project directory: my-extension ✔ Which coding agent would you like to install the skills for? Cursor 📦 Cloning Checkout Starter Kit... ✔ Repository cloned Using npm (package-lock.json found) ✔ Dependencies installed 📋 Current Adobe I/O Console configuration: Org: My Organization (1234567) Project: My Commerce Project (1234567890123456789) Workspace: Stage (9876543210987654321) ✔ Do you want to continue with this configuration? (Answer "No" to select a different org/project/workspace) No 🔧 Selecting Adobe I/O Console org, project, and workspace... ? Select Org: My Organization Org selected My Organization You are currently in: 1. Org: My Organization 2. Project: <no project selected> 3. Workspace: <no workspace selected> ? Select Project: My Commerce Project Project selected : My Commerce Project You are currently in: 1. Org: My Organization 2. Project: My Commerce Project 3. Workspace: <no workspace selected> ? Select Workspace: Stage Workspace selected Stage You are currently in: 1. Org: My Organization 2. Project: My Commerce Project 3. Workspace: Stage ✅ Console configured: Org: My Organization Project: My Commerce Project Workspace: Stage 🔐 Configuring workspace credentials and services... ✔ Workspace configuration loaded ✔ OAuth server-to-server credentials already configured ✔ All required services available in organization ✔ Subscribed to: Adobe Commerce as a Cloud Service 📋 Configuring Checkout Starter Kit... Creating .env from env.dist... ✔ Select tenant (type to search) My Commerce Instance: https://<region>.api.commerce.adobe.com/<tenant-id>/graphql ✔ Commerce instance configured ✔ Enter the event prefix for your workspace: my-prefix ✔ Workspace IDs configured ✔ OAuth credentials configured ✔ Checkout Starter Kit configured 🔧 Installing Commerce Extensibility tools and agent skills... ✔ Commerce Extensibility tools installed 🎉 App setup complete! 📁 Project directory: /Users/username/projects/my-commerce-project/my-extension Next steps: 1. cd into your project directory 2. Restart your coding agent to load the Commerce Extensibility tools and skills

aio commerce extensibility app-setup

🚀 Adobe Commerce Extensibility App Setup

✔ Logged in
📁 Working directory: /Users/username/projects/my-commerce-project

✔ Which starter kit would you like to use? Checkout Starter Kit
✔ Enter a name for your project directory: my-extension
✔ Which coding agent would you like to install the skills for? Cursor

📦 Cloning Checkout Starter Kit...
   ✔ Repository cloned
   Using npm (package-lock.json found)
   ✔ Dependencies installed

📋 Current Adobe I/O Console configuration:
   Org: My Organization (1234567)
   Project: My Commerce Project (1234567890123456789)
   Workspace: Stage (9876543210987654321)
✔ Do you want to continue with this configuration? (Answer "No" to select a different org/project/workspace)
No

🔧 Selecting Adobe I/O Console org, project, and workspace...

? Select Org: My Organization
Org selected My Organization
You are currently in:
1. Org: My Organization
2. Project: <no project selected>
3. Workspace: <no workspace selected>

? Select Project: My Commerce Project
Project selected : My Commerce Project
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: <no workspace selected>

? Select Workspace: Stage
Workspace selected Stage
You are currently in:
1. Org: My Organization
2. Project: My Commerce Project
3. Workspace: Stage

✅ Console configured:
   Org: My Organization
   Project: My Commerce Project
   Workspace: Stage

🔐 Configuring workspace credentials and services...
   ✔ Workspace configuration loaded
   ✔ OAuth server-to-server credentials already configured
   ✔ All required services available in organization
   ✔ Subscribed to: Adobe Commerce as a Cloud Service

📋 Configuring Checkout Starter Kit...
   Creating .env from env.dist...
✔ Select tenant (type to search) My Commerce Instance:
https://<region>.api.commerce.adobe.com/<tenant-id>/graphql
   ✔ Commerce instance configured
✔ Enter the event prefix for your workspace: my-prefix
   ✔ Workspace IDs configured
   ✔ OAuth credentials configured
   ✔ Checkout Starter Kit configured

🔧 Installing Commerce Extensibility tools and agent skills...
   ✔ Commerce Extensibility tools installed

🎉 App setup complete!

📁 Project directory: /Users/username/projects/my-commerce-project/my-extension

Next steps:
   1. cd into your project directory
   2. Restart your coding agent to load the Commerce Extensibility tools and skills

Manuelles Setup manual-setup

In den folgenden Abschnitten wird beschrieben, wie Sie die einzelnen Komponenten Ihres Erweiterungsarbeitsbereichs manuell einrichten. Führen Sie diese Schritte aus, wenn Sie eine manuelle Konfiguration bevorzugen oder wenn Probleme mit der automatisierten Einrichtung“ auftreten.

Voraussetzungen für Adobe Developer Console

Richten Sie in der Adobe Developer Console ein Projekt mit den erforderlichen APIs und Anmeldeinformationen ein.

Navigieren Sie zur Adobe Developer Console.
Melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an.

Neues Projekt erstellen

Erstellen Sie ein App Builder-Projekt in der Adobe Developer Console, um Ihre Erweiterung zu hosten.

Navigieren Sie zu Adobe Developer Console.
Klicken Sie auf Create project from a template.
Wählen Sie die App Builder aus.
Geben Sie einen Project Title und einen App Name ein.
Stellen Sie sicher, dass das Kontrollkästchen Include Runtime markiert ist.

{width="600" modal="regular"}
Klicken Sie auf Save.

Hinzufügen von APIs zum Arbeitsbereich

Fügen Sie Ihrem Staging-Arbeitsbereich die erforderlichen APIs für die Ereignisverwaltung und Commerce-Integration hinzu.

Klicken Sie auf Arbeitsbereich Stage und wiederholen Sie dann die folgenden Schritte für jede API.

{width="600" modal="regular"}
Klicken Sie auf Add Service und wählen Sie API aus.
Wählen Sie eine der folgenden APIs aus. Wiederholen Sie diesen Vorgang für jede unten aufgeführte API:
- Adobe Services:
  - I/O Management API
  - I/O Events API
- Experience Cloud:
  - Adobe I/O Events for Adobe Commerce API
Klicken Sie auf Next.
Klicken Sie auf Save configured API.
Wiederholen Sie die vorherigen Schritte, bis Sie alle APIs zum Arbeitsbereich hinzufügen.

{width="600" modal="regular"}

Konfigurieren der Adobe I/O-CLI

Verbinden Sie die Adobe I/O CLI mit Ihrer Organisation, Ihrem Projekt und Ihrem Arbeitsbereich.

Löschen Sie eine vorhandene Konfiguration:

code language-bash
`aio config clear`

Melden Sie sich mit dem Adobe I/O CLI an:

code language-bash
`aio auth login -f`

Wählen Sie Ihre Organisation, Ihr Projekt und Ihren Arbeitsbereich mit jedem der folgenden Befehle aus:

code language-bash
`aio console org select`

code language-bash
`aio console project select`

code language-bash
`aio console workspace select`

Terminal mit Auswahl der Adobe I/O CLI-Organisationsprojekte und des Arbeitsbereichs {width="600" modal="regular"}

Klonen der Starter Kits

Klonen Sie eines der folgenden Commerce Starter Kit-Repositorys für die Erweiterung, die Sie erstellen, und bereiten Sie Ihr Projekt vor:

Integrations-Starter-Kit:

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

Checkout-Starterkit:

git clone https://github.com/adobe/commerce-checkout-starter-kit.git extension
cd extension

Integrations-Starter-Kit

Erstellen einer .env-Datei

Erstellen Sie die Konfigurationsdatei Ihrer Umgebung:

code language-bash
`cp env.dist .env`

Öffnen Sie die .env in einem Texteditor und fügen Sie die folgenden OAuth-Anmeldeinformationen hinzu:

code language-bash
`OAUTH_CLIENT_ID= OAUTH_CLIENT_SECRET= OAUTH_TECHNICAL_ACCOUNT_ID= OAUTH_TECHNICAL_ACCOUNT_EMAIL= OAUTH_ORG_ID=`

Kopieren Sie diese Werte von der Credential details in Developer Console indem Sie auf die Registerkarte OAuth Server-to-Server in Ihrem Arbeitsbereich klicken.

Seite mit OAuth Server-zu-Server-Anmeldeinformationen in Adobe Developer Console {width="600" modal="regular"}

Hinzufügen der Commerce-Konfiguration

Fügen Sie die folgenden Commerce-Instanzdetails zu Ihrer .env hinzu:

code language-bash
`COMMERCE_BASE_URL= COMMERCE_GRAPHQL_ENDPOINT=`

So suchen Sie diese Werte:

Navigieren Sie zu Commerce Cloud Service-Instanzen.
Klicken Sie auf das Informationssymbol neben Ihrer Instanz.
Kopieren Sie den REST-Endpunkt nach COMMERCE_BASE_URL.
Kopieren Sie den GraphQL-Endpunkt nach COMMERCE_GRAPHQL_ENDPOINT.

Festlegen des Ereignispräfixes

Legen Sie einen temporären Wert für das Ereignispräfix fest:

code language-bash
`EVENT_PREFIX=test`

Herunterladen der Workspace-Konfiguration

Führen Sie den folgenden Befehl aus, um die Workspace-Konfigurationsdatei herunterzuladen:

code language-bash
`aio console workspace download workspace.json`

Kopieren Sie die Workspace-Konfigurationsdatei in das scripts:

code language-bash
`cp workspace.json scripts/`

Verbinden des lokalen Arbeitsbereichs mit dem Remote-Arbeitsbereich

Verknüpfen des lokalen Projekts mit dem Remote-Arbeitsbereich:

code language-bash
`aio app use workspace.json -m`

Terminal, das eine erfolgreiche Arbeitsbereich-Verbindung mit dem AIO-Programm-Anwendungsbefehl anzeigt {width="600" modal="regular"}

Checkout-Starterkit

Lokalen Arbeitsbereich mit Remote-Arbeitsbereich verbinden

Verknüpfen des lokalen Projekts mit dem Remote-Arbeitsbereich. Führen Sie im Stammverzeichnis des Projekts (extension Ordner) Folgendes aus:

code language-bash
`aio app use --merge`

Wählen Sie bei Aufforderung die Option aus, die die Organisation, das Projekt und den Arbeitsbereich verwendet, die Sie beim Konfigurieren der Adobe I/O-CLI ausgewählt haben. Dadurch wird die Workspace-Konfiguration in Ihre App geschrieben, damit sie bereitgestellt und für die lokale Entwicklung verwendet werden kann.

Terminal, das eine erfolgreiche Arbeitsbereich-Verbindung mit dem AIO-Programm-Anwendungsbefehl anzeigt {width="600" modal="regular"}

Installieren der KI-Tools für die Erweiterbarkeit

Dieser Prozess erstellt die MCP-Konfiguration (.<agent>/mcp.json), das Skills-Verzeichnis (.<agent>/skills/) und fügt AGENTS.md zum Projektstamm hinzu. Sie werden aufgefordert, ein Starter Kit, einen Codierungsagenten und einen Package Manager auszuwählen.

Richten Sie die KI-unterstützten Entwicklungstools mithilfe der folgenden Befehle im Ordner "extension" ein:

code language-bash
`cd extension`

code language-bash
`aio commerce extensibility tools-setup`

Terminal mit der Befehlsausgabe für die Einrichtung von KI-Erweiterbarkeitstools {width="600" modal="regular"}

Starten Sie nach Abschluss des Setups Ihren Codierungsagenten neu, damit er die neuen MCP-Tools und -Kenntnisse laden kann. Die Commerce App Builder-Tools sind jetzt in Ihrer Umgebung verfügbar.

note note

note note
NOTE
Wenn eine Warnung angezeigt wird, dass keine Kenntnisse für das Starter Kit gefunden wurden, ist ein Fehler aufgetreten - häufig, weil das Setup in einem anderen Ordner als dem, in dem das Starter Kit geklont wurde, ausgeführt wurde. Führen Sie `aio commerce extensibility tools-setup` aus dem `extension`-Ordner (dem Stammverzeichnis des Starter Kit-Projekts) aus und wählen Sie das entsprechende Starter Kit aus, wenn Sie dazu aufgefordert werden.

NOTE

Wenn eine Warnung angezeigt wird, dass keine Kenntnisse für das Starter Kit gefunden wurden, ist ein Fehler aufgetreten - häufig, weil das Setup in einem anderen Ordner als dem, in dem das Starter Kit geklont wurde, ausgeführt wurde. Führen Sie aio commerce extensibility tools-setup aus dem extension-Ordner (dem Stammverzeichnis des Starter Kit-Projekts) aus und wählen Sie das entsprechende Starter Kit aus, wenn Sie dazu aufgefordert werden.

Terminal mit KI-Erweiterbarkeits-Tools-Setup mit ausgewähltem Checkout-Starter-Kit {width="600" modal="regular"}

Manuelle Einrichtung der Storefront

In diesem Abschnitt wird beschrieben, wie Sie Ihre Storefront für das Tutorial zu Bewertungserweiterungen und andere Storefront-Tutorials manuell konfigurieren.

Um Ihre Storefront automatisch zu konfigurieren, führen Sie den app-setup Befehl aus, der im Abschnitt Automatisiertes Setup beschrieben ist, und wählen Sie das AEM Boilerplate Commerce Starter Kit aus.

Voraussetzungen

Die folgenden Elemente sind erforderlich, um den Abschnitt Storefront des Tutorials Ratings-Erweiterung abzuschließen und Produktbewertungen in Ihrem Store anzuzeigen.

Google Chrome - Zum Testen der Storefront erforderlich
Ein Storefront-Projekt, das mit Ihrer Commerce verbunden ist. Wenn Sie kein Storefront-Projekt haben, führen Sie die Schritte in Storefront erstellen aus, einschließlich des Abschnitts Repo mit Commerce-Daten verknüpfen.

Klonen des Storefront-Repositorys

Öffnen Sie Ihr Terminal und klonen Sie das Repository :

git clone https://github.com/hlxsites/aem-boilerplate-commerce.git storefront
cd storefront

Installieren der Abhängigkeiten

Installieren Sie die Projektabhängigkeiten:

npm install

Installieren der KI-Tools für die Storefront

Richten Sie die KI-unterstützten Entwicklungs-Tools im Ordner storefront ein.

Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihres Textbausteinprojekts aus. Der Befehl installiert das @adobe-commerce/commerce-extensibility-tools-Paket als Dev-Abhängigkeit, kopiert die Skill-Dateien in das Skill-Verzeichnis Ihres Agenten und konfiguriert MCP (Model Context Protocol), damit Ihr Agent auf Commerce-Dokumentationssuchwerkzeuge zugreifen kann.

aio commerce extensibility tools-setup

Der Befehl führt Sie durch zwei Eingabeaufforderungen:

Starter Kit auswählen — Wählen Sie AEM Boilerplate Commerce.
Codierungsagent auswählen - Wählen Sie Ihren Agenten aus der Liste der unterstützten Agenten aus.

recommendation-more-help

fce0ca22-edd1-4bad-ab1e-3070c2bf0b91