Getting Started with Parse

Parse frees you from setting up a server-side stack.

Let’s get back to Parse. View the Data Browser for EnvatoTodo (it’s currently empty). The Data Browser is similar to a MySQL database server, but the Parse DB is schema-less. While you can specify columns in the Data Browser, you can actually save any object with simple JSON (not unlike many NoSQL/Document databases). This is an extremely important and useful feature of Parse.

We’re going to go ahead and add a “class” to the database. Think of a class as a table. The reason it’s called a class is because you’ll generally create objects from a certain class and then save that object to the database.

Disclaimer: JavaScript does not officially have classes (yet), but it does have the logical equivalent. For the sake of simplicity, I will use the terminology “class” in this tutorial.

Parse has five types of classes.

• User classes store user-specific information, and Parse provides sugar methods such as signUp(), login(), and more to help with user administration.
• Installation classes are typically used to send push notifications for mobile apps. Yes, Parse supports push notifications to all clients.
• Role classes help segregate users into specific roles, controlling access to read/write to other classes. This is called ACL (access control list) within Parse.
• Product classes store in-app product data.
• Custom classes are for anything else.

Let’s create a custom class called ListItem. Once it’s created, you’ll notice it already has four properties. Parse automatically updates the properties of every class that you create. Some classes, such as user classes, may have their own specific properties.

Our ListItem objects will contain a content property to show what the Todo contains, and an isComplete property to indicate whether the Todo was completed. We could add columns for these properties, but Parse will figure it out from our JSON.

Initializing Parse

Let’s go back to index.html to add some code. The first thing we want to do is initialize Parse with our App ID and JavaScript key. These can be found under the Overview tab of your application inside the Data Browser. Add the following line to your JavaScript, replacing APP_ID and JS_KEY with the appropriate values:

Parse.initialize(APP_ID, JS_KEY);

Saving Todos

Let’s start adding functionality to our application. We’ll first save a To-do list item when the user clicks the add button. The following code is all we need for this functionality:

