Cara Membuat Plugin sendiri untuk IONIC Framework

  1. Buat Proyek
ionic start ionic-how-to-create-cordova-plugin blank

Install Plugman

npm install -g plugman

2. Buat Cordova Plugin dengan  plugman

cd ionic-how-to-create-cordova-plugin
mkdir plugins_src
cd plugins_src
plugman create --name HelloWorld --plugin_id cordova-plugin-hello-world --plugin_version 0.0.1
cd HelloWorld
plugman platform add --platform_name android
plugman platform add --platform_name ios

Buat package.json:

plugman createpackagejson .

Dalam package.json akan otomatis dibuatkan seperti di bawah ini:

{
"name": "HelloWorld",
"version": "0.0.1",
"description": "HelloWorld",
"cordova": {
"id": "cordova-plugin-hello-world",
"platforms": [
"android",
"ios"
]
},
"keywords": [
"ecosystem:cordova",
"cordova-android",
"cordova-ios"
],
"author": "Sangkhim",
"license": "ISC"
}

Tambahkan plugin ke project:

cd ..
cd ..
ionic cordova plugin add plugins_src/HelloWorld

3. Cara menggunakannya pada ionic

declare var cordova: any;var success = function(result) {
alert(JSON.stringify(result, undefined, 2));
}var failure = function(result) {
alert(JSON.stringify(result, undefined, 2));
}cordova.plugins.HelloWorld.coolMethod({
_sMessage: "Hello World"
}, success, failure);

4. Buat plugin menjadi native di Ionic Native dengan membungkus Cordova plugin

Checkout:
https://github.com/ionic-team/ionic-native/

npm install
npm install @ionic-native/core --save
npm install --global gulp-cli

mkdir @ionic-native
gulp plugin:create -n @ionic-native/HelloWorld

Edit File:
@ionic-native/src/@ionic-native/plugins/hello-world

Promise Style

import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';
import { Injectable } from '@angular/core';@Plugin({
pluginName: 'HelloWorld',
plugin: 'cordova-plugin-hello-world',
pluginRef: 'cordova.plugins.HelloWorld',
repo: '',
platforms: ['Android', 'iOS'],
install: '',
})
@Injectable()
export class HelloWorld extends IonicNativePlugin {
@Cordova({
successIndex : 1,
errorIndex : 2
})
coolMethod(options: {}): Promise<any> {
return;
}
}

Observable Style

import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';@Plugin({
pluginName: 'HelloWorld',
plugin: 'cordova-plugin-hello-world',
pluginRef: 'cordova.plugins.HelloWorld',
repo: '',
platforms: ['Android', 'iOS'],
install: '',
})
@Injectable()
export class HelloWorld extends IonicNativePlugin {
@Cordova({
successIndex : 1,
errorIndex : 2,
observable: true
})
coolMethod(options: HelloWorldOptions): Observable<any> {
return;
}
}
export interface HelloWorldOptions {
_sMessage: string;
}

Build:

cd ionic-native
npm run build hello-world

Install:

cd ionic-how-to-create-cordova-plugin
npm install --save @ionic-native/hello-world

5. Cara menggunakan plugin yang sudah dibungkus ke native

app.module.ts

import { HelloWorld } from '@ionic-native/hello-world';
providers: [
  ...
  HelloWorld,
  ...
]

home.ts

import { HelloWorld } from '@ionic-native/hello-world';
constructor(..., public helloWorld: HelloWorld) {}

Promise Style

this.helloWorld.coolMethod({
_sMessage: "Hello World"
}).then((result) => {
alert(JSON.stringify(result, undefined, 2));
}, (err) => {
alert(JSON.stringify(err, undefined, 2));
});

Observable Style

const watch = this.helloWorld.coolMethod({
_sMessage: "Hello World"
}).subscribe((result) => {
alert(JSON.stringify(result, undefined, 2));
}, (err) => {
alert(JSON.stringify(err, undefined, 2));
});watch.unsubscribe();

Demikianlah tutorial singkat dari saya semoga bermanfaat, jangan lupa berkomentar ya

artikel ini referensi dari :

https://github.com/ionic-team/ionic-native/blob/master/DEVELOPER.md

https://medium.com/@sangkhim/build-your-first-cordova-plugin-for-ionic-native-38d29a170145

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *