Menambahkan atau Mengupdate Plugin

This guide explains how to add new Capacitor plugins to the Capgo website or update existing plugin documentation. This is useful for contributors, maintainers, and AI agents helping to maintain the documentation.

Ringkasan

Ketika menambahkan plugin baru ke ekosistem Capgo, Anda perlu memperbarui beberapa file dan lokasi di situs untuk memastikan plugin muncul dengan benar di semua tempat yang relevan:

1. Konfigurasi Daftar Plugin - Tambah metadata plugin ke daftar utama
2. Daftar Plugin - Tambah plugin ke halaman daftar plugin yang dikategorikan
3. Navigasi Samping - Tambah plugin ke sidebar dokumentasi
4. Dokumentasi Plugin - Buat halaman pengenalan dan mulai
5. Tutorial Plugin - Buat tutorial komprehensif

Lokasi File

File Utama untuk Diperbarui

File	Tujuan
/src/config/plugins.ts	Daftar plugin utama dengan metadata
/src/content/docs/docs/plugins/index.mdx	Halaman indeks plugin dengan kategori
/astro.config.mjs	Konfigurasi navigasi samping
/src/content/docs/docs/plugins/[plugin-name]/	Direktori dokumentasi plugin
/src/content/plugins-tutorials/en/	File tutorial bahasa Inggris

Panduan Langkah demi Langkah

1. Tambahkan Plugin ke Daftar Utama

   Buka /src/config/plugins.ts dan tambahkan plugin Anda ke actions array:

   // First, import an appropriate Heroicon
   import YourIconName from 'astro-heroicons/mini/IconName.astro'
   
   // Then add to the actions array
   {
     name: '@capgo/your-plugin-name',
     author: 'github.com/Cap-go',
     description: 'Brief description of what the plugin does',
     href: 'https://github.com/Cap-go/your-plugin-name/',
     title: 'Display Name',
     icon: YourIconName,
   }

   Ikon yang Tersedia: Periksa /node_modules/astro-heroicons/mini/ ikon yang tersedia.

2. Tambahkan Plugin ke Halaman Index

   Buka /src/content/docs/docs/plugins/index.mdx dan tambahkan plugin Anda di bawah kategori yang tepat:

   <LinkCard
     title="Your Plugin Name"
     description="Brief description of what the plugin does"
     href="/docs/plugins/your-plugin-name/"
   />

   Kategori:

   • ⭐ Plugin Terpopuler
   • 📱 Plugin Perangkat & Sistem
   • 🎥 Plugin Media & Kamera
   • 🛠️ Plugin Utilitas
   • 🤖 AI & Media Maju
   • 📍 Lokasi & Layanan Latar
   • 📞 Komunikasi & Analitik
   • 🔐 Keamanan & Sistem
   • 📊 Fitur Android-Spesifik
   • 📥 Unduh & Navigasi

3. Tambahkan ke Navigasi Samping

   Buka /astro.config.mjs dan tambahkan plugin Anda ke konfigurasi sampingan (sekitar baris 540):

   {
     label: 'Your Plugin Name',
     items: [
       { label: 'Overview', link: '/docs/plugins/your-plugin-name/' },
       { label: 'Getting started', link: '/docs/plugins/your-plugin-name/getting-started' },
     ],
     collapsed: true,
   }

   Plugin disusun secara alfabetis di samping.

4. Buat Direktori Dokumentasi Plugin

   Buat direktori baru untuk dokumentasi plugin Anda:

   mkdir -p /src/content/docs/docs/plugins/your-plugin-name/

5. Buat Halaman Ringkasan Plugin

   Buat /src/content/docs/docs/plugins/your-plugin-name/index.mdx:

   ---
   title: "@capgo/your-plugin-name"
   description: Brief description of the plugin's purpose
   tableOfContents: false
   next: false
   prev: false
   sidebar:
     order: 1
     label: "Introduction"
   hero:
     tagline: Detailed tagline explaining what the plugin does
     image:
       file: ~public/your-plugin-icon.svg
     actions:
       - text: Get started
         link: /docs/plugins/your-plugin-name/getting-started/
         icon: right-arrow
         variant: primary
       - text: Github
         link: https://github.com/Cap-go/your-plugin-name/
         icon: external
         variant: minimal
   ---
   
   import { Card, CardGrid } from '@astrojs/starlight/components';
   
   <CardGrid stagger>
     <Card title="Feature 1" icon="puzzle">
       Description of first key feature
     </Card>
     <Card title="Feature 2" icon="rocket">
       Description of second key feature
     </Card>
     <Card title="Cross-platform" icon="puzzle">
       Works on both iOS and Android 📱
     </Card>
     <Card title="Comprehensive Documentation" icon="open-book">
       Check the [Documentation](/docs/plugins/your-plugin-name/getting-started/) to master the plugin.
     </Card>
   </CardGrid>

