Belajar bagaimana mengexport aplikasi web Bolt.new Anda dan mengubahnya menjadi aplikasi mobile asli menggunakan Capacitor. Panduan lengkap untuk React, Vue, dan framework lainnya...

Pendahuluan

Bolt.new adalah platform pengembangan berbasis AI yang inovatif yang dapat menghasilkan aplikasi web full-stack menggunakan berbagai framework seperti React, Vue, Svelte, dan lainnya. Namun, apa jika Anda ingin membawa karya Bolt.new Anda ke perangkat mobile? Dalam tutorial ini, kami akan menunjukkan cara untuk mengexport projek Bolt.new Anda dan mengubahnya menjadi aplikasi mobile asli menggunakan Capacitor.

Apakah proyek Bolt.new Anda menggunakan React, Vue, atau framework lain yang didukung, panduan ini akan membantu Anda membuat aplikasi iOS dan Android asli dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.

Sebelum Anda Mulai: Persyaratan & Waktu

Waktu yang Diperkirakan: 3-5 jam untuk pengaturan lengkap

Persyaratan Sistem:

Pengembangan iOS: Mac dengan macOS 12.0+ (diperlukan, tidak ada kerja sama)
Pengembangan Android: Sistem Operasi Apapun (Windows/Mac/Linux)
Ruang Bebas: 20-30GB untuk alat pengembangan
Memori8GB RAM minimum, 16GB disarankan

Anggaran yang Diperlukan:

Pengembang Apple8GB RAM minimum, 16GB disarankan
Google PlayBiaya Satu Waktu: $25
Cursor ProBiaya Bulanan: $20 (opsional, mempercepat pengembangan)

Apa yang Kami Instal:

Node.js & npm
Xcode (hanya untuk Mac, untuk iOS)
Android Studio (untuk Android)
Berbagai alat perintah garis perintah

Mengapa Mengubah Aplikasi Bolt.new Anda ke Mobile?

Jangkauan Platform Berbeda: Rilis aplikasi AI yang dihasilkan ke toko aplikasi mobile
Akses Perangkat Asli: Gunakan kamera, GPS, sistem file, dan fitur lain asli
Kinerja yang Ditingkatkan: Kontainer asli memberikan kinerja yang lebih baik daripada tampilan web
Kemampuan Offline: Bekerja secara offline dengan solusi penyimpanan asli
Pemberitahuan Pushcontext: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Kunci pesan `push_notifications` (Pemberitahuan Push).

Kenapa Capacitor Lebih Baik Daripada Expo?

Jika Anda sedang mempertimbangkan opsi pengembangan mobile, Capacitor menawarkan kelebihan yang signifikan dibandingkan Expo, terutama untuk pengembangan web pertama:

Satu Basis Kode, Tiga Platform: Situs web React, Next.js, atau Vue.js Anda menjadi aplikasi iOS, Android, dan web dengan tidak perlu melakukan konversi apa pun
Tidak Perlu Merekonstruksi: Ambil proyek Bolt.new Anda secara langsung - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo yang memerlukan
Pendekatan Web Pertama yang Benar: Berbeda dengan Expo yang lebih fokus pada mobile dan terasa kotor di web, Capacitor menganggap web sebagai warga pertama
Pengembangan yang Lancar: Terus menggunakan alat dan alur kerja pengembangan web yang familiar Anda
Kemerdekaan Framework: Bekerja dengan framework web apa pun (React, Vue, Svelte, Next.js, dll.) - tidak terikat pada React Native seperti Expo

Perbedaan Utama:

Dengan Capacitor: Buat website Anda → Tambah dukungan mobile (kode yang sama)
Dengan Expo: Buat untuk mobile → Coba membuat web berjalan (pendekatan yang berbeda, seringkali tidak nyaman)

Karena proyek Bolt.new Anda sudah merupakan aplikasi web, Capacitor memungkinkan Anda untuk memperluasnya ke mobile tanpa mengubah satu baris kode code pun. Expo akan memerlukan Anda untuk membangun proyek Anda secara keseluruhan untuk framework mereka.

Langkah 1: Atur Lingkungan Pengembangan Anda

Dapatkan Cursor - Editor Code yang Dipimpin AI

Untuk bekerja efisien dengan proyek Bolt.new Anda, kita akan menggunakan Cursor, editor code yang cerdas yang memudahkan pengembangan:

Pergi ke cursor.sh dan ambil installer untuk sistem operasi Anda
Jalankan proses instalasi
Luncurkan Cursor setelah siap

Mulai Cursor

Konfigurasi Cursor untuk Produktivitas Maksimal

Mendapatkan hasil maksimal dari Cursor memerlukan beberapa pengaturan awal:

Pertimbangkan untuk mendapatkan Cursor Pro - Versi gratis berfungsi, tetapi Pro ($20/bulan) membuka:
- Bantuan AI tanpa batas
- Model premium (GPT-4, Claude)
- Respons instan
- Dukungan Premium
Akses Pengaturan bersama Command+, (Mac) atau Ctrl+, (Windows)

Pengaturan Kursor

Aktifkan Fitur AI - Pastikan bantuan AI diaktifkan:

Biarkan Model

Pilih Model AI Anda - Kami merekomendasikan Claude atau GPT-4:

Pilih Model Kursor

Enable Command Running - Biarkan Cursor menjalankan perintah secara otomatis:

Allow Run Commands

Langkah 2: Ekspor Projek Bolt.new Anda

Sekarang mari kita bawa projek Bolt.new Anda ke Cursor.

Unduh Projek Anda

Navigasikan ke projek Bolt.new Anda di browser Anda
Temukan Unduh atau Langkah 2: Ekspor Projek Bolt.new Anda Sekarang mari kita bawa projek Bolt.new Anda ke Cursor.

Unduh file ZIP yang berisi proyek Anda
Ekstrak ke folder di komputer Anda

File proyek Bolt.new

Buka di Cursor

Gunakan

di Cursor File > Open Folder Pilih folder proyek Bolt.new yang diekstrak
Cursor akan memuat proyek Anda
Buka di Cursor

Alternatif: Clone dari __CAPGO_KEEP_0__

Alternative: Clone from GitHub

Jika Anda telah terhubung Bolt.new ke GitHub:

Tombol Shift+Command+P (Mac) atau Shift+Ctrl+P (Windows)
Cari "Git: Clone"
Masukkan URL repositori Anda
Pilih lokasi untuk menyimpannya

Klon di Cursor

Langkah 2: Identifikasi Framework Projek Anda

Bolt.new dapat menghasilkan proyek menggunakan berbagai framework. Mari kita identifikasi apa yang Anda kerjakan:

Cek package.json

Buka package.json untuk melihat apa framework yang digunakan oleh proyek Anda:

Paket Bolt.new inspeksi package.json

Bolt.new proyek jenis umum:

React + Vite: Konfigurasi paling umum
Vue + Vite: Aplikasi Vue.js
Svelte: Aplikasi Svelte
Next.js: Aplikasi React full-stack
JavaScript VanillaAplikasi JavaScript Tunggal

Langkah 3: Pasang Alat Pengembangan

Option A: Biarkan Cursor AI Mengatasi Semua Hal

Tombol Command+K (Mac) atau Ctrl+K (Windows) di Cursor

Tipe permintaan ini:

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

Cursor AI akan secara otomatis:

Pasang Node.js dan npm jika diperlukan
Konfigurasi Homebrew pada macOS
Pasang semua dependensi proyek
Luncurkan server pengembangan Anda

Install Homebrew

Metode B: Proses Instalasi Manual

Jika Anda lebih suka mengontrol manual atau pendekatan AI mengalami masalah:

Pertama, buka terminal Cursor dengan Shift+Command+T (Mac) atau Shift+Ctrl+T (Windows)

Untuk pengguna macOS:

# 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

Untuk pengguna Windows:

Unduh installer Node.js dari nodejs.org
Selesaikan asisten instalasi
In Terminal Cursor:

cd your-bolt-project
npm install
npm run dev

Bolt.new aplikasi berjalan lokal

Aplikasi Bolt.new Anda sekarang harus berjalan (biasanya di) http://localhost:5173 untuk proyek Vite).

Langkah 4: Konfigurasi Bangun untuk Mobile

Konfigurasi Anda akan bervariasi berdasarkan kerangka kerja proyek Anda.

Pilihan A: Konfigurasi Otomatis dengan AI Cursor

Tanyakan kepada AI Cursor untuk menghandle konfigurasi:

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

Cursor akan mendeteksi kerangka kerja Anda dan menerapkan konfigurasi yang tepat.

Pilihan B: Konfigurasi Manual oleh Kerangka Kerja

Untuk Proyek React + Vite:

Edit 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,
      },
    },
  },
})

Untuk Projek Vue + Vite:

