시작하기

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

그런 다음 아래 프롬프트를 사용하세요:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-auto` plugin in my project.

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

1. 패키지 설치

   npm i @capgo/capacitor-auto

2. 네이티브 프로젝트 동기화

   npx cap sync

3. 루트 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' },
           },
         ],
       },
     ],
   });

4. car 액션 처리

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

5. 연결 상태 추적

   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);
   });

빠른 시작

import { Auto } from '@capgo/capacitor-auto';

const result = await Auto.isAvailable();
console.log(result);

예시: setRootTemplate

import { Auto } from '@capgo/capacitor-auto';

await Auto.setRootTemplate({
  title: 'Hello from Capacitor',
  sections: [
    {
      items: [
        {
          id: 'id-123',
          title: 'Hello from Capacitor',
        },
      ],
    },
  ],
});

예시: setState

import { Auto } from '@capgo/capacitor-auto';

await Auto.setState({
  key: 'key-123',
  value: {},
});

자주 하는 실수

• 리스너: 화면이 언마운트될 때 핸들을 제거합니다.
• 네이티브 동기화: 실행 npx cap sync 플러그인 업그레이드 후.
• 신뢰할 수 있는 소스: 신뢰 src/definitions.ts GitHub 레포지토리에서.

차량용 UI는 정책의 통제를 받습니다

CarPlay와 Android Auto는 임의의 WebView 미러링을 허용하지 않습니다. 차량 내 동작은 간결하고 운전자의 안전을 고려해야 하며, Apple 또는 Google에서 승인한 앱 카테고리에 부합해야 합니다.

데이터 없음

설정 emptyText 템플릿에 행이 없는 경우:

await Auto.setRootTemplate({
  title: 'Garage',
  emptyText: 'No actions are available right now.',
  sections: [],
});

브릿지 메시지 전송

사용 sendMessage 애플리케이션 정의 네이티브 브릿지 메시지의 경우:

await Auto.sendMessage({
  type: 'status',
  payload: { online: true },
});

플랫폼 설정

• 다음 iOS 설정 CarPlay scene 및 entitlement 관련 참고 사항 페이지.
• 다음 Android 설정 Android Auto 카테고리 및 매니페스트 관련 안내 페이지입니다.

시작하기 다음 단계

사용 중이라면 시작하기 네이티브 플러그인 작업을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-auto 사용하기 @capgo/capacitor-auto 사용의 네이티브 기능에 대해서는, Capgo 플러그인 디렉토리 Capgo Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor 플러그인 구현 상세 내용에 대해서는, 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 상세 내용에 대해서는, Ionic Enterprise 플러그인 대안 Ionic Enterprise 플러그인 대안의 제품 워크플로우에 대해서는.