Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi yang Dapat Diinstal

Setiap tim pengembang mobile pasti pernah merasakan sakitnya: fitur sudah siap untuk dinilai, tapi untuk memasukkannya ke tangan stakeholders berarti harus menavigasi maze tinjauan beta TestFlight atau Google Play. 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 Penglihatan PR mengizinkan. Ketika seorang pengembang membuka permintaan pull, sebuah GitHub Action membuat saluran pembaruan khusus dan menerbitkan perubahan. Siapa pun yang memiliki aplikasi terinstal bisa beralih ke saluran itu, menguji fitur, dan beralih kembali - semua tanpa meninggalkan aplikasi yang sudah mereka miliki.

Masalah TestFlight

Alur kerja tradisional untuk menguji fitur mobile terlihat seperti ini:

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

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

Bagaimana Cara Kerja PR Previews

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

PR dibuka atau diperbarui - Aksi GitHub diaktifkan
Bundle diunggah - Perubahan JS/CSS Anda dikirim ke kanal PR khusus
Komentar diposting - Tester mendapatkan instruksi di PR
Pengujian Instan - Ganti saluran, uji, ganti kembali

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

Mengatur Pratinjau PR

Sebelum Anda dapat menerapkan pratinjau PR, proyek Anda harus dikonfigurasi dengan Capgo Live Updates. Ikuti panduan cepat Capgo jika Anda belum melakukannya. Panduan Cepat Capgo __CAPGO_KEEP_0__ Workflow Aksi

GitHub Actions Workflow

Kunci adalah flag ketika membuat saluran. Ini memungkinkan tes untuk berganti 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.'
            })

flag --self-assign __CAPGO_KEEP_0__ setChannel() API

Mengatur Capgo Token

Pergi ke halaman Capgo dashboard
Navigasikan ke Pengaturan > API Kunci
Buat kunci baru dengan all izin
Tambahkan sebagai CAPGO_TOKEN di repositori rahasia GitHub Anda

Bagaimana Tester Mengganti Saluran

Ada dua cara bagi tester untuk beralih ke saluran PR:

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

Para tester menggoncang perangkat mereka 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 melakukan tes, mereka menggoncang lagi dan kembali ke produksi. pr-123Menu goncangan menghandle seluruh alur secara otomatis:

Pengambilan semua saluran yang dapat diperbarui sendiri melalui __CAPGO_KEEP_0__

Pengambilan saluran dengan pencarian untuk menemukan PR tertentu listChannels()
Pengunduhan pembaruan setelah pemilihan
Pengumuman untuk memulai ulang dengan opsi “Mulai Ulang Sekarang” / “Nanti”
Opsi 2: Pilih Saluran Custom UI

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

- Pengambilan semua saluran dengan pengaturan sendiri diaktifkan

listChannels() - Mengubah perangkat ke saluran yang dipilih
setChannel() Dengan blok bangunan ini, Anda dapat membuat UI sederhana:

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

__CAPGO_KEEP_1__

// 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 yang lengkap, lihat artikel surfing saluran kami.

Membersihkan Saluran PR

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

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 saluran ketika PR ditutup, menjaga daftar saluran Anda tetap bersih.

Kemampuan Versi

Penglihatan PR hanya berfungsi ketika bundle JavaScript kompatibel dengan versi native yang terinstal. Jika PR Anda termasuk perubahan native code (plugin-plugin baru Capacitor, modifikasi iOS/Android), tester akan memerlukan build native baru.

Capgo secara otomatis memeriksa kemampuan versi. Jika bundle PR sasaran versi native yang berbeda dengan yang terinstal, update tidak akan diterapkan. Ini mencegah crash dari code yang tidak kompatibel.

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

Siapa yang Manfaat dari Penglihatan PR

Insinyur QA

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

Manajer Produk

Ulas fitur sebelum mereka diintegrasikan
Berikan umpan balik langsung pada PR
Pastikan implementasi sesuai dengan spesifikasi
Mengurangi waktu siklus ulasan

Pengembang

Dapatkan umpan balik yang lebih cepat pada perubahan
Tunjukkan fitur demo kepada stakeholders secara langsung
Debug masalah dengan pengguna tertentu
Gunakan waktu lebih sedikit untuk mengelola build beta

Pembandingan: Tradisional vs PR Previews

Aspek	TestFlight/Beta	Capgo PR Preview
Waktu pembangunan	15-30 menit	<1 menit
Mengganti PR	5+ menit reinstallasi	10 detik
Kompleksitas pengaturan	Kredensial App Store	Satu file workflow
Pembersihan	Manual	Otomoatis
Perubahan native code	Diperlukan	Opsional (JS hanya)

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 guncang pada build debug/staging
Dokumentasikan Proses: Tambahkan instruksi testing ke template PR Anda
Tangani Kegagalan dengan Baik: Pastikan pembuatan saluran berhasil sebelum mengomentari

Kapan Tidak Menggunakan Pratinjau PR

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

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

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

Menggabungkan dengan Channel Surfing

PR preview bekerja terbaik 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

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

Sumber Daya

Kesimpulan

Pratinjau PR mengubah cara tim Anda memeriksa dan menguji fitur mobile. Sebaliknya, Anda tidak perlu menunggu proses TestFlight dan mengelola banyak versi beta, tester dapat beralih ke saluran PR mana saja dalam beberapa detik menggunakan aplikasi yang sudah terinstal.

Pengaturan minimal - satu file kerja alur GitHub Actions - dan manfaatnya berkembang secara berkelanjutan di tim Anda. QA tetap tidak terblokir, manajer produk memeriksa lebih cepat, dan pengembang mendapatkan umpan balik lebih cepat.

Mulai dengan menambahkan alur kerja ke satu repositori dan lihat bagaimana hal itu mengubah proses pemeriksaan Anda.

Teruskan dari Mengubah Setiap Permintaan Gabung Jadi Pratinjau Instalasi

Jika Anda menggunakan Mengubah Setiap Permintaan Gabung Jadi Pratinjau Instalasi untuk merencanakan routing saluran dan peluncuran tahap demi tahap, hubungkannya dengan Saluran untuk detail implementasi di Saluran, Saluran untuk detail implementasi di Saluran, Saluran untuk detail implementasi di Saluran, Solusi Pengujian Beta untuk alur kerja produk di Solusi Pengujian Beta, dan Solusi Target Versi untuk alur kerja produk di Solusi Target Versi.

Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi yang Dapat Digunakan