Prise en main

Installation

Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :

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

Utilisez ensuite le prompt suivant :

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

Si vous préférez une installation manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à chaque plateforme ci-dessous :

1. Installer le package

   npm i @capgo/capacitor-auto

2. Synchroniser les projets natifs

   npx cap sync

3. Définir le template racine de 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' },
           },
         ],
       },
     ],
   });

4. Gérer les actions de la voiture

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

5. Suivre 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);
   });

Démarrage rapide

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

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

Exemple : setRootTemplate

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

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

Exemple : setState

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

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

Erreurs courantes

• Écouteurs: supprimez les handles lors du démontage des écrans.
• Sync native : exécuter npx cap sync après les mises à jour du plugin.
• Source de vérité : fiez-vous src/definitions.ts au repo GitHub.

Les interfaces auto sont régies par des politiques

CarPlay et Android Auto n'autorisent pas le mirroring arbitraire de WebView. Gardez les actions liées à la voiture courtes, sécurisées pour le conducteur et conformes à la catégorie d'application approuvée par Apple ou Google.

État vide

Définissez emptyText lorsque le template n'a aucune ligne :

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

Envoyer des messages via le bridge

Utiliser sendMessage pour les messages bridge natifs définis par l'application :

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

Configuration de la plateforme

• Consultez la Configuration iOS page pour les notes sur les scènes CarPlay et les entitlements.
• Consultez la Configuration Android page pour la catégorie Android Auto et les notes sur le manifest.

Continuer depuis Getting Started

Si vous utilisez Prise en main pour planifier le travail sur les plugins natifs, connectez-l’à Utiliser @capgo/capacitor-auto pour la fonctionnalité native dans « Utiliser @capgo/capacitor-auto », Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Ajout ou mise à jour de plugins, et Alternatives aux plugins Ionic Enterprise pour le workflow produit dans Alternatives aux plugins Ionic Enterprise.