가이드
Capacitor에서 Auto 사용 방법
@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 승인 entitlement이 필요합니다. 아래에 설명된 CarPlay scene 구성을 추가하고 iOS 설정 문서 를 참고하여 차량 UI를 Apple 승인 템플릿 내에서 유지하세요.
Android 요구 사항
Android Auto는 AndroidX Car App Library를 사용합니다. 이 플러그인은 CarAppService을(를) 포함하며 template capability를 선언하고 기본적으로 IOT 카테고리를 사용합니다. 아래를 검토하세요. Android 설정 문서 앱이 다른 Android Auto 카테고리를 필요로 하는 경우.
디자인 가이드
짧고 예측 가능한 작업을 위해 차량 화면을 사용하세요:
- 상태 표시줄
- 원탭 명령
- 운전 중 안전한 확인
- 전화 앱에서 간단한 상태 전달
복잡한 플로우를 전화 UI에 유지하고 carAction 이벤트를 네이티브 인텐트 트리거로 사용하세요.
@capgo/capacitor-auto 사용에서 계속하기
사용 중이라면 @capgo/capacitor-auto 사용하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-auto @capgo/capacitor-auto의 구현 세부 사항은, 시작하기 Getting Started의 구현 상세 내용은 @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항은, 그리고 @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player. 사용하기에서의 네이티브 기능은