SOUTENANCE FINALE DU PROJET SWITCHOME Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET.

Présentation au sujet: "SOUTENANCE FINALE DU PROJET SWITCHOME Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET."— Transcription de la présentation:

1 SOUTENANCE FINALE DU PROJET SWITCHOME Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET

2 Projet SwitcHome 2 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

3 Projet SwitcHome 3 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

4 Projet SwitcHome 4 Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Le projet SwitcHome Analyse comparatives des scenarii techniques Tic! tac!

5 Projet SwitcHome 5 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

6 Projet SwitcHome 6 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

7 Projet SwitcHome 7 Page de Géolocalisation 2 types de géolocalisation possibles: par géocodage et par GPS Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

8 Projet SwitcHome 8 Localisation avec l’adresse Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

9 Projet SwitcHome 9 Localisation avec l’adresse Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

10 Projet SwitcHome 10 Localisation avec des coordonnées GPS Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

11 Projet SwitcHome 11 Récupération des coordonnées Champs latitude et longitude dans le formulaire d’inscription de l’annonce Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

12 Projet SwitcHome 12 Page pour rechercher des maisons Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

13 Projet SwitcHome 13 Association d’une info bulle à un tag Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

14 Projet SwitcHome 14 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

15 Projet SwitcHome 15 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

16 Projet SwitcHome 16 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

17 Projet SwitcHome 17 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

18 Projet SwitcHome 18 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+" "+" lat="+point.y+" lon="+point.x+" "+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur, si vous êtes satisfait par la position appuyez sur valider ma position"); La géolocalisation: ShowAddress()

19 Projet SwitcHome 19 // 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+" "+" lat="+pointnew.y+" lon="+pointnew.x+" "+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur, 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

20 Projet SwitcHome 20 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 carte map.addOverlay(markerb); latblonb Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion

21 Projet SwitcHome 21 Validation de la position JavaScript: document.forms["validation"].elements["lat"].value=latitude; document.forms["validation"].elements["lon"].value=longitude; HTML: latitude: longitude: Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion

22 Projet SwitcHome 22 Page ajouter une annonce Récupération de la latitude et de la longitude: " style="width:100px;" /> Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion

23 Projet SwitcHome 23 Page ajouter une annonce Bouton “géolocaliser sa maison”: Lien vers une FAQ: A quoi ca sert? Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion

24 Projet SwitcHome 24 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Code en php : Connexion avec la base de données : Mysql_connect(‘’serveur’’, ‘’nom d’utilisateur’’, ‘’mot de passe’’); Mysql_selectdb(‘’nom de la table’’); Recherche Création des marker

25 Projet SwitcHome 25 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Recherche Création des marker Fonction create_marker_JS() : Permet d’afficher les marker avec toutes les variables récupérées sur la BD grâce à la fonction create_map_script()

26 Projet SwitcHome 26 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Recherche Création des marker $lat, $lng $title $ville $couch $anim $car $smok $img

27 Projet SwitcHome 27 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Recherche Création des marker Html, intégré dans affiché par le php grâce à des ‘’echo’’ Positionnement du marker : Var point = new GLatLng (‘’.$lat. ’’, ’’. $lng. ‘’) Puis, ajout des composantes de l’annonce, récupérés dans la base de données : ‘’.addslashes($variable). ‘’ -> permet d’utiliser des caractères spéciaux comme les accents ou la ponctuation

28 Projet SwitcHome 28 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Recherche Création des marker Pour afficher les images en fonction des réponses de la base de données : Succession de tests ‘’if’’ pour vérifier les différentes possibilités pour les trois variables : $anim $car $smok

29 Projet SwitcHome 29 Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Recherche Création des marker Nouvelle fonction de GoogleMap : GMap2, qui permet de faire des onglets (tab)

30 Projet SwitcHome 30 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

31 Projet SwitcHome 31 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

32 Projet SwitcHome 32 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

33 Projet SwitcHome 33 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

34 Projet SwitcHome 34 Conclusion Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Projet passionnant aussi bien sur le plan de la programmation que du sujet.