Transformasi Projek Bolt.new Anda menjadi Aplikasi Mobile Nativ dengan Capacitor

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 lain-lain. Namun, apa jika Anda ingin membawa karya Bolt.new Anda ke perangkat mobile? Dalam tutorial ini, kami akan menunjukkan cara mengexport projek Bolt.new Anda dan transformasinya menjadi aplikasi mobile natif 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)
• Ruangan Bebas: 20-30GB untuk alat pengembangan
• Memori: 8GB RAM minimum, 16GB recommended

Anggaran yang Diperlukan:

• Apple Developer: $99/tahun (untuk App Store iOS)
• Google Play: biaya satu kali sebesar $25
• Cursor Pro: $20/bulan (opsional, mempercepat pengembangan)

Apa yang Akan Dikinstal:

• 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?

• Cakupan Platform yang Berbeda: Rilis aplikasi yang dihasilkan AI ke toko aplikasi mobile
• Akses Perangkat Asli: Gunakan kamera, GPS, sistem file, dan fitur asli lainnya
• Kinerja yang Ditingkatkan: Kontainer asli memberikan kinerja yang lebih baik daripada tampilan web
• Kemampuan Offline: Bekerja secara offline dengan solusi penyimpanan asli
• Pemberitahuan Push: Berinteraksi dengan pengguna melalui dukungan pemberitahuan push asli

Why 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 aplikasi web dengan tidak perlu konversi apa pun
• Tidak Perlu Membangun Ulang: Ambil proyek Bolt.new Anda secara langsung - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo yang memerlukan
• Pengembangan Web Pertama yang Benar: Berbeda dengan Expo yang lebih fokus pada mobile dan terasa kotor di web, Capacitor menganggap web sebagai warga pertama kelas
• 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: Buatlah situs web Anda → Tambahkan dukungan mobile (kode dasar yang sama)
• Dengan Expo: Buat untuk mobile → Coba membuat web bekerja (pendekatan yang berbeda, seringkali tidak nyaman)

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.

Langkah 1: Atur Lingkungan Pengembangan Anda

Dapatkan Cursor - Editor Code yang Dipimpin AI

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

1. Pergi ke cursor.sh dan ambil installer untuk OS Anda
2. Lakukan proses instalasi
3. Luncurkan Cursor ketika sudah siap

Konfigurasi Cursor untuk Produktivitas Maksimal

Mendapatkan hasil maksimal dari Cursor memerlukan beberapa pengaturan awal:

1. Menganggap Penggunaan Cursor Pro - Versi gratis berfungsi, tetapi Pro ($20/bulan) membuka:

   • Bantuan AI tanpa batas
   • Model premium (GPT-4, Claude)
   • Respon instan
   • Dukungan Premium

2. Akses Pengaturan dengan Command+, (Mac) atau Ctrl+, (Windows)

3. Aktifkan Fitur AI - Pastikan bantuan AI diaktifkan:

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

5. Aktifkan Penggunaan Perintah - Biarkan Cursor menjalankan perintah secara otomatis:

Langkah 2: Eksport Proyek Bolt.new Anda

Sekarang, mari kita bawa proyek Bolt.new Anda ke Cursor.

Unduh Proyek Anda

1. Navigasikan ke proyek Bolt.new Anda di browser Anda
2. Temukan Unduh atau Eksport tombol di antarmuka Bolt

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

Buka di Cursor

Setelah diekstrak, buka proyek di Cursor:

1. Gunakan File > Open Folder di Cursor
2. Pilih folder Bolt.new proyek yang diekstrak Anda
3. Cursor akan memuat proyek Anda

Alternatif: Clone dari GitHub

Jika Anda telah terhubung Bolt.new ke GitHub:

1. Tekan Shift+Command+P (Mac) atau Shift+Ctrl+P (Windows)
2. Cari "Git: Clone"
3. Masukkan URL repositori Anda
4. Pilih lokasi untuk menyimpannya

Langkah 2: Identifikasi Framework Projek Anda

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

Periksa package.json

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

Tipe proyek Bolt.new yang umum digunakan:

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

Langkah 3: Pasang Alat Pengembangan

Pilihan A: Biarkan Cursor AI Mengatasi Semua

1. Tombol Command+K (Mac) atau Ctrl+K (Windows) di Cursor
2. Masukkan 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

Option 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:

1. Unduh installer Node.js dari nodejs.org
2. Selesaikan wizard instalasi
3. Di Terminal Cursor:

cd your-bolt-project
npm install
npm run dev

Aplikasi Bolt baru Anda seharusnya sudah 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 Cursor AI

Tanyakan Cursor AI 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 package.json scripts:

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

Perbarui next.config.js:

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

module.exports = nextConfig

