Memulai dengan Accelerometer

Panduan ini akan memandu Anda mengintegrasikan plugin Capacitor Accelerometer ke dalam aplikasi Anda.

Instalasi

Instal plugin menggunakan npm:

npm install @capgo/capacitor-accelerometer
npx cap sync

Konfigurasi Platform

iOS

Tidak diperlukan konfigurasi tambahan. Accelerometer selalu tersedia.

Android

Tidak diperlukan konfigurasi tambahan. Accelerometer selalu tersedia.

Web

Plugin menggunakan DeviceMotion API. Memerlukan HTTPS dalam production.

Penggunaan Dasar

Import Plugin

import { Accelerometer } from '@capgo/capacitor-accelerometer';

Mulai Monitoring

const startAccelerometer = async () => {
  await Accelerometer.start({
    interval: 100 // Update interval dalam milidetik
  });

  console.log('Accelerometer started');
};

Dengarkan Event Akselerasi

Accelerometer.addListener('accelerationChange', (data) => {
  console.log('X:', data.x);
  console.log('Y:', data.y);
  console.log('Z:', data.z);
  console.log('Timestamp:', data.timestamp);
});

Dapatkan Pembacaan Saat Ini

const getCurrentAcceleration = async () => {
  const reading = await Accelerometer.getCurrentAcceleration();
  console.log('Current acceleration:', reading);
};

Hentikan Monitoring

const stopAccelerometer = async () => {
  await Accelerometer.stop();
  console.log('Accelerometer stopped');
};

Contoh Lengkap

Berikut adalah contoh lengkap dengan deteksi goyang:

import { Accelerometer } from '@capgo/capacitor-accelerometer';

class AccelerometerService {
  private listener: any;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;
  private shakeThreshold = 15;

  async initialize() {
    await Accelerometer.start({ interval: 100 });

    this.listener = Accelerometer.addListener('accelerationChange', (data) => {
      this.handleAcceleration(data);
    });
  }

  handleAcceleration(data: any) {
    // Hitung delta
    const deltaX = Math.abs(data.x - this.lastX);
    const deltaY = Math.abs(data.y - this.lastY);
    const deltaZ = Math.abs(data.z - this.lastZ);

    // Periksa goyang
    if (deltaX > this.shakeThreshold ||
        deltaY > this.shakeThreshold ||
        deltaZ > this.shakeThreshold) {
      this.onShake();
    }

    // Update nilai terakhir
    this.lastX = data.x;
    this.lastY = data.y;
    this.lastZ = data.z;

    // Update UI
    this.updateDisplay(data);
  }

  onShake() {
    console.log('Device shaken!');
    // Trigger aksi goyang
  }

  updateDisplay(data: any) {
    console.log(`X: ${data.x.toFixed(2)} m/s²`);
    console.log(`Y: ${data.y.toFixed(2)} m/s²`);
    console.log(`Z: ${data.z.toFixed(2)} m/s²`);

    // Hitung magnitude
    const magnitude = Math.sqrt(
      data.x * data.x +
      data.y * data.y +
      data.z * data.z
    );
    console.log(`Magnitude: ${magnitude.toFixed(2)} m/s²`);
  }

  async cleanup() {
    if (this.listener) {
      this.listener.remove();
    }
    await Accelerometer.stop();
  }
}

// Penggunaan
const accelService = new AccelerometerService();
accelService.initialize();

// Cleanup saat selesai
// accelService.cleanup();

Memahami Pembacaan

Sumbu Akselerasi

• Sumbu-X: Kiri (-) ke Kanan (+)
• Sumbu-Y: Bawah (-) ke Atas (+)
• Sumbu-Z: Belakang (-) ke Depan (+)

Gravitasi

• Perangkat diam menunjukkan ~9.8 m/s² pada satu sumbu (gravitasi)
• Perangkat bergerak menunjukkan akselerasi ditambah gravitasi

Unit

• Diukur dalam meter per detik kuadrat (m/s²)
• Gravitasi = 9.8 m/s²

Kasus Penggunaan Umum

Deteksi Goyang

class ShakeDetector {
  private lastUpdate = 0;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;

  detectShake(x: number, y: number, z: number): boolean {
    const currentTime = Date.now();

    if (currentTime - this.lastUpdate > 100) {
      const deltaX = Math.abs(x - this.lastX);
      const deltaY = Math.abs(y - this.lastY);
      const deltaZ = Math.abs(z - this.lastZ);

      this.lastUpdate = currentTime;
      this.lastX = x;
      this.lastY = y;
      this.lastZ = z;

      return deltaX + deltaY + deltaZ > 15;
    }

    return false;
  }
}

Deteksi Kemiringan

class TiltDetector {
  getTiltAngles(x: number, y: number, z: number) {
    const roll = Math.atan2(y, z) * (180 / Math.PI);
    const pitch = Math.atan2(-x, Math.sqrt(y * y + z * z)) * (180 / Math.PI);

    return { roll, pitch };
  }

  isDeviceFlat(z: number): boolean {
    return Math.abs(z - 9.8) < 1.0;
  }

  isDeviceUpright(y: number): boolean {
    return Math.abs(y - 9.8) < 2.0;
  }
}

Penghitung Langkah

class StepCounter {
  private steps = 0;
  private lastMagnitude = 0;
  private threshold = 11;

  processAcceleration(x: number, y: number, z: number) {
    const magnitude = Math.sqrt(x * x + y * y + z * z);

    if (magnitude > this.threshold &&
        this.lastMagnitude < this.threshold) {
      this.steps++;
      console.log('Steps:', this.steps);
    }

    this.lastMagnitude = magnitude;
  }
}

Praktik Terbaik

1. Pilih Interval yang Sesuai: Seimbangkan responsivitas dan masa pakai baterai

   • Gaming: 16-50ms
   • Fitness: 100-200ms
   • Umum: 200-500ms

2. Hapus Listener: Selalu bersihkan saat selesai

3. Filter Noise: Gunakan moving average untuk data yang lebih halus

4. Pertimbangkan Baterai: Polling frekuensi tinggi menguras baterai

5. Uji pada Perangkat Nyata: Simulator tidak memberikan data yang akurat

Tips Performa

Debouncing

class AccelerometerDebouncer {
  private timeout: any;

  debounce(callback: Function, delay: number) {
    return (...args: any[]) => {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => callback(...args), delay);
    };
  }
}

Smoothing Data

class AccelerometerFilter {
  private alpha = 0.8;
  private filteredX = 0;
  private filteredY = 0;
  private filteredZ = 0;

  filter(x: number, y: number, z: number) {
    this.filteredX = this.alpha * x + (1 - this.alpha) * this.filteredX;
    this.filteredY = this.alpha * y + (1 - this.alpha) * this.filteredY;
    this.filteredZ = this.alpha * z + (1 - this.alpha) * this.filteredZ;

    return {
      x: this.filteredX,
      y: this.filteredY,
      z: this.filteredZ
    };
  }
}

Langkah Selanjutnya

• Jelajahi API Reference untuk dokumentasi metode lengkap
• Lihat aplikasi contoh untuk penggunaan lanjutan
• Lihat tutorial untuk contoh implementasi lengkap