# 测试应用

> 送审前测试 Shoplazza 应用：创建开发店铺、按你的后端情况选择安装方式，再验证核心功能与扩展。

测试应用分三步，需依次完成：

1. **创建开发店铺**（第一步）：用于安装尚未上架应用的沙箱店铺，只需创建一次。
2. **安装应用**（第二步）：具体步骤取决于你的后台完成到哪一步。
3. **验证应用功能**（第三步）：检查核心功能和各类扩展。

## 你属于哪种场景？

| 场景 | 适用情况 |
|---|---|
| **场景一：仅测试安装流程** | 刚用 CLI 创建工程，前端业务界面、后台服务、OAuth 流程都还没实现。 |
| **场景二：后台服务在本地** | 你完成了[开发独立应用](/docs/app/getting-started/create-public-app/develop-app)或[开发嵌入式应用](/docs/app/getting-started/create-public-app/embed-in-admin)（如需收费，已完成计费配置），后台跑在你自己的机器上。 |
| **场景三：后台服务在远程服务器** | 后台单独开发，部署在有公网域名的服务器上，OAuth 回调路由已经实现。 |

## 第一步：创建开发店铺

开发中的应用无法上架应用市场，商家没法直接安装，因此需要通过**开发店铺**来测试。开发店铺是专门提供给合作伙伴的沙箱店铺类型。

两点说明：

- 开发店铺可以安装和[测试](/docs/app/publish-and-operate/app-requirements/performance#测试方法)同一合作伙伴账号下的应用。
- 每个合作伙伴账号最多创建 10 个开发店铺，且不可转让。

1. 在 [Shoplazza Partners](https://partners.shoplazza.com) 中点击"选择店铺"

![](https://cnres.appracle.com/953802347f0fb278e50d51384f5c0a97.png)

2. 点击"添加店铺"

![](https://cnres.appracle.com/8938a611bbb95a0d7af2838af53001de.png)

3. 输入"店铺名称"和"店铺 URL"，然后点击"创建"

![](https://cnres.appracle.com/c8025bb5affa5b2309d34c7574dc4bbc.png)

## 第二步：安装应用

### 场景一：仅测试安装流程

后台还没实现，应用无法自行完成安装，由 `shoplazza app dev` 内置的服务临时充当授权服务：

1. 在工程根目录运行 `shoplazza app dev`，并保持运行

2. 把终端打印的 App URL 和 Redirect URL 填入 Partners 后台的应用设置

3. 在浏览器打开 Install URL，完成授权安装

:::note
这样装上的只是一个应用壳，没有实际功能；如需正式发布给商家使用，需按[开发独立应用](/docs/app/getting-started/create-public-app/develop-app)补全应用功能。
:::

### 场景二：后台服务在本地

Shoplazza 需要通过公网地址访问你本地运行的服务来完成安装授权，这就是 ngrok 的作用。

1. 在工程根目录运行 `shoplazza app dev`，它会把项目里的扩展代码（主题 / 结账 / 函数）推送到开发者自己的测试店铺。没有扩展的话可以跳过这一步。

2. 启动你的服务，应用服务和 ngrok 隧道各占一个终端：

    ```bash
    # 启动应用服务
    npm run start
    ```

    ```bash
    # 启动 ngrok，把本地 3000 端口映射到一个公网地址
    ngrok http 3000
    ```

    ngrok 启动后会打印一个公网地址（形如 `https://xxx.ngrok-free.dev`）

3. 在 Partners 中，把这个地址填入应用设置：

    - `App URL` 填 `https://xxx.ngrok-free.dev/auth`
    - `Redirect URL` 填 `https://xxx.ngrok-free.dev/auth/callback`

    ![Image](https://cnres.appracle.com/eb8dfed34ba0c181dc6bad4c831c9e69.png)

4. 点击"应用详情页 → 应用测试 → 选择店铺 → 安装App"

    ![Image](https://cnres.appracle.com/07ae9e27d092d0d11ccab2c17a8392f8.png)

5. 重定向到 Shoplazza 授权页面后，点击"安装App"

    ![Image](https://cnres.appracle.com/636bbd9d74cbc4aa54f5e44a03a34627.png)

6. 授权成功后：独立应用会重定向到应用首页，嵌入式应用则以 iframe 形式在店铺后台中打开

    ![Image](https://cnres.appracle.com/8e97b0bdc94e1dcef92724228dbe4930.png)

### 场景三：后台服务在远程服务器

本地 app 工程只保留前端业务界面和扩展，OAuth 授权、token 保管与 OpenAPI 调用都在远程后台完成。

1. 在工程根目录运行 `shoplazza app dev`，它会把项目里的扩展代码（主题 / 结账 / 函数）推送到开发者自己的测试店铺。没有扩展的话可以跳过这一步。

2. 把远程服务的地址填入 Partners 后台的应用设置：

    - `App URL` 填 `https://你的域名/auth`
    - `Redirect URL` 填 `https://你的域名/auth/callback`

    路径以远程服务实际实现的为准，与这里填写的一致即可。

3. 点击"应用详情页 → 应用测试 → 选择店铺 → 安装App"

    ![Image](https://cnres.appracle.com/07ae9e27d092d0d11ccab2c17a8392f8.png)

4. 重定向到 Shoplazza 授权页面后，点击"安装App"。授权本身由你的远程服务处理。

    ![Image](https://cnres.appracle.com/636bbd9d74cbc4aa54f5e44a03a34627.png)

5. 授权成功后：独立应用会重定向到应用首页，嵌入式应用则以 iframe 形式在店铺后台中打开

    ![Image](https://cnres.appracle.com/8e97b0bdc94e1dcef92724228dbe4930.png)

6. 直接调用远程后台的接口来调试业务逻辑：本地应用不持有 Shoplazza token，业务请求发给远程后台，由后台用其保存的 token 调用 OpenAPI 并返回结果（token 的获取与存储见 [App 授权参考](/docs/app/building-blocks/authentication/oauth-flow)）。

## 第三步：测试应用功能

逐一验证应用的核心功能是否符合预期。以[开发独立应用](/docs/app/getting-started/create-public-app/develop-app)教程构建的示例应用为例：

1. 在应用首页点击"生成商品"按钮

2. 几秒后会看到创建成功的提示和商品详情

    ![Image](https://cnres.appracle.com/9c725f1649bd2a85ec27a02803d272d8.png)

3. 登录 Shoplazza 店铺后台，在"商品"页面查看刚创建的商品

    ![Image](https://cnres.appracle.com/259c493f85b4d207310a9560fd188b82.png)

如果应用带有扩展，按扩展类型逐一验证：

- **主题扩展**：进入店铺后台的 **在线商店 > 主题编辑器**。

  - Basic（App Block）：把区块添加到支持 `@app` 的 section 中，查看渲染效果。

    ![](https://cnres.appracle.com/10fbeedfdaf8a12d6b9df106c36347ec.png)

  - Embed（App Embed Block）：默认处于关闭状态，先在 **App 管理** 中打开开关，再查看店面效果。

    ![](https://cnres.appracle.com/ec807225ac320b242aab2ced6458e161.png)

- **结账扩展**：打开店面，走到结账页，查看内容是否注入到了配置的扩展点。

  ![](https://cnres.appracle.com/c063b5cea801b10d88ee1d33ebe1e834.png)

- **函数扩展**：打开店面执行加入购物车操作，查看价格修改函数是否生效。

  ![](https://cnres.appracle.com/b9cd969c612766e0c3f9e3c538617d67.png)

扩展没有出现时，参考[主题扩展指南](/docs/app/extensions/online-store/add-theme-extension#排障)和[结账扩展指南](/docs/app/extensions/checkout/add-checkout-extension#排障)的排障小节。

## 下一步

确认应用在开发店铺中运行正常后，继续阅读[提交审核](/docs/app/getting-started/create-public-app/submit-review)。