MongoDB and jQuery in 10 Minutes.

MongoDB is an open source document-orientated database system. It’s part of the NoSQL family of database systems. MongoDB Stores structured data as a JSON-like documents. As a web developer this makes it soo much easier to work with the data with JavaScript.

So first up you will need to find a host that offers MongoDB hosting. There are a few out there. For this tutorial I will be using Mongolab. MongoLab offers a sandbox account with 500mb usage which is perfect for what you will be using it for. Also they have CORS enabled :)

Once you have signed up you will need to create a new database and choose a host. I will name mine Geolocation and host it on AWS, be sure to select the free sandbox account. Don’t add any user info for the moment. You should now see the below screen.

slide1

Click your ‘geolocation’ database to goto that databases dashboard. MongoDB groups it’s documents as collections. It calls these BSON documents. “BSON” is a portmanteau of the words “binary” and “JSON”. Think of BSON as a binary representation of JSON (JavaScript Object Notation) documents. Moving forward… Create a collection in your shiny new database. To do this click Add. Pretty simple. I named mine “boom” because lack of a better name.

slide2

Now click the “boom” collection to view its dashboard. We will need to get the api key from it. Once inside click the “Open Api view”. inside there you should see the Resource url. We need that. It should look like this with your api key:

https://api.mongolab.com/api/1/databases/geolocation/collections/boom?apiKey=zWAZavbCD5GCoXQbjao5HSrr7uwrWj

Open up your favorite code editor and we’ll create a simple layout with twitter bootstrap because it’s awesome for prototyping stuff like this.  I’m using a Bootstrap CDN because it’s just easier.

So below we have a Button that when pressed Get’s the Geoposition object from the W3C Geolocation API.

So now we have some data we want to store, let’s store this in our newly created Mongo Database.

Below we have a standard jQuery Ajax post. The url is set to your newly created database with your own Api key.The data being an object needs to be stringified prior to being posted.

Now when you run this on a server when clicking the button you will see the data being sent to mongolab in Chrome dev tools.

Note: you cannot run this locally

slide4

When you check your MongoLabs DB you will see your database full of awesome data. When you browse to your API url you will have a json object that you can now use.

slide3

Below is a complete code example: