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

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

Installation Instructions for Granny on CloudFoundry

  1. do the local install/run first
  2. sign up for a CloudFoundry account
  3. Install all of the Ruby Dependencies with
    sudo apt-get install ruby-full rubygems
  4. Update rubygems with
    sudo su -
    export REALLY_GEM_UPDATE_SYSTEM=true
    gem update --system
    exit
    
  5. Install VMC with
    gems install vmc
  6. cd to the directory where you checked the project out
  7. Target cloudfoundry with your vmc with
    vmc target api.cloudfoundry.com
  8. login with
    vmc login
  9. Create a package file called package.json like this:
    {
     "name":"granny-node",
      "version":"0.0.1",
      "dependencies":{
          "node-gyp":"",
          "mongodb":""
      },
      "scripts": {"start":"app"}
    }
    
  10. Shrinkwrap the application with npm with:
    npm shrinkwrap
  11. Push the application with
    vmc push --runtime06 (answer the questions but provision a mongo service named GrannyDB)
  12. goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynode.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

  1. download the Android SDK from http://developer.android.com/sdk/index.html
  2. extract the Android SDK with
    tar -xvf android-sdk_r20.0.3-linux.tgz android-sdk-linux/
  3. import the Granny project from git with
    git clone https://github.com/osintegrators/JavaScriptFrontToBack
  4. create an appcelerator.com account and download Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
  5. extract Titanium with
    unzip titanium.linux.gtk.x86_64.zip
  6. cd into the Titanium_Studio directory and open Titanium Studio with
    ./TitaniumStudio
  7. select a suitable workspace (this is where your project files will be stored)
  8. go to Window -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
  9. add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
  10. Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
  11. Check the Android 2.2 (API 8) and click Install Packages
  12. specify the location of the Granny project as
    {DIRECTORYWITHGRANNY}/JavaScriptFrontToBack/mobileGranny
  13. right-click on the Granny project and choose Run As -> Run Configurations
  14. complete the configuration screen to match the following
  15. click Run to run Granny on the Android emulator
  16. 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

  1. download and install node.js and npm from http://nodejs.org (click Install)
  2. confirm that node.js and npm are installed by executing
    node -v
    npm -v
    
  3. download and extract MongoDB from http://www.mongodb.org/downloads
  4. create the data directory used by MongoDB:
    mkdir /data
    mkdir /data/db
    
  5. 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
  6. download Granny’s Addressbook with
    git clone https://github.com/osintegrators/JavaScriptFrontToBack
  7. cd into the directory where you checked out Granny (you should see the file app.js plus additional .js files)
    cd JavaScriptFrontToBack
  8. add the MongoDB module to npm with
    npm install mongodb
  9. run Granny with
    node app.js
  10. browse to http://localhost:8080/ to view Granny’s Addressbook

Installation Instructions for Granny on CloudFoundry

  1. do the local install/run first
  2. sign up for a CloudFoundry account
  3. update rubygems with
    sudo get update --system
  4. install VMC with
    sudo gem install vmc
  5. cd to the directory that contains the project
  6. target cloudfoundry with your vmc with
    vmc target api.cloudfoundry.com
  7. login with
    vmc login
  8. create a package file called package.json like this:
    {
     "name":"granny-node",
      "version":"0.0.1",
      "dependencies":{
          "mongodb":""
      },
      "scripts": {"start":"app"}
    }
    
  9. shrinkwrap the application with npm with
    npm shrinkwrap
  10. push the application with
    vmc push (answer the questions but provision a mongo service named GrannyDB)
  11. goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynodemac.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

  1. download the Android SDK from http://developer.android.com/sdk/index.html
  2. extract the Android SDK by using the archiving utility on mac.
  3. import the Granny project from git with
    git clone https://github.com/osintegrators/JavaScriptFrontToBack
  4. create an appcelerator.com account and download Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
  5. 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.
  6. Open the application from the dock or from within the Applications Directory.
  7. select a suitable workspace (this is where your project files will be stored)
  8. go to Titanium Studio -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
  9. add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
  10. Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
  11. Check the Android 2.2 (API 8) and click Install Packages
  12. specify the location of the Granny project as
    {DIRECTORYWITHGRANNY}/JavaScriptFrontToBack/mobileGranny
  13. right-click on the Granny project and choose Run As -> Run Configurations
  14. complete the configuration screen to match the following
  15. click Run to run Granny on the Android emulator
  16. 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

  1. install node.js from http://nodejs.org (click Install)
  2. Run the downloaded .msi file and follow the installation instructions.
  3. 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"
  4. 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).
  5. test the git installation by executing:
    git --version
  6. 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
  7. confirm that npm is installed with
    npm -v
  8. download and extract MongoDB from http://www.mongodb.org/downloads
  9. create the default data directory used by MongoDB with
    mkdir \data\db
  10. Download Granny’s Addressbook with
    git clone https://github.com/osintegrators/JavaScriptFrontToBack
  11. 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
  12. 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
  13. Add the MongoDB module to npm with
    npm install mongodb
  14. Run Granny with
    node app.js
  15. Browse to http://localhost:8080/ to view Granny’s Addressbook

Installation Instructions for Granny on CloudFoundry

  1. do the local install/run first
  2. sign up for a CloudFoundry account
  3. download the Ruby installer for Windows from http://rubyinstaller.org/downloads/
  4. run the downloaded installer (make sure you check the box: Add Ruby executables to your PATH)
  5. 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
  6. install VMC with
    gem install vmc
  7. cd to the directory that contains the project
  8. target cloudfoundry with your vmc with
    vmc target api.cloudfoundry.com
  9. login with
    vmc login
  10. create a package file called package.json like this:
    {
     "name":"granny-node",
      "version":"0.0.1",
      "dependencies":{
          "mongodb":""
      },
      "scripts": {"start":"app"}
    }
    
  11. shrinkwrap the application with npm with
    npm shrinkwrap
  12. push the application with
    vmc push (answer the questions but provision a mongo service named GrannyDB)
  13. goto the url they gave you (appname.cloudfoundry.com), mine is here: http://grannynodewindows.cloudfoundry.com/

Installation Instructions for Appcelerator Titanium

  1. download and install the Android SDK from http://developer.android.com/sdk/index.html
  2. 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).
  3. import the Granny project from git with
    git clone https://github.com/osintegrators/JavaScriptFrontToBack
  4. create an appcelerator.com account and download and install Titanium from http://www.appcelerator.com/ (click “Download Titanium”)
  5. cd into the Titanium_Studio directory and open Titanium Studio with
    ./TitaniumStudio
  6. select a suitable workspace (this is where your project files will be stored)
  7. go to Window -> Prefrences -> Titanium Studio -> Titanium and give the path to your Android SDK directory
  8. add the Granny project to Titanium by choosing File -> Import -> General -> Existing Project into Workspace
  9. Go to the Titanium Dashboard (Help -> Titanium Studio -> Show Titanium Dashboard) and under Configure Native SDKs click on Android
  10. Check the Android 2.2 (API 8) and click Install Packages
  11. specify the location of the Granny project as
    {DIRECTORYWITHGRANNY}\JavaScriptFrontToBack\mobileGranny
  12. right-click on the Granny project and choose Run As -> Run Configurations
  13. complete the configuration screen to match the following
  14. click Run to run Granny on the Android emulator (this may take a while)
  15. 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.