TD : un chat geolocalise (mashup)

3,136 views

Published on

Construire en 4h et en javascript, un chat en ajax. Ce chat permettra de trouver la localisation (longitude latitude) des chatteurs et de les positionner sur une carte (google maps).
Ce TD a ete dispense en Mastere Management des Nouvelles Technologies organise par Telecom Paris et HEC en octobre 2006 .

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,136
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TD : un chat geolocalise (mashup)

  1. 1. Javascript : Ajax & Mashups Mastère MNT 2006 http://www.flickr.com/photos/backwards_hat/132165777/
  2. 2. Acquis ? <ul><li>Rapport avec java ? </li></ul><ul><li>Langage interprété coté client </li></ul><ul><li>Non typé (utiliser var, casting) </li></ul><ul><li>Tout peut être objet (a.length) </li></ul><ul><li>Conditions / opérateurs (doubles, triples, inline) </li></ul>
  3. 3. Bases Du Langage & plus <ul><li>Bases : </li></ul><ul><ul><li>Reste les tableaux et les fonctions </li></ul></ul><ul><ul><li>Insertion et affichage : hello Word </li></ul></ul><ul><li>DOM : 1ère page JS + new DOM </li></ul><ul><li>Moderne : </li></ul><ul><ul><li>Ajax </li></ul></ul>
  4. 4. Se Préparer À Coder ! <ul><li>Firefox et IE </li></ul><ul><li>Extensions FF : firebug, webdeveloper, ietab au minimum. Sous IE, barre developer IE </li></ul>
  5. 5. Chatter http://www.flickr.com/photos/xti/26865170/
  6. 6. Sujet : Un Chat Géocodé <ul><li>Construire un chat qui garde la trace de la localisation de l’internaute via son adresse IP. </li></ul><ul><li>Le chat garde trace de la conversation et de l’IP dans un simple fichier html. </li></ul><ul><li>En un clic on peut connaître sa localisation (lon/lat) en un autre la situer sur une carte. </li></ul>
  7. 7. Le Principe De Base <ul><li>Chat : lire </li></ul><ul><li>Pour lire toutes les contributions, rafraîchissement régulier. </li></ul><ul><li>On ne recharge que la zone nécessaire </li></ul><ul><li>Le contenu des conversations se trouve dans un fichier texte </li></ul><ul><li>Schéma </li></ul>
  8. 8. Conception de base <ul><li>Créer une page html (avec pspad ?) contenant 2 div : les conversations et le journal, un champ texte pour les phrases et 2 liens, un pour envoyer la phrase, l’autre pour placer sur la carte </li></ul><ul><ul><li><div id= ″journal″ style= ″width=200px″ ></div> </li></ul></ul><ul><ul><li><input id= ″ phrase ″ type= ″ text ″ /> </li></ul></ul><ul><ul><li>Rappel : href=″javascript:envoyer()″ </li></ul></ul>
  9. 9. Ahah vs. Ajax <ul><li>Ahah récupère du html au lieu d’xml (lisible sans transformation). Sa syntaxe est un peu plus simple. </li></ul><ul><li>Usage : Ahah(url, div); </li></ul><ul><li>Télécharger la bibliothèque ahah.js puis la charger dans la page : </li></ul><ul><ul><ul><li><script src= ″ahah.js″></script> </li></ul></ul></ul>
  10. 10. <ul><li>Lire, écrire… </li></ul>http://www.flickr.com/photos/emdot/32179191/
  11. 11. Pour Lire… <ul><li>Nommer les div et le input (par ex conversations / journal et phrase, pour faire simple) </li></ul><ul><li>Créer un fichier html vide (texte.html) qui contiendra les conversations </li></ul><ul><li>Le charger régulièrement dans la div en ahah : (soucis de cache ? + date !) </li></ul><ul><ul><li>ahah(‘texte.html’, ‘conversations’); </li></ul></ul><ul><ul><li>setInterval(‘’,2000); // 2sec </li></ul></ul>
  12. 12. Pour Écrire… <ul><li>Appeler la page chat.php qui écrit ce qui lui est passé en paramètre dans texte.html : (montrer contenu texte.html) </li></ul><ul><ul><ul><ul><li>chat.php?phrase=bonjour </li></ul></ul></ul></ul><ul><li>La phrase tapée est accessible via le DOM : </li></ul><ul><ul><ul><ul><li>document.getElementById(‘phrase’).innerHTML </li></ul></ul></ul></ul><ul><li>Faire cela en ahah en concaténant </li></ul>
  13. 13. … l’IP <ul><li>Le script php « chat.php » doit se trouver dans votre répertoire, il crée aussi en html un lien avec l’adresse IP de l’utilisateur : </li></ul><ul><ul><ul><li><a href= ″ javascript:recherche(‘23.44.5.6’) ″> </li></ul></ul></ul>
  14. 14. Fin de l’Etape 1 <ul><li>A ce point on doit pouvoir lire et écrire. </li></ul><ul><li>Les contributions doivent apparaître au fur et à mesure. </li></ul><ul><li>Le lien « placer sur la carte » ne fonctionne pas encore </li></ul>
  15. 15. http://www.flickr.com/photos/andreweason/43011718/ Carto
  16. 16. Géolocalisation <ul><li>Pour géolocatiser l’adresse ip on s’appuie sur hostip.info (le tester) </li></ul><ul><li>Impossible de l’appeler en direct (cross domain), on passe donc par un proxy : proxy.php ( </li></ul><ul><li>″ proxy.php?yws_path=http://api.hostip.info/get_html.php?position=true&ip= ″ + ip, (attention astuce &=%26) </li></ul><ul><li>On affiche le résultat html dans le journal </li></ul>
  17. 17. Créer Une Carte <ul><li>Api google maps : demander une clé pour le domaine </li></ul><ul><li>Créer un nouveau div (ex ″ map ″ ) </li></ul><ul><li>Créer une carte dessus : (cf doc) </li></ul><ul><ul><li>var map=new Gmap(document.getElementById(‘map’)); </li></ul></ul>
  18. 18. Récupérer la géolocalisation <ul><li>Parser… </li></ul><ul><li>var info=document.getElementById(‘journal’).innerHTML; </li></ul><ul><li>var reg= new RegExp( ″ [0-9.]+ ″, ″g″) ); </li></ul><ul><li>var coordonnees = info.match(reg); // tableau lon / latitude </li></ul><ul><li>… Et placer sur la carte : </li></ul><ul><li>map.centerAndZoom(new GPoint(coordonnees[1],coordonnees[0]), 12); </li></ul>
  19. 19. Pistes d’Amélioration <ul><li>Rendre visible la carte uniquement lorsque l’on localise (visibility:hidden) </li></ul><ul><li>Afficher une bulle avec le nom de la ville </li></ul><ul><li>map.openInfoWindow(map.getCenter(), document.createTextNode(info)); </li></ul><ul><li>Mettre une CSS pour enjoliver </li></ul><ul><li>Remplacer ahah par ajax pour ne même pas avoir à parser le html </li></ul><ul><li>Rafraichir à chaque envoi de phrase </li></ul><ul><li>Remplacer l’ip (lisible) par un pseudo </li></ul>

×