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. Tapi 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 projek Bolt.new Anda menggunakan React, Vue, atau framework lainnya yang didukung, panduan ini akan membantu Anda membuat aplikasi iOS dan Android natif dengan akses ke fitur perangkat seperti kamera, penyimpanan, dan notifikasi push.

Sebelum Anda Mulai: Persyaratan & Waktu

Waktu Perkiraan: 3-5 jam untuk pengaturan lengkap

Spesifikasi 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 direkomendasikan

Anggaran yang Diperlukan:

• Pengembang Apple : $99/tahun (untuk App Store iOS)
• Google Play : $25 biaya satu kali
• Cursor Pro : $20/bulan (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 yang Luas: Rilis aplikasi AI yang dihasilkan ke toko aplikasi perangkat seluler
• Akses Perangkat Asli: Gunakan kamera, GPS, sistem file, dan fitur asli lainnya
• Kinerja yang Ditingkatkan: Kontainer asli menyediakan kinerja yang lebih baik daripada tampilan web
• Kemampuan Offline: Bekerja secara offline dengan solusi penyimpanan asli
• Pemberitahuan Push: Sosialisasikan 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:

• One Codebase, Tiga Platform: Situs web React, Next.js, atau Vue.js Anda yang sudah ada 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 yang diperlukan oleh Expo
• Pendekatan Web-Perdana yang Benar: Berbeda dengan Expo yang memprioritaskan mobile dan terlihat 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 dengan React Native seperti Expo

Perbedaan Utama:

• Dengan Capacitor: Bangun situs web → Tambah dukungan mobile (kode sama)
• Dengan Expo: Bangun untuk mobile → Coba membuat web bekerja (pendekatan berbeda, sering kali 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 efisien dengan proyek Bolt.new Anda, kita akan menggunakan Cursor, editor code yang cerdas yang memudahkan pengembangan:

1. Arahkan ke cursor.sh dan ambil installer untuk OS Anda
2. Lakukan proses instalasi
3. Luncurkan Cursor setelah siap

Konfigurasi Cursor untuk Produktivitas Maksimal

Untuk mendapatkan hasil maksimal dari Cursor, Anda perlu melakukan pengaturan awal:

1. Mengapa mempertimbangkan untuk mendapatkan Cursor Pro - Versi gratis sudah cukup, tapi Pro ($20/bulan) membuka akses:

   • 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 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 Proyek Anda

1. Navigasikan ke proyek Bolt.new Anda di browser Anda
2. Cari tombol 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 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 apa framework proyek Anda menggunakan:

Jenis Proyek Bolt Baru 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 Tunggal

Langkah 3: Pasang Alat Pengembangan

Pilihan A: Biarkan Cursor AI Mengelola Semua

1. Tekan Command+K (Mac) atau Ctrl+K (Windows) di Cursor
2. Tulis 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
• Tetapkan 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:

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 framework 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 framework Anda dan menerapkan konfigurasi yang tepat.

Pilihan B: Konfigurasi Manual oleh Framework

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 Projek Next.js

Tambahkan ke package.json scripts:

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

Update next.config.js:

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

module.exports = nextConfig

Langkah 5: Bangun Projek Anda

Sampai saat ini untuk membuat build produksi aplikasi Bolt.new.

Pilihan A: Bangun dengan Cursor AI

Cukup tanya 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 build Anda menghasilkan output yang benar:

• Proyek Vite: Cari direktori dist Aplikasi Next.js
• : Periksa direktoriOutput Build Bolt.new out Langkah 6: Tambahkan __CAPGO_KEEP_0__ ke Proyek Bolt.new Anda

Capacitor

__CAPGO_KEEP_0__

Option A: Pengaturan Cepat dengan Cursor AI

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

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

Cursor AI akan mengatur seluruh proses pengaturan.

Option B: Pengaturan Langkah demi Langkah Manual

Instal perangkat lunak baris perintah Capacitor:

npm install -D @capacitor/cli

Mulai proyek Capacitor Anda:

npx cap init

Akan Anda diminta:

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

Lanjutkan dengan pengaturan manual - instal paket-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 proyek 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 seperti itu 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 mengkonfigurasi 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 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 Sinkronkan

Siapkan aplikasi Anda untuk pengiriman ke perangkat 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

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 projek Anda di sidebar kiri
   • Pergi ke tab “Signing & Capabilities”
   • Aktifkan “Atur Otomatis Tanda Tangan”
   • Masuk dengan ID Apple Anda
   • Catatan : Perangkat nyata memerlukan Program Pengembang Apple ($99/tahun)

3. Buat Aplikasi Anda:

   • Klik tombol ▶️ Play
   • Pembangunan pertama: 5-10 menit (sabar!)
   • 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 Device > 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
   • Selesaikan pengaturan dengan pilihan default

3. Jalankan Aplikasi Anda:

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

Mengatasi Android:

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

Daftar Pemeriksaan Verifikasi

Setelah build 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 11: Aktifkan Live Reload (Pengembangan)

Percepat alur kerja pengembangan Anda dengan hot reloading.

Pilihan A: Pengaturan Otomatis dengan Cursor

Tanya Cursor:

Enable live reload for my Capacitor app development

Cursor akan mengkonfigurasi segalanya 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 konfigurasi:

npx cap copy

Langkah 12: Tambahkan Fitur Nativ

Perluas aplikasi Bolt baru Anda dengan kemampuan khusus perangkat.

Pilihan A: Integrasi Berdaya Tunggal dengan AI

Permintaan dari Cursor:

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

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

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 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. Generate semua ukuran secara otomatis:

npx capacitor-assets generate

Optimalkan Build

Untuk proyek Vite, optimalkan pembangunan 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
        },
      },
    },
  },
})

