Rating System

2,116 views
Skip to first unread message

JD

unread,
Jan 5, 2015, 9:14:05 PM1/5/15
to fireba...@googlegroups.com
Hello, I am using Firebase in my newest development for a number of purposes. Right now I am seeking a way to send some data to firebase from my rating system. Essentially what I have is a 5-star rating system which allows the user to click on any one of the 5 stars, thus submitting their rating to the firebase. I will also need that rating, averaged together with every other user's rating to display in a few different locations inside of the website. I imagine that is a Callback function, correct? The display of the average should look like: 'Rated 4 out of 5 Stars by 103 users' With the images of 4 out of 5 stars filled in just below that text.
Currently all that I have is the html and css that are used to display the interactive rating system, is there some tutorial that I can follow to help me out with completing this interactive rating system? Thank you for your help,
JD

Jacob Wenger

unread,
Jan 6, 2015, 9:51:49 AM1/6/15
to fireba...@googlegroups.com
Hey JD,

I think you can approach this in either of two ways.

Option 1:

If you need to store every rating for perpetuity, you can just put them in a /ratings/ node within each item, specifying the rating and the user ID of the user who made the rating. It would looks something like this:

{
  items: {
    $itemId: {
      title: <title>,
      ...,
      ratings: {
        user1: 4,
        user35: 3,
        ...
      }
    }
  }
}

Then, when you want to get the total number of ratings and the average rating, you can do something like this:

var rootRef = new Firebase("https://<your-firebase>.firebaseio.com");
var itemRef = rootRef.child("items").child(itemId);

var numRatings = 0;
var cumulativeRating = 0;
itemRef.child("ratings").on("child_added", function(ratingSnapshot) {
  var uid = ratingSnapshot.key();
  var ratingValue = ratingSnapshot.val();
  numRatings++;
  cumulativeRating += ratingValue;
});

The number of ratings will be numRatings and the average rating will be cumulativeRating / numRatings.

Option 2:

If you don't care about a specific user's rating, you can just keep track of the number of ratings and cumulative rating in Firebase itself. Your Firebase would look like this:

{
  items: {
    $itemId: {
      title: <title>,
      ...,
      ratings: {
        numRatings: 58,
        cumulativeRating; 176
      }
    }
  }
}

Then, you can calculate get the number of ratings and the average rating like this:

var rootRef = new Firebase("https://<your-firebase>.firebaseio.com");
var itemRef = rootRef.child("items").child(itemId);

var numRatings;
var cumulativeRating;
var averageRating;
itemRef.child("ratings").on("value", function(ratingsSnapshot) {
  var ratingsData = ratingsSnapshot.val();
  numRatings = ratingsData.numRatings;
  cumulativeRating = ratingsData.cumulativeRating;
  averageRating = cumulativeRating / numRatings;
});

Good luck,
Jacob

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/fcbbe139-7ca5-4fc8-9445-9bca6769f4fa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

JD

unread,
Jan 7, 2015, 8:52:46 PM1/7/15
to fireba...@googlegroups.com
Thank you, Jacob. I am thinking it will work best for now that I use the 2nd option that you've provided. I have a brief question that may just be a silly one, but what is the 'title' section for, in the data structure that you have illustrated to be inside of my firebase? I understand that the items are the things inside of my website that are to be rated, and the itemId is of course the ID which will label said items, but I do not understand what the title is for. Also, as it is not in the budget of time for me right now, to create a user account system, I must ask if there is a way to track these users' submissions by their IP address or some other way of only letting each person rate each item once?
Thank you in advance for your help,
JD

Jacob Wenger

unread,
Jan 7, 2015, 9:22:27 PM1/7/15
to fireba...@googlegroups.com
Hey JD,

Sorry for causing confusion with the title I threw in there. I was just making it clear that you can store the ratings along with other metadata about the item (e.g. the item's title, description, created_at timestamp, etc.). I don't know what your items look like so I just put title in there as something generic. Hopefully that clears things up there.

As for creating a user account, I would say that you most definitely do have time to create one since Firebase provides a dead-simple solution for account management. Here are our user authentication docs. If you don't want people to actually create accounts, anonymous authentication is the way to go. We also offer email/password authentication, authentication via several OAuth providers (Facebook, GitHub, Google, and Twitter), and a very flexible custom authentication.

As for tracking users via IP, that is not something Firebase offers out-of-the-box. However, you can get the IP address yourself via JavaScript (here is a Stack Overflow question about that) and then use that as the Firebase key. Not a foolproof solution and could probably be easily faked (whereas Firebase authentication makes security simple), it could work for you.

Good luck!
Jacob



--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

JD

unread,
Jan 8, 2015, 10:19:12 PM1/8/15
to fireba...@googlegroups.com
Hello again,
I have gone ahead and dove into the account system as you suggested and I am glad I did. But in regards to the ongoing issue with my rating system, I expect what I should be getting are numbers (values) logged in my firebase forge, but I do not even have so much as a branch for 'ratings' in there. I have the necessary code snippet here on codepen and I'd hoped I could have some assistance in pointing out my error. http://codepen.io/JusticeVengeance/pen/azpZQw?editors=101
Thank you for your time,
JD

Jacob Wenger

unread,
Jan 9, 2015, 10:07:32 AM1/9/15
to fireba...@googlegroups.com
Hey JD,

There are several issues I found with your CodePen:
  • Firebase is not defined because you did not include the Firebase client in the <head> tag. You need to click the gear icon in the top left of the "HTML" section and add <script src='https://cdn.firebase.com/js/client/2.0.6/firebase.js'></script> to the "Stuff for <head>" text area.
  • You wrapped your JS code in an anonymous function (which is good), but you never execute that function. On the last line, you want })(); instead of just }); so that the method is actually invoked after the page is ready.
  • You use itemId on line 4 but it is not previously defined.
There may be more issues, but that is as far as I got. I'll let you fix those issues up and see if you can get the example working. Good luck!

Jacob

Reply all
Reply to author
Forward
0 new messages