submitBtn.on('click', function(e) {    //Extend the native Parse.Object class.    var ListItem = Parse.Object.extend("ListItem");    //Instantiate an object of the ListItem class    var listItem = new ListItem();    //listItem is now the object that we want to save, so we assign the properties that we want on it.    listItem.set("content", text);    listItem.set("isComplete", false);    //We call the save method, and pass in success and failure callback functions.    listItem.save(null, {        success: function(item) {        //Success Callback    },    error: function(gameScore, error) {        //Failure Callback    }    });});

Interacting with the database is extremely painless! Every custom class in Parse inherits from Parse.Object; therefore, ListItem is a subclass. The string argument "ListItem" tells Parse that this class correlates to the ListItem table that we created. Then we create a new ListItem object, set its properties, and call save().

Showing Items

In order to display a list of To-do items, we’ll use the Parse JavaScript API to query the ten most recently saved items, and list those below the app. This will give you an idea as to how queries work in Parse.

//Once again, we extend the Parse.Object class to make the ListItem classListItem = Parse.Object.extend("ListItem");//This time, we use Parse.Query to generate a new query, specifically querying the ListItem table.query = new Parse.Query(ListItem);//We set constraints on the query.query.equalTo('isComplete', false)query.limit = 10;query.descending('createdAt');//We submit the query and pass in callback functions.query.find({  success: function(results) {    //Success callback  },  error: function(error) {    //Error Callback  }});

Once again, it’s fairly simple and easy to read. The Parse.Query() method is quite powerful. Here, we perform a fairly basic query, but Parse queries can be complex as well. You can query for specific regular expressions, perform relational queries, and many more. Be sure to visit the Query Documentation for more examples and code snippets.

Putting it all together

The next thing we need to add is the ability to mark a to-do item as complete when checking the item’s checkbox. Each checkbox has a unique id associated with the Parse object that it represents. Therefore, when a checkbox is clicked, we need to:

• Get the id.
• Query for a Parse object with that id.
• Get the returned Parse object, and update it’s isComplete property as true.
• Save the updated object.
• Remove it from the displayed list.

Here’s what that code looks like:

incompleteItemList.delegate('click', function (e) {    //keep a reference to this    var self = this;    //create a Parse query object    var query = new Parse.Query(ListItem);    //The query.get() method requires the objectId as its first argument. It returns the object with that id.    query.get(self.one('input').get('id'), {      success: function(item) {        //Once the object is returned, we update its property and save it.        item.set('isComplete', true);            item.save();            //Since the item is no longer incomplete, we remove it from the list.            self.remove();            //If there's nothing in the list, show a message saying the list is empty.            if (incompleteItemList.all('li').size() >= 1) {                noTasksMessage.removeClass('hidden');            }      },      error: function(object, error) {            alert("Error when updating todo item: " + error.code + " " + error.message);      }    });}, 'li');

In this snippet, we query for an individual element with a specific id, update it, and save it. Then we remove it from the list with self.remove().

In Parse, updating objects is very similar to saving objects–we call save() in both cases. Parse figures out whether it’s an existing (dirty) object, or an entirely new object and performs the appropriate action.

Complete Source Code

With that, we’re good to go! Pretty easy, eh? Download the attached ZIP file and open index.html to view the entire source code.

Other Features

In this tutorial, we primarily looked at Parse from a web development point-of-view. However, the service was originally started with mobile developers in mind. Parse has a very thorough SDK for Android and iOS, and it supports features such as push notifications to all users of your mobile app.

Some other big features that we didn’t cover in this tutorial involve users, roles, and storing relational information.

Parse makes it relatively simple to create users, and assign different roles to them. For example, in a learning management system, you may have “Teachers”, “Students”, and “Administrators”. By assigning roles, you can specify which type of user has access to certain Parse objects.

What about Security?

A lot of new technologies leverage the cloud…

As a developer, I like that Parse takes care of a lot of the security concerns that I have. As it states on the website, the Parse SDKs are designed “so that you typically don’t need to worry about how data is saved.” There’s still the issue of users having access to information that they shouldn’t be able to. To address this concern, Parse offers Object-level and Class-level permissions.

Object-level permissions allow a developer to specify an array of object IDs that have access to read and/or write the object. Class-level permissions allow a developer to specify what aspects of a Parse class can be manipulated from the API. The following operations can be allowed or denied on a per-class basis: Get, Find, Update, Create, Delete, and Add Fields.

---

Pros and Cons

I want to stress is that Parse is not suitable for every type of project. Although the free plan is very generous, Parse is a paid service. It can get expensive if you go above certain limits. Luckily, the pricing model is very transparent, and you should be able to figure out how much your app can cost. Generally speaking, I use it for smaller projects where I can anticipate a certain cap when it comes to the number of API requests that I make. I have yet to try Parse for a large project.

One common issue with a service such as Parse is the lock-in effect.

If you use Parse for a small project that suddenly takes off, it can be difficult to move to a difference service or platform. As you can imagine, replacing Parse with your own back-end would entail a significant amount of refactoring. This doesn’t mean you shouldn’t use Parse, but it’s something to keep in mind.

---

Concluding Remarks

In this tutorial, we looked at how we can use Parse to create a relatively simple web application. I’ve used this service for a number of projects for various clients, and I find the Parse team to be very helpful when issues arise. I encourage you give the service a try, and make your own decision!

Disclosure: I have no relationship with Parse or any of its employees. I’m just a developer who uses their service, and I find it to be a helpful addition to my development workflow.

Original Link: http://feedproxy.google.com/~r/nettuts/~3/E_IivGJ37A4/

Share this article:  Tweet 

View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code

Home - Sources - Contact - Advanced Search Copyright © 2011 - 2024 WebNuz. All Rights Reserved.