Primeros pasos

Instalación

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

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

Luego usa el siguiente prompt:

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

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

1. Instala el paquete

   npm i @capgo/capacitor-auto

2. Sincronizar proyectos nativos

   npx cap sync

3. Configura la plantilla base del coche

   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. Gestiona las acciones del coche

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

5. Rastrea el estado de conexión

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

Inicio rápido

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

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

Ejemplo: setRootTemplate

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

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

Ejemplo: setState

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

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

Errores comunes

• Listeners: elimina los handles cuando se desmonten las pantallas.
• Sync nativo: ejecuta npx cap sync tras actualizar los plugins.
• Fuente de verdad: confianza src/definitions.ts en el repo de GitHub.

Las interfaces de coche están sujetas a políticas

CarPlay y Android Auto no permiten el mirroring arbitrario de WebViews. Mantén las acciones en el coche breves, seguras para el conductor y alineadas con la categoría de app aprobada por Apple o Google.

Estado vacío

Configurar emptyText cuando la plantilla no tiene filas:

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

Enviar mensajes al bridge

Usa sendMessage para mensajes del bridge nativo definidos por la app:

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

Configuración de la plataforma

• Sigue la Configurar iOS página con notas sobre escenas y permisos de CarPlay.
• Sigue la Configuración de Android página para la categoría Android Auto y notas del manifiesto.

Continúa desde Getting Started

Si estás usando Primeros pasos para planificar el trabajo con plugins nativos, conéctalo con Uso de @capgo/capacitor-auto para la capacidad nativa en Uso de @capgo/capacitor-auto, Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, y Alternativas a plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas a plugins de Ionic Enterprise.