Using @capgo/capacitor-auto

@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.

Installieren und synchronisieren

Ein Template an das Auto senden

npm install @capgo/capacitor-auto
npx cap sync

Fahreraktionen hören

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

Verbindungszustand überwachen

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

iOS-Anforderungen

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

CarPlay erfordert eine von Apple genehmigte Berechtigung für Ihre App-Kategorie. Fügen Sie die CarPlay-Szenenkonfiguration, die in der

__CAPGO_KEEP_1__-auto iOS-Einrichtungsanleitungen und behalten Sie Ihre Fahrzeug-UI innerhalb von Apple-zugelassenen Vorlagen.

Android-Anforderungen

Android Auto verwendet die AndroidX Car App Bibliothek. Der Plugin enthält ein CarAppServiceerklärt die template Fähigkeit und setzt standardmäßig auf die IOT Kategorie. Überprüfen Sie die Android-Einrichtungsanleitungen wenn Ihre App eine andere Android Auto-Kategorie benötigt.

Designleitfaden

Verwenden Sie die Fahrzeugoberfläche für kurze, vorhersehbare Aktionen:

Statuszeilen
Einzellistenbefehle
Fahrer-sichere Bestätigungen
Einfache Zustandsübergabe vom Telefon-App

Halten Sie komplexe Flüsse in der Telefon-UI und verwenden Sie carAction Ereignisse als native Intent-Auslöser.

Halten Sie es einfach, @capgo/capacitor-auto zu verwenden

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto verwenden Verwenden Sie @capgo/capacitor-auto, um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto, um die Implementierungsdetails in @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto zu erhalten @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, Einfache Zustandsübergabe vom Telefon-App für die Implementierungsdetails in Getting Started, Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten und Mit @capgo/capacitor-video-Player für die native Fähigkeit in Mit @capgo/capacitor-video-Player.

Auto

Autotutorial