Le Blog

MacPorts - la puissance de l’open-source sur votre Mac Os X »

Flex , Curl et Twitter - créer une application en Flex interfacé avec Twitter

Publié dans Divers, Flash, Actionscript, Flex, Flex, PHP, MYSQL, Réseaux sociaux, Tutoriaux, XHTML CSS par Bruno Flaven, le Lundi 6 juillet 2009

Il existe deux façons de concevoir votre application Flex à destination de twitter soit vous allez publié vers l’API de twitter (disons en push pour faire un peu genre je connais les mots anglais qui assurent grave) soit vous allez rapatrier des éléments de l’API twitter (en pull). On va donc présenter ces 2 scénarios. Nous allons dans tous les cas faire appel à la sainte trilogie : Flex , Curl et Twitter

Qu’on se le dise, ces applications Flex vont bouleverser et bouleversent déjà totalement la donne sur les programmes disponibles sur les ordinateurs personnels. On voit désormais apparaître sur le marché de l’ordinateur personnel, une multitude d’applications adossées à des API de sites tel que Twitter, Google ou Facebook par exemple. Ces applications sont presque aujourd’hui aussi indispensables que le furent en leur temps MS-Word ou Photoshop.

Ce constat appelle deux remarques à mon sens :

Un concept qui semble émerger et qui semble être porteur : Un site peut être avant tout une “Restful API”, qui favorise une adoption par l’usage, ainsi donc plus d’informations sur le fonctionnement de l’application, moins de services définis à priori et de marketing car finalement l’adoption par les utilisateurs fait office de promotion !
Faites l’expérience en vous interdisant une journée l’utilisation de google, de twitter ou de facebook, vous verrez alors non sans stupeur doute votre niveau de dépendance à ces outils et ce n’est qu’un début.

Pour cette article, on va donc créer deux applications simples, pour montrer la capacité de Flex couplé à une “Restful API” de créer rapidement une application de bonne facture. On aura donc deux scénarios :

Scénario 1 - Application de recherche sur twitter (pull)

Scénario 2 - Application pour poster des “tweets” sur twitter (push)

On commence donc par l’application de recherche sur Twitter.

Scénario 1 - Application de recherche sur twitter (pull)

Les informations sur l’API twitter sont disponibles sur le site de twitter.

Les informations sur l’API Twitter
http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search
http://apiwiki.twitter.com/

Un exemple de flux sortant de Twitter.com

Voici le feed xml retourné par Twitter.com de notre recherchehttp://search.twitter.com/search.atom?lang=fr&q=hemedia

Ce qui s’affiche dans la navigateur

Ce qui se cache sous le navigateur

Le code de ce fil né de la recherche sur twitter

 
	<?xml version="1.0" encoding="UTF-8"?>
	<feed xmlns:google="http://base.google.com/ns/1.0" xml:lang="en-US" xmlns:openSearch="http://a9.com/-/spec/opensearch/1.1/" xmlns="http://www.w3.org/2005/Atom" xmlns:twitter="http://api.twitter.com/">
	  <id>tag:search.twitter.com,2005:search/hemedia</id>
	  <link type="text/html" rel="alternate" href="http://search.twitter.com/search?q=hemedia"/>
	  <link type="application/atom+xml" rel="self" href="http://search.twitter.com/search.atom?lang=fr&amp;q=hemedia"/>
	  <title>hemedia - Twitter Search</title>
	  <link type="application/opensearchdescription+xml" rel="search" href="http://search.twitter.com/opensearch.xml"/>
	  <link type="application/atom+xml" rel="refresh" href="http://search.twitter.com/search.atom?lang=fr&amp;q=hemedia&amp;since_id=2418125014"/>
	  <twitter:warning>adjusted since_id, it was older than allowed</twitter:warning>
	  <updated>2009-06-25T21:56:30Z</updated>
	  <openSearch:itemsPerPage>15</openSearch:itemsPerPage>
	  <openSearch:language>fr</openSearch:language>
 
	  <entry>
	    <id>tag:search.twitter.com,2005:2332989105</id>
	    <published>2009-06-25T21:56:30Z</published>
	    <link type="text/html" rel="alternate" href="http://twitter.com/hemedia/statuses/2332989105"/>
	    <title>Hemedia r&#233;pond &#224; la question en vous disant de ne pas mettre les &#171; Elggs &#187; dans  le m&#234;me panier&#8230; O&#249; quand les &#171; Elggs &#187; attaquent !</title>
	    <content type="html">&lt;b&gt;Hemedia&lt;/b&gt; r&#233;pond &#224; la question en vous disant de ne pas mettre les &#171; Elggs &#187; dans  le m&#234;me panier&#8230; O&#249; quand les &#171; Elggs &#187; attaquent !</content>
	    <updated>2009-06-25T21:56:30Z</updated>
	    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg"/>
	    <twitter:source>&lt;a href="http://alexking.org/projects/wordpress"&gt;Twitter Tools&lt;/a&gt;</twitter:source>
	    <twitter:lang>fr</twitter:lang>
	    <author>
	      <name>hemedia (hecube)</name>
	      <uri>http://twitter.com/hemedia</uri>
	    </author>
	  </entry>
 
	  <entry>
	    <id>tag:search.twitter.com,2005:2332984623</id>
	    <published>2009-06-25T21:56:19Z</published>
	    <link type="text/html" rel="alternate" href="http://twitter.com/hemedia/statuses/2332984623"/>
	    <title>Quel outil pour un r&#233;seau social ?</title>
	    <content type="html">Quel outil pour un r&#233;seau social ?</content>
	    <updated>2009-06-25T21:56:19Z</updated>
	    <link type="image/png" rel="image" href="http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg"/>
	    <twitter:source>&lt;a href="http://alexking.org/projects/wordpress"&gt;Twitter Tools&lt;/a&gt;</twitter:source>
	    <twitter:lang>fr</twitter:lang>
	    <author>
	      <name>hemedia (hecube)</name>
	      <uri>http://twitter.com/hemedia</uri>
	    </author>
	  </entry>
 
	</feed>

Le code du fichier TwitterSearch.mxml
Le nom des variables et des fonctions ont été francisés pour rendre le fonctionnement l’application Flex encore plus explicite.

	<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
		<mx:Style source="lafeuilledestylederecherchetwitter.css"></mx:Style>
		<mx:Script>
			<![CDATA[
				import mx.rpc.events.ResultEvent;
				import mx.collections.ArrayCollection;
 
				[Bindable]
				private var LaCollectionDarrays:ArrayCollection;
 
				private function LancerLaRecherche(e:MouseEvent):void
				{
					leService.url = "http://search.twitter.com/search.atom?q=" + motdelarecherche.text;
					leService.send();
				}
 
				private function voirLeResultat(e:ResultEvent):void
				{
					LaCollectionDarrays = e.result.feed.entry as ArrayCollection;
					trace (ac);
				}
 
			]]>
		</mx:Script>
 
		<mx:HTTPService result="voirLeResultat(event)" id="leService"/>
		<mx:TextInput left="10" right="104" top="10" id="motdelarecherche"/>
		<mx:Button click="LancerLaRecherche(event)" label="Recherche" right="10" top="10"/>
		<mx:List dataProvider="{LaCollectionDarrays}" itemRenderer="Tweet" top="40" left="10" 
			right="10" bottom="10" id="theList"></mx:List>
 
	</mx:Application>

Le code du composant (component) Gazouillis.mxml
{data.link[1].href}, cette variable va fournir l’adresse de l’image de la personne qui aura “twtitté”. dans le cas de notre hemedia, l’url sera http://s3.amazonaws.com/twitter_production/profile_images/263940185/cube_for_twitter_normal.jpg

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Image width="50" height="50" source="{data.link[1].href}"> </mx:Image>
	<mx:Text width="100%" text="{data.title}" />
</mx:HBox>

la peau sur les os de votre application

La chose la plus bluffante et commode dans Flex est sa capacité à importer des skins, autrement ditdes assortiment de boutons de submit, menu déroulant, barre de progression, de bouton radio, de checkbox… Bref, un kit complet pour construire des IHM d’une application sans que cela soit trop moche

Un extrait de la feuille de style lafeuilledestylederecherchetwitter.css, très largement inspiré par le style KingnareStyle

/* CSS file */
/*
//------------------------------
//  Application
//------------------------------
*/
Application
{
	backgroundGradientAlphas: 1.0, 1.0;
	backgroundGradientColors: #333333, #333333;
	/* backgroundGradientColors: #0012FF, #FF00FF; */
 
}
/*
//------------------------------
//  global
//------------------------------
*/
global
{
	backgroundGradientAlphas: 1.0, 1.0;
	backgroundGradientColors: #000000, #000000;
	backgroundDisabledColor: #DDDDDD;
	focusThickness: 1;
	/* focusAlpha: 0.05; */
	focusAlpha: 0.0;
	themeColor: #FFFFFF;
}
/*
//------------------------------
//  Button
//------------------------------
*/
Button
{
	color: #AAAAAA;
	textRollOverColor: #FFFFFF;
	textSelectedColor:#FFFFFF;
	disabledColor:#5A5A5A;
	fontWeight:normal;
 
	upSkin: Embed(source="kingnarestyle.swf", symbol="Button_upSkin");
	overSkin: Embed(source="kingnarestyle.swf", symbol="Button_overSkin");
	downSkin: Embed(source="kingnarestyle.swf", symbol="Button_downSkin");
	disabledSkin: Embed(source="kingnarestyle.swf", symbol="Button_disabledSkin");
 
	selectedUpSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedUpSkin');
	selectedOverSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedOverSkin');
	selectedDownSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDownSkin');
	selectedDisabledSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDisabledSkin');
}
 
/*
//------------------------------
//  TextInput
//------------------------------
*/
TextInput
{
	backgroundAlpha: 1.0;
	borderColor: #B7BABC;
	color: #FFFFFF;
	borderSkin: Embed(source="kingnarestyle.swf", symbol="TextInput_borderSkin");
	borderStyle: none;
	padding-top: 2;
	padding-left:2;
 
}
 
 
/* extrait de la css */

Pour mieux comprendre le “styling” sous Flex, il existe un pdf disponible sur le site de Aobe sur “Styling Flex Applications”.
Le document aborde les sujets suivants : “Using Inline Styles, Using Style Sheets, Embedding Assets, Skinning, Using Themes”
http://www.adobe.com/devnet/flex/articles/learning_flex3/learning_flex3_ch14.pdf

Under my skin…

Pour obtenir des skins, il existe différentes ressources en ligne qui vous fournissent des “skins” gratuites. Vous pourrez à ce moment là déployer votre application dans un “look and feel” plus sexy que celui livré par défaut lorsque vous développez sous Flex. Pour l’exemple du scénario 1, nous avons utiliser les apparences fournies par le de style de kingnarestyle, les deux fichiers essentiels qui vous seront nécessaires pour imposer votre style à une application Flex sont la feuille de style .css et le movie flash qui contient tous les éléments graphiques à proprement parler .swf

Pour insérer le style Discotype, il vous suffit de placer dans le répertoire src de votre application Flex, les deux fichiers suivants flexskinheatherford.swf et flexskinheatherford.css

Vous gérez ensuite le thème de votre application Flex via une CSS comme pur un banal site !

Des changements de peau assez variés…

Discotype

RockOn

KingnareStyle

ScaleNine : Skins and Themes for Flex and AIR
http://scalenine.com/
Adobe Flex Skins and Themes
http://fleksray.org/Flex_skin.html

Scénario 2 - Application pour poster des “tweets” sur twitter (push)

Nous allons concevoir une application Flex qui permettra de publier des”tweets” directement sur un compte ouvert chez twitter. Pour cela, il va falloir se connecter en Curl à l’API twitter. Pour mémoire, il existe de nombreux scripts en php qui permettent de s’interfacer en Curl avec twitter. Voici quelques adresses :

Mettre à jour à distance son statut sur Twitter en utilisant PHP (Update Your Twitter Status Remotely Using PHP)
http://davidwalsh.name/update-twitter-php
Poster sur Twitter en PHP et en Curl (Twitter Posting with PHP and Curl)
http://davidwalsh.name/update-twitter-php
http://kosso.co.uk/twitter/twitterCurl.phps
Poster sur Twitter en utilisant du PHP (Posting to Twitter using PHP)
http://morethanseven.net/2007/01/20/posting-to-twitter-using-php/
Twitter : envoyer un message avec PHP en s’appuyant sur l’API Twitter (Twitter: send message from a PHP page using Twitter API)
http://woork.blogspot.com/2007/10/twitter-send-message-from-php-page.html

Les éléments pour construire votre application en Flex

Avant de se lancer tête baissée dans la création de votre aplication Flex. Il reste que vous devez comprendre deux choses dans les exemples qui vont suivre.

Appréhender AMFPHP car c’est un service d’amfphp qui va nous permettre de nous conneceter à l’API twitter. Pour cela reporter à un article précèdent de ce blog : Flex - AMFPHP - connecter un service amfphp à une application Flex
Comprendre un peu les rudiments du Curl en PHP. C’est par cela que nous allons commencer, car cette librairie peut s’avérer extrêmement utile dans de très nombreux cas.

Un tour rapide de Curl

cURL qui l’acronyme de “Client URL Request Library”, ou encore “see URL”. C’est grosso modo “une interface en ligne de commande destinée à récupérer le contenu d’une ressource accessible par un réseau informatique” (Cf http://fr.wikipedia.org/wiki/CURL )

On va faire une installation rapide Curl sur Mac OSX via MacPort pour mieux appréhender les lignes de commande permettant d’envoyer des messages sur twitter.

Installer Curl sur mac OSX via macport

Voilà les commandes pour installer Curl sur un mac OSX. Pour information, on est dans un environnement assez proche de celui décrit dans un article précédent Modifier son fichier hosts sur Mac ou sur PC ou vous devez passer en root sur votre mac et avoir installer aussi MacPort (http://www.macports.org/)

sudo -s
port install curl

Si la dernière commande échoue et vous voyez des erreurs notamment de Checksum et que vous voyez s’afficher des erreurs de ce type.

Fetching curl
--->  Attempting to fetch curl-7.19.2.tar.bz2 from ftp://gd.tuwien.ac.at/utils/archivers/curl/
--->  Attempting to fetch curl-7.19.2.tar.bz2 from http://gd.tuwien.ac.at/utils/archivers/curl/
--->  Verifying checksum(s) for curl
Error: Checksum (md5) mismatch for curl-7.19.2.tar.bz2
Error: Checksum (sha1) mismatch for curl-7.19.2.tar.bz2
Error: Checksum (rmd160) mismatch for curl-7.19.2.tar.bz2
Error: Target org.macports.checksum returned: Unable to verify file checksums
Error: Status 1 encountered during processing.

Vous êtes toujours en root et vous passez les commandes suivantes.

port sync
port clean --all curl
port install curl
Avec les commandes suivantes, l’installation devrait marcher et vous devez voir s’afficher les choses suivantes :

port install curl
--->  Fetching curl
--->  Attempting to fetch curl-7.19.5.tar.bz2 from http://cool.haxx.se/curl/
--->  Verifying checksum(s) for curl
--->  Extracting curl
--->  Configuring curl
--->  Building curl
--->  Staging curl into destroot
--->  Installing curl @7.19.5_0
--->  Activating curl @7.19.5_0
--->  Cleaning curl

Plus d’infos sur http://curl.darwinports.com/

Attaquer Twitter en Curl

Une fois Curl installé, vous pouvez tester l’API twitter
Vous pouvez passer directement les commandes via la console une fois que l’installation de Curl est faite.

curl -u username:password -d status="twittering from curl" http://twitter.com/statuses/update.xml
curl -u FlexAMFPHPtest:password -d status="twittering from curl in command line thks to polygeek" http://twitter.com/statuses/update.xml (Pour cet exemple, la ligen peut-être passé tel quel car le couple FlexAMFPHPtest:password ets le bon)
curl -u hemedia:xxxxx -d status="l'API twitter est accessible en Curl via une ligne de commande... En voici la preuve" http://twitter.com/statuses/update.xml

Résultats des commandes ci-dessus passées directement dans la console

Les principale commandes Curl pour twitter
http://www.tux-planet.fr/utiliser-twitter-en-ligne-de-commande-sous-linux/

Créer l’application Flex

Il vous faudra créer un service amfphp pour pouvoir communiquer avec Twitter.

Le script PHP faisant appel à CURL pour mettre à jour son statut sur Twitter
Ce fichier SendTweets.php va être enregistré dans l’arborescence de répertoires de /services/Twitter/SendTweets.php où est installé AMFPHP.

 
		class SendTweets {
 
		private $user;
		private $pass;
		private $ch;
		private $twitterHost = "http://twitter.com/";
 
 
		function SendTweets () {
 
			$this->user = 'FlexAMFPHPtest'; // this is a username I created for testing apps without pestering people
			$this->pass = 'password';
 
			/* Create and setup  the curl Session */
			$this->ch = curl_init();
 
			curl_setopt($this->ch, CURLOPT_VERBOSE, 1);
			curl_setopt($this->ch, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($this->ch, CURLOPT_USERPWD, "$this->user:$this->pass");
			curl_setopt($this->ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
			curl_setopt($this->ch, CURLOPT_POST, 1);
 
		}
 
		public function sendTwit($stat) {
 
			if(strlen($stat) twitterHost .= "statuses/update.xml?status=". urlencode(stripslashes(urldecode($stat)));
 
			curl_setopt($this->ch, CURLOPT_URL, $this->twitterHost);
 
			/* Execute and get the http code to see if it was succesfull or not*/
			$result = curl_exec($this->ch);	
			$resultArray = curl_getinfo($this->ch);
 
			if ($resultArray['http_code'] == 200) ;
				return true;
 
			return false;
		}
 
		public function __destruct() {
			/*clean Up */
			curl_close($this->ch);
		}
 
 
 
 
	}

Le fichier MXML de l’application Flex
Le détail important dans le code est source="Twitter.SendTweets" qui fait référence au service /services/Twitter/SendTweets.php, installé dans l’environnement AMFPHP. Le code de ce fichier SendTweets.php où est installé AMFPHP. est donnée plus haut.

	<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style>
	    VBox {
	        padding-left:    10;
	        padding-right:    10;
	        padding-bottom:    10;
	    }
	</mx:Style>    
		<mx:RemoteObject
	        id="amfphp"
	        source="Twitter.SendTweets"
	        destination="amfphp">
 
	        <mx:method name="sendTwit" result="onSendTwit(event);" />
 
	    </mx:RemoteObject>
 
 
		<mx:Script>
	    <![CDATA[
	        import mx.rpc.events.ResultEvent;
 
	        private function onSendTwit(e:ResultEvent):void {
	            //e.result == true // if successful
	        }
 
	    ]]>
	</mx:Script>
 
	 <mx:VBox
	            label="send">
 
	            <mx:Label
	                text="send twit: FlexAMFPHPtest" />
 
	            <mx:TextInput
	                id="twitterMsg"
	                width="100%" height="60"
	                maxChars="140"
	                enter="{ amfphp.sendTwit.send( twitterMsg.text ); }" />
 
	            <mx:Button
	                label="send"
	                click="{ amfphp.sendTwit.send( twitterMsg.text ); }" />
	        </mx:VBox>    
 
 
	</mx:Application>

Le fichier de configuration de votre application Flex services-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- services-config.xml -->
<services-config>
	<services>
		<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
			<destination id="amfphp">
				<channels>
					<channel ref="my-amfphp"/>
				</channels>
				<properties>
					<source>*</source>
				</properties>
			</destination>
		</service>
	</services>
	<channels>
		<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel" >
		<endpoint uri="votre_URL_en_local/amfphp/gateway.php"
				class="flex.messaging.endpoints.AMFEndpoint" />
 
		</channel-definition>
	</channels>
</services-config>

Le fichier services-config.xml s’associe de la sorte à un projet Flex.

Pour aller plus loin

Une EXCELLENTE ressource très pédagogique pour débuter dans le Flex, l’actionscript, le Flash et plein d’autres choses. Un exemple de ce tutorial est largement inspiré. Merci Lee Brimelow
http://www.gotoandlearn.com/
Le blog de Dan Florio - aka polyGeek -, developpeur freelance Actionscript Flex/Flash/AIR qui fait de très bonnes introductions au monde de Flex dont la deuxième partie de ce tutorial est tirée.
http://polygeek.com/