Lompat ke konten utama
Tutorial

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

Capacitor Mengubah Projek Bolt.new Anda menjadi Aplikasi Mobile Nativ dengan Capacitor. Panduan lengkap untuk React, Vue, dan framework lainnya.

Martin Donadieu

Martin Donadieu

Spesialis Konten

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

Selamat Datang di Capgo

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 ke perangkat mobile? Dalam tutorial ini, kami akan menunjukkan cara Anda dapat mengexport proyek Bolt.new dan mengubahnya menjadi aplikasi mobile native menggunakan __CAPGO_KEEP_0__ Capacitor.

Sebelum Anda Mulai: Persyaratan & Waktu

Waktu yang Diperkirakan

: 3-5 jam untuk pengaturan lengkapPersyaratan Sistem

Pengembangan iOS:

  • : Mac dengan macOS 12.0+ (diperlukan, tidak ada kerja sama)Pengembangan Android
  • __CAPGO_KEEP_0__: Sistem Operasi (Windows/Mac/Linux)
  • Ruangan Terlindung: 20-30GB untuk alat pengembangan
  • Memori: 8GB RAM minimum, 16GB direkomendasikan

Biaya yang Diperlukan:

  • Apple Developer: $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 baris

Mengapa Mengubah Aplikasi Bolt.new Anda ke Mobile?

  • Cakupan Platform yang 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 menyediakan kinerja yang lebih baik daripada tampilan web
  • Kemampuan Offline: Bekerja secara offline dengan solusi penyimpanan native
  • Pemberitahuan Push: Menghubungi pengguna dengan dukungan pemberitahuan push native

Mengapa Capacitor Lebih Baik dari Expo?

Jika Anda mempertimbangkan opsi pengembangan mobile, Capacitor menawarkan kelebihan yang signifikan dibandingkan Expo, terutama untuk pengembangan web-terlebih dahulu:

  • 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 secara langsung - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo yang memerlukan
  • Pendekatan Web-terlebih Dahulu yang Benar: Berbeda dengan Expo yang lebih fokus pada mobile dan terlihat kotor di web, Capacitor menganggap web sebagai warga pertama kelas
  • Pengembangan Tanpa Gangguan: Terus menggunakan alat dan alur kerja pengembangan web yang familiar Anda
  • Kemerdekaan Framework: Berfungsi 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 Anda → Tambah dukungan mobile (kode dasar yang sama)
  • Dengan Expo: Bangun 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 cerdas code yang memudahkan pengembangan:

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

Mulai Cursor

Konfigurasi Cursor untuk Produktivitas Maksimum

Mendapatkan hasil maksimal dari Cursor memerlukan beberapa pengaturan awal:

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

    • Bantuan AI tak terbatas
    • Model premium (GPT-4, Claude)
    • Respons cepat
    • Dukungan premium
  2. Akses Pengaturan dengan Command+, (Mac) atau Ctrl+, (Windows)

Pengaturan Kursor

  1. Aktifkan Fitur AI - Pastikan bantuan AI telah diaktifkan:

Izinkan Model

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

Pilih Model Cursor

  1. Aktifkan Pengaturan Perintah - Biarkan Cursor menjalankan perintah secara otomatis:

Izinkan Jalankan Perintah

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 Tombol Export di antarmuka Bolt Tombol Unduh Bolt Baru

Unduh file ZIP yang berisi proyek Anda

  1. Ekstrak ke folder di komputer Anda
  2. File-file proyek Bolt Baru

Buka di Cursor

Setelah diekstrak, buka proyek di Cursor:

Pakai

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

Buka di Kursor

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

Clone di Kursor

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 yang digunakan oleh proyek Anda:

Inspeksi package.json Bolt.new

Tipe proyek Bolt.new yang umum:

  • React + Vite: Konfigurasi paling umum
  • Vue + Vite: Aplikasi Vue.js
  • SvelteAplikasi Svelte :
  • Next.jsAplikasi React Full-stack :
  • JS Vanilla :Aplikasi JavaScript Plain :

Langkah 3: Pasang Alat Pengembangan

Option A: Biarkan Cursor AI Mengurus 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
  • Atur Homebrew pada macOS
  • Pasang semua dependensi proyek
  • Luncurkan server pengembangan Anda

Pasang Homebrew

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

Bagi pengguna Windows:

  1. Unduh installer Node.js dari nodejs.org
  2. Lengkapi asisten instalasi
  3. Di terminal Cursor:
cd your-bolt-project
npm install
npm run dev

Bolt.new aplikasi berjalan secara lokal

Aplikasi Bolt.new 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

Kursor akan mendeteksi framework Anda dan menerapkan konfigurasi yang tepat.

Pilihan B: Konfigurasi Manual oleh Framework

Untuk Projek React + Vite:

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

Modifikasi 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

Sekarang saatnya untuk membuat build produksi aplikasi Bolt.new Anda.

Pilihan A: Bangun dengan Cursor AI

Cukup tanya 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

Bolt.new Vite build success

Untuk Aplikasi Next.js:

npm run static

Konfirmasi Sukses Bangun

Pastikan bangun Anda menghasilkan output yang benar:

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

Output Pembangunan Bolt.new

Langkah 6: Tambahkan Capacitor ke Proyek Bolt.new Anda

Mari kita transformasikan aplikasi web Anda menjadi aplikasi seluler 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

Install perangkat lunak baris perintah Capacitor:

npm install -D @capacitor/cli

Mulai proyek Capacitor Anda:

npx cap init

Capacitor inisialisasi Bolt

Apa yang akan Anda lakukan:

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

Teruskan dengan pengaturan manual - instal paket-paket yang penting:

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

Tambahkan dukungan platform mobile:

npx cap add ios
npx cap add android

Capacitor platform yang ditambahkan Bolt

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

Penting: Catatan:

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

Langkah 7: Konfigurasi Capacitor

Waktunya 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 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 Sinkronisasi

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

Jalankan perintah-perintah ini secara berurutan:

npm run build
npx cap sync

Capacitor sinkronisasi Bolt selesai

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

Mengapa Capgo Pembangun?

  • Tidak memerlukan Mac untuk iOS — bangun dari Windows, Linux, atau lingkungan pengkodean AI Anda
  • Satu CLI alur kerja — mudah untuk ditulis skrip dan ditransfer ke Cursor, Claude Code, atau Codex
  • Saling berinteraksi dengan Live Updates — kirimkan JS/UI perbaikan secara nirkabel; bangun kembali binary native hanya ketika plugin atau izin berubah

Atur Capgo Pembangun

Setelah build produksi dan Capacitor sinkron kerja 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 Menangani Kredensial dan Membangun iOS dari Windows.

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

Unggah 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 bangun awan, 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

Membuka Projek Bolt di Xcode

Pengembangan Android

Pilihan A: Melalui AI Cursor

Open my Android project in Android Studio

Pilihan B: Perintah Terminal

npx cap open android

Membuka Projek Bolt di Android Studio

Langkah 11: Membangun dan Menguji Lokal (Opsional)

Menggunakan iOS

Mengatur Xcode (Pertama Kali)

  1. Pilih Target Anda:

    • Klik selector perangkat di samping tombol Play
    • Untuk pengujian: 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”
    • Aktifkan “Automatisel mengelola signing”
    • 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 (tunggu!)
    • Lihat progress bar di atas

Mengatasi masalah iOS:

  • Tidak ditemukan akunTambahkan ID Apple di Xcode > Pengaturan > Akun
  • Gagal membangunMembersihkan folder pembangunan (Shift+Command+K) dan ulangi
  • Masalah SimulatorMulai ulang simulator melalui Perangkat > Mulai Ulang

Aplikasi Bolt berjalan di iOS

Berjalan di Android

Mengatur Studio Android (Pertama kali)

  1. SDK Pengaturan (otomatis) (otomatis):

    • Studio Android akan mendeteksi komponen yang hilang
    • Klik “Pasang yang hilang SDK” ketika diminta
    • 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 sinkronisasi gagal”: Coba File > Invalidate Caches
  • Emulator lambat: Aktifkan akselerasi perangkat keras di pengaturan AVD
  • Error saat build: Perbarui Gradle melalui solusi yang disarankan

