Sample App: Storing your Application Data in the Cloud with Parse.com and the JavaScript SDK

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

In the dashboard, go to Settings and grab the Application ID and the JavaScript key.

Step 4: Populate the Database

There are two ways to populate the database:

  1. Import a .json, .csv, .xls, or .txt file from the Data Browser interface. This approach works well for simple data structures.
  2. 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

  1. Download the source code for the Employee Directory client application available in this repository.
  2. 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.
  3. Open index.html in your code editor.
  4. Comment out the “model-in-memory.js” script, and uncomment the “parse-1.2.2.min.js” and “model-parse-com.js” scripts.
  5. 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:

1. Prevent client class creation (In Settings > General Settings):

2. Disable create, update, delete operations (In Data Browser > More > Set Permissions):

8 Responses to Sample App: Storing your Application Data in the Cloud with Parse.com and the JavaScript SDK

  1. Matt May 8, 2013 at 1:48 pm #

    Thanks for producing this tutorial. It is really helping me.

    I found that in order to get the Parse integration to work with my account I needed to follow your steps and additionally I needed to replace your Parse application ID and javascript key in model-parse-com.js and I also needed to make the class name consistent (I used “Employees”) across gistfile1.html and model-parse-com.js. Maybe this will save someone else some trouble, or maybe I got off on the wrong track in some way. Thank you!

    • Georges August 12, 2013 at 8:07 am #

      i followed your steps including his but i didn’t work, when i search nothing comes up . Also i didn’t find “gistfile.html” can you point me to it ? thank you !

    • Georges August 12, 2013 at 8:11 am #

      it worked, nevermind

  2. Chris May 10, 2013 at 11:42 pm #

    Why do I want to pay a middleman (Parse) to sit between me and my application? The cloud may be cool, but traditional web hosting is a fraction of what a Parse account would cost.

    • Nene Odonkor September 24, 2013 at 8:23 pm #

      So what other options are there that one can use?

    • RickB January 16, 2014 at 6:41 pm #

      I think I will agree with you on this one. I’m trying my best to work with the Parse platform but I’m wasting too much time writing code to retrieve data, especially when there are joins to other tables. I think it will be cheaper to order a SQL Server instance on my web hosting provider and have the full power of stored procedures and views

  3. alimentos para revertir la diabetes October 8, 2013 at 4:23 pm #

    Piece of writing writing is also a fun, if you be familiar with afterward you can
    write or else it is difficult to write.

  4. Zothow January 16, 2014 at 1:05 pm #

    Big thanks for the tutorial and especially for the script, but I can not understand why do you wrote pics with *.jpg, if this code can not upload files, only adds text…

    But is there a way how to successfully upload files with similar code?

Leave a Reply

css.php