TP Javascript : Ajax, Api & Mashups

Transcription

1 ATTENTION : les codes sources qui se trouvent dans cette page sont à prendre avec prudence pour 2 raisons : 1/ j ai pu faire des erreurs (éhh oui) 2/ Word a pu modifier des caractères comme les ou les et cela va faire planter votre application javascript et ce sera horrible à débugger puisque ces problèmes seront invisibles (caractères «presque» similaires). Conseil : recopier plutôt que copier/coller. 1/ Se préparer à coder : Sous firefox, installer l extension Firebug. Firebug est un outil très puissant pour ausculter tous les éléments d une page («inspect») et c est aussi un debuggeur avec watchs et breakpoints. Il faut l activer (en bas à droite du navigateur). Tester de temps en temps sous Internet Explorer (dans Firefox avec l extension ietab par exemple) permet de se souvenir qu IE c est encore combien de % des navigateurs installés dasn le monde au fait? [Question 1, en citant vos sources svp] Aller chercher les fichiers du TP et les rendre disponible via un serveur web ( sur votre espace personnel (public_html) par exemple, ou sous WAMP ou MAMP sur votre machine). Pour faire de l AJAX avec AHAH, c est indispensable, en local cela ne fonctionnerait pas. 2/ Sujet : Un Chat Géocodé Construire une chatroom qui localise les chatteurs sur une carte géographique. La localisation sera déduite de l adresse IP des chatteurs. Rendu : un zip complet via Rendu TP. Ne pas oublier de répondre aux questions du TP dans «reponses.txt». 3/ Chat : Lire L accès par plusieurs internautes à la page que vous allez créer (index.html) leur permettra de lire la même chatroom. Pour lire les contributions au fur et à mesure qu elles sont écrites (dans texte.html), il faudra texte.html div index.html recharger régulièrement (texte.html) placé sur le serveur. On ne recharge, bien sûr, que la zone nécessaire d index.html (div). Créer une page html (index.html) contenant une div nommée (donc avec un id). Utiliser la bibliothèque Ahah pour afficher dans votre div de conversation le contenu du fichier texte. Rafraichissez la div régulièrement avec un timer. INF347, Javascript/AJAX 1/6 Stéphane ROUILLY, Mai 2011

2 Ahah vs. Ajax Ahah récupère du html au lieu d xml (lisible sans transformation). Sa syntaxe est un peu plus simple. La bibliothèque est particulièrement légère. Surtout, il n y pas à gérer le callback. Usage : Ahah(«url», «id de la div pour afficher le contenu récupéré»); Charger la bibliothèque ahah dans index.html comme cela : <script src= ahah.js ></script> A ce stade, vous devez voir le contenu de la div changer lorsque vous modifiez à la main le contenu de texte.html (via votre éditeur de texte par exemple). Il est classique que cela ne soit pas le cas, cela peut provenir du cache de certains navigateurs qui ne rechargent pas le fichier texte à chaque fois. Une astuce pour leurrer le cache du navigateur web : changer l url d appel à chaque fois! Exemple : var toto=new Date() ; texte.html? + toto.gettime() // à placer en fin d url d appel de texte.html Vous devez gérer ce problème de cache même si votre navigateur n a pas ce comportement afin que votre chatroom fonctionne partout. 4/ Chat : Ecrire Pour écrire dans le fichier texte présent sur le serveur, on utilise texte.html un petit script PHP sur le serveur lui aussi (chat.php). On lui passe en paramètre (en GET) la phrase qu a tapé l internaute sous forme d une paire «nom=valeur» nommée «phrase», exemple : index.php?phrase=bonjour Chat.php div <input index.html Création de la fonction «écriture» du chat (index.html) : Créer un champ de formulaire de type texte nommé phrase. Un bouton ou un lien pour envoyer la phrase. On peut ensuite utiliser un événement (onclick, onmouseover, onsubmit ) pour lancer en javascript l envoi de la phrase vers le serveur. On peut récupérer la phrase grace au DOM2 puis utiliser une requète Ahah appelant chat.php avec le paramètre phrase pour l envoyer. Attention, Ahah souhaite mettre le résultat de la requète (rien donc) quelquepart. Vous pouvez par exemple créer une div cachée (style= «visibility :hidden») uniquement pour le recueillir. Cela évite une erreur javascript. A moins de modifier la bibliothèque ahah.js, non? [question 2, proposer une solution] Ce que fait chat.php : Chat.php, récupère une variable passé par le javascript qui s appelle «phrase», donc en php $_GET[ phrase ] puisqu on va tout passer en GET. Chat.php doit ensuite ecrire dans un fichier html coté serveur (texte.html) l adresse IP de l internaute ($_SERVER["REMOTE_ADDR"]) suivie de sa phrase ($_GET[ phrase ]) et enfin sauter une ligne à la fin (<br />). A ce point on doit pouvoir lire et écrire. Les contributions doivent apparaître au fur et à mesure. On peut aussi tester à plusieurs (il faut partager l url de sa page avec d autres). INF347, Javascript/AJAX 2/6 Stéphane ROUILLY, Mai 2011

