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

Pendahuluan

Bolt baru 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 Anda mengexport proyek Bolt.new 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 Estimasi: 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-30 GB untuk alat pengembangan
• Memori: 8GB RAM minimum, 16GB direkomendasikan

Biaya yang Diperlukan:

• Pengembang Apple: $99/tahun (untuk App Store iOS)
• Google Play: $25 biaya satu kali
• Kursor 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 baris 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 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 PushDapatkan interaksi dengan pengguna melalui dukungan notifikasi push asli

Why Capacitor Over Expo?

Jika Anda mempertimbangkan opsi pengembangan mobile, Capacitor menawarkan kelebihan 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 Merekonstruksi: Ambil proyek Bolt.new Anda seperti itu - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo memerlukan
• Pengembangan Web Pertama yang Benar: Berbeda dengan Expo yang berorientasi 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 pada React Native seperti Expo

Perbedaan Utama:

• Untuk Capacitor: Bangun situs web Anda → Tambah dukungan mobile (kode yang sama)
• Untuk Expo: Bangun untuk mobile → Coba membuat web berfungsi (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. Expo memerlukan membangun proyek Anda secara keseluruhan untuk framework mereka.

Langkah 1: Atur Lingkungan Pengembangan Anda

Dapatkan Cursor - Editor AI-Powered Code

Kerja dengan efektif dengan proyek Bolt.new Anda CursorSebuah editor cerdas code yang memudahkan pengembangan:

1. Cursor cursor.sh dan ambil installer untuk OS Anda
2. Lakukan instalasi secara keseluruhan
3. Luncurkan Cursor setelah siap

Konfigurasi Cursor untuk Produktivitas Maksimal

Mendapatkan manfaat maksimal dari Cursor memerlukan beberapa pengaturan awal:

1. Pertimbangkan untuk mendapatkan Cursor Pro - Versi gratis berfungsi, tetapi Pro ($20/bulan) membuka:

   • Assisten 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 - Kami merekomendasikan Claude atau GPT-4:

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

Langkah 2: Eksport Proyek Bolt.new Anda

Kini, 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 Export 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. Pilih File > Open Folder di Cursor
2. Pilih folder proyek Bolt.new yang diekstrak Anda
3. Cursor akan memuat proyek Anda

Alternatif: Clone dari GitHub

Jika Anda telah menghubungkan 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 kerangka kerja. Mari kita identifikasi apa yang sedang Anda kerjakan:

Periksa file package.json

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

Jenis Proyek Bolt.new yang Umum:

• React + Vite: Konfigurasi Paling Umum
• Vue + Vite: Aplikasi Vue.js
• SvelteAplikasi Svelte
• Next.jsAplikasi React Penuh-Stack
• JavaScript VanillaAplikasi JavaScript Biasa

Langkah 3: Pasang Alat Pengembangan

Option A: Biarkan Cursor AI Mengelola Semua Hal

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

Pilihan B: Proses Instalasi Manual

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

Langkah 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. Lakukan instalasi wizard
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

Pilihan B: Konfigurasi Manual oleh Kerangka Kerja

Konfigurasi Manual oleh Framework

Untuk Projek 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 skrip:

{
  "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

Waktu untuk membuat bangun 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 bangun yang sesuai berdasarkan framework Anda.

Pilihan B: Bangun Secara Manual

Untuk Projek Vite (React/Vue/Svelte):

npm run build

For Aplikasi Next.js:

npm run static

Konfirmasi Sukses Pembangunan

Pastikan pembangunan Anda menghasilkan output yang benar:

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

Langkah 6: Tambahkan Capacitor ke Projek Bolt.new Anda

Transformasi aplikasi web Anda menjadi aplikasi mobile asli.

Option A: Pengaturan Cepat dengan Cursor AI

Tombol 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.

Option B: Pengaturan Langkah demi Langkah Manual

Instal alat perintah Capacitor:

npm install -D @capacitor/cli

Mulai proyek Capacitor Anda:

npx cap init

Anda akan diminta:

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

Teruskan 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 di: src/ - edit di sana
• ios/ dan android/ Jangan diedit - dibuat secara otomatis
• Setelah perubahan, jalankan selalu npx cap sync
• Masing-masing platform memiliki proses pembangunan sendiri

Langkah 7: Konfigurasi Capacitor

Kali ini, Anda harus mengkonfigurasi Capacitor untuk framework Anda sendiri.

Opsi A: Auto-Konfigurasi dengan Cursor

Minta bantuan Cursor:

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

Opsi 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

Prepare your app for mobile deployment.

Option A: Menggunakan AI Cursor

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

Langkah 9: Bangun File Binari yang Siap Dipasang dengan Capgo Pembangun (Dianjurkan)

Anda tidak perlu memiliki Mac atau pipeline lokal Xcode/Android Studio penuh untuk mengirimkan aplikasi ke App Store dan Google Play. Capgo Pembangun Mengompilasi, menandatangani, dan dapat mengirimkan build iOS dan Android dari cloud — jalur tercepat untuk aplikasi yang dikodekan vibe dari Bolt.new.

Capgo Pembangun

• Tidak memerlukan Mac untuk iOS — bangun dari Windows, Linux, atau lingkungan pengembangan AI Anda
• Satu CLI workflow — mudah untuk ditulis dan dihadiahkan kepada Cursor, Claude Code, atau Codex
• Pasang dengan Live Updates — kirim JS/UI perbaikan melalui udara; bangun biner native hanya ketika plugin atau izin berubah

Atur Capgo Pembangun

Setelah build produksi 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, Android keystore). Lihat Manajemen Kunci dan Bangun iOS dari Windows.

Minta 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 Builder mengalirkan log build di terminal Anda. Dengan App Store Connect dikonfigurasi, build iOS dapat langsung ke TestFlight.

Unjukkan bundle web Anda untuk pembaruan OTA:

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

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

Jika Anda memiliki Mac atau ingin pengujian emulator sebelum pembangunan cloud, buka proyek asli secara lokal:

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 11: Bangun dan Jalankan Lokal (Opsional)

Jalankan di iOS

Mengatur Xcode (Pertama Kali)

1. Pilih Target Anda:

   • Klik pilihan perangkat di samping tombol Play
   • Menggunakan untuk tes: Pilih simulator iPhone apa saja
   • Menggunakan untuk perangkat nyata: Hubungkan iPhone melalui USB

2. Konfigurasi Code Signing:

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

3. Bangun Aplikasi Anda:

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

Amati progress bar di atas:

• Pengaturan iOSTambahkan ID Apple di Xcode > Pengaturan > Akun
• Gagal MembangunBersihkan folder build (Shift+Command+K) dan coba lagi
• Masalah SimulatorRestart simulator via Perangkat > Restart

Aplikasi 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"
   • Select “Pixel 6” (pilihan default yang baik)
   • Pilih gambar sistem ketika diminta
   • Selesaikan pengaturan dengan pilihan default

3. Jalankan Aplikasi Anda:

   • Pilih emulator dari dropdown
   • Klik tombol hijau ▶️ Run
   • Build pertama: 10-15 menit
   • Pilih emulator dari dropdown

Emulator akan dimulai secara otomatis:

• Pengaturan Android: Try File > Invalidate Caches
• Emulator lambat: Aktifkan akselerasi perangkat keras di pengaturan AVD
• Masalah build: Perbarui Gradle melalui saran perbaikan

Daftar Pemeriksaan

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

Meningkatkan produktivitas pengembangan Anda dengan pengisian ulang panas.

Pilihan A: Pengaturan Otomatis dengan Cursor

Tanya Cursor:

Enable live reload for my Capacitor app development

Kursor akan mengatur semuanya secara otomatis.

Tidak perlu khawatir, Cursor akan mengatur semuanya secara otomatis.

1. Pilihan B: Konfigurasi Manual

# 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

Live reload diaktifkan Bolt

Perluas kemampuan aplikasi Bolt baru Anda dengan kemampuan perangkat khusus.

Integrasi Berdaya Tinggi A

Pilihan A: Integrasi Berbasis AI

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

Minta dari Cursor: Tentukan Cursor akan menginstal plugin dan membuat integrasi code.

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

Sinkron Perubahan

Dengan Cursor AI:

Sync my native feature changes to all platforms

Perintah manual:

npx cap sync

Langkah 14: Optimize untuk Produksi

Label Langkah Tentang Capgo

Ikon Aplikasi dan Layar Splash

Request:

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 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 Spesifik Framework

Projek React/Vite

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

Projek Vue

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

Projek Next.js

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

Error Pembangunan

Jika Anda mengalami kesalahan pembangunan:

1. Membersihkan node_modules dan menginstal ulang:

rm -rf node_modules package-lock.json
npm install

2. Periksa dependensi projek Bolt.new untuk konsistensi mobile
3. Pastikan semua jalur relatif benar untuk pengembangan mobile

Aset Hilang

Untuk masalah penggunaan aset:

1. Pastikan semua aset berada 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 asli. 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
• Menyediakan pengalaman pengguna mobile yang dioptimalkan

Next Steps

• Capgo Pembangun: Gunakan pembangunan natively cloud untuk rilis TestFlight dan Play Store
• Pembaruan Langsung: Implementasikan Capgo : Dapatkan pembaruan instan secara daring
• 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

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

Sumber Daya

• Platform Bolt.new
• Capacitor Dokumentasi
• Petunjuk Penerapan Vite Mobile
• Capgo Pembangun — Bangunan Naga Nusantara
• Capgo - Perbarui Hidup untuk Aplikasi Capacitor
• Base44 ke Mobile

Belajar bagaimana Capgo dapat membantu Anda mengirimkan pembaruan instan ke aplikasi mobile Anda, Daftar diri untuk akun gratis hari ini. today.

Teruskan Proyek Bolt Baru Anda ke Aplikasi Mobile Natively dengan Capacitor

Jika Anda menggunakan Mengubah Projek Bolt.new Anda menjadi Aplikasi Mobile Asli 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 Asli untuk alur kerja produk di Capgo Pembangunan Asli.