Base44 to Native Mobile Apps with Capacitor

소개

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__는 AI가 지원하는 앱 빌더로, 프롬프트에서 완전한 React 애플리케이션을 생성합니다. 브라우저에서 작동하는 제품을 빠르게 배포할 수 있지만 iOS와 Android로 배포하고 싶다면? 이 튜토리얼에서는 Base44 프로젝트를 내보내고 Native 모바일 앱으로 변환하는 방법을 보여줍니다. Capacitor__CAPGO_KEEP_0__ 빌더와 함께 signed store 바이너리를 배송하세요. Capgo 빌더 — iOS에 대한 Mac이 필요하지 않습니다. 이 가이드의 끝에서, Base44 앱은 iOS와 Android에서 네이티브로 실행되며 카메라, 저장소, 푸시 알림과 같은 장치 기능에 접근할 수 있습니다.

필수 조건 및 시간 예상

처음 사용하는 경우 시간이 걸립니다: 2-4시간

시스템 요구 사항iOS 클라우드 빌드

: __CAPGO_KEEP_0__ 빌더와 함께 Any OS (Windows, Mac, 또는 Linux):

Android 클라우드 빌드: Capgo 빌더와 함께 Any OS
__CAPGO_KEEP_0__ Builder__CAPGO_KEEP_0__ Builder
저장소: 의존성 및 빌드 아티팩트에 대한 10GB 무료 공간
RAM: 8GB 최소

비용:

Base44 export: 빌더 플랜 이상 (GitHub export 및 ZIP 다운로드)
iOS 앱 스토어: 연간 $99 (애플 개발자 계정)
안드로이드 플레이 스토어: 일회 $25 (구글 플레이 개발자 계정)
Cursor Pro월 $20 (권장)

필수 소프트웨어:

Node.js 18+
Capgo에서 지원하는 code 에디터 Cursor

Base44 앱을 모바일로 변환하는 이유

확장된 접근성: 사용자가 모바일 앱 아이콘을 기대하는 곳에서 만나는 것이 아니라 브라우저 탭
네이티브 기능: 카메라, GPS, 생체 인식, 오프라인 저장을 위한 Capacitor 플러그인
앱 스토어 배포: Google Play와 Apple App Store에 게시
빠른 반복: Capgo Live Updates와 Capgo Builder를 pair하여 웹-layer 수정을 위해 매번 네이티브 바이너리를 재빌드하지 않도록 하세요

1단계: Base44 프로젝트를 내보세요

Base44는 Builder 플랜 이상에 도달했을 때 code를 내보는 것을 허용합니다 . 두 가지 주요 옵션이 있습니다A. __CAPGO_KEEP_0__로 내보내기 (권장)

Option A: Export to GitHub (Recommended)

__CAPGO_KEEP_0__
상단 바의 아이콘을 클릭하세요 GitHub Cloudflare
Capacitor 기본44 빌더 및 저장소 만들기 또는 연결
기본44은 지원되는 계획의 경우 두 가지 방식으로 동기화하는 code 앱을 GitHub으로 자동으로 동기화합니다.

보기 GitHub의 기본44 통합 문서 상세 정보를 위해.

옵션 B: ZIP으로 다운로드

위쪽 메뉴바에서 파일 브라우저를 열기 위해 클릭 Code 프로젝트를 ZIP으로 내보내기
클릭 프로젝트를 ZIP으로 내보내기 code의 오른쪽 위에 있습니다.
컴퓨터에 압축 파일을 풀어주세요.

커서 프로젝트를 열어주세요.

Visit 커서.sh 커서를 설치해주세요.
Clone your GitHub repo (Git: Clone 명령 팔레트에서) 또는 압축 해제된 ZIP 폴더를 File > Open Folder로 열어주세요. 커서 시작

최적의 AI-assisted 워크플로를 위해, 커서 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하세요. — 같은 설정은 우리의

모바일로 사랑스러운 가이드에서 설명한 것과 같습니다. __CAPGO_KEEP_0__.

Step 2: 개발 환경 설정

Base44은 표준 React 프로젝트를 내보내며 의존성 설치 및 개발 서버 확인을 수행합니다.

Cursor AI 사용하기 (권장)

Press Command+K (Mac) 또는 Ctrl+K (Windows) 키를 누르고:

Install Node.js if needed, install project dependencies, and start the dev server

수동 설정

cd your-base44-project
npm install
npm run dev

Base44 앱이 로컬에서 실행 중입니다.

Base44 앱은 http://localhost:5173 (Vite) 또는 터미널에 표시된 포트에서 로드되어야 합니다.

Step 3: 프로덕션 빌드 준비

Capacitor는 정적 웹 자산이 필요합니다. Base44 React 앱은 일반적으로 Vite를 사용하여 Vite로 출력합니다. dist/.

모바일을 위한 Vite를 구성하세요.

Ask Cursor:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

또는 수동으로 vite.config.ts 수동으로:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

생산 빌드 테스트

npm run build

Verify a dist/ 폴더가 존재하고 index.html 와 번들된 자산이 있습니다.

Base44 빌드 출력

Step 4: Capacitor을 Base44 프로젝트에 추가하세요.

Cursor AI를 사용하세요 (권장)

Install Capacitor CLI, initialize it for my Base44 app with webDir dist, and add iOS and Android platforms

수동 설치

npm install -D @capacitor/cli
npm install @capacitor/core @capacitor/ios @capacitor/android

npx cap init "Your Base44 App" com.yourcompany.yourapp --web-dir dist
npx cap add ios
npx cap add android

Capacitor 초기화는 Base44 앱에 대해 수행합니다.

__CAPGO_KEEP_0__을 git에 추가합니다. ios/ and android/ 폴더를 git에 추가합니다. Capgo 빌더는 그 안에 있는 것을 컴파일합니다.

5단계: Capacitor을 구성합니다.

__CAPGO_KEEP_0__을 업데이트합니다. capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Base44 App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
}

export default config

__CAPGO_KEEP_0__을 추가하는 것을 고려합니다. @capgo/capacitor-updater __CAPGO_KEEP_0__ Live Updates 문서를 참조하십시오. Capgo Live Updates docs.

웹 앱을 변경할 때마다:

__CAPGO_KEEP_0__ Sync가 Base44 앱에 완료되었습니다.

npm run build
npx cap sync

Capacitor sync complete for a Base44 app

7단계: Capgo 빌더를 사용하여 스토어 준비된 바이너리 빌드하기 (권장)

시뮬레이터 테스트는 선택사항입니다. 테스트 플라이트, 내부 테스트 및 스토어 제출을 위해 Capgo 빌더 클라우드에서 네이티브 바이너리를 컴파일하고 서명하기 위해 사용합니다.

Capgo 빌더를 사용하는 이유는?

Mac이 필요하지 않습니다. iOS — 윈도우 또는 리눅스에서 빌드
CLI과 같은 것 — Base44 → GitHub → 커서의 vibe-coding 워크플로우와 호환
__CAPGO_KEEP_0__ Builder와 함께 Live Updates — UI를 수정하고 실시간으로 복사할 수 있습니다. 플러그인 또는 권한이 변경될 때만 네이티브로만 재빌드

Capgo Builder 설정

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

한 번에 서명 인증서 저장하세요. 자세히 보기 인증서 관리 및 Windows에서 iOS 빌드.

클라우드 빌드를 요청하세요

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

빌드 로그는 터미널에서 스트리밍됩니다. App Store Connect가 구성되면, iOS 빌드는 자동으로 TestFlight에 업로드할 수 있습니다.

OTA 업데이트를 위해 웹 번들을 업로드하세요:

npx @capgo/cli@latest bundle upload --channel production

8 단계: 선택 사항 — Xcode 또는 Android Studio에서 로컬 테스트

Mac이 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원한다면:

npx cap open ios      # Xcode + iOS Simulator
npx cap open android  # Android Studio + emulator

Xcode가 Base44 Capacitor 프로젝트를 열 때

일상적인 디버깅을 위해 로컬 IDE를 사용하세요. Capgo Builder 배포용 서명된 릴리즈 바이너리가 필요할 때.

9단계: 네이티브 기능 추가

기기 기능을 사용하여 Base44 앱을 강화하세요:

npm install @capacitor/share @capacitor/camera @capacitor/push-notifications
npx cap sync

