Trasforma ogni richiesta di pull in un'anteprima installabile

Ogni team di sviluppatori mobili ha provato il dolore: una funzionalità è pronta per la revisione, ma farla arrivare nelle mani degli stakeholder significa navigare il labirinto di revisione di TestFlight o Google Play beta. Ciò che dovrebbe richiedere minuti si trasforma in ore di attesa, installazione e gestione di build beta.

Cosa se il tuo'app di produzione potesse estrarre le ultime modifiche da qualsiasi richiesta di pulizia direttamente sul dispositivo, senza alcuna reinstallazione o ritardi degli store?

Ecco cosa Anteprime PR abilita. Quando un developer apre una richiesta di pull, un GitHub Action crea un canale di aggiornamento dedicato e pubblica le modifiche. Chiunque abbia l'app installata può passare a quel canale, testare la feature e tornare indietro - tutto senza lasciare l'app che già ha.

Il Problema di TestFlight

Il tradizionale workflow per testare le feature mobili assomiglia a questo:

Developer apre PR - Code è pronto per la revisione
Aspetta TestFlight - 15-30 minuti di tempo di elaborazione
Trova e installa - I tester cercano la build giusta
Testa e ripeti - Ogni modifica significa un altro atteso

Ciò crea un bottleneccio. La QA si blocca aspettando i build. I manager di prodotto non possono verificare le feature velocemente. I developer perdono il contesto mentre aspettano i feedback. L'industria stima che questo costa circa 340 dollari per PR in produttività persa.

How PR Previews Work

Il funzionamento delle anteprime dei PR utilizza il sistema dei canali di Capgo per creare flussi di aggiornamento specifici per ogni PR. Ecco il flusso:

PR aperto o aggiornato - GitHub Action attiva un'azione
Caricamento del bundle - Le tue modifiche JS/CSS vanno in un canale specifico per il PR
Commento pubblicato - Gli tester ricevono istruzioni nel PR
Test in tempo reale - Cambia canale, testa, torna indietro

Senza nuove installazioni dell'app. Senza ritardi di TestFlight. Lo stesso app di produzione può estrarre aggiornamenti da canali diversi.

Configurazione delle anteprime dei PR

Prima di poter implementare le anteprime dei PR, il tuo progetto deve essere configurato con Capgo Aggiornamenti in Tempo Reale. Segui il Capgo guida di avvio rapido se non l'hai già fatto.

GitHub Flusso di lavoro di Azioni

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

La chiave è la --self-assign flag quando si crea il canale. Ciò consente ai tester di passare al canale dall'applicazione utilizzando il setChannel() API.

Configurazione del Token Capgo

Vai al tuo Capgo dashboard
Naviga a Impostazioni > API Chiavi
Genera una nuova chiave con all permessi
Aggiungila come CAPGO_TOKEN nel tuo GitHub repository secrets

Come i tester cambiano canale

Ci sono due modi per cui i tester possono passare a un canale di PR:

Abilita il menu di scuotimento con selezione del canale nel tuo Capacitor config:

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

