Coder Social home page Coder Social logo

mdccg / amazon-web-scraper-showcase Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 598 KB

Motivação e capturas de tela de uma ferramenta de web scraping de produtos da Amazon. Todos os direitos reservados à Amazon.com, Inc.

amazon-product-scraper axios express firebase javascript typescript vercel web-scraping

amazon-web-scraper-showcase's Introduction

amazon-web-scraper-showcase

Sumário

To-do list

  • Adicionar dotenv à API
  • Criar uma variável de ambiente que funcione como uma flag booleana para impedir requisições malsucedidas retornando dados falsos
  • Criar um objeto de transferência de dados adequado para o método getProducts e colocar o total de produtos encontrados neste serviço em vez de computá-lo no diretório routes
  • Jogar todas as mensagens de texto para o enumerador
  • Criar um interruptor na página web e um parâmetro query adicional para forçar a API a retornar dados falsos
  • Criar um arquivo contendo todos os assets utilizados e adicionar a fonte tipográfica Oxygen
  • Procurar uma imagem que represente ficheiros vazios e substitui-la a imagem do caso de resultados não encontrados
  • Adicionar uma tela para que o usuário possa refazer a requisição em caso de erro
  • Adicionar um listener para bloquear o botão de refazer a requisição caso o campo de texto esteja inválido e estilizá-lo com transição de opacidade
  • Adicionar um toast aviso para notificar que dados falsos estão sendo utilizados
  • Criar um elemento HTML para encapsular a imagem do componente de produto e evitar que o espaçamento interno
  • Definir uma altura máxima para as imagens dos componentes de produto que evite produtos cortados
  • Adicionar reticências aos títulos longos
  • Alterar os metadados do arquivo index.html adicionando OpenGL
  • Explicar a variável de ambiente BYPASS_SERVER_ERROR_STATUS_CODE neste arquivo
  • Adicionar uma subseção "Features" à subseção "Motivação" para explicar detalhes técnicos como o comportamento dos botões e telas adicionais em casos de erro
  • Criar três repositórios1 e hospedar a API e o site no Vercel e Firebase, respectivamente

1 Como o Vercel exige que uma API Express esteja em um único repositório de código configurado via vercel.json para o deploy, o terceiro repositório será composto apenas de um arquivo README.md e dois submódulos que redirecionarão o visitante para os respectivos repositórios.

Motivação

Este app é uma ferramenta de consulta a produtos da Amazon extraídos através de web scraping. Nos dois repositórios de código adicionados a este repositório como submódulos, não há arquivos com textos motivacionais ou instrucionais. Portanto, toda a documentação do app está disponível neste arquivo, como solicitado no teste técnico para a vaga de Estágio em Desenvolvimento Full Stack da empresa LongLifeNutri.

GET /api/scrape

Motivação

Esta rota usa os módulos Axios e JSDOM para fazer uma requisição HTTP à página de pesquisa de produtos; e converter os produtos buscados de elementos HTML para instâncias de produto, respectivamente.

O endereço de URL da página de pesquisa de produtos é https://www.amazon.com.br/s?k=Creatina, em que s é a rota de pesquisa de produtos (search) e k é o parâmetro query que recebe a palavra-chave do produto buscado (keyword). Feita a requisição, o conteúdo da página é tratado; e os componentes HTML contendo as informações dos produtos são convertidos em um vetor em que cada elemento obedece à interface[1] abaixo. Observação: Os atributos rating e numberOfReviews seguem facultativos pois há produtos que não apresentam a média de avaliações por cinco estrelas e o respectivo número de avaliações.

interface IProduct {
  title: string;
  imageURL: string;
  rating?: number;
  numberOfReviews?: number;
}

Como o site da Amazon tem seu próprio detector de bot, spam, abuso e coisas do gênero — análogo ao reCAPTCHA da Google — por vezes esta rota retornará o status HTTP de reposta 503 (Service Unavailable), indicando que a requisição foi barrada por estar sendo feita a partir de uma API Express ao invés de um navegador. Para contornar este problema em caso de demonstração da interface de usuário, foi criada a variável de ambiente BYPASS_SERVER_ERROR_STATUS_CODE.

A função desta variável de ambiente booleana é retornar dados falsos — os quais foram coletados em uma das requisições HTTP bem-sucedidas para a palavra-chave "Creatina" — e impedir que esta rota retorne outro status HTTP de resposta além de 200. Caso a variável receba true, o objeto de transferência de dados desta rota informará se os dados são falsos através da propriedade booleana isFake:

type ScrapeResponse = {
  products: IProduct[];
  total: number;
  isFake: boolean;
}

E a propriedade isFake é checada no cliente front-end, o qual informa se os dados são falsos através das seguintes frases:

Foram encontrados 48 resultados para "Creatina".

Foram encontrados 60 resultados fictícios para "Creatina".

Vale destacar que aproximadamente apenas vinte porcento das requisições feitas durante as fases de desenvolvimento e homologação foram bem-sucedidas, ou seja, foi necessário refazer a requisição várias vezes. Além disso, há outras variáveis de ambiente definidas no arquivo de declaração environment.d.ts. Essas variáveis, listadas abaixo, servem para evitar alterações hard-code no código-fonte; caso o domínio, a rota ou o parâmetro query da Amazon sejam modificados pela Amazon.com, Inc.

  • AMAZON_API_BASE_URL;
  • AMAZON_API_PATH_NAME;
  • AMAZON_API_QUERY_PARAMETER.

Exemplo de URL

Exemplo de URL: http://localhost:3001/api/scrape?keyword=Creatina

Status 200

{
  "products": [
    {
      "title": "Max Titanium Creatina - 300g",
      "imageURL": "https://m.media-amazon.com/images/I/51fpPqn3VbL._AC_UL320_.jpg"
    },
    {
      "title": "Integralmédica - Creatina 300G Monohidratada 100% Pura Branco",
      "imageURL": "https://m.media-amazon.com/images/I/61ab639aDML._AC_UL320_.jpg",
      "rating": 4.7,
      "numberOfReviews": 31966
    },
    /* ... */
  ],
  "total": 48,
  "isFake": false
}

Status 500

{
  "error": "Oops! Parece que algo deu errado temporariamente. Não se preocupe, estamos trabalhando para resolver isso o mais rápido possível"
}

Status 503

{
  "error": "Parece que a Amazon detectou atividade incomum e está temporariamente impedindo o acesso aos resultados da pesquisa. Por favor, espere um momento e tente novamente"
}

Pilha de tecnologia

Tecnologia Função
Linguagem de programação TypeScript
Framework back-end Express
Cliente HTTP Axios
Web scraping JSDOM

Os créditos pelas mídias utilizadas estão disponíveis aqui.

Galeria

Tela inicial Tela de resultados no topo da rolagem Tela de resultados no final da rolagem Tela de nenhum resultado encontrado Tela de erro interno do servidor

amazon-web-scraper-showcase's People

Contributors

mdccg avatar

Stargazers

Shahrad Elahi avatar jist avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.