Otomatis

Menggunakan @capgo/capacitor-auto

@capgo/capacitor-auto menghubungkan sebuah Capacitor aplikasi ke permukaan template CarPlay dan Android Auto yang disetujui. 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 bagi pengemudi dan dikontrol oleh kebijakan. Tidak memantulkan WebView Anda ke dalam mobil.

Instal dan sinkronisasi

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

Tunggu aksi pengemudi

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

Tonton 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 di Dokumen pengaturan iOS dan jaga UI mobil Anda di dalam template yang disetujui oleh Apple.

Persyaratan Android

Android Auto menggunakan AndroidX Car App Library. Plugin ini termasuk sebuah CarAppServicedan mengumumkan kemampuan template dan menggunakan nilai default IOT kategori. Tinjauan Android setup dokumen jika aplikasi Anda memerlukan kategori Android Auto lainnya.

Panduan desain

Gunakan permukaan mobil untuk aksi singkat dan dapat diprediksi:

• baris status
• perintah satu-tap
• konfirmasi aman pengemudi
• pindah ke keadaan sederhana dari aplikasi ponsel

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

Teruskan dari Menggunakan @capgo/capacitor-auto

Jika Anda menggunakan Menggunakan @capgo/capacitor-auto untuk merencanakan perilaku media dan antarmuka 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 native 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-player video.