DocumentationCommerceAdobe Commerce as a Cloud Service

Tutoriels préalables

Last update: Fri Mar 06 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermédiaire
  • Développeur

Cette page répertorie les conditions préalables et les étapes de configuration pour les tutoriels Adobe Commerce as a Cloud Service, tels que le tutoriel sur l’extension ratings et le tutoriel sur l’extension de méthode d’expédition 🔗.

Conditions préalables générales

Les outils suivants sont nécessaires pour le développement de l’extension et du storefront dans ce tutoriel.

  • Node.js (version 22.x.x) et npm (9.0.0 ou ultérieure) : vérifiez votre installation à l’aide de la commande suivante :

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

  • Installation de Git - Vérifiez votre installation :

    code language-bash 
    git --version

  • Coquille de Bash

  • Téléchargez un IDE assisté par l’IA, tel que Cursor (recommandé). D’autres IDE, tels que Claude Code, Gemini CLI ou Copilot, sont également pris en charge, mais peuvent nécessiter d’apporter des modifications aux invites et à d’autres étapes du tutoriel.

Conditions préalables Adobe Commerce as a Cloud Service

  • Installation du Adobe I/O CLI

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

  • Installez les plug-ins Adobe I/O CLI Commerce, Adobe I/O CLI Runtime et 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

Conditions préalables requises pour Adobe Developer Console

Configurez un projet dans Adobe Developer Console avec les API et les informations d’identification requises.

  1. Accédez à Adobe Developer Console.
  2. Connectez-vous à l’aide de votre adresse e-mail et de votre mot de passe.

Créer un projet

Créez un projet App Builder dans le Adobe Developer Console pour héberger votre extension.

  1. Accédez à Adobe Developer Console.

  2. Cliquez sur Create project from a template.

  3. Sélectionnez le modèle de App Builder.

  4. Saisissez un Project Title et un App Name.

  5. Assurez-vous que la case Include Runtime est cochée.

    Création de projet Adobe Developer Console avec le modèle App Builder sélectionné {width="600" modal="regular"}

  6. Cliquez sur Save.

Ajouter des API à l’espace de travail

Ajoutez les API requises à votre espace de travail d’évaluation pour la gestion des événements et l’intégration de Commerce.

  1. Cliquez sur l’espace de travail Stage , puis répétez les étapes suivantes pour chaque API.

    Espace de travail d’évaluation avec l’option Ajouter un service pour les API {width="600" modal="regular"}

  2. Cliquez sur Add Service et sélectionnez API.

  3. Sélectionnez l’une des API suivantes. Répétez ce processus pour chaque API répertoriée ci-dessous :

    • Adobe Services le filtre :

      • I/O Management API
      • API I/O Events

    • Experience Cloud le filtre :

      • API Adobe I/O Events for Adobe Commerce

  4. Cliquez sur Next.

  5. Cliquez sur Save configured API.

  6. Répétez les étapes précédentes jusqu’à ce que vous ajoutiez toutes les API à l’espace de travail.

    Workspace affichant toutes les API requises ajoutées {width="600" modal="regular"}

Configuration de l’interface de ligne de commande Adobe I/O

Connectez le Adobe I/O CLI à votre organisation, projet et espace de travail.

  1. Effacez toute configuration existante :

    code language-bash 
    aio config clear

  2. Connectez-vous à l’aide de l’Adobe I/O CLI :

    code language-bash 
    aio auth login -f

  3. Sélectionnez votre organisation, votre projet et votre espace de travail à l’aide de chacune des commandes suivantes :

    code language-bash 
    aio console org select
    code language-bash 
    aio console project select
    code language-bash 
    aio console workspace select

    Terminal affichant la sélection de projet d’organisation et d’espace de travail de l’interface de ligne de commande Adobe I/O {width="600" modal="regular"}

Cloner les kits de démarrage

Clonez l’un des référentiels de kit de démarrage Commerce suivants pour l’extension que vous créez et préparez votre projet :

Kit de démarrage d’intégration :

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

Passage en caisse du kit de démarrage :

git clone https://github.com/adobe/commerce-checkout-starter-kit.git extension
cd extension
Kit de démarrage d’intégration

Créer un fichier .env

Créez votre fichier de configuration d’environnement :

code language-bash 
cp env.dist .env

Ouvrez le fichier .env dans un éditeur de texte et ajoutez les informations d’identification OAuth suivantes :

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

Copiez ces valeurs de la page Credential details dans Developer Console en cliquant sur l’onglet OAuth Server-to-Server dans votre espace de travail.

Page d’identification de serveur à serveur OAuth dans Adobe Developer Console {width="600" modal="regular"}

