Point de départ

“Je veux utiliser dans mon site des données qui proviennent d'autres sites, comment je fais ?”

Méthode 2 “tu te démerdes” : le web scraping

En GROS :

• scraper, c'est récupérer du contenu sur le web via un programme
• le programme fait comme l'internaute :
  • va sur un site,
  • clique sur des liens,
  • remplit des formulaires,
  • récupère le contenu qu'il souhaite (souvent via le DOM, XPath et des regex)

1.

Contexte

• appli PHP © _fg_ aidant à trouver des NDD dignes de http://carpacc.io/

Données nécessaires

• alphabet → demander à quelqu'un qui connaît
• dictionnaire français → choper un fichier texte sur le net
• liste d'extensions de noms de domaines → à scraper !

1.

Étapes (en tant qu'internaute)

1. Trouver une liste d'extensions structurée sur le net → gandi.net/domain/price/info

1.

Étapes (en tant qu'internaute)

1. Trouver une liste d'extensions +/- structurée sur le net → gandi.net/domain/price/info
2. Sélectionner les éléments voulus via le DOM → #gandi-price-list th a span

1. Dans notre application

Étapes (dans notre appli PHP, avec simplehtmldom)

1. Trouver une liste d'extensions structurée sur le net

   
   							$html = file_get_html('https://www.gandi.net/domain/price/info');
   						

2. Sélectionner les éléments voulus via le DOM

   
   							$elements = $html->find('#gandi-price-list th a span');
   						

3. Faire ce qu'on veut avec !

   
   							foreach ($elements as $element) {
   							    echo substr($element->plaintext."<br>", 1);
   							}
   						

1. Dans notre application

Résultat

Résultat de la dernière slide

application finale

design réalisé par un développeur

2.

Contexte

• appli aidant à calculer le coût d'un covoiturage

Données externes nécessaires

• kilomètres à parcourir entre 2 points → API Google
• prix moyen au litre du carburant → à scraper !

Contrainte

• appli 100% hype JavaScript : pas de code côté serveur

2.

On trouve des données structurées sur un site tiers...

zagaz.com/evolution-prix.php
table[summary="prix des carburants en direct"] p

2.

... et on les récupère dans notre site.

				$.get(
				    'http://www.zagaz.com/evolution-prix.php',
				    function(data) {
				        console.log(data);
				    }
				);
			

XMLHttpRequest cannot load http://www.zagaz.com/evolution-prix.php. Origin ... is not allowed by Access-Control-Allow-Origin. 

2. Via un service tiers

YQL à la rescousse !

2. Via un service tiers

YQL

• service de Yahoo! destiné à rendre plus simple l'accès aux données du web
• requêtes faites dans une syntaxe proche de SQL (select from table...)
• un même langage pour requêter une multitude d'APIs et de sites
• possiblité de créer et partager ses propres tables...
• CORS-enabled → utilisons-le comme proxy !

2. Via un service tiers

Notre requête YQL

				select p from html
				where url = "http://www.zagaz.com/evolution-prix.php" and (
				    xpath = '//table[@summary="prix des carburants en direct"]/tr/th' or
				    xpath = '//table[@summary="prix des carburants en direct"]/tr/td'
				)
			

...En JS

				$.get("http://query.yahooapis.com/v1/public/yql?format=json&q=...",
				    function(data, status) {
				        if (status === "success") {
				            //nos données sont dans data.query.results
				        }
				    }
				);
			

2. Via un service tiers

Résultat

design aussi réalisé par un développeur

3.

Contexte

• appli de duels aléatoires entre des cartes venant d'Hearthstone, un jeu de cartes à collectionner
  (genre Facemash du début de The Social Network mais avec des cartes à la places des filles)

Données nécessaires

• ... les cartes → à scraper !

3.

hearthhead.com

3.

hearthhead.com sans JS

3.

Contrainte

• Consulter le site ciblé sans JavaScript = pas de donnée

3. Avec un navigateur sans tête

PhantomJS + CasperJS

PhantomJS

• “headless browser” basé sur WebKit : pas d'interface, contrôlé via JavaScript

CasperJS

• API JS qui vient s'ajouter à PhantomJS
• facilite environ tout grâce à des méthodes plus haut-niveau

PhantomJS est un navigateur :
il comprend le JS !

3. Avec un navigateur sans tête

				var allCards = [];
				casper.start("http://hearthhead.com/cards?filter=type=4:5:7#gallery:0");
				casper.then(function afterStart() {
				    addCurrentPageCards();
				    addPagesCards( this.evaluate(function getNumberOfPages(counterSelector) {
				        var cardsNumber = document.querySelector(counterSelector) ? document.querySelector(counterSelector).innerHTML*1 : null;
				        return cardsNumber !== null ? Math.floor(cardsNumber/40) : 0;
				    }, '.listview-nav > span > b:last-child') );
				});

				//allCards est plein !
				casper.then(function afterCards() {
				    saveJSON("cards.json");
				    saveCSV("images.csv");
				});
				casper.run();
			

3. Avec un navigateur sans tête

				function addCurrentPageCards() {
				    var newCards = casper.evaluate(function getCurrentCards(cardSelector) {
				        var cards = document.querySelectorAll(cardSelector);
				        return Array.prototype.map.call(cards, function(element) {
				            return {
				                name: (element.querySelector('.screenshot-caption span span') ? element.querySelector('.screenshot-caption span span').innerHTML : null),
				                image: (element.querySelector('img') ? element.querySelector('img').src : null)
				            };
				        });
				    }, '.listview-mode-tiled td[align=center]');
				    allCards = allCards.concat(newCards);
				}

				function addPagesCards(numberOfPages) {
				    var currentNav = casper.evaluate(function(selector) {
				        return document.querySelector(selector) ? document.querySelector(selector).innerHTML : null;
				    }, '.listview-nav');
				    _(numberOfPages).times(function() {
				        casper.thenClick('.listview-nav > span + a');
				        casper.then(function afterNewList() {
				            addCurrentPageCards();
				        });
				    });
				}
			

3. Avec un navigateur sans tête

Résultat

Récapitulatif

• Appli PHP, Ruby, Python... ?
  → intégrer et utiliser une librairie directement dans l'application
• Pas de serveur, appli 100% client ?
  → tenter d'utiliser des services comme YQL pour faire proxy
• Besoin de récupérer des données affichées uniquement avec JavaScript ?
  → utiliser un navigateur sans tête comme PhantomJS
• Tu as un petit coup de blues, il faut que tu revoies le petit chat du début de cette présentation ?
  → http://jedepri.me

Fin !