capgo/capacitor-자동을 사용하여

@capgo/capacitor-auto Capacitor 앱을 승인된 CarPlay 및 Android Auto 템플릿 표면과 연결합니다. 앱은 작은 템플릿 목록을 차량 디스플레이로 전송하고, 차량 디스플레이는 선택된 액션을 JavaScript로 다시 전송합니다.

운전자의 안전한 정책 제어 워크플로우를 위해 설계되었습니다. WebView를 차량 디스플레이에 반영하지 않습니다.

설치 및 동기화

npm install @capgo/capacitor-auto
npx cap sync

차량에 템플릿 전송

import { Auto } from '@capgo/capacitor-auto';

await Auto.setRootTemplate({
  title: 'Garage',
  sections: [
    {
      header: 'Doors',
      items: [
        {
          id: 'open-main-door',
          title: 'Open main door',
          subtitle: 'Tap to send the action to the phone app',
          payload: { doorId: 'main' },
        },
      ],
    },
  ],
});

운전자의 액션을 듣기

await Auto.addListener('carAction', async (event) => {
  if (event.id === 'open-main-door') {
    await openGarageDoor(event.payload?.doorId);
  }
});

연결 상태 감시

const status = await Auto.isAvailable();
console.log(status.available, status.connected, status.platform);

await Auto.addListener('connectionChanged', (event) => {
  console.log('Car connected:', event.connected, event.platform);
});

iOS 요구 사항

CarPlay는 앱 카테고리에 대한 Apple-approved 특권이 필요합니다. Apple-approved 템플릿 내부에 차량 UI를 유지하기 위해 CarPlay 시나리오 구성에 대해 설명된 iOS 설정 문서를 추가하세요. iOS 설정 문서 __CAPGO_KEEP_0__

Android 요구 사항

Android Auto는 AndroidX Car App Library를 사용합니다. 플러그인은 Android Auto 카테고리 중 하나를 선언하는 CarAppServicecapability을 포함하고 기본적으로 template category를 사용합니다. 앱이 다른 Android Auto 카테고리가 필요하다면 IOT Android 설정 문서를 검토하세요. 디자인 지침 차량 표면을 사용하여 짧고 예측 가능한 액션을 사용하세요:

상태 행

한 번 클릭 명령

운전자의 안전한 확인
Android Auto 카테고리
설정 가이드
휴대폰 앱에서 간단한 상태 전달

휴대폰 UI에서 복잡한 흐름을 유지하고 carAction 이벤트를 네이티브 인텐트 트리거로 사용하세요.

Keep going from Using @capgo/capacitor-auto

Capacitor-auto를 사용하고 계신가요? Using @capgo/capacitor-auto 네이티브 미디어 및 인터페이스 동작을 계획하려면 @Capacitor-auto와 연결하세요. @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, Capacitor-auto의 구현 세부 사항 Capacitor-live-activities를 사용하세요. Using @capgo/capacitor-live-activities Capgo의 @capgo/capacitor-live-활동을 위한 원시 기능 @capgo/capacitor-live-활동 Capgo의 @capgo/capacitor-live-활동을 위한 구현 세부 사항 Capgo의 @capgo/capacitor-비디오 플레이어를 사용하여 Capgo의 @capgo/capacitor-비디오 플레이어를 위한 원시 기능

자동

자동 튜토리얼