Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi

Setiap tim pengembang mobile pasti merasakan sakitnya: fitur sudah siap untuk dinilai, tapi untuk memasukkannya ke tangan stakeholders berarti harus menavigasi labirin tinjauan TestFlight atau Google Play beta. Apa yang seharusnya memakan waktu menit-menit berubah menjadi jam-jam menunggu, menginstal, dan mengelola build beta.

Apa jika aplikasi produksi Anda bisa menarik perubahan terbaru dari setiap permintaan pull secara langsung ke perangkat, tanpa ada penginstalan ulang atau gangguan toko aplikasi?

Itu adalah apa yang Pratinjau PR mengizinkan. Ketika seorang pengembang membuka permintaan pull, sebuah GitHub Aksi menciptakan saluran pembaruan khusus dan menerbitkan perubahan. Siapa pun yang memiliki aplikasi terinstal bisa berganti ke saluran tersebut, menguji fitur, dan berganti kembali - semua tanpa meninggalkan aplikasi yang sudah mereka miliki.

Masalah TestFlight

Alur kerja tradisional untuk menguji fitur mobile terlihat seperti ini:

1. Pengembang membuka PR - Code sudah siap untuk dinilai
2. Tunggu TestFlight - 15-30 menit waktu pengolahan
3. Temukan dan instal - Tester mencari build yang tepat
4. Uji dan ulangi - Setiap perubahan berarti menunggu lagi

Hal ini menciptakan bottleneck. QA terblokir menunggu build. Manajer produk tidak bisa memverifikasi fitur dengan cepat. Pengembang kehilangan konteks sambil menunggu feedback. Industri memperkirakan biaya kehilangan produktivitas sekitar $340 per PR.

Bagaimana Cara Kerja PR Previews

PR previews menggunakan sistem kanal Capgo untuk membuat aliran update per-PR. Berikut adalah alur:

1. PR dibuka atau diperbarui - Aksi GitHub diaktifkan
2. Bundle diunggah - Perubahan JS/CSS Anda pergi ke kanal PR khusus
3. Komentar yang diposting - Tester mendapatkan instruksi di PR
4. Uji Coba Instan - Ganti saluran, uji, kembali

Tidak ada instalasi aplikasi baru. Tidak ada penundaan TestFlight. Aplikasi produksi yang sama dapat mengambil dari saluran pembaruan yang berbeda.

Pengaturan Pratinjau PR

Sebelum Anda dapat menerapkan pratinjau PR, proyek Anda harus dikonfigurasi dengan Capgo Live Updates. Ikuti panduan Capgo quickstart jika Anda belum melakukannya. Capgo Workflow Aksi Buat

GitHub Actions Workflow

Komentar yang diposting .github/workflows/pr-preview.yml:

name: PR Preview
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install Dependencies
        run: bun install

      - name: Build
        run: bun run build

      # Create a channel named after your PR (may already exist on synchronize)
      - name: Create PR Channel
        id: create_channel
        continue-on-error: true
        run: bunx @capgo/cli@latest channel add pr-${{ github.event.pull_request.number }} --self-assign
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Upload the build to that channel
      - name: Upload to Capgo
        run: bunx @capgo/cli@latest bundle upload --channel pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Post a comment with testing instructions (only on PR open)
      - name: Comment on PR
        if: github.event.action == 'opened'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: ${{ github.event.pull_request.number }},
              body: '📱 **Test this PR on device:**\n\nOpen your app and switch to channel: `pr-${{ github.event.pull_request.number }}`\n\nUse the shake menu or call `setChannel()` from your app.'
            })

- Tester mendapatkan instruksi di PR --self-assign menandai saat membuat saluran. Ini memungkinkan teser untuk beralih ke saluran dari dalam aplikasi menggunakan setChannel() API.

Mengatur Token Capgo

1. Pergi ke dashboard Capgo Anda
2. Navigate to Settings > API Keys
3. __CAPGO_KEEP_0__ all Membuat kunci baru dengan
4. izin CAPGO_TOKEN in your GitHub repository secrets

dalam repositori rahasia

Bagaimana Teser Berpindah ke Saluran PR

1. Opsi 1: Menu Guncang (Paling Sederhana)

Aktifkan menu guncang dengan pilihan saluran di konfigurasi Capacitor Anda:

// capacitor.config.ts
const config: CapacitorConfig = {
  // ... your other config
  plugins: {
    CapacitorUpdater: {
      shakeMenu: true,
      allowShakeChannelSelector: true
    }
  }
};

Pengujian melakukan guncangan perangkat untuk membuka menu debug, yang menampilkan daftar saluran yang tersedia dengan bar pencarian. Mereka menemukan saluran PR mereka (misalnya, __CAPGO_KEEP_0__), mengetuk untuk memilihnya, dan aplikasi secara otomatis mengunduh dan menerapkan pembaruan. Ketika selesai menguji, mereka guncang lagi dan kembali ke produksi. pr-123Menu guncang mengelola alur seluruhnya secara otomatis:

Mengambil semua saluran yang dapat di-assign sendiri melalui __CAPGO_KEEP_0__

1. Menampilkan saluran dengan pencarian untuk menemukan PR tertentu listChannels()
2. Mengunduh pembaruan setelah pemilihan
3. Mengajak untuk reload dengan pilihan “Reload Sekarang” / “Nanti”
4. 2. Opsi 2: Pilih Saluran UI yang Dibuat Sendiri

Buat pengganti saluran ke dalam aplikasi Anda yang menampilkan saluran PR yang tersedia dan memungkinkan pengujian memilih salah satu. Ini menggunakan dua API kunci:

- Mengambil semua saluran dengan pengaturan self-assignment diaktifkan

• listChannels() - Mengambil semua saluran yang dapat di-assign sendiri melalui __CAPGO_KEEP_0__
• setChannel() - Mengubah perangkat ke saluran yang dipilih

import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Get all available channels (including PR channels)
async function getAvailableChannels() {
  const { channels } = await CapacitorUpdater.listChannels();

  // Filter to show only PR channels
  const prChannels = channels.filter(c => c.name.startsWith('pr-'));

  return prChannels;
}

// Switch to a specific PR channel
async function switchToChannel(channelName: string) {
  await CapacitorUpdater.setChannel({
    channel: channelName,
    triggerAutoUpdate: true  // Immediately check for updates
  });
}

// Return to production
async function switchBackToProduction() {
  await CapacitorUpdater.unsetChannel({});
}

// Get current channel
async function getCurrentChannel() {
  const { channel } = await CapacitorUpdater.getChannel();
  return channel;
}

Dengan blok-blok bangunan ini, Anda dapat membuat UI sederhana:

// Example: List PR channels and let user select
const channels = await getAvailableChannels();
const current = await getCurrentChannel();

// Display channels in your UI
channels.forEach(channel => {
  console.log(`${channel.name} ${channel.name === current ? '(current)' : ''}`);
});

// When user selects a channel
await switchToChannel('pr-123');

Lihat contoh komponen React lengkap di artikel kami tentang surfing saluran Pembersihan Saluran PR.

Ketika PR disatukan atau ditutup, Anda ingin membersihkan saluran. Tambahkan alur kerja lainnya:

Ini menghapus saluran ketika PR ditutup, sehingga daftar saluran Anda tetap bersih.

name: Cleanup PR Preview
on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Delete PR Channel
        run: bunx @capgo/cli@latest channel delete pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

Kompatibilitas Versi

Pratinjau PR hanya berfungsi ketika bundle JavaScript kompatibel dengan versi native yang terinstal. Jika PR Anda termasuk perubahan native, tester akan memerlukan build native baru.

PR previews only work when the JavaScript bundle is compatible with the installed native version. If your PR includes native code changes (new Capacitor plugins, iOS/Android modifications), testers will need a new native build.

Capgo automatically checks version compatibility. If a PR’s bundle targets a different native version than what’s installed, the update won’t be applied. This prevents crashes from incompatible code.

For PRs that do require native changes, you’ll need to distribute a new TestFlight/Play Store build. PR previews work best for JavaScript, CSS, and asset changes that don’t touch native code.

Switches the device to the selected channel

Insinyur QA

• Uji coba fitur langsung ketika PR dibuka
• Switch antara PR beberapa tanpa harus menginstal ulang
• Verifikasi perbaikan dan regresi pada perangkat nyata
• Tidak perlu menunggu proses TestFlight lagi

