Ubah Projek Anda dengan Bolt.new 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. Tapi apa jika Anda ingin membawa karya Bolt.new Anda ke perangkat mobile? Dalam tutorial ini, kami akan menunjukkan cara Anda mengexport projek Bolt.new Anda dan mengubahnya menjadi aplikasi mobile asli menggunakan Capacitor.

Apakah projek 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 Estimasi: 3-5 jam untuk pengaturan lengkap

Persyaratan Sistem:

• Pengembangan iOS: Komputer Mac dengan macOS 12.0+ (diperlukan, tidak ada kerja sama)
• Pengembangan Android: Sistem Operasi Apapun (Windows/Mac/Linux)
• Sumber Daya Gratis: 20-30GB untuk alat pengembangan
• Memori: 8GB RAM minimum, 16GB direkomendasikan

Biaya yang Diperlukan:

• Pengembang Apple: $99/tahun (untuk App Store iOS)
• Google PlayBiaya satu kali sebesar $25
• Cursor Pro: Biaya bulanan sebesar $20 (opsional, mempercepat pengembangan)

Apa yang Kami Instal:

• Node.js & npm
• Xcode (hanya untuk Mac, untuk iOS)
• Android Studio (untuk Android)
• Alat-alat perintah berbagai jenis

Mengapa Mengubah Aplikasi Bolt.new Anda ke Mobile?

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

Mengapa Capacitor Lebih Baik dari Expo?

Jika Anda 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 konversi apa pun
• Tidak Perlu Merekonstruksi: Ambil proyek Bolt.new Anda seperti itu - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo memerlukan
• Approach Web Pertama: Berbeda dengan Expo yang berorientasi mobile dan berantakan di web, Capacitor menganggap web sebagai warga pertama
• Pengembangan Tanpa Gangguan: 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 dengan React Native seperti Expo

Perbedaan Utama:

• Dengan Capacitor: Bangun situs web → Tambah dukungan mobile (kode yang sama)
• Dengan Expo: Bangun untuk mobile → Coba membuat web berfungsi (pendekatan yang berbeda, seringkali berantakan)

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. Kunjungi cursor.sh dan ambil installer untuk OS Anda
2. Lakukan proses instalasi
3. Luncurkan Cursor setelah siap

Mengonfigurasi Kursor untuk Produktivitas Maksimum

Mengoptimalkan Kursor memerlukan beberapa pengaturan awal:

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

   • Tolak balik AI tanpa batas
   • Model premium (GPT-4, Claude)
   • Respons instan
   • Bantuan 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 Jalankan 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 Projek 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 proyek Bolt.new yang diekstrak
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:

Cek package.json

Buka package.json untuk melihat apa framework proyek Anda menggunakan:

Tipe proyek Bolt.new yang umum:

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

Langkah 3: Pasang Alat Pengembangan

Pilihan A: Biarkan Cursor AI Mengatasi Semua Hal

1. Tekan Command+K (Mac) atau Ctrl+K (Windows) di Kursor
2. Tulis permintaan ini:

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

Kursor AI akan secara otomatis:

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

Pilihan B: Proses Instalasi Manual

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

Langkah pertama, buka terminal Kursor 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. Lakukan pengaturan instalasi
3. Di terminal Cursor:

cd your-bolt-project
npm install
npm run dev

untuk proyek Vite). http://localhost:5173 Langkah 4: Konfigurasi Build untuk Mobile

__CAPGO_KEEP_0__

Konfigurasi Anda akan bervariasi berdasarkan kerangka kerja proyek Anda.

Pilihan A: Konfigurasi Otomatis dengan Cursor AI

Tanyakan kepada 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 Proyek 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 Proyek Next.js

Tambahkan ke skrip Anda: 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 Anda.

Pilihan A: Bangun dengan Cursor AI

Hanya tanyakan pada 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 Bangun

Pastikan build Anda menghasilkan output yang benar:

• Proyek Vite: Cari sebuah dist direktori
• Proyek Next.js: Periksa sebuah out direktori

Langkah 6: Tambahkan Capacitor ke Proyek Bolt.new 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 permintaan:

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

AI Cursor akan mengelola proses pengaturan secara keseluruhan.

Pilihan B: Pengaturan Manual Langkah demi Langkah

Pasang alat-alat perintah Capacitor:

npm install -D @capacitor/cli

Inisialisasi proyek Capacitor:

npx cap init

Anda akan diminta untuk:

• Nama Aplikasi: Nama proyek Bolt baru Anda
• ID Paket: Format seperti com.yourcompany.yourapp

Lanjutkan dengan pengaturan manual - pasang paket-paket yang penting:

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

Tambah dukungan platform mobile:

npx cap add ios
npx cap add android

Apa yang Terjadi?

Catatan Penting

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

Struktur proyek Bolt baru Anda sekarang terlihat seperti::

• Web code Anda tetap seperti semula src/ - edit di sana
• ios/ dan android/ dibuat secara otomatis - jangan edit
• Setelah perubahan, selalu jalankan npx cap sync
• Setiap platform memiliki proses pembangunan sendiri

