Como o Javascript afecta o Web Design e o Web Scraping

Gabriel Cioci em 27 de agosto de 2021

Lembra-se da fase do Oeste Selvagem da Internet, quando cada designer de sítios Web fazia as suas próprias coisas e as páginas estavam cheias de cores desencontradas, escolhas de IU estranhas e imagens esticadas? Que época para se estar vivo.

Além disso, pense no aspeto desses sítios Web se os acedesse a partir de um telemóvel ou de um tablet. A navegação não era apenas uma tarefa árdua, era mesmo dolorosa.

Tudo está muito mais simplificado agora, ancorado em boas práticas de IU e optimizado para todos os tipos de tamanhos de ecrã. Temos de agradecer ao Javascript por esta última parte. É a linguagem mágica que transforma páginas estáticas aborrecidas em experiências rápidas e dinâmicas.

Em suma, o JS é excelente quando se está a otimizar um sítio Web para humanos. Os robots, por outro lado, não lidam tão bem com ele. De facto, os web scrapers básicos não conseguem extrair qualquer HTML de Web sites dinâmicos sem funcionalidades extra. Não se preocupe, neste artigo vamos explicar porque é que isso acontece e como ultrapassar o problema.

Um sítio Web não precisa de Javascript. É possível utilizar apenas HTML e CSS (ou mesmo apenas HTML, se quiser ter um estilo dos anos 80). Então, porque é que as pessoas dão o passo extra de adicionar JS? Bem, estás prestes a descobrir.

Porque é que os sítios Web utilizam Javascript?

Os sítios Web, tal como as casas, precisam de uma base sólida. A base desta fundação é o código HTML. Ao adicionar algumas etiquetas e elementos, pode utilizar o HTML para construir e organizar secções, cabeçalhos, ligações, etc.

Há muito poucas coisas que não se podem fazer com o código HTML quando se constrói um sítio Web. A anatomia de um elemento HTML é constituída por uma etiqueta de abertura, uma etiqueta de fecho e o conteúdo intermédio. O sítio Web mostrará a informação entre estas duas etiquetas de acordo com o formato que elas ditam.

Ao aprender este estilo de codificação simples, poderá adicionar cabeçalhos, ligações, imagens e muito mais ao seu sítio Web. Mais tarde, pode utilizar CSS para especificar que estilos 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 as cores, os tipos de letra e a disposição da página ao longo da mesma.

Nesta altura, o sítio Web está pronto a ser utilizado, embora um pouco achatado. Também pode sofrer longos tempos de carregamento se colocar demasiados dados em poucas páginas ou tornar-se aborrecido de navegar se distribuir o conteúdo por demasiadas páginas.

Por isso, está na altura de melhorar a experiência. O Javascript é como as utilidades da casa, não é crucial para a estrutura, mas faz uma enorme diferença para quem lá vive.

O JavaScript está presente principalmente em navegadores Web e aplicações Web, mas é uma das linguagens mais populares do momento e pode ser encontrada em software, servidores e controlos de hardware incorporados.  

Eis alguns exemplos das muitas utilizações que lhe podem ser dadas:

• Leitores de áudio e vídeo num sítio Web
• Animações
• Campos suspensos
• Aumentar e diminuir o zoom das fotografias
• Deslizar pelas imagens numa página inicial
• Criar caixas de confirmação

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

Ultimamente, muitos sítios Web têm-se tornado cada vez mais complexos e há uma necessidade súbita de um estado em que os dados e as definições do cliente são guardados.

O que é o statefulness na conceção da Web?

Um sistema com estado é um componente dinâmico no sentido em que se lembra de eventos importantes como dados de estado e adapta o sítio Web de acordo com eles. É mais fácil de compreender com um exemplo:

O Bob acede a um sítio Web e inscreve-se numa conta. O sistema irá memorizar o seu início de sessão e o seu estado da próxima vez que ele aceder ao sítio Web. Desta forma, o Bob não terá de ir à página de início de sessão porque o sítio Web o redireccionará automaticamente para a secção só para membros do sítio.

Nos bastidores, um processo cria um sistema intermediário que se lembra dos detalhes do utilizador e o redirecciona automaticamente para o servidor ou sítio Web correto.

Por outro lado, um sistema sem estado não se recorda nem se adapta, enviando o utilizador para a página de início de sessão e exigindo-lhe que volte a introduzir as suas credenciais de cada vez.

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

A conceção da Web permite-lhe armazenar informações sobre os seus utilizadores num servidor, ao passo que o armazenamento do navegador pode ainda memorizar dados, mas apenas até ao final da sessão.

Como é que o Javascript afecta a recolha de dados da Web?

O Javascript é uma linguagem de programação simples que foi concebida para dar funcionalidade dinâmica a sítios Web dentro do browser. Quando uma página Web é carregada, o seu código JS é executado pelo motor Javascript do browser e transformado em código legível por máquina. Embora isto reduza o tempo de carregamento, os sítios Web modificados dinamicamente podem ser um obstáculo à recolha de dados da Web.

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

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

Em suma, os sítios Web que utilizam JS não podem ser objeto de scraping sem as ferramentas adequadas e os scrapers que não conseguem executar JS são muito mais fáceis de apanhar do que aqueles que conseguem.

Como é que os scrapers da Web lidam com o Javascript?

Felizmente, existe uma solução: os browsers sem cabeça. Estes programas são essencialmente iguais aos browsers normais, com as mesmas capacidades mas sem uma interface gráfica padrão. Assim, para navegar através de um browser sem cabeça, tem de usar a linha de comandos. Embora sejam utilizados principalmente para testar aplicações e sítios Web, também podem executar código Javascript, o que os torna os addons ideais para web scrapers.

Quando o navegador sem cabeça tratar o código JS, o sítio Web enviará HTML normal, os dados que o utilizador realmente pretende.

Outra vantagem que os navegadores sem cabeça têm sobre os outros é a sua velocidade. Uma vez que não tem de se preocupar com a GUI, carregar JS ou CSS, pode processar as páginas muito mais rapidamente, o que é excelente para o web scraping, uma vez que não torna o bot demasiado lento.

Se quiser uma solução de extração de dados "faça você mesmo", existem duas linguagens de programação favoritas: Python e Node.js.

Python e Selenium

Se escolher Python, a biblioteca de referência para renderização de JS é o Selenium. É uma opção fiável para executar Javascript, interagir com botões, fazer scroll e preencher formulários online. É utilizada principalmente para projectos de código aberto na automatização de browsers. O protocolo WebDriver controla navegadores como Chrome e Firefox e pode ser executado tanto remotamente quanto localmente.

Originalmente criado como uma ferramenta para testes entre navegadores, o Selenium rapidamente se tornou uma coleção completa de ferramentas para automação de navegadores da Web. Uma vez que muitos Web sites são construídos como Aplicações de Página Única que enviam CAPTCHAs de spam mesmo para 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 o utilizador tenha acesso ao HTML, preencher formulários para que o utilizador possa entrar em sítios Web, percorrer uma página Web e imitar cliques.

Mas se estiver a fazer scraping em Python, não se limite ao Selenium. Pode seguir com a biblioteca BeautifulSoup que facilita a análise de HTML e XML e depois obter 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 Chromium sem cabeça e integrar o protocolo DevTools. A equipa do Chrome DevTools e uma fantástica comunidade de código aberto tomam conta dele.

Esta solução ajudá-lo-á a gerir um raspador Web no contexto da estrutura em constante mudança de um sítio Web. O principal obstáculo da recolha de dados é o facto de as ferramentas necessitarem de actualizações constantes para se adaptarem e não serem limitadas pelos servidores.

O que é que o Node.js pode fazer? Ajuda o Javascript a executar o lado do cliente e do servidor de forma gratuita, criando aplicações de rede muito mais rapidamente.

Mas vamos concentrar-nos na estrela da recolha de dados da Web. O Puppeteer permite-lhe manipular um navegador Web manualmente - tudo, desde o preenchimento de formulários e a captura de ecrãs até à automatização de testes de IU.

Se nunca trabalhou com estas bibliotecas ou se está apenas a começar a sua jornada de recolha de dados da Web, compreendo como tudo isto pode 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 API permitem que os utilizadores obtenham os dados de imediato. Ao fazer um pedido ao ponto de extremidade da API, a aplicação fornece-lhe os dados de que necessita. Para além disso, os dados são automaticamente apresentados no formato JSON.

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

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

• Executa Javascript e acede ao código HTML subjacente às páginas Web dinâmicas
• utiliza um conjunto rotativo de proxies que contém centenas de milhares de IPs residenciais e de centros de dados para mascarar a sua atividade
• Oferece acesso aos cabeçalhos dos pedidos para que possa personalizar as suas chamadas API e garantir que o raspador não se distingue dos visitantes normais
• Utiliza funcionalidades anti-impressão digital e anti-captcha
• Devolve os dados já analisados num ficheiro JSON.

Uma solução de raspagem da Web sem complicações

Desde a conceção da Web, HTML, CSS, Javascript até aos navegadores sem cabeça, a World Wide Web está sempre a completar o círculo - dados em livre circulação. É por isso que a Internet existe, em primeiro lugar. Que melhor forma de utilizar os montes de conteúdos 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 afecta a Internet atual, está melhor preparado para começar a fazer scraping, e espero que o faça. Se estiver a ficar com pouco tempo, considere experimentar a nossa própria solução, WebScrapingAPI, gratuitamente. O período experimental dura duas semanas e tem acesso a todas as funcionalidades essenciais, como a renderização JS e os proxies residenciais.

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