ionic 하이브리드 앱 개발 - #6 ionic native

Ionic Native는 Cordova 플러그인  TypeScript 개발도구로써 Ionic 모바일 어플리케이션에 필요한 기본 기능을 손쉽게 추가 할 수 있습니다.

 

Promises 와 Observables

Ionic Native는 Promise 또는 Observable에서 플러그인 콜백을 통하여 모든 플러그인에 공통 인터페이스를 제공하고 네이티브 이벤트가 Angular로 변경 감지하도록 보장합니다.

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

class MyComponentOrService {

  constructor(private platform: Platform, private geolocation: Geolocation) {

    platform.ready().then(() => {

      // get current position
      geolocation.getCurrentPosition().then(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      const watch = geolocation.watchPosition().subscribe(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      // to stop watching
      watch.unsubscribe();

    });

  }

}

 

 

설치

Ionic Native를 앱에 추가하려면 다음 명령을 실행하여 관련 패키지를 설치하십시오.

npm install @ionic-native/core --save

 

사용법

필요한 플러그인 설치하려면 각 플러그인별 Ionic Native 패키지를 설치하십시오.

예를 들어, Camera Plugin을 설치하려면 다음 명령을 실행해야합니다.

npm install @ionic-native/camera --save

 

그런 다음 Ionic CLI를 사용하여 플러그인을 설치하십시오.

ionic cordova plugin add cordova-plugin-camera

 

 

 

앱 모듈에 플러그인 추가


플러그인 패키지를 설치 한 후 앱의 NgModule에 패키지를 추가하여야 합니다.

...

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

...

@NgModule({
  ...

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

댓글

주간 인기글

[부트스트랩] 소개와 사용 방법

[앱 디자인] 디자인 가이드 만들기 - 안드로이드

[앱 디자인] 디자인 가이드 만들기 - 아이폰

SPA(Sigle Page Applications) 란 무엇인가?

[AWS] Windows 에서 Linux 인스턴스 연결을 위한 PuTTY 사용방법