Mengambah 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.

Overview

When adding a new plugin to the Capgo ecosystem, you need to update several files and locations across the website to ensure the plugin appears correctly in all relevant places:

1. Konfigurasi Daftar Plugin Tambahkan metadata plugin ke daftar utama
2. - Tambahkan metadata plugin ke daftar utama - Tambahkan plugin ke halaman daftar plugin yang dikategorikan
3. Navigasi Samping - Tambahkan plugin ke sidebar dokumentasi
4. Dokumentasi Plugin - Buat halaman ringkasan dan halaman mulai
5. Tutorial Plugin - Buat tutorial yang 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

Petunjuk 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,
   }

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

2. Tambahkan Plugin ke Halaman Utama

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

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

   Kategori:

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

3. Tambah ke Navigasi Samping

   Buka /astro.config.mjs dan tambahkan plugin Anda ke konfigurasi sidebar (sekitar garis 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,
   }

   Daftar plugin disajikan secara alfabetis di sidebar.

4. Buat Direktori Dokumentasi Plugin

   Buat direktori 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. Membuat Panduan Getting Started

   Membuat /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

   Membuat /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]

Bab berjudul “Membuat File Tutorial”

Bab berjudul “Struktur Dokumentasi Plugin”

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 Opsional

Untuk plugin yang kompleks, Anda mungkin menambahkan 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

Menggunakan Deskripsi Plugin

• Sederhanakan: Jangan melebihi 100 karakter
• Sangat SpesifikJelaskan apa yang dilakukan plugin, bukan apa itu
• Pakai Kata KerjaMulai dengan kata kerja seperti “Kontrol”, “Integrasikan”, “Aktifkan”

Contoh yang Baik:

• “Kontrol lampu flash dan senter dengan toggle on/off yang sederhana”
• “Integrasikan Crisp live chat dan dukungan pelanggan ke dalam aplikasi Anda”
• “Aktifkan autentikasi yang aman menggunakan Face ID dan Touch ID”

Contoh yang Buruk:

• “Plugin untuk flash”
• “Ini adalah plugin Crisp”
• “Plugin biometrik”

Membuat Dokumentasi

1. Mulai dengan Instalasi: Selalu mulai dengan langkah-langkah instalasi yang jelas
2. Sediakan Konfigurasi: Termasuk persyaratan pengaturan platform yang spesifik
3. Tunjukkan Contoh Penggunaan: Berikan contoh-contoh yang berfungsi code
4. Termasuk Referensi API: Dokumentasikan semua metode dan parameter
5. Tambahkan Contoh yang Lengkap: Tunjukkan pola penggunaan nyata
6. Daftar Praktik Terbaik: Berbagi tips untuk penggunaan optimal
7. Document Perbedaan Platform: Jelaskan perilaku iOS vs Android
8. Tambahkan Troubleshooting: Alamat masalah umum

Contoh Code

• Pakai TypeScript untuk semua contoh code
• Masukkan import di atas
• Tambahkan komentar menjelaskan langkah kunci
• Tampilkan penanganan error
• Demonstrasikan penggunaan dasar dan canggih

Daftar Periksa

Pilih daftar periksa ini ketika menambahkan plugin baru:

• Menambahkan plugin ke /src/config/plugins.ts
• Pilih ikon yang tepat dari Heroicons
• Menambahkan plugin ke /src/content/docs/docs/plugins/index.mdx di kategori yang benar
• Menambahkan entri sampingan di /astro.config.mjs
• Membuat direktori dokumentasi plugin
• Membuat index.mdx halaman ringkasan
• Membuat getting-started.mdx guide
• Dibuat tutorial di /src/content/plugins-tutorials/en/
• Termasuk instruksi instalasi
• Documentasi konfigurasi iOS
• Documentasi konfigurasi Android
• Menyediakan contoh penggunaan
• Menambahkan referensi API
• Termasuk contoh kerja yang lengkap
• Menyebutkan praktik terbaik
• Menambahkan catatan spesifik platform
• Mengetes semua tautan bekerja dengan benar

Referensi Icon

Icon-ikon yang umum digunakan untuk plugin (dari astro-heroicons/mini/):

Icon	Penggunaan
BoltIcon	Sinar, daya, energi
CameraIcon	Kamera, foto, video
ChatBubbleLeftIcon	Panas, listrik, energi
FingerPrintIcon	Biometrik, keamanan, autentikasi
MapPinIcon	Pesan, percakapan, komunikasi
SpeakerWaveIcon	Biometrik, keamanan, autentikasi
VideoCameraIcon	Lokasi, lokasi geografis, peta
CreditCardIcon	Akustik, suara, musik
PlayCircleIcon	Pemain media, pemutar 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 di dokumentasi
2. Tambahkan panduan migrasi jika perubahan yang mengganggu ada
3. Perbarui referensi API menggunakan 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 terkini dengan API terbaru

Jalur Bahasa

Tulis dan tinjau dokumen plugin dalam bahasa Inggris. Jalur lokal dihasilkan oleh metadata situs dan diterjemahkan di tepi oleh pekerja penerjemahan.

Menguji Perubahan Anda

Setelah menambahkan atau memperbarui dokumentasi plugin:

1. Membangun situs secara lokal:

   bun run build

2. Periksa kesalahan:

   • Pastikan semua tautan berfungsi
   • Pastikan gambar muat dengan benar
   • Pastikan contoh code yang valid
   • Menguji navigasi

3. Mengamati situs:

   bun run dev

4. Pastikan plugin Anda muncul:

   • Periksa halaman daftar plugin
   • Pastikan navigasi sampingan
   • Tes semua halaman dokumentasi
   • Pastikan halaman tutorial berfungsi

Kesalahan Umum

Hati-hati

Hindari kesalahan umum ini:

1. Lupa menyinkronkan: Selalu jalankan bunx cap sync dalam contoh
2. Penamaan tidak konsisten: Gunakan nama plugin yang sama di mana-mana
3. Konfigurasi platform hilang: Dokumentkan pengaturan iOS dan Android
4. Tautan rusak: Gunakan tautan relatif dan pastikan berfungsi
5. Tidak ada penanganan kesalahan: Selalu tunjukkan try-catch di contoh
6. Impor hilang: Pastikan semua import yang diperlukan dalam contoh
7. Deskripsi yang tidak jelas: Jelaskan secara spesifik apa yang dilakukan plugin

Mendapatkan Bantuan

Jika Anda membutuhkan bantuan untuk menambahkan atau memperbarui dokumentasi plugin:

• Discord: Join our Komunitas Discord
• GitHub: Buatlah isu pada repositori situs web repository situs web
• Email: Hubungi tim kami di Bantuan@capgo.app

Contoh

Untuk referensi, cek plugin-plugin ini yang terdokumentasi dengan baik:

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

Ringkasan

Menambahkan plugin ke dokumentasi Capgo 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. Membuat tutorial yang rinci
6. Menguji semua perubahan secara lokal

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

Teruskan dari Menambahkan atau Mengupdate Plugin

Jika Anda menggunakan Mengambah atau Mengupdate Plugin untuk merencanakan kerja 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 Native, dan Capacitor Plugin: Apa yang Anda Perlu Ketahui untuk konteks praktis di Capacitor Plugin: Apa yang Anda Butuhkan.