Cursor에 Share, Camera, 또는 Push를 연결하여 React 컴포넌트에 추가하십시오. 플러그인을 추가한 후, 새로운 Capgo 빌더 스토어 제출 전에 빌드하기.

Base44 Capacitor 앱에 추가된 네이티브 기능

10단계: 프로덕션 최적화

앱 아이콘 및 스플래시 화면

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Base44 백엔드 고려 사항

SDK이 호스팅 백엔드의 Base44 앱을 호출할 수 있습니다. 일반적으로 Capacitor에서 작동하지만, 다음 조건을 충족해야 합니다:

API 호출은 HTTPS를 사용해야 합니다.
웹뷰 내에서 인증 리다이렉트가 작동합니다 (실기기에서 로그인 테스트)
마법 링크 또는 OAuth 흐름을 사용하는 경우 깊이 링크가 구성됩니다

Base44의 백엔드에서 나중에 마이그레이션할 경우 __CAPGO_KEEP_0__와 관련된 __CAPGO_KEEP_1__ 호출을 자신의 것으로 대체할 계획을 세워야 합니다 — React UI layer는 일반적으로 유지됩니다. base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

시작 시 화이트 스크린

확인

Vite config에서 설정됩니다 base: './' 실행
그리고 __CAPGO_KEEP_0__가 상대 경로로 자산을 로드하는지 확인하세요 npm run build 실행 dist/index.html Run
and check that __CAPGO_KEEP_1__ loads assets with relative paths npx cap sync __CAPGO_KEEP_0__ 웹 빌드 후에

Capgo 빌더에서 오류가 발생합니다.

Commit ios/ 그리고 android/ Git에 웹 빌드 요청하기 전에
Run npx cap sync 로컬로 실행하여 웹 자산이 네이티브 프로젝트에 복사되도록
Capacitor 플러그인이 새로 추가되면 네이티브 빌드가 다시 필요합니다.

Base44에서 Export가 사용할 수 없습니다.

GitHub export 및 ZIP 다운로드는 Builder plan 이상이 필요합니다. Base44에서 업그레이드하거나 __CAPGO_KEEP_0__ 뷰에서 파일을 수동으로 복사하세요.Code

결론

Base44 AI가 생성한 React 앱을 내보내고 Capacitor로 wrapping하여 signed iOS 및 Android 바이너리까지의 명확한 경로를 가지고 있습니다. Capgo 빌더 — 지역 Xcode 농장 유지 없이.

다음 단계

Capgo 라이브 업데이트: 스토어 리뷰 기다리지 않고 UI 및 복사본 수정을 배달합니다.
Capgo 빌더: CI에서 릴리즈 빌드를 자동화합니다.
푸시 알림: 추가 @capacitor/push-notifications 및 Capgo 빌더로 다시 빌드합니다.
Related guides: 모바일로 사랑스럽게 · Bolt.new로 모바일로

Capgo 무료 계정으로 가입하세요 Live Updates 및 클라우드 네이티브 빌드를 활성화합니다.

Resources

Base44에서 Native 모바일 앱으로 계속 진행하세요. Capacitor

이러한 기능을 사용 중이라면 Capacitor을 사용하여 네이티브 모바일 앱을 만들 수 있습니다. __CAPGO_KEEP_0__을 사용하여 네이티브 플러그인 작업을 계획하고, __CAPGO_KEEP_0__ 플러그인 디렉토리와 연결하세요. Capgo 플러그인 디렉토리에서 Capgo 제품 워크플로우를 확인하세요. Capgo 플러그인 디렉토리에서 __CAPGO_KEEP_1__에 의해 생성된 Capgo 플러그인을 확인하세요. Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Capgo 네이티브 빌드에서 Capgo 제품 워크플로우를 확인하세요. Capgo 네이티브 빌드에서 Capgo 플러그인에 의해 생성된 Capgo 플러그인을 확인하세요. __CAPGO_KEEP_0__ 네이티브 빌드에서 __CAPGO_KEEP_0__ 플러그인에 대한 implementation detail을 확인하세요. 윈도우에서 Mac이 없는 cloud iOS 빌드를 위해 iOS를 빌드하세요.

Capacitor를 사용하여 Native 모바일 앱으로

소개