Table des matières

Une SPA à la main

Vous allez développer une première SPA. Voici le squelette depuis lequel vous allez partir:

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>OpenData bordeaux</title>
		<script src="jquery.min.js"></script>
		<script src="my.js"></script>
	</head>
	<body>
		<div id="menu">
			<button type="button" id="btn-toilets">Toilettes</button>
			<button type="button" id="btn-kidareas">Aires de jeux pour enfants</button>
		</div>
		<div id="data">
			<ul id="data-list">
			</ul>
		</div>
	</body>
</html>

Vous aller placer ce code dans un répertoire vide, et vous allez rajouter dans ce répertoire un fichier vide my.js dans lequel vous devrez développer. Pour tester votre code, vous utiliserez un navigateur classique (Chrome ou Firefox avec le module Firebug).

Votre objectif va être de réagir aux clics sur les boutons pour aller chercher sur le site d’open data bordeaux le flux de données qui correspond au titre du bouton, et afficher dans l’élément ul les noms de tous les éléménts de la catégorie concernée qui existent sur Bordeaux. Comme il s’agit d’une requête inter-domaines vous devrez utiliser JSONP ou CORS pour que la reqûete Ajax fonctionne. Le site de Bordeaux ne supporte que JSONP!

Bien entendu, vous utiliserez JQuery pour simplifir la manipulation du DOM.

Voici un exemple très simple en JQuery pour récupérer des données opendata de Bordeaux.

const URL = 'http://odata.bordeaux.fr/v1/databordeaux/sigsanitaire/?format=json&callback=?';
$.getJSON(URL, function(result){
   alert(JSON.stringify(result));
});

Le blog des quartiers

Modifiez le blog de la première séance pour faire en sorte que chaque article affiche la liste des rues d’un quartier de Bordeaux.

Afficher un album

Si vous souhaitez jouer avec la méthode fetch et les services CORS vous pouvez faire des requêtes sur http://www.reveillere.fr/M2WEB/tds/td3/albums.json