Capacitor를 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요.

소개

Bolt.new Bolt.new은 React, Vue, Svelte, 등 다양한 프레임워크를 사용하여 풀스택 웹 애플리케이션을 생성할 수 있는 혁신적인 AI 보조 개발 플랫폼입니다. 하지만 Bolt.new 생성물을 모바일 기기에 가져오고 싶다면? 이 포괄적인 튜토리얼에서 Bolt.new 프로젝트를 export하고 네이티브 모바일 앱으로 변환하는 방법을 보여드리겠습니다. Capacitor.

Bolt.new 프로젝트가 React, Vue 또는 다른 지원 프레임워크를 사용하더라도, 이 안내서가 native iOS 및 Android 앱을 만들고 카메라, 저장소 및 푸시 알림과 같은 장치 기능에 접근하는 데 도움이 될 것입니다.

시작하기 전에: 요구 사항 및 시간

예상 시간: 완전한 설정을 위해 3-5 시간

시스템 요구 사항:

iOS 개발: macOS 12.0+ (필수, 대안 없음)
Android 개발: Any OS (Windows/Mac/Linux)
무료 공간: 개발 도구를 위해 20-30GB
Estimated Time: 8GB RAM의 최소 16GB 권장

Budget Needed:

Apple Developer: iOS App Store에 앱 등록하기 위해 $99/년
Google Play: $25 한 번의 요금
Cursor Pro: 개발을 가속화하기 위해 $20/월 (선택)

What We’ll Install:

Node.js & npm
Xcode (Mac 전용, iOS용)
Android Studio (Android용)
다양한 명령줄 도구

Why Bolt.new 앱을 모바일로 변환해야 하나요?

플랫폼 간 접근성: AI가 생성한 앱을 모바일 앱 스토어에 배포하세요
네이티브 장치 접근: 카메라, GPS, 파일 시스템, 기타 네이티브 기능을 사용하세요
향상된 성능: 네이티브 컨테이너는 웹 뷰보다 성능이 좋습니다
오프라인 기능: 네이티브 저장 솔루션을 사용하여 오프라인으로 작동하세요
푸시 알림: 사용자와 네이티브 푸시 알림 지원을 사용하여 참여하세요

Why Capacitor Over Expo?

모바일 개발 옵션을 고려하고 계신다면 Capacitor은 Expo와 비교하여 웹-첫 번째 개발에 특히 유리합니다.

한 개의 코드베이스, 세 개의 플랫폼: 현재 React, Next.js, 또는 Vue.js 웹사이트가 iOS, Android, 및 웹 앱으로 변환되지 않고도 변환되지 않습니다.
재건이 필요하지 않습니다: Bolt.new 프로젝트를 그대로 사용할 수 - 다른 프레임워크와 같은 Expo가 필요로하는 것과 같은 다른 프레임워크에 대한 다시 작성이 필요하지 않습니다.
진짜 웹-첫 번째 접근 방식: Expo는 모바일-첫 번째이며 웹에서 불편한 반면 Capacitor은 웹을 최초의 시민으로 다룹니다.
무결점 개발: 익숙한 웹 개발 도구와 워크플로우를 계속 사용할 수 있습니다.
프레임워크 자유도: React Native와 같은 Expo와 달리 React, Vue, Svelte, Next.js, 등과 같은 웹 프레임워크와 함께 작동합니다. - React Native와 같은 프레임워크에 묶이지 않습니다.

The Key Difference:

Capacitor: 모바일 지원을 추가하세요 (같은 코드베이스)
__CAPGO_KEEP_0__: 모바일 빌드 → 웹 빌드 시도 (다른 접근 방식, 종종 불편함)

Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code. Expo would require rebuilding your entire project for their framework.

1단계: 개발 환경 설정

Cursor - 당신의 AI-Powered Code 에디터

Bolt.new 프로젝트와 함께 효율적으로 작업하기 위해, Cursor 라는 지능적인 __CAPGO_KEEP_0__ 에디터를 사용할 것입니다., an intelligent code editor that simplifies development:

를 방문하세요 마우스 커서를 이동시키세요. 당신의 운영 체제에 대한 설치 프로그램을 다운로드하세요.
설치 프로세스를 완료하세요.
준비가 되면 Cursor를 시작하세요.

Cursor를 시작하세요.

Cursor를 최대한 효율적으로 사용하기 위해 초기 설정이 필요합니다.

Cursor Pro를 고려하세요.

- 무료 버전은 작동하지만 Pro ($20/월)는 다음을 포함합니다: 무제한의 AI 지원
- 프리미엄 모델 (GPT-4, Claude)
- 즉시 응답
- Cursor Pro는 $20/월입니다.
- 고급 지원
설정 접근 와 Command+, (Mac) 또는 Ctrl+, (Windows)

