Mengubah Aplikasi Favorit Anda ke iOS dan Android dengan Capacitor

Introduction

Penggemar Penggemar adalah aplikasi pembuat AI yang mengubah prompt menjadi aplikasi React yang berfungsi dalam beberapa menit. Anda dapat mengirimkan aplikasi di browser dengan cepat — tetapi apa jika Anda ingin aplikasi Anda di App Store dan Google Play, berada di layar utama seperti aplikasi asli lainnya?

Langkah ini menjelajahi jalur lengkap: ekspor dari Penggemar, bungkus aplikasi web dengan CapacitorJalur ini menjelajahi jalur lengkap: ekspor dari Penggemar, bungkus aplikasi web dengan Capgo Builder , membuat file biner iOS dan Android yang ditandatangani secara otomatis di cloud dengan Capgo Live Updates.

(tidak perlu Mac), tambahkan fitur asli native, dan kirimkan perbaikan layout secara daring dengan Capacitor Live Updates Kami menggunakan

Waktu yang dibutuhkan: sekitar 1–2 jam pertama kali, terutama pengaturan akun dan menunggu hasil build di cloud.

Dengan Capgo, Anda akan memiliki:

• Aplikasi iOS dan Android asli yang dibangun dari cloud — tidak perlu Xcode atau Android Studio di jalur utama
• Aplikasi berjalan di perangkat nyata (TestFlight, instal langsung, atau Play internal testing)
• Fitur kamera yang berfungsi seperti aplikasi asli
• Update Langsung yang terkonfigurasi sehingga perbaikan UI dan CSS dapat berlalu tanpa ulasan toko

Prasyarat

Biaya (hanya untuk mempublikasikan secara publik):

Opsional (simulator lokal saja):

Kamu bisa melewatkan kedua hal tersebut. Jalur utama dalam panduan ini membangun di awan dan menginstal di perangkat nyata tanpa perlu simulator.

Catatan Singkat tentang Lovable dan Frameworks

Sebelum menyentuh code, ketahui bahwa Jenis aplikasi web yang Lovable hasilkan mempengaruhi pembungkus mobile.

Sebelumnya, Lovable memiliki default sebagai Aplikasi tunggal halaman (SPA) React + ViteSejak Mei 2026, aplikasi Lovable baru dapat menggunakan Mulai dengan TanStack dengan rendering sisi server (SSR) dengan default. SSR sangat baik untuk web, tetapi Capacitor mengemas sebuah bangunan statis — sebuah folder dari HTML, CSS, dan JavaScript dengan sebuah index.html di dalamnya — yang dikirimkan bersama aplikasi di perangkat.

Aplikasi SSR mengharapkan sebuah server untuk merender halaman pada setiap permintaan. Tidak ada server di dalam sebuah ponsel, jadi untuk Capacitor Anda ingin output statis yang diterjemahkan oleh klien.

Apa yang harus dilakukan:

• Mulai dari awal: Tanyakan kepada Lovable untuk sebuah aplikasi tunggal halaman (SPA) atau untuk melompati SSR sehingga Anda mendapatkan sebuah dist/ folder.
• Sudah menggunakan TanStack Start (SSR): Konfigurasikan untuk memprediksi atau menghasilkan SPA statis. Persyaratan keras satu-satunya adalah folder pembangunan statis yang mengandung index.html.
• Proyek Lovable Legacy Next.js: Gunakan eksport statis — hasilnya pergi ke out/ dibandingkan dengan dist/.

Apapun framework yang Anda gunakan, poin Capacitor ke folder tersebut. Untuk SPA Vite, folder tersebut adalah webDir Langkah 1 — Eksport Aplikasi Lovable Anda ke __CAPGO_KEEP_0__ dist.

Lovable menjaga GitHub Anda di editornya sampai Anda menghubungkan __CAPGO_KEEP_1__.

Lovable keeps your code in its editor until you connect GitHub.

1. Buka proyek Lovable Anda di browser
2. Klik Upgrade Jika perlu, buka Git di menu kiri
3. Pilih GitHub, autorisasi Lovable, dan hubungkan akun Anda
4. Lovable membuat repositori dan mendorong aplikasi Anda secara otomatis

