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