Final Build

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

Mengatasi Masalah Umum

Masalah Khusus Framework

Proyek React/Vite

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

Vue Projects

• Pastikan Vue Router menggunakan mode hash untuk perangkat mobile
• Cek bahwa aset-asetnya sudah direferensikan dengan benar
• Verifikasi bahwa penggunaan komponen lazy loading berfungsi di konteks mobile

Next.js Projects

• Pastikan konfigurasi static export sudah benar
• Cek bahwa impor dinamis berfungsi di konteks statis
• Verifikasi bahwa API jalur tidak digunakan (atau dihandle dengan benar)

Build Errors

Jika Anda mengalami kesalahan build:

1. Hapus node_modules dan reinstall:

rm -rf node_modules package-lock.json
npm install

2. Cek dependensi Bolt.new project untuk konsistensi mobile
3. Pastikan semua jalur relatif benar untuk pengembangan mobile

Asset Hilang

Untuk masalah penggunaan asset:

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

Kesimpulan

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

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

Langkah-Langkah Selanjutnya

• Pembaruan LangsungImplementasi Capgo untuk pembaruan over-the-air instan
• AnalitikTambahan Analitik Ponsel untuk Merekam Perilaku Pengguna
• KinerjaPantau dan Optimalisasi Kinerja Aplikasi Ponsel Anda
• PengujianUji Aplikasi di Berbagai Perangkat dan Ukuran Layar

Kreasi Bolt Baru Anda Siap untuk Ekosistem Ponsel!

Sumber Daya

• Platform Bolt.new
• Capacitor Dokumentasi
• Petunjuk Penerapan Vite Mobile
• Capgo - Perbaruan Langsung untuk Aplikasi Capacitor

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

Teruskan dari Mengubah Project Bolt.new Anda menjadi Aplikasi Seluler Asli dengan Capacitor

Jika Anda menggunakan Mengubah Project Bolt.new Anda menjadi Aplikasi Seluler Asli dengan Capacitor untuk merencanakan pekerjaan plugin asli, hubungkannya dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor 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 Build Natives Capgo untuk alur kerja produk di Build Natives Capgo.