Ionic 2 app with Parse backend

Hello Community,

I’m using Parse Server as a back end (the open source version). I have native Android application that saves an object to the server’s DB. The object is really simple one, just a key-value pair. When Android application creates an object, it creates it as JSON object.

Now I want to retrieve the same object from an Ionic 2 app. In Ionic app I use JS Parse API to access back end. When an object is created in JS API it’s created as plain text object.

As a result I’m getting: 101 Object not found

It seems like what I need to do is to translate Parse plan text object in my Ionic app to Parse JSON object.

This is what I tried to do:

  1. According to the JS Parse documentation one of the methods of Parse.Object is toJSON(). I tried to apply this method in different combinations to the Parse object before creating query, but I always get an error: this.parse.Object.extend(…).toJSON is not a function

  2. I tried to apply standard JSON Api (i.e. JSON.stringify) to the Parse object. In this case I’m getting an error: ParseQuery must be constructed with a ParseObject or class name.

  3. I did very extensive search on internet and found nothing helpful.

Would appreciate any ideas on the matter.

Thank you.

1 Like

this is a lot easier when you provide code…

Here is my code:

import {Page, Platform} from ‘ionic-angular’;
import {ParseService} from ‘…/…/providers/ParseService’;

@Page({
templateUrl: ‘build/pages/home/home.html’,
providers: [ParseService]
})

export class HomePage {

static get parameters() {
return [[Platform], [ParseService]];
}

constructor(platform, parseservice) {
this.platform = platform;
this.parse = parseservice.PLib();

platform.ready().then(() => {
  console.log("Platform ready!")
  this.parse.serverURL = 'http://<server-ip>:1337/parse/';
  this.parse.initialize(<AppID>, '',<MasterKey>);
  this.testobj = this.parse.Object.extend("TestObject");
  this.query = new this.parse.Query(this.testobj);
  this.query.get("ikDtgMQT8q").then(
    function(results) {
      console.log("Successfully retrieved");
    },
    function(error) {
      console.log("Error: " + error.code + " " + error.message);
    }
  );
});

}
}

This is code for ParseService:

import {Injectable} from ‘angular2/core’;
var ParseLibrary = require(‘parse/index’);

@Injectable()
export class ParseService {
// parse;

constructor(){
    this.parse = ParseLibrary;
}
PLib() {
    return this.parse;
}

}

Thanks!

Isn’t Parse dying? Seems like you’d want to move away from it.

No really. There is an open source Parse Server now. And it seems to be kicking and thriving:

Bumping this thread - Parse open source continues to be a reliable backend for many Ionic apps to date. There is absolutely a foreseeable future for Parse in Ionic 2. I’m continually searching for a portable solution and will post here if I find something reliable.

1 Like

Did you find a portable solution yet?

Is there any guide on how to user parse server with ionic2 apps?

I have a blog post here: http://alkon-tech.com/how-to-use-parse-javascript-sdk-with-ionic2-apps/

But it’s not for the latest version of Parse Server. As I mentioned earlier in this thread, I didn’t manage to make it work with the latest version so far.

Did you made any progress since your last post above? I will try this week to get it running. Will paste my progress here.

Btw. I found this on SO: http://stackoverflow.com/questions/39581704/using-parse-as-a-module-in-angular2 in case it is of interest

No, unfortunately I didn’t have time to deal with this. Trying to upgrade to RC.0 now :unamused::sweat::confused:

Thanks for sharing the link. And if you manage, I’d be interested to see the results. I’ll have to deal with it at some point too.

Sure, I’m also stuck with another project right now, but I will have some time later this week to try and tackle this…

Ok. So far the only way I can get it to work is adding <script src="//www.parsecdn.com/js/parse-1.6.14.min.js"></script> to index.html and in my components use declare var Parse: any;

I also tried to follow the Ionic guide https://ionicframework.com/docs/v2/resources/third-party-libs/

Doing so I get no compiling errors but in console I get this error
Uncaught TypeError: Super expression must either be null or a function, not undefinedexports.default @ inherits.js:21(anonymous function) @ LiveQuerySubscription.js:129(anonymous function) @ LiveQuerySubscription.js:160createCommonjsModule @ component_factory_resolver.js:61(anonymous function) @ map.js:1(anonymous function) @ index.js:1

Okay, my solution is not working…

adding parse via to index.html only works with ionic serve but not on device. On device (ios) I get the error that Parse is not defined.

Has anyone found a way to make ionic work with parse?

I got parse working in both ionic serve and device. But only in app-script version v.0.0.30. Later ionic app-scripts versions, like 31 ~ 36, the script workaround doesn’t work.

Mhh…I have current app-script version. What works for me is changing

<script src="//www.parsecdn.com/js/parse-1.6.14.min.js"></script>

to

<script src="https://www.parsecdn.com/js/parse-1.6.14.min.js"></script>

At leats no I can emulate ios device (haven’t tried on real device though).

I don’t use parsecdn. I installed with npm and copy files do assets/scripts folder.

By the way, you should consider upgrading to v1.9.2.

Have you tested with ionic serve too?

Can you explain a bit what files you copied to where and how you included/imported/referenced them? That would help a lot.

@florianbepunkt Sure. But now I’m having some issues with the new build process.
As soon as I get this thing working I will share the steps.

@florianbepunkt Please, see my comment here:

Best regards.