Ubah vite.config.js:

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

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

Untuk Projek Next.js

Tambahkan ke skrip Anda: package.json Update

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

Langkah 5: Bangun Projek Anda next.config.js:

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

module.exports = nextConfig

Waktu untuk membuat build produksi aplikasi Bolt.new Anda.

Pilihan A: Bangun dengan Cursor AI

Hanya tanyakan pada Cursor:

Cursor akan menjalankan perintah build yang sesuai berdasarkan framework Anda.

Build my Bolt.new project for production deployment

Pilihan B: Bangun Secara Manual

__CAPGO_KEEP_0__

Untuk Projek Vite (React/Vue/Svelte):

npm run build

Bolt.new Vite build berhasil

Untuk Aplikasi Next.js:

npm run static

Konfirmasi Sukses Build

Pastikan hasil build Anda menghasilkan output yang benar:

Projek Vite: Cari sebuah dist direktori
Aplikasi Next.js: Periksa sebuah out direktori

Hasil build Bolt.new

Langkah 6: Tambahkan Capacitor ke Projek Bolt Baru Anda

Mari kita transformasikan aplikasi web Anda menjadi aplikasi mobile native.

Pilihan A: Pengaturan Cepat dengan Cursor AI

Tekan Command+K (Mac) atau Ctrl+K (Windows) dan minta:

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

Cursor AI akan menghandle proses pengaturan seluruhnya.

Pilihan B: Pengaturan Langkah demi Langkah Manual

Instal alat perintah Capacitor:

npm install -D @capacitor/cli

Mulai projek Capacitor:

npx cap init

Capacitor inisialisasi Bolt

Anda akan diminta:

Nama Aplikasi: Nama Projek Bolt Baru Anda
ID Paket: Format seperti com.yourcompany.yourapp

Melanjutkan dengan pengaturan manual - instal paket penting:

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

Tambahkan dukungan platform mobile:

npx cap add ios
npx cap add android

Capacitor platform ditambahkan Bolt

Apa yang Terjadi?

Struktur projek Bolt Baru Anda sekarang terlihat seperti:

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

Catatan Penting:

Aplikasi web code Anda tetap di src/ - edit di sana
ios/ dan android/ dihasilkan - jangan diedit
Setelah perubahan, selalu jalankan npx cap sync
Masing-masing platform memiliki proses pembangunan sendiri

Langkah 7: Konfigurasi Capacitor

Waktu untuk mengkonfigurasi Capacitor untuk framework khusus Anda.

Pilihan A: Auto-Konfigurasi dengan Cursor

Minta bantuan Cursor:

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

Pilihan B: Konfigurasi Manual

Untuk Aplikasi Berbasis Vite:

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;

Untuk Aplikasi Berbasis Next.js:

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;

Langkah 8: Bangun dan Sinkronisasi

Siapkan aplikasi Anda untuk pengiriman ke perangkat mobile.

Option A: Menggunakan Cursor AI

Beritahu Cursor:

Build my project and sync it with Capacitor for mobile deployment

Option B: Proses Manual

Eksekusi perintah-perintah ini secara berurutan:

npm run build
npx cap sync

Capacitor sink Bolt complete

Langkah 9: Bangun File Binari yang Siap Dipasarkan dengan Capgo Builder (Dianjurkan)

Tidak perlu Mac atau pipeline lokal Xcode/Android Studio penuh untuk mengirimkan ke App Store dan Google Play. Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

__CAPGO_KEEP_0__ Builder — Bangun dari Windows, Linux, atau lingkungan pengembangan AI Anda
Satu CLI alur kerja — mudah untuk ditulis skrip dan menyerahkan ke Cursor, Claude Code, atau Codex
Berpasangan dengan Update Langsung — kirimkan perbaikan JS/UI melalui udara; bangun kembali biner native hanya ketika plugin atau izin berubah

Set up Capgo Pembangun

Setelah build produksi Anda dan Capacitor sinkronisasi bekerja secara lokal:

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

Simpan kunci tanda tangan sekali (sertifikat Apple, profil pengaturan, keystore Android). Lihat Manajemen Kunci dan Bangun iOS dari Windows.

Meminta build awan

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

Capgo Pembangun mengalirkan log pembangunan di terminal Anda. Dengan App Store Connect yang terkonfigurasi, pembangunan iOS dapat langsung menuju ke TestFlight.

Unggah bundle web Anda untuk pembaruan OTA:

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

Langkah 10: Buka IDE Natively (Opsional untuk Pengujian Lokal)

Jika Anda memiliki Mac atau ingin melakukan pengujian emulator sebelum cloud build, buka proyek native secara lokal:

Akses lingkungan pengembangan native untuk aplikasi Anda.

Pengembangan iOS

Pilihan A: Melalui Cursor AI

Open my iOS project in Xcode

Pilihan B: Perintah Terminal

npx cap open ios

Membuka Xcode project Bolt

Pengembangan Android

Pilihan A: Melalui Cursor AI

Open my Android project in Android Studio

Pilihan B: Perintah Terminal

npx cap open android

Studio Android membuka proyek Bolt

Langkah 11: Bangun dan Jalankan Secara Lokal (Opsional)

Jalankan di iOS

Pengaturan Xcode (Pertama Kali)

Pilih Target Anda:
- Klik selector perangkat di samping tombol Play
- Konteks: Halaman/area: Capgo Builder / produk halaman build native cloud. Peran: Label UI singkat atau item navigasi. Pesan kunci `native_build_builder_credit_next` (Kredit Pembangun Native Build Berikut).
- Pilih simulator iPhone apa saja untuk tes
Configure Code Signing:
- Pengaturan Tanda Tangan __CAPGO_KEEP_0__
- Klik nama proyek Anda di sidebar kiri
- Pergi ke tab `Signing & Capabilities` (Tanda Tangan & Kemampuan)
- Masuk dengan ID Apple Anda
- Catatan: Perangkat nyata memerlukan Program Pengembang Apple ($99/tahun)
Bangun Aplikasi Anda:
- Klik tombol Play ▶️
- Pertama kali: 5-10 menit (sabarlah!)
- Context: Halaman/area: Capgo Builder / produk halaman build cloud native. Peran: Label UI singkat atau item navigasi. Pesan kunci `native_build_builder_credit_first` (Kredit Pembangun Build Asli Pertama).

Watch progress bar di atas:

Troubleshooting iOS“Tidak ditemukan akun”
: Tambahkan ID Apple di Xcode > Pengaturan > Akun“Gagal membangun”
Masalah Simulator: Restart simulator melalui Device > Restart

Aplikasi Bolt berjalan di iOS

Berjalan di Android

Pengaturan Android Studio (Pertama Kali)

SDK Pengaturan (otomatis):
- Android Studio akan mendeteksi komponen yang hilang
- Klik “Pasang komponen yang hilang SDK” ketika diminta
- Ini mengunduh ~2-3GB file
Buat Perangkat Virtual:
- Buka AVD Manager (ikon telepon di toolbar)
- Klik ‘+ Buat Perangkat Virtual’
- Pilih ‘Pixel 6’ (pilihan default yang baik)
- Unduh gambar sistem ketika diminta
- Selesai dengan pilihan default
Jalankan Aplikasi Anda:
- Pilih emulator dari dropdown
- Klik tombol hijau ▶️ Run
- Build pertama: 10-15 menit
- Perangkat emulator dimulai secara otomatis

Pengaturan Android:

“Sinkronisasi Gradle gagal’Coba File > Hapus Cache
Emulator lambat: Aktifkan akselerasi perangkat keras di pengaturan AVD
Error pembangunan: Perbarui Gradle melalui saran perbaikan

Aplikasi Bolt berjalan di Android

Daftar Pengecekan Verifikasi

Setelah pembangunan sukses, verifikasi:

✅ Aplikasi meluncur tanpa mengalami crash ✅ Konten Bolt.new Anda ditampilkan dengan benar ✅ Tombol dan interaksi berfungsi ✅ Konsol tidak menampilkan error merah

Masih mengalami masalah? Pesan error biasanya memberitahu Anda apa yang salah - bacalah dengan teliti!

Langkah 12: Aktifkan Live Reload (Pengembangan)

Percepat alur kerja pengembangan Anda dengan hot reloading.

Opsi A: Pengaturan Otomatis dengan Cursor

Tanya Cursor:

Enable live reload for my Capacitor app development

Cursor akan mengkonfigurasi semuanya secara otomatis.

Opsi B: Pengaturan Manual

Peroleh alamat IP lokal Anda:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

Update Anda 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;

Aplikasikan pengaturan:

npx cap copy

Live reload diaktifkan Bolt

Langkah 13: Tambahkan Fitur Nativ

Perluas aplikasi Bolt.new Anda dengan kemampuan spesifik perangkat.

