lechazo conf - otogami - web scraping 101

Valladolid, 28 de Marzo de 2015

Jerónimo López@jerolba

Scraping 101 para humanos

martes 28 de abril de 15

Disclaimer

Disclaimer


Sobre mi

Jerónimo‣ Apasionado de la informática

‣ Técnico vocacional

‣ Jugón

‣ 14 años de experiencia

‣ Mundo empresarial

‣ Medios de comunicación

‣ Java, J2EE

‣ ...y Scraping


QUÉmartes 28 de abril de 15

el mejor motor de búsqueda y comparador de ofertas de videojuegos

Quémartes 28 de abril de 15

el mejor motor de búsqueda y comparador de zapatillas y material deportivo

Quémartes 28 de abril de 15

Qué

Qué

‣Proporcionar toda la información:• Accesible

• Estructurada

• Sin ruido

• Actualizada

‣Dejar que el usuario elija


CÓMOmartes 28 de abril de 15

Cómo

Cómo

‣Recopilando datos

‣Filtrando los datos

‣Organizando los datos


Cómo

Cómo

Recopilar datos:• Servicios web/API

• Feed

• FTP

• Web Scraping


Cómo

Web Scraping

‣Accede al contenido

‣Parsea el HTML

‣Interpreta el contenido


Parseo HTML

Parseo HTMLcurl http://www.game.es/Product/Default.aspx?SKU=068320


http://www.game.es/Product/Default.aspx?SKU=068320

http://www.game.es/Product/Default.aspx?SKU=068320

Parseo HTML

Parseo HTML

Estrategias:

‣El bueno

‣El feo

‣El malo


Parseo HTML

El feo: “Machote”

‣Las herramientas son

para nenazas

‣Uso IndexOf y SubString

a saco


Parseo HTML

El feo: “Machote”


Parseo HTML

El malo: Expresiones Regulares

‣Son perfectas para buscar patrones!

‣Una expresión regular

para dominarlos a todos


Parseo HTML

Expresiones Regulares


Parseo HTML


Ahora tienes dos problemas


Parseo HTML


RegEx

Jerarquia de Chomsky

HTML


Parseo HTML


http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454




Parseo HTML

El bueno: DOM

Parsea el documento y construye el árbol DOM


Parseo HTML

DOM


Parseo HTML

DOM

‣Nekko

‣JSoup


Acceso al DOM

Acceso al DOM


Acceso al DOM

Acceso al DOM

‣Expresiones XPath

‣Expresiones JQuery


Acceso al DOM

Acceso al DOM


Acceso al DOM

Acceso al DOM‣ Developers Tools/Firebug es tu mejor amigo


Acceso al DOM

Acceso al DOM‣ ... pero ten a mano a CURL

curl 'http://www.game.es/Product/Default.aspx?SKU=101912' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: es,de-DE;q=0.8,de;q=0.6,en;q=0.4,nl;q=0.2' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'Referer: http://www.game.es/Search/search.aspx?Name=One%20Piece%20Unlimited%20World%20Red&New=True&Pre=True&Dlc=True&Status=A,U,O,P,F,B&PageSize=10&SortField=1&SortDirection=1' -H 'Cookie: ASP.NET_SessionId=msj45p4zhtbx4mljfvymotyl; __utmt=1; __utma=163409322.2020732193.1421491515.1427475287.1427478193.9; __utmb=163409322.2.10.1427478193; __utmc=163409322; __utmz=163409322.1427412085.7.4.utmcsr=game.es|utmccn=(referral)|utmcmd=referral|utmcct=/' -H 'Connection: keep-alive' -H 'Cache-Control: no-cache' --compressed


http://www.game.es/Product/Default.aspx?SKU=101912'

http://www.game.es/Product/Default.aspx?SKU=101912'

http://www.game.es/Search/search.aspx?Name=One%20Piece%20Unlimited%20World%20Red&New=True&Pre=True&Dlc=True&Status=A,U,O,P,F,B&PageSize=10&SortField=1&SortDirection=1'




Acceso al DOM

Acceso al DOM

‣Cuidado con el rendimiento:

• No recorras todo el DOM cada vez

• Localiza un nodo principal

• Navega a partir de él


Acceso al DOM

Acceso al DOM

‣Expresiones simples

‣Evitad elementos del framework CSS


Acceso al DOM

Acceso al DOM

‣Accede por id

‣Busca clases del CSS “semánticas”

no de estilo


Acceso al DOM

Acceso al DOM

‣Gracias Google por el marcado semántico!


Acceso al DOM

Acceso al DOM‣Especificación en http://schema.org

