Base44에서 네이티브 모바일 앱으로 변환하는 Capacitor

소개

44기반 AI가 지원하는 앱 빌더로, 프롬프트에서 완전한 React 애플리케이션을 생성합니다. 브라우저에서 빠르게 제품을 배포할 수 있지만 iOS와 Android에서 배포하고 싶다면? Capacitor, 그리고 signed store 바이너리를 배송합니다. Capgo 이 튜토리얼에서는 Base44 프로젝트를 내보내고 Native Mobile 앱으로 변환하는 방법을 보여줍니다.

__CAPGO_KEEP_0__

기본 요구 사항 및 처리 시간

시간 소요: 첫 번째 설정에 2-4 시간

시스템 요구 사항:

iOS 클라우드 빌드용: Windows, Mac, 또는 Linux와 Capgo 빌더가 있는任何 OS
Android 클라우드 빌드용: 모든 운영 체제
저장소10GB의 무료 저장 공간을 dependencies 및 build artifacts에 할당합니다.
RAMRAM

Costs:

Base44 내보내기: Builder plan or higher (for GitHub export and ZIP download)
iOS 앱 스토어: $99/년 (Apple Developer 계정)
안드로이드 플레이 스토어: $25(한 번만) (Google Play Developer)
Cursor Pro: $20/월 (선택적이지만 권장)

필수 소프트웨어:

Node.js 18+
code 에디터 Cursor

Base44 앱을 모바일로 변환하는 이유는 무엇인가요?

확장된 접근성: 사용자가 기대하는 네이티브 앱 아이콘을 만날 수 있도록 브라우저 탭 대신
네이티브 기능: 카메라, GPS, 생체 인식, 오프라인 저장을 위한 Capacitor 플러그인
앱 스토어 배포: 구글 플레이 스토어와 애플 앱 스토어에 게시
빠른 반복: Capgo Live Update와 Capgo Builder를 pair하여 웹层 수정을 위해 매번 네이티브 바이너리 재빌드하지 않고

Step 1: Base44 프로젝트를 내보내기

Base44는 Builder 플랜 이상에 도달한 후 code를 한 번만 내보내실 수 있습니다. Base44 앱을 모바일로 변환하는 방법두 가지 주요 옵션을 선택할 수 있습니다.

Option A: Capgo로 GitHub을 내보내십시오 (권장)

Base44 편집기를 통해 앱을 열어보십시오.
위쪽 메뉴바의 GitHub 아이콘을 클릭하십시오.
인증 Base44 빌더 및 저장소에 대한 연결을 생성하십시오.
Base44는 code을 GitHub으로 자동으로同步화합니다 (지원되는 계획의 경우 양방향 동기화)

See Base44 GitHub 통합 문서 자세한 내용은 여기를 클릭하세요.

Option B: ZIP으로 다운로드

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

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

방문하세요. cursor.sh 그리고 Cursor를 설치하세요
Clone된 GitHub repo (Git: Clone 명령 팔레트에서 또는 추출 된 ZIP 폴더를 열 수 있습니다. 파일 > 폴더 열기

Cursor 시작

최고의 AI-assisted 워크플로를 위해, Cursor 설정에서 선호하는 모델을 활성화하고 명령 실행을 허용하세요 — 같은 설정은 우리의 Lovable to mobile 가이드에서 설명한 것과 같습니다..

Step 2: 개발 환경 설정

페이지/영역: Capgo에 대한 페이지. 역할: UI 레이블. 표시되는 곳: about.astro에 대한 페이지. 메시지 키 `about_how_step_label` (About How Step Label).

Base44는 표준 React 프로젝트를 내보냅니다. 의존성을 설치하고 개발 서버가 작동하는지 확인하세요.

Press Command+K 누르세요. (Mac) 또는 Ctrl+K (윈도우)와 물어보세요:

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) 또는 터미널에 표시된 포트입니다.

3단계: 프로덕션 빌드 준비

Capacitor는 정적 웹 자산이 필요합니다. Base44 React 앱은 일반적으로 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

확인 dist/ 폴더가 존재하고 index.html 및 패키지된 자산이 있는지 확인합니다.

Base44 빌드 출력

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

페이지/영역: Capgo 소개 페이지. 역할: UI 레이블. 표시되는 곳: about.astro 페이지. 메시지 키 `about_how_step_label` (About How Step Label).

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

Cursor AI 사용 (권장)

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 앱 초기화

Commit 하세요 ios/ and android/ Step 5: Capgo을 구성하세요.

Step 5: Configure Capacitor

업데이트 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/capacitor-updater 출시 후 OTA 업데이트를 배포하기 위해 가능한 한 빨리 추가하세요. Capgo Live Updates 문서를 참조하세요..

6단계: 빌드 및 동기화

웹 앱을 변경할 때마다:

npm run build
npx cap sync

Capacitor Base44 앱 동기화 완료

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

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

Base44 앱을 위해 Capgo 빌더를 사용하는 이유는 무엇입니까?

No Mac이 필요하지 않습니다. iOS — Windows 또는 Linux에서 빌드합니다.
CLI — AI agent가 실행할 수 있는 동일한 GitHub
Live Update와 Pair — UI 및 복사본을 공유하고 플러그인 또는 권한이 변경될 때만 원시 코드를 다시 빌드합니다.

Capgo 빌더를 설정합니다.

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

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ and 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에서 로컬로 테스트하세요

맥을 가지고 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원하신다면:

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

Xcode에서 Base44 Capacitor 프로젝트를 열어보세요

일상적인 디버깅을 위해 로컬 IDE를 사용하세요. __CAPGO_KEEP_0__ Builder Capgo 빌더 9단계: 네이티브 기능 추가

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

Cursor에게 Share, Camera, 또는 Push를 React 컴포넌트에 연결하도록 요청하세요. 플러그인을 추가한 후 다시

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

Ask Cursor에게 물어보세요 Capgo 빌더 설치 전 제출하기 전에 빌드하세요.

Native features added to a Base44 Capacitor app

10단계: 프로덕션 최적화

앱 아이콘 및 스플래시 화면

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

Base44 백엔드 고려 사항

Base44 앱을 내보내면 Base44 호스팅 백엔드와 SDK를 호출할 수 있습니다. 일반적으로 Capacitor에서 작동하지만:

API 호출은 HTTPS를 사용해야 합니다.
인증이 WebView 내에서 작동하는지 테스트한 실제 장치에서 로그인 테스트
마직 링크 또는 OAuth 흐름을 사용하는 경우 깊이 링크가 구성되어야 합니다.

If you later migrate off Base44’s backend, plan to replace base44.entities.* Capacitor를 사용하여 Base44 앱을 모바일로 변환하는 동안 관련된 SDK 호출을 자신의 API와 함께 사용하세요 — React UI layer는 일반적으로 유지됩니다.

__CAPGO_KEEP_0__는 HTTPS를 사용해야 합니다.

화면이 흰색으로 뜨는 문제

확인 base: './' Vite config에서 설정됩니다
실행 npm run build 컨텍스트: Capgo 마케팅 웹사이트. 역할: 장문 마케팅 또는 법률 문구. 보이는 곳: page alternatives/codepush.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지합니다. 메시지 키 `compare_codepush_step2_text` (Compare Codepush Step2 Text). | 컨텍스트: Capgo 마케팅 웹사이트. 역할: 장문 마케팅 또는 법률 문구. 보이는 곳: page alternatives/expo.astro, page alternatives/voltbuilder.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지합니다. 메시지 키 `compare_step_build_text` (Compare Step Build Text). | 컨텍스트: Capgo 마케팅 웹사이트. 역할: 장문 마케팅 또는 법률 문구. 보이는 곳: page alternatives/expo.astro, page alternatives/median.astro, page alternatives/voltbuilder.astro. Capgo 제품/브랜드 및 개발자 용어를 정확히 유지합니다. 메시지 키 `compare_step_install_text` (Compare Step Install Text). dist/index.html 그리고 확인해 보세요
실행 npx cap sync 상대 경로로 자산을 로드합니다

Capgo 에러

Commit ios/ 커밋 android/ git에 업로드하기 전에 클라우드 빌드 요청하기
실행 npx cap sync 로컬로 웹 자산이 네이티브 프로젝트로 복사됩니다
새로운 Capacitor 플러그인은 최신 네이티브 빌드를 필요로 합니다

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

GitHub export 및 ZIP 다운로드는 Builder 플랜 이상이 필요합니다 업그레이드할 수 있는 Base44 또는 __CAPGO_KEEP_0__ 뷰에서 파일을 수동으로 복사하세요.업그레이드 Base44에서 또는 Code 뷰에서 하위 티어에서 파일을 수동으로 복사하세요.

Conclusion

Capacitor 빌더 Capgo 빌더 __CAPGO_KEEP_0__ 빌더

다음 단계

Capgo 실시간 업데이트:
Capgo 빌더:
: : @capacitor/push-notifications and rebuild with Capgo Builder
: : : · and rebuild with __CAPGO_KEEP_0__ Builder

자원

Base44에서 Native 모바일 앱으로 계속 진행하기 위한 Capacitor

Base44을 Native 모바일 앱으로 사용하는 경우 Base44 to Native Mobile Apps with Capacitor __CAPGO_KEEP_0__ 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capacitor 제품 워크플로우에서 Capgo 플러그인 디렉토리. Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo를 위한 구현 세부 사항 Capgo 네이티브 빌드 Capgo 네이티브 빌드에 대한 제품 워크플로우, 그리고 윈도우에서 iOS 빌드 Mac이 없는 클라우드 iOS 빌드

Base44을 사용하여 Capacitor로 네이티브 모바일 앱을 만드는 방법

소개