Cordova > Advanced

Ionic integration

We know that many companies have chosen to develop their application with web technologies such as Ionic. Developing a hybrid app on Ionic may have a lot of advantage as compile for both platforms iOS and Android by writing a single javascript code. 

In this tutorial, we will show you how to integrate Batch inside an Ionic application.

Prerequisites

Batch Cordova is compatible with Cordova 8.0.0+, Cordova-iOS 4.5.0+ and Cordova-android 7.0.0+. The native OS versions supported are iOS 8+ (with Xcode 9+) and Android 4.0+.

This tutorial is based on:

  • Ionic cli: 4.0.0
  • Ionic-angular: 4.0.0

If you want to see a proper integration of the Batch SDK, you can take a look at our sample app.

1. Install the Batch Cordova SDK

First of all, install Batch Cordova SDK. Use the Ionic CLI to add the Batch plugin on your project:

ionic cordova plugin add com.batch.cordova

2. Generating the Batch service file

Once you have added the plugin. The Ionic CLI tool will allow us to quickly and easily generate a service file for our project.

 Run the following command in your terminal within your Angular project folder.

ionic generate serivce batch/batch

If your project run on other Ionic framework, please use this command:

ionic generate provider batch

This command will create a new folder called Batch and a new service file. 

3. Working in the Batch service file

Then open up the file, located at: /src/app/batch/batch.service.ts and add this following quick code.  When you created your Batch account as part of Cordova developpement , you received your API key that you must be integrated into your code:

import { Injectable } from "@angular/core";

declare var batch;

@Injectable({
  providedIn: "root"
})
export class BatchService {
  constructor() {}
  batchStarter() {
    batch.setConfig({iOSAPIKey: "KEY API IOS",androidAPIKey: "Key API Android"});
    batch.start();
    batch.push.registerForRemoteNotifications();
  }
}

This service file use the@Injectable()decorator, which means we can import it into other components and access its properties and methods.

4. Importing the Batch Service

Now, you have created your Batch service, you need to add it to the providers. 
Open up the file, located at: _/src/app/app.module.ts and add Batch Service with other services. _

import { BatchService } from "../app/batch/batch.service";

@NgModule({
  declarations: [AppComponent],

  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    StatusBar,
    SplashScreen,
    BatchService,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

5.Using the Batch service in our app.components.ts

The first step requires importing the Batch service at the top of the component. So, in app.component.ts:

import { BatchService } from '../app/batch/batch.service';

Next, within the constructor, we have to import it through dependency injection and call our service on plateform.ready():


export class MyApp {  
    rootPage: any = TabsPage;  

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, batchService: BatchService) {  
        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.  
            batchService.batchStarter();  
            statusBar.styleDefault();  
            splashScreen.hide();  
        });  
    }  
}

iOS integration

On iOS, you need to callbatch.push.registerForRemoteNotifications()every time your application is started. You can, however, delay the very first call to another place in your app as we created a service, so that the notification request popup is shown at a later date.

You can follow this official documentation from Ionic to deploy your app on iOS

Android Integration

On Android, Batch makes full use of Firebase Cloud Messaging.

In order to enable notifications, you will have to get the google-services.json file for your project. If you don't have this file yet, please follow the "Manually add Firebase" part of this documentation until you get it.

Once you've located the google-services.jsonfile, simply add it to your project root.
Your directory tree should look like that:

  • myapp
      | [...]
      | platforms/
      | plugins/
      | www/
      | config.xml
      | google-services.json    <--- This is where the file goes
      \ package.json

With that done, notifications will automatically work.

You can follow this official documentation from Ionic to deploy your app on Android

Important: Keep in mind that the Batch functionality doesn’t exist in the browser, so even if your application will build successfully, you need to test it on a real device.