O Web Scrap é um software fullstack desenvolvido com TypeScript e React para o front-end, e JavaScript, Node.js e Sequelize com banco de dados MySQL para o back-end. O objetivo do projeto é fazer web scraping de produtos em lojas online, utilizando o Puppeteer.
Como o projeto é voltado para aprendizado, a coleta dos dados é feita em modo de fila, sem uso de cluster para reduzir o tempo de scraping. No entanto, para melhorar a experiência do usuário, foi implementada uma lógica em que todas as pesquisas realizadas pelos usuários são armazenadas no banco de dados. Quando um usuário repete a mesma pesquisa, os resultados são exibidos instantaneamente, sem precisar refazer o scraping.
Na interface do usuário, o usuário pode selecionar a loja desejada (Buscapé, Mercado Livre ou ambas) e pesquisar por um produto específico. O resultado da pesquisa é exibido em cards, com informações como o nome do produto, o preço e o link para o produto.
Como o projeto está em fase de aprendizado, ainda não foi implementada a utilização de cluster, porém, a intenção é aprimorar essa funcionalidade no futuro. O Web Scrap é um ótimo projeto para quem deseja aprofundar seus conhecimentos em web scraping e desenvolvimento fullstack.
Com o aumento de dados disponíveis na internet, o web scraping se tornou uma técnica valiosa para coletar informações de sites da web de maneira automatizada. O web scraping é a prática de coletar dados de páginas da web e extrair as informações relevantes para análise e uso posterior.
Uma das ferramentas mais utilizadas para web scraping é o Puppeteer, que é uma biblioteca Node.js desenvolvida pelo Google. O Puppeteer permite automatizar tarefas em navegadores web e extrair informações de maneira programática.
Com o Puppeteer, é possível simular interações do usuário em um navegador, como clicar em botões, preencher formulários e navegar por páginas da web. Isso permite que sejam coletadas informações que, de outra forma, seriam difíceis ou impossíveis de obter.
Em resumo, o web scraping é uma técnica poderosa para coletar dados da web, e o Puppeteer é uma ferramenta útil para automatizar essa tarefa. No projeto, o Puppeteer foi utilizado para coletar dados de um site e extrair as informações necessárias para a criação de um banco de dados.
Para a estilização do projeto, utilizei uma combinação de ferramentas que me permitiu criar uma interface web responsiva, funcional e atraente.
Em primeiro lugar, utilizei o framework Tailwind de forma estratégica para deixar o site estilizado e responsivo em pouco tempo. O Tailwind é um framework CSS utilitário que permite criar estilos customizados rapidamente, sendo essencial para atender às demandas de prazo do projeto. Utilizei-o para a estruturação geral da página e para aplicar estilos em elementos como botões, textos e espaçamentos.
Os campos de input e Select, por sua vez, foram estilizados utilizando o Material UI, conjunto de componentes React pré-construídos que foram personalizados para atender às necessidades específicas do projeto. Esses componentes permitem que o usuário interaja com o sistema de maneira fácil e intuitiva, além de adicionar uma camada de sofisticação visual à interface. Além disso, utilizei o Skeleton do Material UI para criar um efeito visual de loading na página, o que ajuda a reduzir a ansiedade do usuário enquanto aguarda a resposta do sistema.
Por fim, utilizei o CSS nativo em alguns casos para complementar o estilo dos componentes, como a estilização das fontes e cores. Com a combinação dessas ferramentas, consegui criar uma interface web agradável e eficiente em um curto período de tempo.
INSTALAÇÃO DO SOFTWARE WEB SCRAP
- Clone o repositório
git@github.com:Rafael-Souza-97/web-scrap.git:
git clone git@github.com:Rafael-Souza-97/web-scrap.git- Entre na pasta do repositório que você acabou de clonar:
cd web-scrap- Instale as depëndencias com
npm install:
npm install- Instale as depëndencias do Front-end, com
npm install:
Entre na pasta frontend.
cd frontendInstale as dependências.
npm install- Instale as depëndencias do Back-end, com
npm install:
Entre na pasta backend.
cd ..cd backendInstale as dependências.
npm install- Execute a aplicação com com
npm run devna pasta frontend e backend do projeto:
Executará a aplicação em modo de desenvolvimento.
npm run devAbra http://localhost:5173 no seu navegador para visualiza-lo.
- Linguagem: Typescript e Javascript
- Framework de Front-end: React
- Cliente HTTP: Axios
- Plataforma de desenvolvimento: Node
- Padrão de arquitetura de API: API RESTful
- Padrão de arquitetura do Software: Model-Service-Controller
- Framework de arquitetura de APIwork web: Express
- Banco de dados: MySQL
- Ferramenta de modelagem de banco de dados: MySQL Workbench
- ORM: Sequelize
- Cliente de teste de API: Thunder Client
- Biblioteca de automação de navegador: Puppeteer
- Linter de código: ESLint
- Editor de código: Visual Studio Code
- Sistema de controle de versão: Git e GitHub
- Sistema operacional: Linux - Ubuntu
- Framework CSS: Tailwind
- Biblioteca de componentes: Material UI
- Linguagem de Estilização: CSS