Use Parse Core In Your Ionic Framework Mobile Apps

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:

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:

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 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:

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:

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:

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.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • sidali
  • aaronksaunders

    For those that want to give Parse a try… Complete solution with parse : https://github.com/aaronksaunders/dcww and starter template for using parse: https://github.com/aaronksaunders/parse-starter-ionic

  • Simon Taylor

    I have build my whole app using Parse as my backend and have used both JS and REST however most recently scrapped ALL my JS code and use purely REST. How I incorporate this into a factory and allow for queries etc etc can be seen in this SO question and answer.

    http://stackoverflow.com/questions/29707386/angular-parse-rest-factory-variables

    P.S – thanks for everything Nic I have learned a lot from your posts and many of your techniques are implemented in my app.

  • alexsuch

    Nice article. What about push notifications? Any nice wrapper for iOS & Android?

    • Please direct any tutorial requests to my Twitter @nraboy. I try to keep article comments relevant to the article so other readers don’t get confused.

      Thanks,

    • Jairo Sanches

      For Push Notifications, I use this:
      https://apps.ionic.io/

      Very nice! Works for IOS and Android.

  • Ayu Kusumaningtyas

    Thank you for your article. It’s help me.
    But, how about send and receive push notification?

  • Benoy Prakasan

    Goof one. Gave me a good idea about ionic and parse 🙂

  • very good… thanks!

  • Hey @nicraboy:disqus love the tutorials, one question, when mixing Ionic + Parse, do you think is best to work with the JS SDK or go full API REST?

  • That’s really neat, thanks a lot!

  • Taher

    thanks
    how can i use live query in my ionic project?

  • Itacolomy Mariano

    WHY MY ng-click DON’T WORKING?

    Criar conta

    BELOW MY index.html

    <!–

    –>

    AND BELOW MY App.js

    // Ionic Starter App

    // angular.module is a global place for creating, registering and retrieving Angular modules
    // ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
    // the 2nd parameter is an array of ‘requires’
    angular.module(‘starter’, [‘ionic’])

    .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    //Ita – 22/02/2017 – Primeiro Parâmetro(‘APPLICATION_ID’), Segundo Parâmetro (JAVASCRIPT_KEY’)
    Parse.initialize(‘USiqtSJIIvfWQwbmDyNsoXsrbTMWmCglaUcKHLmn’, ‘IaIq7yPZU8vgrCwS1Q7Vee4vdL4ky5tNd2nqZfXw’);
    if(window.cordova && window.cordova.plugins.Keyboard) {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    });
    })

    example.controller(“ExampleController”, function($scope) {

    });

    $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(“senha”, params.senha);
    }
    if(params.firstname !== undefined) {
    query.equalTo(“username”, params.username);
    }
    }
    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(“username”) + ” ” + object.get(“senha”));
    }
    },
    error: function(error) {
    alert(“Error: ” + error.code + ” ” + error.message);
    }
    });
    };

    SOMEONE HELP ME PLEASE!
    I’M VERY NEW IN IONIC AND CORDOVA!