Base44 to Native Mobile Apps with Capacitor

導入

Base44 Base44は、パラメータからフルレアクトアプリケーションを生成するAIパワードアプリビルダーです。ブラウザで機能する作品を迅速に配信できますが、iOSとAndroidに配信したい場合はどうすればいいでしょうか? このチュートリアルでは、Base44プロジェクトをエクスポートし、__CAPGO_KEEP_0__を使用してネイティブモバイルアプリに変換する方法を紹介します。 Capacitor、次に署名済みのストアバイナリを送信します。 Capgo ビルダー Capgoのビルダー

Capgoのビルダー

iOSにはMacが必要ありません。このガイドの終わりまでに、Base44アプリはiOSとAndroidでネイティブに実行され、カメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできます。

前提条件 & 時間の見積もり:

所要時間: Any OS (Windows, Mac, or Linux) with Capgo Builder
システム要件iOS クラウドビルドの場合
ストレージ依存関係とビルドアーティファクト用の10GBの無料スペース
RAM8GBの最小限

コスト:

Base44エクスポートBuilderプランまたは上位 ( GitHub エクスポートとZIPダウンロードの場合)
iOSアプリストア99ドルの年間料金 (Apple Developerアカウント)
Android Playストア25ドルの1回限り (Google Play Developer)
Cursor Pro: ¥2,000/month (optional but recommended)

必要なソフトウェア:

Node.js 18+
A code エディターとして Cursor

Base44 アプリをモバイルに変換する理由

拡大したアクセス: ユーザーが期待するネイティブアプリのアイコンで会うのではなく、ブラウザタブ
ネイティブ機能: カメラ、GPS、バイオメトリクス、オフラインストレージを通じて Capacitor プラグイン
App Store 配布: Google Play と Apple App Store に配布する
高速な開発: Capgo Live Updates と Capgo Builder を組み合わせて、ウェブ層の修正を行うとともに、各回のビルドでネイティブバイナリを再構築する必要がなくなる

ステップ 1: Base44 プロジェクトをエクスポートする

Base44 では、Builder プランまたはそれ以上のプランにアップグレードした後、code を 1 回だけエクスポートすることができます 。2 つの主なオプションがありますオプション A: __CAPGO_KEEP_0__ にエクスポートする (推奨)

Option A: Export to GitHub (Recommended)

__CAPGO_KEEP_0__
__CAPGO_KEEP_0__ GitHub __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ Base44 Builder と
Base44はアプリをcodeとGitHubに自動でsyncします(サポートされているプランでは両方向のsync)

See Base44のGitHub統合ドキュメント詳細については

Option B: ZIPでダウンロード

Click Code をクリックしてファイルブラウザを開きます
Click プロジェクトをZIPでエクスポート Capgoのcode画面の右上
コンピューターでアーカイブを展開

Cursorを開く

Visit cursor.sh Cursorをインストール
GitHubリポジトリをクローンする (Git: Clone コマンドパレットから) または、展開したZIPフォルダを開く File > フォルダを開く

Cursorを起動

最適なAIアシストワークフローを実現するには、Cursorの設定で好みのモデルを有効にして、コマンド実行を許可する Visit.

Step 2: 開発環境を設定する

Base44は標準のReactプロジェクトをエクスポートします。依存関係をインストールし、開発サーバーが正常に動作することを確認してください。

Cursor AIを使用する (推奨)

クリック 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アプリは次のURLで表示されるはずです。 http://localhost:5173 (Vite) またはターミナルに表示されているポート番号

Step 3: 製品用ビルドを準備する

Capacitorには静的Webアセットが必要です。Base44 Reactアプリは通常Viteを使用し、 dist/.

モバイル向けにCapacitorを使用したBase44アプリを変換する

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ビルド出力

ステップ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 の初期化

コミット ios/ と android/ Capgo ビルダーの

