antmrdevlabs/parse-ionic2.md

## parse-ionic2.md

      
    Raw
  

              parse-ionic2.md
            
          
    BASED ON https://gist.github.com/ciesielskico/f35a325d7509a6fe9178dc6377d97017 BY CIESIELSKICO
Integrate Backendless in Ionic 2 Beta (latest)

1 Install dependencies


npm install backendless --save

2 Add custom scripts task in gulpfile.js to this:

gulpfile.js
gulp.task('customScripts', function(){
  return copyScripts(
   { src: ['node_modules/backendless/libs/backendless.js'],
     dest: 'www/build/js'
   });
});

This ensures the backendless.js will be copied 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>

  <!-- Backendless SDK -->
  <script src="build/js/backendless.js"></script>
  <script>
    Backendless.initApp(application-Id, secret-key, version);
    Backendless.serverURL = "http://[IP ADDRESS]:8080/api";
  </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 Backendless 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();
      
      Backendless.initApp(application-Id, secret-key, version);
      Backendless.serverURL = "http://[IP ADDRESS]:8080/api";
      
    });
  }

You will need to add the following line in every file, where you will be using Backendless SDK above the @Component and @Injectable and  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 Backendless: any;

@App({
      ...

5 Use the Backendless SDK in your components

register(email: string, password: string, birthday?: any) {
    console.log('registering ' + email);
    var user = new Backendless.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);
      }
    });
  }