3 5/ Géolocalisation TP Javascript : Ajax, Api & Mashups On souhaite connaître la position géographique (long /lat) des chateurs en cliquant sur leur adresse IP (présente au début de chacune de leurs phrase grâce à chat.php). Pour géolocatiser l adresse ip des chateurs, on s appuie sur un webservice fourni gratuitement par hostip.info. Vous pouvez allez sur et regarder leur API (façon d accéder à leur webservice). Lorsque l on clique sur l adresse IP, la fonction javascript «recherche» est invoquée avec pour paramètre l adresse IP recherchée (c est le PHP qui a généré le lien qui lance cet appel, pas besoin de s en occuper). Par contre il faut créer cette fonction «recherche». Elle doit faire un appel à hostip pour récupérer les coordonnées géographiques liés à l adresse ip qu on lui envoie. On envoie donc a hostip + ip. On doit afficher le résultat intermédiaire (les longitude et latitude) dans une div, toujours en ahah, et en une seule ligne de code (l appel et l affichage). Normalement, cela ne devrait PAS fonctionner. C est le problème du Cross Domain dont j ai parlé en cours. Mais, depuis la version 3.5 de Firefox, le CORS (voir cours) est supporté. La same origin policy ne s appliquera pas si le service appelé renvoie dans son entête http la propriété «Acces Control Origin = le host de la page appelante». Vous n avez pas à demander à hostip d ajouter votre host car leur Acces Control Origin est égal à * et autorise donc tout le monde. D autres services comme ipinfodb n ont pas encore ajouté cette propriéte (essayer 6b&ip= et regarder dans Firebug l entête de la réponse). Comme ce problème n est pas encore réglé partout et que nous voulons que notre chatroom fonctionne sur tous les navigateurs, nous allons tout de même traiter ce problème. Pour contourner ce problème ( on va utiliser un proxy (proxy.php, voir «simple web proxy» sur la page pointée par l url précédente) en passant en paramètre l url que nous souhaitions atteindre (chez hostip). Le nom de ce parametre est yws_path (c est le proxy qui détermine ce nom, on peut le changer dans le PHP), on aura donc «proxy.php?yws_path= [url de hostip et ip à géolocaliser]». Pour des questions de sécurité, j ai inclus directement dans le proxy, il vous reste donc à ajouter get_html.php?position=true&ip=' + ip après le yws_path. Petit problème d encodage : Le & qui sépare les paramètres dans les url en GET devient ambigu puisqu on ne sait pas à quel? il se rapporte (celui du proxy ou celui de hostip?). Il vaut mieux donc remplacer le caractère & contenu dans l url par son urlencodage (%26). A ce stade, on doit pouvoir afficher dans la nouvelle div le pays, la ville et les longitude et latitude de l internaute. Cela ne fonctionne pas toujours (géolocalisation farfelue ou bien Private Address), à votre avis pourquoi? [Question 3, deux raisons] On peut aussi tester avec quelques adresses IP écrites à la main (pour simuler des INF347, Javascript/AJAX 3/6 Stéphane ROUILLY, Mai 2011

4 chats avec des personnes à l étranger) dans le fichier texte.html ( : Paris, : Allemagne, : Amsterdam, : Canada.) 6/ Créer une carte On voudrait placer sur une carte les chateurs lorsque l on connait leur position, pouvoir zoomer dans la carte, déplacer la carte, passer en mode photo satellite et plus. Quand on place un internaute sur la carte, positionner un marqueur cliquable qui se transforme en bulle et qui contient au minimum l adresse ip de l internaute mais aussi son pays, sa ville et sa position. Google maps propose une API qui répond très bien à cette demande. On souhaite donc intégrer un carte google maps dans la page (à droite?). On ne la fait apparaître que lorsque l internaute clique sur un bouton (ou un lien) pour placer sur la carte une géolocalisation qu il a effectuée (et qui apparaît donc dans la div). A ce point, n hésitez pas à aller trainer sur l AJAX API Playground de Google ( vous découvrirez par l exemple, tout ce qu il est possible de faire. Création de la fonction cartographie (index.html) Créer une nouvelle div (par ex map ) pour contenir la carte. Créer un carte dessus (par exemple avec new google.maps.map(document.getelementbyid("map"), myoptions); Récupérer le contenu de la div avec sa position géographique suite à la géolocalisation (DOM2) et réutiliser ces données dans l API Google pour afficher un marqueur à l emplacement donné et pour centrer la carte autour de ce point. On choisira un rapport de zoom permettant de se mettre au niveau des pays (12 par exemple). Un autre petit exemple simple de code Google Maps en javascript : view- source: FR/apis/maps/documentation/javascript/examples/marker-simple.html Du fait d avoir choisi Ahah pour requèter le webservice, on doit «parser» la chaine de retour pour en extraire la latitude et la longitude. Une expression régulière se charge très bien de ce travail. Voici le parseur et l expression régulière (ATTENTION, SYNTAXE EXACTE): var info= [le contenu de la div avec le résultat de la géolocalisation] reg = new RegExp("[0-9.]+","g"); var coordonnees = info.match(reg); // tableau lon / latitude (attention à l ordre) // coordonnées[1] et de [2] contiendront les résultats Pourquoi n a-t-on pas eu besoin de proxy avec Google maps? Il s agit pourtant bien d un service Ajax appelé sur un serveur différent du votre (et qui n utilise pas le CORS) [Question 4]. Au passage, que se passe-t-il avec l adresse ip du Canada fournie au chapitre 5? [Question 5] 7/ Rendre présentable l ensemble INF347, Javascript/AJAX 4/6 Stéphane ROUILLY, Mai 2011

5 Mettre une feuille de style (depuis Open Design par exemple) et ajouter des effets : faire disparaître la carte au bout d un certain temps après consultation, afficher la dernière phrase tapée au dessus de la ligne de flottaison (Ces 2 points sont des plus qui seront notés) 8/ Rendre ce chatroom un peu moins «roots» ATTENTION, cette partie s effectue sur un autre fichier : index2.html. Elle est notée (comme un plus) et correspond mieux aux élèves ayant une bonne expérience du web A/ Ecrire les requêtes en Ajax avec la bibliothèque jquery Au passage, simplifier le code Javascript en accédant au DOM vis les sélecteurs $() Vous verrez que grâce aux fonctions de retour ajax de jquery, on peut non seulement récupérer des informations d un webservice (comme en ahah), mais on peut les traiter (on non pas seulement les afficher dans une div comme en ahah), et surtout on peut déclencher des actions diverses quand le retour s est fait (Calback). Par exemple, essayez de déclencher un son quand vous envoyez une nouvelle phrase et que le serveur l a bien reçue (Sound.play( chien.mp3 )). Mieux encore, déclenchez un son quand une nouvelle phrase vient d être postée (par vous ou un autre). Conseil : il suffit de comparer le contenu de la div texte (qui venait de texte.html d il y a quelques secondes) avec le retour de la fonction AJAX qui contient texte.html. B/ Pseudo Ce serait bien qu on puisse prendre un pseudo (à saisir par l internaute dans un champs texte (input)). Ce serait encore mieux qu il s affiche dans la conversation à la place de l ip (même si quand on clique, on envoie toujours l ip à hostip par contre). Le top serait que l internaute puisse modifier son pseudo comme le titre du bureau Netvibes : c est à dire que le pseudo ne soit pas dans un champs texte mais qu on l y mette seulement si l utilisateur clique sur son pseudo qui devient alors éditable. C/ Mashup avec un graphe On pourrait utiliser l API Google Chart pour afficher un graphique qui évoluerait dans le temps. Par exemple le nombre de phrases entrées chaque minute par les internautes, avec un historique de 10mn. Pour construire un graphique fixe, on peut s aider du générateur Pour le rendre dynamique, il suffit de récupérer l url avec ses paramètres et de remplacer certains paramètres par des variables javascript comme cela : f0000,ffcc00&chf=bg,s,ffffff&chtt=apples+and+oranges&chdl=apples Oranges&chl= annee ; Mettre les données en texte (data>text) dans le générateur pour que l url soit facile à fabriquer en Javascript. E/ Améliorations fonctionnelles : - Prévenir quand quelqu un est en train d écrire - voir la liste de connectés, INF347, Javascript/AJAX 5/6 Stéphane ROUILLY, Mai 2011

6 - envoyer des messages privés, - ajouter des smileys. - échanger des pieces jointes sur box.net? - différenciation des chatteurs : couleur, photo, coté (plutôt qu une photo, une simple liste d avatar déjà présents sur le site (liste déroulante, $F), - Tant qu une requête ajax est en cours, faire apparaître une image d attente (bouton en train de tourner ( F/ Améliorations techniques : - transformer le chat en webservice (JSON) pour le rendre réutilisable - faire passer les caractères accentués - capter le «enter» pour publier une phrase, ne pas publier si rien n a été entré - externaliser la css et le code js - Utiliser jquery compressé et minifié (on gagne 80%) INF347, Javascript/AJAX 6/6 Stéphane ROUILLY, Mai 2011