Christophe Coenraets » MongoDBhttp://coenraets.org/blog
Tue, 24 Mar 2015 18:28:03 +0000en-UShourly1http://wordpress.org/?v=4.0.1How to upload pictures from a PhoneGap Application to Node.js (and other servers)http://coenraets.org/blog/2013/09/how-to-upload-pictures-from-a-phonegap-application-to-node-js-and-other-servers-2/
http://coenraets.org/blog/2013/09/how-to-upload-pictures-from-a-phonegap-application-to-node-js-and-other-servers-2/#commentsTue, 10 Sep 2013 19:37:03 +0000http://coenraets.org/blog/?p=6269You have seen the demos showing you how to access your camera and take pictures from a PhoneGap application. But these demos often end there, and a number of people have asked me for an end-to-end example showing how to take pictures and upload them to a server.

I created a simple app that I called Picture Feed. It shows you the last pictures uploaded by users, and lets you take pictures that are automatically uploaded to a server for other people to see.

In this sample app, I upload the pictures to a Node.js server, and I keep track of the list of pictures and associated information (if any) in a MongoDB collection. But the same approach would work with other server stacks.

To test the application on iOS, make sure you modify the “widget id” value in config.xml and specify the namespace that matches your application provisioning profile.

]]>http://coenraets.org/blog/2013/09/how-to-upload-pictures-from-a-phonegap-application-to-node-js-and-other-servers-2/feed/14Implementing RESTFul Services with Node.js and MongoDBhttp://coenraets.org/blog/2013/04/implementing-restful-services-with-node-js-and-mongodb/
http://coenraets.org/blog/2013/04/implementing-restful-services-with-node-js-and-mongodb/#commentsThu, 18 Apr 2013 17:04:19 +0000http://coenraets.org/blog/?p=5516
In my previous post, I shared a new version of the Employee Directory sample application. By default, the application uses an in-memory data store to provide a “download and run” experience (no need to set up a server or a database). In this post, I’ll show how to replace the in-memory data store with RESTful services powered by Node.js, MongoDB and the Express framework.

If you are not using the Employee Directory sample application, you can still use this post on its own to learn how to implement RESTful services with Node.js, MongoDB and the Express framework.

Step 1: Install Node.js

If it’s not already installed on your system, follow the steps below to install Node.js:

Run the installer that you just downloaded. When the installer completes, a message indicates that Node was installed at /usr/local/bin/node and npm was installed at /usr/local/bin/npm. At this point node.js is ready to use.

Step 2: Install MongoDB

If MongoDB is not already installed on your system, refer to the MongoDB QuickStart for platform-specific installation instructions. Here are some quick steps to install MongoDB on a Mac:

In Finder, double-click mongodb-osx-x86_64-2.4.2.tgz to extract its contents. (Alternatively you can use: tar -zxvf mongodb-osx-x86_64-2.4.2.tgz)

Move the mongodb-osx-x86_64-2.4.2 folder to /usr/local (or another folder according to your personal preferences):

sudo mv -n mongodb-osx-x86_64-2.4.2/ /usr/local/

(Optional) Create a symbolic link to make it easier to access:

sudo ln -s /usr/local/mongodb-osx-x86_64-2.4.2 /usr/local/mongodb

Create a folder for MongoDB’s data and set the appropriate permissions:

sudo mkdir -p /data/db
sudo chown `id -u` /data/db

Start mongodb

cd /usr/local/mongodb
./bin/mongod

Step 3: Download the Code

The Node.js code for the Employee Directory RESTful services is available in this GitHub repository. Download it here and unzip the file anywhere on your file system.

Open server.js and routes/employee.js in a code editor. The RESTFul API is defined as follows:

Method

URL

Action

GET

/employees

Retrieve all employees

GET

/employees?name=j

Retrieve employees whose name includes the letter “j”

GET

/employees/3

Retrieve employee with id=3

GET

/employees/3/reports

Retrieve employees that are direct reports of employee number 3

In routes/employee.js, the use of res.jsonp() makes the services work for both JSON and JSONP requests. If the request includes a query parameter named “callback”, a JSONP response is returned, otherwise, a regular JSON response is returned.

