Introduction I. Maquette II. Programmation III. Intégration IV. Difficultés rencontrées

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