Step 5: Configure 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__ Live Updates ドキュメント @capgo/capacitor-updater ビルドと Sync Capgo の Sync が完了.

__CAPGO_KEEP_0__ の初期化

__CAPGO_KEEP_0__ ビルダーの

npm run build
npx cap sync

Capacitor

Step 7: Capgo Builder (推奨)でストア用バイナリをビルドする

Simulator testing is optional. For TestFlight, internal testing, and store submission, use Capgo Builder __CAPGO_KEEP_0__

Why Capgo Builder for Base44 apps?

Why __CAPGO_KEEP_0__ Builder for Base44 apps? No Mac required for iOS
Same CLI your AI agent can run Same GitHub your AI agent can run
— fits vibe-coding workflows from Base44 → __CAPGO_KEEP_0__ → Cursor Pairs with Live Updates

Set up 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

Save signing credentials once. See Managing Credentials と WindowsからiOSをビルド.

Cloud Buildを要求

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にアップロードされます。

Web Bundleをアップロードして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_KEEP_0__ Builderを使用する Capgo Builder 必要な署名リリースバイナリが必要な場合。

ステップ 9: ネイティブ機能を追加する

Base44 アプリをデバイス機能で強化する:

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

カーソルにShare、カメラ、またはPushを組み込むよう依頼し、プラグインを追加した後は新しい 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を使用している
ウェブビュー内でAuthリダイレクトが機能します (実機でテストログイン)
マジックリンクまたはOAuthフローを使用する場合、デープリンクは設定されています

Base44のバックエンドから後で移行する場合、__CAPGO_KEEP_0__の呼び出しと関連するものを置き換える計画を立ててください base44.entities.* and related SDK calls with your own API — the React UI layer typically carries over.

トラブルシューティングの一般的な問題

起動時に白い画面が表示される

確認 base: './' Viteの設定で
実行 npm run build 相対パスのアセットがロードされることを確認 dist/index.html 実行
protectedTokens npx cap sync ウェブビルド後

Capgo ビルダーのエラー

コミット ios/ と android/ Gitにコミットし、Cloudflareのビルドを要求する前に
実行 npx cap sync ローカルで実行して、ウェブアセットをネイティブプロジェクトにコピーする
新しいCapacitor プラグインでは、ネイティブビルドが必要

Base44ではエクスポートが利用できない

GitHub エクスポートとZIPダウンロードはBuilderプラン以上で利用可能 __CAPGO_KEEP_0__ ビューからファイルを手動でコピーするか、Base44でアップグレードする必要がありますCode

Conclusion

CapacitorでBase44 AI生成のReactアプリをエクスポートし、Capacitorでラップし、署名済みのiOSおよびAndroidバイナリへの明確なパスを持ちます。 Capgo Builder Capacitor Builder

Capacitor Builder

Capgo Live UpdatesCapacitor Live Updates
Capgo BuilderCapacitor Builder
:CapacitorでリリースビルドをCIで自動化します。:Capacitorでプッシュ通知を追加します。 @capacitor/push-notifications and rebuild with Capgo Builder
関連ガイド: __CAPGO_KEEP_0__に愛されるモバイル · __CAPGO_KEEP_0__.newをモバイルに

Capgoの無料アカウントに登録してください __CAPGO_KEEP_0__を有効にすることで、リアルタイム更新とクラウドネイティブビルドが可能になります。

リソース

Capacitorを使用してBase44からネイティブモバイルアプリに進化する

Capgoを使用している場合 CapacitorからNative Mobile Appsに変換する __CAPGO_KEEP_0__をNativeプラグインの作業計画に接続する Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品フロー Capacitor プラグイン (Capgo) Capacitor プラグイン (Capgo) の実装詳細 Capgo Native Builds Capgo Native Buildsの製品フロー WindowsからiOSをビルドする MacがなくてもクラウドiOSビルドを行う

Capacitorを使用したBase44からネイティブモバイルアプリへの変換

導入