Langkah 5: Bangun Projek Anda

Waktunya membuat build produksi aplikasi Bolt.new.

Pilihan A: Bangun dengan Cursor AI

Cukup tanyakan kepada Cursor:

Build my Bolt.new project for production deployment

Cursor akan menjalankan perintah build yang sesuai berdasarkan framework Anda.

Pilihan B: Bangun Secara Manual

Untuk Projek Vite (React/Vue/Svelte):

npm run build

Untuk Aplikasi Next.js:

npm run static

Konfirmasi Sukses Build

Pastikan hasil build Anda menghasilkan output yang benar:

• Projek Vite: Cari direktori dist Projek Next.js
• : Periksa direktoriHasil build Bolt.new out Untuk Projek Vite (React/Vue/Svelte):

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 mengelola proses pengaturan secara keseluruhan.

Pilihan B: Pengaturan Langkah demi Langkah Manual

Pasang alat-alat perintah Capacitor:

npm install -D @capacitor/cli

Inisialisasi projek Capacitor:

npx cap init

Anda akan diminta untuk:

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

Lanjutkan 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

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:

• Web code Anda tetap berada di src/ - edit di sana
• ios/ dan dihasilkan - jangan diedit android/ Setelah perubahan, selalu jalankan
• Setiap platform memiliki proses pembangunan sendiri npx cap sync
• Langkah 7: Konfigurasi __CAPGO_KEEP_0__

Sekarang saatnya mengkonfigurasi Capacitor untuk framework khusus Anda.

Time to configure Capacitor for your specific framework.

Minta bantuan Cursor:

Pilihan B: Konfigurasi Manual

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

Untuk Aplikasi Berbasis Vite:

Untuk Aplikasi Berbasis 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;

Langkah 8: Bangun dan Sinkronkan

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;

and are generated - don’t edit

Siapkan aplikasi Anda untuk pengiriman ke perangkat mobile.

Pilihan A: Menggunakan Cursor AI

Beritahu Cursor:

Build my project and sync it with Capacitor for mobile deployment

Pilihan B: Proses Manual

Jalankan perintah-perintah ini secara berurutan:

npm run build
npx cap sync

Langkah 9: Buka IDE Native

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

Pengembangan Android

Option A: Melalui Cursor AI

Open my Android project in Android Studio

Option B: Perintah Terminal

npx cap open android

Langkah 10: Bangun dan Jalankan Aplikasi Seluler Anda

Jalankan di iOS

Mengatur Xcode (Pertama Kali)

1. Pilih Target Anda:

   • Klik selector perangkat di samping tombol Play
   • Untuk tes: Pilih simulator iPhone apa saja
   • Untuk perangkat nyata: Hubungkan iPhone melalui USB

2. Konfigurasi Code Signing:

   • Klik nama proyek Anda di sidebar kiri
   • Buka tab “Signing & Capabilities”
   • Aktifkan “Automatis mengelola tanda tangan”
   • Masuk dengan ID Apple Anda
   • Catatan: Perangkat nyata memerlukan Program Pengembang Apple ($99/tahun)

3. Buat Aplikasi Anda:

   • Klik tombol ▶️ Play
   • Pertama kali: 5-10 menit (tolak menunggu!)
   • Lihat progress bar di atas

Mengatasi iOS:

• “Tidak ada akun ditemukan”: Tambahkan ID Apple di Xcode > Pengaturan > Akun
• “Gagal membangun”: Bersihkan folder pembangunan (Shift+Command+K) dan coba lagi
• Masalah Simulator: Restart simulator melalui Perangkat > Restart

Berjalan di Android

Pengaturan Studio Android (Pertama kali)

1. SDK Pengaturan (otomatis):

   • Studio Android akan mendeteksi komponen yang hilang
   • Klik “Pasang komponen yang hilang SDK” ketika diminta
   • Ini mengunduh ~2-3GB file

2. Buat Perangkat Virtual:

   • Buka Manajer AVD (ikon telepon di toolbar)
   • Klik ”+ Buat Perangkat Virtual”
   • Pilih “Pixel 6” (pilihan default yang baik)
   • Unduh gambar sistem ketika diminta
   • Selesai dengan opsi default

3. Jalankan Aplikasi Anda:

   • Pilih emulator Anda dari dropdown
   • Klik tombol hijau ▶️ Run
   • Pembangunan pertama: 10-15 menit
   • Emulator dimulai secara otomatis

Troubleshooting Android:

• "Gradle sync gagal""Coba File > Nonaktifkan Cache"
• Emulator lambat"Aktifkan akselerasi perangkat keras di pengaturan AVD"
• Error pembangunan"Perbarui Gradle melalui perbaikan yang disarankan"

