아이오닉 네이티브 API 사용방법

Ionic Native

아이오닉에서 Native 콜백이 Angular로 트리거하도록 보장하기 때문에
안드로이드, iOS 네이티브 API (Cordova/PhoneGap plugin) 사용을 편하게 사용할 수 있습니다.
사용방법 예제(Native Camera)

지원범위

android 4.4 이상, iOS8 이상

설치

1
$ npm install @ionic-native/core --save

1. Camera 플러그인 설치

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

2. app.module.ts 에 플러그인 추가

  • ./src/app/app.module.ts 파일에 추
    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
    import { BrowserModule } from '@angular/platform-browser';
    import { ErrorHandler, NgModule } from '@angular/core';
    import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
    import { HttpModule } from '@angular/http';
    import { MyApp } from './app.component';
    import { StatusBar } from '@ionic-native/status-bar';
    import { SplashScreen } from '@ionic-native/splash-screen';
    import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

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

    @NgModule({
      declarations: [
        MyApp,
      ],
      imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp),
        BrowserAnimationsModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        Camera // 추가
      ]
    })
    export class AppModule {}

3. 사용할 페이지(native.ts) 에 플러그인 추가

  • ./src/pages/native/native.ts
    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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { Camera, CameraOptions } from '@ionic-native/camera';
    import { LocalNotifications } from '@ionic-native/local-notifications';
    import { Toast } from '@ionic-native/toast';
    import { CallNumber } from '@ionic-native/call-number';
    import { Flashlight } from '@ionic-native/flashlight';

    /**
     * Generated class for the NativePage page.
     *
     * See https://ionicframework.com/docs/components/#navigation for more info on
     * Ionic pages and navigation.
     */

    @IonicPage()
    @Component({
      selector: 'page-native',
      templateUrl: 'native.html',
    })
    export class NativePage {

      constructor(public navCtrl: NavController
                  , public navParams: NavParams
                  , private camera: Camera
                  , private localNotifications: LocalNotifications
                  , private toast: Toast
                  , private callNumber: CallNumber
                  , private flashlight: Flashlight) {

      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad NativePage');
      }

      handleCamera(){
          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) => {
              // imageData is either a base64 encoded string or a file URI
              // If it's base64:
              //let base64Image = 'data:image/jpeg;base64,' + imageData;
              alert('ok');
          }, (err) => {
              // Handle error
              alert(err);
          });
      }

      handleNotification(){
          this.localNotifications.schedule({
              text: '노티!노티!노티!다',
              at: new Date(new Date().getTime()),
              led: 'FF0000',
              sound: null
          });
      }

      handleToast(){
          this.toast.show(`하하|호호|히히`, '5000', 'center').subscribe(
              toast => {
                  console.log(toast);
              }
          );
      }

      handleFlashlight(){
          this.flashlight.toggle();
      }

      handleCallNumber(){
          this.callNumber.callNumber("18001010101", true)
              .then(() => console.log('Launched dialer!'))
              .catch(() => console.log('Error launching dialer'));
      }
    }

실행

1
2
$ ionic cordova emulate ios --target iPhone-8
$ ionic cordova run ios --device

Reference