Voltar ao blogue
A ciência da extração de dados da Web
Gabriel CiociLast updated on Mar 31, 20269 min read

Como o JavaScript influencia o design web e a extração de dados da Web

Como o JavaScript influencia o design web e a extração de dados da Web

Lembras-te da fase «selvagem» da Internet, quando cada web designer fazia o que bem entendia e as páginas estavam repletas de cores descoordenadas, escolhas estranhas de interface e imagens distorcidas? Que época fantástica.

Além disso, pensa em como eram esses sites quando os acedias a partir de um telemóvel ou tablet. A navegação não era apenas uma tarefa árdua, era verdadeiramente dolorosa.

Agora tudo está muito mais simplificado, baseado em boas práticas de interface do utilizador e otimizado para todos os tipos de tamanhos de ecrã. Temos de agradecer ao JavaScript por essa última parte. É a linguagem mágica que transforma páginas estáticas e enfadonhas em experiências rápidas e dinâmicas.

Em suma, o JS é excelente quando se está a otimizar um site para humanos. Os bots, por outro lado, não lidam tão bem com ele. Na verdade, os scrapers básicos não conseguem extrair qualquer HTML de sites dinâmicos sem funcionalidades adicionais. Não se preocupe, vamos abordar por que razão isso acontece e como resolver o problema neste artigo.

Um site não precisa de Javascript. Podes safar-te usando apenas HTML e CSS (ou mesmo só HTML, se quiseres aquele toque dos anos 80). Então, por que é que as pessoas dão o passo extra de adicionar JS? Bem, estás prestes a descobrir.

Por que razão os sites usam Javascript?

Os sites, tal como as casas, precisam de uma base sólida. A própria base dessa fundação é o código HTML. Ao adicionar algumas tags e elementos, pode usar HTML para construir e organizar secções, cabeçalhos, links e assim por diante.

Há muito poucas coisas que não se pode fazer com código HTML ao construir um site. A anatomia de um elemento HTML consiste numa tag de abertura, numa tag de fecho e no conteúdo entre elas. O site irá mostrar a informação entre estas duas tags de acordo com o formato que elas determinam.

Ao aprender este estilo de codificação simples, poderá adicionar cabeçalhos, links, imagens e muito mais ao seu site. Mais tarde, poderá usar CSS para especificar quais os estilos que se aplicam a cada elemento.

CSS, abreviatura de Cascading Style Sheets (Folhas de Estilo em Cascata), é o toque especial do seu HTML. Se o HTML é a sua estrutura, o CSS é a decoração. Permite-lhe alterar cores, tipos de letra e layouts em toda a página.

Nesta altura, o site está pronto a funcionar, embora um pouco monótono. Também pode demorar muito tempo a carregar se colocar demasiados dados em poucas páginas ou tornar-se tedioso de navegar se espalhar o conteúdo por demasiadas páginas.

Por isso, está na hora de melhorar a experiência. O JavaScript é como os serviços públicos de uma casa: não é crucial para a estrutura, mas faz uma enorme diferença para quem lá vive.

O JavaScript é utilizado principalmente em navegadores e aplicações web, mas é uma das linguagens mais populares do momento, e pode encontrá-lo em software, servidores e controlos de hardware incorporados.  

Aqui estão alguns exemplos das muitas coisas para as quais o pode utilizar:

  • Reprodutores de áudio e vídeo num site
  • Animações
  • Menus suspensos
  • Ampliar e reduzir fotos
  • Navegação por imagens numa página inicial
  • Criação de caixas de confirmação

Várias estruturas JavaScript, como AngularJS, ReactJS e Node.js, estão disponíveis na web. Pode reduzir o tempo necessário para criar sites e aplicações baseados em JS utilizando estas estruturas. O JavaScript facilita aos programadores a criação de aplicações em grande escala. Torna todo o processo de criação de aplicações web de grande escala muito mais acessível.

Ultimamente, muitos sites têm-se tornado cada vez mais complexos, e surgiu uma necessidade repentina de «statefulness», em que os dados e as configurações do cliente são guardados.

O que é a «statefulness» no design web?

Um sistema com estado é um componente dinâmico, no sentido em que memoriza eventos importantes como dados de estado e adapta o site de acordo com eles. É mais fácil de compreender com um exemplo:

