Mengubah Aplikasi Favorit Anda ke iOS dan Android dengan Capacitor

Introduction

Penggemar Penggemar adalah pembuat aplikasi 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 penuh: ekspor dari Penggemar, bungkus aplikasi web dengan Capacitor, membuat file biner iOS dan Android yang ditandatangani secara aman di cloud dengan Capgo Builder (tidak perlu Mac), menambahkan fitur asli native, dan mengirimkan perbaikan layout secara daring dengan Capgo Live Updates.

Kami menggunakan Cursor melalui seluruhnya — AI-nya dapat menjalankan sebagian besar perintah terminal untuk Anda jika Anda tidak ingin mengetiknya secara manual.

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 — tanpa Xcode atau Android Studio di jalur utama
• Aplikasi berjalan di perangkat nyata (TestFlight, instal langsung, atau Play internal testing)
• Fungsi kamera yang berfungsi seperti aplikasi asli
• Pengaturan Live Updates sehingga perbaikan UI dan CSS dapat berlalu tanpa review 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 menghasilkan 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 pembangunan statis — sebuah folder dari HTML, CSS, dan JavaScript dengan sebuah index.html di dalamnya — yang dikirimkan di dalam 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 melewatkan SSR sehingga Anda mendapatkan sebuah dist/ folder.
• Sudah menggunakan TanStack Start (SSR): Konfigurasikan untuk memprediksi atau menghasilkan SPA statis. Syarat yang keras hanya adalah folder pembangunan statis yang mengandung index.html.
• Projek Lovable Legacy Next.js: Pilih export statis --- hasilnya pergi ke out/ bukan dist/.

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

Lovable menjaga aplikasi GitHub Anda di editornya sampai Anda menghubungkan __CAPGO_KEEP_1__.

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

1. Terbuka proyek Lovable Anda di browser
2. Klik Upgrade (kanan atas) jika perlu, kemudian buka Git di menu kiri
3. Pilih GitHub, autorisasi Lovable, dan hubungkan akun Anda
4. Lovable membuat repositori dan mengirimkan aplikasi Anda secara otomatis

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

Langkah 2 — Atur Cursor dan Salin Projek Anda

Sebelum kita dapat bekerja dengan code Anda secara lokal, Anda akan membutuhkan sebuah code editor. Kami merekomendasikan Cursor, sebuah editor yang dipimpin 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. Sekarang instalasi selesai, 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 penyelesaian 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 atau (Mac) atau Shift+Ctrl+P untuk membuka palette perintah (Windows)
2. Masukkan “clone” dan pilih Git: Clone
3. Pisahkan URL repositori Anda GitHub: 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 (Mac) Ctrl+K atau (Windows)
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 (Windows), kemudian: Shift+Ctrl+T Untuk macOS:

Untuk Windows:

/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

__CAPGO_KEEP_0__

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 oleh 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',
  },
})

Membangun dan memastikan:

npm run build

Kamu harus melihat sebuah dist/ folder dengan index.html di akar rootnya.

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 mengelilingi aplikasi web Anda dengan shell iOS dan Android 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

Alternatif: atau dan ID Paket (misal com.yourcompany.myapp).

Metode 2: Instalasi Manual

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

Ketika 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 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 terlihat 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 Manajer Paket Swift untuk dependensi iOS secara otomatis.

✅ 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/ siap untuk di-commit (tidak diabaikan)

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 Pembangun Capgo

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

Pembangun Capgo

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

Pembangun __CAPGO_KEEP_0__

• Pembangun __CAPGO_KEEP_0__
• Android Keystore Generator
• Pencipta 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 yang 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 telah ditandatangani berhasil dan Anda dapat menginstalnya pada perangkat nyata.

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

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

For iOS

Methode 1: Menggunakan Cursor AI (Dianjurkan)

Open the iOS project in Xcode

Methode 2: Perintah Manual

npx cap open ios

