Erste Schritte

Installation

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge deinem KI-Tool die Capgo Skills mit folgendem Befehl hinzu:

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

Nutze anschließend diesen Prompt:

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

Wenn du ein manuelles Setup bevorziehst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

1. Paket installieren

   npm i @capgo/capacitor-auto

2. Native Projekte synchronisieren

   npx cap sync

3. Root-Car-Template festlegen

   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-Aktionen verarbeiten

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

5. Verbindungsstatus tracken

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

Quickstart

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

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

Beispiel: setRootTemplate

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

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

Beispiel: setState

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

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

Häufige Fehlerquellen

• Listener: Handles entfernen, wenn Screens unmounten.
• Native Sync: ausführen npx cap sync nach Plugin-Upgrades.
• Single Source of Truth: vertraue src/definitions.ts im GitHub Repo.

Fahrzeug-UIs unterliegen Richtlinien

CarPlay und Android Auto erlauben kein beliebiges WebView-Mirroring. Halte Fahrzeug-Aktionen kurz, fahrerfreundlich und passend zur von Apple oder Google genehmigten App-Kategorie.

Leerer Zustand

Setze emptyText wenn die Vorlage keine Zeilen enthält:

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

Bridge-Nachrichten senden

Nutze sendMessage für anwendungsspezifische native Bridge-Nachrichten:

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

Plattform-Setup

• Folge dem iOS-Setup Seite für CarPlay-Szenen und Entitlement-Hinweise.
• Folge dem Android-Setup Seite für die Android Auto-Kategorie und Manifest-Hinweise.

Weiter mit Getting Started

Wenn Sie ... verwenden Erste Schritte um die Arbeit an Native Plugins zu planen, verbinde es mit @capgo/capacitor-auto verwenden für die native Funktion bei der Verwendung von @capgo/capacitor-auto, Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails unter Plugins hinzufügen oder aktualisieren, und Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow bei Ionic Enterprise Plugin-Alternativen.