Documentación Commerce Adobe Commerce as a Cloud Service

Requisitos previos del tutorial

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

Temas:
App Builder
Nube

Creado para:

Intermedio
Desarrollador

En esta página se enumeran los requisitos previos y los pasos de configuración de Adobe Commerce as a Cloud Service tutoriales, como el tutorial de extensión de clasificaciones y el tutorial de extensión de método de envío.

Requisitos previos generales

En este tutorial, se requieren las siguientes herramientas tanto para el desarrollo de extensiones como de tiendas.

Node.js (versión 22.x.x) y npm (9.0.0 o superior): compruebe su instalación con el siguiente comando:

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

Instalar Git. Compruebe la instalación:

code language-bash
`git --version`

Bash shell
- macOS/Linux: no se requiere instalación
- Windows: use Git Bash o Subsistema de Windows para Linux (WSL)
Descargue un IDE asistido por IA, como Cursor (recomendado). También se admiten otros IDE, como Claude Code, Gemini CLI o Copilot, pero podrían requerir modificaciones en las indicaciones y otros pasos del tutorial.

Adobe Commerce as a Cloud Service requisitos previos

Instalar Adobe I/O CLI

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

Instale los complementos Adobe I/O CLI Commerce, Adobe I/O CLI Runtime y 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`

Después de instalar Adobe I/O CLI y los complementos necesarios, configure el área de trabajo de extensibilidad. Adobe recomienda utilizar la configuración automatizada para disfrutar de la experiencia más rápida.

Configuración automatizada (recomendada): ejecute un solo comando para configurar el área de trabajo automáticamente.
Configuración manual: siga las instrucciones paso a paso para configurar cada componente de forma individual.

Configuración automatizada (recomendada) automated-setup

TIP

Si encuentra problemas con la configuración automatizada, siga los pasos de la configuración manual que se indican a continuación.

El comando app-setup automatiza el proceso de configuración del área de trabajo, incluida la creación de un proyecto Adobe Developer Console, la adición de las API necesarias, la configuración de Adobe I/O CLI, la clonación del Starter Kit, la conexión del área de trabajo local y la instalación de las herramientas de IA de extensibilidad.

El comando app-setup le guía a través de los siguientes pasos:

Seleccionar o crear un proyecto Adobe Developer Console con las API requeridas
Configurando Adobe I/O CLI con su organización, proyecto y área de trabajo
Clonación del Starter Kit adecuado y configuración del proyecto
Configuración del entorno y conexión del espacio de trabajo local al espacio de trabajo remoto
Instalación de las herramientas de extensibilidad de Commerce y habilidades con los agentes de codificación

Ejecute el siguiente comando y siga las indicaciones interactivas:

aio commerce extensibility app-setup

Una vez finalizado el comando, vaya al directorio del proyecto y reinicie el agente de codificación para cargar las nuevas herramientas y habilidades de MCP. Si el tutorial requiere una tienda, ejecute de nuevo el comando y seleccione el Starter Kit AEM Boilerplate Commerce.

En el siguiente ejemplo de instalación se muestran las indicaciones interactivas y la salida del kit de inicio de cierre de compra.

Instalación de ejemplo (kit de inicio de cierre de compra)

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

Configuración manual manual-setup

Las secciones siguientes describen cómo configurar manualmente cada componente del espacio de trabajo de extensibilidad. Siga estos pasos si prefiere la configuración manual o si tiene problemas con la configuración automatizada.

Requisitos previos de Adobe Developer Console

Configure un proyecto en Adobe Developer Console con las API y credenciales requeridas.

Vaya a Adobe Developer Console.
Inicie sesión con su correo electrónico y contraseña.

Creación de un nuevo proyecto

Cree un proyecto de App Builder en Adobe Developer Console para alojar la extensión.

Vaya a Adobe Developer Console.
Haga clic en Create project from a template.
Seleccione la plantilla App Builder.
Escriba Project Title y App Name.
Asegúrese de que la casilla de verificación Include Runtime esté marcada.

{width="600" modal="regular"}
Haga clic en Save.

Añadir API al espacio de trabajo

Añada las API necesarias al espacio de trabajo de ensayo para la administración de eventos y la integración de Commerce.

Haga clic en el área de trabajo Stage y, a continuación, repita los pasos siguientes para cada API.

{width="600" modal="regular"}
Haga clic en Add Service y seleccione API.
Seleccione una de las siguientes API. Repita este proceso para cada API enumerada a continuación:
- Filtro Adobe Services:
  - I/O Management API
  - API I/O Events
- Filtro Experience Cloud:
  - API Adobe I/O Events for Adobe Commerce
Haga clic en Next.
Haga clic en Save configured API.
Repita los pasos anteriores hasta que agregue todas las API al espacio de trabajo.

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

Configuración de la CLI de Adobe I/O

Conecte Adobe I/O CLI a su organización, proyecto y área de trabajo.

Borre cualquier configuración existente:

code language-bash
`aio config clear`

Iniciar sesión con Adobe I/O CLI:

code language-bash
`aio auth login -f`

Seleccione su organización, proyecto y espacio de trabajo con cada uno de los siguientes comandos:

code language-bash
`aio console org select`

code language-bash
`aio console project select`

code language-bash
`aio console workspace select`

Terminal que muestra la selección del espacio de trabajo y el proyecto de la organización Adobe I/O CLI {width="600" modal="regular"}

Clona los starter kits

Clone uno de los siguientes repositorios de Commerce starter kit para la extensión que está creando y prepare su proyecto:

Kit de inicio de integración:

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

Kit de inicio de compra:

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

Kit de inicio de integración

Creación de un archivo .env

Cree el archivo de configuración de entorno:

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

Abra el archivo .env en un editor de texto y agregue las siguientes credenciales de OAuth:

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

Copie estos valores de la página Credential details en Developer Console haciendo clic en la pestaña OAuth Server-to-Server del área de trabajo.

Página de credenciales de servidor a servidor OAuth en Adobe Developer Console {width="600" modal="regular"}

Añadir la configuración de Commerce

Agregue los siguientes detalles de la instancia de Commerce al archivo .env:

code language-bash
`COMMERCE_BASE_URL= COMMERCE_GRAPHQL_ENDPOINT=`

Para buscar estos valores:

Vaya a Instancias del servicio Commerce Cloud.
Haga clic en el icono de información junto a la instancia.
Copie el extremo REST como COMMERCE_BASE_URL.
Copie el extremo de GraphQL como COMMERCE_GRAPHQL_ENDPOINT.

Definición del prefijo del evento

Establezca un valor temporal para el prefijo de evento:

code language-bash
`EVENT_PREFIX=test`

Descargar la configuración de Workspace

Ejecute el siguiente comando para descargar el archivo de configuración de Workspace:

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

Copie el archivo de configuración de área de trabajo en el directorio scripts:

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

Conectar el espacio de trabajo local al espacio de trabajo remoto

Vincule el proyecto local al espacio de trabajo remoto:

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

El terminal muestra una conexión correcta del espacio de trabajo con el comando de uso de la aplicación aio {width="600" modal="regular"}

Kit de inicio de cierre de compra

Conectar el espacio de trabajo local al remoto

Vincule el proyecto local al espacio de trabajo remoto. Desde la raíz del proyecto (la carpeta extension), ejecute:

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

Cuando se le solicite, elija la opción que utiliza la organización, el proyecto y el espacio de trabajo que seleccionó al configurar la CLI de Adobe I/O. Esto escribe la configuración del espacio de trabajo en la aplicación para que la implementación y el desarrollo local utilicen ese espacio de trabajo.

El terminal muestra una conexión correcta del espacio de trabajo con el comando de uso de la aplicación aio {width="600" modal="regular"}

Instalación de las herramientas de IA de extensibilidad

Este proceso crea la configuración de MCP (.<agent>/mcp.json), el directorio de aptitudes (.<agent>/skills/) y agrega AGENTS.md a la raíz del proyecto. Se le pedirá que elija un Starter Kit, un agente de codificación y un gestor de paquetes.

Configure las herramientas de desarrollo asistido por IA en la carpeta extension mediante los siguientes comandos:

code language-bash
`cd extension`

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

Terminal que muestra la salida del comando de configuración de las herramientas de extensibilidad de IA {width="600" modal="regular"}

Una vez finalizada la instalación, reinicie el agente de codificación para que pueda cargar las nuevas herramientas y habilidades de MCP. Las herramientas de Commerce App Builder ya están disponibles en su entorno.

note note

note note
NOTE
Si ve una advertencia que indica que no se encontraron aptitudes para el Starter Kit, se produjo un error, a menudo porque la configuración se ejecutó en una carpeta distinta de la carpeta en la que se clonó el Starter Kit. Ejecute `aio commerce extensibility tools-setup` desde la carpeta `extension` (la raíz del proyecto del Starter Kit) y seleccione el Starter Kit apropiado cuando se le solicite.

NOTE

Si ve una advertencia que indica que no se encontraron aptitudes para el Starter Kit, se produjo un error, a menudo porque la configuración se ejecutó en una carpeta distinta de la carpeta en la que se clonó el Starter Kit. Ejecute aio commerce extensibility tools-setup desde la carpeta extension (la raíz del proyecto del Starter Kit) y seleccione el Starter Kit apropiado cuando se le solicite.

Terminal que muestra la configuración de las herramientas de extensibilidad de IA con el kit de inicio de pago seleccionado {width="600" modal="regular"}

Configuración manual de la tienda

En esta sección se describe cómo configurar manualmente la tienda para el tutorial de extensión de clasificación y otros tutoriales de tienda.

Para configurar automáticamente su tienda, ejecute el comando app-setup descrito en la sección Configuración automatizada y seleccione el Starter Kit AEM Boilerplate Commerce.

Requisitos previos

Se requieren los siguientes elementos para completar la sección tienda del tutorial de la extensión Clasificaciones y mostrar las clasificaciones de productos en tu tienda.

Google Chrome - Necesario para probar la tienda
Un proyecto de tienda conectado a su instancia Commerce. Si no tiene un proyecto de tienda, siga los pasos de Crear una tienda, incluida la sección Vincular repositorio a los datos de comercio.

Clonar el repositorio de la tienda

Abra el terminal y clone el repositorio:

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

Instalación de las dependencias

Instale las dependencias del proyecto:

npm install

Instalación de las herramientas de IA de tienda

Configure las herramientas de desarrollo asistido por IA en la carpeta storefront.

Ejecute el siguiente comando desde la raíz del proyecto de plantillas. El comando instala el paquete @adobe-commerce/commerce-extensibility-tools como una dependencia de desarrollo, copia los archivos de aptitudes en el directorio de aptitudes del agente y configura MCP (Model Context Protocol) para que el agente pueda acceder a las herramientas de búsqueda de documentación de Commerce.

aio commerce extensibility tools-setup

El comando le guiará por dos mensajes:

Seleccionar un kit de inicio — Elija AEM Boilerplate Commerce.
Seleccione su agente de codificación — Elija su agente de la lista de agentes admitidos.

recommendation-more-help

d201267d-8d61-4d13-b6bb-517a2cbb4981