I tester scuotono il loro dispositivo per aprire il menu di debug, che mostra una lista dei canali disponibili con una barra di ricerca. Trovano il loro canale di PR (ad esempio, pr-123tappano per selezionarlo e l'applicazione scarica e applica automaticamente l'aggiornamento. Quando hanno finito di testare, scuotono nuovamente e tornano al canale di produzione.

Il menu di scuotimento gestisce l'intero flusso automaticamente:

Estrae tutti i canali auto-assegnabili tramite listChannels()
Visualizza canali con ricerca per trovare PR specifici
Scarica l'aggiornamento dopo la selezione
Promuove il riavvio con le opzioni 'Riavvia ora' / 'Più tardi'

Opzione 2: Selezione personalizzata del canale UI

Crea un commutatore di canali all'interno dell'app che elenca i canali PR disponibili e consente ai tester di scegliere uno. Questo utilizza due API chiave:

listChannels() - Elenca tutti i canali con l'assegnazione autoabilitata
setChannel() - Sposta il dispositivo sul canale selezionato

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

Con questi blocchi di costruzione, puoi creare una semplice UI:

// 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');

Per un esempio completo di componente React, vedi il nostro articolo sul canale surfing.

Pulizia dei Canali PR

Quando un PR viene fuso o chiuso, vorrai pulire il canale. Aggiungi un altro workflow:

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

Questo elimina il canale quando il PR è chiuso, mantenendo la lista dei canali pulita.

Compatibilità della Versione

I preview dei PR funzionano solo quando il bundle JavaScript è compatibile con la versione nativa installata. Se il tuo PR include modifiche native code (nuovi plugin Capacitor, modifiche iOS/Android), i tester avranno bisogno di una nuova build nativa.

Capgo controlla automaticamente la compatibilità della versione. Se il bundle di un PR punti a una versione nativa diversa da quella installata, l'aggiornamento non verrà applicato. Ciò prevenisce gli crash da code incompatibili.

Per i PR che richiedono modifiche native, avrai bisogno di distribuire una nuova build di TestFlight/Play Store. I preview dei PR funzionano meglio per le modifiche JavaScript, CSS e asset che non toccano la code nativa.

Chi Beneficia dei Preview dei PR

Ingegneri di QA

Verifica le funzionalità immediatamente quando i PR sono aperti
Passa tra più PR senza reinstallare
Verifica le correzioni e le regressioni su dispositivi reali
Non più attesa per il processo di TestFlight

Gestori di Prodotto

Valuta le caratteristiche prima che vengano merge
Fornisci feedback direttamente sul PR
Verifica che l'implementazione corrisponda alle richieste
Riduci il tempo di ciclo di revisione

Developer

Otteni un feedback più veloce sulle modifiche
Mostra le caratteristiche ai stakeholder istantaneamente
Solve problemi di debug con utenti specifici
Passa meno tempo a gestire le versioni beta

Confronto: Tradizionale vs Previsioni del PR

Aspetto	TestFlight/Beta	Capgo Anteprima PR
Tempo di costruzione	15-30 min	Menos di 1 minuto
Passaggio tra PR	5+ minuti di reinstallazione	10 secondi
Complessità di setup	Credenziali di App Store	Un file di workflow
Pulizia	Manuale	Automatico
Modifiche native code	Richiesto	Facoltativo (solo JS)

Pratiche Raccomandate

Nome i canali in modo chiaro: Utilizza pr-{number} una convenzione per un'identificazione facile
Pulizia automatica: Elimina sempre i canali quando si chiudono le PR
Limita l'accesso: Abilita il menu a scorrimento solo nei build debug/staging
Documenta il processo: Aggiungi istruzioni di testing al template del tuo PR
Gestisci le fallite con grazia: Assicurati che la creazione del canale riesca prima di pubblicare commenti

Quando non utilizzare anteprime dei PR

Le anteprime dei PR sono per modifiche JavaScript/CSS. Se il tuo PR include:

Nuovi Capacitor plugin
Modifiche native iOS code
Modifiche native Android code
Aggiornamenti delle dipendenze che influiscono sui build nativi

Avrai bisogno di una distribuzione tradizionale con TestFlight/Play Store per quelle modifiche.

Combinare con Channel Surfing

Le anteprime dei PR funzionano meglio quando sono combinati con la navigazione tra canali. La tua app può avere:

production - Rilasci stabili per tutti gli utenti
beta - Accesso anticipato per gli utenti che si iscrivono
pr-123 - Anteprime di funzionalità per specifici PR

Gli tester con build di produzione possono passare a qualsiasi canale PR, testare la funzionalità, poi tornare indietro - tutto con la stessa app installata.

Risorse

Conclusioni

Le anteprime del PR trasformano il modo in cui il tuo team esamina e testa le funzionalità mobili. Invece di dover attendere il processo di TestFlight e gestire più versioni beta, i tester possono passare a qualsiasi canale PR in secondi utilizzando l'app che già hanno installato.

La configurazione è minima - un file di workflow GitHub Actions - e i benefici si accumulano nel tuo team. La QA rimane bloccata, i manager di prodotto esaminano più velocemente e gli sviluppatori ricevono feedback più veloci.

Inizia aggiungendo il workflow a un repository e scopri come cambia il tuo processo di revisione.

Trasforma ogni Richiesta di Pulizia in una Vista Installabile