1.7.2使用Cursor开发项目

1.7.2.1设置您的目录和工具

在您的桌面上,创建一个名为--aepUserLdap---commerce的新目录

Commerce和代理

右键单击您的文件夹,然后选择​在文件夹新建终端

Commerce和代理

您应该会看到此内容。

Commerce和代理

您现在需要克隆现有的Github存储库,以便查看https://github.com/adobe/commerce-integration-starter-kit

此存储库是Adobe的集成入门工具包,它使用Adobe Developer App Builder提高Adobe Commerce与其他后台系统(如ERP、CRM和PIM)的集成的实时连接可靠性并缩短上市时间。

Commerce和代理

有多种方法可克隆此存储库,在此示例中使用“终端”。

在“终端”窗口中输入以下命令并执行它。

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

Commerce和代理

几秒钟后,您应该会看到此结果。

Commerce和代理

接下来,您应该导航到刚刚创建的文件夹。 输入以下命令,然后执行它。

cd commerce-integration-starter-kit

Commerce和代理

您应该会看到此内容。

Commerce和代理

接下来,您需要为Cursor设置Commerce可扩展性工具。 输入以下命令,然后执行它。

aio commerce extensibility tools-setup

Commerce和代理

选择​当前目录

Commerce和代理

选择​游标

Commerce和代理

选择​npm

Commerce和代理

几分钟后,您应该会看到此内容。

Commerce和代理

通过安装用于Cursor的Commerce可扩展性工具,现在可以将MCP服务器作为Cursor环境的一部分提供。 在接下来的练习中,您将使用该MCP服务器来帮助您开发和部署App Builder项目。

1.7.2.2设置您的webhook

在本练习中,您将需要配置一个webhook,以便在创建订单时,可以将订单事件流式传输到该webhook。 在本练习中,您将使用https://pipedream.com/requestbin的示例终结点。

转到https://pipedream.com/requestbin,创建一个帐户,然后创建一个工作区。 创建工作区后,您将看到类似以下的内容。

单击​ 复制 ​复制URL。 您需要在下一个练习中指定此URL。 此示例中的URL是https://eodts05snjmjz67.m.pipedream.net

Cursor + Commerce

1.7.2.3使用光标创建应用程序

打开光标。 单击​打开项目

Cursor + Commerce

导航到您创建的文件夹,该文件夹应名为--aepUserLdap---commerce。 在该文件夹中,选择名为commerce-integration-starter-kit的文件夹。 单击​打开

Cursor + Commerce

您应该会看到此内容。 在继续之前,请确保在Cursor中打开的顶级文件夹为commerce-integration-starter-kit

Cursor + Commerce

使用键盘快捷键Cmd + Shift + J打开“光标”设置。 您应该会看到此内容。 转到​工具& MCP

Cursor + Commerce

启用MCP服务器​commerce-extensibility。 完成后,单击​ X ​关闭窗口。

Cursor + Commerce

复制以下提示并将其粘贴到光标中。 然后,单击​ 发送 ​按钮。

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

Cursor + Commerce

游标将开始推理和执行。 光标会要求您确认几次。 发生这种情况时,请单击​运行。 根据推理和您的设置,这种情况可能会出现5-10次。

Cursor + Commerce

几分钟后,您应该会看到类似这样的内容。

Cursor + Commerce

如Cursor所示,下一步是创建名为.env的文件,并在其中提供所需的变量。

1.7.2.4创建您的.env文件

选择文件​env.dist。 输入命令Cmd + C,然后输入命令Cmd + V

Cursor + Commerce

将新创建的文件重命名为.env

Cursor + Commerce

接下来,您需要为文件​ .env ​中的所有变量提供值。

Cursor + Commerce

您可以在此处找到所有必需的信息。

Commerce端点

您可以通过转到https://experience.adobe.com找到这些变量。 单击​Commerce

Cursor + Commerce

您应该会看到此内容。 单击ACCS环境旁边的​ 信息 ​图标,该图标应命名为--aepUserLdap-- - ACCS。 复制REST端点和GraphQL端点的值。

在本例中,这些是要复制的值。 将它们粘贴到文件​ .env ​第6行和第7行的以下变量旁边。

  • COMMERCE_BASE_URL = https://na1-sandbox.api.commerce.adobe.com/Lkp3U7tvTBNAmpFvwnZJ4B/
  • COMMERCE_GRAPHQL_ENDPOINT = https://na1-sandbox.api.commerce.adobe.com/Lkp3U7tvTBNAmpFvwnZJ4B/graphql

Cursor + Commerce

然后,您应将它放入文件​ .env ​中。

Cursor + Commerce

Adobe I/O项目变量

您可以通过转到https://developer.adobe.com/console找到这些变量。 转到​项目,然后单击以打开您在上一个练习中创建的、应命名为--aepUserLdap-- Commerce Events的Adobe I/O项目。

Cursor + Commerce

转到​生产

Cursor + Commerce

转到​OAuth服务器到服务器。 您应该会看到此内容。

Cursor + Commerce

复制字段​客户端ID客户端密钥技术帐户ID技术帐户电子邮件​和​ 组织ID ​的值,并将其粘贴到文件​ .env ​中第13-17行的以下变量旁边。

  • OAUTH_CLIENT_ID= 客户端ID
  • OAUTH_CLIENT_SECRET= 客户端密钥
  • OAUTH_TECHNICAL_ACCOUNT_ID= 技术帐户ID
  • OAUTH_TECHNICAL_ACCOUNT_EMAIL= 技术帐户电子邮件
  • OAUTH_ORG_ID= 组织ID

然后,您应将它放入文件​ .env ​中。

Cursor + Commerce

Commerce_ADOBE_IO_EVENTS_MERCHANT_ID

