SQLITE_SETUP.md

🗄️ Configuração do IndexedDB para Page Builder

Este documento explica como o sistema de banco de dados IndexedDB está configurado no projeto.

📁 Estrutura dos Arquivos

src/
├── database/
│   └── database.ts         # Gerenciador do banco IndexedDB
├── api/
│   └── pages.ts           # API para operações com páginas
└── components/editor/
    ├── PageListModal.tsx  # Modal para listar páginas
    ├── PageCard.tsx       # Card individual da página
    └── Header.tsx         # Header com botão de salvar

🚀 Funcionalidades Implementadas

✅ Salvamento de Páginas

• Localização: Botão "Salvar Página" no header
• Funcionalidade: Serializa o estado do Craft.js e salva no IndexedDB
• Dados salvos: Título, descrição, estado comprimido, thumbnail

✅ Listagem de Páginas

• Localização: Modal que abre automaticamente ao carregar o editor
• Funcionalidade: Lista todas as páginas salvas com thumbnails
• Ações: Abrir página, deletar página

✅ Carregamento de Páginas

• Funcionalidade: Deserializa o estado do Craft.js e carrega no editor
• Validação: Verifica se o JSON é válido antes de carregar

✅ Compressão de Dados

• Tecnologia: LZUTF8 para comprimir o estado JSON
• Benefício: Reduz significativamente o tamanho dos dados salvos

🗄️ Schema do Banco de Dados

interface Page {
  id: string;                      // ID único da página
  title: string;                   // Título da página
  description?: string;            // Descrição opcional
  state: string;                   // Estado do Craft.js (comprimido)
  thumbnail?: string;              // Thumbnail em Base64
  created_at: string;              // Data de criação (ISO string)
  updated_at: string;              // Data de atualização (ISO string)
}

📊 API Endpoints

savePage(request: SavePageRequest)

• Função: Salva uma nova página
• Retorna: { success: boolean, id?: string, error?: string }

loadPage(id: string)

• Função: Carrega uma página específica
• Retorna: { success: boolean, page?: Page, error?: string }

listPages()

• Função: Lista todas as páginas
• Retorno: { success: boolean, pages?: Page[], error?: string }

deletePage(id: string)

• Função: Deleta uma página
• Retorno: { success: boolean, error?: string }

🔧 Configuração Técnica

Dependências Adicionadas

{
  "dependencies": {
    "dexie": "^4.2.0"
  }
}

Configuração do Vite

• Configuração padrão para aplicações React
• IndexedDB funciona nativamente no navegador
• Sem necessidade de configurações especiais

🎯 Como Usar

1. Salvar uma Página

1. Crie sua página no editor
2. Clique no botão "Salvar Página" no header
3. Preencha o título (obrigatório) e descrição (opcional)
4. Clique em "Salvar"

2. Carregar uma Página

1. O modal de páginas abre automaticamente ao carregar o editor
2. Clique em "Abrir" na página desejada
3. A página será carregada no editor

3. Deletar uma Página

1. No modal de páginas, clique em "Deletar"
2. Confirme a ação
3. A página será removida do banco de dados

🔍 Localização do Banco de Dados

• Localização: IndexedDB do navegador
• Nome: PageBuilderDatabase
• Formato: IndexedDB (nativo do navegador)
• Criação: Automática na primeira execução

🚨 Considerações Importantes

⚠️ Limitações Atuais

• Thumbnails: Por enquanto geradas como vazias (pode ser implementado com canvas/screenshot)
• Backup: Dados ficam no navegador local (sem backup automático)
• Múltiplos usuários: Não há controle de acesso

💡 Melhorias Futuras

• Implementar geração de thumbnails com canvas
• Adicionar sistema de backup/export para arquivos
• Implementar versionamento de páginas
• Adicionar sincronização com servidor

🛠️ Troubleshooting

Erro: "Database não inicializado"

• Verifique se o navegador suporta IndexedDB
• Confirme se não há bloqueios de storage no navegador

Erro: "Falha ao comprimir estado"

• Verifique se o estado do Craft.js é válido
• Confirme se a biblioteca lzutf8 está instalada

Erro: "Página não encontrada"

• Verifique se o ID da página existe no banco
• Confirme se o IndexedDB não foi limpo pelo navegador

---

Desenvolvido com ❤️ usando Craft.js, IndexedDB e React