ionic framework week 8 การใช้ native plugin

native plugin คือการทำให้ ionic ที่เราเขียนสามารถทำงานกับอุปกรณ์ต่างๆ ได้โดยใช้ plugin ของ ionic เองเช่น การควบคุมการสั่งงานกล้อง การสั่งให้อุปกรณ์เปิดปิดเสียง สั่งสั่น ควบคุมการเข้าถึง fingerprint ฯลฯ

ตัวอย่างการใช้งาน nativeplugin เช่น native vibration สั่งให้เครื่องสั่น (ต้องทดสอบกับเครื่อง device จริง)

link plugin https://ionicframework.com/docs/native/vibration

เข้าไปในโฟลเดอร์ของเราแล้วพิมพ์ cmd แล้วพิมพ์ ionic start week8_nativeaudio blank
cd week8_nativeaudio หลังจากนั้นจะต้อง add plugin
ionic cordova plugin add cordova-plugin-nativeaudionpm
install @ionic-native/native-audio
หลังจากนั้นเปิด visual studio code เปิดโฟลเดอร์ week8_nativeaudio เพื่อแก้โปรเจ็ค
หาไฟล์ audio มาวางที่ week8_nativeaudio/src/assets (สามารถดาวโหลดไฟล์เพลงจาก youtube ไปที่ youtube creator แล้วจะมีเพลงให้ดาวโหลด )

home.page.ts

import { Component } from '@angular/core';
import { Vibration } from '@ionic-native/vibration/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  audio:any;
  constructor(private vibration: Vibration) {
    this.audio=new Audio(); //ใช้งาน audio Load มาเก็บไว้ในเมมโมรี่ก่อน play
    this.audio.src='assets/Then_A_Left_Turn.mp3';
    this.audio.load();
  }
  
  onClick(){
    this.vibration.vibrate(1000);//เปิดสั่น 1 วินาที
    this.audio.play();//สั่งให้เล่นเพลง
  }
  onStop(){
    this.audio.pause();//สั่งให้เพลงหยุด
    this.audio.currentTime=0;//สั่งให้กลับไปเริ่มใหม่ต้นเพลง
  }

  
}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
<ion-button (click)="onClick()">เล่น</ion-button>
<ion-button (click)="onStop()">หยุด</ion-button>


</ion-content>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Vibration } from '@ionic-native/vibration/ngx';//เพิ่ม native plugin .ใส่ใน providers ด้านล่างด้วย

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Vibration,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}