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

Rappelez-vous, le but de l’application “My Tag Cloud” est de pouvoir tagger ses amis, mais aussi d’afficher son propre tag cloud. La première chose que nous allons faire c’est ajouter des onglets à notre application. Pour ce faire, deux possibilités, soit utiliser du FBML pur

   1  <fb:tabs>
   2    <fb:tab-item href='someplace' title='Someplace' selected='true'/>
   3    <fb:tab-item href='someotherplace' title='Otherplace' />
   4   </fb:tabs>

soit les helpers fournis par facebooker, la solution que nous retiendrons pour l’occasion.

   1  <% fb_tabs do %>
   2  	<%= fb_tab_item "My Tag Cloud", friend_path(@user), 
   3         :selected => @friends.nil? %>
   4  	<%= fb_tab_item "Tag my friends !", friends_path, 
   5         :selected => !@friends.nil? %>
   6  <% end %>

Nous avons donc deux onglets. Un qui nous permettra d’afficher le tag cloud de l’utilisateur courant, l’autre pour afficher la liste de tous vos amis à tagger.

Afin de déterminer quel onglet est sélectionné, il suffit de tester si la variable @friends qui contient la liste de tous vos amis, existe ou pas.

Avant de pouvoir mettre du contenu dans tout cela, il faut installer quelques plug-ins. Deux plus exactement. Comme son nom l’indique, dans notre application on souhaite tagger des objets, il nous faut donc… acts_as_taggable. J’utilise personnellement acts_as_taggable_on_steroids.

   1  script/plugin install
   2   http://svn.viney.net.nz/things/rails/plugins/acts_as_taggable_on_steroids

On génère les migrations qui lui sont associées et voilà !

   1  script/generate acts_as_taggable_migration
   2  rake db:migrate

On crée maintenant un modèle Friend que nous rendons “taggable”.

   1  class Friend < ActiveRecord::Base
   2    acts_as_taggable
   3  end

Et la migration qui va avec :

   1  class CreateFriends < ActiveRecord::Migration
   2    def self.up
   3      create_table :friends do |t|
   4        t.integer :facebook_id, :limit => 20, :null => false
   5      end
   6    end
   7  
   8    def self.down
   9      drop_table :friends
  10    end
  11  end

Bon, maintenant qu’on entre dans le vif du sujet, il est temps de se faciliter un peu la vie. Rendez-vous dans l’application_controller. Déplaçons notre before_filter ici, et ajoutons en un créé par nos soins : find_user. Cette méthode a simplement pour effet de créer deux variables @user et @facebook_session. Ca pourra nous être très utile dans nos vues.

   1  class ApplicationController < ActionController::Base
   2    helper :all # include all helpers, all the time
   3  
   4    before_filter :ensure_authenticated_to_facebook
   5    before_filter :find_user
   6    
   7    private
   8    
   9    def find_user
  10       @user = Friend.find_or_create_by_facebook_id(facebook_session.user.uid)
  11       @facebook_session = facebook_session
  12    end
  13    
  14  end

Parlons-en des vues justement. Il est temps de s’y attarder un peu.

Pour le moment notre contrôleur ‘Friends’ ne contient qu’une action index. Nous allons devoir lui ajouter une action show ainsi qu’une action update, pour mettre à jour les tags de nos amis.

La vue correspondant à l’action show du contrôleur ‘Friend’ affiche le tag cloud de l’utilisateur courant.

   1  <% if @user.tag_list.empty? %>
   2   <p>None of your friends have tagged you.</p>
   3  <% else %>
   4   <% tag_cloud @user.tag_counts(:order => "name"),
   5      %w(css1 css2 css3 css4) do |tag, css_class| %>
   6     <span class=<%= css_class %>><%= tag.name %></span>
   7   <% end %>
   8  <% end %>

Les classes css sont simplements les différents styles utilisés pour le tag cloud. Il suffit de les rajouter au début du layout de l’application.

   1  <style>
   2  	.css1 { font-size: 0.8em; color: #999999;}
   3  	.css2 { font-size: 1.1em; color: #999999;}
   4  	.css3 { font-size: 1.4em; color: #666666;}
   5  	.css4 { font-size: 1.7em; color: #333333;}
   6  </style>

Revenons maintenant sur notre action index.

   1  def index
   2   @friends = facebook_session.user.friends
   3  end

Pour le moment on ne fait que récupérer les id facebook de nos amis. Nous avons deux types d’amis… Ceux qui ont déjà été taggués et qui se trouvent dans notre base de donnée et les autres, qui sont disponibles via la liste récupérée dans la session Facebook. Il nous faut donc, pour tous les amis ne se trouvants pas dans notre base de donnée, créer un objet Friend. Pour ce faire, on utilise la méthode find_or_initialize_by.

Nous allons avoir besoin de will_paginate, pour nous permettre de présenter notre liste d’amis correctement.

   1  script/plugin install git://github.com/mislav/will_paginate.git

   1  def index
   2   @facebook_friends = []
   3   facebook_session.user.friends.each do |fb_friend|
   4    @facebook_friends << Friend.find_or_initialize_by_facebook_id(fb_friend.id)
   5   end
   6   @friends = @facebook_friends.paginate :page => params[:page],:per_page => 10
   7  end

Il suffit alors d’utiliser des text_field_tag qui permettent d’ajouter les tags et le tour est joué.

   1  <%= will_paginate @friends, :params => { :fb_sig_friends => nil } %><br/>
   2   <% form_tag friend_path(@user), :method => :put do %>
   3    <% @friends.each do |friend| %>
   4      <div class="friend_box">
   5       <span class="left"><%= fb_profile_pic(friend) %></span>
   6       <span><%= fb_name(friend) %></span>
   7       <span class="right">
   8        <%= text_field_tag "friend[#{friend.facebook_id}][tag_list]",
   9        friend.tag_list, :size => 40, :style => 'font-size:1.7em' %></span>
  10       <div class="clear"> </div>
  11      </div>
  12     <% end %>
  13   <%= submit_tag "Save all" %>
  14  <% end %>

Remarquez que l’on utilise de nouveau le helper fb_profile_pic pour afficher l’image du profil d’un de vos amis, mais aussi fb_name qui a pour but d’afficher un lien ayant pour texte le nom de votre ami.

Il ne nous reste plus qu’a mettre à jour les listes de tags qui ont été modifiées. A la particularité près que si votre ami n’est pas encore dans la db, il faut l’y insérer.

L’action update fait donc appel à une méthode que nous appellerons update_or_create.

   1  def update    
   2   params[:friend].each do |friend|
   3    unless friend[1][:tag_list].blank?
   4     Friend.update_or_create(friend[0].to_i, friend[1][:tag_list])
   5    end
   6   end
   7   redirect_to friends_path
   8  end

Méthode que l’on retrouve dans le modèle ‘Friend’.

   1  def self.update_or_create(facebook_id, tag_list)
   2   friend = Friend.find_or_initialize_by_facebook_id(facebook_id)
   3   friend.tag_list = tag_list
   4   friend.save
   5  end

Voilà, nous avons maintenant un système qui nous permet de tagger nos amis et d’afficher notre propre tag cloud. Dans le prochain article, nous replongerons dans facebooker avec l’affichage d’informations dans la profile box, et dans le dernier épisode nous jouerons avec la publication de feeds.