✅ Sukses: Mengunjungi github.com/YOUR-USERNAME/your-app menampilkan aplikasi Anda code.

Langkah 2 — Atur Cursor dan Klon Proyek Anda

Sebelum kita dapat bekerja dengan code Anda secara lokal, Anda akan membutuhkan sebuah code editor. Kami merekomendasikan Cursor, sebuah editor yang dipersenjatai AI yang dapat menjalankan perintah terminal untuk Anda.

Unduh dan Pasang Cursor

1. Kunjungi cursor.sh dan download versi untuk sistem operasi Anda
2. Install Cursor mengikuti petunjuk instalasi
3. Setelah terinstal, buka Cursor

Konfigurasi Cursor untuk Pengembangan AI

Untuk pengalaman terbaik, konfigurasi Cursor sebelum Anda mulai:

1. Belanja Plan Cursor — Meskipun Cursor menawarkan tingkat gratis, plan Pro ($20/bulan) memberikan Anda penggunaan AI tak terbatas, akses ke Claude dan GPT-4, dan eksekusi perintah
2. Buka Pengaturan Cursor dengan menekan Command+, (Mac) atau Ctrl+, (Windows)

3. Aktifkan Model AI – Pastikan fitur AI diaktifkan:

4. Pilih Model Favorit Anda – Pilih Claude atau GPT-4 untuk hasil terbaik:

5. Biarkan Eksekusi Perintah – Aktifkan Kursor untuk menjalankan perintah untuk Anda:

Membuat Salinan Repositori Anda di Kursor

1. Dalam Kursor, tekan Shift+Command+P (Mac) atau Shift+Ctrl+P untuk membuka palette perintah
2. Tipe “clone” dan pilih Git: Clone
3. Salin URL repositori GitHub Anda: https://github.com/YOUR-USERNAME/your-lovable-app.git
4. Pilih folder di mana Anda ingin menyimpan proyek

5. Cursor akan mengkloning dan membuka proyek Anda

Langkah 3 — Pasang Dependensi dan Jalankan Secara Lokal

Metode 1: Menggunakan Cursor AI (Dianjurkan)

1. Buka tab AI Cursor dengan menekan Command+K atau Ctrl+K atau
2. Masukkan perintah berikut:

Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

AI akan mendeteksi otomatis sistem operasi Anda, menginstal Node.js, menjalankan npm install, dan memulai server pengembang dengan npm run dev.

Metode 2: Instalasi Manual

Buka terminal di Cursor dengan menekan Shift+Command+T atau Shift+Ctrl+T atau

Untuk macOS:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
cd your-lovable-app
npm install
npm run dev

Untuk Windows:

1. Unduh 24 LTS dari nodejs.org
2. Jalankan instalasi
3. Buka terminal dan jalankan:

cd your-lovable-app
npm install
npm run dev

Aplikasi Lovable biasanya berjalan di http://localhost:8080 atau http://localhost:5173 — gunakan alamat apa pun yang dicetak di terminal Anda.

Tekan Ctrl + C untuk menghentikan server pengembang ketika Anda siap melanjutkan.

✅ Sukses: Aplikasi Anda terbuka di browser dengan UI yang berfungsi.

Langkah 4 — Siapkan Pembangunan Produksi Statik

Capacitor memerlukan pembangunan produksi sebelum Anda menambahkan platform native.

React + Vite (Aplikasi Lovable paling banyak)

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Tekan Command+K (Mac) atau Ctrl+K (Windows) dan tanyakan:

Configure vite.config for Capacitor mobile deployment with base './' and production build to dist

Metode 2: Konfigurasi Manual

Konfirmasi vite.config.ts menggunakan basis relatif sehingga aset muat di dalam WebView native:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
  },
})

Bangun dan verifikasi:

npm run build

Kamu seharusnya melihat sebuah dist/ folder dengan index.html di pusatnya.

Projek Lovable Next.js Legacy

Jika repositori kamu menggunakan Next.js, tanyakan pada Cursor:

Add a static export script to package.json and configure next.config.js for mobile export with Capacitor

