Vai al contenuto principale
Tutorial

Trasforma ogni Richiesta di Pulizia in una Previsione Installabile

Non aspettare più il processo di TestFlight. Le previsioni PR di Capgo consentono a QA, PM e stakeholder di testare le funzionalità su dispositivi reali in meno di un minuto.

Martin Donadieu

Martin Donadieu

Content Marketer

Trasforma ogni Richiesta di Pulizia in una Previsione Installabile

Ogni team di sviluppo mobile ha provato il dolore: una feature è pronta per la revisione, ma farla entrare nelle mani degli stakeholder significa navigare il labirinto di revisione di TestFlight o Google Play beta. Quello che dovrebbe richiedere minuti si trasforma in ore di attesa, installazione e gestione di build beta.

Che se la tua app di produzione potesse estrarre le ultime modifiche da qualsiasi richiesta di pull direttamente sul dispositivo, senza alcuna reinstallazione o ritardi dell'App Store?

È quello che le anteprime dei PR abilitano. Quando un sviluppatore 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 flusso di lavoro tradizionale per testare le feature mobili assomiglia a questo:

  1. Sviluppatore apre PR - Code è pronto per la revisione
  2. Attendi TestFlight - 15-30 minuti di tempo di elaborazione
  3. Cerca e installa - I tester cercano la versione giusta
  4. Testa e ripeti - Ogni cambiamento significa un altro attesa

Ciò crea un punto di bottiglia. La QA si blocca in attesa di costruire. I responsabili dei prodotti non possono verificare le funzionalità velocemente. Gli sviluppatori perdono il contesto mentre attendono i feedback. L'industria stima che questo costa circa 340 dollari per PR in produttività persa.

Come Funziona la Previsualizzazione PR

Le previsualizzazioni PR utilizzano il sistema di canali di Capgo per creare flussi di aggiornamenti specifici per PR. Ecco il flusso:

  1. PR aperto o aggiornato - GitHub Azione attiva
  2. Pacchetto caricato - Le tue modifiche JS/CSS vanno in un canale specifico per PR
  3. Commento pubblicato - I tester ricevono istruzioni nella PR
  4. Test di istantanea - Passa tra i canali, test, torna indietro

Nessuna nuova installazione di app. Nessun ritardo di TestFlight. L'app di produzione può estrarre da diversi canali di aggiornamento.

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 la guida di avvio rapido di Capgo se non l'hai già fatto.

Flusso di lavoro di GitHub Actions

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 bandiera quando si crea il canale. Ciò consente ai tester di passare al canale dall'app stessa utilizzando il setChannel() API.

Impostazione del token Capgo

  1. Vai alla tua dashboard Capgo
  2. Naviga a Impostazioni > Chiavi API
  3. Genera una nuova chiave con all permessi
  4. Aggiungila come CAPGO_TOKEN nel segreti del tuo repository GitHub

Come i tester passano ai canali

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

Opzione 1: Menu di scuotimento (più semplice)

Abilita il menu di scuotimento con selezione del canale nella tua configurazione Capacitor:

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

Testatori 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 PR (ad esempio, __CAPGO_KEEP_0__), cliccano per selezionarlo e l'applicazione scarica e applica automaticamente l'aggiornamento. Quando hanno finito di testare, scuotono nuovamente e tornano al canale di produzione. pr-123La menu di scuotimento gestisce l'intero flusso automaticamente:

Recupera tutti i canali auto-assegnati tramite __CAPGO_KEEP_0__

  1. Visualizza canali con ricerca per trovare PR specifici listChannels()
  2. Scarica l'aggiornamento dopo la selezione
  3. Promuove il riavvio con le opzioni “Riavvia ora” / “Più tardi”
  4. Opzione 2: Selezione personalizzata del canale UI

Costruisci un commutatore di canali all'interno dell'applicazione che elenchi i canali PR disponibili e consenta ai testatori di scegliere uno. Questo utilizza due API chiave:

- Recupera tutti i canali con l'assegnazione auto-abilitata

  • listChannels() - Commuta il dispositivo sul canale selezionato
  • setChannel() Con questi blocchi di costruzione, puoi creare una semplice UI:
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;
}

Testatori 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 PR (ad esempio, __CAPGO_KEEP_0__), cliccano per selezionarlo e l'applicazione scarica e applica automaticamente l'aggiornamento. Quando hanno finito di testare, scuotono nuovamente e tornano al canale di produzione.

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

For un esempio completo di componente React, vedere il nostro articolo sul canale di ricerca.

Pulizia dei canali PR

Quando un PR viene unito 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 tua lista di canali pulita.

Compatibilità della versione

Il previsualizzazione dei PR funziona 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ò prevenirebbe i crash da code incompatibili.

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

Chi beneficia delle previsualizzazioni dei PR

Ingegneri QA

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

Gestori dei prodotti

  • Revisiona le funzionalità prima che vengano merge
  • Dai feedback direttamente sul PR
  • Verifica che l'implementazione corrisponda alle richieste
  • Riduci il tempo del ciclo di revisione

Developer

  • Otteni feedback più veloci sulle modifiche
  • Fai una demo delle funzionalità ai stakeholder istantaneamente
  • Debugga gli issue con gli utenti specifici
  • Spend less time gestendo le versioni beta

Comparisone: Tradizionale vs anteprima PR

AspettoTestFlight/BetaCapgo Anteprima PR
Tempo di costruzione15-30 min<1 min
Passaggio tra anteprime PR5+ min reinstallazione10 secondi
Complessità di configurazione di setupCredenziali di App StoreUn file di workflow
PuliziaManualeAutomatico
Modifiche native codeObbligatorioFacoltativo (solo JS)

Pratiche consigliate

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

Quando non utilizzare le anteprime delle PR

Le anteprime delle PR sono per modifiche JavaScript/CSS. Se la tua PR include:

  • Nuovi Capacitor plugin
  • Modifiche native iOS code
  • Modifiche native Android code
  • Aggiornamenti di dipendenza che influiscono sui costrutti nativi

Per quelle modifiche avrai bisogno di una distribuzione tradizionale di TestFlight/Play Store.

Combinazione con Channel Surfing

Le anteprime dei PR funzionano meglio quando sono combinate con channel surfingLa 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

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

Risorse

Conclusioni

Le anteprime PR trasformano il modo in cui il tuo team esamina e testa le funzionalità mobili. Invece di attendere il processo di TestFlight e gestire più build 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 vedi come cambia il tuo processo di revisione.

Continua da Qui ogni richiesta di commit si trasforma in anteprima installabile

Se stai utilizzando Qui ogni richiesta di commit si trasforma in anteprima installabile per pianificare la routing del canale e la distribuzione in fasi, connettilo con Canali per i dettagli di implementazione in Canali, Canali per i dettagli di implementazione in Canali, Canali per i dettagli di implementazione in Canali, Soluzione di Test Beta per il workflow del prodotto in Soluzione di Test Beta, e Soluzione di Targeting della Versione per il workflow del prodotto in Soluzione di Targeting della Versione.

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug del layer web è attivo, invia la correzione attraverso Capgo invece di attendere giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile veramente professionale.