Pengelola Produk

• Uji coba fitur sebelum mereka diintegrasikan
• Berikan umpan balik langsung pada PR
• Verifikasi bahwa implementasi sesuai dengan spesifikasi
• Percepat waktu siklus ulasan

Pengembang

• Dapatkan umpan balik yang lebih cepat pada perubahan
• Menampilkan fitur demo langsung kepada stakeholder
• Mengatasi masalah debug dengan pengguna tertentu
• Menghemat waktu untuk mengelola build beta

Pembandingan: Tradisional vs Prinsipal Previews

Praktik Terbaik

1. Berikan nama saluran dengan jelas: Gunakan pr-{number} konvensi untuk identifikasi yang mudah
2. Auto-pembersihan: Selalu hapus saluran ketika PR ditutup
3. Batasi akses: Hanya aktifkan menu guncangan di build debug/staging
4. Dokumentasikan proses: Tambahkan instruksi tes ke template PR Anda
5. Tangani gagal dengan sopan: Pastikan pembuatan saluran berhasil sebelum mengomentari

Ketika Tidak Menggunakan Pratinjau PR

Pratinjau PR untuk perubahan JavaScript/CSS saja. Jika PR Anda termasuk:

• Plugin baru Capacitor
• Perubahan native iOS code
• Perubahan native Android code
• Pembaruan dependensi yang mempengaruhi pembangunan native

Anda memerlukan distribusi TestFlight/Play Store tradisional untuk perubahan-perubahan tersebut.

Menggabungkan dengan Channel Surfing

PR preview akan lebih baik ketika digabungkan dengan channel surfingAplikasi Anda dapat memiliki:

• production - Rilis stabil untuk semua pengguna
• beta - Akses awal untuk pengguna yang memilih
• pr-123 - Pratinjau fitur untuk PR tertentu

Para pengujang dengan build produksi dapat beralih ke saluran PR mana saja, menguji fitur, kemudian kembali - semua dengan aplikasi yang sama yang terpasang.

Sumber Daya

• Capgo Live Updates Dokumentasi
• Dokumentasi Saluran
• Petunjuk Mengemudi Saluran
• CLI Referensi Perintah
• Halaman Solusi PR Preview

Kesimpulan

PR preview mengubah cara tim Anda melakukan tinjauan dan menguji fitur mobile. Sebaliknya dari menunggu proses TestFlight dan mengelola beberapa build beta, pengujang dapat beralih ke saluran PR mana saja dalam beberapa detik menggunakan aplikasi yang sudah terpasang.

Konfigurasi ini minimal - satu file GitHub Actions workflow - dan manfaatnya berkumpul di seluruh tim. QA tetap tidak terblokir, manajer produk melakukan tinjauan lebih cepat, dan pengembang mendapatkan feedback lebih cepat.

Mulai dengan menambahkan workflow ke satu repositori dan lihat bagaimana hal itu mengubah proses tinjauan Anda.

Teruskan dari Mengubah Setiap Permintaan Gabung (PR) Menjadi Pratinjau Pasang (Installable Preview)

Jika Anda menggunakan Mengubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi untuk merencanakan routing kanal dan peluncuran tahap demi tahap, hubungkannya dengan Saluran context":"Saluran fitur nama Capgo. Halaman/area: Halaman pemasaran solusi Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman solusi/white-label.astro. Kunci pesan `solutions_white_label_visual_cell2_value` (Nilai Sel Tampilan Putih Label Solusi)." untuk detail implementasi di Saluran, Saluran context":"Saluran fitur nama Capgo. Halaman/area: Halaman pemasaran solusi Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman solusi/white-label.astro. Kunci pesan `solutions_white_label_visual_cell2_value` (Nilai Sel Tampilan Putih Label Solusi)." untuk detail implementasi di Saluran, Saluran context":"Saluran fitur nama Capgo. Halaman/area: Halaman pemasaran solusi Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman solusi/white-label.astro. Kunci pesan `solutions_white_label_visual_cell2_value` (Nilai Sel Tampilan Putih Label Solusi)." untuk detail implementasi di Saluran, Jasa Uji Beta untuk Solusi Produktif, dan Solusi Target Versi untuk alur kerja produk dalam Solusi Targeting Versi.