커서 설정

AI 기능 활성화 - AIassistance가 켜져 있는지 확인하세요:

모델 허용

AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:

커서 모델 선택

실행 명령 활성화 - 커서가 명령을 자동으로 실행하도록 하세요:

명령 실행 허용

2단계: Bolt.new 프로젝트 내보내기

이제 Bolt.new 프로젝트를 커서로 가져옵니다.

프로젝트 다운로드

브라우저에서 Bolt.new 프로젝트를 찾으세요
Bolt의 인터페이스에서 다운로드 또는 내보내기 버튼을 찾으세요

__CAPGO_KEEP_0__ 프로젝트 ZIP 파일 다운로드
__CAPGO_KEEP_0__ 프로젝트를 컴퓨터에 있는 폴더에 압축 해제

Bolt.new 프로젝트 파일

커서에서 열기

__CAPGO_KEEP_0__ 압축을 풀면 커서에서 프로젝트를 열 수 있습니다.

커서에서 사용 File > Open Folder 커서에서
__CAPGO_KEEP_0__ 압축을 풀린 Bolt.new 프로젝트 폴더 선택
커서에서 프로젝트를 로드

커서에서 열기

GitHub

Bolt.new을 GitHub에 연결했나요?

Press Shift+Command+P (Mac) 또는 Shift+Ctrl+P (Windows)
‘Git: Clone’을 검색하세요
저장소 URL을 입력하세요
저장소 위치를 선택하세요

Cursor에서 클론

2단계: 프로젝트 프레임워크를 식별하세요

Bolt.new은 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 어떤 프레임워크를 사용하고 있는지 식별해 보겠습니다:

package.json을 확인하세요

열기 package.json 프로젝트가 사용하는 프레임워크를 확인하려면:

package.json 검사용 Bolt.new

일반적인 Bolt.new 프로젝트 유형:

React + Vite: 가장 일반적인 설정
Vue + Vite: Vue.js 애플리케이션
Svelte: Svelte 애플리케이션
Next.js: 풀 스택 React 앱
Vanilla JS: 자바스크립트 앱

3단계: 개발 도구 설치

A. Cursor AI가 모든 것을 처리하십시오

클릭 Command+K (Mac) 또는 Ctrl+K (Windows)에서 Cursor

다음 요청을 입력하십시오:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI는 자동으로:

Node.js 및 npm가 필요할 경우 설치
macOS에서 Homebrew 설정
프로젝트의 모든 종속성을 설치
개발 서버를 시작

Homebrew 설치

Option B: 수동 설치 프로세스

AI 접근 방식이 문제를 만나거나 수동 제어를 선호하는 경우:

Cursor의 터미널을 먼저 열어 주세요 with Shift+Command+T Windows Shift+Ctrl+T macOS 사용자들을 위한:

Windows 사용자들을 위한:

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Node.js 설치 프로그램을 다운로드 하세요 - nodejs.org

설치 마법사를 완료하세요 __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
Cursor의 터미널에서:

cd your-bolt-project
npm install
npm run dev

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

Bolt.new 앱이 정상적으로 작동해야 합니다 (일반적으로 http://localhost:5173 Vite 프로젝트의 경우)

4단계: 모바일 빌드 설정

프로젝트 프레임워크에 따라 설정이 달라질 수 있습니다.

선택 A: Cursor AI를 사용한 자동 설정

Cursor AI에게 설정을 맡겨보세요:

Configure my Bolt.new project for mobile deployment with proper build settings

Cursor는 프레임워크를 감지하고 올바른 설정을 적용합니다.

선택 B: 프레임워크별 수동 설정

React + Vite 프로젝트의 경우:

편집 vite.config.js:

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

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Vue + Vite 프로젝트에 대해:

수정 vite.config.js:

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

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

Next.js 프로젝트에 대해:

프로젝트에 다음을 추가하세요: package.json 스크립트:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

업데이트 next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

5단계: 프로젝트를 빌드하세요.

Bolt.new 앱의 프로덕션 빌드를 생성하는 데 걸리는 시간입니다.

선택 A: 커서 AI와 함께 빌드

커서에게만 물어봐:

Build my Bolt.new project for production deployment

커서가 프레임워크에 따라 적절한 빌드 명령을 실행할 것입니다.

선택 B: 수동으로 빌드

Vite 기반 프로젝트 (React/Vue/Svelte) :

npm run build

__CAPGO_KEEP_0__ Vite 빌드 성공

Next.js 애플리케이션 :

npm run static

빌드 성공을 확인하세요

정확한 출력이 생성되었는지 확인하세요:

Vite 프로젝트: 빌드 결과를 확인하세요 dist 디렉토리
Next.js 프로젝트: 빌드 결과를 확인하세요 out 디렉토리

Bolt.new 빌드 출력

Step 6: Capacitor을 Bolt.new 프로젝트에 추가하세요

웹 애플리케이션을 네이티브 모바일 앱으로 변환하세요.

Option A: Cursor AI를 사용한 빠른 설정

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

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI는 전체 설정 프로세스를 처리합니다.

Option B: 단계별 수동 설정

Capacitor 명령줄 도구를 설치하세요:

npm install -D @capacitor/cli

Capacitor 프로젝트를 초기화하세요:

npx cap init

Capacitor 초기화 Bolt

다음과 같은 입력을 요청할 것입니다:

앱 이름: Bolt.new 프로젝트 이름
Bundle ID: 형식으로 com.yourcompany.yourapp

수동 설정 계속하기 - 필수 패키지 설치:

npm install @capacitor/core @capacitor/ios @capacitor/android

모바일 플랫폼 지원 추가:

npx cap add ios
npx cap add android

Capacitor 플랫폼 Bolt 추가

무엇이 일어났나요?

Bolt.new 프로젝트 구조는 다음과 같습니다:

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

중요한 주의사항:

웹 code은 여전히 src/ - 여기에 편집
ios/ 그리고 생성되며 편집하지 마세요 android/ 변경 후 항상 실행하세요
각 플랫폼에는自己的 빌드 프로세스가 있습니다 npx cap sync
7단계: __CAPGO_KEEP_0__을 구성하세요

Capacitor을 위한 시간이 왔습니다. 특정 프레임워크에 맞게

Time to configure Capacitor for your specific framework.

커서의 도움을 요청하세요:

B. 수동 구성

Configure capacitor.config.ts for my Bolt.new project build output

Vite-Based 애플리케이션에 대해:

Next.js 애플리케이션에 대해:

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

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

export default config;

8단계: 빌드 및 Sync

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

8단계: 빌드 및 Sync

모바일 배포를 위해 앱을 준비하세요.

Option A: Cursor AI를 사용합니다.

Cursor에게 말하세요.

Build my project and sync it with Capacitor for mobile deployment

Option B: 수동 프로세스

이 명령어를 순서대로 실행하세요.

npm run build
npx cap sync

Capacitor sync Bolt complete

9단계: 네이티브 IDE를 열어보세요.

앱의 네이티브 개발 환경에 접근하세요.

iOS 개발

Option A: Cursor AI를 사용합니다.

Open my iOS project in Xcode

Option B: 터미널 명령어

npx cap open ios

Xcode Bolt 프로젝트를 열어보세요.

안드로이드 개발

Option A: Cursor AI를 통해

Open my Android project in Android Studio

Option B: 터미널 명령어를 통해

npx cap open android

Android Studio에서 Bolt 프로젝트를 열기

10단계: 모바일 앱을 빌드하고 실행하기

iOS에서 실행

Xcode 설정 (처음 사용)

목표를 선택:
- 플레이 버튼 옆에 기기 선택기를 클릭
- 테스트를 위해: iPhone 시뮬레이터를 선택
- 실제 기기를 사용할 경우: iPhone을 USB로 연결
설정 Code 서명:
- 좌측 사이드바에서 프로젝트 이름을 클릭하세요
- ‘인증 및 기능’ 탭으로 이동하세요
- ‘자동으로 인증 관리’를 활성화하세요
- 애플 ID로 로그인하세요
- 주의: 실제 기기 사용을 위해서는 애플 개발자 프로그램 ($99/년)을 구독해야 합니다
앱을 빌드하세요:
- ▶️ 재생 버튼을 클릭하세요
- 첫 번째 빌드는 5-10분 정도 소요됩니다 (잠시 기다려 주세요)
- 상단의 진행바를 감시하세요

iOS 문제 해결:

‘계정이 없습니다’: Xcode에서 Apple ID 추가 > 설정 > 계정
빌드 실패: Shift+Command+K를 눌러 빌드 폴더를 정리하고 다시 시도하세요
심뭉치 문제: Device > 다시 시작을 클릭하여 시뮬레이터를 다시 시작하세요

iOS에서 Bolt 앱 실행

Android에서 실행 중

Android Studio 설정 (처음 사용)

SDK 설정 (자동)
- Android Studio는 누락된 구성 요소를 감지합니다
- 누락된 SDK을 설치할 수 있는지 확인할 때 "SDK 설치"를 클릭하세요
- 이것은 ~2-3GB의 파일을 다운로드합니다.
가상 장치 만들기:
- AVD 관리자 열기 (도구栏의 전화 아이콘)
- '가상 장치 만들기' 클릭
- 'Pixel 6' 선택 (기본값으로 좋습니다.)
- 시스템 이미지를 다운로드할 때提示
- 기본 옵션으로 설정 완료
앱 실행:
- 다운로드 드롭다운에서 에뮬레이터 선택
- 녹색 ▶️ 실행 버튼 클릭
- 첫 번째 빌드: 10-15분
- 에뮬레이터가 자동으로 시작됩니다.

안드로이드 문제 해결:

'Gradle sync failed' 오류: 캐시 무효화 > 파일 > Invalidate Caches를 시도해 보세요
느린 에뮬레이터: AVD 설정에서 하드웨어 가속을 활성화하세요
빌드 오류: Gradle 업데이트를 위한 제안된 수정 사항을 적용하세요

Bolt 앱이 안드로이드에서 실행 중입니다

검증 체크리스트

빌드가 성공적으로 완료되면 확인하세요:

: 앱이 충돌 없이 실행되나요? : Bolt.new 콘텐츠가 올바르게 표시되나요? : 버튼과 상호 작용이 정상 작동하나요? : 콘솔에 빨간색 오류가 표시되지 않나요?

: 여전히 문제가 발생하나요? The error messages usually tell you exactly what’s wrong - read them carefully!

11: Live Reload (Development) 활성화

개발 워크플로우를 가속화하세요:热重载

A: 자동 설정 - 커서

커서에게 물어봐:

Enable live reload for my Capacitor app development

커서가 모든 것을 자동으로 구성합니다.

B: 수동 구성

로컬 IP 주소를 얻으세요:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

업데이트를 capacitor.config.ts:

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

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

설정 적용:

npx cap copy

Live reload Bolt 활성화

12: 네이티브 기능 추가

__CAPGO_KEEP_0__을 위한 Bolt.new 앱에 장치별 기능을 추가하세요.

A: 인공지능 기반 통합

Cursor에서 요청:

Add native share, camera, and geolocation features to my Bolt.new app

Cursor는 플러그인 설치 및 code 통합을 생성합니다.

B: 수동 플러그인 설치

인기_native 플러그인 설치:

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

React 프로젝트에 대한 유틸리티 파일을 생성하세요.

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

컴포넌트에서 사용하세요.

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

Cursor AI를 사용하여 변경 사항 동기화:

수동 명령어:

Sync my native feature changes to all platforms

Bolt에 Native 기능 추가:

npx cap sync

Bolt에 Native 기능 추가

Step 13: __CAPGO_KEEP_0__

앱 아이콘 및 스플래시 스크린

Option A: Cursor AI 설정

요청:

Create app icons and splash screens for my mobile app

Option B: 수동 자산 생성

자산 도구를 가져오기:

npm install -D @capacitor/assets

그래픽 준비:
- 만들기 assets/icon.png (1024x1024px)
- 만들기 assets/splash.png (2732x2732px)
자동으로 모든 크기 생성:

npx capacitor-assets generate

__CAPGO_KEEP_0__ 생성된 파일

Optimize Build

Vite 프로젝트의 경우 빌드 최적화:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

최종 빌드

Option A: Cursor AI를 사용한 빌드

Create the final production build and prepare for app store deployment

Option B: 수동 빌드 프로세스

npm run build
npx cap sync
npx cap copy

일반적인 문제 해결

프레임워크별 문제

React/Vite 프로젝트

__CAPGO_KEEP_1__이 Vite 설정에서 설정되어야 함 base: './' __CAPGO_KEEP_2__가 상대 경로를 사용하는지 확인하십시오.
__CAPGO_KEEP_3__
정확히 생성되었는지 확인하세요. dist 폴더가 올바르게 생성되었는지 확인하세요.

Vue 프로젝트

모바일에서 Vue Router가 해시 모드 사용하는지 확인하세요.
자산이 올바르게 참조되었는지 확인하세요.
모바일 환경에서 컴포넌트의 느린 로딩이 작동하는지 확인하세요.

Next.js 프로젝트

정적 내보내기 설정이 올바르게 구성되었는지 확인하세요.
정적 내보내기 환경에서 동적 임포트가 작동하는지 확인하세요.
API 경로가 사용되지 않거나 적절하게 처리되는지 확인하세요.

빌드 오류

빌드 오류가 발생하는 경우:

Clear node_modules와 재설치:

rm -rf node_modules package-lock.json
npm install

모바일 호환성을 위한 Bolt.new 프로젝트 의존성 확인:
모바일 배포를 위한 모든 상대 경로가 올바른지 확인:

미리 로드된 자산:

자산 로드 문제에 대한 해결책:

모든 자산이 public 폴더에 있는지 확인:
이미지 및 파일에 대한 상대 경로 사용:
모든 필요한 자산이 빌드 프로세스에 복사되었는지 확인:

결론:

축하합니다! Bolt.new 프로젝트를 네이티브 모바일 애플리케이션으로 성공적으로 변환했습니다. AI로 생성된 웹 앱은 이제:

iOS 및 Android 장치에서 네이티브로 실행:
카메라, GPS, 저장소와 같은 장치 기능에 접근:
앱 스토어를 통해 배포
최적화된 모바일 사용자 경험 제공

다음 단계

실시간 업데이트: Implement Capgo 즉시 OTA 업데이트를 위해
분석: 사용자 행동 추적을 위한 모바일 분석 추가
성능: 모바일 앱의 성능 모니터링 및 최적화
테스트: 다양한 기기와 화면 크기에서 앱을 테스트하세요

Bolt.new 생성이 이제 모바일 생태계에 준비되었습니다!

자원

Capgo이 앱에 즉시 업데이트를 제공하는 방법을 알아보세요. __CAPGO_KEEP_0__ 계정에 무료로 가입하세요 오늘.

Capacitor을 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요

Bolt.new을 사용 중이라면 Transform Your Bolt.new Project into Native Mobile Apps with Capacitor 네이티브 플러그인 작업을 계획하기 위해 연결하세요. Capgo 플러그인 디렉토리 Capgo 플러그인 디렉토리에서 제품 워크플로우 Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항 플러그인을 추가하거나 업데이트 플러그인을 추가하거나 업데이트하는 구현 세부 사항 Ionic Enterprise 플러그인 대체 Ionic Enterprise 플러그인 대체의 제품 워크플로우 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로우

Capacitor을 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요.

소개

시작하기 전에: 요구 사항 및 시간

Why Bolt.new 앱을 모바일로 변환해야 하나요?

Why Capacitor Over Expo?

1단계: 개발 환경 설정

Cursor - 당신의 AI-Powered Code 에디터

Cursor를 최대한 효율적으로 사용하기 위해 초기 설정이 필요합니다.

2단계: Bolt.new 프로젝트 내보내기

프로젝트 다운로드

커서에서 열기

GitHub

2단계: 프로젝트 프레임워크를 식별하세요

package.json을 확인하세요

3단계: 개발 도구 설치

A. Cursor AI가 모든 것을 처리하십시오

Option B: 수동 설치 프로세스

4단계: 모바일 빌드 설정

선택 A: Cursor AI를 사용한 자동 설정

선택 B: 프레임워크별 수동 설정

Next.js 프로젝트에 대해:

5단계: 프로젝트를 빌드하세요.

선택 A: 커서 AI와 함께 빌드

선택 B: 수동으로 빌드

빌드 성공을 확인하세요

Step 6: Capacitor을 Bolt.new 프로젝트에 추가하세요

Option A: Cursor AI를 사용한 빠른 설정

Option B: 단계별 수동 설정

무엇이 일어났나요?

Capacitor을 위한 시간이 왔습니다. 특정 프레임워크에 맞게

커서의 도움을 요청하세요:

Vite-Based 애플리케이션에 대해:

8단계: 빌드 및 Sync

Option A: Cursor AI를 사용합니다.

Option B: 수동 프로세스

9단계: 네이티브 IDE를 열어보세요.

iOS 개발

안드로이드 개발

10단계: 모바일 앱을 빌드하고 실행하기

iOS에서 실행

Xcode 설정 (처음 사용)

Android에서 실행 중

Android Studio 설정 (처음 사용)

검증 체크리스트

11: Live Reload (Development) 활성화

A: 자동 설정 - 커서

B: 수동 구성

12: 네이티브 기능 추가

A: 인공지능 기반 통합

B: 수동 플러그인 설치

컴포넌트에서 사용하세요.

Cursor AI를 사용하여 변경 사항 동기화:

Step 13: __CAPGO_KEEP_0__

앱 아이콘 및 스플래시 스크린

Optimize Build

최종 빌드

일반적인 문제 해결

프레임워크별 문제

React/Vite 프로젝트

Vue 프로젝트

Next.js 프로젝트

빌드 오류

미리 로드된 자산:

결론:

다음 단계

자원

Capacitor을 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요