자동차용 앱 개발을 위한 @capgo/capacitor-auto

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

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

설치 및 동기화

npm install @capgo/capacitor-auto
npx cap sync

__CAPGO_KEEP_0__을 차량으로 보내기

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' },
        },
      ],
    },
  ],
});

__CAPGO_KEEP_0__에서 운전자의 동작을 듣기

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

__CAPGO_KEEP_0__ 연결 상태를 감시하기

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는 애플이 승인한 앱 카테고리에 대한 권한이 있는 앱이 필요합니다. CarPlay 시나리오 구성에 대한 설명을 iOS 설정 문서에서 및 차량 UI를 애플이 승인한 템플릿 안에 유지하세요.

Android 요구 사항

Android Auto는 AndroidX Car App Library를 사용합니다. 플러그인은 CarAppServicedeclare template 능력을 선언하고 기본적으로 IOT 카테고리 Android 설정 문서 Android Auto 카테고리가 필요하다면 앱에 추가하십시오.

디자인 지침

차량 표면을 사용하여 짧고 예측 가능한 액션을 수행하십시오.

상태 행
한 번 클릭 명령
운전자에게 안전한 확인
자동차 앱에서 단순한 상태 전달을 사용하십시오.

복잡한 흐름은 모바일 UI에서 유지하고 carAction 이벤트를 원래 의도 트리거로 사용하십시오.

@capgo/capacitor-auto를 사용하는 경우 계속하십시오.

__CAPGO_KEEP_0__를 사용하는 경우에만 __CAPGO_KEEP_1__를 사용하십시오. Using @capgo/capacitor-auto native UI 및 미디어를 계획하고 연결하기 위해 사용합니다. @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, Getting Started Getting Started Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

자동

자동차용 앱 개발 가이드