对于字段​COMMERCE_ADOBE_IO_EVENTS_MERCHANT_ID=,请在文件--aepUserLdap--_commerce_events.env 中输入第34行的值

然后,您应将它放入文件​ .env ​中。

Cursor + Commerce

Workspace配置

要检索这些变量,请返回您的Adobe I/O项目,然后单击​Workspace概述

在转到​ Workspace概述 ​后,请查看URL,它应如下所示: https://developer.adobe.com/console/projects/133309/4566206088345586770/workspaces/4566206088345619105/details

此示例中的第一个数字133309是用于字段​ IO_CONSUMER_ID ​的值。
此示例中的第二个数字4566206088345586770是用于字段​ IO_PROJECT_ID ​的值。
此示例中的第三个数字4566206088345619105是用于字段​ IO_WORKSPACE_ID ​的值。

Cursor + Commerce

  • IO_CONSUMER_ID= 133309
  • IO_PROJECT_ID= 4566206088345586770
  • IO_WORKSPACE_ID= 4566206088345619105

复制这些值,并将其粘贴到文件​ .env ​中第42-44行的以下变量旁边。

Cursor + Commerce

EVENT_PREFIX

对于字段​EVENT_PREFIX =,在文件--aepUserLdap--_.env 的第47行中输入值

然后,您应将它放入文件​ .env ​中。

Cursor + Commerce

Webhook

对于字段​ORDER_WEBHOOK_URL,您应该粘贴本练习前面创建的webhook的URL,它应该如下所示: https://eodts05snjmjz67.m.pipedream.net

然后,您应将它放入文件​ .env ​中。

Cursor + Commerce

App Builder凭据

您应该更新文件​ .env ​中第54-55行的以下变量:

  • AIO_RUNTIME_NAMESPACE=
  • AIO_RUNTIME_AUTH=

您可以通过返回您的Adobe I/O项目来检索这些变量的值。 转到​ Workspace概述 ​并单击​全部下载

Cursor + Commerce

随后将下载类似这样的文件。 使用文本编辑器打开该文件。

Cursor + Commerce

向右滚动,直到看到​运行时。 然后您应该会看到包含​ AIO_RUNTIME_NAMESPACE ​值的字段​name

Cursor + Commerce

进一步向右滚动直到看到​auth,其中包含​ AIO_RUNTIME_AUTH ​的值。

Cursor + Commerce

将这两个值粘贴到文件​ .env ​的第54-55行上,然后您应该拥有它。

Cursor + Commerce

您的​ .env ​文件现已完全配置。

1.7.2.5工作区.json

在上一步中,您从Adobe I/O项目下载了类似这样的文件。

Cursor + Commerce

重命名该文件并使用名称workspace.json

Cursor + Commerce

将文件复制到目录​脚本>上线>配置​中。

Cursor + Commerce

1.7.2.6 Adobe I/O登录

返回您以前使用的终端窗口。 输入命令aio login

Cursor + Commerce

随后,您应该会在通过浏览器登录后看到此信息。

Cursor + Commerce

1.7.2.7准备部署

复制以下提示并将其粘贴到光标中。 然后,单击​ 发送 ​按钮。

Please deploy this code to Adobe I/O

Cursor + Commerce

单击​ 运行 ​以允许操作,光标可能会要求您多次确认操作。

Cursor + Commerce

部署将在几分钟后完成。

Cursor + Commerce

复制以下提示并将其粘贴到光标中。 然后,单击​ 发送 ​按钮。

run the onboarding to commerce

Cursor + Commerce

几分钟后,您应该会看到此内容。

Cursor + Commerce

复制以下提示并将其粘贴到光标中。 然后,单击​ 发送 ​按钮。

subscribe to commerce events

Cursor + Commerce

几分钟后,您应该会看到此内容。

Cursor + Commerce

1.7.2.8在Adobe Commerce as a Cloud Service中验证配置

转到https://experience.adobe.com。 单击​Commerce

Cursor + Commerce

单击您的Adobe Commerce as a Cloud Service环境以将其打开,然后登录。

Cursor + Commerce

转到​系统,然后转到​事件订阅

Cursor + Commerce

然后,您应该会看到此事件订阅列表。

Cursor + Commerce

转到​商店,然后转到​配置

Cursor + Commerce

转到​ Adobe服务 ​并选择​Adobe I/O Events。 然后,您应该看到字段​ Adobe I/O Workspace配置 ​的值包含几个星号,并且字段​ 贸易商ID ​也应该具有类似于--aepUserLdap--_commerce_events的值。

Cursor + Commerce

完成此配置后,您现在可以测试配置。

1.7.2.9测试您的方案

打开您的网站。

Cursor + Commerce

转到​ 监视 ​并单击任何产品。

Cursor + Commerce

配置产品并单击​添加到购物车

Cursor + Commerce

单击​ 购物车 ​图标并选择​结帐

Cursor + Commerce

填写您的详细信息,然后单击​下订单

Cursor + Commerce

然后,您应该会看到订单确认。

Cursor + Commerce

切换到webhook应用程序。 您现在应该会看到刚刚确认的订单的传入事件。

Cursor + Commerce

1.7.2.10 Adobe I/O调试

返回您的Adobe I/O项目。 转到​Workspace概述。 您应会看到类似以下的内容。 向下滚动一点。

Cursor + Commerce

单击以打开​Commerce订单同步

Cursor + Commerce

转到​调试跟踪。 您可以在该处找到最新的传入事件及其有效负载。 这有助于了解已处理哪些事件以及是否成功处理了这些事件。

Cursor + Commerce

后续步骤

返回到适用于Adobe Commerce的智能开发人员工具

返回所有模块

recommendation-more-help
4bbf020c-24db-4a43-b239-88fab142f02d