Fork the Couch (Messin’ with the Couch – Part 2)

Posted on May 25, 2014 Updated on May 25, 2014

At some point in our lives, things change. One week you’re asked to focus on task A, and the next you’re asked to drop task A in favor of B. One day you’re using CouchDB, and then  you drop the Couch (on your foot, nonetheless) in favor of MongoDB. Same rules apply. Why?

‘Nuff said. Let’s shift the gears to another NoSQL beast: MongoDB. MongoDB, meet node.js, AngularJS, and Express – the tools we want to incorporate the build out the foundations of our site. Oh, you’ve all met before? The MEAN stack you say? Well, that just made our lives a heck of a lot easier. Another awkward introduction avoided.

Now that we’re acquainted with this framework “click”, what are we working with here now?

• AngularJS – our frontend buddy
• node.js – the base install to talk with our party on the backend
• express – a node.js framework ( node module)
• mongoose – another node module that’ll be our liaison to the mongo db
• mongoDB – similar to our dropped couch. Go along with it.

A skip, jump, a hob over to MongoDB’s site and documentation gives you everything you need to get started. Once the install is complete, and your mongo server has initiated, creating a new database to hold our score information is as easy as “use scores”. Literally. A little “show dbs” within mongo gives us something like the following:

Nice. Let’s throw some data into it! With node.js installed an at the ready, time to create a test site to emulate our leaderboard and saving scoring information. A wildly helpful tool to set up the scaffolding for our site: Yeoman.

He’s ready, willing, and supremely fancy. Fancy enough to provide generators (there’s a mongoose one out there for our needs in the future), Bower for our dependencies, and Grunt for builds and testing. Awesome stuff that’s a little beyond the scope of what we’re trying at this very moment (the mongoose yeoman generator would give us a ton of material we don’t need yet), but should be in our back pocket for the future.

For now, we mooch. Mooch off tutorials. Like this one over at Scotch.io (they have tons of great articles and sample code). No shame – we are learning after all. A git of the provided code, and a little name tweaking to fit our needs, give us some simplistic scaffolding to mess with:

• app –> models –> score.js – the mongoose model definition for our score document object (playername: string, scorevalu: number)
• app –> routes.js – express bits for the API calls
• config –> database.js – defines where our mongoDB lives
• node_models – all the node stuff we need (local install with npm)
• package.json – defines our dependencies and app information
• public –> core.js – the Angular bit for our app module and main controller to drive the app
• public –> index.html – the landing page that’ll bring in the Angular bits
• server.js – the setup for express and mongoose

It’s kind of a lot to take in, but the tutorial is one that we can get a long with. Some key things that gotta change:

1. Database definition in database.js – “Have it your way” (make it point to your instance)

2. Update the model in score.js for the score info – we need a playername string and a scorevalue number

3. The index.html landing page receives a complete overhaul. We want tables – always tables.

A little this, and a little that, and the project looks something like this when it’s changed for our needs. With our wavering confidence, we can test out the APIs that were messed with by handing them off to the Postman. APIs signed, sealed, delivered? Good. Let’s see this app at work.

MongoDB running? Check.

Confirm we have a “scores” database living in there? Check.

Start our node app and have it listen in on our specified port (with a simple “node server.js” on the command line? Check.

Localhost it up on that port and what do we get? Aww yissss…

 

My goodness. Look at that. Can we get a playername and score up in here?

Yes, yes we can. If we look over at the terminal we ran our “node server.js” command on, we’ll see some epic API calls going on reflecting the activity on the site

 

And the “scores” database. What about that?

Yep, data’s all there. Sweet! The foundation for the leaderboard functionality of the site is complete. There’s still a lot more to take care of, namely around data validation, sorting scores, and creating a view just for the leaderboard, but this is an awesome start. Next time – get your sort on!