alexciesielski/parse-ionic2.md

## parse-ionic2.md

      
    Raw
  

              parse-ionic2.md
            
          
    Integrate Parse Javascript SDK with Ionic 2 Beta

1 Install dependencies


npm install parse --save
tsd install parse --save // if you use Typescript

2 Modify the 'scripts' task in gulpfile.js to this:

gulpfile.js
gulp.task('scripts', function(){
  return copyScripts(
   { src: [
     'node_modules/angular2/bundles/angular2-polyfills.js', 
     'node_modules/parse/dist/parse-latest.min.js'] 
   });
});

This ensures the parse-latest.min.js will be copied along with angular2-polyfills from your node_modules to the Ionic build folder.
3 Add the import to your index.html above cordova.js

index.html
<body>

  <!-- this Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- Parse SDK -->
  <script src="build/js/parse-latest.min.js"></script>
  <script>
    Parse.initialize("asapApp");
    Parse.serverURL = 'http://goasap.herokuapp.com/parse';
  </script>

  <!-- Google Maps -->
  <script src="http://maps.google.com/maps/api/js"></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/angular2-polyfills.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

4 Initialize Parse when platform ready

app.ts
initializeApp() {
    this.platform.ready().then(() => {
      // 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('asapApp');
      Parse.serverURL = 'http://goasap.herokuapp.com/parse';
      
    });
  }

You will need to add the following line in every file, where you will be using Parse SDK above the @App and @Component annotations, if you are using Typescript.
app.ts
import 'es6-shim';
import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';

declare var Parse: any;

@App({
      ...

5 Use the Parse SDK in your components

register(email: string, password: string, birthday?: any) {
    console.log('registering ' + email);
    var user = new Parse.User();
    user.set("username", email);
    user.set("email", email);
    user.set("password", password);

    // other fields can be set just like with Parse.Object
    user.set("birthday", birthday);

    user.signUp(null, {
      success: function (user) {
        console.log('success');
      },
      error: function (user, error) {
        // Show the error message somewhere and let the user try again.
        alert("Error: " + error.code + " " + error.message);
      }
    });
  }