> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/ai-vibe-coding/zh/intro.md).
# 制作迷你应用
即使只有“我希望有这样的应用”这个想法也足够了。即使不懂代码，只要用语言向 AI 说明你想要的内容，AI 就会代你编写代码。
本文将从头到尾，按顺序说明一整个流程：一边与 Claude Code、Codex 等 AI 工具对话，一边把想法做成可以实际运行的 Apps in Toss 迷你应用。
{% hint style="info" %}
**适合这些人**
* 完全没有写过代码的人
* 有应用创意，但不知道该从哪里开始的人
* 想借助 AI 快速制作迷你应用的人
{% endhint %}
如果你已经有 Web 项目，那么请查看现有的 [Web 项目开发指南](/ai-vibe-coding/zh/tutorials/webview.md)；如果你想用 React Native 开发，请查看 [React Native 开发指南](/ai-vibe-coding/zh/tutorials/react-native.md)。
***
### 1. 安装 AI 工具
先安装能代你开发应用的 AI 工具，并准备好开发所需的基本环境。
请按照你要使用的 MCP 客户端对应的步骤进行。
如果你已经在使用其他 AI 工具，这一步可以跳过。
{% tabs %}
{% tab title="Claude Code" icon="claude" %}
Claude Code 是在终端中使用的 AI 开发工具。 \
请先在我的电脑上确认是否可以使用 `claude` 命令。
**macOS**
1. 在键盘上按 `Command(⌘) + Space`打开 Spotlight 搜索。
2. `终端`并按 Enter。
3. 终端窗口打开后，输入下面的命令并按 Enter。
```bash
claude
```
**Windows**
1. 在开始菜单中 `PowerShell`搜索并打开。
2. PowerShell 窗口打开后，输入下面的命令并按 Enter。
```powershell
claude
```
Claude Code 运行后，请完成登录。
`claude`显示找不到时 [Claude Code 安装指南](https://code.claude.com/docs/en/quickstart)，并按照你正在使用的操作系统安装 Claude Code CLI。\
安装完成后，请重新打开终端或 PowerShell，然后再次 `claude`运行。
{% endtab %}
{% tab title="Codex" icon="openai" %}
Codex 可以在 ChatGPT 桌面应用中使用。
[ChatGPT 应用下载页面](https://chatgpt.com/download/)，下载与你正在使用的操作系统（macOS·Windows）对应的安装文件并完成安装。
安装完成后，请启动 ChatGPT 应用并登录。\
点击左上角的 `ChatGPT` 按钮， `Codex`并选择。
{% embed url="" %}
{% endtab %}
{% endtabs %}
***
### 2. 连接用于 Apps in Toss 开发的插件
为了让 AI 能够查找 Apps in Toss 文档、创建迷你应用并注册到控制台， `apps-in-toss` 插件。
#### 2-1. 安装 Git
在安装插件之前需要 Git。请先根据你正在使用的操作系统安装 Git。
{% tabs %}
{% tab title="macOS" %}
[Git macOS 下载页面](https://git-scm.com/downloads/mac)，并按照说明完成安装。
在 macOS 上，只需安装包含 Git 的 Xcode Command Line Tools 即可。
1. 在键盘上按 `Command(⌘) + Space`打开 Spotlight 搜索。
2. `终端`并按 Enter。
3. 终端窗口打开后，粘贴下面的命令并按 Enter。
```bash
xcode-select --install
```
4. 安装窗口出现后，请按照说明完成安装。
5. 安装完成后，请先关闭再重新打开你正在使用的 AI 工具。
{% endtab %}
{% tab title="Windows" %}
[Git for Windows 下载页面](https://git-scm.com/downloads/win)，下载安装文件并运行。
大多数 Windows 电脑选择下面这一项即可。
`Git for Windows/x64 Setup`
只有在使用 ARM 架构的 Windows 设备时，才选择下面这一项。
`Git for Windows/ARM64 Setup`
安装完成后，请先关闭再重新打开你正在使用的 AI 工具。
{% endtab %}
{% endtabs %}
如果你想确认是否安装成功，或者中途卡住了，可以像下面这样向 Claude Code 或 Codex 请求帮助。
```
帮我确认 Git 是否已经安装。
如果还没安装，请一步步带我完成。
```
#### 2-2. 安装 apps-in-toss 插件
请按照你正在使用的 MCP 客户端对应的步骤 `apps-in-toss` 安装插件。
{% tabs %}
{% tab title="Codex" icon="openai" %}
在 Codex 中，可在 ChatGPT 桌面应用的 Plugins 界面中 `apps-in-toss` 插件。
{% embed url="" %}
1. 打开 ChatGPT 桌面应用。
2. 点击左上角的 `ChatGPT` 按钮， `Codex`切换为。
3. 在 Codex 界面中打开 Plugins 设置。
4. 点击 Marketplace 添加按钮。
5. 在画面的 `来源`中 `toss/apps-in-toss-harness` 并输入以添加。
6. 在 Personal（个人）标签页中新添加的 `apps-in-toss` 插件。
7. `apps-in-toss-console` 完成登录。
8. `/ait:welcome` 并输入。
{% endtab %}
{% tab title="Claude Code" icon="claude" %}
在 Claude Code 中，使用 Claude CLI 安装插件。
先在 macOS 上打开终端，在 Windows 上打开 PowerShell， `claude`并输入，确认 Claude Code 是否能运行。
```bash
claude
```
`claude` 如果命令无法识别， [Claude Code 安装指南](https://code.claude.com/docs/en/quickstart)请先在中安装 Claude Code CLI，然后再继续。
如果 Claude Code 已准备好，请按顺序执行下面的命令。
{% embed url="" %}
```bash
claude plugin marketplace add toss/apps-in-toss-harness
claude plugin install ait@apps-in-toss -y
claude
```
在 Claude 对话中 `/mcp`并输入， `apps-in-toss-console` 请登录。
`/ait:welcome` 并输入，以确认插件是否安装成功。
{% endtab %}
{% endtabs %}
***
### 3. 开发
从现在开始，你不需要记住复杂的命令了。只要用语言向 AI 提出你想做的应用、想添加的功能、想测试的场景即可。
{% hint style="info" %}
**按这个顺序进行**
1. 说明你想制作的应用。
2. AI 会整理应用结构和所需功能。
3. 制作迷你应用并准备代码。
4. 逐个添加所需功能。
5. 在我手机上的 Toss 应用中进行测试。
6. 如果有问题，就带上截图再让它修正。
7. 准备完成后，请请求审核。
{% endhint %}
#### 3-1. 规划
请把你想制作的迷你应用创意告诉 AI。像下面这样请求的话，AI 会帮你确认是否符合 Apps in Toss 政策，并整理出所需画面和功能进行建议。\
如果你满意这个建议，就可以直接继续；如果与你想要的方向不同，也可以再请求修改完善。
```
我想制作[想做的应用说明]。
1. 请确认这是否符合 Apps in Toss 开放政策。
2. 请整理需要哪些页面和功能。
3. 在开发过程中，如果有不符合 Apps in Toss 指南的部分，请提前告诉我。
```
#### 3-2. 制作迷你应用
在 Apps in Toss 上注册迷你应用，同时也会一起创建存放代码的空间。请像下面这样请求。\
`{迷你应用名称}` 请在这个位置自由起一个你想要的名称填入。
```
请以 {迷你应用名称} 这个名字帮我制作一个 Apps in Toss 迷你应用。
```
#### 3-3. 请求想要的功能
现在轮到向 AI 逐个请求你想要的功能了。\
只要说明需要什么功能，AI 就会在查看 Apps in Toss 文档的同时帮你实现。\
也可以参考 Apps in Toss 提供的 [功能文档](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-zh/)。
```
我想用 Toss 登录来区分用户。
请按用户分别保存昵称和分数。
请在主页面底部插入横幅广告。
请让我能购买需要付款的物品。
请以当前位置为基准显示附近的商店。
请保存收藏的项目。
```
{% hint style="info" %}
**向 AI 更好地提需求的方法**
* 尽量说得具体些
* 比起“帮我做个按钮”，像“在屏幕中央做一个开始按钮，点击后显示奖励广告”这样说会更准确。
* 不必一次就做到完美
* 如果有不满意的地方，可以轻松地再次请求，例如“这部分请这样改”。
{% endhint %}
通过视频查看制作迷你应用的过程
{% embed url="" %}
#### 3-4. 连接外部存储服务
在迷你应用中， [Storage API](broken://spaces/pKzGxtCGPMEzZAbz7TSP/pages/bP6r4B11x05DL7f8lkSv)可以用于保存数据。不过，由于这些数据保存在用户设备环境中，更换设备或应用数据被重置时可能会消失。
如果有像用户发表的帖子、收藏的商品列表、保存的昵称这类需要在其他设备上也能再次查看，或者需要长期保存的数据，请连接外部存储服务。\
如果没有需要在更换设备后仍保留的数据，这一步可以跳过。
外部存储可使用 Supabase、Firebase、Cloudflare 等服务。\
虽然有可以免费开始的额度，但如果使用量增加或使用付费功能，可能会产生费用。\
实际应用前，请确认各服务的最新价格方案、限制事项以及是否可以与迷你应用集成。
* [Supabase](https://supabase.com/)：提供基于 PostgreSQL 的数据库的后端服务。可用于保存帖子、用户设置、收藏列表等结构化数据。
* [Firebase](https://firebase.google.com/?hl=ko)：Google 提供的后端服务。可以使用 Firestore 或 Realtime Database 将应用所需的数据保存到外部。
* [Cloudflare](https://www.cloudflare.com/ko-kr/)：提供响应速度很快的基础设施服务。可以使用 Workers KV、D1、R2 等，用于保存相对轻量的数据或文件。
{% hint style="warning" %}
**请确认安全设置**
外部存储通常默认处于任何人都可以访问数据的状态。
如果让 AI“也帮我确认安全设置”，它会指导你如何安全地进行配置。
服务控制台中也有需要你亲自执行的部分，请按照 AI 的指引操作。
{% endhint %}
***
### 4. 测试和发布
迷你应用并不是只能在全部做完后才能测试。开发过程中，只要你想查看画面，随时都可以顺手测试。
#### 4-1. 用 Toss 应用测试
你可以在我手机上的 Toss 应用中测试迷你应用。像下面这样请求即可。AI 会把它准备成可测试状态，并告诉你如何在手机上打开。
```
我想在我手机上的 Toss 应用中确认我做的迷你应用。
请发送推送消息，让我可以测试。
```
测试时所需条件
* 需要已登录 Toss 应用。
* 需要是工作区成员。
* 需要年满 19 岁。
如果看到错误或奇怪的画面，请截图给 AI 看。AI 无法直接看到真实设备画面，因此结合截图进行说明会更准确地修正。
```
我在这个画面点击了支付按钮，但没有任何反应。
请看截图，找出原因并修复。
```
如果没有按你想的那样运行，可以轻松再次请求，比如“请把这部分这样改”。修改后再测试即可。（例如：“请把主页面的横幅广告再往下移一点”）
如果你想提前预防错误，可以请求接入 Sentry。\
出错时，AI 可以直接查看日志，因此能更快更准确地找到原因。
通过视频查看在 Toss 应用中测试的过程
{% embed url="" %}
#### 4-2. 发布
要发布迷你应用，首先需要通过 Apps in Toss 团队的审核。\
审核是确认迷你应用是否遵守政策和指南的流程。测试完成后，请请求审核。
```
我想发布迷你应用。请帮我请求审核。
```
审核结果会通过控制台和电子邮件通知你。\
审核通过后，必须在控制台点击“发布”按钮，迷你应用才会向用户公开。\
发布后，1 小时后就会立即反映到 Toss 迷你应用列表中。
在制作完应用之后，为了接近用户， [营销指南](https://appsintoss.gitbook.io/appsintoss-docs/guide/marketing)也一起参考看看吧。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developers-apps-in-toss.toss.im/ai-vibe-coding/zh/intro.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.