从人工到 AI，源码全送！我用华为云 MaaS+OpenTiny 实现商城商品智能化管理

案例介绍

本案例选择 OpenTiny NEXT 作为示例，通过 CLI 端直连云开发环境、借助 OpenTiny NEXT 提供的工具，将一个传统 Web 应用转变成智能应用，体验让 AI 智能体代替人操作 Web 应用。

案例内容

一、概述

1. 案例介绍

OpenTiny NEXT提供了一套完整的企业智能前端开发解决方案。它提供了 TinyVue 前端智能组件库、TinyEngine 智能低代码平台、TinyRobot 企业智能助手、WebAgent 智能代理等解决方案。OpenTiny NEXT 是基于标准的 MCP 协议实现的，具备通用性和广泛的适用性，可以通过各种不同类型的 MCP Host 来控制 Web 应用，比如可以通过网页上的 AI 对话框来控制 Web 应用，也可以通过 VSCode、Copilot、Cursor 等 IDE 工具，或者通过 Dify、Coze 等智能体平台来操控，甚至可以通过手机 App、微信小程序等方式远程遥控 Web 应用，开发者可以像微信聊天一样与 AI 对话，让 AI 帮助操作各类 Web 应用，助力企业将传统 Web 应用转变成 Agentic Web 应用。

本案例借助 OpenTiny NEXT 提供的工具，将一个传统商城应用转变成智能应用，体验让 AI 智能体代替人完成商品上下架操作。

华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者 从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。

2. 适用对象

• 企业

• 个人开发者

• 高校学生

3. 案例时间

本案例总时长预计 120 分钟。

4. 案例流程

说明：

1. 下载 CLI 工具包，本地连接 VSCode；

2. 云开发环境部署项目代码；

3. 使用 OpenTiny 完成项目智能化。

5. 资源总览

本案例预计花费 0 元。

二、环境配置

1. 本地 VSCode 连接云开发环境

本案例中，使用华为云《本地VSCode基于华为开发者空间云开发环境完成小程序开发》的“二. 环境配置”、“三. 本地 IDE 直连云开发环境完成上传下载”的“1.下载 VS Code 并安装 Remote-SSH 插件”、“2.连接云开发环境”完成环境配置、创建云开发环境、开机、下载第三方插件 IDE、通过 CLI 工具连接本地和云开发环境的功能。

三、部署电商项目

此处提供了一个传统的电商网站示例项目，该项目主要包含电商商城前端应用、电商后台管理系统、电商后端三个部分，前端项目基于 Vite+Vue3+TinyVue 技术栈，后端项目基于 Express。

• shop 电商商城前端应用，给终端用户使用，用于购买商品，比如：浏览商品、加入购物车、下单购买商品等；

• shop-admin 电商后台管理系统，给电商公司内部同事管理商品，比如：增加商品、删除商品、修改商品库存等；

• shop-server 电商后端，用于商品数据存储，并给前端项目提供 API 接口。

1. 下载代码

打开 VSCode 代码编辑器，“Ctrl + `” 打开终端命令行工具，使用 git clone 命令克隆电商项目代码。

git clone https://gitcode.com/opentiny-next/shop.git

2. 更新 npm 版本

（1）进入 shop 目录：

cd shop

（2）查看 nodejs 的版本

node -v

注：这里我们看到云开发环境预置的 nodejs 版本为 v12.22.11,本案例需要 v18 及以上的版本才可以进行。下面我们先安装 nodejs 的新版本。

（3）删除旧版本

sudo yum remove nodejs npm -y

（4）下载并安装 nodejs 注：由于云开发环境为 ARM64 架构，对于 ARM64 架构，通过如下命令下载安装包：

wget https://nodejs.org/dist/v18.17.0/node-v18.17.0-linux-arm64.tar.xz

然后解压安装包：

tar -xvf node-v18.17.0-linux-arm64.tar.xz

（5）创建符号链接

移动到合适位置

sudo mv node-v18.17.0-linux-arm64 /usr/local/nodejs

通过如下命令创建符号连接：

sudo ln -sf /usr/local/nodejs/bin/node /usr/bin/nodesudo ln -sf /usr/local/nodejs/bin/npm /usr/bin/npmsudo ln -sf /usr/local/nodejs/bin/npx /usr/bin/npx

安装验证：

node -v
npm -v

3. 启动电商项目

（1）启动电商服务器依次执行如下命令，先启动电商服务器。

cd packages/shop-server
npm i
npm run dev

注：点击右下角的“Open in Browser”,我们会发现访问并没有页面展示，那是因为我们只启动了服务器。接下来我们继续启动商城前后端管理页面。

（2）启动电商商城前端应用最上方菜单栏点击【Terminal】重新打开一个终端窗口，依次执行如下命令，启动电商前端应用。

cd shop/packages/shop
npm i
npm run dev

操作命令如下图所示：

页面自动跳转浏览器，或者点击右下角“Open in Browser”跳转浏览器访问前端管理页面。如下图所示：

（3）启动电商商城后台管理系统继续重新打开一个终端窗口，依次执行如下命令，启动电商后台管理系统。

cd shop/packages/shop-admin
npm i
npm run dev

操作命令如下图所示：

页面自动跳转浏览器，或者点击右下角“Open in Browser”跳转浏览器访问后台管理系统。如下图所示：

而我们 VSCode 此时是启动了 3 个服务。如下图所示：

注：若是没有自动打开浏览器访问，或者右下角也没有“Open in Browser”字样，我们还可以通过电商商城前端应用，电商后台管理系统此连接进行访问。

4. 传统商城操作

后台商品管理操作点击添加商品：

添加商品：

商品管理页面成功添加商品：

除了添加商品功能，还可以编辑和删除，因功能较为简单，此处不再赘述，开发者们可以根据自己的需求进行测试和二次开发。

四、商品管理智能化改造

我们以电商后台管理系统-商品管理为例，介绍如何接入 OpenTiny NEXT，实现智能化改造。

1. 安装 NEXT SDK

（1）进入到 shop-admin 目录下（可以重新打开一个终端，或者在原 shop-admin 终端直接操作），安装 NEXT SDK。

cd shop/packages/shop-admin
npm i @opentiny/next-sdk

2. 配置 MCP 工具

（1）创建 MCP Server 修改 Products.vue 在 shop->packages->shop-admin->/src/views/Products.vue 文件中加入以下代码：

import { inject } from 'vue'import { WebMcpServer, z } from '@opentiny/next-sdk'
const serverTransport = inject('serverTransport')
const server = new WebMcpServer()
// 注册添加商品工具，支持所有商品属性server.registerTool(  'add-product',  {    description: '添加商品，上架商品，请随机生成商品ID、商品价格、商品描述、商品图片URL、商品库存等信息，不要要求用户提供这些信息。',    inputSchema: {      id: z.number().describe('商品ID'),      name: z.string().describe('商品名称'),      price: z.number().describe('商品价格'),      description: z.string().describe('商品描述'),      image: z.string().describe('商品图片URL，如果无法获取图片连接则使用默认的链接：https://img1.baidu.com/it/u=809120544,2106407569&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),      category: z.string().describe('商品分类, 分类范围：phones,laptops,tablets;要求分类必填，自行推导出商品的类别'),      stock: z.number().describe('商品库存，数量'),      status: z.enum(['on', 'off']).describe('商品状态，on为上架，off为下架')    }  },  async (productData: ProductForm) => {    // 显示添加商品弹窗并填充数据    productData.id = productData.id || new Date().getTime()    const success = await store.addProduct(productData)
    return {      content: [        {          type: 'text',          text: `商品数据: ${productData.name}，价格: ${productData.price}，库存: ${productData.stock}`        }      ]    }  })
onMounted(async () => {  await server.connect(serverTransport)})

根据排版样式，我们建议将上述代码放在 136 行后面，如下图所示：

注：打开 Products.vue 文件时，若右下角提醒安装 Vue(Official)插件，直接点击安装即可。

（2）创建 MCP Client 修改 App.vue

import { onMounted, provide } from 'vue'import { WebMcpClient, createMessageChannelPairTransport } from '@opentiny/next-sdk'
const [serverTransport, clientTransport] = createMessageChannelPairTransport()provide('serverTransport', serverTransport)const client = new WebMcpClient()
const sessionId = localStorage.getItem('my-custom-sessionId')
onMounted(async () => {  await client.connect(clientTransport)  const { sessionId: id } = await client.connect({    agent: true,    url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp',    sessionId  })  console.log('sessionId:', id)  localStorage.setItem('my-custom-sessionId', id)
  showRemoter.value = true})

根据排版样式，我们建议将上述代码放在第 7 行后面，如下图所示：

2. 配置大模型

（1）开通商用 DeepSeek-V3-64K 服务华为云 MaaS 提供了商用按 token 计费模型和单模型 200 万免费 Tokens。点击领取 DeepSeek-R1/V3-64K 百万 tokens 代金券

点击【立即申请】，领取成功之后，按照【使用说明】指导进行购买。

购买时选择代金券即可，无需开发者另行付费。

购买完成后，使用浏览器访问ModelArts Studio首页，点击 ModelArts Studio 控制台跳转到登录界面，按照登录界面提示登录，即可进入 ModelArts Studio 控制台。

进入 ModelArts Studio 控制台首页，区域选择【西南-贵阳一】，在左侧菜单栏，选择【在线推理】 > 【预置服务】 > 【商用服务】，选择【DeepSeek-V3-64K 模型】，点击【开通服务】。

注：开通服务后会根据消耗 tokens 收费，请注意账户扣费和余额！

开通 DeepSeek-V3-64K 服务后点击调用说明，获取对应的 API 地址、模型名称。

点击 API Key 管理->创建 API Key，自定义标签和描述，点击确定创建 API Key。（注意保存好 API Key）。

到这里华为云 MaaS 提供的免费 DeepSeek Tokens 就领取完成啦！记录对应的 API 地址、模型名称、API Key 留作下面步骤使用。

（2）继续在 shop-admin 目录下，安装 NEXT Remoter。

npm i @opentiny/next-remoter

在 App.vue 中使用 Remoter。具体步骤如下：在 shop->packages->shop-admin->/src/App.vue 文件中加入以下代码：

import { TinyRemoter } from '@opentiny/next-remoter'import '@opentiny/next-remoter/dist/style.css'

根据排版样式，我们建议将上述代码放在第 7 行后面，如下图所示：

在 shop->packages->shop-admin->/src/App.vue 文件中继续加入以下代码：

<TinyRemoter v-model:show="show" v-if="showRemoter" qrCodeUrl="https://ai.opentiny.design/next-remoter/shop.html" :sessionId="sessionId" title="我的AI助手"      systemPrompt="你是商品管理员，擅长通过工具调用帮助用户查询商品列表，管理商品。新增商品时如果商品信息不完整，请自动补充完整。" :llmConfig="llmConfig" />

根据排版样式，我们建议将上述代码放在第 3 行后面，如下图所示：

继续在 shop->packages->shop-admin->/src/App.vue 文件中加入以下代码：

import { ref } from 'vue'
const show = ref(false)const showRemoter = ref(false)
// 使用环境变量配置const llmConfig = {  apiKey: '更换成自己的api key',  baseURL: 'https://api.modelarts-maas.com/v1',  providerType: 'deepseek',  model: 'DeepSeek-V3'}

根据排版样式，我们建议将上述代码放在第 14 行后面，如下图所示：

参数说明

• apikey：即为“3.配置大模型”时创建的 apikey,每个账号都是独立的。

• baseURL：即为“3.配置大模型”领取的 MaaS 的 api 地址，此处 V3 地址即为代码中的地址。

• providerType：此处选用 deekseek。

• model：模型选用“3.配置大模型”时，领取的 DeepSeek-V3。

3.加载智能 AI 组件

在浏览器重新刷新页面，可以看到右下角多出一个 AI 对话框，点击 AI 对话框，会弹出四个菜单栏。如下图所示：

注：若是没有弹出 AI 对话框，我们就对后台管理页面进行重启尝试，命令如下：

cd shop/packages/shop-admin
npm i
npm run dev

4. 智能化添加商品

点击【弹出 AI 对话框】，会弹出 OpenTiny NEXT 的智能输入框，在输入框内，我们通过自然语言描述完成商品智能添加，如：帮我上架 10 台 Huawei pura 80 手机，价格是 5999。

前端页面也可以刷新出来上架的商品了。如下图所示：

注：由于是随机输入，智能助手会根据自己的判断进行上架商品。若是需要更加准确的上架信息，只需提供更加精准的上架信息即可。

5. 移动端智能化添加商品

点击弹出二维码，弹出二维码页面，通过手机扫描该二维码，则可以在移动端对商品进行管理。二维码如下图所示：

移动端操作页面如下图所示：

商城后台管理系统显示如下图所示：

商城前端页面显示如下图所示：

查看原文：https://devstation.connect.huaweicloud.com/space/devportal/casecenter/024801b76ef04f79921023291c9f4a7b/1

关于 OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design

OpenTiny 代码仓库：https://github.com/opentiny

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码：https://github.com/opentiny/tiny-engine

OpenTiny NEXT 已正式发布，官网、文档、示例、Demo 一站配齐。未来已来，欢迎上车！

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~