> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 教程：文档生成器

> 构建一个真实的 Twenty 应用，从你的 CRM 数据生成个性化文档。

在本教程中，你将构建 **Document Generator** —— 一个应用，它将可复用的模板转换为使用你现有 CRM 数据生成的个性化文档。

使用 `{{placeholders}}` 一次性编写模板，然后即可为任意 Person 或 Company 一键生成已填充的文档——可从命令菜单、AI 代理或工作流中发起。

<Frame caption="为特定人员生成的单个模板，以可打印页面的形式打开。">
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/07-rendered-document.png?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=8b99ef8465512b51a2f7233518a869d2" alt="生成的销售提案文档" width="1600" height="1178" data-path="images/docs/developers/extends/apps/document-generator/07-rendered-document.png" />
</Frame>

## 您将会学到什么

每一章都会增加一项功能。 在本教程结束时，您将接触到 SDK 的大部分内容。

| 章节                                                                                        | 功能                                                 | 参考                                                             |
| ----------------------------------------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------- |
| [1. 数据模型](/l/zh/developers/extend/apps/tutorials/document-generator/data-model)           | 对象、字段和一个关系                                         | [数据](/l/zh/developers/extend/apps/data/overview)               |
| [2. 生成文档](/l/zh/developers/extend/apps/tutorials/document-generator/generating-documents) | 一个逻辑函数（AI 工具 + 工作流操作），用于填充 Markdown 模板并附加一份精美的 PDF | [逻辑函数](/l/zh/developers/extend/apps/logic/logic-functions)     |
| [3. HTTP 路由](/l/zh/developers/extend/apps/tutorials/document-generator/http-routes)       | 从路由提供 JSON 和可分享的 HTML 页面                           | [逻辑函数](/l/zh/developers/extend/apps/logic/logic-functions)     |
| [4. 构建 UI](/l/zh/developers/extend/apps/tutorials/document-generator/building-the-ui)     | 视图、导航、命令菜单，以及用于预览文档和编辑模板的前端组件                      | [布局](/l/zh/developers/extend/apps/layout/overview)             |
| [5. 一个 AI 智能体](/l/zh/developers/extend/apps/tutorials/document-generator/ai-agent)        | 智能体 + 技能                                           | [技能与智能体](/l/zh/developers/extend/apps/logic/skills-and-agents) |
| [6. 发布](/l/zh/developers/extend/apps/tutorials/document-generator/publishing)             | 把它发布到应用市场                                          | [发布](/l/zh/developers/extend/apps/operations/publishing)       |

## 先决条件

您应该已经完成了[快速开始](/l/zh/developers/extend/apps/getting-started/quick-start)：
一个在端口 `2020` 上运行的本地 Twenty 服务器，以及已通过身份验证并连接到它的 CLI。

如果还没有，现在就创建并启动一个：

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest document-generator
cd document-generator
yarn twenty dev
```

<Note>
  更想直接阅读完成版代码？ 完整应用位于
  [`packages/twenty-apps/examples/document-generator`](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/examples/document-generator)。
  下面的每个代码片段都来自该应用。
</Note>

## 应用如何协同运作

<Frame>
  <img src="https://mintcdn.com/twenty/sqJBeTZq-W-RDBPU/images/docs/developers/extends/apps/document-generator/how-it-fits.svg?fit=max&auto=format&n=sqJBeTZq-W-RDBPU&q=85&s=5a4ecd9077a5d8a07d46ae5c1dee1439" alt="带有占位符的模板会被生成为一份带 PDF 的精美文档，可以通过命令菜单、AI 智能体、工作流或可分享链接来触发" width="900" height="380" data-path="images/docs/developers/extends/apps/document-generator/how-it-fits.svg" />
</Frame>

您只需在富文本编辑器中编写一次**模板**，其中包含 `{{placeholders}}`。 选择一个
模板和一条 CRM 记录，就会填充占位符，并存储一份精美的
**文档**（带有一个 PDF 文件）。 其他所有内容——命令菜单、AI 智能体、工作流步骤、可分享链接——都只是触发同一个生成器的不同方式。

## 让这个循环持续运行

在整个教程期间，在一个终端中保持运行 `yarn twenty dev`。 每当您在 `src/` 下添加或编辑文件时，它都会在几秒钟内重新同步到服务器，这样您就可以在构建的同时，在 UI 中看到每项功能逐步出现。

<Card title="开始构建 →" icon="database" href="/l/zh/developers/extend/apps/tutorials/document-generator/data-model">
  第 1 章：为文档和模板建模。
</Card>