DEV Community: Arthur Guimarães

Como fazer web scrape com Node.js

Arthur Guimarães — Sun, 05 Mar 2023 23:06:32 +0000

Como fazer web scrape com Node.js

Esse tutorial é indicado para iniciantes em Web scraping ou caso você precise saber quais recursos utilizar para realizar essa tarefa no Node.js. Você verá a poderosa combinação do Node.js + Cheerio + Axios para a raspagem de dados.

Pré requisitos

NodeJs 18+ e npm 8+: Qualquer versão do Node.js 18+ com o npm é suficiente.
Uma IDE ou editor de código de sua preferência. Recomendamos o Visual Studio Code, o qual foi utilizado pra criação desse tutorial.

Desejável:

Conhecimento básico de javascript e chamadas HTTP - mas se não tiver, tudo bem também, vou explicar um pouco mais no decorrer do tutorial e você pode aprofundar depois :)

Mão na massa

Crie uma nova pasta e inicie um projeto javascript:




npm init -y

Adicione as bibliotecas do axios e cheerio:




npm install axios cheerio

Na raiz da pasta crie o arquivo ìndex.js:

No arquivo index.js faça a importação do cheerio e axios:



const axios = require('axios');
const cheerio = require('cheerio');

Ainda no index.js crie o método executeScrape() e faça a chamada dele ao final do arquivo:



async function executeScrape() {
} 

executeScrape();

Agora utilizaremos o axios para fazer a chamada ao website que desejamos fazer a raspagem de dados.

💡O axios é utilizado para realizarmos chamadas HTTP para outros sistemas. No nosso projeto o usaremos para fazer um request GET e recuperar o HTML do site o qual nós faremos a raspagem dos dados. Para aprofundar no axios acesse a documentação.

Neste tutorial vamos usar o site do NodeBr para recuperar os dados da aba "Quem somos":



const url = 'https://nodebr.org/sobre/';

async function executeScrape() {
  const { data } = await axios.get(url);

  console.log(data);
}

executeScrape();

Execute o programa para validar o retorno do axios:



node index.js

Ao executar o programa devemos ver o HTML da página logado no console:



<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Quem Somos &#8211; NodeBR</title>
...

Agora utilizaremos o cheerio para ler o HTML retornado pelo axios e simula-lo em uma espécie de estrutura de DOM virtual, onde conseguiremos realizar consultas utilizando seletores CSS.

💡O Cheerio analisa o HTML e fornece uma API para percorrer/manipular a estrutura de dados. Especificamente, ele não produz uma renderização visual, aplica CSS, carrega recursos externos ou executa JavaScript que é comum para um SPA (aplicativo de página única). Isso torna o Cheerio muito, muito mais rápido do que outras soluções. Mais informações acesse a documentação oficial.

Podemos nos livrar do console.log(data) e faremos o carregamento do HTML no cheerio a partir do método load(), atribuindo o retorno para a variável $:



async function executeScrape() {
  const { data } = await axios.get(url);

  const $ = cheerio.load(data);
}

Pronto, agora podemos realizar consultas utilizando seletores CSS a partir da variável $.

💡Seletores CSS são padrões usados para selecionar elementos no HTML. Referência aqui

Para descobrir qual seletor usar para recuperar os dados que queremos vamos acessar a página https://nodebr.org/sobre/ e selecionar Inspecionar (ou apertar o comando CTRL + SHIFT + C que também abre o seletor) e verificar a árvore HTML da página.

Podemos ver que o texto de "Quem somos" fica em um parágrafo dentro de uma div com a classe "entry-content":

O seletor que retorna a informação que queremos é o 'div.entry-content > p'. Para realizar a consulta utilizando um seletor podemos passa-lo para a variável $. Por fim, usamos o método text() para extrair o texto do parágrafo (este método funciona em outras tags HTML também!):



async function executeScrape() {
  const { data } = await axios.get(url);
  const $ = cheerio.load(data);

  const entryContent = $('div.entry-content > p').text();

  console.log(entryContent);
}

// A NodeBR é a maior comunidade brasileira de Node.js. Com uma organização descentralizada oferecemos ajuda, dicas, eventos e todo tipo de recursos gratuitos para que a plataforma Node.js possa ganhar tração no Brasil.

Prontinho, temos nosso web scraper feito com Node.js + Cheerio + Axios :)

Caso precise consultar o código final do projeto, basta acessar o repositório on github - não esqueça de deixar um like por lá :)

Até a próxima!

CORS: o que é e onde resolver os problemas relacionados a ele?

Arthur Guimarães — Fri, 21 Oct 2022 18:30:34 +0000

Cross Origin Resource Sharing (CORS)

É uma restrição imposta apenas pelo navegador (e somente ele) para que somente domínios autorizados possam acessar os dados no servidor por meio de scripts, seja ele XMLHttpRequest ou Fetch API.

A validação funciona por meio de cabeçalhos HTTP que são enviados pelo servidor, ou seja, pela resposta que é recebida ao fazer um fetch de dados pelo navegador.

Os cabeçalhos principais são dois:

Access-Control-Allow-Origin - Define quais as origens (domínios) que tem permissão para acessar o servidor
Access-Control-Allow-Methods - Define quais métodos podem ser acessados pelas origens permitidas

Exemplo da resposta do servidor (usando o site do Twitter como exemplo), informando quais são os domínios que podem ter acesso aos dados (nesse caso apenas 'https://twitter.com'):

A validação é realizada pelo navegador porém quem controla esse acesso é o servidor. Ao contrário do que muitos pensam, a correção para problemas relacionados à CORS é sempre no servidor (back-end).

Em algumas requisições, é necessário enviar uma request preliminar chamada de preflighted request. Ela utiliza o método OPTIONS do HTTP, informando o método e domínio que será invocado para assim garantir que a requisição seguinte possa ser realizada.

Referência: https://www.treinaweb.com.br/blog/o-que-e-cors-e-como-resolver-os-principais-erros

Segurança

CORS é mais uma camada de segurança que sua aplicação pode usar para evitar acessos de terceiros não autorizados, mal intencionados ou não. Caso não haja uma barreira de CORS um ataque de brute fica um pouco mais complicado de ser feito contra a sua aplicação.

Mas lembrando, CORS não garante a segurança de sua aplicação! É apenas uma das várias opções e você deve sempre se manter o máximo seguro.

O que são domínios diferentes?

O mesmo domínio que o/do servidor é aceito automaticamente. Porém, domínios distintos* devem ser configurados no servidor para que o acesso seja liberado.

*O navegador considera como um domínio distinto quando ele é diferente da origem em: domínio do site, protocolo ou porta
Exemplo:

Nem todas as requisições realizadas no front necessitam de acesso explícito no CORS. Aqui estão as que necessitam:

Chamadas XMLHttpRequest ou Fetch API quando a comunicação é feita entre origens (domínios) diferentes.
Web Fonts (para o uso de fontes em @font no CSS)
Texturas WebGL
Frames de Imagens/vídeos desenhados em uma tela usando drawImage()

Referência: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/CORS#quais_solicitações_usam_o_cors

Uso básico de git

Arthur Guimarães — Mon, 14 Jun 2021 17:45:36 +0000

Mais um post de git?

Quando eu estava aprendendo git, o mais comum era ter que pesquisar mais uma vez comandos que já havia utilizado, e com a diversidade deles acabava me perdendo ou me confundindo ainda mais.
Criei esse pequeno "esquema" para que eu pudesse consultar facilmente, coloquei todos os comandos que pessoalmente mais utilizo, e caso apareça algo novo eu simplesmente adiciono à minha lista. Sem ter que olhar trocentos comandos/sites até encontrar exatamente o que preciso.

Me ajudou bastante à decorar os comandos básicos e espero que possa ajudar alguém também. Aqui vão os comandos:

Criar uma branch

git checkout master
git pull
git checkout -b <nome_da_branch>

Criar uma branch a partir da branch atual

git checkout master
git pull
git checkout <branch_que_já_existe>
git checkout -b <nome_nova_branch>

Deletar uma branch local

git branch -d <nome_branch_local>

Renomear uma branch local

git checkout <branch_que_sera_alterada>
git branch -m <novo_nome>

Enviar uma branch local para o repositório remoto

git push origin <nome_branch_local>

Deletar uma branch no repositório remoto

Para deletar uma branch remota, é preciso usar o comando "git push" com a opção "--delete":

git push origin --delete <nome_branch_remota>

Merge na branch local a partir de master

git pull origin master

How to improve as a Developer (personal tips)

Arthur Guimarães — Sun, 18 Apr 2021 23:32:22 +0000

In the beginning of my learning path, there was so many times where I wanted to increase my skills or just learn something new, but had no ideas for what to do. Or even moments where there were so many ideas and I didn’t know how to start any of them. I used to struggle to keep my focus when learning something new, or working in a new project I had planned.
After some thinking and research, I’ve found some tips that helped me to decide what, and more important how to do that.

First of all, have you decided what you want to build or learn?

If you have already decided which technology you want to learn or some project you want to build, or even just some little thing you want to improve in yourself? If yes, congratulations, you’ve done your homework (and you can go directly to the topic “How to organize yourself?”). But if not, you are in the same place as me in the beginning.
Some ideas if you don’t have any yet are: Habits tracker; Work with a public API; Any new technology; Automate or solve any personal trouble (I really like this one); Weather Checker?

Sorry for that, but it is what it is.

After you choose what you want to do, break your entire project in small goals. Start with the closer to a “Hello World” you can.

Fix this mindset: Make it work, after that make it beautiful. Don’t worry if your project doesn’t look so fancy, faster, or even well written. As a developer, we must understand the problem we’re facing, and the ability to break it in small steps is a huge helper.

Take your time to do your things.
As soon you start building your project’s base, the improvement will be so much smoother than if you had ran over the steps just to make it beautiful first.

I prefer an app that solve my problem, and you?

Some ideas that I think are great to challenge yourself (even if you have already build any of this, you may consider give it a try and make it better than last time).

Organize yourself

Make a deal with yourself, and set how much time you want to spend it which day or in the entire week, and stick with it.
If you are familiar with GIT, create your directory in Github (or any other place you like) and make sure to update your project frequently. Seeing your improves in the code will boost your will for finish it.

That’s it. I hope I’ve helped you in some way. See you in later posts.