DEV Community: llermaly

Body parsing in App Search

llermaly — Thu, 07 Jul 2022 23:20:15 +0000

A feature some people (including me) miss from Swiftype Site Search is being able to parse content using CSS selectors.

The body parsing problem

The App Search crawler will extract all the content from the website you specify and spread it in fields depending on the HTML tags it finds.

Text within title tags will be assumed as title field; anchor tags as links, and body will be parsed as one giant field with everything else.

What if a website has a custom structure we want to capture? For example, product pages. We want to capture things like color, size, and price in specific fields and not as part of a single body field.

App Search allows you to add Meta Tags to your website to create custom fields, but sometimes making changes on the website is too complicated (red tape) or just not possible.

The body parsing solution

This post will explore a way of creating a proxy between the crawler and the actual website that does the extraction, creates the needed Meta Tags, and then inject these in the new response so App Search can grab these tags and use them.

To keep this short, I will not be doing a step-by-step guide and only showing the key parts of the script.

So, what are we doing?

We are going to create a NodeJS server that hosts a product page and a proxy that stands in front. This will receive the crawler request, hit the product page, inject the meta tags, and then return the page to the crawler.

This is how we add custom fields using meta tags:

<head>
  <meta class="elastic" name="product_price" content="99.99">
</head>
<body>
  <h1 data-elastic-name="product_name">Printer</h1>
</body>

Tools

Nodejs (to create example page and proxy)
Ngrok (to expose local proxy to the internet)
App Search (to crawl the page)

The page

Following the example we will serve a page that emulates a product page for a printer.

index.html

<html>
  <head>
    <title>Printer Page</title>
  </head>
  <body>
    <h1>Printer</h1>
    <div class="price-container">
      <div class="title">Price</div>
      <div class="value">2.99</div>
    </div>
  </body>
</html>

server.js

const express = require("express");
const app = express();

app.listen(1337, () => {
  console.log("Application started and Listening on port 1337");
});

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

Afterwards, we use App Search to crawl the page and—as expected—the data we want to have as fields (like the price) was just put inside the body content field:

Then, we will create a proxy capable of recognizing this data, and injecting a meta tag to the response, so App Search can recognize this is a field.

proxy.js

const http = require("http"),
  connect = require("connect"),
  app = connect(),
  httpProxy = require("http-proxy");

app.use(function (req, res, next) {
  var _write = res.write;
  res.write = function (data) {
    _write.call(
      res,
      data
        .toString()
        .replace('class="value"', 'class="value" data-elastic-name="price"')
    );
  };
  next();
});

app.use(function (req, res) {
  proxy.web(req, res);
});

http.createServer(app).listen(8013);

var proxy = httpProxy.createProxyServer({
  target: "http://localhost:1337",
});

console.log("http proxy server" + " started " + "on port " + "8013");

Finally, we can start our server and proxy to expose the proxy with Ngrok and use it in App Search.

Voilà! We now have the price as a separate field:

We can go as fancy as we want using the middleware that transforms the body response to add meta tags based on existent classes, but also based on the content itself.

This is a simple example, but I hope you get the gist.

Qué es una API y por qué todos deberían conocerlas

llermaly — Tue, 22 Jun 2021 19:02:46 +0000

Me he dado cuenta de que en algunos aspectos hemos avanzado mucho y en otros no tanto en lo que respecta al uso de la tecnología.

Adultos que hace un par de años no tenían correo hoy en día están en todas las redes sociales, compran online y hasta nos enseñan uno que otro truquillo a veces.

Los más jóvenes en cambio, si no están relacionados con la tecnología por sus carreras no están muy lejos de estos valientes padres y abuelitos en cuanto al uso de herramientas tecnológicas a en el día a día, hablo de las personas de entre 25 y 45 años.

Ya es hora de dar el siguiente paso y conocer las API.

¿ Qué es una API ?

Una API (application programming interface) es un estándar de comunicación entre sistemas. De esta forma un sistema en internet puede utilizar datos de otro sin necesidad de hacer un esfuerzo adicional por conseguir esa comunicación, es un lenguaje común entre máquinas.

Por ejemplo, un sitio web se ve así:

Y la respuesta de una llamada a su API se vería así:

[
  {
    "quote": "The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking",
    "author": "Albert Einstein",
    "tags": ["change", "deep-thoughts", "thinking", "world"]
  }
...
]

Esto permite que cualquier otro sitio web o persona pueda obtener los datos de manera estructurada y procesarlos de la forma que necesite.

¿ Y eso qué ?

