Ionic Restify MongoDB – An End to End Hybrid App

Tweet about this on TwitterShare on LinkedIn8Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Ionic Restify MongoDB – An End to End Hybrid App

Build the same Bucket List app without worrying about server side code, check out Creating a Firebase Powered End to End Ionic Application

In this post, we are going to build an End to End Hybrid App, that has a server component and a client component. Our server will be built on top of Node js, with Restify as the server side framework and MongoDB as the data persistence layer. Our Client is a Hybrid App, built with Ionic framework. We then are going to deploy the Ionic app using PhoneGap Build service to generate a Native installer.

The App we are going to build is a Bucket List app. Here a user can register and login. Then s/he can create a few bucket list items. Which would eventually result in

2014-04-27-12-42-23 2014-04-27-12-42-32

2014-04-27-12-44-31 2014-04-27-12-46-08

  2014-04-27-12-46-37 2014-04-27-12-43-37

These images are taken from my Android Samsung Galaxy Note I device. And the performance was okay. But there is a lot of scope for improvement. If you want to dig into the app yourself, click here.

I have deployed the REST server on Heroku, DB on MongoLab and the client is the Ionic PhoneGap Native app!

List of all the REST service endpoints can be found here (needs some cleanup).

If you want to issue a PhoneGap build before diving in, you can fork this repo and submit it here. Download the installer and test it out. Or you can download the installer directly from here.

You can find the complete code here.

Contents

Application Architecture

The first and foremost thing we are going to look at is the End to End Architecture. BucketListApp

The above Image should give you an idea as where we are headed. At a very high level, we have 3 layers (Three Tier Architecture Duh!). The Database Layer served by MongoDB, The REST Server, fulfilled by Node js & Restify and finally the client layer, well practically this can be any device that can consume a REST endpoint. In our case it is a Ionic PhoneGap application.

Database Layer

I have chosen MongoDB as the backed database because its stores JSON documents and is very simple to interact with among other things. Our Database will have 2 collections.

appUsers – For registering and authenticating the users

bucketLists – To maintain BucketsList items created by each registered user.

We will be doing the development on a local instance of MongoDB and the migrating the same to MongoLab or any other MongoDB as a Service.

REST Service Layer

This is the brain of our entire concept. i.e. the BucketList app. This layer takes in a request, depending on the request it will hit the database and dispatch the requested data, if the user is authenticated.

We will be using Node js server for hosting the service. The REST endpoints will be configured using Restify, a Node js Package to handle REST services. We will also use Mongojs, a Node js Package to manage the DB interactions. If you are new to this environment, I strongly recommend you to take at look at this.

The next key component in our REST service is authentication. As you already know REST is stateless. i.e. It does not remember the client from which the request has originated. In our application, we have a concept very similar to an OAuth, where the client is expected to send a token, that it was issued when the client made the first interaction with the server.

In our application, there is no Authentication or Authorization to access the Register and Login REST endpoints. But when the client needs any data, it needs to send the logged in user’ email as a token, so that we know if the client is trustable (Just a simple workaround for the server. I didn’t want to implement the complete she bang! of OAuth for this post).

Client Layer

With the ever rising demand of utilizing popular skills like web development to do practically any form of development made me pick a Hybrid App as my client. We are going to use Ionic Framework as the face of our Hybrid App. Primarily because of its tight integration with Angularjs, making consuming web services like our BucketList API a walk in the park which is full of REST services.

Quite a mouthful that last paragraph.

The client will have 5 primary Angular controllers.

1. Sign Up : Register a new User

2. Sign In : Login an existing user

3. Show Bucket List : To show all the incomplete bucket list items

4. Show Completed List : To show all the completed bucket list items

5. Create new Item : To create a new bucket list item

Apart from the above, we have a couple of methods to mark an item completed and delete an item.

We will be using localStorage to manage the session on the device. And a few other Ionic-Angular directives to make the app more interesting.

Prerequisites

Now that we have an idea of what we are going to do, lets get started. There are a few prerequisites that we need to be aware of before we begin development.

Server Layer

You need to have an understanding of Node js, Restify and Mongojs to write good server code. You can find a post here, that will teach you to write a REST API using the above mentioned components. You can also find a quick tutorial of MongoDB here.

Client Layer

You need to be familiar with PhoneGap, PhoneGap build, GitHub & Ionic Framework. You can find a post on Git here, PhoneGap here, how to set it up here and a quick tutorial on Ionic Framework and PhoneGap build here. You need to be familiar with Angularjs too to get a hang of Ionic, you can find a hands on tutorial here.

If you are comfortable with these, you can get rolling with the development.

Begin Development

First, lets create a new folder named bucketList. Generally, when I develop, I like to keep the dev code separate from the prod. This is more from a manageability perspective. Create 2 folders dev and prod inside the bucketList folder.

We will create 2 more folders inside the dev folder named server and client. Our final structure will be

Screen Shot 2014-04-27 at 7.06.21 pm

Server Side Development

We are going to start off the server side development first. We will be dealing with a local instance of MongoDB for the local development. If you have completed the prerequisites, you would already have MongoDB installed. Open a new terminal/prompt and start the MongoDB service by running

mongod

Next to build the server layer, Navigate to dev/server folder. First we will create a new node project. Open terminal/prompt here and run

npm init

Feel free to fill it up as you please. Next we are going to install the project dependencies. There are 3 key dependencies

1. mongojs

2. restify

3. bcrypt

4. morgan (optional – for logging)

Run

npm install --save mongojs restify bcrypt morgan

And the required dependencies will be installed. The completed package.json would be

Do notice that I have also added the engine details too. This will be used when we deploy the app to Heroku.

Next, create a new file named server.js inside the dev/server folder. This will be the starting point of our application. Create 2 more folders named auth and list here. All the code related to user interaction will be present inside the auth folder and all the BucketList API inside the list folder. This way, we can keep the code more organized and decoupled.

Our server.js will be

We require all the dependencies. And the mongojs is configured to use a local database named bucketlistapp. Lines 7 to 10 configures the Restify middleware to take care of parsing the request and logging. Lines 13 to 18 are very critical for a REST service. This is the place where we allow CORS (Cross Origin Request Sharing). i.e. any web based client can access our resources. They need not be from the same domain as ours. Without this, your client’s will not be able to talk to the server.Finally on Line 20, we start the server.

Next, lets take a look at the user registration and login. Before we start working on it, we need to have a system in place to store the passwords. We do not want to store the password as plain text in our DB. Create a new file inside the auth folder named managePasswords.js, and add the below code

There are 2 methods here. One for encrypting the password used while registering with the application and the other for comparing the passwords during login process. Simple?

Next, we will write our API for managing the users. Create a new file named manageUser.js inside the auth folder. Add the below contents to it