A chamada “renderização dinâmica do lado do cliente” proporciona aos clientes experiências interessantes, mas dificulta a compreensão das máquinas. Caso queira fazer mineração de dados, raspar sites ou enviar versões estáticas de seu aplicativo de página única para o Altavista, o senhor precisa essencialmente de um navegador no circuito. Isso é especialmente importante devido à quantidade de sites que usam React, Angular, jQuery ou alguma outra estrutura sofisticada de Javascript.

PhearJS é um software de código aberto que expõe o poder da tecnologia PhantomJS por meio de uma API HTTP. O senhor faz solicitações HTTP à API do PhearJS para buscar uma página da Web e obter um bom JSON, contendo o HTML renderizado e os metadados relevantes.

Neste tutorial, veremos como o senhor pode ter isso.

Configuração

O PhearJS funciona pelo menos em distros Linux populares e recentes e no Mac OS X. Primeiro, precisamos de algumas dependências:

  • Memcached, do: brew install memcached. Substituir brew por algo como apt-get dependendo do seu sistema operacional.
  • NodeJSprovavelmente o senhor já o tem, mas se não tiver, obtenha-o.
  • PhantomJS 2+A instalação da versão 2+ atualmente difere um pouco entre os sistemas operacionais, portanto, é melhor seguir as instruções de instalação do instruções de instalação.

Uau! Dependências eliminadas, agora o senhor tem o PhearJS:

git clone https://github.com/Tomtomgo/phearjs.git
cd phearjs
npm install


Pronto, é isso! Para verificar se o PhearJS está funcionando bem, execute-o. O senhor deverá ver algumas informações no terminal:

node phear.js


Se o senhor abrir seu navegador e acessar http://localhost:8100/status ele deve mostrar ao senhor algumas estatísticas sobre o servidor.

Fazer solicitações

Certo, agora já temos o PhearJS em execução. A renderização de uma página da Web é simples, usarei o cUrl aqui, mas o senhor também pode usar o navegador com um plug-in de visualização de JSON:

# URL is URL-encoded, like you'd do with encodeURIComponent()
curl "http://localhost:8100/" \
      "?fetch_url=https%3A%2F%2Fdavidwalsh.name%2F"


Em cerca de cinco segundos, o senhor verá uma resposta JSON com o HTML renderizado e os metadados, como os cabeçalhos da solicitação. Tente novamente e o senhor obterá a resposta em um instante.

Mas espere, por que leva cinco segundos na primeira vez? Bem, esses cinco segundos são um atraso que usamos propositalmente. Ele dá ao PhearJS algum tempo para buscar solicitações AJAX e renderizar. As solicitações subsequentes são atendidas pelo cache e, portanto, são rápidas.

Agora, se a conexão for lenta ou se o senhor souber que fará o scraping de páginas pesadas, poderá aumentar esse atraso:

curl "http://localhost:8100/" \
      "?fetch_url=https%3A%2F%2Fdavidwalsh.name%2F" \
      "&parse_delay=10000" \ # milliseconds
      "&force=true" # force a cache refresh


Esse é o uso mais simples do PhearJS. Há muito mais opções de configuração e de tempo de execução que estão documentadas em Github.

Raspagem

Vejamos um caso de uso comum do PhearJS: raspagem. Digamos que queiramos obter imagens de uma página de blog que não são visíveis sem o Javascript ativado, por exemplo https://davidwalsh.name/.

Dependências

Usaremos o Abraço e Solicitação para analisar e fazer solicitações:

npm install cheerio requests


Escrevendo scrape.js

Uma vez feito isso, podemos seguir algumas etapas simples para recuperar todas as imagens dessa página:

// 1. load dependencies
var cheerio = require('cheerio'),
    request = require('request'),
    url = require('url');

var page_url="https://davidwalsh.name";
var results = [];

// 2. encode the URL and add to PhearJS endpoint
var target="http://localhost:8100?fetch_url=" + encodeURIComponent(page_url);

// 3. use request to GET the page
request.get(target, function(error, response, body) {

    // 4. load the DOM from the response JSON
    var $ = cheerio.load(JSON.parse(body).content);

    // 5. use cheerio's jQuery-style selectors to get all images
    $("img").each(function(i, image) {

        // 6. resolve absolute URL and add to our results array
        results.push(url.resolve(page_url, $(image).attr('src')));
    });

    // 7. and boom! there's our images
    console.log(results);
});


Execute-o!

A execução desse script fornecerá ao senhor uma lista de todas as imagens da página:

# run PhearJS
node phear.js

# in another shell run the script
node scrape.js
[ <url>, ..., <url> ]


Próximo

Esse é um exemplo bastante trivial de raspagem com o PhearJS. Cabe ao senhor aplicá-lo a diferentes cenários, como rastreamento ou automatização para raspagem em lote, o que for. Gostaria de saber para que o senhor usou o PhearJS!

Conclusão

O PhearJS é um software de código aberto que permite que o senhor execute seu próprio “microsserviço” de raspagem ou pré-renderização. Ele renderiza páginas da Web e as retorna como JSON por HTTP.

Aqui nos concentramos em como configurar o PhearJS para uma tarefa de raspagem muito simples. SEO é outra tarefa importante, para a qual o phearjs-express middleware pode ser relevante.

Tom Aizenberg

Sobre Tom Aizenberg

Tom Aizenberg é desenvolvedor de software de Amsterdã, Holanda. Ele é o autor de PhearJS. Além de programar, ele gosta de tocar baixo, surfar e pescar.