-
Notifications
You must be signed in to change notification settings - Fork 8
Intégration de services Web
Troyes étant la "Cité du vitrail", nous allons prototyper ensemble une petite application permettant aux touristes de suivre des parcours thématiques à travers la ville. La réalisation sera grandement facilitée par la réutilisation et l'intégration de services Web existants :
-
http://steatite.hypertopic.org/pour les photographies des vitraux (l'image proprement dite, son nom, ses métadonnées incorporées), -
http://argos2.hypertopic.org/pour la description factuelle des photographies et l'indexation thématique des vitraux, -
https://www.google.fr/maps/place/pour la carte correspondante au nom d'un lieu.
Le TP sera réalisé dans un fichier HTML local testé dans Safari (nous verrons pourquoi plus tard).
La plupart du code de la première étape vous est fourni :
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://steatite.hypertopic.org/stylesheet.css' />
</head>
<body>
<h1>Vitraux de Troyes</h1>
<h2>Parcours "<span id="topic"></span>"</h2>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$.ajax({
url: 'http://argos2.hypertopic.org/topic/56e092d8a6179a788c74b618b29801c0/f1520229979b11428f94a004f880c022',
dataType: 'json',
success: function(data) {
for (var r of data.rows) {
if (r.value.item) {
var picture_id = r.value.item.id;
$('body').append('<div class="picture" id="'+picture_id+'"/>');
}
}
}
});
</script>
</body>
</html>Vérifiez que le menu "Développement" est activé (à changer dans "Préférences... > Avancées"). Grâce à l'"inspecteur Web", comparez le JSON récupéré et le DOM de la page HTML. Soyez sûr de comprendre exactement comment cela fonctionne avant de passer à la suite.
Ajoutez le code nécessaire pour inclure dans la page Web, à partir du flux JSON, le nom du parcours thématique.
Pour chacun des items, chargez avec Ajax la représentation de http://steatite.hypertopic.org/item/{corpus}/{item}.
Récupérez l'adresse de la vignette, et référencez la dans une img que vous ajouterez à la div correpondante.
Le résultat dans le DOM est surprenant ? Attention le "A" de "Ajax" signifie "asynchrone". L'état de vos variables n'est pas forcément celui que vous croyez. Corrigez votre programme en conséquence.
Une fois que cela fonctionne dans Safari. Ouvrez votre page avec Firefox (ou Chrome). Que dit le message d'erreur dans la console ? Quel mécanisme vu en cours en est la cause ? Expliquez la différence de comportement en comparant les entêtes envoyées et reçues dans les deux cas. Quelles raisons peuvent expliquer l'une et l'autre politiques de sécurité ? Comparez avec Firefox (ou Chrome) les entêtes envoyées et reçues dans le cas d'Argos et celui de Steatite. Que pourrait-on faire pour que notre application fonctionne avec n'importe quel navigateur ?
Dans l'onglet réseau, notez la latence totale de chargement de votre page. Quelle technique vue lors d'un cours précédent pourrait être mise à contribution ?
Faites de la réingénierie de la deuxième étape à l'aide de la représentation de http://steatite.hypertopic.org/corpus/{corpus}.
De quel facteur avez-vous réduit la latence totale ?
Chargez avec Ajax la représentation de http://argos2.hypertopic.org/corpus/{corpus}.
Récupérez le lieu et ajoutez le à la div correspondante (dans une sous div).
Sur chacun des lieux, ajoutez un lien vers la carte correspondante.
Quelles sont les trois méthodes d'intégration que vous avez utilisées lors de ce TP ?