¿Cómo podemos utilizar WSA en nuestro proyecto? Echemos un vistazo a este ejemplo rápido en el que extraemos datos de Amazon para encontrar la tarjeta gráfica más cara de una página. Este ejemplo está escrito en JavaScript, pero puedes hacerlo en cualquier lenguaje de programación con el que te sientas cómodo.
En primer lugar, necesitamos instalar algunos paquetes que nos ayuden con la solicitud HTTP (got) y el análisis del resultado (jsdom) utilizando esta línea de comando en la terminal del proyecto:
npm install got jsdom
El siguiente paso es configurar los parámetros necesarios para realizar nuestra solicitud:
const params = {
api_key: "XXXXXX",
url: "https://www.amazon.com/s?k=graphic+card"
}
Así es como preparamos la solicitud a WebScrapingAPI para que rastree el sitio web por nosotros:
const response = await got('https://api.webscrapingapi.com/v1', {searchParams: params})
Ahora tenemos que ver dónde se encuentra cada elemento de la tarjeta gráfica dentro del HTML. Usando la Herramienta de Desarrollador, descubrimos que la clase s-result-item contiene todos los detalles sobre el producto, pero solo necesitamos su precio.
Dentro del elemento, podemos ver que hay un contenedor de precio con la clase a-price y la subclase a-offscreen, de donde extraeremos el texto que representa su precio.
WebScrapingAPI devolverá la página en formato HTML, por lo que tenemos que analizarla. JSDOM nos servirá para ello.
const {document} = new JSDOM(response.body).window
Tras enviar la solicitud y analizar la respuesta recibida de WSA, debemos filtrar el resultado y extraer solo lo que nos interesa. Del paso anterior sabemos que los detalles de cada producto se encuentran en la clase s-result-item, así que los recorremos. Dentro de cada elemento, comprobamos si existe la clase del contenedor de precio a-price y, si es así, extraemos el precio del elemento a-offscreen que hay en su interior y lo añadimos a una matriz.
Averiguar cuál es el producto más caro debería ser ahora pan comido. Solo hay que recorrer la matriz y comparar los precios entre sí.
Si lo envolvemos en una función asíncrona, el código final debería quedar así:
const {JSDOM} = require("jsdom");
const got = require("got");
(async () => {
const params = {
api_key: "XXX",
url: "https://www.amazon.com/s?k=graphic+card"
}
const response = await got('https://api.webscrapingapi.com/v1', {searchParams: params})
const {document} = new JSDOM(response.body).window
const products = document.querySelectorAll('.s-result-item')
const prices = []
products.forEach(el => {
if (el) {
const priceContainer = el.querySelector('.a-price')
if (priceContainer) prices.push(priceContainer.querySelector('.a-offscreen').innerHTML)
}
})
let most_expensive = 0
prices.forEach((price) => {
if(most_expensive < parseFloat(price.substring(1)))
most_expensive = parseFloat(price.substring(1))
})
console.log("The most expensive item is: ", most_expensive)
})();
