Javascript : Ajax & Mashups Mastère MNT 2006 http://www.flickr.com/photos/backwards_hat/132165777/
Acquis ? <ul><li>Rapport avec java ? </li></ul><ul><li>Langage interprété coté client </li></ul><ul><li>Non typé (utiliser...
Bases Du Langage & plus <ul><li>Bases : </li></ul><ul><ul><li>Reste les tableaux et les fonctions </li></ul></ul><ul><ul><...
Se Préparer À Coder ! <ul><li>Firefox et IE </li></ul><ul><li>Extensions FF : firebug, webdeveloper, ietab au minimum. Sou...
Chatter http://www.flickr.com/photos/xti/26865170/
Sujet : Un Chat Géocodé <ul><li>Construire un chat qui garde la trace de la localisation de l’internaute via son adresse I...
Le Principe De Base <ul><li>Chat : lire  </li></ul><ul><li>Pour lire toutes les contributions, rafraîchissement régulier. ...
Conception de base <ul><li>Créer une page html (avec pspad ?) contenant 2 div : les conversations et le journal, un champ ...
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...
<ul><li>Lire, écrire… </li></ul>http://www.flickr.com/photos/emdot/32179191/
Pour Lire… <ul><li>Nommer les div et le input (par ex conversations / journal et phrase, pour faire simple) </li></ul><ul>...
Pour Écrire… <ul><li>Appeler la page chat.php qui écrit ce qui lui est passé en paramètre dans texte.html  :  (montrer con...
… 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’adre...
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...
http://www.flickr.com/photos/andreweason/43011718/ Carto
Géolocalisation <ul><li>Pour géolocatiser l’adresse ip on s’appuie sur hostip.info (le tester) </li></ul><ul><li>Impossibl...
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  ″ ...
Récupérer la géolocalisation <ul><li>Parser… </li></ul><ul><li>var info=document.getElementById(‘journal’).innerHTML; </li...
Pistes d’Amélioration <ul><li>Rendre visible la carte uniquement lorsque l’on localise (visibility:hidden) </li></ul><ul><...
Prochain SlideShare
Chargement dans…5
×

TD : un chat geolocalise (mashup)

3 120 vues

Publié le

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 .

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 120
Sur SlideShare
0
Issues des intégrations
0
Intégrations
56
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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>

×