모바일 PR을 설치 가능한 미리보기로 변환하세요.

모바일 개발 팀은 모두 같은 고통을 겪었습니다: 기능이 검토 대기열에 들어가기 위해, 테스트 플라이트나 구글 플레이 베타 검토迷로 들어가야 합니다. 몇 분이 걸리는 것이 몇 시간의 기다리기, 설치하기, 베타 빌드 관리하기로 변합니다.

만약 여러분의 프로덕션 앱이 어떤 PR에서 최신 변경 사항을 직접 장치에 가져올 수 있다면?

그것은 __CAPGO_KEEP_0__ 액션을 열 때 개발자가 PR을 열 때, 전용 업데이트 채널을 만들고 변경 사항을 배포합니다. 앱을 설치한 모든 사용자는 채널을switch, 기능을 테스트하고 다시 switch할 수 있습니다 - 모든 것이 이미 설치한 앱에서 벗어나지 않고. 테스트 플라이트 문제가 있습니다. enable. When a developer opens a pull request, a GitHub Action creates a dedicated update channel and publishes the changes. Anyone with the app installed can switch to that channel, test the feature, and switch back - all without leaving the app they already have.

The TestFlight Problem

모바일 기능 테스트의 전통적인 워크플로는 다음과 같습니다.

1. 개발자는 PR을 열어 - Code이 검토 대기 중입니다.
2. 테스트 플라이트를 기다려 - 15-30분의 처리 시간
3. 찾아 설치 - 테스터는 올바른 빌드를 찾습니다.
4. 테스트 및 반복 - 모든 변경 사항은 또 다른 기다림을 의미합니다.

이것은 병목 현상을 만듭니다. QA는 빌드가 준비될 때까지 기다리며, 제품 관리자는 기능을 신속하게 검증할 수 없으며, 개발자는 피드백을 기다리며 맥락을 잃습니다. 업계에서는 이로 인한 생산성 손실로 약 $340의 비용이 발생한다고 추정합니다.

PR 미리보기의 작동 방식

PR 미리보기는 Capgo의 채널 시스템을 사용하여 PR당 업데이트 스트림을 생성합니다. 여기서의 흐름은 다음과 같습니다.

1. PR이 열리거나 업데이트되었습니다. - GitHub 액션 트리거
2. 배포 패키지가 업로드되었습니다. - JS/CSS 변경 사항은 PR별 채널로 이동됩니다.
3. 댓글이 게시되었습니다. - 테스터는 PR에 대한 지침을 받습니다.
4. 즉시 테스트 - 채널을 전환하고 테스트하고 다시 전환하세요.

새로운 앱 설치가 없습니다. 테스트 플라이트 지연이 없습니다. 동일한 프로덕션 앱이 다른 업데이트 채널에서 업데이트를 받을 수 있습니다.

PR 미리보기 설정

PR 미리뷰를 구현하기 전에 프로젝트는 Capgo Live Updates와 함께 구성되어야 합니다. Capgo quickstart 가이드를 따라하세요. 프로젝트는 Capgo Live Updates와 함께 구성되어야 합니다. 만약 이미 하지 않았다면.

GitHub Actions Workflow

__CAPGO_KEEP_0__을 생성하세요. .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.'
            })

__CAPGO_KEEP_0__은 채널을 만들 때 사용하는 키입니다. 이 키를 사용하면 앱 내에서 채널을 Switch할 수 있습니다. __CAPGO_KEEP_0__을 사용합니다. --self-assign __CAPGO_KEEP_0__ 설정 setChannel() API 토큰을 설정하세요.

Capgo 홈페이지로 이동하세요.

1. __CAPGO_KEEP_0__ 설정 > __CAPGO_KEEP_0__ 키로 이동합니다. Capgo 키를 생성하세요. 권한을 Capgo으로 설정하세요.
2. API
3. __CAPGO_KEEP_0__ all __CAPGO_KEEP_0__
4. 추가하세요 CAPGO_TOKEN GitHub 저장소 비밀에 추가하세요

채널 Switch 방법

테스터가 PR 채널로 switch하는 방법은 두 가지입니다.

Option 1: Shake 메뉴 (가장 단순한 방법)

Capacitor 설정에서 shake 메뉴와 채널 선택기를 활성화하세요.

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

테스터는 장치에 흔들어 debug 메뉴를 열어, 검색바가 있는 채널 목록을 표시합니다. 그들은 PR 채널 (예를 들어, )을 찾고, 선택하여 앱이 자동으로 업데이트 다운로드 및 적용합니다. 테스트가 끝나면 다시 흔들어 생산 채널로 switch합니다. pr-123shake 메뉴는 자동으로 모든 흐름을 처리합니다:

채널을 __CAPGO_KEEP_0__에서 가져옵니다.

1. 채널 목록에 검색을 통해 특정 PR를 찾습니다. listChannels()
2. 채널 선택 후 업데이트 다운로드합니다.
3. 테스터는 shake 메뉴를 사용하여 자동으로 모든 흐름을 처리합니다.
4. Reload Now

Reload Now

Channel 선택 UI

• listChannels() 앱에 채널 Switcher를 빌드하여 사용 가능한 PR 채널 목록을 표시하고 테스터가 채널을 선택할 수 있도록 합니다. 이 기능은 두 가지 API를 사용합니다.
• setChannel() - 채널 목록을 가져오기 위해 self assignment이 활성화된 채널을 가져옵니다.

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

