Mit @capgo/capacitor-auto verbindet sich eine capgo-App mit genehmigten CarPlay- und Android-Auto-Vorlagenoberflächen. Ihre App sendet eine kleine Liste von Vorlagen an die Fahrzeuganzeige und die Fahrzeuganzeige 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.

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto connects a __CAPGO_KEEP_0__ 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

npm install @capgo/capacitor-auto
npx cap sync

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

Für Fahreraktionen lauschen

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ügen Sie der CarPlay-Szenenkonfiguration, die in den iOS-Einrichtungsdocs beschrieben ist, hinzu und halten Sie Ihre Auto-UI innerhalb von Apple-geprüften Vorlagen. Android-Anforderungen

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

und erklärt die CarAppServiceFähigkeit, und setzt standardmäßig auf die template capability, and defaults to the IOT Kategorie. Überprüfen Sie die Android-Einrichtungsanleitungen Wenn Ihre App 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 Ereignisse als native Intent-Auslöser.

Weitergehen von Verwendung @capgo/capacitor-auto

If Sie native Medien und Schnittstellenverhalten planen, verbinden Sie es mit Mit @capgo/capacitor-auto planen Sie native Medien und Schnittstellenverhalten um es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-auto zu verbinden Umsetzungsdetails in @capgo/capacitor-auto for the implementation detail in @capgo/capacitor-auto, Um sich mit der Implementierung zu vertraut machen Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities planen Sie native Aktivitäten Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities Umsetzungsdetails in @capgo/capacitor-live-activities Mit @capgo/capacitor-video-player planen Sie native Videoplayer Using @capgo/capacitor-video-player für die native Fähigkeit in Verwendung von @capgo/capacitor-Video-Player.

Auto

Tutorial zu Auto