Daftar Periksa 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 kesalahan biasanya memberitahu Anda apa yang salah - bacalah dengan teliti!

Langkah 11: Aktifkan Ulang Hidup (Pengembangan)

Percepat alur kerja pengembangan Anda dengan mengaktifkan ulang hidup.

Pilihan A: Pengaturan Otomatis dengan Cursor

Tanya Cursor:

Enable live reload for my Capacitor app development

Cursor akan mengkonfigurasi semuanya secara otomatis.

Pilihan B: Pengaturan Manual

1. Dapatkan alamat IP lokal Anda:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

2. Perbarui 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;

3. Terapkan pengaturan:

npx cap copy

Langkah 12: Tambahkan Fitur Asli

Perluas aplikasi Bolt baru Anda dengan kemampuan spesifik perangkat.

Pilihan A: Integrasi Berdaya Tinggi AI

Minta dari Cursor:

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

Cursor akan menginstal plugin dan membuat integrasi code.

Pilihan 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;
};

Gunakan 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 Cursor AI:

Sync my native feature changes to all platforms

Perintah manual:

npx cap sync

Langkah 13: Optimize untuk Produksi

Ikon Aplikasi dan Layar Splash

Pilihan A: Pengaturan AI Cursor

Permintaan:

Create app icons and splash screens for my mobile app

Pilihan B: Pembuatan Asset Manual

1. Dapatkan alat aset:

npm install -D @capacitor/assets

2. Siapkan grafik Anda:

   • Buat assets/icon.png (1024x1024px)
   • Buat assets/splash.png (2732x2732px)

3. Generasi semua ukuran secara otomatis:

npx capacitor-assets generate

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

Pilihan A: Bangun dengan Cursor AI

Create the final production build and prepare for app store deployment

Pilihan B: Proses Pembangunan Manual

npm run build
npx cap sync
npx cap copy

Pengaturan Masalah Umum

Masalah Khusus Framework

Proyek React/Vite

• Pastikan base: './' ditetapkan dalam konfigurasi Vite
• Periksa bahwa semua import menggunakan jalur relatif
• Pastikan folder yang dihasilkan benar dist Vue Projects

Pastikan Vue Router menggunakan mode hash untuk perangkat mobile

• Periksa bahwa asset-asset yang digunakan dengan benar
• Pastikan penggunaan komponen lazy loading berfungsi dalam konteks mobile
• Next.js Projects

Pastikan konfigurasi static export benar

• Periksa bahwa penggunaan import dinamis berfungsi dalam konteks statis
• Pastikan bahwa __CAPGO_KEEP_0__ tidak digunakan (atau dihandle dengan benar)
• Verify that API routes are not used (or properly handled)

Jika Anda mengalami kesalahan saat build:

Check that __CAPGO_KEEP_0__ routes are not used (or properly handled)

1. Hapus node_modules dan reinstall:

rm -rf node_modules package-lock.json
npm install

2. Periksa ketergantungan proyek Bolt.new untuk kompatibilitas mobile
3. Pastikan semua jalur relatif benar untuk pengembangan mobile

Sumber Daya Hilang

Untuk masalah penggunaan sumber daya:

1. Pastikan semua sumber daya ada di folder publik
2. Gunakan jalur relatif untuk gambar dan file
3. Periksa bahwa proses pembangunan mengcopy semua sumber daya yang diperlukan

Kesimpulan

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

• Berjalan secara native di perangkat iOS dan Android
• Mengakses fitur perangkat seperti kamera, GPS, dan penyimpanan
• Distribusikan melalui toko aplikasi
• Berikan pengalaman pengguna mobile yang dioptimalkan

Langkah-Langkah Selanjutnya

• Pembaruan Langsung: Implement Capgo untuk pembaruan over-the-air instan
• Analitik: Tambahkan analitik mobile untuk mengikuti perilaku pengguna
• Kinerja: Pantau dan optimalkan kinerja aplikasi mobile Anda
• Pengujian: Uji coba aplikasi Anda pada berbagai perangkat dan ukuran layar

Kreasi Bolt.new Anda sudah siap untuk ekosistem mobile!

Sumber Daya

• Platform Bolt.new
• Capacitor Dokumentasi
• Petunjuk Deployan Vite Mobile
• Capgo - Perbarui Hidup untuk Aplikasi Capacitor

Pelajari bagaimana Capgo dapat membantu Anda mengirimkan perbarui instan ke aplikasi mobile Anda, daftar untuk akun gratis hari ini.

Lanjutkan dari Mentransformasikan Projek Bolt.new Anda menjadi Aplikasi Mobile Asli dengan Capacitor

Jika Anda menggunakan Mengubah Projek Bolt.new Anda menjadi Aplikasi Mobile Nativ dengan Capacitor untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh 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 Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.