Pertama kali mengatur Xcode:

1. Pilih simulator dari dropdown perangkat (misalnya iPhone 15)
2. Untuk 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

Untuk 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 Lovable Anda.

Langkah 10 — Aktifkan Live Reload (Pengembangan)

Percepat iterasi dengan menunjuk 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 cara mengubah aplikasi yang disukai pengembang menjadi aplikasi seluler dengan Capacitor? npm run dev Jika itu yang Anda inginkan:

3. Mencetak.

npx cap copy

✅ Reloading hidup diaktifkan Edits to your web code hot-reload on the device or simulator.

Perubahan pada web __CAPGO_KEEP_0__ akan di-reload secara otomatis di perangkat atau simulator.

A Capacitor plugin lets JavaScript call real device features. We’ll add the Camera plugin so users can snap a photo — something a browser tab cannot do reliably.

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 tingkat atas <dict>:

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

Android — tambahkan di dalam <manifest> di 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 pada perangkat.

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

Langkah 12 — Tambahkan Capgo Live Updates

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

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

npm install @capgo/capacitor-updater
npx cap sync

agar Anda tidak perlu menunggu tinjauan ketika Anda perlu 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 ke dalam aplikasi Anda (misalnya, src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Kirimkan, push, dan jalankan Capgo Pembangun baru agar pembarui SDK berada di shell native.

Upload bundle web setelah peluncuran:

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

Lihat Capgo Dokumen Pembaruian Langsung.

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

✅ Sukses: Pembarui plugin terpasang dan notifyAppReady() berjalan pada startup.

Langkah 13 — Perbaiki Spasi Status Bar dengan Pembaruian 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 (OTA) — ini adalah CSS murni, tidak perlu rebuild native:”

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

Matikan aplikasi secara paksa pada perangkat Anda, buka kembali, tunggu sekitar 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 diterapkan.

Untuk pekerjaan layout yang lebih dalam, lihat @capgo/tailwind-capacitor dan 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 ada transparansi), 512×512 piksel untuk Google Play
• Sketsa Layar — Apple memerlukan iPhone 6.9” (1320×2868px) sketsa layar
• 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

Apakah yang masih diperlukan sebelum

1. Uji coba Google Play (akun pribadi yang dibuat setelah 13 November 2023): setidaknya 12 pengujian selama 14 hari berturut-turut sebelum akses produksi. iOS tidak memiliki kesetaraan.
2. Kirimkan untuk tinjauan --- Apple ~3–5 hari, Google ~3–7 hari setelah persyaratan uji coba dipenuhi.

Lihat panduan tinjauan aplikasi pertama kami untuk daftar lengkap checklist. ---

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 paragraf 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 istilah pengembang 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 istilah pengembang 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 istilah pengembang Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan CTA Capwesome). | Halaman/area: Halaman jasa konsultasi. Peran: Judul atau tagline bagian FAQ. Dilihat di: halaman konsultasi.astro. Simpan istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ 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” harus sesuai dengan ID di Apple App Store Connect. Cari dan ganti di seluruh ios/ dan android/, commit, rebuild.
• layar putih saat peluncuran Set base: './' dalam konfigurasi Vite, rebuild, 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 bangun di proyek native dan bangun ulang.

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

Kesimpulan

Anda telah mengambil aplikasi web yang disukai ke 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 selesai.

Langkah Selanjutnya

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

Pendaftaran gratis Capgo untuk mengaktifkan Live Updates dan build natively di cloud. Sumber daya

Dokumentasi Lovable

• Dokumentasi __CAPGO_KEEP_0__
• Dokumentasi Build Natively Capacitor
• Capgo
• Capgo — Update Terupdate untuk Aplikasi Capacitor
• 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 kerja plugin native, hubungkannya dengan Daftar Direktori Plugin Capgo untuk alur kerja produk di Daftar Direktori Plugin Capgo 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.