Personne ne dira le contraire, écrire une application Facebook est de plus en plus à la mode. Il suffit de voir le nombre de nouvelles applications à l’intérêt parfois discutable qui viennent compléter le répertoire déjà bien rempli des applications Facebook.
Mais toi, cher voyageur égaré dans les méandres de la toile, tu détiens peut-être l’idée du siècle mais ne sais absolument pas comment faire et par où commencer ! Tu cherches désespérément des explications dans la langue de Coluche afin de sortir au grand jour ton application “Quel slip es-tu ?”. Tes voeux sont enfin exaucés.
Une application Facebook a plusieurs facettes, et sous ces deux mots se cachent beaucoup de possibilités :
- Inviter vos amis à installer l’application
- Publier des feeds sur le profil de l’utilisateur
- Afficher de l’information sur le profil de l’utilisateur (Tab ou Box)
- Envoyer des notifications aux utilisateurs
- Envoyer des requêtes aux utilisateurs
- Envoi d’emails
…
Je renvoie le lecteur averti et maîtrisant la langue de Mr Bean au Wiki des développeurs facebook pour plus d’informations.
Bref tout ça c’est un peu trop pour un seul article. Je vais donc morceler toutes ces informations et tenter de proposer régulièrement soit un simple blog post expliquant un concept et sa mise en oeuvre grâce à facebooker quand c’et applicable, soit un article plus complet comme celui-ci. Pour commencer on va faire simple et poser les bases.
Etape 1 : Créer un nouveau projet rails
1 # rails listfriends 2 # cd listfriends 3 # rm public/index.html
Jusque là, tout va bien… Si vous êtes déjà perdus je ne peux vraiment rien pour vous…
Etape 2 : Installer facebooker
Vous pourrez le trouver sur github.
http://github.com/mmangino/facebooker/tree/master
A vous de choisir si vous préférez l’installer sous forme de plugin ou de gem.
1 # script/plugin install git://github.com/mmangino/facebooker.git
Etape 3 : Ajouter l’application “Développeurs” à votre profil
Logguez vous sur facebook et installez l’application http://apps.facebook.com/developers
Cliquez sur “Set Up New Application”
Choisissez un nom pour votre application (List Friends) et acceptez les termes d’utilisation.
Vient ensuite la configuration à proprement parler.
Si votre ordinateur est directement connecté à internet sans passer par un routeur vous pouvez directement mettre l’adresse de votre serveur local comme url de rappel et passer à l’étape suivante.
Si ce n’est pas le cas il vous faut un accès en ssh sur une machine directement connectée à internet. On peut alors mettre en place un tunnel qui enverra les requêtes vers notre serveur local.
Pour cela, un petit tour dans config/facebooker.yml s’impose
1 development: 2 api_key: [la clé API de votre application] 3 secret_key: [la clé secrète de votre application] 4 canvas_page_name: my_friends_list 5 callback_url: http://votredomaine.com:4007/ 6 pretty_errors: true 7 tunnel: 8 public_host_username: [user distant] 9 public_host: votredomaine.com 10 public_port: 4007 11 local_port: 3000
Remplacez les champs vide par les clés affichées sur la page générale de configuration de la nouvelle application et remplissez également les informations pour le tunnel, à savoir votre username et l’hôte.
Etape 4 : Configuration de l’application
Il reste encore quelques petites choses à régler avant de pouvoir s’amuser. Toujours dans les options de configuration de l’application, dans la partie canevas, il faut compléter l’url comme ci-dessous.
Dans la partie Authentification. Modifiez l’url “Post-Authorize Redirect”. Cette url détermine vers quelle adresse l’utilisateur sera dirigé lorsqu’il aura installé notre application.
Encore un petit détail, veillez à activer le mode “bac à sable” dans les propriétés avancées. Non pas qu’on nous prenne pour des glandus incapables, mais pour éviter que tata suzette n’installe votre application en cours de développement.
La description sérieuse est que si vous cochez cette option, seuls les développeurs de l’application pourront la voir et l’installer. A priori… c’est ce que nous voulons pour le moment. Vous pourrez, une fois l’application terminée, aller changer ce paramètre pour qu’elle soit accessible à tous les utilisateurs de Facebook.
Validez les informations.
Etape 5 : Pause Nescafé ®
slurp
Etape 6 : Let’s have fun… ou pas…
Bon allez, oui, on va quand même s’amuser un peu maintenant.
Démarrez le serveur local
1 # script/server
Si vous utilisez un tunnel, démarrez le également
1 # rake facebooker:tunnel:start
Allez sur l’ “about page” de votre application. Cliquez sur “Accéder à l’application” et…
Arg ! Pas de panique.
Etape 7 : Quand est-ce qu’on développe…
Commencez par créer un controlleur “Friends”
1 class FriendsController < ApplicationController 2 3 def index 4 end 5 6 end
Et ajouter les routes suivantes dans routes.rb
1 map.resources :friends 2 map.root :controller => 'Friends'
Pas grand chose pour le moment…
Etant donné que nous souhaitons récupérer la liste des amis de l’utilisateur, nous allons devoir le forcer a installer l’application pour avoir accès à ses informations. Pour ce faire, il suffit d’ajouter le before_filter :ensure_authenticated_to_facebook au début de notre friends_controller.
1 class FriendsController < ApplicationController 2 3 before_filter :ensure_authenticated_to_facebook
On redémarre le serveur local. Et on réessaye…
C’est mieux, ça a déjà l’air de fonctionner mais il nous manque juste du contenu ce qui est bien mais pas top… A l’attaque !
Toujours dans le controlleur, modifiez le corps de la méthode index.
1 @friends = facebook_session.user.friends
facebook_session contient toutes les informations sur l’utilisateur. Je reviendrai dessus plus tard.
Maintenant on s’occupe de la vue.
Créez un fichier views/friends/index.fbml.erb
Oui vous avez bien lu l’extension est .fbml.erb et non .html.erb Cela vient du fait que Facebook parse chaque page devant être affichée dans un canevas, donc dans ces pages, on peut retrouver des mots clés ou balises spécifiques à facebook, issues d’un langage spécialement créé pour l’occasion, le FBML, d’où le format imposé. Je reviendrai sur le FBML dans un post ultérieur.
1 <% friends.each do |friend| %> 2 <%= fb_profile_pic friend %> 3 <% end %>
Nous affichons donc, pour chaque ami, sa photo grâce au helper fb_profile_pic fourni par ce bon vieux facebooker.
On retourne sur facebook et …
Voilà ;-) Enfin quelque chose qui fonctionne.
Les fondations sont maintenant coulées, du moins je l’espère, pour la suite, nous suivrons pas à pas la création d’une application plus complexe. A bientôt petit scarabée. Que la force soit avec toi.
Quelques liens utiles (tous en anglais):
Tutoriel facebooker
Wiki des développeurs Facebook)
Quickstart guide facebooker (similaire à celui-ci)
Forum pragprog du bouquin de Mangino
Developing Facebook Platform Applications with Rails de Michael J.Mangino chez Pragmatic Programmers.