6. Buat Panduan Getting Started

   Buat /src/content/docs/docs/plugins/your-plugin-name/getting-started.mdx:

   ---
   title: Getting Started
   description: Learn how to install and use the plugin in your Capacitor app.
   sidebar:
     order: 2
   ---
   
   import { Steps } from '@astrojs/starlight/components';
   import { PackageManagers } from 'starlight-package-managers'
   
   <Steps>
   1. **Install the package**
      <PackageManagers pkg="@capgo/your-plugin-name" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />
   
   2. **Sync with native projects**
      <PackageManagers type="exec" pkg="cap" args="sync" pkgManagers={['npm', 'pnpm', 'yarn', 'bun']} />
   </Steps>
   
   ## Configuration
   
   ### iOS Configuration
   [iOS-specific setup instructions]
   
   ### Android Configuration
   [Android-specific setup instructions]
   
   ## Usage
   
   [Basic usage examples]
   
   ## API Reference
   
   [Detailed API documentation]
   
   ## Complete Example
   
   [Full working example]
   
   ## Best Practices
   
   [Recommended practices and tips]
   
   ## Platform Notes
   
   [Platform-specific notes and limitations]

7. Buat File Tutorial

   Buat /src/content/plugins-tutorials/en/your-plugin-name.md:

   ---
   locale: en
   ---
   # Using @capgo/your-plugin-name Package
   
   The `@capgo/your-plugin-name` package [brief description]. In this tutorial, we will guide you through the installation, configuration, and usage of this package in your Ionic Capacitor app.
   
   ## Installation
   
   [Installation steps]
   
   ## Configuration
   
   [Configuration steps for iOS and Android]
   
   ## API Usage
   
   [Detailed API usage examples]
   
   ## Complete Example
   
   [Full working example]
   
   ## Best Practices
   
   [Tips and best practices]
   
   ## Troubleshooting
   
   [Common issues and solutions]
   
   ## Conclusion
   
   [Summary and links to additional resources]

Struktur Dokumentasi Plugin

File-File yang Diperlukan

src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx           # Overview page with hero and feature cards
└── getting-started.mdx # Installation and usage guide

src/content/plugins-tutorials/en/
└── your-plugin-name.md # Comprehensive tutorial

File-File Opsional

Untuk plugin yang kompleks, Anda mungkin menambahkan halaman-halaman dokumentasi tambahan:

src/content/docs/docs/plugins/your-plugin-name/
├── index.mdx
├── getting-started.mdx
├── api-reference.mdx   # Detailed API documentation
├── examples.mdx        # Additional examples
├── troubleshooting.mdx # Troubleshooting guide
└── migrations.mdx      # Migration guides

Pedoman Konten

Menulis Deskripsi Plugin

• Jadilah Singkat: Simpan deskripsi di bawah 100 karakter
• Jelaskan dengan Jelas: Jelaskan apa yang plugin ini lakukan, bukan apa itu
• Gunakan Kata Kerja: Mulai dengan kata kerja seperti “Kontrol”, “Integrasikan”, “Aktifkan”

Contoh Baik:

• “Control device flashlight and torch with simple on/off toggle”
• “Integrate Crisp live chat and customer support into your app”
• “Enable secure authentication using Face ID and Touch ID”

Contoh Buruk:

• “A plugin for flash”
• “This is a Crisp plugin”
• “Plugin Biometrik”

Menulis Dokumentasi

1. Mulai dengan InstalasiSelalu mulai dengan langkah instalasi yang jelas
2. Berikan KonfigurasiTermasuk persyaratan pengaturan spesifik platform
3. Tunjukkan Contoh PenggunaanBerikan contoh code yang berfungsi
4. Termasuk API ReferensiDokumentasikan semua metode dan parameter
5. Tambahkan Contoh yang Lengkap: Menunjukkan pola penggunaan nyata di dunia nyata
6. Daftar Praktik Terbaik: Bagikan tips untuk penggunaan optimal
7. Dokumentasi Perbedaan Platform: Jelaskan perilaku iOS vs Android
8. Tambahkan Troubleshooting: Alamat masalah umum

Contoh Code

• Pakai TypeScript untuk semua contoh code
• Termasuk import di bagian atas
• Tambahkan komentar menjelaskan langkah-langkah kunci
• Tampilkan penanganan kesalahan
• Demonstrasikan penggunaan dasar dan lanjutan

Daftar Periksa

Gunakan daftar periksa ini ketika menambahkan plugin baru:

• Menambahkan plugin ke /src/config/plugins.ts
• Memilih ikon yang tepat dari Heroicons
• Menambahkan plugin ke /src/content/docs/docs/plugins/index.mdx di kategori yang benar
• Menambahkan entri sisi di /astro.config.mjs
• Membuat direktori dokumentasi plugin
• Membuat index.mdx Halaman Ringkasan
• Dibuat getting-started.mdx Petunjuk
• Membuat tutorial di /src/content/plugins-tutorials/en/
• Termasuk instruksi instalasi
• Mendokumentasikan konfigurasi iOS
• Mendokumentasikan konfigurasi Android
• Menggunakan contoh penggunaan
• Menambahkan referensi API
• Termasuk contoh kerja yang lengkap
• Mengulas praktik terbaik
• Menambahkan catatan spesifik platform
• Ditesting semua tautan bekerja dengan benar

