Menggunakan @capgo/capacitor-otomatis

@capgo/capacitor-auto menghubungkan sebuah aplikasi Capacitor ke permukaan template yang disetujui CarPlay dan Android Auto. Aplikasi Anda mengirimkan daftar template kecil ke layar mobil, dan layar mobil mengirimkan aksi yang dipilih kembali ke JavaScript.

Dibangun untuk alur kerja yang aman dan terkendali untuk pengemudi. Tidak memantulkan WebView Anda ke dalam mobil.

Pasang dan sinkronkan

npm install @capgo/capacitor-auto
npx cap sync

Kirim template ke mobil

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

Dengar aksi pengemudi

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

Lihat status koneksi

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

Persyaratan iOS

CarPlay memerlukan hak akses yang disetujui oleh Apple untuk kategori aplikasi Anda. Tambahkan konfigurasi layar CarPlay yang dijelaskan dalam dokumen pengaturan iOS dan jaga UI mobil Anda di dalam template yang disetujui oleh Apple. __CAPGO_KEEP_0__

Persyaratan Android

Android Auto menggunakan AndroidX Car App Library. Plugin ini termasuk sebuah CarAppService, menyatakan kemampuan template dan secara default menggunakan IOT kategori. Tinjau dokumen pengaturan Android jika aplikasi Anda memerlukan kategori Android Auto lainnya. Pedoman Desain

Gunakan permukaan mobil untuk aksi singkat dan dapat diprediksi:

baris status

perintah satu sentuhan
konfirmasi aman pengemudi
__CAPGO_KEEP_0__
pengalihan status sederhana dari aplikasi ponsel

Tetapkan aliran kompleks di UI ponsel dan gunakan carAction acara sebagai pengaktif intent native.

Tetapkan untuk Menggunakan @capgo/capacitor-auto

Jika Anda menggunakan Menggunakan @capgo/capacitor-auto untuk merencanakan media dan perilaku antar muka native, hubungkannya dengan @capgo/capacitor-auto untuk detail implementasi di @capgo/capacitor-auto, Mengawali untuk detail implementasi di Mengawali, Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, dan Menggunakan @capgo/capacitor-video-player untuk kemampuan asli di Menggunakan @capgo/capacitor-video-player.

Otomatis

Tutorial Otomatis