Adobe^® Flex^™ Tutorial

Je ne parle pas souvent de ma vie sur ce blog (c'est la première fois en fait) car je n'ai pas envie de polluer le blog avec des billets inutiles pour avoir un blog 100% Flex. Mais cette fois, cela concerne à la fois moi et les technologies Adobe donc j'en profite.

Comme le titre l'indique, j'ai remporté un concours organisé par Orange exclusivement réservé aux étudiants au niveau national. Le concours était basé sur l'utilisation des API Orange. En effet, Orange a ouvert plusieurs API au grand public, il y a quelques mois. Parmi ces APIs, on a l'envoi de SMS, de mail, la géo-localisation, la gestion du compte utilisateur/répertoire Orange…

Consulter la liste des APIs Orange disponibles

En gros, on peut discerner 3 grands types d'APIs Orange:

• Les API Instant, qui sont de simples appels à des services types REST (envoi de SMS/Mails, mise en place d'un appel…)
• Les API Personal, qui servent à accéder aux informations d'un compte utilisateur Orange. L'utilisation de ces APIs n'est pas directe, il faut que l'utilisateur s'identifie sur le site d'Orange pour récupérer un token d'identification pour ensuite pouvoir les utiliser. Question de sécurité bien sûr.
• Les API Commercial, réservées au professionnel et payantes, offrant de meilleurs services comme par exemple le service d'envoi de SMS en masse…
• Les API Web 2.0, pour récupérer des informations depuis les autres sites d'Orange comme Pikeo

Seules les API Instant et Personal pouvaient être utilisées dans le cadre du concours. Il fallait donc créer quelque chose à partir de ces APIs Orange, un widget, un site web, une appli mobile etc., le support était au choix. Au niveau de la technologie, aucune limite non plus, même si les kits de connexions (pour pouvoir exploiter les API Personal) étaient en PHP.

Il aurait donc été assez simple d'utiliser ces APIs dans le cadre d'une application web classique, avec appel à des pages PHP pour la récupération d'informations et typiquement l'utilisation d'un peu d'Ajax pour rendre cela asynchrone. Mais depuis que j'ai découvert Flex, je me suis un peu dégoûté du développement d'applications web classiques et des éternels problèmes qui reviennent quand on fait du web. En plus, le cadre de développement d'applications connectées se portaient idéalement à une utilisation de Flex.

Mais pour rendre tout cela un peu plus funky, j'ai décidé d'utiliser Adobe Air afin de créer une application bureautique. C'était à cette occasion, ma première application Air, ce qui m'a donné l'opportunité de m'auto-former même si le développement s'est uniquement basé sur Flex. J'ai donc pu découvrir les fonctionnalités apportées par Air (détection de connexion internet, drag and drop natif, installation super simple…) pour m'amuser un peu avec. L'application est nommée "Deskora", comme contraction des mots Desktop et Orange. Voici le logo

Voici donc la liste des APIs que j'ai été amené à utiliser:

• Instant APIs: SMS API, Email API, Click-to-Call API, Location API
• Personal APIs: Personal Profile API, Personal Contact API, Personal Calendar API, Personal Messages API, Personal Photos API

Soit au total, 9 APIs sur les 13 disponibles. Les autres étant plutôt inutiles et impossible à intégrer dans mon application. Au départ, je voulais créer une sorte d'application hybride entre MSN et Skype car on pouvait récupérer une liste de contact et passer des appels en passant par les APIs. Mais j'ai été vite calmé en découvrant petit à petit les fonctionnalités des APIs. En effet, pour gérer une communication de type MSN, il aurait fallu que je sache si un utilisateur est connecté ou pas, et que j'aie une passerelle pour l'envoi de message. Cela peut se mettre en place avec des solutions type BlazeDS mais j'avais déjà assez de choses à expérimenter avec Air, je ne pouvais pas attaquer BlazeDS dans la foulée.

Voici en vrac quelques captures d'écran:

L'application se sépare donc en 4 grandes parties:

1. Mes contacts: Une liste de contacts type MSN, avec la possibilité de rechercher dans le repertoire Orange, d'ajouter des contacts à son répertoire Orange, assigner des mails/n° de tél à un contact . Cette liste de contact est conservée en local dans des shared Objects  afin d'avoir une persistance des datas. Petit point décevant sur les APIs Orange d'ailleurs, il n'est pas possible de récupérer la totalité du répertoire Orange d'un utilisateur, même s'il s'est loggé et à donner des permissions. Il faut le rechercher (minimum 3 lettres), ce qui assez troublant.
2. Mes messages: Ici, la consultation de la messagerie Orange de l'utilisateur. Même combat, on est limité dans l'utilisation, on ne peut que récupérer les messages non lus de l'utilisateur (et encore, seulement des extraits!)
3. Mes photos: Sûrement la partie la plus intéressante, ou en tout cas, la partie qui m'a le plus éclaté. Avec l'API Personal Photos, on peut récupérer les photos stockées dans les albums en ligne de l'utilisateur. On peut aussi en ajouter par simple upload (avec une limitation de taille à 500ko). On arrive donc tout d'abord sur la liste des albums en ligne, avec la possibilité d'en créer un nouveau. Une fois dans un album, j'utilise les capacités de drag and drop natif pour laisser l'utilisateur charger des photos. Ainsi, l'utilisateur peut prendre directement des photos sur son disque et les drag and dropper sur l'application Air. A l'issue de son drop, les fichiers (uniquement les images, j'ai mis en place un filtre sur le type de fichier) sont ajoutés à la list d'uploads. L'utilisateur peut ensuite envoyer ses photos (upload en masse vers un fichier PHP). Le process est décrit dans l'image suivante
4. Mon calendrier: Simplement pour utiliser l'API Personal Calendar qui permet d'ajouter des évènements à son calendrier Orange. On peut donc utiliser un formulaire avec des DateField (ultra pratique pour le coup) pour ajouter des évènements et leur description. Seul bémol, l'API ne permet pas de récupérer les évènements existants, ce qui est complètement illogique.

Avant de pouvoir utiliser l'application, l'utilisateur doit s'authentifier sur le site Orange afin de pouvoir récupérer un token qui sera utilisé lors des appels aux Personal APIs. Cette authentification utilise une redirection HTTP 302, qui renvoie l'utilisateur vers la page de son choix avec dans les données post, un XML encodé en base64 contenant le token. Ce comportement est tout à fait simple à mettre en place quand on utilise ces APIs dans un contexte web classique HTTP. Mais avec mon application Air, cela devenait tout de suite plus difficile. Heureusement, il y a le composant mx:HTML qui permet d'afficher des pages HTML classiques. Il fallait ensuite récupérer les données POST renvoyées dans la page HTML. Pour cela, après son identification, je redirige l'utilisateur vers une page vide contenant seulement un petit code JavaScript qui écrit la variable POST dans une variable JS. Et une fois que je détecte le chargement de cette page dans mon application Web, j'appelle la fonction JavaScript de ma page web depuis Air pour pouvoir récupérer le token (le décodage Base64 se passe en Flex). Comme vous le devinez, c'est vraiment une manipulation tordue pour récupérer un token !

Pour la mise en ligne, j'ai utilisé deux superbes applications, Badger et Application Descriptor Manager, que je couvrirais dans d'autres articles sur ce blog. Je ne peux pas vous faire tester l'application car elle est liée à mon compte développeur où il n'y a bientôt plus de crédit. De plus, elle mériterait encore du test et n'est pas encore totalement stable …

Si vous êtes curieux, voici l'article complet parlant de ce concours:

Remise de prix du concours Orange API sur le site de Telecom Lille 1

• Flex et Air – Fermer une Window en ActionScript
• Adobe Air Challenge 24h: c'est maintenant!
• Air Android – Mise à jour HTC Desire en Android 2.2 (FroYo) avec support de Flash Player et Adobe Air
• Flex BlazeDS – Spécifier la configuration BlazeDS à la compilation (services-config.xml et context-root)
• AgendaBT, une application AIR ma-gni-fique