Opsi A: Integrasi Berdaya Tinggi dengan AI

Pertanyaan dari Cursor:

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

Kursor akan menginstal plugin dan membuat integrasi code.

Option B: Instalasi Plugin Manual

Instal plugin native populer:

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

Buat file utilitas untuk proyek 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;
};

Pakai di Komponen Anda

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

Sinkronisasi Perubahan

Dengan Kursor AI:

Sync my native feature changes to all platforms

Perintah manual:

npx cap sync

Fitur native yang ditambahkan Bolt

Langkah 14: Optimalkan untuk Produksi

Ikon Aplikasi dan Layar Splash

Option A: Pengaturan Kursor AI

Permintaan:

Create app icons and splash screens for my mobile app

Option B: Pembuatan Asset Manual

Dapatkan alat aset:

npm install -D @capacitor/assets

Siapkan grafik Anda:
- Buat assets/icon.png (1024x1024px)
- Buat assets/splash.png (2732x2732px)
Generasi semua ukuran secara otomatis:

npx capacitor-assets generate

Aset aplikasi Bolt telah dibuat

Optimalkan Build

Untuk proyek Vite, optimalkan build Anda:

// 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
        },
      },
    },
  },
})

Build Akhir

Option A: Bangun dengan Cursor AI

Create the final production build and prepare for app store deployment

Option B: Proses Pembangunan Manual

npm run build
npx cap sync
npx cap copy

Pengaturan Masalah Umum

Pengaturan Masalah Framework

Projek React/Vite

Pastikan base: './' tertentu dalam konfigurasi Vite
Periksa bahwa semua import menggunakan jalur relatif
Pastikan bahwa folder dist dibuat dengan benar

Projek Vue

Pastikan Vue Router menggunakan mode hash untuk mobile
Periksa bahwa aset-aset telah direferensikan dengan benar
Verifikasi bahwa penggunaan komponen lazy loading berfungsi dalam konteks mobile

Proyek Next.js

Pastikan ekspor statis telah dikonfigurasi dengan benar
Periksa bahwa impor dinamis berfungsi dalam konteks statis
Verifikasi bahwa API rute tidak digunakan (atau dihandle dengan benar)

Error Pembangunan

Jika Anda mengalami error pembangunan:

Hapus node_modules dan reinstall:

rm -rf node_modules package-lock.json
npm install

Periksa dependensi proyek Bolt.new untuk konsistensi mobile
Pastikan semua jalur relatif benar untuk pengembangan mobile

Asset Hilang

For masalah penggunaan aset:

Pastikan semua aset ada di folder publik
Pakai jalur relatif untuk gambar dan file
Periksa bahwa proses pembangunan menyalin semua aset yang diperlukan

Kesimpulan

Hore! Anda telah berhasil mengubah proyek Bolt.new Anda menjadi aplikasi mobile asli. Aplikasi web yang dihasilkan AI Anda dapat sekarang:

Jalankan secara native di perangkat iOS dan Android
Akses fitur perangkat seperti kamera, GPS, dan penyimpanan
Didistribusikan melalui toko aplikasi
Memberikan pengalaman pengguna mobile yang dioptimalkan

Langkah Selanjutnya

Pembuat Capgo: Gunakan bangunan nirkabel untuk rilis TestFlight dan Play Store
Pembaruan Langsung: Implement : Capgo untuk pembaruan over-the-air instan
Analitik: Tambahkan analitik mobile untuk melacak perilaku pengguna
Kinerja: Pantau dan optimalkan kinerja aplikasi mobile Anda
Pengujian: Uji aplikasi Anda pada berbagai perangkat dan ukuran layar

Kreasi Bolt baru Anda siap untuk ekosistem mobile!

Ressourcer

Belajar bagaimana Capgo dapat membantu Anda mengirimkan perbarui instan ke aplikasi mobile Anda, Daftar sekarang untuk akun gratis Hari ini.

Teruskan dari Mengubah Projek Bolt baru Anda menjadi Aplikasi Mobile Asli dengan Capacitor

If Anda menggunakan Transform Your Bolt.new Project into Native Mobile Apps with Capacitor untuk merencanakan kerja plugin native, hubungkannya dengan Capgo Plugin Directory for the product workflow in Capgo Plugin Directory, Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Native Builds untuk alur kerja produk di Capgo Pembangunan Nativ.

Mengubah Projek Bolt.new Anda menjadi Aplikasi Mobile Asli dengan Capacitor