In dieser Anleitung erstellst du deine erste Firestore Schema-Datei und startest einen interaktiven Dokumentations-Viewer. Der gesamte Vorgang dauert etwa 5 Minuten — kein Backend, kein Build-Schritt, kein Framework erforderlich. JSON Schema.
Schritt 1: Schema-Datei erstellen
Erstelle einen Ordner namens schemas in deinem Projekt. Erstelle darin eine Datei namens users.schema.json. Diese Datei beschreibt die Struktur deiner Firestore users-Sammlung:
{
"$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"]
}
}Ordnerstruktur
your-project/
└── schemas/
└── users.schema.json💡 Der Dateiname bestimmt den Sammlungsnamen. users.schema.json wird zur Sammlung users. Für Untersammlungen verwende verschachtelte Ordner: schemas/users/orders.schema.json.
Schritt 2: Viewer zum HTML hinzufügen
Erstelle eine index.html-Datei im Stammverzeichnis deines Projekts (auf derselben Ebene wie der Ordner schemas). Füge diese Zeilen hinzu:
<!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>💡 Das war's — nur 2 Zeilen für CSS und JS. Die Option schemasDir teilt FireSchema mit, wo deine Schema-Dateien zu finden sind. Es erkennt automatisch alle .schema.json-Dateien in diesem Verzeichnis.
Schritt 3: Im Browser öffnen
Stelle deinen Projektordner mit einem beliebigen Static-Server bereit. Wenn du Node.js installiert hast:
npx serve .Öffne http://localhost:3000 und du siehst deine interaktive Firestore-Schema-Dokumentation. Klicke auf die Sammlung users, um ihre Felder, Typen und Beschreibungen zu erkunden.
Nächste Schritte
Jetzt, da dein erstes Schema läuft, hier sind die nächsten Schritte: