Ubah Setiap Pull Request Menjadi Preview yang Bisa Diinstal

Setiap tim mobile dev pernah merasakannya: sebuah fitur sudah siap di-review, tapi untuk sampai ke tangan stakeholder harus melewati labirin review beta TestFlight atau Google Play. Yang seharusnya butuh hitungan menit malah jadi berjam-jam menunggu, install, dan mengelola beta build.

Bagaimana jika aplikasi production Anda bisa menarik perubahan terbaru dari pull request mana pun langsung ke perangkat, tanpa perlu reinstall atau menunggu delay app store?

Itulah yang Pr preview aktifkan. Saat developer membuka pull request, GitHub Action akan membuat channel update khusus dan mempublikasikan perubahannya. Siapa pun yang sudah menginstal aplikasi dapat beralih ke channel tersebut, mencoba fiturnya, lalu kembali lagi—semuanya tanpa harus keluar dari aplikasi yang sudah ada.

Masalah TestFlight

Workflow tradisional untuk testing fitur mobile biasanya seperti ini:

1. Developer membuka PR - Code siap direview
2. Tunggu TestFlight - Waktu proses 15-30 menit
3. Cari dan instal - Tester mencari build yang tepat
4. Test dan ulangi - Setiap perubahan berarti menunggu lagi

Ini menciptakan bottleneck. QA terhambat menunggu build. Product manager tidak bisa memverifikasi fitur dengan cepat. Developer kehilangan konteks saat menunggu feedback. Industri memperkirakan ini memakan biaya sekitar $340 per PR akibat hilangnya produktivitas.

Cara Kerja PR Previews

PR previews menggunakan sistem channel Capgo untuk membuat stream update per-PR. Berikut alurnya:

1. PR dibuka atau diperbarui - GitHub Action dipicu
2. Bundle diunggah - Perubahan JS/CSS Anda dikirim ke channel khusus PR
3. Komentar diposting - Penguji menerima instruksi di PR
4. Pengujian instan - Ganti channel, uji, kembali

Tidak ada instalasi aplikasi baru. Tidak ada penundaan TestFlight. Aplikasi produksi yang sama dapat menarik dari channel update yang berbeda.

Mengatur PR Previews

Sebelum Anda dapat menerapkan PR previews, proyek Anda perlu dikonfigurasi dengan Capgo Live Updates. Ikuti panduan quickstart Capgo jika belum melakukannya.

Workflow GitHub Actions

Buat .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.'
            })

Kuncinya adalah --self-assign flag saat membuat channel. Ini memungkinkan tester untuk beralih ke channel tersebut dari dalam aplikasi menggunakan setChannel() API.

Menyiapkan Token Capgo

1. Buka Dashboard Capgo
2. Buka Settings > API Keys
3. Buat kunci baru dengan all izin
4. Tambahkan sebagai CAPGO_TOKEN di secrets repositori GitHub Anda

Cara Tester Mengganti Channel

Ada dua cara bagi tester untuk beralih ke channel PR:

Opsi 1: Shake Menu (Paling Sederhana)

Aktifkan menu shake dengan channel selector di konfigurasi Capacitor Anda:

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

Tester menggoyangkan perangkat untuk membuka menu debug, yang menampilkan daftar channel yang tersedia dengan search bar. Mereka menemukan channel PR mereka (mis., pr-123), mengetuk untuk memilihnya, dan aplikasi secara otomatis mengunduh serta menerapkan update. Setelah selesai testing, mereka menggoyangkan lagi dan beralih kembali ke production.

Menu shake menangani seluruh alur secara otomatis:

1. Mengambil semua channel yang dapat self-assign melalui listChannels()
2. Menampilkan channel dengan pencarian untuk menemukan PR tertentu
3. Mengunduh update setelah dipilih
4. Menampilkan prompt untuk reload dengan opsi “Reload Now” / “Later”

Opsi 2: UI Pemilih Channel Kustom

Bangun channel switcher di aplikasi Anda yang mencantumkan channel PR yang tersedia dan memungkinkan tester memilih salah satu. Ini menggunakan dua API utama:

• listChannels() - Mengambil semua channel dengan self-assignment aktif
• setChannel() - Mengalihkan perangkat ke channel 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 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');

Untuk contoh komponen React lengkap, lihat artikel channel surfing kami.

Membersihkan Channel PR

Saat PR di-merge atau ditutup, bersihkan channel-nya. 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 }}

Ini menghapus channel saat PR ditutup, menjaga daftar channel Anda tetap rapi.

Kompatibilitas versi

PR preview hanya berfungsi ketika bundle JavaScript kompatibel dengan versi native yang terpasang. Jika PR Anda mencakup perubahan native code (plugin Capacitor baru, modifikasi iOS/Android), penguji akan membutuhkan native build baru.

Capgo secara otomatis memeriksa kompatibilitas versi. Jika bundle PR menargetkan versi native yang berbeda dari yang terpasang, pembaruan tidak akan diterapkan. Ini mencegah crash akibat code yang tidak kompatibel.

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

Siapa yang Diuntungkan dari PR Previews

Insinyur QA

• Uji fitur langsung saat PR dibuka
• Beralih antar beberapa PR tanpa instal ulang
• Verifikasi perbaikan dan regresi di perangkat asli
• Tidak perlu lagi menunggu pemrosesan TestFlight

Manajer Produk

• Tinjau fitur sebelum digabungkan
• Beri umpan balik langsung di PR
• Pastikan implementasi sesuai persyaratan
• Kurangi waktu siklus review

Pengembang

• Dapatkan umpan balik lebih cepat atas perubahan
• Demo fitur ke pemangku kepentingan secara instan
• Debug masalah dengan pengguna tertentu
• Hemat waktu dalam mengelola build beta

Perbandingan: Tradisional vs PR Previews

Praktik Terbaik

1. Beri nama channel dengan jelas: Gunakan pr-{number} konvensi agar mudah diidentifikasi
2. Bersih otomatis: Selalu hapus channel saat PR ditutup
3. Batasi akses: Hanya aktifkan shake menu di build debug/staging
4. Dokumentasikan prosesnya: Tambahkan instruksi pengujian ke template PR Anda
5. Tangani kegagalan dengan anggun: Pastikan pembuatan channel berhasil sebelum memposting komentar

Kapan Tidak Menggunakan PR Previews

PR previews untuk perubahan JavaScript/CSS. Jika PR Anda mencakup:

• Plugin Capacitor baru
• Perubahan native iOS code
• Perubahan native Android code
• Pembaruan dependensi yang memengaruhi native build

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

Kombinasi dengan Channel Surfing

PR preview bekerja maksimal jika digabung dengan menjelajahi channel. Aplikasi Anda bisa memiliki:

• production - Rilis stabil untuk semua user
• beta - Akses awal untuk user opt-in
• pr-123 - Preview fitur untuk PR tertentu

Tester dengan build produksi bisa pindah ke channel PR mana pun, tes fiturnya, lalu balik lagi — semua dengan aplikasi terpasang yang sama.

Sumber Daya

• Dokumentasi Capgo Live Updates
• Dokumentasi Channel
• Panduan Channel Surfing
• Referensi Perintah CLI
• Halaman Solusi PR Preview

Kesimpulan

PR preview mengubah cara tim Anda meninjau dan menguji fitur mobile. Alih-alih menunggu proses TestFlight dan mengelola banyak beta build, tester dapat beralih ke channel PR mana pun dalam hitungan detik menggunakan aplikasi yang sudah terinstal.

Setup-nya minimal—hanya butuh satu file workflow GitHub Actions—dan manfaatnya berlipat di seluruh tim. QA tidak terhambat, product manager bisa review lebih cepat, dan developer mendapat feedback lebih cepat.

Mulailah dengan menambahkan workflow ke satu repository dan lihat bagaimana hal ini mengubah proses review Anda.

Lanjutkan dari Mengubah Setiap Pull Request Menjadi Preview yang Bisa Diinstal

Jika Anda menggunakan Ubah Setiap Pull Request Menjadi Preview yang Bisa Diinstal untuk merencanakan routing channel dan staged rollout, hubungkan dengan Channel untuk detail implementasi di Channels, Channel untuk detail implementasi di Channels, Channel untuk detail implementasi di Channels, Solusi Beta Testing untuk workflow produk di Solusi Beta Testing, dan Solusi Version Targeting untuk workflow produk di Version Targeting Solution.