Ratyrate: Add Rating to Your Rails App

This tutorial explores how to add rating functionality to a Rails application. It will go through some of the more popular Ruby gems that provide such functionality, as well as how to implement rating from scratch. We will use the same application used in the the Online store article By Karim El Hussieny, in which the basic application creation process is explained in detail. Please refer to that post to learn how Karim scaffolded and styled the basic application.

Goals

As you can see in the repository, it is an online store for movies. We need to add rating functionality to each movie. Each user will be able to give a rating to the available movies. Then, each movie will have a score calculated based on all the user rating, much like what IMDB does.

Main Features

Rating movies: Rating the available store movies. (Login required)

Show user rating: Each user can visit his/her dashboard and see the movies (s)he rated. The ratings can be changed at anytime.

Change star numbers Star numbers can be set to whatever suits the application nature.

Show the score in digits Rating score can also be viewed as digits beside the stars.

Movie overall average score: Each movie has a score based on all the user ratings. This score is calculated from all the dimensions of the movie, i.e. visual effects, custome design, etc.

Ability to disable rating Rating can be disabled after the first rate and changed to readonly mode.

Customizable icons Star and cancel icons can be changed.

Canceling rating: User can cancel the rating given to any movie at any time.

Skills Needed

Experience with Ruby on Rails.

Basic knowledge of HTML/CSS3.

Understanding the concept of responsive CSS frameworks.

Tools

Ruby(2.1.0) – Programming language

Rails(4.1.1) – Back-end framework

Foundation 5 – Front-end CSS framework

Ratyrate – Ruby gem

Devise – User authentication

Ratyrate Gem

Ratyrate is a Ruby gem that wraps the functionality of the Raty jQuery plugin. It also adds some helpers along the style of IMDB rating. I forked it from a gem called Letsrate because of Letsrate’s inactivity. Ratyrate has some awesome, new features, so you are welcome to star it :)

Step 1: Installation of Ratyrate gem

To install this Ruby gem simply include it in your Gemfile like so:

gem 'ratyrate'

In the terminal run:

bundle install

You may want to watch the repository and use the development version of Ratyrate because I am adding new features all the time. To use the development gem add the following to your Gemfile:

Step 2: Preparing the Application

I assume you have already cloned the moviestore repository and are inside its directory. If you don’t know how to do that, here is the commands:

$ git clone 'git@github.com:wazery/moviestore.git'
$ cd moviestore

Now you need to run the gem’s generator to copy the required assets and files (jQuery Raty plugin files, star icons, and JavaScript files) to their correct locations in your Rails application. In the terminal run:

$ rails g ratyrate User

As you can see, this command takes a single argument: the name of your existing Devise user model. This is necessary to bind the user and rating data.

The view uses the provided rating_for helper to show the rating for each dimension that was specified.

Step 5:** Explore the rating_for Options

Here is how this view currently looks:

As you can see, the user can cancel the rating. This feature can be disabled, as we will discover later.

Stars

The number of stars can be changed by simply using the option stars:

Visual Effects: <%= rating_for @movie, "visual_effects", stars: 10 %>

Disable/Enable Rating

By default, after the user provides a rating the stars are disabled. However, there is an option to let it remain enabled so the user can change the rating. This option is disableafterrate, which is set to true by default. Set it to false as follows:

Half Stars

Once there are several ratings, it is likely that the average score will have half stars and, thus, be half-highlighted. This is the default behavior, but if you want to disable half stars, use the half_show option:

Rating for User Helper

It would be nice to see the rating score of the current user so it can be changed. There is a helper named ratingforuser for that exact purpose. It takes the rateable object (the movie object in our application case), the current logged in user (provided by Devise), the dimension in which the rating is for, and the options. If the current user hasn’t provided a rating yet, it will display a single star. If the gave a rating of 2, for example, it displays two stars, that can be changed to one, meaning, the user cannot raise the given score.

IMDB Style Rating Helper

Another useful helper is an overall average score of all dimensions, just like the IMDB. This helper is pretty easy to use, just pass in the rateable object (which is the movie in our application) and the current logged in user:

<%= imdb_style_rating_for @movie, current_user %>

Summary

In this tutorial, the Ratyrate gem added rating functionality to the movies in the MovieStore application. We explored how to use the Ratyrate gem in detail, and the available helpers and options in it. I hope this tutorial rates highly with you today!

Islam is a freelance web developer with experience spanning the full stack of application development. He is a co-founder of Whitespace which is a web development agency. Besides for that he spends his time working on open source projects that he find intriguing or writing tutorials. He was an ex-Google Summer of Code student in 2012 and a mentor for 2 projects in 2013 for KDE. You can find him on Twitter @wazery_ or check his Linkedin profile linkedin.com/in/wazery.