Si aun no se te ocurre en qué te afecta esto a ti, te lo explico de otra manera: Las API son a los sitios web, como las planillas de Excel son a los documentos word/PDF.

Un documento PDF está muy bien para leer información sumarizada, pero no nos permite trabajar con los datos que se usaron para llegar a ese resultado. En cambio una planilla Excel nos permite hacer muchas cosas, tales como realizar cálculos, visualizar gráficos, convertir la planilla en una base de datos, etc.

Y Cómo consulto una API ?

La forma más simple es mediante tu navegador, en este caso la API tiene que ser pública y usar el verbo GET. No quiero entrar en detalles al respecto porque no es el fin de este post.

Pincha este link : https://mindicador.cl/api

Esa es una API que entrega indicadores económicos, pero las hay de absolutamente todo tipo. Al final del post agregaré fuentes de distintas APIs.

¿ Y qué hago yo con esa respuesta ?

Como puedes ver la respuesta que te entregó viene el mismo formato del ejemplo de las frases, se llama JSON.

Si quieres convertir una lista de objetos JSON a un CSV (excel) puedes utilizar esta página:

https://www.convertcsv.com/json-to-csv.htm

Pero meterme a la página del banco central es lo mismo y hasta más bonito ...

Es lo mismo siempre y cuando seas tú el que realice la acción, pero, ¿y si una máquina la ejecuta por tí?. Mi último proyecto se llama gustabot y es un asistente de Whatsapp que funciona como intermediario entre tú y la API, y te permite por ejemplo escribir !uf 200 al bot, y el bot irá a la API y te entregará el valor total de 200UF. Así te ahorras entrar a la página del banco central, abrir la calculadora, y hacer el cálculo.

¿ Me vas siguiendo ahora ?. Existen infinidad de actividades que se pueden hacer de forma más eficiente utilizando APIs, sin contar el tema de la libertad de los datos.

La libertad de los datos

Volviendo a la analogía del Excel y el Word. Deberíamos confiar ciegamente en los gráficos que se nos muestran a la hora de tratar temas importantes?, o deberíamos ir directo al Excel a mirar los datos duros?. Lógicamente deberíamos ir directamente a los datos y visualizarlos como más nos convenga a nosotros, y no a quien nos expuso los gráficos.

Con las API ocurre lo mismo. En muchos casos las páginas web mostrarán los datos según intereses que no necesariamente se van a alinear con los nuestros. Con las API este problema desaparece. Puedes acudir a esta, descargar los datos y procesarlos a gusto.

Y por qué tan poca gente las conoce ?

El concepto de API existe hace mucho, sin embargo el gran responsable de que no sean un tema es que en Chile al menos hay muy pocos sistemas con APIs disponibles para las personas.

Algunos chilenos de gran corazón han hecho APIs "a la mala", es decir, crearon un software que descarga la página web y luego disponibiliza una API con resultados estructurados para que otros la usen.

Ejemplo: API para ver sismos en Chile https://api.xor.cl/sismo/ , las instrucciones de uso en este link https://xor.cl/api/sismo/.

Este tipo de iniciativas permiten que cualquier persona pueda recolectar datos para estudios, o para generar nuevas plataformas que los utilicen.

Y por qué es importante?

La existencia y uso de las APIs por parte de la ciudadanía es importante porque distribuye el poder de la información, y permite que los mismos ciudadanos puedan realizar tareas de forma más eficiente.

Dicha generación de conocimiento a su vez impulsa el desarrollo tecnológico y presiona la existencia de más APIs para los datos que se publican como "abiertos y transparentes" y que por la carencia de APIS muy poco se puede hacer para explorarlos.

Ahora puede sonar raro, pero igual de raro sonaba hace años que alguien te dijera "anota tus gastos en un Excel y los vas mirando todos los meses" cuando el Excel era un software para trabajar exclusivamente.

Resumen

Una API es un estándar de comunicación entre máquinas
Las personas pueden usarlas para mejorar su eficiencia y procesar los datos a gusto
Existen sistemas intermediarios para facilitar su uso

Links de interés

Faltó mucho más por cubrir, pero queda de tarea que entiendan mejor cómo consultar las distintas APIs disponibles, les dejo un punto de partida.

https://www.postman.com/ : Software para consultar APIs que no se pueden consultar con el navegador
https://xor.cl/ : Algunas APIs chilenas
https://www.convertcsv.com/json-to-csv.htm : Convertidor JSON a CSV
https://github.com/public-apis/public-apis : Listado de APIs por categorías (inglés)