introduction i. maquette ii. programmation iii. intégration iv. difficultés rencontrées
DESCRIPTION
Le projet SwitcHome. Introduction I. Maquette II. Programmation III. Intégration IV. Difficultés rencontrées Conclusion. Site Internet d’ échange gratuit de maisons Cherche à améliorer le site et à attirer de nouveaux internautes. Le projet SwitcHome. Introduction I. Maquette - PowerPoint PPT PresentationTRANSCRIPT
Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET
SOUTENANCE FINALE
DU PROJET SWITCHOME
2Projet SwitcHome
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
Le projet SwitcHome
• Site Internet d’échange gratuit de maisons
• Cherche à améliorer le site et à attirer
de nouveaux internautes
3Projet SwitcHome
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
Le projet SwitcHome
Notre travail: Créer un API de Géolocalisation
Analyse comparatives des scenarii techniques
Choix de GoogleMap
4Projet SwitcHome
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
Le projet SwitcHome
Analyse comparatives des scenarii techniques
Tic! tac!
5Projet SwitcHome
Maquette
Ajout d’un système de GeoTagging
2 axes de travail:
• Ajout d’une annonce de maison à échanger
• Recherche de maisons
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
6Projet SwitcHome
Page pour ajouter une annonce
Ajout d’un bouton de géolocalisation:Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
7Projet SwitcHome
Page de Géolocalisation
2 types de géolocalisation possibles: par géocodage et par GPSIntroduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
8Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
9Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
10Projet SwitcHome
Localisation avec des coordonnées GPS
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
11Projet SwitcHome
Récupération des coordonnées
Champs latitude et longitude dans le formulaire d’inscription de l’annonceIntroduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
12Projet SwitcHome
Page pour rechercher des maisons
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
13Projet SwitcHome
Association d’une info bulle à un tag
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
14Projet SwitcHome
La géolocalisation
Intégration des fonctionnalités de géolocalisation de Google Map:
Respect de la structure du site:
• un fichier javascript : geolocalisation.js
• un fichier javascript pour l’aide (génération d’une popup) : popup.js
• un fichier HTML : appel aux fonctions javascript et programmation des boutons
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
15Projet SwitcHome
Les fonctions Google Map
Les fonctions Google Map utilisées :
• Dans la fonction load() chargement de la carte initiale
map.addControl(new GLargeMapControl()); // cette fonction permet d’ajouter les fonctions de zoom et de déplacement de Google Map
map.addControl( new GMapTypeControl()); // cette fonction permet d’ajouter les différentes vues plan, mixte, aérien
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
16Projet SwitcHome
Les fonctions Google Map
map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde
geocoder = new GClientGeocoder(); // autorise une nouvelle géolocalisation
Dans la page html la fonction load() est appelée 3 fois :
-au chargement de la page
-lors d’une géolocalisation par l’adresse
-lors d’une localisation par GPS
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
17Projet SwitcHome
La géolocalisation: ShowAddress()
• ShowAddress(address) : pour le geocodage
function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " veuillez rentrer une adresse valide :"+" "+"rue,ville,pays" ); } else {
ADDRESS
lat
lon
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
18Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
// création du marqueur repositionnable associé
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
// association de la bulle info au marqueur
marker.openInfoWindowHtml(address+"<br />"+" lat="+point.y+" lon="+point.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position");
La géolocalisation: ShowAddress()
19Projet SwitcHome
// gestion de l'événement " marqueur déplacé"
GEvent.addListener(marker, "dragend", function() {
// récupération du point associé au marqueur
var pointnew=marker.getPoint();
// association de l'info-bulle correspondante
marker.openInfoWindowHtml(address+"<br />"+" lat="+pointnew.y+" lon="+pointnew.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position") ;
La géolocalisation: ShowAddress()
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
20Projet SwitcHome
La géolocalisation : GPS( lat, lon)
// création d'un point associé aux coordonnées GPS
var pointb = new GLatLng(latb,lonb);
// on centre la carte sur ce point map.setCenter(pointb, 13);
// création du marqueur associé
var markerb = new GMarker(pointb,{draggable: true});
// on ajoute le marqueur à la cartemap.addOverlay(markerb);
latb lonb
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
21Projet SwitcHome
Validation de la position
JavaScript:document.forms["validation"].elements["lat"].value=latitude;document.forms["validation"].elements["lon"].value=longitude;
HTML:<form name="validation" action="http://heleneliz.free.fr/GoogleMap/ajout_annonce.php">latitude: <input type="text" name="lat" value="">longitude: <input type="text" name="lon" value=""><input type="submit" value="valider ma position" /></form>
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
22Projet SwitcHome
Page ajouter une annonce
Récupération de la latitude et de la longitude:
<input type="text" name="latitude" value="<?php echo $_GET['lat'];?>" style="width:100px;" /><input type="text" name="longitude" value="<?php echo $_GET['lon'];?>" style="width:100px;" />
Bouton “géolocaliser sa maison”:
<input type="button" onclick="location.href='http://heleneliz.free.fr/GoogleMap/googleinscription.html'" value="Géolocaliser sa maison" />
Lien vers une FAQ:
<a href="javascript:popup('FAQgeolocaliser.html','Aide','resizable=yes,location=no, width=600, height=300, menubar=no, status=no, scrollbars=yes, menubar=no')">A quoi ca sert? </a>
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
23Projet SwitcHome
Recherche
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV.Difficultés
rencontrées
Conclusion
24Projet SwitcHome
Intégration des travaux à l’existant
Introduction
I. Maquette
II.
Programmation
a) inscription
b) recherche
III. Intégration
IV. Difficultés
rencontrées
Conclusion
Plusieurs méthodes
Copier-coller et remettre à jour les liens
Regarder la structure du site et l’exploiter
Proposer une architecture convenable à défaut de structure appropriée
25Projet SwitcHome
Difficultés rencontrées
Intégration dans un site déjà existant :
Respect de l’architecture
Compréhension de l’organisation
Travail sur une base de données personnelles:
Tests réguliers
Pas de conflits entre les différents programmeurs ( équipe projet et designer )
Problème : base de données en SQL4 vs SQL5
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
26Projet SwitcHome
Difficultés rencontrées
Difficultés liées à Google Map
Difficultés à retrouver l’origine d’une erreur dans un code
API Google Map toujours en développement: les nouvelles fonctionnalités sont peu documentées
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
27Projet SwitcHome
Difficultés rencontrées
Exemple :
Problème: chaque marqueur est associé à une carte
Solution adoptée : utiliser la fonction load()
Autre solution possible : utiliser le MarkerManager qui gère la visibilité des marqueurs.
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion
28Projet SwitcHome
Conclusion
Introduction
I. Maquette
II.
Programmation
III. Intégration
IV.Difficultés
rencontrées
Conclusion