Neste guia, você vai criar seu primeiro arquivo de schema Firestore e iniciar um visualizador de documentação interativo. Todo o processo leva cerca de 5 minutos — sem backend, sem build, sem framework necessário. JSON Schema.
Passo 1: Crie um Arquivo de Schema
Crie uma pasta chamada schemas no seu projeto. Dentro dela, crie um arquivo chamado users.schema.json. Este arquivo descreve a estrutura da sua coleção users no Firestore:
{
"$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"]
}
}Estrutura de pastas
your-project/
└── schemas/
└── users.schema.json💡 O nome do arquivo determina o nome da coleção. users.schema.json se torna a coleção users. Para subcoleções, use pastas aninhadas: schemas/users/orders.schema.json.
Passo 2: Adicione o Visualizador ao HTML
Crie um arquivo index.html na raiz do seu projeto (no mesmo nível da pasta schemas). Adicione estas linhas:
<!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>💡 Pronto — apenas 2 linhas para o CSS e JS. A opção schemasDir indica ao FireSchema onde encontrar seus arquivos de schema. Ele irá descobrir automaticamente todos os arquivos .schema.json nesse diretório.
Passo 3: Abra no Navegador
Sirva a pasta do seu projeto com qualquer servidor estático. Se você tem Node.js instalado:
npx serve .Abra http://localhost:3000 e você verá sua documentação interativa de schemas Firestore. Clique na coleção users para explorar seus campos, tipos e descrições.
Próximos Passos
Agora que seu primeiro schema está funcionando, veja o que fazer a seguir: