Mengubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi

Setiap tim pengembang mobile telah merasakan sakitnya: fitur sudah siap untuk tinjauan, tapi mendapatkannya ke tangan stakeholders berarti menavigasi labirin tinjauan TestFlight atau Google Play. Apa 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 perubahan secara langsung ke perangkat, tanpa ada penginstalan ulang atau penundaan toko aplikasi?

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

Masalah TestFlight

Alur tradisional untuk menguji fitur mobile terlihat seperti ini:

1. Pengembang membuka PR - Code siap untuk tinjauan
2. Tunggu TestFlight - 15-30 menit waktu pengolahan
3. Cari 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 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 preview 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 mengambil dari saluran pembaruan yang berbeda.

Pengaturan PR Preview

Sebelum Anda dapat menerapkan PR preview, proyek Anda harus dikonfigurasi dengan Capgo Live Update. Ikuti Capgo Panduan Quickstart 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 --self-assign mengaktifkan flag saat membuat saluran. Ini memungkinkan teser untuk beralih ke saluran dari dalam aplikasi menggunakan setChannel() API.

Mengatur Token Capgo

1. Pergi ke Navigasikan ke Pengaturan > Kunci Capgo
2. Pergi ke Pengaturan > Kunci API
3. __CAPGO_KEEP_0__ adalah singkatan dari __CAPGO_KEEP_0__. all izin
4. Tambahkan sebagai CAPGO_TOKEN di repositori rahasia GitHub Anda

Bagaimana Tester Mengganti Saluran

Ada dua cara bagi tester untuk mengganti ke saluran PR:

Option 1: Menu Guncang (Paling Sederhana)

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

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

Menu guncang mengelola alur seluruhnya secara otomatis:

1. Mengambil semua saluran yang dapat di-assign sendiri melalui listChannels()
2. Mengampilkan saluran dengan pencarian untuk menemukan PR tertentu
3. Unduh pembaruan setelah pemilihan
4. Meminta untuk memulai ulang dengan pilihan “Mulai Ulang Sekarang” / “Nanti”

Option 2: Pilih Saluran Custom UI

Buatlah pengubah saluran ke dalam aplikasi Anda yang menampilkan saluran PR yang tersedia dan memungkinkan tester 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 kami tentang surfing saluran.

Menghapus Saluran PR

Ketika sebuah PR diintegrasikan 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.

Kompatibilitas Versi

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

Capgo secara otomatis memeriksa kompatibilitas versi. Jika PR memiliki bundle yang mengarah ke versi native yang berbeda dari yang terinstal, maka update tidak akan diterapkan. Hal ini mencegah crash karena code yang tidak kompatibel.

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 Kualitas

• Coba fitur secara langsung ketika PR dibuka
• Ganti antara PR beberapa tanpa harus menginstal ulang
• Periksa perbaikan dan regresi pada perangkat nyata
• Tidak perlu menunggu lagi proses pengujian.

Manajer Produk

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

Para Pengembang

• Terima umpan balik yang lebih cepat atas perubahan
• Demo fitur kepada stakeholder secara instan
• Debug masalah dengan pengguna tertentu
• Menghemat waktu untuk mengelola versi beta

Pertimbangan: Tradisional vs Pratinjau PR

Praktik Terbaik

1. Berikan nama saluran dengan jelas: Gunakan pr-{number} konvensi untuk identifikasi yang mudah
2. Auto-cleanup: 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. Handle kegagalan dengan sopan: Pastikan pembuatan channel berhasil sebelum mengirim komentar

Mengapa Tidak Menggunakan Pratinjau PR

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

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

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

Menggabungkan dengan Channel Surfing

Pratinjau PR bekerja dengan baik ketika digabungkan dengan melihat 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

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

Sumber Daya

• Capgo Dokumentasi Live Update
• Dokumentasi __CAPGO_KEEP_0__ Live Updates
• Dokumentasi Saluran
• CLI Commands Reference
• Dokumentasi __CAPGO_KEEP_0__ Referensi Perintah

Kesimpulan

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

Setupnya minimal - satu file kerja Actions GitHub - dan manfaatnya berkumpul di tim Anda. QA tetap tidak terblokir, manajer produk melakukan tinjauan lebih cepat, dan pengembang mendapatkan feedback lebih cepat.

Mulai dengan menambahkan alur kerja 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 Ubah Setiap Permintaan Pull Menjadi Pratinjau Instalasi yang Dapat Dibuka untuk merencanakan routing saluran dan peluncuran tahap demi tahap, hubungkannya dengan Saluran untuk detail implementasi di Channel, Saluran untuk detail implementasi di Channel, Saluran untuk detail implementasi di Saluran, Sistem Uji Coba Beta untuk alur produk di Pengujian Beta, dan Solusi Target Versi untuk alur kerja produk dalam Solusi Targeting Versi.