Granny's Addressbook example written in JQuery, Titanium, Node.js, MongoDB and deployed on CloudFoundry

This example goes with our article in InfoWorld entitled "Will the future be written entirely in JavaScript. This application is another implementation of the "Granny's Addressbook" that Lifford Pinto and Andrew C. Oliver used in the "Which Frakking PaaS Cloud should I use?" article. There are two clients provided that are written ENTIRELY in JavaScript: one that is AJAX/Web using jQuery and another that is iPhone/Android using Appcelerator Titanium. These clients connect to a RESTful backend written ENTIRELY in JavaScript using Node.js and all of the data is stored in JavaScript Object Notation using MongoDB. The entire backend is deployed on our partner VMWare's CloudFoundry Platform as a Service offering. Everything is open source. You should start with the InfoWorld article for the basic explanation and then come back here for a comprehensive example and proof that it can be done. The code was written almost entirely by Jonathan Freeman. The instructions were provided by Dr. Elizabeth Edmiston, Deep Mistry and Andrew C. Oliver.

If you are impatient here is the meat with no explanation:

Explanation

We use Granny's Addressbook as a training exercise. The idea is that it is a simple create-retrieve-update-delete (CRUD) application that doesn't require anything in particular to implement (i.e. security, scalability, etc). The idea is "if you're implementing granny's address book it doesn't matter what you use". Frequently when I give talks around the world on various technologies there is always someone who says "oh but I don't really need that" and this is my answer, "If you're implementing granny's address book it doesn't matter what you use." I find that when demonstrating new technologies "granny" works well as an example because it melts away all of the complexity an helps focus on the raw concerns. We have provided instructions for Linux (Ubuntu), OS X and Windows.

Screenshots

Granny's AJAX front-end (JQuery)

Granny's Android and iPhone App (Appcelerator Titanium)

Ubuntu

Installation Instructions for Granny on Node.js locally

Install Node.js and npm with
sudo apt-get install nodejs npm
Install MongoDB with
sudo apt-get install mongodb
Install git with
sudo apt-get install git
Checkout the application
git clone https://github.com/osintegrators/JavaScriptFrontToBack
Change directory into the directory you checked it out in
cd JavaScriptFrontToBack
Install the needed node-gyp package globally with npm
sudo npm install -g node-gyp
Install the packages you need locally with npm
npm install mongodb bson node-gyp
Run the app with ‘node app.js’
see it by going to http://localhost:8080

Installation Instructions for Granny on CloudFoundry

do the local install/run first
sign up for a CloudFoundry account
Install all of the Ruby Dependencies with
sudo apt-get install ruby-full rubygems

Update rubygems with

sudo su -
export REALLY_GEM_UPDATE_SYSTEM=true
gem update --system
exit

Install VMC with
gems install vmc
cd to the directory where you checked the project out
Target cloudfoundry with your vmc with
vmc target api.cloudfoundry.com
login with
vmc login

Create a package file called package.json like this:

{
 "name":"granny-node",
  "version":"0.0.1",
  "dependencies":{
      "node-gyp":"",
      "mongodb":""
  },
  "scripts": {"start":"app"}
}

Shrinkwrap the application with npm with:
npm shrinkwrap
Push the application with
vmc push --runtime06 (answer the questions but provision a mongo service named GrannyDB)
goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynode.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

download the Android SDK from http://developer.android.com/sdk/index.html

extract the Android SDK with

tar -xvf android-sdk_r20.0.3-linux.tgz android-sdk-linux/

import the Granny project from git with

git clone https://github.com/osintegrators/JavaScriptFrontToBack

create an appcelerator.com account and download Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
extract Titanium with
```
unzip titanium.linux.gtk.x86_64.zip
```
cd into the Titanium_Studio directory and open Titanium Studio with
```
./TitaniumStudio
```
select a suitable workspace (this is where your project files will be stored)
go to Window -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
Check the Android 2.2 (API 8) and click Install Packages

specify the location of the Granny project as

{DIRECTORYWITHGRANNY}/JavaScriptFrontToBack/mobileGranny

right-click on the Granny project and choose Run As -> Run Configurations
complete the configuration screen to match the following
click Run to run Granny on the Android emulator
to run on an Android device, first connect the Android device, then right-click on the project and choose Install on Android Device

Mac OS X

Installation Instructions for Granny on Node.js locally

download and install node.js and npm from http://nodejs.org (click Install)
confirm that node.js and npm are installed by executing
```
node -v
npm -v
```
download and extract MongoDB from http://www.mongodb.org/downloads
create the data directory used by MongoDB:
```
mkdir /data
mkdir /data/db
```
start MongoDB (from the bin directory of the MongoDB installation - the smallfiles is optional, but is recommended to avoid MongoDB creating rather large data files at startup) with
```
./mongod.exe --smallfiles
```

download Granny’s Addressbook with

git clone https://github.com/osintegrators/JavaScriptFrontToBack

cd into the directory where you checked out Granny (you should see the file app.js plus additional .js files)
```
cd JavaScriptFrontToBack
```
add the MongoDB module to npm with
```
npm install mongodb
```
run Granny with
```
node app.js
```
browse to http://localhost:8080/ to view Granny’s Addressbook

Installation Instructions for Granny on CloudFoundry

do the local install/run first
sign up for a CloudFoundry account
update rubygems with
```
sudo get update --system
```
install VMC with
```
sudo gem install vmc
```
cd to the directory that contains the project
target cloudfoundry with your vmc with
```
vmc target api.cloudfoundry.com
```
login with
```
vmc login
```

create a package file called package.json like this:

{
 "name":"granny-node",
  "version":"0.0.1",
  "dependencies":{
      "mongodb":""
  },
  "scripts": {"start":"app"}
}

shrinkwrap the application with npm with
```
npm shrinkwrap
```

push the application with

vmc push (answer the questions but provision a mongo service named GrannyDB)

goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynodemac.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

download the Android SDK from http://developer.android.com/sdk/index.html
extract the Android SDK by using the archiving utility on mac.

import the Granny project from git with

git clone https://github.com/osintegrators/JavaScriptFrontToBack

create an appcelerator.com account and download Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
Double-click the .dmg file to open it up. Another file with a name similar to the .dmg file will appear. Double click the file and a new Finder window will automatically appear. Drag and drop it into your “Applications” directory.
Open the application from the dock or from within the Applications Directory.
select a suitable workspace (this is where your project files will be stored)
go to Titanium Studio -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
Check the Android 2.2 (API 8) and click Install Packages

specify the location of the Granny project as

{DIRECTORYWITHGRANNY}/JavaScriptFrontToBack/mobileGranny

right-click on the Granny project and choose Run As -> Run Configurations
complete the configuration screen to match the following
click Run to run Granny on the Android emulator
to run on an Android device, first connect the Android device, then right-click on the project and choose Install on Android Device

Windows

Installation Instructions for Granny on Node.js locally

install node.js from http://nodejs.org (click Install)
Run the downloaded .msi file and follow the installation instructions.
To test the nodejs installation, open a Command Prompt window and type:
```
‘node -v’
```
This should display the version number. If it does not recognize the command then nodejs is not in your system path. You can correct this by either:
- a system reboot or
- updating the path for the current Command Prompt window by executing
```
set path=%path%;"C:\Program Files\nodejs"
```
Install git from http://code.google.com/p/msysgit/downloads/list?can=3
(download and run the Full Installer and select the 'git from Command Prompt' option).
test the git installation by executing:
```
git --version
```
open an Administrator: Command Prompt (right-click on the Command Prompt program and Run As Administrator), create a directory for npm, cd into that directory, and install npm with
```
git clone --recursive https://github.com/isaacs/npm.git npm
cd npm
node cli.js install npm -gf
```
confirm that npm is installed with
```
npm -v
```
download and extract MongoDB from http://www.mongodb.org/downloads
create the default data directory used by MongoDB with
```
mkdir \data\db
```

Download Granny’s Addressbook with

git clone https://github.com/osintegrators/JavaScriptFrontToBack

Run MongoDB (from the bin directory of the MongoDB installation - the smallfiles is optional, but is recommended to avoid MongoDB creating rather large data files at startup) with
```
mongod.exe --smallfiles
```
Open another Command Prompt window and CD into the directory where you checked out Granny (you should see the file app.js plus additional .js files) with
```
cd JavaScriptFrontToBack
```
Add the MongoDB module to npm with
```
npm install mongodb
```
Run Granny with
```
node app.js
```
Browse to http://localhost:8080/ to view Granny’s Addressbook

Installation Instructions for Granny on CloudFoundry

do the local install/run first
sign up for a CloudFoundry account
download the Ruby installer for Windows from http://rubyinstaller.org/downloads/
run the downloaded installer (make sure you check the box: Add Ruby executables to your PATH)
update rubygems by opening a new Command Prompt with the Run As Administrator option (right-click on the Command Prompt program) and executing
```
get update --system
```
install VMC with
```
gem install vmc
```
cd to the directory that contains the project
target cloudfoundry with your vmc with
```
vmc target api.cloudfoundry.com
```
login with
```
vmc login
```

create a package file called package.json like this:

{
 "name":"granny-node",
  "version":"0.0.1",
  "dependencies":{
      "mongodb":""
  },
  "scripts": {"start":"app"}
}

shrinkwrap the application with npm with
```
npm shrinkwrap
```

push the application with

vmc push (answer the questions but provision a mongo service named GrannyDB)

goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynodewindows.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

download and install the Android SDK from http://developer.android.com/sdk/index.html
Install git from http://code.google.com/p/msysgit/downloads/list?can=3
(download and run the Full Installer and select the 'git from Command Prompt' option).

import the Granny project from git with

git clone https://github.com/osintegrators/JavaScriptFrontToBack

create an appcelerator.com account and download and install Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
cd into the Titanium_Studio directory and open Titanium Studio with
```
./TitaniumStudio
```
select a suitable workspace (this is where your project files will be stored)
go to Window -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
Check the Android 2.2 (API 8) and click Install Packages

specify the location of the Granny project as

{DIRECTORYWITHGRANNY}\JavaScriptFrontToBack\mobileGranny

right-click on the Granny project and choose Run As -> Run Configurations
complete the configuration screen to match the following
click Run to run Granny on the Android emulator (this may take a while)
to run on an Android device, first connect the Android device, then right-click on the project and choose Install on Android Device

Thanks for reading!

If you need help with your MongoDB, Appcelerator, Node.js, Cloud Foundry or general AJAXy jQuery project please contact us at sales@osintegrators.com. We would love to work with you.

We are also looking for partners in new technologies. We love our partners at VMWare (maker of CloudFoundry) and Neo Technologies (maker of Neo4j), for instance. If this is you, please contact us at sales@osintegrators.com and we can look for ways to work together.

For other more general PR inquiries please contact info@osintegrators.com.

OSI Blog

R.I.P. JavaBlogs: Atlassian shut down JavaBlogs the original go-to blog aggregator for...

InfoWorld: $200K for a...: If you do the work, you can get a computer science education online...

The Missed Opportunity...: Open Software Integrators is my current and measurably successful...

Andrew C. Oliver Wins...: Congratulations to Andrew C. Oliver for being named one of the top 3...

Ubuntu 13.04 was a bumpy...: I have a two year old Dell Precision 4100 with a i7-2760QM CPU @ 2....