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.

Itu dibangun untuk alur kerja yang aman bagi pengemudi dan dikontrol oleh kebijakan. Tidak ada refleksi WebView Anda ke dalam 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);
});

Persyaratan iOS

CarPlay memerlukan hak istimewa Apple yang disetujui 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 Apple. __CAPGO_KEEP_0__

Persyaratan Android

Android Auto menggunakan AndroidX Car App Library. Plugin ini termasuk sebuah CarAppServicemengumumkan kemampuan, dan secara default menggunakan template kategori. Tinjau dokumentasi pengaturan Android IOT jika aplikasi Anda memerlukan kategori Android Auto lainnya. Panduan Desain Gunakan permukaan mobil untuk aksi singkat dan dapat diprediksi:

baris status

perintah satu sentuhan

konfirmasi aman pengemudi
Dokumentasi Pengaturan
Dokumentasi Desain
pengalihan keadaan sederhana dari aplikasi ponsel

Tetapkan aliran kompleks di antarmuka ponsel dan gunakan carAction event sebagai trigger intent asli.

Tetapkan aliran dari Menggunakan @capgo/capacitor-auto

Jika Anda menggunakan Menggunakan @capgo/capacitor-auto untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan @capgo/capacitor-auto untuk detail implementasi di @capgo/capacitor-auto, Berikut Panduan Awal untuk detail implementasi di Berikut Panduan Awal, Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli dalam Menggunakan @capgo/capacitor-live-aktivitas @capgo/capacitor-live-aktivitas untuk detail implementasi dalam @capgo/capacitor-live-aktivitas, dan Menggunakan @capgo/capacitor-video-player untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player.

Otomatis

Tutorial Otomatis