Une application pas à pas - My Tag Cloud - épisode 1

“My Tag Cloud”, comme son nom l’indique, permettra aux utilisateurs de soumettre des tags pour leurs amis. Chaque utilisateur, si il a été taggé par au moins un de ses amis, verra apparaître son “tag cloud” (prononcez tak claude). Nous permettrons également à tout ce beau monde d’inviter d’autres amis via le système d’invitations mis en place par Facebook et utiliserons tous les moyens de communications offerts par Facebook (feeds, profile box, profile tab, notifications).

Etape 1 : On prend les mêmes et on recommence

Pour cette première étape, je vous renvoie à mon article précédent précisant la marche à suivre pour commencer une application. Le principe est exactement le même, seul le nom change…

Etape 2 : Et si on invitait des potes ?

Nous allons commencer par ajouter quelque chose de simple, un système d’invitations.
Commençons par créer une ressource Invitation et son contrôleur associé :

Ajoutez dans le fichier routes.rb

   1  map.resources :invitations

Créez app/controllers/invitations_controller.rb

   1  class InvitationsController < ApplicationController 
   2       
   3        before_filter :ensure_authenticated_to_facebook
   4  
   5        def index
   6        end 
   7        
   8        def show
   9        end
  10       
  11        def new
  12        end 
  13  end

Pour les vues, deux possibilités s’offrent à vous. Vous pouvez :

• utiliser directement des balises FBML
• utiliser les helpers de facebooker

D’abord un petit mot sur le FBML.

Ouvrez la parenthèse et vos yeux par la même occasion.

Le FBML est en fait un sous-ensemble du HTML. Certaines balises y ont été retirées et d’autres ajoutées. Le but du FBML est de rendre votre application complètement intégrée dans le “look and feel” de Facebook et donc, de permettre à vos utilisateurs d’avoir la même expérience utilisateur que si ils naviguaient sur Facebook ou sur une application développée par l’équipe de Facebook.

Chaque page de votre application va être “parsée” par Facebook, qui transformera les balises FBML en balises HTML correspondantes, en prenant soin de supprimer toutes celles qu’il ne supporte pas… Un fameux petit sournois ce Facebook…

Fermez la parenthèse.

Facebooker, dans son infinie bonté, nous a concocté nombre de helpers pour nous simplifier la vie. Le wiki des développeurs Facebook contient la liste et les spécifications de chaque balise FBML, le sujet ici étant en partie facebooker, je ne m’attarderai sur les balises FBML que lorsqu’il n’y a aucun helper permettant de la remplacer.

Etape 3 : Et sploutch les mains dans le cambouis

La première chose à faire, c’est construire notre message d’invitation :

Créez la vue app/views/invitations/new.fbml.erb

   1  <% content_for("invite_message") do%>
   2  	Tag your friends and show what your friends tagged 
   3                about you with My Tag Cloud !
   4  		<%= fb_req_choice("Install My Tag Cloud", friends_path)%>
   5  <% end %>

Le texte contenu dans le content_for est simplement celui qui apparaîtra dans votre invitation.

Par défaut, un bouton “Ignore” est ajouté à votre invitation. Le helper fb_req_choice vous permet d’en ajouter un ayant les caractéristiques de votre choix, le chemin en paramètre spécifie où l’utilisateur sera dirigé après avoir cliqué sur ce bouton.

Il nous manque maintenant le fameux formulaire vous montrant tous vos amis. Pas de panique, là encore, les helpers sont là !

Toujours dans app/views/invitations/new.fbml.erb

   1  <% fb_request_form("My Tag cloud", "invite_message", invitations_path) do %>
   2  	<%= fb_multi_friend_selector("Invite you friends to install My Tag Cloud.", 
   3  	:exclude_ids => 
   4      @facebook_session.user.friends_with_this_app.map(&amp;:id).join(",")) %>
   5  <% end %>

Les invitations sont une forme de ce qu’on appelle sur Facebook une “request”, c’est à dire une notification qui vous demande de faire un choix. Les exemples les plus connus étants les “friends requests”, ou les invitations à installer une application, comme celle-ci.

Le helper fb_request_form crée l’enveloppe en FBML générant le formulaire. fb_multi_friend_selector quand à lui, génère automatiquement une liste de vos amis, vous permettant de choisir à qui vous souhaitez envoyer l’invitation. C’est pas magique tout ça?

Le lecteur averti aura remarqué une petite astuce… Mais pourquoi envoyer des invitations à des amis ayant déjà installé l’application ? “Paaaaaaaaarce queuuuuuuu !!!” me rétorquerait notre pulpeuse amie bûcheronne qui boit de l’orangeade, mais n’en faites rien, ça ne sert évidemment qu’à embêter vos amis. Voilà pourquoi cette option a été ajoutée :

   1  :exclude_ids => 
   2    @facebook_session.user.friends_with_this_app.map(&:id).join(",")

Le but de cette simple ligne est d’extraire les id de vos amis ayant déjà l’application, et de les exclure de la liste. Pas mal hein ?

Veillez bien sûr à ajouter, dans la méthode new du contrôleur une ligne du style

   1  @facebook_session = facebook_session

Pour nous permettre d’y avoir accès dans notre vue.

Et voilà ! Il ne reste plus qu’à fignoler.

Etape 4 : Justement, on fignole

Lorsque notre utilisateur envoie des invitations, le formulaire vas le renvoyer vers l’action create de notre contrôleur, comme nous le lui avons demandé. Il suffit juste de faire un petit redirect et le tour est joué.

Si notre utilisateur clique sur “skip”, il sera envoyé vers l’action index de notre contrôleur, là aussi, un petit redirect_to fera l’affaire. Libre à vous de choisir vers quoi l’utilisateur sera redirigé, mais dans l’état actuel de notre application, ce sera simplement friends_path dans les deux cas.

   1  class InvitationsController < ApplicationController 
   2       
   3        def index
   4            redirect_to friends_path
   5        end
   6  
   7        def new
   8             @facebook_session = facebook_session
   9        end 
  10        
  11        def create
  12             redirect_to friends_path
  13        end
  14  end

Etape 5 : Encore un peu plus “Facebook-like”

Il nous reste encore une petite chose à faire avant d’avoir fini. Ajouter quelque part un lien vers notre nouveau système d’invitations.

Toutes les applications Facebook qui souhaitent respecter la charte graphique de notre cher réseau social, ont ce qu’on appelle en FBML un “dashboard”. Il s’agit en fait d’un en-tête dans lequel se trouvent des liens ou des actions.

Là encore, facebooker nous propose un helper.

Dans votre application.fbml.erb

   1  <% fb_dashboard do %>
   2      <%= "My Tag Cloud" %>
   3  	<%= fb_action 'Invite friends', new_invitation_path %>
   4          <%= fb_help 'Feedback', fb_about_url %>
   5  <% end %>

fb_dashboard génère tout le bloc FBML nécessaire. On ajoute alors une action vers notre système d’invitations et un lien vers la “about page” de notre application !

Et voilà à quoi ressemble le bousin au final !

A bientôt pour la suite !

De nouveau quelques liens :

• Tutoriel facebooker
• Wiki des développeurs Facebook
• Forum pragprog du bouquin de Mangino
• Developing Facebook Platform Applications with Rails de Michael J.Mangino chez Pragmatic Programmers.

I like turtles.