Atau ikuti Mengubah Aplikasi Next.js Kamu ke Mobile untuk setup lengkap, kemudian gunakan next.config di __CAPGO_KEEP_0__ alih-alih webDir: 'out' in Capacitor instead of dist.

✅ Sukses: Folder pembangunan statis ada (dist/ atau out/Langkah 5 — Tambahkan __CAPGO_KEEP_0__ dan Platform Native index.html.

Capacitor menggabungkan aplikasi web Anda dengan shell iOS dan Android yang nyata — tidak perlu direwrite.

Capacitor wraps your web app in real iOS and Android shells — no rewrite needed.

Tekan

(Mac) atau Command+K (Windows) dan tanyakan: Ctrl+K AI akan bertanya tentang nama aplikasi Anda

Install Capacitor CLI, initialize it for my app with webDir dist, and add iOS and Android platforms

Menambahkan atau dan ID Paket (misal com.yourcompany.myapp).

Metode 2: Instalasi Manual

npm install @capacitor/core @capacitor/cli
npx cap init

Saat diminta:

Pilih ID Paket yang Anda miliki. ID Paket adalah unik secara global. Gunakan ID domain balik berdasarkan domain yang Anda kendalikan dari awal — mengubahnya kemudian berarti mencari dan mengganti di seluruh 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).

npm run build
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
npx cap sync

Konfigurasi Capacitor

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Tanyakan pada Cursor:

Update capacitor.config.ts to use dist as webDir and set up for HTTPS

Untuk Next.js static export, tanyakanlah agar menggunakan out sebaliknya.

Metode 2: Konfigurasi Manual

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
  },
};

export default config;

Bangun dan Sinkronkan

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Pertunjukkan pada Cursor:

Build the production web app and sync it with Capacitor platforms

Metode 2: Perintah Manual

npm run build
npx cap sync

Projek Anda sekarang tampak seperti:

your-lovable-app/
├── android/              ← native Android project
├── ios/                  ← native iOS project
├── dist/                 ← built web app (or out/ for Next.js)
├── src/                  ← your Lovable app code
├── capacitor.config.ts
└── package.json

No CocoaPods diperlukan. Capacitor 8 menggunakan Pengelola Paket Swift secara otomatis untuk dependensi iOS.

✅ Sukses: ios/ dan android/ folder muncul dan terminal menampilkan Sync finished.

Langkah 6 — Periksa Anda .gitignore

Capgo Pembangun memasukkan dari repositori Git Anda, jadi ios/ dan android/ harus dikomit. Kesalahan umum adalah mengabaikan mereka di root repositori.

Konfirmasi:

• Root .gitignore mengabaikan node_modules dan dist (membangun kembali di awan dist dalam proses pembangunan web)
• ios/ dan android/ mereka sendiri tidak diabaikan Sukses:

✅ menampilkan git status dan ios/ siap untuk di-commit (tidak diabaikan) android/ and

Langkah 7 — Commit dan Push

git add .
git commit -m "Add Capacitor and native iOS/Android platforms"
git push

✅ Sukses: Repositori Anda GitHub menampilkan ios/ dan android/ folder.

Langkah 8 — Bangun Biner Siap Toko dengan Capgo Builder

Tidak perlu Mac atau pipeline lokal Xcode/Android Studio untuk mengirim. Capgo Builder __CAPGO_KEEP_0__ Builder

Capgo Builder

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__ Builder

• mengompilasi, menandatangani, dan dapat mengirimkan build iOS dan Android dari cloud.
• Android Keystore Generator
• Penghasil Kunci Keamanan Android --- daftar iPhone Anda untuk pembangunan build

Lihat Pengelolaan Kredensial dan Bangun iOS dari Windows.

Minta build awan

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.myapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.myapp --platform android --build-mode release

Log build mengalir di terminal Anda. Dengan App Store Connect dikonfigurasi, build iOS dapat mengunggah ke TestFlight secara otomatis.

Instal di perangkat nyata:

• iOS: TestFlight (direkomendasikan) atau build pembangunan dengan UDID perangkat Anda terdaftar
• Android: Google Play internal testing track atau APK/AAB yang telah ditandatangani:

✅ Sukses: Suatu build yang ditandatangani berhasil dan Anda dapat menginstalnya di perangkat nyata.

Langkah 9 — Opsional: Uji Coba Lokal di Xcode atau Android Studio

Jika Anda memiliki Mac atau ingin melakukan uji coba emulator sebelum membangun di cloud:

Untuk iOS

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Open the iOS project in Xcode

Metode 2: Perintah Manual

npx cap open ios

Pengaturan Xcode pertama kali:

1. Pilih simulator dari dropdown perangkat (misalnya iPhone 15)
2. For perangkat nyata: aktifkan Manajemen tanda tangan secara otomatis dan pilih tim pengembang Apple Anda
3. Klik tombol ▶️ Play — pembangunan pertama memakan waktu 5–10 menit

For Android

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Open the Android project in Android Studio

Metode 2: Perintah Manual

npx cap open android

Pengaturan Studio Android pertama kali:

1. Instal paket yang hilang SDK jika diminta
2. Buat emulator di Pengelola Perangkat (misalnya Pixel 6, API 33+)
3. Klik tombol hijau ▶️ Run — pembangunan pertama membutuhkan 5–15 menit

Pakai IDE lokal untuk debugging sehari-hari. Gunakan Capgo Pembangun Saat Anda membutuhkan file biner rilis yang ditandatangani.

✅ Sukses: Aplikasi membuka di simulator atau emulator menampilkan konten yang disukai Anda.

Langkah 10 — Aktifkan Live Reload (Pengembangan)

Percepat iterasi dengan mengarahkan shell native ke server pengembangan lokal Anda.

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Pertunjukkan Cursor:

Set up live reload for Capacitor development with my local IP address

Metode 2: Pengaturan Manual

1. Temukan alamat IP lokal Anda:

# macOS
ipconfig getifaddr en0

# Windows
ipconfig

2. Perbarui capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173',
    cleartext: true,
  },
};

export default config;

Pilih port 8080 atau 3000 Bagaimana jika itu yang ingin Anda lakukan? npm run dev Apakah itu mencetak?

3. Aplikasikan perubahan:

npx cap copy

✅ Sukses: Perubahan pada web code akan di-reload secara otomatis di perangkat atau simulator.

Langkah 11 — Tambahkan Fitur Asli: Kamera

Plugin Capacitor memungkinkan JavaScript memanggil fitur perangkat asli. Kami akan menambahkan plugin Kamera agar pengguna dapat mengambil foto — sesuatu yang tidak dapat dilakukan dengan tab browser secara andal.

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Tunjukkan Cursor:

Add the Capacitor Camera plugin with iOS and Android permissions and a button to take a photo

Metode 2: Instalasi Manual

npm install @capacitor/camera
npx cap sync

iOS — tambahkan ke ios/App/App/Info.plist di dalam level tertinggi <dict>:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to take photos.</string>

Android — tambahkan di dalam <manifest> dalam android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

import { Camera, CameraResultType } from '@capacitor/camera';

async function takePhoto() {
  const photo = await Camera.getPhoto({
    quality: 90,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

Menambahkan plugin memerlukan bangun native yang segar melalui Capgo Pembangun sebelumnya dapat berfungsi di perangkat.

✅ Sukses: Kamera code mengompil dan npx cap sync menyelesaikan tanpa ada kesalahan.

Langkah 12 — Tambahkan Capgo Live Updates

Setiap perubahan asli biasanya melalui tinjauan toko aplikasi. Capgo Live Updates context: Halaman/area: Halaman produk live update. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman live-update.astro. Simpan istilah produk/merek Capgo dan istilah pengembang secara tepat. Kunci pesan `live_update_hero_badge` (Lambang Live Update Hero).

mengirimkan perubahan ke lapisan web aplikasi Anda (HTML, CSS, JS, gambar) dalam beberapa menit. Pasang pembaruan di rilis pertama Anda

npm install @capgo/capacitor-updater
npx cap sync

agar Anda tidak perlu menunggu tinjauan ketika Anda membutuhkan mengirimkan perbaikan. capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.myapp',
  appName: 'My Lovable App',
  webDir: 'dist',
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
    },
  },
};

export default config;

Tambahkan ke dalamnya (contoh: __CAPGO_KEEP_0__ src/main.tsx):

import { CapacitorUpdater } from '@capgo/capacitor-updater';

void CapacitorUpdater.notifyAppReady();

Kirimkan, push, dan jalankan Capgo Pembangun baru untuk memastikan pembaruan SDK ada di shell native.

Upload bundle web setelah peluncuran:

npm run build
npx @capgo/cli@latest bundle upload --channel production

Lihat Capgo Dokumen Pembaruan Langsung.

Untuk mengautomatisasi upload ini setiap kali seseorang mengklik Publish di Lovable, ikuti Mengautomatisasi Capgo Pembaruan Langsung dari Lovable dengan GitHub Aksi.

✅ Sukses: Plugin pembaruan telah terinstal dan notifyAppReady() berjalan pada startup.

Langkah 13 — Perbaiki Spasi Status Bar dengan Pembaruan Langsung

On iPhone asli, header Anda mungkin berada di bawah status bar (jam dan baterai). Modern Capacitor menarik garis tepi ke tepi, jadi aplikasi Anda harus menghormati area inset yang aman: env(safe-area-inset-top), -bottom, -left, -right.

Banyak aplikasi Lovable sudah mengatasi inset bawah tetapi menggunakan padding atas tetap (seperti pt-6) tanpa inset atas.

1. Konfirmasi viewport-fit=cover di index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

2. Perbaiki header atas — gunakan max() untuk menjaga padding web dan tumbuh pada perangkat dengan notch:

/* Before */
padding-top: 1.5rem;

/* After */
padding-top: max(1.5rem, env(safe-area-inset-top));

Ini Cursor atau Lovable, tanyakan:

“Konten aplikasi berjalan di bawah bar status di atas pada perangkat mobile. Tambahkan” env(safe-area-inset-top) ke padding atas setiap header halaman menggunakan” max(),”menjaga padding yang ada sebagai minimum.””

3. Kirimkan perbaikan melalui udara” — ini adalah CSS murni, tidak perlu membangun native kembali:”

git add .
git commit -m "Fix top safe area on mobile"
git push
npm run build
npx @capgo/cli@latest bundle upload --channel production

Tutup aplikasi secara paksa pada perangkat Anda, buka kembali, tunggu ~15–30 detik, dan buka lagi. Header harus berada di bawah bar status — diperbaiki tanpa ulasan toko.”

✅ Sukses:” Konten atas membersihkan bar status setelah bundle OTA berlaku.”

Untuk pekerjaan layout yang lebih dalam, lihat” @capgo/tailwind-capacitor __CAPGO_KEEP_0__ layar tanpa batas” Capacitor edge-to-edge display.

Langkah 14 — Siapkan Daftar Pustaka Anda

Aplikasi Anda sudah dibangun, dapat diinstal, dan Anda dapat memasang pembaruan instan. Membuat aplikasi siap untuk dijual di toko-toko publik hampir saja hanya soal administrasi.

• ikon aplikasi — 1024×1024 piksel untuk iOS (tidak transparan), 512×512 piksel untuk Google Play
• Sketsa Layar — Apple memerlukan iPhone dengan layar 6,9 inci (resolusi 1320×2868 px)
• Nama Aplikasi, Sub Judul, Deskripsi, Kata Kunci
• Kebijakan Privasi URL — diperlukan oleh kedua toko, bahkan untuk aplikasi gratis
• Rataan usia — kuesioner di setiap konsol
• Pengumpulan Data Pengungkapan --- Label Privasi Apple dan Keamanan Data Google ---

Metode 1: Menggunakan Cursor AI (Dianjurkan)

Set up app icons and splash screens for my Capacitor app

Metode 2: Pengaturan Manual

npm install -D @capacitor/assets
# Add assets/icon.png (1024x1024) and assets/splash.png (2732x2732)
npx capacitor-assets generate
npx cap sync

Apa yang tersisa sebelum

