Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi yang Dapat Digunakan

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 beta. Apa yang seharusnya memakan waktu menit-menit berubah menjadi jam-jam menunggu, menginstal, dan mengelola rilis beta.

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

Itu adalah PR Pratinjau mengaktifkan. Ketika seorang pengembang membuka permintaan pull, sebuah GitHub Action membuat saluran pembaruan khusus dan menerbitkan perubahan-perubahan tersebut. Siapa pun yang memiliki aplikasi terpasang dapat 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 tampak seperti ini:

1. Pengembang membuka PR - Code siap untuk tinjauan
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 dapat memverifikasi fitur dengan cepat. Pengembang kehilangan konteks sambil menunggu umpan balik. Industri memperkirakan biaya ini sekitar $340 per PR dalam produktivitas yang hilang.

Bagaimana PR Previews Bekerja

PR previews menggunakan sistem saluran Capgo untuk membuat aliran pembaruan per-PR.

1. PR dibuka atau diperbarui - Aksi GitHub diaktifkan
2. Bundle diunggah - Perubahan JS/CSS Anda masuk ke saluran 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.

Mengatur PR Previews

Sebelum Anda dapat menerapkan pratinjau PR, proyek Anda harus dikonfigurasi dengan Capgo Live Updates. Ikuti panduan cepat Capgo jika Anda belum melakukannya. Capgo panduan cepat Jika Anda belum melakukannya.

GitHub Workflow Aksi

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

Kunci adalah flag ketika membuat saluran. Ini memungkinkan tester untuk beralih ke saluran dari dalam aplikasi menggunakan __CAPGO_KEEP_0__. --self-assign Mengatur Token __CAPGO_KEEP_0__ setChannel() Pergi ke dashboard Anda API

Navigasikan ke Pengaturan > Capgo Kunci

1. __CAPGO_KEEP_0__ Panduan Cepat Capgo
2. Dashboard API
3. Membuat kunci baru dengan all izin
4. Tambahkan sebagai CAPGO_TOKEN di repositori rahasia GitHub Anda

Beralih ke Channel Tester

Ada dua cara untuk tester beralih ke channel PR:

Pilihan 1: Menu Guncang (Paling Sederhana)

Aktifkan menu guncang dengan pilihan channel 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 channel yang tersedia dengan bar pencarian. Mereka menemukan channel PR mereka (misalnya, pr-123) dan mengetuk untuk memilihnya. Aplikasi secara otomatis mengunduh dan menerapkan pembaruan. Ketika selesai melakukan tes, mereka mengguncang lagi dan beralih kembali ke produksi.

Menu guncang mengelola alur seluruhnya secara otomatis:

1. Mengambil semua channel yang dapat diterima sendiri melalui listChannels()
2. Mengampilkan saluran dengan pencarian untuk menemukan PR spesifik
3. Mengunduh pembaruan setelah pemilihan
4. Mengajak untuk memuat ulang dengan pilihan “Muat Ulang Sekarang” / “Nanti”

Pilihan 2: Pemilih Saluran Custom UI

Membangun switcher saluran ke dalam aplikasi Anda yang menampilkan saluran PR yang tersedia dan memungkinkan tes tersedia memilih salah satu. Ini menggunakan dua API kunci:

• 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 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 surfing saluran kami.

Menghapus Saluran PR

Ketika PR disatukan atau ditutup, Anda ingin membersihkan saluran. Tambahkan workflow 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 }}

This removes the channel when the PR is closed, menjaga daftar channel Anda bersih.

Kompatibilitas Versi

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

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

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

Siapa yang Manfaat dari PR Previews

Pengembang QA

• Uji fitur langsung ketika PR dibuka
• Pindah antara PR yang berbeda 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
• Pastikan implementasi sesuai dengan persyaratan
• Kurangi waktu siklus tinjauan

Pengembang

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

Perbandingan: Tradisional vs Previews PR

Praktik Terbaik

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

Kapan Tidak Menggunakan Pratinjau PR

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

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

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

Menggabungkan dengan Channel Surfing

Pratinjau rilis PR bekerja paling baik ketika dikombinasikan dengan menonton saluran TV. 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 - semua dengan aplikasi yang sama terpasang.

Sumber Daya

• Capgo Live Updates Dokumentasi
• Dokumentasi Saluran
• Tutorial Surfing Saluran
• CLI Referensi Perintah
• PR Preview Solutions Halaman

Kesimpulan

PR preview mengubah cara tim Anda memeriksa dan menguji fitur mobile. Sebaliknya, Anda tidak perlu menunggu proses TestFlight dan mengelola beberapa build beta, tester dapat beralih ke mana-mana PR channel dalam beberapa detik menggunakan aplikasi yang sudah terinstal.

Setupnya minimal - satu file workflow GitHub Actions - dan manfaatnya berkembang secara berkelanjutan di tim Anda. QA tetap tidak terblokir, manajer produk memeriksa lebih cepat, dan pengembang mendapatkan feedback lebih cepat.

Mulai dengan menambahkan workflow ke satu repository dan lihat bagaimana itu mengubah proses review Anda.

Teruskan dari Mengubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi

Jika Anda menggunakan Mengubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi untuk merencanakan routing channel dan peluncuran tahap, hubungkannya dengan Saluran untuk detail implementasi di Saluran, Saluran untuk detail implementasi di Channels, Channels untuk detail implementasi di Channels, Solusi Pengujian Beta untuk alur produk di Solusi Pengujian Beta, dan Solusi Target Versi untuk alur produk di Solusi Target Versi.