在本指南中,您将创建第一个 Firestore Schema 文件并启动交互式文档查看器。整个过程大约需要 5 分钟 — 无需后端、无需构建步骤、无需框架。 JSON Schema.
步骤 1：创建 Schema 文件
在您的项目中创建一个名为 schemas 的文件夹。在其中创建一个名为 users.schema.json 的文件。该文件描述了您的 Firestore users 集合的结构：
schemas/users.schema.jsonJSON
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"collection": "users",
"description": "App users with profile information",
"schema": {
"type": "object",
"properties": {
"displayName": {
"type": "string",
"description": "User's display name"
},
"email": {
"type": "string",
"format": "email",
"description": "User's email address"
},
"createdAt": {
"type": "string",
"format": "date-time",
"description": "Account creation timestamp"
},
"role": {
"type": "string",
"enum": ["admin", "editor", "viewer"],
"description": "User role for access control"
}
},
"required": ["displayName", "email", "createdAt"]
}
}文件夹结构
your-project/
└── schemas/
└── users.schema.json💡 文件名决定集合名称。users.schema.json 对应 users 集合。对于子集合,使用嵌套文件夹：schemas/users/orders.schema.json。
步骤 2：将查看器添加到 HTML
在项目根目录（与 schemas 文件夹同级）创建一个 index.html 文件。添加以下内容：
index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Firestore Schema Docs</title>
<link rel="stylesheet" href="https://unpkg.com/firestore-schema-viewer/dist/style.css">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/firestore-schema-viewer/dist/fsv.umd.js"></script>
<script>
FirestoreSchemaViewer.render('#app', {
schemasDir: './schemas/'
})
</script>
</body>
</html>💡 就这么简单 — 只需引入 CSS 和 JS 各一行。schemasDir 选项告诉 FireSchema 在哪里查找您的 Schema 文件。它会自动发现该目录中所有的 .schema.json 文件。
步骤 3：在浏览器中打开
使用任何静态服务器来提供您的项目文件夹。如果您安装了 Node.js：
npx serve .打开 http://localhost:3000,您将看到交互式的 Firestore Schema 文档。点击 users 集合来浏览其字段、类型和描述。
下一步
现在您的第一个 Schema 已经运行,以下是接下来可以了解的内容：