Step 4: Install dependencies (Express Framework and MongoDB driver)

Open package.json in a code editor and note that the application has two dependencies: the Express framework and the MongoDB driver. To install these dependencies, open a command line (terminal window), cd to the directory where you extracted the source code, and type:

npm install

Step 5: Start the server

Make sure MongoDB is started (Step 2 point 6 above) before you start your Node.js server as follows:

Step 7: Test the API with the Employee Directory Client Application

Download the source code for the Employee Directory client application available in this repository.

Unzip the file anywhere on your file system.

Open index.html in your code editor.

Comment out the “model-in-memory.js” script, and uncomment the “model-jsonp.js” script to use the JSONP adapter that connects to your Node.js server.

Make sure the MongoDB and Node.js servers are started

Open index.html in a Browser and test the application

Because the templates of this application are loaded using XMLHTTPRequest, you will get a cross domain error (Access-Control-Allow-Origin) if you load index.html from the file system (with the file:// protocol). Make sure you load the application from a web server. For example: http://localhost/directory-backbone-bootstrap.

Related Post

Check out this post for another Node.js example with a more complete RESTful API including the ability to add, modify and delete items (POST, PUT, and DELETE HTTP methods).

I’ve always enjoyed building real-time applications. A few years ago, I built the Java back-end for the Tour of California “Tour Tracker”, and over the years, I have also been involved in several real-time Trader Desktop projects that I documented in this blog. So I thought it would be nice to explore the process of building a real-time application with Node.js and Socket.IO.

As an example, we’ll build a simple web analytics dashboard that shows pages being accessed on a web site in real-time. Kind of like the real-time view in Google Analytics.

The basic flow of the app is as follows:

The instrumented web application sends a message to the server every time there is a page change within the app.

Navigate through the application: the dashboard should display each page view.

In the remaining of this article we will go through the steps of building the application from scratch.

First Iteration: Basic Implementation

Node.js and Socket.IO make it easy to implement this type of real-time messaging system. Here is a simple (yet fully functional) implementation of the application:

The Server

In this first implementation, Node.js doesn’t serve the application’s HTML pages. Pages loaded from any domain (or even from the file system) can connect to our message server to send or listen to “pageview” messages.

The Instrumented Web App

Here is an example of an instrumented page with a script that sends a message to the server every time the page is loaded.

As mentioned above, this page can be loaded from any domain or from the file system.

The Real Time Dashboard

Here is a bare-bones implementation of the real-time dashboard application that receives “pageview” messages from the server.

That’s basically all you need to start building a sophisticated user interface with real-time charts, counters, maps, etc.

Testing the Application

Make sure you have Node.js and Socket.IO installed

Start the Node.js server

node server

Double-click dashboard.html in Finder (Mac) or Explorer (Windows) to open the page in your default browser.

Double-click simplepage.html in Finder or Explorer to open the page in your default browser (in a separate window).

Refresh simplepage.html repeatedly: the dashboard should display each page view.

Second Iteration: Adding Authorization

The solution described above works fine, but there are some potential security issues we need to address:

Any application (from any domain) can send a message to our server.

Any application (from any domain) can listen to the messages pushed by our server.

Let’s refine our solution to make sure that only authorized clients can connect to our server. Socket.IO provides two different authorization methods: global authorization and namespace authorization (more info). In both cases, the handshakeData object provides information (headers, IP address, xdomain, etc) that is useful to implement your authorization logic and determine whether or not you want to allow the client to connect. In this application, we will use global authorization and reject all the cross-domain connection attempts:

There are many other ways you can secure your connections, but that discussion is beyond the scope of this article.

Rejecting cross-domain connections means that the application pages now also have to be served by the Node.js server. To put our new authorization policy into practice, let’s add the real-time web analytics capability to the Node Cellar application that I shared in my previous post.

The Server

The server now serves the HTML pages and hosts Socket.IO.

The Instrumented Web App

The following script has been added to index.html to send a “pageview” message to the server every time the page changes.

Notes:

We actually don’t need to use Socket.IO for this part of the application. The client sends a “pageview” message to the server and doesn’t listen for messages from the server. In other words, this is a traditional client-to-server one-way communication that could be implemented with a traditional Ajax request.

The onhashchange event is used because Node Cellar is a “Single Page Application”. The entire application runs within a single page (index.html): views are created dynamically at the client-side and injected into or removed from the DOM as you navigate through the application. Only the hash part of the URL changes (without a page refresh) to reflect the current state of the application.

The Real Time Dashboard

The final version of the dashboard is shown in the screenshot at the top of this post. The Socket.IO code didn’t change much since our initial implementation. The final code for dashboard.html is available here.

Testing the Application

Make sure you have Node.js and Socket.IO installed

Download the source code

Uncomment the Socket.IO related script in the head of public/index.html

In this post, I’m sharing the client application that uses that RESTful API. The Node Cellar application allows you to manage (retrieve, create, update, delete) the wines in a wine cellar database.
The client application is built with Backbone.js and Twitter Bootstrap.

Run the Application

You can run the application here. For obvious reasons, the create, update, delete features have been disabled in this hosted version.

NOTE: Node.js is running on port 3000 on my EC2 Instance. My friend James Ward convinced me to host the application on their service over at Heroku. It’s now running on port 80 at http://nodecellar.coenraets.org. Thanks James!

Server-Side

The details of the Node.js, MongoDB, and Express implementation are documented in my previous post.

Client-Side

In this application, Node.js is used to provide the RESTful services that the client application needs to manipulate the data. Node.js is not used to generate HTML/Views at the server-side. Instead, the Views are created dynamically at the client-side using Backbone.js and Underscore.js templates. They are injected into- and removed from the DOM as needed as you navigate through the application. Node Cellar is a “single page application”.

This is a Node.js and MongoDB powered version of an application I initially posted here with PHP and Java backends. The original post provides some additional Backbone.js context. This Node.js version also provides an improved user experience with the latest version of Twitter Bootstrap (2.1.1), and a responsive layout. It also uses Adobe Edge Web Fonts.

Installing Node.js

Run the installer that you just downloaded. When the installer completes, a message indicates that Node was installed at /usr/local/bin/node and npm was installed at /usr/local/bin/npm.

At this point node.js is ready to use. Let’s implement the webserver application from the nodejs.org home page. We will use it as a starting point for our project: a RESTful API to access data (retrieve, create, update, delete) in a wine cellar database.

Create a folder named nodecellar anywhere on your file system.

In the wincellar folder, create a file named server.js.

Code server.js as follows:

We are now ready to start the server and test the application:

To start the server, open a shell, cd to your nodecellar directory, and start your server as follows:

Using Node.js Modules

In a large application, things could easily get out of control if we keep adding code to a single JavaScript file (server.js). Let’s move the wine-related code in a wines module that we then declare as a dependency in server.js.

In the nodecellar folder, create a subfolder called routes.

In the routes folder create a file named wines.js and defined as follows:

Modify server.js as follows to delegate the routes implementation to the wines module:

Installing the MongoDB Driver for Node.js

There are different solutions offering different levels of abstraction to access MongoDB from Node.js (For example, Mongoose and Mongolia). A comparaison of these solutions is beyond the scope of this article. In this, guide we use the native Node.js driver.

To install the the native Node.js driver, open a terminal window, cd to your nodecellar folder, and execute the following command:

npm install mongodb

Implementing the REST API

The full REST API for the nodecellar application consists of the following methods:

Method

URL

Action

GET

/wines

Retrieve all wines

GET

/wines/5069b47aa892630aae000001

Retrieve the wine with the specified _id

POST

/wines

Add a new wine

PUT

/wines/5069b47aa892630aae000001

Update wine with the specified _id

DELETE

/wines/5069b47aa892630aae000001

Delete the wine with the specified _id

To implement all the routes required by the API, modify server.js as follows:

To provide the data access logic for each route, modify wines.js as follows:

Restart the server to test the API.

Testing the API using cURL

If you want to test your API before using it in a client application, you can invoke your REST services straight from a browser address bar. For example, you could try: