시작하기

1. 패키지 설치

   npm

   npm i @capgo/capacitor-shake

   pnpm

   pnpm add @capgo/capacitor-shake

   yarn

   yarn add @capgo/capacitor-shake

   bun

   bun add @capgo/capacitor-shake

2. 네이티브 프로젝트와 동기화

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. 플러그인 구성

   기본 사용 예제:

   import { Shake } from '@capgo/capacitor-shake';
   
   // Start listening for shake gestures
   await Shake.start();
   
   // Listen for shake events
   Shake.addListener('shake', () => {
     console.log('Device was shaken!');
     // Perform your action here
   });

   민감도 구성:

   // Configure shake sensitivity
   await Shake.start({
     threshold: 3.5 // Adjust sensitivity (default: 3.5)
   });

   iOS

   iOS에는 추가 설정이 필요하지 않습니다.

   Android

   Android에는 추가 설정이 필요하지 않습니다.

4. 흔들기 감지 중지

   // Stop shake detection when not needed
   await Shake.stop();
   
   // Remove specific listener
   const handle = await Shake.addListener('shake', () => {
     console.log('Shaken!');
   });
   handle.remove();

5. 구현 예제

   import { Shake } from '@capgo/capacitor-shake';
   import { App } from '@capacitor/app';
   
   export class ShakeService {
     private shakeListener: any;
   
     async initialize() {
       // Start shake detection
       await Shake.start({ threshold: 4.0 });
   
       // Add shake listener
       this.shakeListener = await Shake.addListener('shake', () => {
         this.handleShake();
       });
   
       // Clean up on app pause
       App.addListener('pause', () => {
         Shake.stop();
       });
   
       // Resume on app resume
       App.addListener('resume', () => {
         Shake.start({ threshold: 4.0 });
       });
     }
   
     private handleShake() {
       console.log('Shake detected!');
       // Show debug menu, refresh data, or trigger any action
     }
   
     async cleanup() {
       if (this.shakeListener) {
         this.shakeListener.remove();
       }
       await Shake.stop();
     }
   }

API 참조

메서드

start(options?: ShakeOptions)

흔들기 제스처 감지를 시작합니다.

매개변수:

• options (선택 사항): 구성 객체
  • threshold: number - 민감도 임계값 (기본값: 3.5)

stop()

흔들기 제스처 감지를 중지합니다.

addListener('shake', callback: () => void)

흔들기 이벤트에 대한 리스너를 추가합니다.

반환값: 리스너를 제거할 수 있는 핸들이 포함된 Promise

인터페이스

interface ShakeOptions {
  threshold?: number; // Shake sensitivity threshold
}

플랫폼 참고사항

iOS

• 기기의 가속도계를 사용하여 흔들기 제스처를 감지합니다
• 포그라운드와 백그라운드 모두에서 작동합니다 (앱에 백그라운드 권한이 있는 경우)

Android

• SensorManager를 사용하여 흔들기 이벤트를 감지합니다
• 특별한 권한이 필요하지 않습니다
• 앱이 포그라운드에 있을 때 작동합니다

일반적인 사용 사례

1. 디버그 메뉴: 기기를 흔들 때 개발자 옵션 표시
2. 피드백: 피드백 양식 또는 버그 리포트 트리거
3. 새로고침: 앱 데이터 새로고침 또는 캐시 삭제
4. 게임: 흔들기를 게임 컨트롤 메커니즘으로 사용
5. 실행 취소: 흔들어서 실행 취소 기능 구현

문제 해결

흔들기가 감지되지 않음:

• Shake.start()로 플러그인이 시작되었는지 확인하세요
• 임계값을 조정해 보세요 (낮을수록 더 민감함)
• 리스너가 올바르게 등록되었는지 확인하세요

너무 민감하거나 충분히 민감하지 않음:

• start() 옵션의 threshold 매개변수를 조정하세요
• 일반적으로 2.0 (매우 민감)에서 5.0 (덜 민감)까지의 값을 사용합니다