Intro to Parse in web apps with JavaScript

Parse.com is a Backend as a Service solution providing data services & SDKs for various platforms. Let's have an intro of Parse & make a ToDo app with it.

Intro to Parse in web apps with JavaScript
Intro to Parse in web apps with JavaScript

Hi All! Today we are going to cover some of the basics to use Parse Cloud data service in the web application with JavaScript.

Parse.com is a Backend as a Service solution providing data services and SDKs for various platforms.

In addition to that it provides many additional services like Push Notifications, Analytics, Social Integration etc. More info about Parse.com can be read at https://stackoverflow.com/tags/parse.com/info in a summary.

Alright; let's get back to the thing, Parse in web apps with JavaScript. For this we are going to create a simple ToDo app with HTML, CSS and JavaScript.

Styling this app is your choice and we going to mainly concentrate on the web app i.e. integration of the Parse services in web app with JS. In JS we will be using jQuery for some of the event handling but its also not required at all; you can go with plain JavaScript and create a really nice and fully functioning ToDo application.

First things first; we gonna need an application created at Parse. For that signup is required; if not signed up, you do so here: https://www.parse.com/signup.

Then we can create basic app here: https://www.parse.com/apps/new and launch the quick-start guide from here: https://www.parse.com/apps/quickstart#parse_data/web/new.

Why quick-start? From here you can get your App ID and JS key very quickly. This ToDo app is also made by modifying the boilerplate code from there. So you can also download the boilerplate code and make the necessary amendments.

HTML is basic, which will have a input box enter todo text and a submit button. And finally a list to show the list of active and inactive tasks which will be generated by JS on initial read from Parse and on every data modification action.Code is as follows:

  • ParseToDo.js
  • ParseToDo.html
  • ParseToDo.css

Head Includes for the page will be Reset.css, jQuery and Parse’s JS kit.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.parsecdn.com/js/parse-latest.js"></script>

In the JS Code above; lets go parts of code:

Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

This will initialize the Parse app. Application ID and JS Key can be found in the app settings.

var ToDoObject = Parse.Object.extend("ToDo");

This line will initialize the Parse object ‘ToDo’, in other words a reference pointer or a Object prototype with Parse methods. This reference can be used to launch various Parse methods like creating objects, loading data, querying data etc.


var query = new Parse.Query(ToDoObject);

This will create a query reference from the Parse object reference. This query ref can be used to query/search data from Parse.


query.find({ 
  success: function(results) {...},
  error: function(error) {...} 
});

This above line will find the data in the Parse DB, and will load all of data which matched the certain criteria set by various methods like .get(...), .contains(...) etc. List of all available methods can be seen here: https://parse.com/docs/js/api/classes/Parse.Query.html.


var task = {
    text: $('#task').val(), 
    timeStamp: new Date(), 
    completed: false
};
var todo = new ToDoObject();
todo.save(task, { 
    success: function(results) {...},
    error: function(error) {...}
});

In above code, first we are creating a basic todo object from the form data. Secondly we have created a Parse object from the object reference we created before. Now in third part we are saving the todo object with data as the basic task object.


taskObjFromParse.get('completed');

This line has been used in functions addTaskToList and prepareTask. These functions are adding task to completed or incomplete task list and building the HTML for individual task respectively. This get method on any parse object will return the value associated with it.


Create your web apps with help of Parse and comment and share if you think this tutorial is helpful.

Demo  Download