Lewati ke konten utama
menjadi.dev
Chapter 47.4 Mobile Lanjutan

Sensor Hardware: Accelerometer & Gyroscope

Akses sensor gerak device untuk fitur interaktif

Tujuan Pembelajaran

  • Memahami jenis sensor yang tersedia di device mobile
  • Mampu menggunakan expo-sensors untuk accelerometer dan gyroscope
  • Mengerti use case sensor di aplikasi nyata

Analogi

Diagram

      Accelerometer = Timbangan Digital:
- Deteksi percepatan sumbu X, Y, Z
- Kalau device diam → Z = 9.8 (gravitasi)
- Kalau device digoyang → X/Y/Z berubah cepat
- Cocok: step counter, shake gesture, tilt game

Gyroscope = Kompas 3D:
- Deteksi rotasi (roll, pitch, yaw)
- Lebih presisi dari accelerometer
- Cocok: AR, 360 viewer, stabilisasi kamera
    

Accelerometer seperti timbangan — deteksi percepatan linear. Gyroscope seperti kompas 3D — deteksi rotasi. Keduanya bekerja sama untuk motion tracking.

Penjelasan Konsep

Device modern punya banyak sensor: accelerometer (percepatan), gyroscope (rotasi), magnetometer (kompas), barometer (tekanan udara), pedometer (langkah), light sensor (cahaya sekitar).

Accelerometer: mengukur percepatan di sumbu X (kiri-kanan), Y (depan-belakang), Z (atas-bawah). Dalam m/s^2. Saat device diam: X≈0, Y≈0, Z≈-9.8 (gravitasi). Use case: pedometer, deteksi jatuh, shake gesture, tilt-based game.

Gyroscope: mengukur kecepatan rotasi di sumbu X (roll), Y (pitch), Z (yaw). Dalam rad/s. Lebih presisi untuk tracking orientasi. Use case: AR/VR, 360 photo viewer, kamera stabilisasi.

Setup: npx expo install expo-sensors. API: Accelerometer.addListener(callback) — subscribe ke data accelerometer. Gyroscope.addListener(callback) — subscribe ke gyroscope.

Update interval: Accelerometer.setUpdateInterval(100) — dalam milidetik. 100ms = 10Hz. Semakin cepat, semakin responsif tapi semakin boros baterai.

Combining sensors: accelerometer + gyroscope + magnetometer = sensor fusion. Gunakan library seperti react-native-sensors untuk data yang sudah difilter (Kalman filter, complementary filter).

Common pattern: useEffect subscribe sensor, cleanup di return. Simpan data di useRef (bukan useState) untuk menghindari re-render setiap sensor tick.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami jenis sensor yang tersedia di device mobile., mampu menggunakan expo-sensors untuk accelerometer dan gyroscope., dan mengerti use case sensor di aplikasi nyata. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Sensor Hardware, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Accelerometer seperti timbangan — deteksi percepatan linear. Gyroscope seperti kompas 3D — deteksi rotasi. Keduanya bekerja sama untuk motion tracking. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Accelerometer.addListener untuk subscribe. Update interval 100ms = 10Hz. Cek magnitude untuk deteksi shake. sub.remove() di cleanup.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx
import { Accelerometer } from "expo-sensors";
import { useEffect, useState } from "react";
import { View, Text } from "react-native";

export default function ShakeDetector() {
  const [data, setData] = useState({ x: 0, y: 0, z: 0 });

  useEffect(() => {
    const sub = Accelerometer.addListener(setData);
    Accelerometer.setUpdateInterval(100);
    return () => sub.remove();
  }, []);

  const isShaking = Math.abs(data.x) > 1.5 || Math.abs(data.y) > 1.5 || Math.abs(data.z) > 1.5;

  return <Text>{isShaking ? "DIKOCOK!" : "Diam"}</Text>;
}

Penjelasan Kode

Accelerometer.addListener untuk subscribe. Update interval 100ms = 10Hz. Cek magnitude untuk deteksi shake. sub.remove() di cleanup.

Prompt AI

Buat gesture-based scroll: user miringkan device ke depan → konten scroll ke bawah. Miringkan ke belakang → scroll ke atas. Gunakan accelerometer dengan smooth interpolation dan sensitivity adjustment.

Pertanyaan Reflektif

Apa fitur paling keren yang bisa kamu pikirkan dengan sensor device? Game? Fitness? AR? Pilih satu dan pikirkan implementasinya.