1. hidup :
2. Pengujian tertutup Google Play (akun pribadi dibuat setelah 13 November 2023): setidaknya 12 pengujian selama 14 hari berturut-turut sebelum akses produksi. iOS tidak memiliki kesetaraan.

Kirimkan untuk tinjauan --- 3–5 hari Apple, 3–7 hari Google setelah persyaratan pengujian terpenuhi. --- Lihat panduan tinjauan aplikasi pertama kami

Masalah Umum (dan Cara Mengatasinya)

• Could not find the web assets directory: ./dist — Jalankan npm run build sebelum npx cap add context: HTML fragment teks dari string Capgo UI yang lebih panjang (kunci induk `create_an_issue_and_discuss_before_working_on_a_new_feature`). Halaman/area: Situs web pemasaran Capgo. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman contributing.astro. Kunci pesan `create_an_issue_and_discuss_before_working_on_a_new_feature` (Buat Isu Dan Diskusikan Sebelum Bekerja Pada Fitur Baru). | Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `mention_issue_before_working`). Halaman/area: Situs web pemasaran Capgo. Peran: Kalimat situs web. Dilihat di: halaman contributing.astro. Kunci pesan `mention_issue_before_working` (Sebutkan Isu Sebelum Bekerja). npx cap syncatau webDir context: Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan alternatif Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatif.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan CTA Alternatif). | Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan CTA Appflow). | Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan CTA Capwesome). | Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `consulting_faq_subtitle`). Halaman/area: Halaman layanan konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman layanan konsultasi.astro. Simpan istilah produk/brand dan developer Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ Layanan Konsultasi). | Halaman/area: Halaman perbandingan/migrasi Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau). capacitor.config.ts . Pastikandist in out sesuai dengan output framework Anda (
• untuk Vite, untuk Next.js static export).
• “Aplikasi ID … tidak tersedia” — ID di proyek asli Anda harus sesuai dengan Apple App Store Connect. Cari dan ganti secara luas ios/ dan android/, komit, bangun kembali
• layar putih pada peluncuran — Atur base: './' di konfigurasi Vite, bangun kembali, dan jalankan npx cap sync.
• Isi di bawah status bar — Tambahkan viewport-fit=cover dan env(safe-area-inset-top) , padding (Langkah 13).
• APK ditandatangani dalam mode debug — Google Play menolak build debug. Gunakan build rilis yang ditandatangani dengan keystore Anda.
• Penolakan Pengembangan — Versi Sudah Ada — Tambahkan versi/bilangan pembangunan di proyek native dan bangun ulang.

Untuk Capgo Masalah Pembangun, lihat Pengembangan Native Mengatasi Masalah dan Debugging Perbarui Hidup.

Kesimpulan

Kamu telah mengubah aplikasi web yang disukai menjadi iOS dan Android native — dibangun di awan tanpa Mac, dengan fitur kamera nyata dan perbaikan tata letak yang dikirimkan melalui udara. Itu adalah bagian yang sulit sudah selesai.

Langkah Selanjutnya

• Capgo Perbarui Hidup — Kirimkan perbaikan UI dan teks tanpa menunggu tinjauan toko
• Capgo Pembangun Automasi rilis build di CI —
• Capgo Direktori Plugin Biometrik, notifikasi push, lokasi geografis, dan lain-lain —
• Guida terkait: Base44 ke mobile · Bolt.new ke mobile

Daftar diri untuk akun Capgo gratis untuk mengaktifkan Live Updates dan build natively di cloud.

Sumber Daya

• Dokumentasi Lovable
• Dokumentasi Capacitor
• Dokumentasi Build Natively Capgo
• Capgo — Berita Terkini untuk Capacitor Aplikasi
• Bangun iOS dari Windows
• Next.js Export Statik untuk Mobile

Teruskan dari Mengubah Aplikasi yang Disukai Anda ke iOS dan Android dengan Capacitor

Jika Anda menggunakan Mengubah Aplikasi yang Disukai Anda ke iOS dan Android 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, Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Nativ, dan Bangun iOS dari Windows untuk pembangunan iOS di cloud tanpa Mac.