Parse & JS: Mobile App platform

This entry is part 1 of 25 in the series Parse & Javascript

Parse, a Facebook owned company, provides a mobile platform for App developers.

Parse lets developers focus on creating unique & engaging apps on any platform.

Parse will take care of everything else your app needs, from the core of your app to analytics and push notifications.

Here in this series, we will learn about parse database and also how to use Javascript to access the database.

Parse & JS: Create the first app in Parse

This entry is part 2 of 25 in the series Parse & Javascript

To learn Parse, we can start with the QuickStart guide provided by Parse.

Parse is a facebook owned company and so to login to start, you can always use your facebook account.

Once you have login, you will be brought to your dashboard in Parse.

parse_dashboard

Click on Create New App on the top right hand corner of the page.

parse_newapp

As a first app, you might want to name your app as FirstApp.

After you have created your App, Parse will supply you with a bunch of keys that you need to put into your code.

For now, you need to take note of Application ID and Javascript Key.

Now, click on dashboard in Parse and you should be able to see your FirstApp.

first_app_parse

Parse & JS: Install the Parse Javascript SDK

This entry is part 3 of 25 in the series Parse & Javascript

Now that the FirstApp is created in Parse, you need to set up the SDK.

Now try to look for the web version of the SDK in Parse.com. The page that will guide you on downloading a Javascript project and installing the SDK to the code.

The guide from Parse will look similar to the page below.

first_app_sdk

Click on the Download the blank Javascript/HTML 5 project.  A zip file will be donwloaded to your PC.

Open the zip file and you will see an index.html file and 2 css file.

I have copied the index.html file into jsbin.com and set the path for the 2 CSS files.

<link rel=”stylesheet” href=”https://codecrawl.com/code/parse/css/reset.css”>
<link rel=”stylesheet” href=”https://codecrawl.com/code/parse/css/styles.css”>

Look for this line in index.html:  Parse.initialize(“APPLICATION_ID”, “JAVASCRIPT_KEY”);

You need to replace APPLICATION_ID and JAVASCRIPT_KEY.  You can find them by clicking on Settings->Application Keys as shown in the screenshot below.

first_app_keys

I have set up the FirstApp in jsbin.com, you can try the code here.

Try The Code

If you set up the SDK in your web server, you will see a page similar to this.

parse_result

If you look at Data Browser in FirstApp, you should see a record created in TestObject similar to the screenshot below.

test_object1

Parse & JS: Parse object

This entry is part 4 of 25 in the series Parse & Javascript

In parse, each App has its own application id and JavaScript client key that you apply to your web app. Your account on Parse can accommodate multiple Apps.

Storing data on Parse is built around Parse.Object. Each Parse.Object contains key-value pairs of JSON-compatible data.

<!doctype html>
<head>
    <title>My Parse App</title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src='http://www.parsecdn.com/js/parse-1.2.17.min.js'></script>
</head>

<body>

<div>
    <div style='display:none' class='error'>
        <h1>Failed to connect to Parse database</h1>
    </div>

    <div style='display:none' class='success'>
        <h1>Successfully connected to parse database and insert a record</h1>
    </div>
</div>

<script>
    Parse.initialize('5d3sro43zBGj8AMYqWND5bFYMzAan7f5P5euZm7M', 'hlRZZqAylA7Fmah4Kk6ma8WK7QCT4cHrxjafnnkI');
    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();
        }
    });
</script>

</body>
</html>
Try The Code

The name-value pair here is foo: ‘bar’ where foo is the column name and bar is the value.

parse_db

Parse & JS: Database table

This entry is part 5 of 25 in the series Parse & Javascript

parse_db

As in the above screenshot, the TestObject is a class in Parse.  In a normal database like MySQL, it will be called a table.  You can always add a class/table by clicking on+New Class.

<!doctype html>
<head>
    <title>My Parse App</title>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src='http://www.parsecdn.com/js/parse-1.2.17.min.js'></script>
</head>

<body>

<div>
    <div style='display:none' class='error'>
        <h1>Failed to connect to Parse database</h1>
    </div>

    <div style='display:none' class='success'>
        <h1>Successfully connected to parse database and insert a record</h1>
    </div>
</div>

<script>
    Parse.initialize('5d3sro43zBGj8AMYqWND5bFYMzAan7f5P5euZm7M', 'hlRZZqAylA7Fmah4Kk6ma8WK7QCT4cHrxjafnnkI');
    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();
        }
    });
</script>

</body>
</html>
Try The Code

The first time you run the above code, the class TestObject will be lazily created.  The first record foo: ‘bar’ will be inserted as well.

The second time you run the code, the second record foo: ‘bar’ will be inserted.