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 harus menavigasi maze tinjauan TestFlight atau Google Play beta. Yang seharusnya memakan waktu menit-meningkat 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 PR Preview 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 tersebut, menguji fitur, dan 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 tinjauan
2. Tunggu TestFlight - 15-30 menit waktu pengolahan
3. Cari dan instal - Tester mencari build yang tepat
4. - Test 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 alurannya:

1. PR dibuka atau diperbarui - Aksi GitHub diaktifkan
2. Bundle diunggah - Perubahan JS/CSS Anda dikirim ke kanal PR khusus
3. Komentar diposting - Tester mendapatkan instruksi di PR
4. 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.

Pengaturan Pr Previews

Sebelum Anda dapat menerapkan pr prewiews, proyek Anda harus dikonfigurasi dengan Capgo Live Updates. Ikuti panduan Capgo quickstart Capgo quickstart guide __CAPGO_KEEP_0__ Actions Workflow

GitHub Actions Workflow

Kunci adalah .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 ketika membuat saluran. Ini memungkinkan tes tester untuk berganti ke saluran dari dalam aplikasi menggunakan --self-assign __CAPGO_KEEP_0__. setChannel() API.

Menyiapkan Token Capgo

1. Pergi ke halaman Anda Capgo Dashboard Anda
2. Navigasikan ke Pengaturan > Kunci API
3. Membuat kunci baru dengan all izin
4. Tambahkan sebagai CAPGO_TOKEN dalam rahasia repositori GitHub Anda

Bagaimana Tester Mengubah Saluran

Ada dua cara untuk tester mengubah ke saluran PR:

Pilihan 1: Shake Menu (Paling Sederhana)

Mengaktifkan menu shake dengan pilihan saluran di konfigurasi Capacitor Anda:

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

Teser menggoncang perangkat mereka untuk membuka menu debug, yang menampilkan daftar saluran yang tersedia dengan bar pencarian. pr-123Mereka 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.

Menu goncang menghandle alur seluruhnya secara otomatis:

1. Pengambilan semua saluran yang dapat diterima sendiri melalui __CAPGO_KEEP_1__ listChannels()
2. Penggunaan saluran dengan pencarian untuk menemukan PR tertentu __CAPGO_KEEP_2__
3. Pengunduhan pembaruan setelah pemilihan __CAPGO_KEEP_3__
4. Pengumuman untuk reload dengan pilihan “Reload Sekarang” / “Nanti” __CAPGO_KEEP_4__

Pilihan 2: Pilih Saluran yang Dibuat Sendiri

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

• listChannels() Pengambilan semua saluran dengan pengaturan pengasosiasi sendiri __CAPGO_KEEP_5__
• setChannel() Pengganti perangkat ke saluran yang dipilih __CAPGO_KEEP_6__

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 __CAPGO_KEEP_7__

// 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 kami tentang surfing channel.

Menghapus Saluran PR

Ketika PR ditutup atau diintegrasikan, 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 }}

Saluran ini akan dihapus ketika PR ditutup, sehingga daftar saluran Anda tetap bersih.

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

Siapa yang Manfaat dari Pratinjau PR

Insinyur QA

• context: Halaman/Saluran: Halaman pemasaran solusi Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman solusi/pr-preview.astro. Kunci pesan `solutions_pr_preview_teams_qa` (Solutions Pr Preview Teams Qa).
• Switch antara PR beberapa tanpa harus menginstal ulang
• Verifikasi perbaikan dan regresi pada perangkat nyata
• Tidak perlu menunggu proses TestFlight lagi

Pengelola Produk

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

Pengembang

• Dapatkan feedback yang lebih cepat atas perubahan
• Demo fitur kepada stakeholder secara instan
• Debug masalah dengan pengguna tertentu
• Sudahkan waktu untuk mengelola build beta

Perbandingan: Tradisional vs Pr 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 shake pada build debug/staging
4. Dokumentasikan proses: Tambahkan instruksi testing ke template PR
5. Berlaku gagal dengan sopan: Pastikan pembuatan saluran berhasil sebelum mengirim komentar

Kapan Tidak Menggunakan Pratinjau PR

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

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

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

Menggabungkan dengan Channel Surfing

PR preview akan lebih efektif jika digabungkan dengan channel surfing. 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 build produksi dapat beralih ke saluran PR mana saja, menguji fitur, kemudian kembali ke saluran asli - semua dengan aplikasi yang sama yang terpasang.

Sumber Daya

• Capgo Live Updates Dokumentasi
• Saluran Dokumentasi
• Panduan Mengembara Saluran
• CLI Referensi Perintah
• Halaman Solusi Pratinjau PR

Kesimpulan

Pratinjau PR mengubah cara tim Anda melakukan tinjauan dan menguji fitur mobile. Sebaliknya dari menunggu proses TestFlight dan mengelola beberapa versi beta, tester dapat beralih ke saluran PR mana pun dalam beberapa detik menggunakan aplikasi yang sudah terinstal.

Konfigurasi minimal - satu file kerja aliran GitHub - 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 aliran ke satu repositori dan lihat bagaimana hal itu mengubah proses tinjauan Anda.

Teruskan dari Mengubah Setiap Permintaan Gabung Menjadi Pratinjau Instalasi

Jika Anda menggunakan Mengubah Setiap Permintaan Gabung Menjadi Pratinjau Instalasi Untuk merencanakan routing saluran dan peluncuran tahap demi tahap, hubungkannya dengan Saluran context":"Fitur saluran rilis 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":"Fitur saluran rilis 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":"Fitur saluran rilis 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, Solusi Pengujian Beta