Use Parse Core in Your Ionic Framework Mobile Apps

This time I am going to discuss how to store data using Parse, a Facebook company, and retrieve data from the cloud.

Nic Raboy

Apr. 28, 15 · Tutorial

Like (0)

Save

6.12K Views

It is time I talk about another cloud data storage option for Ionic Framework. Previously I had shown how to use the Dropbox Datastore API, Firebase, and PouchDB to store information remotely.

This time I am going to discuss how to store data using Parse, a Facebook company, and retrieve data from the cloud.

Let’s start by creating a fresh Ionic project to work with:

ionic start ParseProject blank
cd ParseProject
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

To use Parse Core in our project, we’ll need to have created an application in the Parse dashboard and download the JavaScript SDK. At this point, I’m going to assume you’ve done both.

Save the parse-1.3.5.min.js file (or whatever is the latest) to your www/js directory at the root of your Ionic Framework project. Inside your www/index.html file, make sure to include the Parse library between your <head> tags like so:

<script src="js/parse-1.3.5.min.js"></script>

Remember, your Parse version may be different than mine.

As of right now, I couldn’t find any nice AngularJS wrappers, so we’re going to go old school with plain JavaScript to get the job done.

Inside the $ionicPlatform.ready() method of your www/js/app.js file, add the following line of code:

Parse.initialize("APP_ID_HERE", "JAVASCRIPT_ID_HERE");

Parse Core can now be used throughout your project. Go ahead and create a new controller in your app.js file and make it look similar to the following:

example.controller("ExampleController", function($scope) {

    $scope.savePerson = function(firstname, lastname) {
        var PeopleObject = Parse.Object.extend("PeopleObject");
        var person = new PeopleObject();
        person.set("firstname", firstname);
        person.set("lastname", lastname);
        person.save(null, {});
    };

});

You can see in the above code we will be creating a new person object and saving the first and last name to it. This information gets saved directly to the Parse cloud.

Before we start playing around with our application, let’s add one more function to the controller. This time let’s add $scope.getPeople which will be responsible for selecting data from Parse:

$scope.getPeople = function(params) {
    var PeopleObject = Parse.Object.extend("PeopleObject");
    var query = new Parse.Query(PeopleObject);
    if(params !== undefined) {
        if(params.lastname !== undefined) {
            query.equalTo("lastname", params.lastname);
        }
        if(params.firstname !== undefined) {
            query.equalTo("firstname", params.lastname);
        }
    }
    query.find({
        success: function(results) {
            alert("Successfully retrieved " + results.length + " people!");
            for (var i = 0; i < results.length; i++) {
                var object = results[i];
                console.log(object.id + ' - ' + object.get("firstname") + " " + object.get("lastname"));
            }
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
};

Most of this was taken directly from the official Parse documentation. You can see that we prepare our PeopleObject and check to see if any parameters were passed into the function. If parameters were passed, we are going to use them as query conditions. If you’re familiar with SQL, it would be more like the where clause in the query. We are then going to find all records based on our criteria and print them out to the console.

Now let’s make a simple front-end to go with this. In your www/index.html file, add the following code to your <ion-content>tags while replacing them:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="savePerson('Nic', 'Raboy')">Save Nic Raboy</button>
    <button class="button" ng-click="savePerson('Maria', 'Campos')">Save Maria Campos</button>
    <button class="button" ng-click="savePerson('Bruce', 'Raboy')">Save Bruce Raboy</button>
    <button class="button" ng-click="getPeople()">Print All People</button>
    <button class="button" ng-click="getPeople({lastname: 'Raboy'})">Print All Raboys</button>
</ion-content>

Notice we don’t have much depth to our design. We just have three buttons for inserting data into Parse and two buttons for querying data from Parse.

There is significantly more to the Parse JavaScript SDK, such as file storage or integrating with Facebook. I wanted to stick strictly to data storage to compliment my other tutorials on the topic. It is always nice to have options when making a decision for data storage.

A video version of this article can be seen below.

Comments