Ionic 2 app with Parse backend


#1

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.


#2

this is a lot easier when you provide code…


#3

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!


#4

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


#5

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


#6

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.


#7

Did you find a portable solution yet?


#8

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


#9

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.


#10

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


#11

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.


#12

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


#13

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


#14

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?


#15

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.


#16

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).


#17

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?


#18

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


#19

@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.


#20

@florianbepunkt Please, see my comment here:

Best regards.