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

@capgo/capacitor-auto connects a Capacitor app to approved CarPlay and Android Auto template surfaces. Your app sends a small list template to the car display, and the car display sends selected actions back to JavaScript.

__CAPGO_KEEP_1__

Install and sync

npm install @capgo/capacitor-auto
npx cap sync

Send a template to the car

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

Listen for driver actions

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

Watch connection state

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 requirements

iOS CarPlay iOS

Android

Android Auto CarAppServiceAndroidX Car App Library template capability IOT 카테고리. 리뷰를 Android 설정 문서를 참조하십시오 Android Auto 카테고리가 필요하다면 앱에 추가 카테고리를 사용하십시오.

디자인 지침

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

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

복잡한 흐름은 폰 UI에서 유지하고 carAction 이벤트를 원래 인텐트 트리거로 사용하십시오.

capgo/capacitor-auto를 계속 사용하십시오.

만약에 @capgo/capacitor-auto를 사용하고 있다면 native media와 interface behavior를 계획하기 위해 @capgo/capacitor-auto와 연결하세요. @capgo/capacitor-auto의 implementation detail을 위해 Getting Started Getting Started의 implementation detail을 위해 @capgo/capacitor-live-activities를 사용하세요. native capability을 위해 @capgo/capacitor-live-activities를 사용하세요. @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 implementation detail을 위해 @capgo/capacitor-video-player를 사용하세요. 자연스러운 기능을 사용하는 데 @capgo/capacitor-비디오 플레이어를 사용하세요.

자동

자동화 튜토리얼