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.

Aplikasi ini dibangun untuk alur kerja yang aman bagi pengemudi dan dikontrol oleh kebijakan. Aplikasi ini tidak memantulkan WebView Anda ke 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' },
        },
      ],
    },
  ],
});

Dengarkan 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 pastikan UI mobil Anda berada di dalam template yang disetujui oleh Apple.

Persyaratan Android

Android Auto menggunakan AndroidX Car App Library. Plugin ini termasuk sebuah CarAppServiceyang mengumumkan template kemampuan, dan secara default menggunakan IOT kategori. Tinjau kembali Dokumen pengaturan Android Jika aplikasi Anda memerlukan kategori Android Auto lainnya.

Petunjuk desain

Gunakan permukaan mobil untuk aksi singkat dan dapat diprediksi:

baris status
perintah satu sentuh
konfirmasi aman pengemudi
pindahan status sederhana dari aplikasi ponsel

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

Lanjutkan 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, Mulai Membangun untuk detail implementasi di Mulai Membangun, 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 native di Menggunakan @capgo/capacitor-video-player.

Otomatis

Tutorial pada Otomatis