Menggunakan @capgo/capacitor-auto

@capgo/capacitor-auto Menghubungkan 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.

Terbangun untuk alur kerja yang aman dan terkendali oleh kebijakan. Tidak memantulkan WebView Anda ke mobil.

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

Dengarkan aksi pengemudi

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

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

Spesifikasi iOS

CarPlay memerlukan hak akses yang disetujui oleh Apple untuk kategori aplikasi Anda. Tambahkan konfigurasi layar CarPlay yang dijelaskan dalam dokumen pengaturan iOS dan pastikan UI mobil Anda berada di dalam template yang disetujui oleh Apple. Install and sync

Persyaratan Android

Android Auto menggunakan AndroidX Car App Library. Plugin ini termasuk sebuah CarAppServiceyang mengumumkan kemampuan template , dan secara default menggunakan kategori IOT Periksa dokumen pengaturan Android jika aplikasi Anda memerlukan kategori Android Auto lainnya. Panduan Desain

Gunakan permukaan mobil untuk aksi-aksi singkat dan dapat diprediksi:

baris status

perintah satu-tap
konfirmasi aman pengemudi
__CAPGO_KEEP_0__
pengalihan keadaan sederhana dari aplikasi ponsel

Tetapkan aliran kompleks di antarmuka ponsel dan gunakan carAction Tetapkan peristiwa sebagai pengaktif intent asli.

Tetapkan penggunaan @capgo/capacitor-auto

Jika Anda menggunakan Penggunaan @capgo/capacitor-auto Untuk merencanakan media dan perilaku antarmuka asli, hubungkannya dengan @capgo/capacitor-auto untuk detail implementasi di @capgo/capacitor-auto, Berikut Panduan Awal untuk detail implementasi di Berikut Panduan Awal, Penggunaan @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 native di Menggunakan @capgo/capacitor-video-player.

Otomatis

Tutorial Otomatis