amazon-web-scraper-showcase

Sumário

• amazon-web-scraper-showcase
  • Sumário
  • To-do list
  • Motivação
    • GET /api/scrape
      • Motivação
      • Exemplo de URL
      • Status 200
      • Status 500
      • Status 503
  • Pilha de tecnologia
  • Galeria

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órios¹ e hospedar a API e o site no Vercel e Firebase, respectivamente

¹ 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