How to use Parse SDK with Ionic2 apps tutorial


#1

I’m working on Ionic2 app with Parse server backend (new open source Parse backend). It was my first time connecting these 2 things together. It’s quite simple task when you know what you’re doing, but it took me some time to figure out how to make it work. And while I was trying to put all different pieces of information I’ve found all over the internet together, I was thinking it would be nice to have a step-by-step tutorial. But I couldn’t find any. So I wrote one. You can find it here:

http://alkon-tech.com/how-to-use-parse-javascript-sdk-with-ionic2-apps/

Enjoy!


#2

This does not work for me. But I found another solution.
After installing the package and the typings, I opened the index.js of the node-module ionic-gulp-scripts-copy and added 'node_modules/parse/dist/parse.min.js' to the defaultSrc array.
Then, in my index.html, I included the script above the cordova.js.
Now I just need to declare var Parse: any; in every Component I want to use the SDK in.
For example, in my app.ts:

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

import{LoginPage} from './pages/login/login';
declare var Parse: any;

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {

  private rootPage: any;
  private parse;
  constructor(private platform: Platform) {
    //this.rootPage = TabsPage;
    this.rootPage = LoginPage;
    platform.ready().then(() => {
      console.log("Platform ready!");
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();

      Parse.initialize('myStartUp', 'someKey');
      Parse.serverURL = 'http://localhost:1337/parse';
    });
  }
}

ionicBootstrap(MyApp);

I do not think this is the way it should be used, but in the end I can use the SDK pretty easy and without much lines of implementation code.


#3

@philste, Can you please provide more details? What exactly didn’t work? Thanks.


#4

There is no node-modules/parse/node_modules/ws folder and var Parse = require('parse/node'); does not work, because require is unknown.


#5

I’m not sure why node-modules/parse/node_modules/ws doesn’t exist in your environment. It definitely exists in mine.

require is unknown because you write in TS. My example is in JS. I should elaborate it better.

In any case, thank you for your feedback.


#6

My parse folder consists of a lib and a dist folder, but no node_modules folder.


#7

I think I figured it out. You are, most probably, using the newer version of Parse SDK. I wrote by blog post some time ago for the latest version at that time, which was 1.0.1. Now it’s 1.5.0. What version do you have?


#8

In my package.json it says 1.9.1


#9

Really? Interesting. Because npm web site says the latest version is 1.5.0:

https://www.npmjs.com/package/parse-sdk

And this is exactly what I have in my package.json if I install it from scratch.

How do you install it?


#10

Okay I think i know what the point is. I installed the package “parse” and not “parse-sdk”.


#11

It explains difference in versions. Anyway, I’m trying to figure out how to install sdk 1.5.0 with Ionic2. I’ll update my blog post when it works and will post it here.


#12

@skydive did you manage to get the current version running?


#13

No. Spent entire day on it, but didn’t manage to make it work so far. I’m planning to get back to it later though, when I have more time.


#14

Did you guys get this working in the end?


#15

@danielbenton32 Yes.

Please, see my comment here:

Best regards.


#16

It worked for me after some changes:
1-(cd node-modules/parse/node_modules/ws) this returned undefined location so I didnt cd to that location and preformed the othere two npm installs in the main project directory.
2-changed var Parse = require(‘parse/node’) to import {Parse} from ‘parse’;
3-changed Parse.initialize(‘your-app-name’,‘unused’, ‘master-key’); to Parse.initialize(‘appid’);
installed google chrome cross site origin enabler
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Finally It worked :grinning:
Hope that helped you.


#17

@imspikey Method Works for Latest Version 1.9.2

Did 3 steps he mentioned above. But didn’t installed plugin. Anyway Cross origin works.


#18

It can be done using npm install parse --save in your project directory

Then import parse using

import { Parse } from 'parse';

It is better to create an parse provider.

You can use this starter template as a guide. It is a simple GameScores application in ionic to get you started.

It shows how to create and read data from parse server. I also includes paging with ion-infinite-scroll scrolling.