O Bob acede a um site e cria uma conta. O sistema irá memorizar o seu login e o seu estado para a próxima vez que ele aceder ao site. Desta forma, o Bob não terá de ir à página de login, porque o site irá redirecioná-lo automaticamente para a secção exclusiva para membros.

Nos bastidores, um processo cria um sistema intermediário que memoriza os detalhes do utilizador e o redireciona automaticamente para o servidor ou site correto.

Por outro lado, um sistema sem estado não se lembrará nem se adaptará, e enviará o utilizador para a página de login, exigindo que ele volte a introduzir as suas credenciais todas as vezes.

Este princípio pode aplicar-se a qualquer parte do web design. Seja o que for que modifique no corpo, o estado seguirá em conformidade. Ele manipula uma miríade de componentes que aparecem na página web. O estado permite que o site armazene informações específicas do utilizador para oferecer uma experiência personalizada (direitos de acesso), incluindo histórico de interação e configurações guardadas.

O web design permite-lhe armazenar informações sobre os seus utilizadores num servidor, enquanto o armazenamento do navegador ainda consegue lembrar-se dos dados, mas apenas até ao final da sessão.

Como é que o Javascript afeta o web scraping?

O JavaScript é uma linguagem de programação simples que foi concebida para conferir funcionalidade dinâmica aos sites dentro do navegador. Quando uma página web é carregada, o seu código JS é executado pelo motor de JavaScript do navegador e transformado em código legível por máquina. Embora isto reduza o tempo de carregamento, os sites modificados dinamicamente podem interferir no web scraping.

Os scrapers básicos fazem um pedido HTTP ao site e armazenam o conteúdo na resposta. Em circunstâncias normais, essa resposta conterá o código HTML da página. Os sites dinâmicos, no entanto, devolvem Javascript, que não contém quaisquer dados valiosos.

Além disso, muitos sites conseguem detetar se o visitante pode executar Javascript ou não. Uma vez que os utilizadores comuns navegam na Internet através de um navegador, não conseguem executar JS, tornando claro que não estão a utilizar um navegador. A partir daí, fica bastante claro para os sites que é um bot e não um humano que os está a visitar. Isto resulta normalmente no bloqueio do IP do bot.

Em suma, os sites que utilizam JS não podem ser rastreados sem as ferramentas adequadas, e os rastreadores que não conseguem executar JS são muito mais fáceis de detetar do que aqueles que o conseguem.

Como é que os web scrapers lidam com o Javascript?

Felizmente, há uma solução: navegadores headless. Estes programas são essencialmente iguais aos navegadores normais, com as mesmas capacidades, mas sem a interface gráfica padrão. Assim, para navegar através de um navegador headless, tem de utilizar a linha de comandos. Embora sejam utilizados principalmente para testar aplicações e sites, também podem executar código Javascript, tornando-os complementos ideais para scrapers web.

Assim que o navegador sem interface gráfica processar o código JS, o site enviará HTML normal, os dados que realmente pretende.

Outra vantagem que os navegadores headless têm sobre os outros é a sua velocidade. Uma vez que não tem de se preocupar com a GUI, nem com o carregamento de JS ou CSS, consegue processar páginas muito mais rapidamente, o que é excelente para o web scraping, uma vez que não atrasa demasiado o bot.

Se pretende uma solução de extração de dados DIY, existem duas linguagens de programação preferidas: Python e Node.js.

Python e Selenium

Se escolher Python, a biblioteca de eleição para renderização de JS é o Selenium. É uma opção fiável para executar Javascript, interagir com botões, percorrer páginas e preencher formulários online. É utilizado principalmente em projetos de código aberto na automatização de navegadores. O protocolo WebDriver controla navegadores como o Chrome e o Firefox e pode ser executado tanto remotamente como localmente.

Originalmente concebido como uma ferramenta para testes entre navegadores, o Selenium rapidamente se tornou um conjunto completo de ferramentas para a automação de navegadores web. Uma vez que muitos sites são construídos como Aplicações de Página Única que enviam CAPTCHAs em massa, mesmo a utilizadores reais, a extração de dados começa a parecer cada vez mais uma tarefa assustadora devido à hipervigilância em torno da deteção de bots.

Com o Selenium, o bot pode ler e executar código JavaScript para que tenha acesso ao HTML, preencher formulários para que possa iniciar sessão em sites, percorrer uma página web e imitar cliques.