‣Busca facilitarle la vida a Google

‣Existe un schema para

todo lo que se os ocurra


http://schema.org

http://schema.org

Acceso al DOM

Acceso al DOM


Acceso al DOM

Acceso al DOM

‣Gracias RIA y Ajax!


Acceso al DOM

Acceso al DOM


Acceso al DOM

Acceso al DOM

‣Datos en JavaScript del HTML

‣Datos en peticiones AJAX


Tu código

Tu código

‣Abstrae, abstrae, abstrae! :)

‣Desacopla el fetch de la página de su procesamiento

‣Desacopla las páginas entre si cuando navegues de una a otra

‣Desacopla la construcción de tus DTOs de la

lógica de parseo del HTML


Tu código

Tu código

‣Una clase por página•getTitulo()•getPrecio()•getCostesDeEnvio()•getDisponibilidad()‣Cuidado con los bucles infinitos en los listados

paginados


Tu código

Tu código‣Asúmelo, cualquier campo al que accedas

algún día no vendrá y tendrás un “NPE”

‣Asúmelo, la red falla y los servidores a los que

consultas se caen

‣En Otogami:

‣ Let It Crash y recover

‣ Trazas de los errores

‣ Si el nº de elementos obtenidos menor que % de

elementos actuales, se aborta el proceso


Tu código

Tu código

‣Somos agilistas y hacemos test, no?

‣Mi mejor test es que funciona con webs

reales

‣En cuanto algo se rompe es porque la

web ha cambiado

‣Monitoriza logs y alertas


Cómo

Recopila datos

‣Accede al contenido

‣Parsea el HTML

‣Interpreta el contenido


Accede al contenido

Accede al contenido‣Apréndete cómo funciona HTTP


Accede al contenido

Accede al contenido

‣Los distintos verbos:• GET

• POST

• PUT

• DELETE

‣Cómo van los parámetros en GET?

‣Cómo van los parámetros en POST?


Accede al contenido

La request


Accede al contenido

La request

Para paginar?!


Accede al contenido

Las cabeceras


Accede al contenido

Las cabeceras

‣Las cabeceras más importantes:

• User-Agent

• Accept

• Referer

• Cookie


Accede al contenido

User Agent

‣El User Agent identifica:

• la aplicación (tipo)

• el sistema operativo

• motor de renderizado

• el navegador en sí


Accede al contenido

Accept

‣ Accept especifica qué formatos acepta el navegador:

• Texto: Html, Xml,..

• Imágenes: WebP

• Compresión y tipos (gzip, deflate,...)

• Idiomas del usuario


Accede al contenido

Referer

‣ Referer especifica al servidor desde qué URL se originó la petición actual

‣ El servidor puede condicionalmente modificar el resultado en función de su valor


Accede al contenido

Cookies

‣ Las cookies son variables que comparten el servidor

y el navegador, sin pasarse explícitamente

‣ Por tanto, guardan estado del usuario:

• Idioma

• Pais

• Moneda

• etc


Accede al contenido

La de sesión


Maldito JavaScriptmartes 28 de abril de 15

Maldito JavaScript

Maldito JavaScript

‣ Hacer ingeniería inversa y calcular/simular en tu

código el resultado del JS

• Muy rápido en ejecución

• Pero muy frágil

• Si cambia la página tienes que volver a repetir la ingeniería inversa y reprogramar


Maldito JavaScript

Maldito JavaScript‣ Ejecutar todo en un motor web de verdad:

• Levanta un “navegador” de verdad

• Lento y consume muchos recursos

• Más robusto ante un cambio

• Tú no tienes que tocar nada si cambia el JS

• ¡Es un entorno de ejecución real! Tienes fetch,

parseo, user agents, cookies, sesión, etc. Out Of The Box!

• Más difícil de configurar


Maldito JavaScript

Maldito JavaScript

Capibara

WebDriver


Maldito JavaScript

¿Y en Saas?

kimonolabs


https://www.kimonolabs.com/




¿Y en Otogami?

¿Y en Otogami?

‣ 100% Java

‣ Implementa un navegador por completo:

• Navegación

• Aplica CSS

• Ejecuta JS

‣ Implementa WebDriver y es el driver más rápido

‣ Por defecto, no activamos el JS ni el CSS


¿Es legal?

¿Es legal?

Aunque puede que incumplas términos del acuerdo

con la web si tienes un acuerdo comercial con ellos

SImartes 28 de abril de 15

¿Preguntas?

[email protected]

@jerolba


mailto:[email protected]




lechazo conf - otogami - web scraping 101

Engineering