Aplikasi Bolt berjalan di Android

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 kesalahan biasanya memberitahu Anda secara spesifik apa yang salah - bacalah dengan hati-hati!

Langkah 12: Aktifkan Live Reload (Pengembangan)

Tingkatkan alur kerja pengembangan Anda dengan memuat ulang secara cepat.

Pilihan A: Pengaturan Otomatis dengan Cursor

Tanyakan 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
  1. 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;
  1. Terapkan konfigurasi:
npx cap copy

Live reload diaktifkan Bolt

Langkah 13: Tambahkan Fitur Asli

Perluas aplikasi Bolt.new 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

Fitur-fitur asli ditambahkan Bolt

Langkah 14: Optimalisasi untuk Produksi

Ikon Aplikasi dan Layar Splash

Pilihan A: Pengaturan AI Kursor

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
  1. Siapkan grafik Anda:

    • Buat assets/icon.png (1024x1024px)
    • Buat assets/splash.png (2732x2732px)
  2. Generate semua ukuran secara otomatis:

npx capacitor-assets generate

Bolt aset aplikasi generasi

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

Create the final production build and prepare for app store deployment

Pilihan B: Proses Bangun Manual

npm run build
npx cap sync
npx cap copy

Pemecahan Masalah Umum

Masalah Khusus Framework

Proyek React/Vite

  • Pastikan base: './' dipasang di konfigurasi Vite
  • Pastikan semua import menggunakan jalur relatif
  • Pastikan bahwa dist folder yang dihasilkan benar-benar

Proyek Vue

  • Pastikan Vue Router menggunakan mode hash untuk perangkat mobile
  • Pastikan bahwa asset-asset yang digunakan sudah benar-benar terreferensikan
  • Pastikan bahwa penggunaan komponen lazy loading berfungsi dengan baik dalam konteks mobile

Proyek Next.js

  • Pastikan konfigurasi static export sudah benar-benar terkonfigurasi
  • Pastikan bahwa penggunaan dynamic import berfungsi dengan baik dalam konteks statis
  • Pastikan bahwa API tidak digunakan (atau sudah dihandle dengan baik)

Error Pembangunan

If Anda mengalami kesalahan saat membangun:

  1. Membersihkan node_modules dan menginstal ulang:
rm -rf node_modules package-lock.json
npm install
  1. Periksa dependensi Bolt.new project untuk konsistensi mobile:
  2. Pastikan semua jalur relatif benar untuk pengembangan mobile:

Asset Hilang

Untuk masalah penggunaan asset:

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

Kesimpulan

Selamat! Anda telah berhasil mengubah project 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
  • Dapat didistribusikan melalui toko aplikasi
  • Berikan pengalaman pengguna mobile yang dioptimalkan

Langkah-Langkah Selanjutnya

  • Capgo Pembangun: Gunakan bangun natively cloud untuk rilis TestFlight dan Play Store
  • 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 aplikasi di berbagai perangkat dan ukuran layar

Kreativitas Anda dengan Bolt.new siap digunakan di ekosistem mobile!

Sumber Daya

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

Teruskan dari Proyek Bolt Baru Anda ke Aplikasi Seluler Asli dengan Capacitor

Jika Anda menggunakan Transform Your Bolt.new Project into Native Mobile Apps with Capacitor untuk merencanakan pekerjaan plugin asli, hubungkannya dengan Capgo Plugin Directory untuk alur kerja produk di Capgo Plugin Directory, Capacitor Plugins oleh Capgo untuk detail implementasi di 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 Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively.

Pembaruan Langsung untuk Aplikasi Capacitor

Ketika bug layer web masih aktif, kirimkan perbaikan melalui Capgo bukan menunggu hari-hari untuk persetujuan toko aplikasi. Pengguna mendapatkan update di latar belakang sementara perubahan native tetap dalam jalur review normal.

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk membuat aplikasi mobile yang benar-benar profesional.