137 lines
5.1 KiB
Markdown
137 lines
5.1 KiB
Markdown
# CloneWeb - Website Crawler Platform
|
|
|
|
Uma plataforma inteligente de crawling de websites com interface web moderna e funcional que **clona completamente** sites para uso offline.
|
|
|
|
## 🚀 Como Usar
|
|
|
|
### 1. Iniciar os Serviços
|
|
|
|
O aplicativo consiste em dois serviços principais:
|
|
|
|
**Crawler Service (Porta 3001):**
|
|
```bash
|
|
cd simple-crawler
|
|
npm start
|
|
```
|
|
|
|
**Web Interface (Porta 3000):**
|
|
```bash
|
|
cd web-interface
|
|
npm start
|
|
```
|
|
|
|
### 2. Acessar a Interface
|
|
|
|
Abra seu navegador e acesse: `http://localhost:3000`
|
|
|
|
### 3. Clonar um Website
|
|
|
|
1. Digite a URL do website que deseja clonar
|
|
2. Clique em "Iniciar Crawling"
|
|
3. Aguarde o processamento (o sistema irá):
|
|
- Extrair todo o HTML da página
|
|
- Baixar todos os assets (CSS, JS, imagens, fontes)
|
|
- Criar uma pasta local com o site completo
|
|
- Ajustar todos os links para funcionarem offline
|
|
4. Visualize os resultados e use os botões para:
|
|
- **📁 Abrir Pasta**: Abre a pasta do site clonado no Windows Explorer
|
|
- **🌐 Abrir Site Local**: Abre o site clonado no seu navegador
|
|
|
|
### 4. Estrutura dos Sites Clonados
|
|
|
|
Cada site clonado é salvo em: `cloned-sites/[dominio]_[timestamp]/`
|
|
|
|
**Estrutura da pasta:**
|
|
```
|
|
exemplo.com_2025-12-24T12-00-00-000Z/
|
|
├── index.html # Página principal (funciona offline)
|
|
├── pagina2.html # Páginas adicionais clonadas
|
|
├── navegacao.html # Página de navegação entre páginas
|
|
├── layout-preservation.css # CSS para preservar layout original
|
|
├── css/ # Arquivos CSS baixados
|
|
├── js/ # Arquivos JavaScript baixados
|
|
├── images/ # Imagens baixadas
|
|
├── fonts/ # Fontes baixadas
|
|
├── assets/ # Outros assets
|
|
├── clone-info.json # Informações detalhadas do clone
|
|
└── abrir-site.bat # Script para abrir o site
|
|
```
|
|
|
|
## ✅ Funcionalidades
|
|
|
|
### Interface Web
|
|
- ✅ Interface web moderna e responsiva
|
|
- ✅ Status em tempo real do crawler
|
|
- ✅ Visualização de resultados em abas
|
|
- ✅ Exportação de dados em JSON
|
|
- ✅ Design responsivo para mobile
|
|
- ✅ Botões para abrir pasta e site clonado
|
|
|
|
### Clonagem Completa e Avançada
|
|
- ✅ **Clone completo de websites para uso offline**
|
|
- ✅ **Crawling de múltiplas páginas** (até 5 páginas por site)
|
|
- ✅ **Preservação de layout e posicionamento** dos elementos
|
|
- ✅ **Manutenção de transições e animações CSS**
|
|
- ✅ **Links internos funcionais** (navegação entre páginas clonadas)
|
|
- ✅ Download automático de todos os assets (CSS, JS, imagens, fontes)
|
|
- ✅ Organização inteligente de arquivos por tipo
|
|
- ✅ Ajuste automático de links para funcionamento local
|
|
- ✅ Processamento de CSS para baixar assets referenciados
|
|
- ✅ **CSS de preservação de layout** gerado automaticamente
|
|
- ✅ **Página de navegação** entre páginas clonadas
|
|
- ✅ Geração de scripts para abertura rápida
|
|
- ✅ Informações detalhadas do processo de clone
|
|
|
|
### Crawling Inteligente
|
|
- ✅ Execução de JavaScript dinâmico
|
|
- ✅ Extração de links e imagens
|
|
- ✅ Captura de conteúdo após carregamento completo
|
|
- ✅ Tratamento de erros e assets indisponíveis
|
|
|
|
## 🔧 Tecnologias
|
|
|
|
- **Backend**: Node.js, Express, Puppeteer, Axios
|
|
- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)
|
|
- **Clonagem**: Cheerio, File System, Path manipulation
|
|
- **Estilo**: Gradientes modernos, animações CSS
|
|
- **Segurança**: CSP headers, sanitização de dados
|
|
|
|
## 📊 Status dos Serviços
|
|
|
|
- **Crawler Service**: ✅ Funcionando (localhost:3001)
|
|
- **Web Interface**: ✅ Funcionando (localhost:3000)
|
|
- **Clonagem Completa**: ✅ Implementada e funcional
|
|
- **Download de Assets**: ✅ CSS, JS, imagens, fontes
|
|
- **Organização de Arquivos**: ✅ Por tipo e estrutura
|
|
- **Abertura Automática**: ✅ Pasta e site local
|
|
|
|
## 🎯 Como Funciona a Clonagem Avançada
|
|
|
|
1. **Análise Inteligente**: O Puppeteer carrega a página e captura estilos computados
|
|
2. **Crawling Múltiplo**: Sistema descobre e clona até 5 páginas do mesmo domínio
|
|
3. **Extração Completa**: Cheerio extrai todos os links para assets e páginas internas
|
|
4. **Download Organizado**: Axios baixa cada asset individualmente por categoria
|
|
5. **Preservação de Layout**: CSS computado é capturado e aplicado para manter posicionamento
|
|
6. **Links Internos**: Links entre páginas são convertidos para navegação local
|
|
7. **Processamento CSS**: Arquivos CSS são processados para baixar assets referenciados
|
|
8. **Ajuste de Caminhos**: Links no HTML são ajustados para caminhos locais
|
|
9. **Navegação**: Página de navegação criada para sites com múltiplas páginas
|
|
10. **Finalização**: Site completo salvo e pronto para uso offline com layout preservado
|
|
|
|
## 📁 Localização dos Sites Clonados
|
|
|
|
Todos os sites clonados ficam na pasta: `cloned-sites/`
|
|
|
|
Cada clone inclui:
|
|
- Site completamente funcional offline
|
|
- Todos os assets necessários
|
|
- Script `.bat` para abertura rápida
|
|
- Arquivo JSON com informações do clone
|
|
|
|
## 🚀 Início Rápido
|
|
|
|
Use os scripts de inicialização:
|
|
- **Windows**: `start-app.bat`
|
|
- **PowerShell**: `start-app.ps1`
|
|
|
|
Ambos iniciam os dois serviços automaticamente e abrem a interface no navegador. |