Langkah 7: Konfigurasi Capacitor

Sekarang saatnya untuk mengonfigurasi Capacitor untuk framework khusus Anda.

Pilihan A: Konfigurasi Otomatis 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 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 Sinkronkan

Siapkan aplikasi Anda untuk pengiriman mobile.

Pilihan A: Menggunakan Cursor AI

Tunjukkan Cursor:

Build my project and sync it with Capacitor for mobile deployment

Pilihan B: Proses Manual

Eksekusi perintah-perintah ini secara berurutan:

npm run build
npx cap sync

Langkah 9: Buka IDE Asli

Akses lingkungan pengembangan asli 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

Pilihan A: Melalui Cursor AI

Open my Android project in Android Studio

Pilihan B: Perintah Terminal

npx cap open android

Langkah 10: Bangun dan Jalankan Aplikasi Seluler Anda

Berjalan di iOS

Mengatur Xcode (Pertama Kali)

1. Pilih Target Anda:

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

2. Konfigurasi Code Signing:

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

3. Bangun Aplikasi Anda:

   • Klik tombol ▶️ Play
   • Build pertama: 5-10 menit (sabarlah!)
   • Amati progress bar di atas

Pengaturan iOS:

• “Tidak ditemukan akun”: Tambahkan ID Apple di Xcode > Pengaturan > Akun
• “Gagal membangun”: Bersihkan folder build (Shift+Command+K) dan ulangi
• Issue Simulator: Restart simulator melalui Perangkat > Restart

Berjalan di Android

Mengatur 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” (default yang baik)
   • Unduh gambar sistem ketika diminta
   • Selesai dengan pengaturan default

3. Jalankan Aplikasi Anda:

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

Pengaturan Android:

• “Siklus Gradle gagal”: Coba File > Nonaktifkan Cache
• Emulator lambat: Aktifkan akselerasi perangkat keras di pengaturan AVD
• Error Pembangunan: Perbarui Gradle melalui saran perbaikan

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 kesalahan merah

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

Langkah 11: Aktifkan Live Reload (Pengembangan)

Percepat alur kerja pengembangan Anda dengan pengisian ulang panas.

Pilihan A: Pengaturan Otomatis dengan Cursor

Tanyakan Cursor:

Enable live reload for my Capacitor app development

Kursor akan mengkonfigurasi semuanya secara otomatis.

Pilihan B: Konfigurasi 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 konfigurasi:

npx cap copy

Langkah 12: Tambahkan Fitur Asli

Perluas aplikasi Bolt baru Anda dengan kemampuan perangkat khusus.

Pilihan A: Integrasi Berdaya Tunggal AI

Permintaan dari Kursor:

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

Kursor akan menginstal plugin dan membuat integrasi code.

Pilihan B: Instalasi Plugin Manual

Pasang 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: Optimalkan untuk Produksi

Ikon Aplikasi dan Layar Splash

Pilihan A: Pengaturan Cursor AI

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

Proses Pembangunan Manual: Option B

npm run build
npx cap sync
npx cap copy

Pengaturan Masalah Umum

Pengaturan Khusus Framework

Proyek React/Vite

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

Proyek Vue

• Pastikan Vue Router menggunakan mode hash untuk perangkat mobile
• Periksa bahwa aset-asetnya direferensikan dengan benar
• Pastikan penggunaan muatan komponen beban kerja dalam konteks mobile

Proyek Next.js

• Pastikan konfigurasi ekspor statis sudah benar
• Periksa bahwa impor dinamis berfungsi dalam konteks statis
• Pastikan rute API tidak digunakan (atau dihandle dengan benar)

Error Pembangunan

Jika Anda mengalami error pembangunan:

1. Hapus node_modules dan reinstall:

rm -rf node_modules package-lock.json
npm install

2. Periksa dependensi proyek Bolt.new untuk konsistensi mobile
3. Pastikan semua jalur relatif sudah benar untuk penggunaan mobile

Asset Hilang

Untuk masalah penggunaan asset:

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

Kesimpulan

Hore! 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
• Akses fitur perangkat seperti kamera, GPS, dan penyimpanan
• Didistribusikan melalui toko aplikasi
• Menghadirkan pengalaman pengguna mobile yang dioptimalkan

Langkah Selanjutnya

• Update Hidup: Implement Capgo untuk pembaruan instan melalui udara
• Analitik : Tambahkan analitik ponsel untuk mengikuti perilaku pengguna
• Kinerja : Pantau dan optimalkan kinerja aplikasi ponsel Anda
• Pengujian : Uji aplikasi Anda pada perangkat dan ukuran layar yang berbeda-beda

Aplikasi Anda yang baru dibuat dengan Bolt.new siap untuk ekosistem ponsel!

Sumber Daya

• Platform Bolt.new
• Capacitor Dokumentasi
• Vite Mobile Deployment Guide
• Capgo - Live Updates untuk Capacitor Aplikasi

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