Ionic 2 Backand Starter

The Frameworks

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

Back& is a Backend As A Service (BAAS) providing a relational database with a CRUD REST API, together with AWS Lambdas, Email and additional services.

Back& SDK for Angular.js 2 enables Angular apps to use Back&. The SDK provides to the developer on JavaScript promises for the various CRUD actions.

Ionic 2

The second release of Ionic (which is the current release) is Angular JS 2.

Ionic 2 Back& Starter

The starter, Ionic 2 Backand Starter, is an Ionic 2 starter, integrating the Back& SDK.

app.module.ts

 import { BackandService } from '@backand/angular2-sdk';

 @NgModule({
   declarations: [
     MyApp,
     LoginPage,
     SignupPage,
     CrudPage,
     TabsPage
   ],
   imports: [
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [ IonicApp ],
   entryComponents: [
     MyApp,
     LoginPage,
     SignupPage,
     CrudPage,
     TabsPage
   ],
   providers: [ BackandService ]
 })
 export class AppModule {}

app.component.ts

 import { BackandService } from '@backand/angular2-sdk'

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

   constructor(platform: Platform, private backand:BackandService) {
     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();
       backand.init({
         appName: <your app name>,
         signUpToken: <your signup token>,
         anonymousToken: <your anonymous token>,
         runSocket: true,
         mobilePlatform: 'ionic'
       });
       this.rootPage = TabsPage;
     });
   }
 }

CRUD Actions

Create

 public postItem() {
     let item = {
       name: this.name,
       description: this.description
     };

     if (item.name && item.description) {
       this.backand.object.create('todo', item)
       .then((res: any) => {
         // add to beginning of array
         this.items.unshift({ id: null, name: this.name, description: this.description });
         this.name = '';
         this.description = '';
       },
       (err: any) => {
         alert(err.data);
       });
     }
   }

Read

   public getItems() {
    this.backand.object.getList('todo')
     .then((res: any) => {
       this.items = res.data;
     },
     (err: any) => {
       alert(err.data);
     });
   }

Filter

   public filterItems() {
     // set q to the value of the searchbar
     var q = this.searchQuery;

     // if the value is an empty string don't filter the items
     if (!q || q.trim() == '') {
       return;
     }
     else{
         q = q.trim();
     }

     let params = {
       filter: [
         this.backand.helpers.filter.create('name', this.backand.helpers.filter.operators.text.contains, q),
       ],
     }

     this.backand.object.getList('todo', params)
     .then((res: any) => {
       this.items = res.data;
     },
     (err: any) => {
       alert(err.data);
     });
   }