Zum Hauptinhalt springen
Zurück zu plugins
@capgo/capacitor-auto
Tutorial
@capgo/capacitor-auto

Auto

Verbinde Capacitor-Apps mit CarPlay und Android Auto-Vorlagen für die zweidirektionale Kommunikation im Auto

Anleitung

Tutorial zur Auto-Funktion

Auf Gerät testen

Laden Sie die Capgo-App herunter, dann scannen Sie die QR-Code code.

Auto-Plugin-Vorschau-QR code

Mit @capgo/capacitor-auto

@capgo/capacitor-auto verbindet eine Capacitor-App mit genehmigten CarPlay- und Android-Auto-Vorlagenoberflächen. Ihre App sendet eine kleine Liste von Vorlagen an den Fahrzeugdisplay, und der Fahrzeugdisplay sendet ausgewählte Aktionen zurück an JavaScript.

Es ist für sicherheitsrelevante, durch Richtlinien gesteuerte Workflows entwickelt. Es spiegelt Ihre WebView nicht in das Auto wider.

Installieren und synchronisieren

npm install @capgo/capacitor-auto
npx cap sync

Eine Vorlage an das Auto senden

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

Auf Fahrzeugaktionen lauschen

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

Verbindungszustand überwachen

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 Berechtigung für Ihre App-Kategorie. Fügen Sie die CarPlay-Szenenkonfiguration hinzu, wie sie in den iOS-Einrichtungsanleitungen beschrieben ist, und halten Sie Ihre Fahrzeug-UI innerhalb von Apple-genehmigten Vorlagen. __CAPGO_KEEP_0__ ist ein Placeholder für 'Capacitor' und __CAPGO_KEEP_1__ ist ein Placeholder für 'Capacitor'.

Android-Anforderungen

Android Auto verwendet die AndroidX Car App Library. Der Plugin enthält ein CarAppServiceerklärt die template Fähigkeit und setzt standardmäßig die IOT Kategorie fest. Ü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
  • Einzutasten
  • 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 weiter bei der Verwendung von @capgo/capacitor-auto

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto verwenden Using @capgo/capacitor-auto @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto Für die Implementierungsdetails in @capgo/capacitor-auto, for the implementation detail in @capgo/capacitor-auto, Für die Implementierungsdetails in Anleitung zum Starten, Verwendung von @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities Verwendung von @capgo/capacitor-auto für die native Fähigkeit in Verwendung von @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten und Verwendung von @capgo/capacitor-video-player für die native Fähigkeit in Verwendung von @capgo/capacitor-video-player.