Rumah __CAPGO_KEEP_0__
Tutorial

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

Apa itu yang dapat Anda lakukan untuk mengexport aplikasi web Bolt.new Anda dan mengubahnya menjadi aplikasi mobile asli menggunakan Capacitor? Panduan lengkap untuk React, Vue, dan framework lainnya.

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengedit

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

Introduction

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

Apakah proyek Bolt Baru Anda menggunakan React, Vue, atau framework lain yang didukung, panduan ini akan membantu Anda membuat aplikasi iOS dan Android native 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 AndroidApapun Sistem Operasi (Windows/Mac/Linux)
  • Ruangan Bebas20-30GB untuk alat pengembangan
  • Memori8GB RAM minimum, 16GB direkomendasikan

Biaya yang Diperlukan:

  • Apple Developer$99/tahun (untuk App Store iOS)
  • Google Play$25 sekali bayar
  • 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 Multi-Platform: Rilis aplikasi AI yang dihasilkan ke toko aplikasi mobile
  • Akses Perangkat Asli: Gunakan kamera, GPS, sistem file, dan fitur lain asli
  • Kinerja yang Ditingkatkan: Kontainer asli memberikan kinerja yang lebih baik daripada tampilan web
  • Kemampuan Offline: Bekerja secara offline dengan solusi penyimpanan native
  • Pemberitahuan Pushcontext

Why Capacitor Over Expo?

