최근 Repro라는 애널리틱스 도구의 존재를 알았습니다. 뭐든지, 이벤트 뿐만이 아니고 동영상도 잡힐 수 있다고 하는 것.
조속히 ionic에서도 시도하려고 생각했습니다만, Repro의 Cordova 플러그인에 d.ts가 없었기 때문에, 모처럼이므로 ionic-native로 Repro의 TypeScript 래퍼를 만들어 보기로 했습니다.

만든 래퍼와 사용법

작성한 래퍼는 github에 올려 있습니다.
htps : // 기주 b. 이 m/scrp ℓ/레 p로

사용법은 github의 README에 대략 쓰고 있습니다만 잘 Repro를 움직이면 아래의 gif처럼 앱 조작의 모습을 동영상으로 확인할 수 있게 됩니다.


※화질 나쁘고 죄송합니다.

ionic-native 정보

ionic 공식 TypeScript 래퍼입니다. 각종 corodva 플러그인의 js를 TypeScript에서 호출하기 쉽게 한 것입니다. 일본 서비스의 것은 아직 적지만, 없을 때는 스스로 작성하는 것도 가능합니다.

ionic-native 개발자 가이드

만드는 방법

기본은 DevelopersGuide에 따라 만들어집니다. 먼저 ionic-native를 clone합니다.

git clone https://github.com/ionic-team/ionic-native.git
cd ionic-native

그런 다음 새 플러그인 템플릿을 만듭니다.

gulp plugin:create -m -n repro

위의 명령을 실행하면 "src/@ionic-native/plugins/repro/index.ts"가 완성됩니다.

index.ts를 열면 Plugin의 정보를 기재하는 곳이 있으므로, 이하와 같이 기재합니다.

@Plugin({
  pluginName: 'Repro',
  plugin: 'repro-cordova-plugin',
  pluginRef: 'Repro',
  repo: 'https://github.com/reproio/repro-cordova-plugin',
  platforms: ['Android', 'iOS']
})

그리고 나서는 오로지 원래가 되는 cordova-plugin-repro의 www/Repro.js에 기재되어 있는 함수를 써 갑니다. 대략 아래와 같은 느낌입니다.

  @Cordova()
  setup(key: string): Promise<any> {
    return;
  }

  @Cordova()
  setLogLevel(logLevel: any): Promise<any> {
    return;
  }

〜〜〜以下略〜〜〜

모두 쓰고 끝나면 빌드합니다.

npm run build

※이 때, lint로 화를 수 있습니다. 나는 인수와 형명 사이에 공백이 없다는 화가났다.

빌드가 끝나면 「dist/@ionic-native/repro」폴더가 생기므로 그 폴더를 repro를 사용하고 싶은 앱의 node_modules/@ionic-native 아래로 이동시키면 완성됩니다.

요약

・ionic-native에 원하는 플러그인의 래퍼가 없으면 스스로 만든다
・만드는 사태는 간단. 10분 정도면 만들 수 있습니다.
・Repro 편리