- 선택한 채널으로 장치를 Switch합니다.

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

이러한 빌딩 블록을 사용하여 간단한 UI를 만들 수 있습니다. 완전한 React 컴포넌트 예제를 보려면.

채널 서핑 기사

PR 채널 정리

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

PR가 병합되거나 닫히면 채널을 정리하고 싶을 것입니다. 추가 워크플로를 추가하십시오.

PR가 닫히면 채널을 삭제하여 채널 목록을 깨끗하게 유지합니다.

PR 예고본은 JavaScript 번들을 설치된 네이티브 버전과 호환되는 경우에만 작동합니다. PR이 네이티브 code 변경 사항(새 Capacitor 플러그인, iOS/Android 수정)을 포함하는 경우 테스터는 새로운 네이티브 빌드를 필요로 합니다.

Capgo은 버전 호환성을 자동으로 확인합니다. PR의 번들이 설치된 네이티브 버전과 다를 경우 업데이트가 적용되지 않습니다. 이로 인해 호환되지 않는 code으로 인한 충돌을 방지합니다.

JavaScript, CSS 및 자산 변경이 네이티브 code을 건드리지 않는 PR의 경우, JavaScript, CSS 및 자산 변경이 네이티브 code을 건드리지 않는 PR의 경우, TestFlight/Play Store 빌드를 배포해야 합니다.

PR 예고본의 이점

품질 보증 엔지니어

• PR이 열릴 때 테스트 기능을 즉시 테스트합니다.
• 다중 PR Switching을 통해 다시 설치할 필요 없이 여러 PR을 전환합니다.
• 실제 장치에서 고정 및 회귀를 확인합니다.
• TestFlight 처리 대기 시간이 더 이상 없습니다.

제품 관리자

• 기능을 병합되기 전에 리뷰합니다.
• PR에 직접 feedback를 제공합니다.
• __CAPGO_KEEP_0__ PR Preview
• 개발자

__CAPGO_KEEP_0__ 변경 사항에 대한 더 빠른 피드백을 받으세요

• __CAPGO_KEEP_0__ 스테이크 홀더에게 기능을 데모하세요
• __CAPGO_KEEP_0__ 특정 사용자와 문제를 디버깅하세요
• __CAPGO_KEEP_0__ 베타 빌드 관리 시간을 줄이세요
• __CAPGO_KEEP_0__: 전통적인 방법 vs PR 전시

__CAPGO_KEEP_0__

최선의 방법

1. 채널 이름을 명확하게 하세요: 사용 pr-{number} 쉽게 식별할 수 있는 convention을 사용하세요
2. 자동 정리: PR이 닫힐 때 항상 채널을 삭제하세요
3. 접근 제한: 디버그/스테이징 빌드에서만 shake 메뉴를 활성화하세요
4. 프로세스를 문서화하세요: PR 템플릿에 테스트 지침을 추가하세요
5. 실패를 무마하는 방법: 채널 생성이 성공하기 전에 댓글을 게시하기 전에 확인하세요

PR 전시를 사용하지 않는 경우

PR 전시는 자바스크립트/CSS 변경에만 사용합니다. PR에 포함된 경우:

• 새 Capacitor 플러그인
• iOS 네이티브 code 변경
• Android 네이티브 code 변경
• 네이티브 빌드에 영향을 미치는 의존성 업데이트

이러한 변경 사항은 전통적인 테스트 플라이트/플레이 스토어 배포가 필요합니다.

채널 서핑과 결합

PR 전시는 채널 서핑과 함께 사용할 때 가장 잘 작동합니다. 채널 서핑. 앱은 다음과 같은 기능을 가질 수 있습니다:

• production - 모든 사용자에게 안정적인 릴리스
• beta - 옵트인 사용자에게 이른 접근
• pr-123 - 특정 PR에 대한 기능 미리보기

테스터는 프로덕션 빌드에서 PR 채널로 switch할 수 있으며, 기능을 테스트한 후 다시 switch할 수 있습니다 - 모든 것이 동일한 설치된 앱으로.

자원

• Capgo Live Updates Documentation
• 채널 문서
• 채널 서핑 가이드
• CLI Commands Reference
• PR 미리보기 솔루션 페이지

결론

__CAPGO_KEEP_0__

The setup is minimal - one GitHub Actions workflow file - and the benefits compound across your team. QA stays unblocked, product managers review faster, and developers get quicker feedback.

설치는 최소화되었습니다 - 하나의 __CAPGO_KEEP_0__ Actions 워크플로 파일 - 그리고 이 팀의 이점은 복합적으로 누적됩니다. QA가 막힘없이 남아있고, 제품 매니저가 더 빠르게 검토하고, 개발자가 더 빠른 feedback을 받습니다.

먼저 워크플로를 하나의 저장소에 추가하고, 리뷰 프로세스를 어떻게 바뀌는지 확인하세요.

Turn Every Pull Request Into an Installable Preview 만약에 Turn Every Pull Request Into an Installable Preview 를 사용하여 채널 라우팅과 스테이지드 롤아웃을 계획하고 있다면, Channels 와 연결하세요. Channels 의 implementation detail을 확인하세요. Channels에서 구현 세부 정보에 대해 Beta 테스트 솔루션의 제품 워크플로에 대해 Version Targeting 솔루션의 제품 워크플로에 대해 Version Targeting 솔루션 Beta Testing Solution