Après une inscription rapide à sur www.facebook.com, nous allons créer notre propre module.

Nous allons l’appeller “Friends Locator”.

http://lab.emmanuelbonnet.com/facebook/friendslocator/

1. Inscription de notre application “Friends Locator”

Pour ca, vous devez vous créer une nouvelle application sur http://developers.facebook.com/.
Cliquer sur “Get Started…”, puis “Add FaceBook Developer Application”.
Là vous arrivez sur la home “Developer”. Pour créer une nouvelle application, selectionner “Set Up New Application” (en haut à droite).
Choissez un nom (”Friends Locator” par exemple) et selectionner “Optional Fields”.

Voici les élements importants à modifier pour notre application :

“Support E-mail” est votre adresse e-mail.

“Callback Url” est l’url de votre application, dans notre cas :
http://lab.emmanuelbonnet.com/facebook/friendslocator/

“Canvas Page URL” est l’url d’accès à votre application Face Book, dans notre cas :
http://apps.facebook.com/friendslocator/ en mode FBML.

Ajouter votre adresse IP perso et celle de votre serveur dans “IP Addresses of Servers Making Requests” en les séparant par des virgules ou laisser vide (tout le monde pourra y accéder, déconseiller pour vos test…).

Nous allons ensuite sélectionner “Can your application be added on FaceBook” afin de pouvoir la tester sans problème directement dans notre espace.

Le panneau d’installation nous permet de rentrer le “Post-Add URL” de notre application, dans notre cas :
http://apps.facebook.com/friendslocator/

Puis le “Post-Remove URL” :
http://lab.emmanuelbonnet.com/facebook/friendslocator/

Pour valider, cliquer sur… “Valider”.

Nous arrivons alors sur la liste de nos applications.

Il ne vous reste qu’a récuperer les deux informations primordiales pour notre application : l’“API Key” et le “Secret”.

Notre application est prète.

2. Création de notre application

Pour commencer, nous allons créer une application très basique qui va nous permettre d’afficher notre liste d’amis FaceBook avec leur prénom, leur ville et leur vignette (et pourquoi pas de les trier par ville en FQL bien entendu). Génial !!! Vive FaceBook et vive l’as3 !

Je vous conseille vivement d’utiliser le super package com.adobe.webapis.facebook très bien implémenté contrairement aux sources présents sur “FaceBook Developers” que je ne trouve pas très clair.

Nous allons créer un package friendslocator, par exemple com.emmanuelbonnet.friendslocator.
Créons ensuite la classe principale FriendsLocator qui va piloter notre application.

Ensuite, tout s’enchaine.
Le package core va contenir les classes Config et FaceBookAuth.
Le package events va contenir l’évenement FriendEvent.
Enfin, le package friendslist contiendra FriendItem et FriendsList.

Vous devriez arriver a quelques choses comme ca :

Vous devez commencer par configurer votre application en rajoutant dans la classe Config les deux constantes API_KEY et SECRET que vous n’avez pas oublié.

Pour la suite du tutoriel, veuillez vous référer aux sources que j’ai pris le temps de bien documenté.

Cependant, voici les grandes lignes.

L’application FriendsLocator s’initialise, elle fait appelle au FaceBookAuth qui se charge de verifier la connexion de l’utilisateur à FaceBook. Si celle ci est inconnu, l’utilisateur est redirigé vers le formulaire de connexion FaceBook pour démarrer la session.

Une fois la session commencée, l’utilisateur est redirigé vers votre page (içi PHP) avec une variable GET auth_token qui est récuperé et passer au flash en FlashVars.

L’application est reinitailiser, le token est passé a FaceBookAuth qui lance interroge FaceBook pour retourner un identifiant de session.

La session est activé.

Il ne vous reste plus qu’a effectuer des requetes vers FaceBook à l’aide de méthodes déja implétementées dans l’api ou alors de passer par des requetes FQL pour plus de flexibilité.

Exemple :

Pour faire au plus simple, nous pouvons utiliser la méthode prévue pour récuperer les infos de nos amis.

_facebookS.addEventListener( FacebookResultEvent.USERS_GET_INFO, _onGetInfos );
_facebookS.users.getInfo( a, ["first_name", "affiliations", "pic_small", "hometown_location.city"] )

Cependant, si nous aurions voulu filtrer les résultats lors de la requete, par exemple retourner tout nos amis habitant Annecy et qui ont bien remplit leur first_name, nous aurions pu utiliser la requete FQL suivante (très très proche de ce qu’on peut trouver en SQL)

_facebookS.addEventListener( FacebookResultEvent.FQL_QUERY, _onGetInfos );
var fql : Fql = new Fql( _facebookS );
fql.query( "SELECT first_name, affiliations, pic_small, hometown_location.city FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=" + _uid + ") AND first_name != '' AND hometown_location.city == 'Annecy' " );

Dans le premier cas, nous pouvons récuperer la liste des utilisateurs sous forme d’un tableau, tout simplement…

Il nous reste plus qu’a afficher les vignettes dans une liste.

Voici les sources :

http://lab.emmanuelbonnet.com/facebook/friendslocator/sources.zip

Et voici le résultat :

Je vous laisse rajouter quelques animations, loadings, tweens et tout ce qui va avec pour rendre notre FriendsLocator un peu plus joyeux.

Ajouter à son profile :
http://www.facebook.com/add.php?api_key=b240b0175393723f9174ee5378159932

Accès externe :
http://lab.emmanuelbonnet.com/facebook/friendslocator/

Quelques liens :

- Documentation de l’API
- API Test Console

This entry was posted on Samedi, octobre 13th, 2007 at 15:43 and is filed under Actionscript 3, Expérimentations, Tutos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.