To begin this tutorial the first thing you’ll want to do is to install the Meteor framework for NodeJs.
Due to the nature of the framework under going constant updates, I won’t write down specifically how to install Meteor because I’ll then be forced to update this tutorial whenever the installation procedure changes.
However I don’t see anything wrong with providing a link to the official Meteor documentation where you’ll find the download and installation instructions readily prepared for you. Meteor Installation Guide Once you have Meteor installed on your system you’re ready to go. If you’re running a Linux variant or Mac OSX then then the installation guide should be sufficient however, Windows users might require extra steps.
Worry not though because if all else fails for getting Meteor running on Windows I suggest you just download and install a free copy of Ubuntu Linux and get it running first and then return to this tutorial.
So now that you have Meteor up and running we’re going to start off by downloading the sample application “Leaderboard”. To do so go to the Meteor official documentation for the leaderboard sample app and follow the instructions Meteor Leaderboard. Once you have read through the instructions go ahead and give the sample application a test drive by changing into the directory of the application and entering “meteor” into you terminal window.
Next the application should begin most likely on localhost:3000 which you can navigate to from your web browser of choice and view the application running live.
Ok so far we have installed the Meteor framework; downloaded the sample app, ran the sample app and verified that we can navigate to the application from our browser and see it in action.
Now we’ll begin modifying the leaderboard so we can better understand the framework and take a gander into its design structure.
From your terminal window open the directory where you placed the sample app; you should see three files leaderboard.css, leaderboard.html and leaderboard.js.
Go ahead and open up leaderboard.html with your editor of choice.
The re-branded sample application i.e fork of the leaderboard app we’re going to create is called Boozenet. Boozenet was the name of this application chosen the team I worked with during a previous Hackathon.
Boozenet was an application developed for the sole purpose of allowing friends who drink together on nights out to keep track of not only the beer they drank but the total amount of calories.
This application was developed during a mobile Health themed hackathon so the caloric intake was supposed to be the main feature of the app but the fact that it was realtime and ran on mobile as well as web based clients was the most impressive feature after all.
Enough background, within leaderboard.html find the
In addition Meteor also has a custom jquery plugin, from the documentation to use the jquery plugin navigate to the directory of this application and run the following command from the terminal “meteor add jquery”.
So far we’ve updated the title of the application and included jquery… not much but its a good start.
Moving onto the
Despite the large number of HTML templating engines available (just Google for it and you’ll see) the one pre-baked into the Meteor framework is a modern templating engine called Handlebars
If you want you can read all about how Handlebarsjs does its magic by browsing the its homepage but for now we’ll focus on applying it to extend the leaderboard sample application.
First we’re going to explain how the gallery template works; once that is established hopefully the double curly brace syntax won’t appear so alien and you’ll start reading it as just another HTML element. What the gallery does for our application is showcase the snapshots (in this contrived example they will be hyperlinks to images on the web) of various beers that users of our app have consumed. All this really means is that the gallery template is a placeholder for images to be dynamically inserted at when the page is rendered from image links stored within out database.
As you can probably already guess the tag will substitute itself where the double braced enclosed word “gallery” appears earlier in the code.
If you thought it was going to be more complicated than that you were wrong, working with the handlebarsjs template engine is quite easy… although there are way more advanced features we won’t need to get into to those at this level of a tutorial.
The next template we’re going to create is the photo template which is to be placed within the gallery template we just established.
For those of you with eagle eyes you might have caught that the the template argument url differs slightly from the all previous template arguments we have passed thus far.
What the url lack is the leading > just after the second left-curly brace.
Next we’ll need to template the leaderboard… its similar to the gallery but instead of photos wrapped within a each sub-template we’ll have players displayed instead.
Since we have just defined where the players template is going to fit onto the leaderboard we now have to create a template for them as well.
Another thing you might have noticed is that in the above code the double curly brace appears within the value of the class tag.
Which means that you can even inject templates within css; pretty cool if I’d say so.
Moving on notice how the template references whether or not the player has been selected.
Lastly all we have to do now is define the game template, which is just where we have our input form for new players.
Now we are done with leaderboard.html.
Below is the CSS for leaderboard.css there isn’t much to the CSS so just read through it if you want.
Besides that you might just want to flat out replace your leaderboard.css instead of making additions to the file like we did for the html page.
The first part is the addition of the Photos MongoDB Collection in addition to the regular Players Collection.
Thats simple enough but the interesting part we see next is how the each of the templates we coded in the HTML connects somehow to a Collection on the MongoDB.
One of the things I appreciate the most about the Meteor framework is how well they managed to make the connections between HTML templates and MongoDB collections crystal clear.
In particular pay attention to the conditional on the first line where we check whether the interaction is from the client.
This will become important later on where we describe what happens when the interation is on the server side.
Which is another cool thing about Meteor that you often don’t see in a lot of other frameworks, clean separation between client and server object modeling.
Often as I’ve seen before what happens is that the server side code is visibly connected to the database while its up to the developer to string together some sort of process for pushing the data to the client facing side.
Next fill in the various html events which are triggered based on client input on the page where the app is displayed.
The first event we’ll code describes what happens when a user clicks the Image Upload button.
The code is pretty self explainatory but in short, we pull the image url, we take the selected player, increment her score and then insert the photo into our DB.
Then we handle what happens when a playername is clicked… it just sets the selected player.
Finnally for the game template itself we need to handle two events, one in which a new player is added and the second when a new game is created.
The last thing you need to do in order to get the full code working together is to visit the github page for this code as this tutorial written here is more of in-depth documentation. So just git clone the project navigate to the main directory and run “meteor” from the terminal and browse to the site on your machine.
Included within the GitHub code are the necessary image files you’ll want as well.