Saving Time On Initial Backend

Ale Fernandes Antunes

Developer for Neon Roots

I want to share an alternative use I’ve found for Parse (http://www.parse.com). Among other things, the site offers you a fast way to attach backend to your web apps.

I am going to explain how to use their API to hook up the frontend part of a test application that we will be coding with a backend solution created by us on their servers. We will be using basic HTML, js, and the Parse dashboard on our example app.

The free plan from Parse.com allows for 30 requests per second and a file upload limit up to 128kb. I found it an efficient way of deploying interactive demos of your products. There are other uses for the platform as well, but this is the one I’ve found to be the most appealing.

How I choose to use Parse.com

Let’s say we want to present a site that deals with customers by using a simple page that saves them on a database and lists the registries created. It is kind of a cliché, but it covers the majority of the options you will need in this particular case.

First of all, head to http://www.parse.com and create a personal free account. Log in and go to the “Your apps” dialog. Here we need to create a new app:

backend

Your apps dialog

Once the app is created, click on the Core button that appears below the app box, and it will redirect you to the new app main dashboard:

backend

The app dashboard

As you can see, this frame looks a lot like any DB GUI management tool. You have Classes which serves as Parse’s name for tables. Each Class has Columns (attributes), and finally for each record, we will have a Row.

So far nothing new for the ones that are familiar with database/tables creation. If you are not used to this jargon, just think of Class as the umbrella term encompassing the entities. For this case there will be a class called Customer.

Our Customer has properties: name, age, and phone number. We will have to create a new Class (using the “+ Add Class” button) called Customer and add three columns to it (using the “+ Add Column” button):  ‘age’ and ‘phone number’ both being numeric and ‘name’ that will be a string.

backend

Creating the columns (name, age, phone number)

backend

Columns created

Note that we have other columns besides the ones that we’ve created, those core related columns which can be left for now.

For this example’s frontend we will be using the blank default template provided by Parse (as I said in the beginning you can also attach your own frontend). Click on your app’s dashboard and select Quickstart:

backend

Quickstart button

Once there, select Data, Web, and finally New Project (our purpose is to use Parse just to store our app’s data):

backend

We just want to store our app data

backend

For the interface select Web

Once done, you will be presented with the following frame:

backend

Downloading blank frontend template

Click on “Download the blank JavaScript/HTML5 project” and unzip it. This will make a folder called “sample” containing an index.html file along with a css sub-folder.

Open index.html and take a look at the JavaScript part:

Parse.initialize(“APPLICATION_ID”, “JAVASCRIPT_KEY”);

var TestObject = Parse.Object.extend(“TestObject”);
var testObject = new TestObject();
testObject.save({foo: “bar”}, {
success: function(object) {
$(“.success”).show();
},
error: function(model, error) {
$(“.error”).show();
}
});

There lies the “hocus-pocus”. The Parse.initialize(app_id, js_key) method call is actually connecting our data on Parse with this .html file. This will require our application credentials. Let’s take a look again at the install page:

backend

Downloading blank frontend template

You can copy the entire line and replace it on index.html:

Parse.initialize(“ltHuAIWBYqOaAtux7r4irruMHFMvBA3LDkgw6Q37”, “KkrW7gkgUaCfeKIxpXD1zArux7KOMEl8bGynMH1j”);

var TestObject = Parse.Object.extend(“TestObject”);
var testObject = new TestObject();
testObject.save({foo: “bar”}, {
success: function(object) {
$(“.success”).show();
},
error: function(model, error) {
$(“.error”).show();
}
});

Save the changes and open index.html in your browser. If everything is ok, you will be presented with the following result:

backend

Success page

Below is the full index.html I’ve coded for this example. There are explanatory comments included as well:

backend

backend

backend

Final thoughts

The usefulness of Parse lies at the beginning of a project when you need to find a fast way to come up with a basic backend solution, leaving time to focus fully on the frontend and visuals to provide potential customers with eye-candy.

After you have “hooked” the customer, then it’s time to build a more solid backend and worry about performance and other time consuming tasks that are essential to the project but less interesting to the non-programmer.