@capgo/capacitor-auto를 사용하여

@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 특권이 필요합니다. CarPlay 시나리오 구성에 설명된 대로 CarPlay 시나리오 구성을 추가하십시오. iOS 설정 문서 자동차 UI를 Apple APPROVED 템플릿 안에 유지하세요.

Android 요구 사항

Android Auto는 AndroidX Car App Library를 사용합니다. 플러그인은 CarAppService을 선언하고 template 을 기본값으로 사용합니다. IOT 카테고리입니다. Android 설정 문서를 검토하세요. 만약 앱이 다른 Android Auto 카테고리가 필요하다면.

디자인 지침

자동차 화면에서 짧고 예측 가능한 액션을 사용하세요:

상태 행
한 번 클릭 명령
드라이버 안전한 확인
휴대폰 앱에서 상태 전달하기

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

Using @capgo/capacitor-auto

이 기능을 사용하고 계신가요? Using @capgo/capacitor-auto @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto와 연결하세요. @capgo/capacitor-auto의 구현 세부 정보 for the implementation detail in @capgo/capacitor-auto, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto Capacitor-Auto를 사용하여 시작하는 데 대한 구현 세부 정보를 참조하세요. 라이브 활동을 사용하는 @capgo/capacitor-live-activities 라이브 활동을 사용하는 @capgo/capacitor-live-activities에 대한 네이티브 기능을 참조하세요. @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and 라이브 활동을 사용하는 @capgo/capacitor-video-player 라이브 활동을 사용하는 @capgo/capacitor-video-player에 대한 네이티브 기능을 참조하세요.

자동

자동 튜토리얼