Dans ce guide, vous allez créer votre premier fichier de schéma Firestore et lancer un visualiseur de documentation interactif. Le processus complet prend environ 5 minutes — pas de backend, pas d'étape de build, aucun framework requis. JSON Schema.
Étape 1 : Créer un fichier de schéma
Créez un dossier appelé schemas dans votre projet. À l'intérieur, créez un fichier appelé users.schema.json. Ce fichier décrit la structure de votre collection Firestore users :
{
"$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"]
}
}Structure des dossiers
your-project/
└── schemas/
└── users.schema.json💡 Le nom du fichier détermine le nom de la collection. users.schema.json devient la collection users. Pour les sous-collections, utilisez des dossiers imbriqués : schemas/users/orders.schema.json.
Étape 2 : Ajouter le visualiseur au HTML
Créez un fichier index.html à la racine de votre projet (au même niveau que le dossier schemas). Ajoutez ces lignes :
<!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>💡 C'est tout — seulement 2 lignes pour le CSS et le JS. L'option schemasDir indique à FireSchema où trouver vos fichiers de schéma. Il découvrira automatiquement tous les fichiers .schema.json dans ce répertoire.
Étape 3 : Ouvrir dans le navigateur
Servez le dossier de votre projet avec n'importe quel serveur statique. Si vous avez Node.js installé :
npx serve .Ouvrez http://localhost:3000 et vous verrez votre documentation interactive de schémas Firestore. Cliquez sur la collection users pour explorer ses champs, types et descriptions.
Prochaines étapes
Maintenant que votre premier schéma fonctionne, voici la suite :
Apprendre JSON Schema pour Firestore
Maîtrisez les types, les règles de validation et les patterns spécifiques à Firestore
Documentation d'équipe
Découvrez comment les équipes utilisent FireSchema pour l'intégration et la collaboration
Bonnes Pratiques Firestore
15 règles pour une conception de base de données évolutive