A couple of days ago, 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 a database hosted on Parse.com.
Step 1: Sign Up for Parse.com
Go to http://parse.com and sign up for Parse.
Step 2: Create an Application
On the next screen, create an application as follows:
Step 3: Get your Application Keys
Step 4: Populate the Database
There are two ways to populate the database:
- Import a .json, .csv, .xls, or .txt file from the Data Browser interface. This approach works well for simple data structures.
- Programmatically, using the the Parse SDK.
For the employee directory application I wrote the quick script below to populate the database:
Step 5: Run the Employee Directory App using the Parse.com Cloud Data
- Download the source code for the Employee Directory client application available in this repository.
- Extract the application files to a directory you can reach using a local or hosted web server.
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.
- Open index.html in your code editor.
- Comment out the “model-in-memory.js” script, and uncomment the “parse-1.2.2.min.js” and “model-parse-com.js” scripts.
- Open index.html in a Browser and test the application.
Step 6: Secure the Database
Parse.com offers different security options. A complete discussion of these options is beyond the scope of this article. Since Employee Directory is a read-only and public application, we will simply:
2. Disable create, update, delete operations (In Data Browser > More > Set Permissions):