Documentação de Engenharia

Análise técnica da arquitetura Client-Side Only, estratégias de privacidade e implementação de PWA.

1. Arquitetura Privacy-First

Ao contrário de soluções SaaS tradicionais, o ContractFlow adota uma abordagem Zero-Knowledge no servidor. Toda a lógica de negócios, persistência de dados e geração de arquivos ocorre no dispositivo do cliente.

Server Side

Apenas hospedagem estática (HTML/JS/Assets). Nenhum banco de dados.

Client Side

Engine de Templates, Renderização de PDF, LocalStorage e Service Workers.

2. Multi-Niche Context Engine

O sistema utiliza um dicionário de dados estruturado para adaptar a interface com base na profissão selecionada. Isso permite escalabilidade infinita de nichos sem alterar a lógica principal. 

const INDUSTRY_DATA = {
    dev: {
        templates: [
            { label: 'Site Institucional', icon: 'fa-laptop-code', items: [...] },
            { label: 'App Mobile', icon: 'fa-mobile-screen', items: [...] }
        ]
    },
    marketing: {
        templates: [
            { label: 'Gestão de Tráfego', icon: 'fa-chart-line', items: [...] }
        ]
    }
    // Fácil extensão para novos nichos
};

3. Client-Side PDF Generation

Utilizamos a biblioteca jsPDF para desenhar o documento vetorizado pixel-perfect diretamente no Canvas do navegador. O sistema suporta injeção de imagens (Logos) convertendo-as para Base64 em tempo de execução. 

async function generatePDF() {
    const doc = new window.jsPDF({ format: 'a4' });
    
    // 1. Renderização do Cabeçalho (Blue Brand)
    doc.setFillColor(30, 58, 138); 
    doc.rect(0, 0, pageWidth, 40, 'F');
    
    // 2. Processamento do Logo (White Label)
    if (logoInput.files[0]) {
        const imgData = await readFileAsDataURL(logoInput.files[0]);
        doc.addImage(imgData, 'PNG', ...coords);
    }
    
    doc.save('Contrato_Final.pdf');
}

4. PWA & Offline First

Implementação de Service Workers para cacheamento de assets críticos (CSS, Fontes, JS Libs). Isso permite que a aplicação seja instalada (Add to Home Screen) e funcione sem conexão com a internet. 

// sw.js - Service Worker Strategy
self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => {
      // Retorna do cache ou busca na rede
      return response || fetch(e.request);
    })
  );
});