En este tutorial crearemos un cloudtag, o nube de tags con ruby on rails igual la que se ilustra en la foto, para eso ocuparemos el plugin de jqcloud.

Para este ejercicio crearemos un proyecto nuevo:

rails new tagandposts
rails g model post title content:text
rails g model tag tag
rails g model tagpost tag:references post:references

Establecemos las relaciones dentro del modelo de tag

class Tag < ActiveRecord::Base
  has_many :tagposts
  has_many :posts, through: :tagposts
end

Establecemos las relaciones dentro del modelo de post

class Post < ActiveRecord::Base
  has_many :tagposts
  has_many :tags, through: :tags
end

Las relaciones dentro del modelo tagpost se crearon automáticamente, ya que utilizamos el generador de rails con references.

Creando datos para la nube de tags

Luego crearemos algunos datos para nuestro proyecto

Dentro del archivo seeds vamos a agregar algunos datos

p = Post.new(title:"Aprendiendo a programar", content:"Lorem Ipsum ...")
p.tags << Tag.new(tag:"Programación") 
p.save

p = Post.new(title:"Introducción a ruby on rails", content:"Lorem, ruby, rails")
p.tags << Tag.new(tag:"Programación")
p.tags << Tag.new(tag:"Ruby")
p.tags << Tag.new(tag:"Rails")
p.save

p = Post.new(title:"el Patrón MVC", content:"MVC, y lorem ipsum")
p.tags << Tag.new(tag:"Programación")
p.tags << Tag.new(tag:"Ruby")
p.tags << Tag.new(tag:"Rails")
p.tags << Tag.new(tag:"MVC")
p.save

p = Post.new(title:"Aprendiendo rails con desafiolatam", content:"Bootcamps lorem ipsum" )
p.tags << Tag.new(tag:"Bootcamps")
p.tags << Tag.new(tag:"Aprender")
p.save

p = Post.new(title:"Lógica para la programación", content:"Logica, tablas de lorem ipsum" )
p.tags << Tag.new(tag:"Lógica")
p.tags << Tag.new(tag:"Programación")
p.save


p = Post.new(title:"Escalando rails", content:"rails, tablas de lorem ipsum" )
p.tags << Tag.new(tag:"Optimización")
p.tags << Tag.new(tag:"Rails")
p.save

Luego descargamos el plugin de jQCloude
desde https://github.com/mistic100/jQCloud

y copiamos los archivos de jqcloud.css y jqcloud.js en las carpetas respectivas de assets.

Creando el controller y cargando los datos para hacer la nube de tags

Ahora crearemos el controller

rails g controller tags index

dentro del controller de tags agruparemos los tags por término y los contaremos.

class TagsController < ApplicationController
  def index
    tags = Tag.group(:tag).count
    @tags = tags.collect {|x,y| {text: x, weight: y}}
  end
end

Creando la vista con la nube de tags

luego en la vista mostraremos los resultados ocupando un pequeño script.

Vista de tags#index

<div class="keywords">
</div>

<script>
    tags = <%= (@tags.to_json.html_safe) %>
    console.log(tags)
    $('.keywords').jQCloud(tags, {
  width: 500,
  height: 350
});
</script>