flex.scoutant.org


Keyword - velib


2009/04/27

Hosting a PHP proxy and enabling Flash app to talk cross-domain

velov-proxy

FlashPlayer and cross-domain policy file

FlashPlayer offre une politique de sécurité rassurante : une application Flash chargée depuis un domaine A ne pourra consommer des services web depuis un autre domaine B.

Il est possible de configurer cette politique de sécurité. Considérons que le domaine cible B juge qu'il est opportun de servir les requêtes issue d'une appli Flash téléchargée depuis le domaine A. Alors il suffit que B expose, à la racine, un fichier crossdomain.xml qui alloue les droits correspondants.

Pour exemple, Delicious expose un fichier qui donne accès à toutes les appli Flash téléchargées depuis n'importe où : http://feeds.delicious.com/crossdomain.xml. Si vous suivez le lien, il faut éventuellement Afficher le code source.

<cross-domain-policy> 
  <allow-access-from domain="*" /> 
</cross-domain-policy>

C'est ce qui a permis de faire l'animation Flash d'un nuage de tags Delicious, DeliSphere, a Flash 3D-animation tagcloud for your Delicious bookmarks .

Google, Youtube, Fickr et d'autres exposent également une politique Flash-friendly : par exemple : http://api.flickr.com/crossdomain.xml .

Un Proxy !

Maintenant, si le provider de service n'est pas aussi accueillant pour les application Flash, on a la possibilité d'implanter un service de proxy qui prendra en charge de relayer les requêtes avec une autre technologie de client. On implante un tel service dans le même domaine qui sert l'application Flash : vis-à-vis de la VM FlashPlayer, on n'est plus dans une situation de cross-domain.

Proxy en Java avec BlazeDS

Adobe propose pour cela une solution toute prête. BlazeDS [1], la solution open-source de remoting AMF3, intègre un service de proxy.

Coté développement Flex, il suffit alors tout simplement de positionner sur les divers objets de communication la propriété useProxy en conséquence.

<mx:HTTPService url="" useProxy="true" />

BlazeDS est la meilleure solution que l'on retiendra dans tous les cas industriels. Techniquement, il s'agit d'une librairie Java, ce qui suppose donc un hébergeur en Java...

Proxy en PHP pour les hébergements restreint au PHP

Ce présent blog est hébergé chez OVH et comme c'est souvent le cas l'hébergeur propose du Php mais pas du Java. Une solution, consiste alors à écrire un service de proxy en PHP.

C'est ce qui est mis en oeuvre par le démonstrateur Velib en Flash

<mx:HTTPService id="phpProxiedService" 
  url="http://flex.scoutant.org/php/proxy.php" method="GET"
  resultFormat="e4x" useProxy="false" 
  result="doLoad(event)" fault="faultHandler(event)"/>
public function start( marker:StationMarker):void {
    phpProxiedService.request.url = this.url + marker.station.num;
    var token:AsyncToken = phpProxiedService.send();
    token.marker = marker;
 }

Ici l'objet de communication, le HTTPService, pointe vers le service de proxy, en l'occurrence : http://flex.scoutant.org/php/proxy.php. Ce service fait maison propose l'API simpliste suivante : la requête doit présenter un paramètre url indiquant l'url cible.

Voici ci-dessous le code du service proxy, avec utilisation d'un client curl, pour lequel on positionne l'url cible via le paramètre de requête $_REQUEST['url'].

<?php
$ch = curl_init();
$timeout = 30;
$userAgent = $_SERVER['HTTP_USER_AGENT'];
 
curl_setopt($ch, CURLOPT_URL, $_REQUEST['url']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
 
$response = curl_exec($ch);     
 
if (curl_errno($ch)) {
    echo curl_error($ch);
} else {
    curl_close($ch);
    echo $response;
}
?>

On pourra se référer au billet Using a PHP Proxy with Flex to talk Cross Domain , pour un peu plus de détails.

Proxy en BlazeDS sur hébergement GoogleAppEngine?

Le service d'hébergement GoogleAppEngine a été étendu à la technologie Java [2].

Du coup, on peut utiliser BlazeDS? Je n'ai pas fait le test, mais le billet suivant fait un constat négatif : GoogleAppEngine and BlazeDS  : la package java.lang.management n'est pas autorisé...

Notes

[1] Adobe open Source : BlazeDS

[2] Google App Engine : The new language on App Engine


2009/02/ 5

Velib en Google Maps API For Flash - un MakerManager pour des performances!

Vous cherchez un vélo en libre service? velib.paris.fr vous présente les stations avec la disponibilité des vélos et la disponibilité des emplacement libre pour le retour. C'est une appli JavaScript qui utilise l'Api historique de Google Maps.

On peut faire l'équivalent en Flex en utilisant Google Maps API For Flash.

You need JavaScript enabled!

On peut aussi en faire une version full screen, voir la démo.

Dans ce cas, il faut faire attention aux performances : on n'ap as envie d'avoir d'à-coups quand on déplace la carte. Mais a Paris il y a plus de 1000 stations Velib ; et une grande Google Maps avec 1000 markers c'est saccadé!

Pour ca, la solution est l'utilisation d'un MarkerManager disponible dans une librairie complémentaire à la Google Map API. Il s'agit de la Google Maps Utility Library également disponible en version AS3 : gmaps-utility-library-flash.

Ce gestionnaire accroit fortement les performances, car seuls les markers qui sont dans la viewport sont réellement gérés.

L'utilisation est très facile, on instancie un Manager attaché à la map et ensuite les markers on les ajoute au gestionnaire plutôt que directement à la Google map.

mgr = new MarkerManager(map, null);

Quand on dé-zoom, on a naturellement plus de marker dans la zone visible. Le MarkerManager permet de se protéger de ceci : quand on ajoute un marker à la map, on précise à partir de quel zoom il devient visible.

L'exemple suivant parle de lui-même : pour une carte météo nationale, une seule icone soleil suffit pour une région et c'est seulement quand on zoom dans une région qu'i lest intéressant d'afficher les marqueurs relatifs à une météo plus locale. L'idée d'un nombre constant d'informations quel que soit le niveau de zoom est intéressante.

Justement quand on ajoute un marker, on est amené à préciser l'intervale de zoom pour lequel le marker est visible, parexemple :

mgr.addMarker(marker, 16, 17);

Vois avez sans doute cliqué sur l'un des markers : ca vous affiche la disponibilité de la station. Dans un prochain billet, un focus portera sur l'invocation du service web qui permet d'optenir les infos de disponibilité.

Ouai, mais on voit déja poindre les intérrogations sur comment est alors traité la politique de cross-domain. Vous pouvez déja lancer un sniffer réseau sur la démo ou aussi attendre le prochain billet.