Mit @capgo/capacitor-auto eine capgo-Anwendung mit genehmigten CarPlay- und Android-Auto-Vorlagenoberflächen verbindet. Ihre App sendet eine kleine Liste von Vorlagen an den Autobildschirm und der Autobildschirm sendet ausgewählte Aktionen zurück an 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.

Installieren und synchronisieren

Install and sync

npm install @capgo/capacitor-auto
npx cap sync

Ein Vorlage senden an das Auto

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

Für Fahreraktionen abhören

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

Verbindungszustand beobachten

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-Anforderungen

CarPlay erfordert eine von Apple genehmigte Zulassung für Ihre App-Kategorie. Fügten Sie die CarPlay-Szenenkonfiguration ein, wie sie in den iOS-Einrichtungsanleitungen beschrieben ist, und halten Sie Ihre Auto-UI innerhalb von Apple-gegenehmigten Vorlagen. Android-Anforderungen

Android Auto verwendet die AndroidX Car App Library. Der Plugin enthält eine

, die die CarAppServiceFühe für die template Kategorie. Öffnen Sie die IOT Für die Android-Einrichtungsanleitungen Wenn Ihre App noch eine weitere Android-Auto-Kategorie benötigt.

Designleitfaden

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

Statuszeilen
Einzeldruckbefehle
Fahrer-sichere Bestätigungen
Einfache Zustandsübergabe vom Smartphone-App

Bleiben Sie bei komplexen Flüssen im Smartphone-UI und verwenden Sie carAction Events als native Intent-Auslöser.

Bleiben Sie bei Using @capgo/capacitor-auto

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__ verwenden Mit @capgo/capacitor-auto für die Verbindung mit @capgo/capacitor-auto für die Implementierung in @capgo/capacitor-auto, Einstieg für die Implementierung in Einstieg, Mit @capgo/capacitor-live-activities für die native Fähigkeit in Mit @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierung in @capgo/capacitor-live-activities und Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player.

Auto

Tutorial zu Auto