Mas se estiver a fazer scraping em Python, não se limite ao Selenium. Pode complementar com a biblioteca BeautifulSoup, que facilita a análise de HTML e XML, e depois utilizar o Pandas para extrair e armazenar os seus dados num ficheiro CSV.

Node.js e Puppeteer

O Puppeteer é um pacote Node.js que permite operar o Chrome ou o Chromium em modo headless e integrar o protocolo DevTools. A equipa do Chrome DevTools e uma fantástica comunidade de código aberto cuidam dele.

Esta solução irá ajudá-lo a gerir um web scraper no contexto da estrutura em constante mudança de um site. O principal obstáculo do scraping é que as ferramentas requerem atualizações constantes para se adaptarem e não serem restringidas pelos servidores.

O que o Node.js pode fazer? Ajuda o Javascript a ser executado tanto no lado do cliente como no lado do servidor gratuitamente, ao mesmo tempo que cria aplicações de rede muito mais rapidamente.

Mas vamos concentrar-nos na estrela do web scraping. O Puppeteer permite-lhe controlar manualmente um navegador web — desde preencher formulários e tirar capturas de ecrã até automatizar testes de interface do utilizador.

Se nunca trabalhou com estas bibliotecas antes ou está apenas a dar os primeiros passos na sua jornada de web scraping, compreendo que tudo isto possa parecer intimidante. No entanto, existe uma solução ainda mais conveniente que faz todo o trabalho por si: uma API.

Também conhecidas como Interface de Programação de Aplicações, as APIs permitem que os utilizadores obtenham os dados imediatamente. Ao fazer uma solicitação ao endpoint da API, a aplicação fornecer-lhe-á os dados de que necessita. Além disso, estes são automaticamente fornecidos no formato JSON.

A maior vantagem de usar uma API é a facilidade com que a pode ligar aos seus outros produtos de software ou scripts. Com apenas algumas linhas de código, pode enviar os dados extraídos diretamente para outras aplicações depois de receber a sua chave de API exclusiva e ler a documentação.

Aqui está um resumo rápido de tudo o que a WebScrapingAPI faz por si:

  • Executa Javascript e acede ao código HTML por trás de páginas web dinâmicas
  • Utiliza um conjunto rotativo de proxies contendo centenas de milhares de IPs residenciais e de centros de dados para mascarar a sua atividade
  • Oferece acesso aos cabeçalhos de pedido para que possa personalizar as suas chamadas de API e garantir que o scraper é indistinguível de visitantes normais
  • Utiliza funcionalidades anti-fingerprinting e anti-captcha
  • Retorna os dados já analisados num ficheiro JSON.

Uma solução de web scraping sem complicações

Desde web design, HTML, CSS e Javascript até navegadores headless, a World Wide Web completa sempre o ciclo — dados em livre circulação. É por isso que a Internet existe, em primeiro lugar. Que melhor forma de aproveitar as montanhas de conteúdo do que a recolha de dados? Afinal, onde estariam hoje as empresas, os programadores e até mesmo as pessoas, em geral, sem acesso a informações valiosas?

É realmente o que nos move a todos. Agora que compreende como o Javascript afeta a Internet atual, está mais bem preparado para começar a fazer scraping, e espero que o faça. Se estiver com pouco tempo, considere experimentar a nossa própria solução, a WebScrapingAPI, gratuitamente. O período de teste dura duas semanas e terá acesso a todas as funcionalidades essenciais, como renderização JS e proxies residenciais.

Descubra o que a API pode fazer e, se ainda não estiver convencido, contacte o nosso serviço de apoio ao cliente, incrivelmente atencioso, para obter orientação.

Sobre o autor
Gabriel Cioci, Desenvolvedor Full-Stack @ WebScrapingAPI
Gabriel CiociDesenvolvedor Full-Stack

Gabriel Cioci é um programador Full Stack na WebScrapingAPI, responsável pela criação e manutenção dos sites, do painel do utilizador e das principais funcionalidades da plataforma destinadas aos utilizadores.

Comece a construir

Pronto para expandir a sua recolha de dados?

Junte-se a mais de 2.000 empresas que utilizam a WebScrapingAPI para extrair dados da Web à escala empresarial, sem quaisquer custos de infraestrutura.