Building a Google Calendar Booking App with MongoDB, ExpressJS, AngularJS, and Node.js - Part 1

For a while I've been dabbling with building apps using AngularJS and have quickly become consumed with how amazing it is. Having come from a heavy Adobe Flex background, I felt right at home with the two-way bindings the framework provides. In my quest to learn more about Angular I came across a few articles on the MEAN stack, which is a combination of MongoDB, ExpressJS, AngularJS, and Node.js. Since discovering some of the benefits and quick bootstrapping ability of the stack, I've been meaning to work on a project powered by it.

As fate would have it, a friend of mine needed some help building a booking app linked to his Google Calendar so his clients could book his photography studio from his website. The app needed to display the days already booked on his calendar and allow users to book any of the open days in the future. I took this as the opportunity and motivation I needed to dive into learning these new frameworks.

Before You Begin

I'm going to take you through my code to create a basic calendar booking application. Starting with building the Node.js API in part one and finishing with the Angular interface in part two. Before I start digging into the code I want it to be mentioned that this is by no means meant to be considered a best practices guide or anything of the sort. I've only just started learning Node.js and the following is just the different methodologies I've gathered from multiple resources all over the web. If you have see anything that can be improved upon please don't hesitate to comment below!

Since I've always heard great things about the Heroku platform at Dreamforce every year, I figured that would be a great starting place.

I highly recommend working through the Getting Started with Node.js on Heroku guide. It will walk you through setting up your local environment as well as building a basic app with the Node.js and the Express framework.

The complete source files for part one of this project can be found on my Github account here.

Express provides you the ability to configure your app for both development and production environments, as well as any custom label you want to give it. (e.g. Staging, Foo, etc.) You can then set the NODE_ENV config setting on the server to your desired configuration. This really made the development to production process a breeze.

I hardcoded the Google refresh token into the app for simplicity, but this could obviously be improved by calling it from a database.

Since the API is being hosted on Heroku and my friends site is being hosted elsewhere, I had to setup the API to allow cross-domain calls from the web server using CORS. This is so I could utilize Angular's $http directive without having to worry about XSS errors. (more on this in part two)

Here I create a function to wrap my connection to the mongo database in a Javascript Promise in order to alleviate an issue I had when the API was called while the Heroku server was asleep. Upon awakening, the connection was undefined resulting in an error. I chain call this function before any calls to do the database to ensure the connection is never undefined.

With this promise function I use the oauth library to retrieve a new access token from Google's authorization endpoint. After the access token is received I connect to the mongo database and update the access token.

This function encapsulates the logic in a promise to check if the access token currently in the database is still valid. If not, it will make a call to the authorize() function and then bubble up the access token that is returned.

Here we begin to see the magic of javascript promises, really allowing me to simplify the logic in the GET events method.

A call to the getAccessToken() function is made, returning the current access token in a promise. After the access token is successfully returned, I use the google-calendar node library to retrieve the Google event list, format the JSON for readability, and send it back to the browser.

The POST event method allows me to insert a calendar event into Google Calendar from the object data collected from the browser. Upon success, the new event is returned allowing me to update the user interface.

I'm sure this code could be improved a ton, but I'm definitely happy with the result, as is my friend. I plan on following up in the future with improvements I find and I hope this post was helpful to you!!