Adobe^® Flex^™ Tutorial

Pour pouvoir localiser un visiteur, vous pouvez passer par son adresse IP. Il existe ensuite des bases de données répertoriant l'emplacement de votre IP. Elles permettent aussi de récupérer le pays, la région, la ville ainsi que la latitude et la longitude. Et puisqu'on a un couple latitude / longitude, pourquoi pas l'afficher sur une carte ! Pour ce tutorial, je vais utiliser les Yahoo! Maps API couplées avec le service de localisation offert par MaxMind. En plus de cela, on va s'amuser un peu avec le reverse geocoding de Yahoo! Maps pour afficher une adresse aproximative.

Je vais bien décrire pas-à-pas toutes les étapes de cette géo-localisation IP, de l'installation de la base de données à la récupération du résultat en Flex HTTPService et l'affichage de ces données. Ainsi, vous pourrez l'utiliser sur votre site internet par exemple.

L'application Flex Finale

Voici l'application que vous allez créer avec ce tutorial. La carte est centrée sur une région autour de Lyon au départ. Appuyez sur OK pour géolocaliser votre IP.

Flex Source Code Download: Télécharger le code source complet de l'application

Récupération et installation de la base de données GeoLite MaxMind

La société MaxMind propose un service de géolocalisation. Il y a une version payante et une version gratuite (moins précise bien sûr mais vous aurez quand même une bonne précision au niveau de la ville. Ce service gratuit s'appelle GeoLite.

Pour l'utiliser, vous devez télécharger une base de données de 28Mo qui sera appelée par une API. Différentes API sont disponibles selon les langages que vous préférez le plus (C, PHP, Java, Perl, Python ...). Pour ma part, je vais montrer comment on l'utilise en PHP mais vous pouvez toujours consulter les API MaxMind pour d'autres langages.

Tout d'abord, rendez-vous sur la page dédiée à GeoLite et téléchargez la base de données GeoLiteCity.

Télécharger la base de données GeoLiteCity (28Mo)

Le fichier que vous allez télécharger est un fichier .gz, décompressez le sur votre disque avec Winzip, Winrar, 7Zip ou tout autres software de compression.

Notez que vous pouvez aussi télécharger une version CSV de cette BDD, que vous pouvez ensuite importer dans votre base SQL locale

Vous obtiendrez un fichier .dat (GeoLiteCity.dat). Ce fichier est un fichier binaire. Faîtes un upload de ce fichier sur votre serveur.

Attention, dans votre logiciel de transfert FTP,  choisissez le type de transfert "Binaire", sinon vous pourriez avoir un message du type: Fatal error: error traversing database - perhaps it is corrupt?

Voilà, votre base de données est installée sur votre serveur, il ne reste plus qu'à l'utiliser correctement.

Utiliser la BDD GeoLiteCity avec l'API PHP

Maintenant que l'on a installé notre base de donnée, il faut exploiter ses informations. On va le faire en PHP puisque c'est le plus commun.

Tout d'abord, téléchargez les fichiers geoip.inc, geoipcity.inc et geoipregionvars.php à cette adresse:

Télécharger les fichiers PHP nécessaires à l'API

Ce ne sont que les fichiers à include nécessaires pour le parcours de la BDD, on va maintenant créer notre petit script qui va nous retourner du XML. Vous avez peut-être remarqué, dans le dossier de l'API PHP, il y a un fichier sample_city.php qui fait le travail mais il retourne le résultat sous format texte, on va donc faire le notre pour qu'il sorte du XML.

Créez un fichier nommé sample_city.php avec votre éditeur de texte préféré, et entrez ce code:

#!/usr/bin/php -q
<?php

include("geoipcity.inc");
include("geoipregionvars.php");

$gi = geoip_open("/homepages/40/d176909544/htdocs/BlogFlex/wp-content/uploads/GeolocationByIp/GeoLiteCity.dat",GEOIP_STANDARD);

$ipToLocate = $_POST["ip"];

$record = geoip_record_by_addr($gi,$ipToLocate);
print '<?xml version="1.0" encoding="UTF-8"?>';
print "<root>";
print "<country_code>" . $record->country_code . "</country_code>";
print "<country_code3>" . $record->country_code3 . "</country_code3>";
print "<country_name>" . $record->country_name . "</country_name>";
print "<region>" . $GEOIP_REGION_NAME[$record->country_code][$record->region] . "</region>";
print "<city>" . $record->city . "</city>";
print "<postal_code>" . $record->postal_code . "</postal_code>";
print "<latitude>" . $record->latitude . "</latitude>";
print "<longitude>" . $record->longitude . "</longitude>";
print "<dma_code>" . $record->dma_code . "</dma_code>";
print "<area_code>" . $record->area_code . "</area_code>";
print "</root>";
geoip_close($gi);

?>

Comme vous pouvez le voir, on ouvre d'abord l'API avec geoip_open.  Il prend en premier paramètre le chemin vers le fichier .dat. Il faut que remplaciez cette valeur par le chemin vers votre fichier .dat que vous avez uploadé plus haut. Si vous avez votre propre serveur, vous pouvez indiquer un chemin du style "/usr/local/share/GeoIP/GeoIPCity.dat".

Si vous êtes sur un FTP que vous ne gérez pas, il faut récupérer le bon chemin. Comme vous ne connaissez pas forcement la structure de votre serveur distant, le manière la plus simple que j'ai trouvé est d'envoyer un fichier erroné dans le même dossier que votre fichier .dat.

Créez donc un nouveau fichier ayant le nom que vous voulez et entrez ce code:

#!/usr/bin/php -q
<?php
print ip.split(");
?>

Attention, ce code est volontairement faux, il sert juste à récupérer l'adresse de votre fichier.

Essayer ensuite d'accéder à ce fichier PHP avec votre navigateur, simplement en tapant l'URL. Vous obtiendrez une erreur du type:

Parse error: syntax error, unexpected $end in /homepages/40/d176909544/htdocs/BlogFlex/wp-content/uploads/GeolocationByIp/sample__city.php on line 5

Et voila, vous avez récupéré l'emplacement du fichier PHP ( /homepages/40/d176909544/htdocs/BlogFlex/wp-content/uploads/GeolocationByIp/), vous pouvez donc indiquer ce répertoire dans votre vrai fichier sample_city.php.

Envoyez ensuite votre fichier sample_city.php ainsi que les fichiers de l'API dans le même dossier que votre fichier .dat sur le FTP.

Pour tester si votre accès à la base de données est correct, appelez le fichier PHP directement dans votre navigateur. N'oubliez pas de préciser une IP à la place de $_POST["ip"]. Vous obtiendrez un XML en retour.

Récupérer l'adresse IP de l'utilisateur en PHP dans une application Flex

Pour récupérer l'adresse IP d'un utilisateur, on va passer par un mini script PHP qui va simplement retourner la valeur  de la variable SERVER: $_SERVER["REMOTE_ADDR"];. Créez un fichier returnIPScript.php et entrez simplement ces 4 lignes:

<?php
$ip_en_cours = $_SERVER["REMOTE_ADDR"];
echo $ip_en_cours;
?>

On va ensuite utiliser un HTTPService dans Flex pour récupérer cette valeur au format text.

Voici le code qui va nous permettre de récupérer cette adresse IP. Notez qu'il faut changer l'adresse du HTTPService pour correspondre à l'URL de votre fichier returnIPScript.php que vous venez de créer.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	creationComplete="creationCompleteHandler(event);" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.CursorManager;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;

			private function creationCompleteHandler(event:Event):void{
				// demander l'IP utilisateur
				getIPHTTPService.send();
			}
			//afficher l'adresse IP retournée par le script PHP
			private function resultHandler(event:ResultEvent):void{
				var resultString:String = String (event.result);
				ipAddress.text = resultString;
			}
			// afficher l'erreur
			private function faultHandler(event:FaultEvent):void{
		        var faultstring:String = event.fault.faultString;
		        Alert.show(faultstring);
		        CursorManager.removeBusyCursor();
			}
		]]>
	</mx:Script>

	<mx:HTTPService id="getIPHTTPService" resultFormat="text" method="POST"
		result="resultHandler(event)" fault="faultHandler(event)" showBusyCursor="true"
		url="http://www.flex-tutorial.fr/wp-content/uploads/GeolocationByIp/returnIPScript.php"/>

	<mx:TextInput id="ipAddress" dropShadowColor="0x000000"/>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Une fois que cela fonctionne, vous pouvez passer à l'étape suivante qui est de requêter le service PHP que vous venez de créer pour récupérer latitude et longitude.

Récupérer les informations de l'utilisateur suivant son IP en passant par l'API PHP MaxMind

Cette fois, on va requêter notre script PHP que l'on a crée pour en sortir les informations du XML et ensuite les afficher sur la carte. De la même manière, on va créer un HTTPService en n'oubliant pas de pointer sur le bon fichier sample_city.php.

On a donc un HTTPService du genre:

<mx:HTTPService id="getIPLocation" resultFormat="e4x" method="POST"
	result="geoLocIPResult(event)" fault="faultHandler(event)" showBusyCursor="true"
	url="http://www.flex-tutorial.fr/wp-content/uploads/GeolocationByIp/sample_city.php" >
</mx:HTTPService>

Notez que cette fois, le résultat est "e4x", c'est à dire du XML que l'on pourra utiliser avec une syntaxe pointée. Par exemple, pour accéder au pays, on va simplement récupérer la valeur de country_name.

Voici la fonction geoLocIPResult qui va lire les informations de ce XML et les afficher dans une Alert Flex:

private function geoLocIPResult(event:ResultEvent):void{
	var result:XML = XML(event.result);
	var alertStr:String = "";
	alertStr += "Pays: " + result.country_name + "\n";
	alertStr += "Region: " + result.region + "\n";
	alertStr += "Ville: " + result.city + "\n";
	alertStr += "Latitude / Longitude: " + result.latitude + " / " + result.longitude;
	Alert.show(alertStr, "Résultat de la géolocalisation");
}