Ajout de la configuration Commerce

Ajoutez les détails d’instance Commerce suivants à votre fichier .env :

code language-bash 
COMMERCE_BASE_URL=
COMMERCE_GRAPHQL_ENDPOINT=

Pour rechercher ces valeurs :

  1. Accédez à Instances de service Commerce Cloud.
  2. Cliquez sur l’icône d’informations en regard de votre instance.
  3. Copiez le point d’entrée REST en tant que COMMERCE_BASE_URL.
  4. Copiez le point d’entrée GraphQL en tant que COMMERCE_GRAPHQL_ENDPOINT.

Définir le préfixe d’événement

Définissez une valeur temporaire pour le préfixe d’événement :

code language-bash 
EVENT_PREFIX=test

Télécharger la configuration de l’espace de travail

Exécutez la commande suivante pour télécharger le fichier de configuration de l’espace de travail :

code language-bash 
aio console workspace download workspace.json

Copiez le fichier de configuration de l’espace de travail dans le répertoire scripts :

code language-bash 
cp workspace.json scripts/

Connecter l’espace de travail local à l’espace de travail distant

Liez votre projet local à l’espace de travail distant :

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

Terminal affichant une connexion réussie à l’espace de travail avec la commande d’utilisation de l’application aio {width="600" modal="regular"}

Kit de démarrage pour la commande

Connecter l’espace de travail local à l’espace de travail distant

Liez votre projet local à l’espace de travail distant. À partir de la racine du projet (le dossier extension), exécutez :

code language-bash 
aio app use --merge

Lorsque vous y êtes invité, choisissez l’option qui utilise l’organisation, le projet et l’espace de travail que vous avez sélectionnés lors de la configuration de l’interface de ligne de commande Adobe I/O. Cette opération écrit la configuration de l’espace de travail dans votre application afin que le déploiement et le développement local utilisent cet espace de travail.

Terminal affichant une connexion réussie à l’espace de travail avec la commande d’utilisation de l’application aio {width="600" modal="regular"}

Installation des outils d’IA dédiés à l’extensibilité

Ce processus crée la configuration du MCP (.<agent>/mcp.json), le répertoire des compétences (.<agent>/skills/) et AGENTS.md ajoute à la racine du projet. Vous serez invité à choisir un kit de démarrage, un agent de codage et un gestionnaire de packages.

  1. Configurez les outils de développement assisté par l’IA dans le dossier extension à l’aide des commandes suivantes :

    code language-bash 
    cd extension
    code language-bash 
    aio commerce extensibility tools-setup

    Terminal affichant la sortie de commande de configuration des outils d’extensibilité de l’IA {width="600" modal="regular"}

  2. Une fois la configuration terminée, redémarrez votre agent de codage pour lui permettre de charger les nouveaux outils et compétences MCP. Les outils Commerce App Builder sont désormais disponibles dans votre environnement.

    note note
    NOTE
    Si vous voyez un avertissement indiquant qu’aucune compétence n’a été trouvée pour le kit de démarrage, quelque chose s’est mal passé, souvent parce que la configuration a été exécutée dans un dossier autre que celui où le kit de démarrage a été cloné. Exécutez le aio commerce extensibility tools-setup à partir du dossier extension (racine du projet du kit de démarrage) et sélectionnez le kit de démarrage approprié lorsque vous y êtes invité.

    Terminal affichant la configuration des outils d’extensibilité de l’IA avec le kit de démarrage de passage en caisse sélectionné {width="600" modal="regular"}

Conditions préalables requises pour Storefront

Les éléments suivants sont requis pour terminer la section storefront du tutoriel de l’extension Ratings et afficher les évaluations de produit dans votre boutique.

Cloner le référentiel storefront

Ouvrez votre terminal et clonez le référentiel :

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

Installation des dépendances

Installez les dépendances du projet :

npm install

Installation des outils d’IA de storefront

Configurez les outils de développement assistés par l’IA dans le dossier storefront . Exécutez la commande suivante à partir de la racine de votre projet standard :

aio commerce extensibility tools-setup

La commande vous guide à travers deux invites :

  1. Sélectionner un kit de démarrage — Choisissez AEM Boilerplate Commerce.

  2. Sélectionnez votre agent de codage — Choisissez votre agent dans la liste des agents pris en charge.

La commande installe le package @adobe-commerce/commerce-extensibility-tools en tant que dépendance de développement, copie les fichiers de compétences dans le répertoire des compétences de votre agent et configure MCP (Model Context Protocol) afin que votre agent puisse accéder aux outils de recherche de documentation Commerce.

recommendation-more-help
aa40c2bf-3234-45d5-985f-5d274c066970