Mengapa Capacitor Lebih Baik dari Expo?

  • : Jika Anda mempertimbangkan opsi pengembangan mobile, __CAPGO_KEEP_0__ 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 web dengan tidak perlu konversi apa punTidak Perlu Merekonstruksi
  • : Ambil proyek Bolt.new Anda secara langsung - tidak perlu menulis ulang untuk framework yang berbeda seperti Expo yang memerlukan: Unlike Expo which is mobile-first and clunky on web, Capacitor treats web as a first-class citizen
  • Pengembangan Tanpa Gangguan : Terus menggunakan alat dan alur kerja pengembangan web yang Anda kenal
  • 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 : Bangun situs web → Tambah dukungan mobile (kode 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

To be lebih efektif dengan proyek Bolt.new Anda, kami akan menggunakan Kursorsebuah editor cerdas code yang memudahkan pengembangan:

  1. Pergilah ke cursor.sh dan ambil installer untuk sistem operasi Anda
  2. Lakukan proses instalasi
  3. Luncurkan Kursor setelah siap

Mulai Kursor

Konfigurasi Kursor untuk Produktivitas Maksimal

Mengoptimalkan Kursor memerlukan beberapa pengaturan awal:

  1. Perluas Kursor Pro - Versi gratis berfungsi, tapi Pro ($20/bulan) membuka akses ke:

    • Assisten AI tanpa batas
    • Model premium (GPT-4, Claude)
    • Respons instan
    • Bantuan premium
  2. Akses Pengaturan dengan Command+, (Mac) atau Ctrl+, (Windows)

Pengaturan Kursor

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

Biarkan Model

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

Pilih Model Cursor

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

Biarkan Jalankan Perintah

Langkah 2: Ekspor Project Bolt.new Anda

Sekarang mari kita bawa project Bolt.new Anda ke Cursor.

Unduh Project Anda

  1. Navigasikan ke project Bolt.new Anda di browser Anda
  2. Cari Unduh atau Bagaimana cara mengubah aplikasi web menjadi aplikasi mobile dengan Capacitor? Unduh

button di antarmuka Bolt

  1. Unduh Bolt.new
  2. Unduh file ZIP yang berisi proyek Anda

Ekstrak ke folder di komputer Anda

File proyek Bolt.new

Buka di Cursor

  1. Setelah diekstrak, buka proyek di Cursor: File > Open Folder Pakai di Cursor
  2. Pilih folder proyek Bolt.new yang telah diekstrak
  3. Kursor akan memuat proyek Anda

Buka di Kursor

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

Clone di Kursor

Langkah 2: Identifikasi Framework Projek Anda

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

Pengujian package.json Bolt.new

Jenis proyek Bolt.new yang umum:

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

Langkah 3: Pasang Alat Pengembangan

Pilihan A: Biarkan Cursor AI Mengatasi 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:

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

Instal Homebrew

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

Pengguna Windows:

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

Bolt.new aplikasi berjalan secara lokal

Aplikasi Bolt.new Anda seharusnya berjalan sekarang (biasanya di http://localhost:5173 untuk proyek Vite).

Langkah 4: Konfigurasi Bangun untuk Mobile

Konfigurasi Anda akan bervariasi berdasarkan kerangka kerja proyek Anda.

Option A: Konfigurasi Otomatis dengan AI Cursor

Tanyakan kepada AI Cursor 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.

Option B: 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 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 skrip Anda: package.json Perbarui

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

Langkah 5: Bangun Projek Anda next.config.js:

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

module.exports = nextConfig

Waktu untuk membuat bangun produksi aplikasi Bolt.new Anda.

Kursor akan mendeteksi framework Anda dan menerapkan konfigurasi yang tepat.

Option A: Bangun dengan AI Cursor

Jika Anda hanya perlu:

Build my Bolt.new project for production deployment

Cursor akan menjalankan perintah bangun yang tepat berdasarkan framework Anda.

Option B: Bangun Secara Manual

Untuk Projek Vite (React/Vue/Svelte):

npm run build

Bolt.new Vite build berhasil

Untuk Aplikasi Next.js:

npm run static

Konfirmasi Sukses Bangun

Pastikan bangun Anda menghasilkan output yang benar:

  • Projek Vite: Cari direktori dist directory
  • Projek Next.js: Periksa untuk sebuah out direktori

Hasil output Bolt.new

Langkah 6: Tambahkan Capacitor ke Projek Bolt.new Anda

Mari kita transformasikan aplikasi web Anda menjadi aplikasi mobile native.

Opsi 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 menghandle proses pengaturan seluruhnya.

Opsi B: Pengaturan Langkah demi Langkah Manual

Pasang alat perintah Capacitor:

npm install -D @capacitor/cli

Inisialisasi proyek Capacitor:

npx cap init

Capacitor inisialisasi Bolt

Anda akan diminta untuk:

  • Nama aplikasi: Nama proyek 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

Capacitor platform ditambahkan Bolt

Apa yang Terjadi?

Struktur proyek Bolt.new 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:

  • Your web code stays in src/ - edit di sana
  • ios/ dan android/ context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).
  • tergenerate - jangan edit npx cap sync
  • Setelah perubahan, jalankan selalu

Step 7: Configure Capacitor

Langkah 7: Konfigurasi Capacitor

Waktu untuk mengonfigurasi __CAPGO_KEEP_0__ untuk framework khusus Anda.

Pilihan A: Konfigurasi Otomatis dengan Cursor

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

Opsi B: Konfigurasi Manual

Untuk Aplikasi Vite Berbasis:

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

Persiapkan aplikasi Anda untuk pengiriman ke perangkat mobile.

Opsi A: Menggunakan Cursor AI

Pertunjuk Cursor:

Build my project and sync it with Capacitor for mobile deployment

Opsi B: Proses Manual

Eksekusi perintah-perintah ini secara berurutan:

npm run build
npx cap sync

Capacitor sinkronisasi Bolt lengkap

Anda tidak perlu Mac atau pipeline lokal Xcode/Android Studio penuh untuk mengirimkan ke App Store dan Google Play. Pembuat Capgo Bagaimana __CAPGO_KEEP_0__ Builder Bekerja?

Why Capgo Builder?

  • — Bangun dari Windows, Linux, atau Lingkungan Pengkodean AI Anda Satu __CAPGO_KEEP_0__ Workflow
  • — Mudah untuk Ditulis dan Ditolak ke Cursor, Claude CLI, atau Codex — easy to script and hand off to Cursor, Claude Code, or Codex
  • — Kirim Perbaikan JS/UI Melalui Udara; Bangun Binary Natif Hanya Ketika Plugin atau Izin Berubah Setelah Mengatur __CAPGO_KEEP_0__ Builder

Setelah Bangun Produksi dan Capgo Sinkronisasi Bekerja Lokal:

After your production build and Capacitor sync work locally:

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

__CAPGO_KEEP_0__ Pembuat Manajemen Kredensial dan Bangun iOS dari Windows.

Minta Bangun di Cloud

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 Pemancar Stream Log Bangun di Terminal Anda. Dengan App Store Connect yang terkonfigurasi, bangun iOS dapat langsung ke TestFlight.

Unggah Paket Web Anda untuk Update 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 di 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

Xcode membuka proyek Bolt

Pengembangan Android

Pilihan A: Melalui Cursor AI

Open my Android project in Android Studio

Pilihan B: Perintah Terminal

npx cap open android

Android Studio membuka proyek Bolt

Langkah 11: Bangun dan Jalankan Lokal (Opsional)

Menggunakan iOS

Mengatur Xcode (Pertama Kali)

  1. Pilih Target Anda:

    • Klik pilihan perangkat di samping 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”
    • Aktifkan “Automatisel mengelola signing”
    • Masuk dengan ID Apple Anda
    • Catatan: Perangkat nyata memerlukan Program Pengembang Apple ($99/tahun)
  3. Bangun Aplikasi Anda:

    • Klik tombol ▶️ Play
    • Bangun pertama kali: 5-10 menit (sabar!)
    • Context: Halaman/area: Pembangun Capgo / produk halaman bangun native cloud. Peran: Label UI singkat atau item navigasi. Pesan kunci `native_build_builder_credit_first` (Kredit Pembangun Native Build Pertama).

Amati progress bar di atasnya:

  • Tidak Ditemukan Akun: Tambahkan ID Apple di Xcode > Pengaturan > Akun
  • Gagal Membangun: Bersihkan folder pembangunan (Shift+Command+K) dan ulangi
  • Issue Simulator: Restart simulator melalui Perangkat > Restart

Aplikasi Bolt berjalan di iOS

Berjalan di Android

Pengaturan Studio Android (Pertama Kali)

  1. SDK Pengaturan (otomatis):

    • Studio Android akan mendeteksi komponen yang hilang
    • Klik "Pasang yang Hilang SDK" ketika diminta
    • File ini akan diunduh sekitar 2-3 GB
  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
    • Build pertama: 10-15 menit
    • Emulator dimulai secara otomatis

Troubleshooting Android:

  • “Gradle sync gagal”: Coba File > Invalidate Caches
  • Emulator lambat: Aktifkan akselerasi hardware di pengaturan AVD
  • Error saat build: Perbarui Gradle melalui saran perbaikan

Aplikasi Bolt berjalan di Android

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

Masih mengalami masalah? Biasanya pesan kesalahan akan memberitahu Anda apa yang salah - bacalah dengan teliti!

Langkah 12: 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: Konfigurasi Manual

  1. Peroleh 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. Aplikasikan konfigurasi:
npx cap copy

Ulang hidup diaktifkan Bolt

Langkah 13: Tambahkan Fitur Nativ

Peningkatan aplikasi Bolt.new dengan kemampuan perangkat khusus.

Pilihan A: Integrasi Berdaya Tunggal

Pertanyaan 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 populer:

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

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

Sinkronkan Perubahan

Dengan Bantuan AI Cursor:

Sync my native feature changes to all platforms

Perintah manual:

npx cap sync

Fitur-fitur asli ditambahkan Bolt

Langkah 14: 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 asset:
npm install -D @capacitor/assets
  1. Siapkan grafik Anda:

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

npx capacitor-assets generate

Asset aplikasi Bolt telah dihasilkan

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

Pemecahan Masalah Umum

Pemecahan Masalah Framework-Spesifik

Proyek React/Vite

  • Pastikan base: './' terpasang dalam konfigurasi Vite
  • Periksa bahwa semua import menggunakan jalur relatif
  • Verifikasi bahwa dist Folder tersebut telah dibuat dengan benar

Proyek Vue

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

Proyek Next.js

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

Error Pembangunan

Jika Anda mengalami kesalahan saat membangun:

  1. Hapus node_modules dan reinstall:
rm -rf node_modules package-lock.json
npm install
  1. Periksa dependensi Bolt.new project untuk konsistensi dengan perangkat mobile
  2. Pastikan semua jalur relatif sudah benar untuk pengembangan mobile

Sumber Daya Hilang

Untuk masalah pengisian sumber daya:

  1. Verifikasi 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 project Bolt.new Anda menjadi aplikasi mobile asli. Aplikasi web yang dihasilkan AI Anda dapat menjalankan:

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

Langkah Selanjutnya

  • Capgo PembangunDistribusikan melalui toko aplikasi
  • Gunakan bangun natively cloud untuk rilis TestFlight dan Play StorePerbarui Hidup Capgo __CAPGO_KEEP_0__
  • Untuk pembaruan over-the-air instanAnalitik
  • Kinerja: Pantau dan optimalkan kinerja aplikasi seluler Anda
  • Pengujian: Uji coba aplikasi di berbagai perangkat dan ukuran layar

Kreasi Anda Bolt.new siap untuk ekosistem seluler!

Sumber Daya

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

Teruskan dari Membuat Projek Bolt.new menjadi Aplikasi Seluler Asli dengan Capacitor

Jika Anda menggunakan Membuat Projek Bolt.new menjadi Aplikasi Seluler Asli dengan 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 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 Natively Untuk alur kerja produk di Capgo Pembangunan Natively.

Update Langsung untuk Aplikasi Capacitor

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

dukungan manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

Capgo memberikan Anda wawasan terbaik yang Anda butuhkan untuk menciptakan aplikasi mobile yang profesional.