I think it was probably about two years ago when I first came across a Svbtle-hosted blog where I noticed a small little circle, bouncing when you hover it and showing a number followed by “Kudos”.

So, what are Kudos?

According to Wikipedia, Kudos are explained as follows:

Kudos (from the Ancient Greek: κῦδος) is acclaim or praise for exceptional achievement. Wikipedia

A Kudos system is basically similar to a Facebook’s “like” or Google+’s “+1” button. Today, we are going to roll our own that can be easily integrated into any website or blog.

Using Flybase as the backend database#

We are going to use Flybase for the backend database, since this is the Flybase blog. 🙂

Modern JavaScript tools and libraries give you plenty of possibilities to create rich user interfaces in a fairly fast and easy way. However, once you need some backend service for persistent storage, things get complex.

When it comes to the backend you…

• have to decide which language/server: Node, PHP, .Net, Java, Ruby…
• how to handle authentication: OAuth? Facebook, Twitter, Google,…
• which database? relational, non-relational? MongoDb, MySQL, PostgreSQL
• hosting? some cloud service, self-hosted? a VPS?
• …

Lots of decisions you don’t really want to face for a webapp like this Kudos script.

Still, you obviously require some kind of backend for storing the kudos.

Flybase is great for this, as it is a real-time app platform.

Not only do you get an easy way to store your data, but you can even implement real-time synchronization among your clients. That has never been so easy.

You don’t need to worry about any backend work, to integrate Flybase into your app, all you need is some JavaScript knowledge, a code / text editor and a browser.

How do I use Flybase#

First, sign up for an account at Flybase.

So how does this work on the Kudos script?

First of all you obviously need to integrate with Flybase. This is as easy as including the JavaScript library:

<script src="https://cdn.flybase.io/flybase.js"></script>

In your code, you then create a reference to the Flybase object, specifying the app you’d like to reference.

To do this, you need your API Key, Flybase App and your collection.

We’ll name this collection kudos, since that is what we are using it for.

var flybaseKudos = new Flybase("MY-API-KEY", "MY-APP", "kudos");

Tracking users#

We are going to assign a user a unique id, this will be stored in LocalStorage so that we can track return visits, etc.

Within the Kudos script we will use the following function for handling this:

function createUUID() {
		var s = [];
		var hexDigits = "0123456789abcdef";
		for (var i = 0; i < 36; i++) {
			s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
		}
		s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
		s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
		s[8] = s[13] = s[18] = s[23] = "-";

		var uuid = s.join("");
		return uuid;
	}

	function getAuthData(){
		if( localStorage.getItem("uuid") === null) {
			var uuid = createUUID();
			localStorage.setItem("uuid",uuid);
			return uuid;
		}else{
			return localStorage.getItem("uuid");
		}
	}
	var uid = getAuthData();

I then use the uid from the getAuthData() to identify a user’s Kudos entry.

This allows me to restrict the user in such a way that it can only add new kudos or remove its own entry.

Storing and retrieving data#

Storing data is as simple as setting the value.

// create a key using the current page url, and remove all symbols.
var key = document.location.pathname.replace(/[\/-]/g,'');

//	create a document in Flybase containing the key for the page, uid for the visitor and set likes to 1.
flybaseKudos.set({
	'key' : key,
	'uid' : uid,
	'likes' : 1
});

key is the page url (cleaned from special symbols like slashes etc). Then the script will create an entry for the current user, with its UID.

Removing an existing Kudos simply removes the document referenced by key and uid:

flybaseKudos.where({ "$and": [ {"key": key }, {"uid": uid } ] }).on('value', function(data){
	if( data.count() ){
		data.forEach( function(snapshot){
			var doc = snapshot.value();
			flybaseKudos.deleteDocument( doc._id );
		});
	}
});

Retrieving the data will display the Kudos count for the current page, and also at the same time enable real-time updates:

var likeCount = 0;
flybaseKudos.where({'key' : key}).on('value', function(data){
	likeCount = data.count();
	cb( likeCount );
});
flybaseKudos.on('added', function(data){
	likeCount = likeCount + 1;
	cb( likeCount );
});
flybaseKudos.on('removed', function(data){
	likeCount = likeCount - 1;
	cb( likeCount );
});

We’ve added three event listeners, first we run a query and retrieve all kudos for the current page, as referenced by key and update the likeCount with the returned .count().

Then we’ve added an added listener and a removed listener, these listen for any changes to the kudos count in real-time, meaning if any changes occur, for example, another visitor to the same page adds a kudos to the page, or removes their kudos, then all other visitors will see the count change automatically.

Every time a value is updated on the Flybase store, this callback will be invoked, and the kudos count for that page will automatically update.

Code and Usage#

All of the code is available on GitHub: https://github.com/flybaseio/kudos.

The Repo also includes detailed instructions on how to add the script to your own page as well as on how to properly create and configure your Flybase account. As always, I’m more than happy for any comments or PRs with improvements.