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

Automatique

Rejoindre les applications Capacitor avec les surfaces CarPlay et Android Auto pour la communication automobile bidirectionnelle

Guide

Tutoriel sur Auto

Tester sur appareil

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

Prévisualisation du QR du plugin Auto code

En utilisant @capgo/capacitor-auto

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

C'est conçu pour des workflows contrôlés et sûrs pour les conducteurs. Il ne reflète pas votre WebView dans la voiture.

Installer et synchroniser

npm install @capgo/capacitor-auto
npx cap sync

Envoyer un modèle à 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);
  }
});

Vérifier 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 entretien d'approbation d'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 modèles approuvés par Apple.

Exigences d'Android

Android Auto utilise la bibliothèque AndroidX Car App Library. Le plugin inclut un CarAppServicequi déclare la template capacité, et se conforme par défaut à la IOT catégorie. Consultez les documents de configuration d'Android si votre application nécessite une autre catégorie Android Auto. Conseils de conception

Utilisez la surface de la voiture pour des actions courtes et prévisibles :

rangs de statut

  • commandes à un seul clic
  • confirmations sûres pour le conducteur
  • Exigences d'Android
  • Échange d'état simple entre l'application mobile

Conservez les flux complexes dans l'interface de l'appareil mobile et utilisez carAction les événements comme des déclencheurs d'intention natives.

Conservez la marche à suivre à partir de l'utilisation de @capgo/capacitor-auto

Si vous utilisez l'utilisation de @capgo/capacitor-auto pour planifier le comportement de médias et d'interface natives, connectez-le avec @capgo/capacitor-auto pour les détails d'implémentation dans @capgo/capacitor-auto, Prise en main pour les détails d'implémentation dans Prise en main, l'utilisation de @capgo/capacitor-live-activités pour la capacité native dans l'utilisation de @capgo/capacitor-activités-en-vivre-temps @capgo/capacitor-activités-en-vivre-temps pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre-temps, et L'utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans l'utilisation de @capgo/capacitor-joueur-de-videos.