Ajouter une carte Yahoo! Maps en passant par les Yahoo! Maps API ActionScript 3

Pour ajouter la carte Yahoo! Maps, suivez simplement ce tutorial, qui explique les bases du fonctionnement des Yahoo! Maps API:

Flex / Yahoo Maps API - Votre première application avec la Yahoo! Maps Flex/AS3 API

Pour centrer la carte sur le point de destination donné par le couple latitude/longitude, on fait simplement:

var latlon:LatLon = new LatLon(Number(result.latitude), Number(result.longitude));
_yahooMap.centerLatLon = _latLon;

Ajouter un Marker Yahoo! Maps à l'emplacement indiqué par la latitude/longitude

Pour cela, c'est très simple, on va ajouter un SimpleMarker sur notre carte et fixer sa propriété "latlon" suivant les données récupérées dans la fonction geoLocIPResult:

private function geoLocIPResult(event:ResultEvent):void{
	// ...
	// Parse XML
	var latlon:LatLon = new LatLon(Number(result.latitude), Number(result.longitude));
	// ...
	// marker
	 var marker:SimpleMarker = new SimpleMarker();
	marker.latlon = latlon;
	_yahooMap.markerManager.addMarker(marker);
}

Reverse GeoCoding, et tout le reste...

Pour ce  qui est du reverse geocoding (récupération de l'adresse en fonction de coordonnées géographiques), vous pouvez consulter cet exemple chez Yahoo!:

Exemple de Geocoding/Reverse GeoCoding sur Yahoo 

Ensuite, vous pouvez consulter le code source de l'application exemple pour plus de clarté.

Flex Source Code Download: Télécharger le code source complet de l'application

• Flex / Yahoo Maps API – Votre première application avec la Yahoo! Maps Flex/AS3 API
• Air Android – Récupérer la géolocalisation de l'utilisateur dans une application Air
• Flex HTTPService – Envoyer des requêtes et traiter le résultat (exemple)
• Air Android – Simuler une récupération de données GPS sur l'émulateur Android
• Flex HTTPService – HTTPService en ActionScript, Remote Proxy