Referensi Icon

Ikon umum digunakan untuk plugin (dari astro-heroicons/mini/):

Icon	Penggunaan Kasus
BoltIcon	Led, listrik, energi
CameraIcon	Kamera, foto, video
ChatBubbleLeftIcon	Chat, pesan, komunikasi
FingerPrintIcon	Biometrik, keamanan, autentikasi
MapPinIcon	Lokasi, lokasi geografis, peta
SpeakerWaveIcon	Audio, suara, musik
VideoCameraIcon	Video, perekaman, streaming
CreditCardIcon	Pembayaran, pembelian
PlayCircleIcon	Pemain media, pemain video
SignalIcon	Koneksi, jaringan, beacon
RadioIcon	Beacon, siaran, nirkabel
ChatBubbleOvalLeftIcon	Sosial media, WeChat

Mengupdate Plugin yang Sudah Ada

Ketika mengupdate plugin yang sudah ada:

1. Perbarui nomor versi dalam dokumentasi
2. Tambahkan panduan migrasi Jika perubahan besar ada
3. Perbarui API referensi dengan metode baru
4. Tambahkan contoh baru untuk fitur baru
5. Perbarui persyaratan platform jika berubah
6. Revisi praktik terbaik berdasarkan fitur baru
7. Tetapkan tutorial saat ini dengan API terbaru

Jalur Bahasa

Tulis dan tinjau dokumen plugin dalam bahasa Inggris. Rute yang telah diterjemahkan dihasilkan oleh metadata situs dan diterjemahkan di tepi oleh pekerjaan penerjemahan.

Menguji Perubahan Anda

Setelah menambahkan atau memperbarui dokumentasi plugin:

1. Bangun situs secara lokal:

   bun run build

2. Cari kesalahan:

   • Periksa semua tautan berfungsi
   • Pastikan gambar muat dengan benar
   • Konfirmasi contoh code yang valid
   • Navigasi bekerja

3. Tinjau situs:

   bun run dev

4. Pastikan plugin Anda muncul:

   • Periksa halaman daftar plugin
   • Pastikan navigasi samping berfungsi
   • Test semua halaman dokumentasi
   • Konfirmasi halaman tutorial berfungsi

Kesalahan umum

Hati-hati

Jangan lakukan kesalahan-kesalahan umum ini:

1. Mengabaikan sinkronisasi: Selalu jalankan bunx cap sync dalam contoh-contoh
2. Penamaan tidak konsisten: Gunakan nama plugin yang sama di mana-mana
3. Konfigurasi platform hilang: Dokumentasikan setup iOS dan Android
4. Tautan rusak: Gunakan tautan relatif dan pastikan mereka berfungsi
5. Tidak ada penanganan kesalahan: Selalu tampilkan try-catch dalam contoh
6. Keterlambatan import: Termasuk semua import yang diperlukan dalam contoh
7. Deskripsi yang tidak jelas: Jelaskan secara spesifik apa yang dilakukan plugin

Mendapatkan Bantuan

Jika Anda membutuhkan bantuan menambahkan atau memperbarui dokumentasi plugin:

• Discord: Bergabunglah dengan komunitas Discord kami
• GitHub : Buka isu di repository website
• Email: Hubungi tim di support@capgo.app

Contoh

Untuk referensi, cek plugin yang terdokumentasi dengan baik ini:

• Updater: /src/content/docs/docs/plugins/updater/ (plugin kompleks dengan beberapa halaman)
• Flash: /src/content/docs/docs/plugins/flash/ (plugin sederhana, contoh awal yang baik)
• Login Sosial: /src/content/docs/docs/plugins/social-login/ (plugin dengan sub-halaman)

Ringkasan

Menambahkan plugin ke dalam Capgo dokumentasi melibatkan:

1. Menambahkan metadata ke konfigurasi utama
2. Menambahkan plugin ke halaman indeks kategori
3. Mengonfigurasi navigasi sampingan
4. Membuat halaman dokumentasi yang komprehensif
5. Menulis tutorial yang rinci
6. Menguji semua perubahan secara lokal

Dengan mengikuti panduan ini, Anda memastikan bahwa plugin-nya terdokumentasi secara konsisten dan mudah ditemukan oleh pengguna.

Teruskan dari Menambahkan atau Mengupdate Plugin

Jika Anda menggunakan Menambahkan atau Mengupdate Plugin untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Asli, dan Capacitor Plugin: Apa yang Perlu Anda Ketahui untuk konteks praktis di Capacitor Plugin: Apa yang Perlu Anda Ketahui.