Note<\/strong>, if you’re here because you simply want to use the Kudos script on your own site, jump to the section about “Code and Usage”. Otherwise read ahead.<\/p><\/blockquote>\n Kudos (from the Ancient Greek: \u03ba\u1fe6\u03b4\u03bf\u03c2) is acclaim or praise for exceptional achievement. Wikipedia<\/a><\/cite><\/p><\/blockquote>\n If I’m right, then Dustin Curtis<\/a> came up with this idea when creating the famous blogging platform Svbtle<\/a>. Go there to see some examples. After some googling I found Amit Upadhyay’s<\/a> post. He already had a similar idea to create a Svbtle independent Kudo implementation by using Parse<\/a> as the backend service.<\/p>\n 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<\/strong>. Don’t get me wrong, I love to code on the server and I regularly do it. But when I want to create some quick tool, some nice app, then the frontend is setup quite quickly. All you need is some JavaScript knowledge, a code\/text editor and a browser. When it comes to the backend you…<\/p>\n Lots of decisions you don’t really want to face for a simple webapp like this kudo script here. Still, I obviously required some kind of backend for storing the kudos and even some minimal security policies to prevent – for instance – multiple kudos from a single person.<\/p>\n Firebase<\/strong> is great here. It presents itself as the “Realtime App Platform”:<\/p>\n Store & Sync Data Instantly: Build realtime mobile and web apps in minutes using client-side code and our powerful API. Save time. Delight your users.<\/p><\/blockquote>\n And that’s totally true. 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.<\/p>\n Besides that, Firebase has lots of little integration libraries for the web (like Angular or Ember plugins), for mobile apps and even for server-side code like Node.js.<\/p>\n So how does this work on the Kudo script? I’ll only show some quick snippets as the official Firebase documentation is very clear and detailed.<\/p>\n First of all you obviously need to integrate with Firebase. This is as easy as to include the JavaScript library:<\/p>\n In your code you then get a reference to the Note<\/strong>, a Firebase storage can be imagined like a big JSON object within which you navigate around and organize your data. More on the docs<\/a>.<\/p><\/blockquote>\n Imagining you have a structure like<\/p>\n ..then you can navigate to the child nodes by either instantiating a new Before continuing I have to explain another core feature of Firebase: user authentication & authorization<\/strong>. JavaScript code cannot be trusted as it runs on the user’s machine. As such, when you directly access a database as a service you have to impose some security rules in order to make sure a user is only able to manipulate its own data. Firebase has build-in user authentication and authorization<\/strong>. There are adapters for the major OAuth providers like Twitter, Facebook, GitHub and Google. Moreover there’s the possibility to do username\/pwd authentication, through email or even by providing a custom login token generator. Just check out the docs<\/a>. Each time you login a user anonymously, a new, unique user ID will be generated, and your Firebase reference will be authenticated using these new credentials. The session will live until its configured expiration time…<\/p><\/blockquote>\n Anonymous login is done like<\/p>\n Within the Kudos script I use the following function for handling the authentication:<\/p>\n The function returns a promise which either resolves with the authData when the user has already been authenticated or executes the anonymous login.<\/p>\n I then use the This allows me to restrict the user in such a way that it can only add new kudos or remove its own entry. This is enforced by the Firebase security rules<\/strong> which can be configured on its website. The rule for the kudo DB looks as follows:<\/p>\n Again, check the docs for the exact syntax. What the above definition does is to allow all users to read all likes, but only modify (write) those created by themselves.<\/p>\n Storing data is as simple as selecting some node and setting the value.<\/p>\n Specifically, in the Kudo script it looks like this:<\/p>\n Removing<\/strong> an existing Kudo simply removes the according node:<\/p>\n Retrieving<\/strong> the data enables at the same time also real-time updates.<\/p>\n Every time a value is updated on the Firebase store, this callback will be invoked.<\/p>\n All of the code is available on GitHub<\/strong>: https:\/\/github.com\/juristr\/kudos<\/a>.<\/p>\n There are even detailed instructions on how to add the script to your own page as well as on how to properly create and configure your Firebase account. As always, I’m more than happy for any comments or PRs with improvements.<\/p>\n Firebase is great as a backend for simple applications. Especially when it comes to real-time synchronization between different clients which you literally get for free. Another area where I could imagine to use it is on mobile devices. The vast amount of available client libraries makes it really easy to connect to Firebase. So you could have it as your integration backend with a larger environment or ecosystem of applications, just to be aligned with the latest movements Microservices ;).<\/p>\n
\nSo, what are Kudos<\/strong>? Wikipedia explains them as follows:<\/p>\n
\nIt’s basically similar to a Facebook “like” or Google+ “+1” button. I first saw them on the famous Svbtle<\/a> blog engine. I liked it, so I decided to roll my own.<\/p>\nFirebase as the backend DB<\/h2>\n
\n
![\"firebase-frameworks\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/01\/firebase-frameworks.png\")
<\/a><\/p>\nHow do I use Firebase<\/h2>\n
<script type='text\/javascript' src='https:\/\/cdn.firebase.com\/js\/client\/1.1.2\/firebase.js'><\/script><\/pre>\n
Firebase<\/code> object, specifying the node you’d like to reference.<\/p>\nvar firebase = new Firebase('https:\/\/firekudos.firebaseio.com\/');<\/pre>\n{\r\n 'kudos': [\r\n ...\r\n ]\r\n}<\/pre>\nFirebase<\/code> object with the new path new Firebase('https:\/\/firekudos.firebaseio.com\/kudos)<\/code> or by using an existing instance:<\/p>\nvar kudosChildNode = firebase.child('kudos');<\/pre>\nAuthentication and authorization<\/h3>\n
\nDoing such authentication just for the purpose of providing a Kudo would be a total overhead. Lucky me, Firebase also provides anonymous authentication<\/strong>.<\/p>\nfirebase.authAnonymously(function(err, authenticationData) {\r\n ...\r\n});<\/pre>\nauthenticationData<\/code> is an object containing a series of properties<\/a>. One of them is the uid<\/code> which uniquely identifies the authenticated user. By invoking firebase.getAuth()<\/code> the current authentication object is returned, or null<\/code> if the user is not yet logged in. firebase<\/code> is the reference to the backend database (see code above).<\/p>\nvar getAuthData = function(){\r\n var deferred = $.Deferred();\r\n\r\n var authData = firebase.getAuth();\r\n if(authData == null){\r\n \/\/ authenticate the user\r\n firebase.authAnonymously(function(err, authenticationData) {\r\n \/\/authData = authenticationData\r\n deferred.resolve(authenticationData);\r\n });\r\n }else{\r\n deferred.resolve(authData);\r\n }\r\n\r\n return deferred.promise();\r\n};<\/pre>\nuid<\/code> from the authData to identify a user’s Kudo entry. This is how the data for a given page looks like:<\/p>\n![\"firebase-data-entry-structure\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/01\/firebase-data-entry-structure-1024x548.png\")
<\/a><\/p>\n![\"firebase-kudo-rules\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/01\/firebase-kudo-rules-1024x529.png\")
<\/a><\/p>\nStoring and retrieving data<\/h2>\n
someChildNode.set({\r\n count: 1\r\n});<\/pre>\ngetAuthData().then(function(authData){\r\n firebaseKudos\r\n .child(key)\r\n .child('likes')\r\n .child(authData.uid)\r\n .set({\r\n count: 1\r\n });\r\n});<\/pre>\nkey<\/code> is the page url (cleaned from special symbols like slashes etc). Then I create\/or update a subnode “likes” before creating an entry for the current user, with its authentication UID.<\/p>\ngetAuthData().then(function(authData){\r\n firebaseKudos\r\n .child(key)\r\n .child('likes')\r\n .child(authData.uid)\r\n .remove();\r\n});<\/pre>\nfirebaseKudos.child(key).on('value', function(snapshot){\r\n if(snapshot){\r\n var article = snapshot.val();\r\n var likeCount = 0;\r\n if(article){\r\n for(var prop in article.likes){\r\n likeCount++;\r\n }\r\n }\r\n ...\r\n }\r\n});<\/pre>\nCode and Usage<\/h2>\n
Conclusion<\/h2>\n