@capgo/capacitor-자동을 사용하여

@capgo/capacitor-auto connects a 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를 사용합니다. 플러그인은 CarAppService을 선언하고 template 카테고리에서 기본값을 설정합니다. IOT 카테고리 다른 Android Auto를 사용해야 하는 경우 설정 문서를 검토하세요. 디자인 지침

차량 표면을 사용하여 짧고 예측 가능한 동작을 사용하세요:

상태 행

한 번에 클릭하는 명령
운전자의 안전한 확인
driver-safe confirmations
__CAPGO_KEEP_0__-__CAPGO_KEEP_1__에서 단순한 상태 전달을 핸드 오프합니다.

__CAPGO_KEEP_0__에서 복잡한 흐름을 유지하고 carAction __CAPGO_KEEP_0__에서 이벤트를 사용하여 네이티브 인텐트 트리거로.

Keep going from Using @capgo/capacitor-auto

__CAPGO_KEEP_0__-auto를 사용 중이라면 Using @capgo/capacitor-auto __CAPGO_KEEP_0__-auto의 구현 세부 정보에서 __CAPGO_KEEP_0__-auto를 사용하세요. @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, __CAPGO_KEEP_0__-live-activities를 사용하세요. __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities Capgo의 @capgo/capacitor-live-활동을 위한 원시 기능 @capgo/capacitor-live-활동 Capgo의 @capgo/capacitor-live-활동을 위한 구현 세부 사항 Capgo의 @capgo/capacitor-비디오 플레이어를 사용 Capgo의 @capgo/capacitor-비디오 플레이어를 위한 원시 기능

자동

자동 튜토리얼