Aller directement au contenu principal
Retour aux plugins
@capgo/capacitor-auto
Tutoriel
@capgo/capacitor-auto

Auto

Rejoignez les applications Capacitor avec les surfaces de CarPlay et Android Auto pour une communication automobile bidirectionnelle

Guide

Tutoriel sur Auto

Tester sur appareil

Téléchargez l'application Capgo, puis scannez le QR code.

Prévisualisation QR du plugin automatique code

En utilisant @capgo/capacitor-auto

@capgo/capacitor-auto connecte une application Capacitor à des surfaces de template CarPlay et Android Auto approuvées. Votre application envoie une petite liste de template à l'affichage de la voiture, et l'affichage de la voiture envoie les actions sélectionnées vers JavaScript.

Il est conçu pour des flux de travail sûrs pour le conducteur, contrôlés par la politique. Il ne reflète pas votre WebView dans la voiture.

Installer et synchroniser

npm install @capgo/capacitor-auto
npx cap sync

Envoyer un template à la voiture

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

Ecouter les actions du conducteur

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

Regarder l'état de la connexion

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

Exigences iOS

CarPlay nécessite un droit d'entitlement approuvé par Apple pour votre catégorie d'application. Ajoutez la configuration de la scène CarPlay décrite dans les docs de configuration iOS et gardez votre interface de la voiture à l'intérieur des templates approuvés par Apple.

Exigences d'Android

Android Auto utilise la bibliothèque d'applications AndroidX Car App. Le plugin comprend un CarAppService, déclare la template capacité, et se déclare par défaut dans la IOT catégorie. Vérifiez les documents de configuration d'Android si votre application nécessite une autre catégorie d'Android Auto. Conseils de conception Utilisez la surface de la voiture pour des actions courtes et prévisibles : lignes de statut

commandes à un seul clic

confirmations sûres pour le conducteur

  • Android Auto utilise la bibliothèque d'applications AndroidX Car App. Le plugin comprend un
  • capacité, et se déclare par défaut dans la
  • catégorie. Vérifiez les documents de configuration d'Android si votre application nécessite une autre catégorie d'Android Auto.
  • simple state handoff from the phone app

Gardez les flux complexes dans l'interface de téléphone et utilisez carAction les événements comme des déclencheurs d'intention native.

Continuez à utiliser @capgo/capacitor-auto

Si vous utilisez Utilisez @capgo/capacitor-auto pour planifier le comportement de média et d'interface native, connectez-le avec @capgo/capacitor-auto pour les détails d'implémentation dans @capgo/capacitor-auto, Démarrage pour les détails d'implémentation dans Démarrage, Utilisez @capgo/capacitor-live-activities pour la capacité native dans l'utilisation de @capgo/capacitor-activités en direct, @capgo/capacitor-activités en direct pour le détail d'implémentation dans @capgo/capacitor-activités en direct, et En utilisant @capgo/capacitor-joueur de vidéo pour la capacité native dans l'utilisation de @capgo/capacitor-joueur de vidéo.