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):

26 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

      • Shaun October 27, 2014 at 2:03 pm #

        Hi, we stated a project using parse.com and it’s been such a mess to even get people to understand how the html, php, angular aspects work in updating via parse.com. Can any suggest how to move all files out of parse.com into a traditional domain server. I want all code, database, and cloud code to be copied over. It’s easier to not use parse.com.

        Seems like a cool idea, but it takes way too long for strangers to figure it out. I need help!

  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?

  5. Ariel May 25, 2014 at 6:50 am #

    Great post. I was checking continuously this weblog and I am inspired!
    Extremely helpful info particularly the final section :)
    I handle such information a lot. I used to be looking for this certain info for a very lengthy
    time. Thanks and best of luck.

  6. Wow, superb weblog format! How lengthy have you ever been running a blog for?

    you made blogging look easy. The full look of your web site is great, let alone the content material!

  7. whatsapp para iphone 4.3.1 May 27, 2014 at 11:31 am #

    When some one searches for his required thing, so he/she wants to be available that in detail, thus that thing is maintained over here.

  8. http://josephdunn.blog.com May 30, 2014 at 1:11 am #

    I’m not sure exactly why but this web site is loading very slow for me.
    Is anyone else having this problem or is it a issue on my end?
    I’ll check back later and see if the problem still exists.

  9. I rarely drop remarks, however i did a few searching and wound up here
    Sample App: Storing your Application Data in the Cloud
    with Parse.com and the JavaScript SDK | Christophe
    Coenraets. And I do have a couple of questions for you if you usually do not mind.
    Is it just me or does it seem like some of the comments look as
    if they are written by brain dead people? :-P And, if you
    are posting on additional online sites, I would like to
    follow everything fresh you have to post. Could you list of all of all your communal pages like your linkedin profile, Facebook page or twitter feed?

  10. Mobile Payment Apps For Iphone May 30, 2014 at 5:33 am #

    I feel that is among the so much significant information for
    me. And i am satisfied studying your article.

    However should commentary on few normal issues, The web site taste is ideal, the articles is really nice : D.
    Good activity, cheers

  11. Reggie May 30, 2014 at 7:14 am #

    Hi there to all, the contents present at this site are truly amazing for
    people knowledge, well, keep up the good work fellows.

  12. http://sophiecunningham.blog.com/ May 30, 2014 at 7:19 am #

    Hello there! This is my first comment here so I just wanted to give a quick shout out
    and say I really enjoy reading through your articles.

    Can you recommend any other blogs/websites/forums that deal with the same subjects?
    Appreciate it!

  13. I visited multiple web sites but the audio feature for audio songs existing at this web page is
    really excellent.

  14. aplicaciones para celular android 4.2 May 30, 2014 at 6:02 pm #

    Amazing issues here. I am very satisfied to see your post. Thank you so much and I’m having a look
    forward to touch you. Will you please drop me a e-mail?

  15. Ronda June 1, 2014 at 5:51 am #

    Hi there! Would you mind if I share your blog with my myspace group?
    There’s a lot of people that I think would really enjoy your content.

    Please let me know. Cheers

  16. Useful information. Fortunate me I found your web site by accident, and I’m stunned why this twist of
    fate didn’t happened in advance! I bookmarked it.

  17. Benito June 2, 2014 at 2:27 pm #

    I am regular reader, how are you everybody? This article posted
    at this web page is genuinely fastidious.

  18. Dominic June 17, 2014 at 1:37 am #

    Please let me know if you’re looking for a author for your weblog.
    You have some really great posts and I think I would be a good asset.

    If you ever want to take some of the load off, I’d
    absolutely love to write some material for your blog in exchange for a link back to mine.
    Please blast me an email if interested. Cheers!

  19. Levi July 22, 2014 at 10:13 am #

    Chris,

    First, love your website. I’m going through the tutorial now, http://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html.

    But I’m also trying to adapt this project. I am trying to quickly spin up a site using the directory based on parse.com. They queries in model-parse-com.js do not appear to return any data. I know the Parse.initialize is working properly as I used the script above to fill the table.

    Any chance you can point me in the right direction?

    http://directory.bolivarcomputers.net/index.html

  20. ikinci el klima November 29, 2014 at 4:30 pm #

    arkadaşlar yeni çalışmaları bekliyoruz.

  21. klima servisi November 29, 2014 at 4:42 pm #

    arkadaşlar çalışmaları bekliyoruz

    http://www.sogutmaservisiistanbul.com

Leave a Reply

css.php