Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi

Setiap tim pengembang mobile telah merasakan sakitnya: fitur sudah siap untuk tinjauan, tapi untuk memasukkannya ke tangan stakeholders berarti menavigasi labirin tinjauan TestFlight atau Google Play. Yang seharusnya memakan 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 menginstal ulang atau menunggu keterlambatan toko aplikasi?

Itu adalah apa Pratinjau PR aktifkan. Ketika seorang pengembang membuka permintaan pull, sebuah GitHub Action membuat saluran pembaruan khusus dan menerbitkan perubahan. Siapa pun yang memiliki aplikasi terinstal dapat beralih ke saluran tersebut, menguji fitur, dan kembali - semua tanpa meninggalkan aplikasi yang sudah mereka miliki.

The TestFlight Problem

Alur kerja tradisional untuk menguji fitur mobile terlihat seperti ini:

Developer membuka PR - Code siap untuk tinjauan
Tunggu TestFlight - 15-30 menit waktu pengolahan
Cari dan instal - Tester mencari build yang tepat
Uji dan ulangi - Setiap perubahan berarti menunggu lagi

Ini menciptakan bottleneck. QA terblokir menunggu build. Manajer produk tidak dapat memverifikasi fitur dengan cepat. Pengembang kehilangan konteks sambil menunggu umpan balik. Industri memperkirakan biaya kehilangan produktivitas sekitar $340 per PR.

How PR Previews Work

PR previews menggunakan sistem saluran Capgo untuk membuat aliran pembaruan per-PR. Berikut adalah alurannya:

PR dibuka atau diperbarui - Aksi GitHub diaktifkan
Bundle diunggah - Perubahan JS/CSS Anda dikirim ke saluran PR khusus
Komentar diposting - Tester mendapatkan instruksi di PR
Pengujian instan - Ganti saluran, lakukan pengujian, kembali ke saluran asli

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

Pengaturan PR Previews

Sebelum Anda dapat menerapkan pratinjau PR, project Anda harus dikonfigurasi dengan Capgo Live Updates. Ikuti panduan Capgo quickstart jika Anda belum melakukannya. Jika Anda belum melakukannya, ikuti panduan Capgo quickstart. Jika Anda belum melakukannya, ikuti panduan __CAPGO_KEEP_0__ quickstart.

GitHub Actions Workflow

Kunci adalah flag ketika membuat saluran. Ini memungkinkan tester untuk beralih ke saluran dari dalam aplikasi menggunakan __CAPGO_KEEP_0__. .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.'
            })

Pengaturan Token __CAPGO_KEEP_0__ --self-assign Pergi ke dashboard Anda __CAPGO_KEEP_0__ setChannel() Navigasikan ke Pengaturan > API Keys

Setting Up Capgo Token

Kunci adalah flag ketika membuat saluran. Ini memungkinkan tester untuk beralih ke saluran dari dalam aplikasi menggunakan __CAPGO_KEEP_0__. Pengaturan Token Capgo
Pergi ke dashboard Anda API
Membuat kunci baru dengan all izin
Tambahkannya sebagai CAPGO_TOKEN dalam repositori rahasia GitHub Anda

Bagaimana Tester Mengubah Saluran

Ada dua cara bagi tester untuk beralih ke saluran PR:

Mengaktifkan menu guncang dengan pilihan saluran di konfigurasi Capacitor Anda:

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

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

Mengambil semua saluran yang dapat di-assign sendiri melalui

Mengambil semua saluran yang dapat di-assign sendiri melalui listChannels()
Menampilkan saluran dengan pencarian untuk menemukan PR tertentu
Mengunduh pembaruan setelah pemilihan
Mengajak reload dengan pilihan “Reload Sekarang” / “Nanti”

Pilihan 2: Pemilih Saluran Custom UI

Buatlah pengubah saluran ke dalam aplikasi Anda yang menampilkan saluran PR yang tersedia dan memungkinkan tester memilih satu. Ini menggunakan dua API utama:

listChannels() - Mengambil semua saluran dengan pengaturan self assignment diaktifkan
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 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');

For a complete React component example, see artikel kami tentang surfing saluran.

Menghapus Saluran PR

Ketika PR disatukan atau ditutup, Anda ingin membersihkan saluran. Tambahkan workflow lain:

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

Menghapus saluran ketika PR ditutup, menjaga daftar saluran Anda tetap bersih.

Kemampuan Kompatibilitas Versi

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 secara otomatis memeriksa kompatibilitas versi. Jika bundle PR mengarah ke versi native yang berbeda dengan yang terinstal, update tidak akan diterapkan. Ini mencegah crash karena code yang tidak kompatibel.

Untuk PR yang memerlukan perubahan native, Anda perlu mendistribusikan build TestFlight/Play Store baru. Penglihatan PR berfungsi terbaik untuk perubahan JavaScript, CSS, dan aset yang tidak menyentuh code native.

Siapa yang Manfaat dari Penglihatan PR

Insinyur QA

Menguji fitur secara langsung ketika PR dibuka
Mengganti antara PR yang berbeda tanpa harus menginstal ulang
Mengverifikasi perbaikan dan regresi pada perangkat nyata
Tidak perlu menunggu proses TestFlight

Manajer Produk

Review fitur sebelum mereka diintegrasikan
Berikan umpan balik langsung pada PR
Pastikan implementasi sesuai dengan persyaratan
Percepat waktu siklus tinjauan

Pengembang

Penerima umpan balik yang lebih cepat atas perubahan
Demo fitur kepada stakeholder secara instan
Debug masalah dengan pengguna tertentu
Gunakan waktu yang lebih sedikit untuk mengelola versi beta

Pembandingan: Tradisional vs Pratinjau PR

Aspek	TestFlight/Beta	Capgo Pr Preview
Waktu Pembangunan	15-30 menit	<1 menit
Pindah PR	5+ menit reinstall	10 detik
Kompleksitas Pengaturan	Kredensial App Store	Satu file aliran kerja
Pembersihan	Menggunakan Tangan	Otomatis
Perubahan code native	Diperlukan	Pilihan (hanya JS)

Praktik Terbaik

Berikan nama saluran dengan jelas: Gunakan pr-{number} konvensi untuk identifikasi yang mudah
Pembersihan Otomatis: Selalu hapus saluran ketika PR ditutup
Batasi Akses: Hanya aktifkan menu shake di build debug/staging
Documentasikan proses: Tambahkan instruksi pengujian ke template PR Anda
Menangani gagal dengan sopan: Pastikan pembuatan channel berhasil sebelum mengirim komentar

Mengapa Tidak Menggunakan Pratinjau PR

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

Plugin baru Capacitor
iOS native code changes
Perubahan native iOS code
Perubahan native Android __CAPGO_KEEP_0__

Pembaruan dependensi yang mempengaruhi pembangunan native

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

Penglihatan PR bekerja dengan baik ketika dikombinasikan dengan mencari saluran. Aplikasi Anda dapat memiliki:

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

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

Sumber Daya

Kesimpulan

PR preview mengubah cara tim Anda melakukan tinjauan dan tes fitur mobile. Alih-alih menunggu proses TestFlight dan mengelola beberapa versi beta, tester dapat beralih ke mana-mana PR channel dalam beberapa detik menggunakan aplikasi yang sudah terinstal.

Pengaturan minimal - satu file workflow GitHub Actions - dan manfaatnya berkembang secara berkelanjutan di tim Anda. 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 Turn Every Pull Request Into an Installable Preview

Jika Anda menggunakan Turn Every Pull Request Into an Installable Preview untuk merencanakan routing channel dan peluncuran tahap demi tahap, hubungkan dengan Saluran untuk detail implementasi di Saluran, Saluran untuk detail implementasi di Channel Channel untuk detail implementasi di Channel Solusi Pengujian Beta untuk alur produk di Solusi Pengujian Beta, dan Solusi Target Versi untuk alur produk di Solusi Target Versi.

Mengubah Setiap Permintaan Pull ke Pratinjau Instalasi