DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Use Parse Core in Your Ionic Framework Mobile Apps
Content provided by Couchbase logo

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 user avatar by
Nic Raboy
·
Apr. 28, 15 · Tutorial
Like (0)
Save
Tweet
Share
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

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: