[Ionic] Native Integration

Posted on | In , |

Android Studio

In the project folder, install Cordova CLI

1
$ sudo npm i -g cordova

Add Android platform using Cordova

1
2
$ npm i -g
$ ionic cordova platform add android

(By calling ionic cordova you are allowing the Ionic CLI to “wrap” the Cordova CLI)

Compile all the “web assets” (e.g ts files to js, and sass to css) and gets them ready for action. And copy all the relevant files into the right places within the android directory.

1
ionic cordova prepare android

Open Android Studio, choose the option “Import Project(Gradle, Eclipse ADT, etc.)”
OR File -> New…-> Import Project

Ionic DevApp

Run $ ionic serve -c

Open Ionic DevApp on mobile phone (ensure the phone uses the same network with computer).

Use Camera Plugin

Install

1
2
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

Add Module in module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

Taking the picture

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

const PLACEHOLDER_IMAGE: string = "/assets/imgs/placeholder.png";
const SPINNER_IMAGE: string = "/assets/imgs/spinner.gif";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  private image = PLACEHOLDER_IMAGE;

  constructor(public navCtrl: NavController, private camera: Camera) {
  }

  private takePic() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then((imageData) => {
      if (imageData) {
        this.image = 'data:image/jpeg;base64,' + imageData;
      } else {
        this.image = PLACEHOLDER_IMAGE;
      }
     }, (err) => {
        this.image = PLACEHOLDER_IMAGE;
     });
    this.image = SPINNER_IMAGE;
  }
}