Lebih lanjut ke konten utama
Petunjuk

Mengubah Aplikasi yang Disukai Anda ke iOS dan Android dengan Capacitor

Langkah demi langkah untuk mengexport proyek Lovable, menggabungkannya dengan Capacitor, membuat aplikasi iOS dan Android yang ditandatangani di cloud dengan Capgo Builder, dan mengirimkan perbaikan secara nirkabel.

Martin Donadieu

Martin Donadieu

Pengembang Konten

Mengubah Aplikasi yang Disukai Anda ke iOS dan Android dengan Capacitor

Pendahuluan

Lovable adalah pembuat aplikasi AI yang mengubah prompt menjadi aplikasi React yang berfungsi dalam menit. Anda dapat mengirimkan di browser dengan cepat — tapi apa jika Anda ingin aplikasi Anda di App Store dan Google Play, berdiri di layar utama seperti setiap aplikasi asli?

Langkah ini menjelajahi jalur penuh: mengexport dari Lovable, menggabungkan aplikasi web dengan Capacitormembangun file biner iOS dan Android yang ditandatangani di cloud dengan Capgo Pembangun Capgo Live Updates Capgo Live Updates.

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 proses build di cloud. Dengan demikian, Anda akan memiliki:

Aplikasi iOS dan Android asli yang dibangun dari cloud — tidak perlu Xcode atau Android Studio di jalur utama

  • __CAPGO_KEEP_0__
  • Aplikasi yang berjalan pada perangkat nyata (TestFlight, instalasi langsung, atau Play internal testing)
  • Fungsi kamera yang berfungsi yang hanya dapat ditawarkan oleh aplikasi asli
  • Pembaruan Hidup yang dikonfigurasi sehingga perbaikan UI dan CSS dapat berlayar tanpa ulasan toko

Prasyarat

Persyaratan Detail
Komputer Mac, Windows, atau Linux — bangunan awan dapat berfungsi dari mana saja OS
Editor code Kursor (direkomendasikan) atau VS Code
Node.js 24 LTS (terbaru — download dari nodejs.org)
Git To clone your Lovable repo from GitHub
Capgo account Daftar gratis — bangun awan dan Perbarui Langsung

Biaya (hanya untuk mempublikasikan secara umum):

Item Biaya
Program Pengembang Apple 99/tahun
Google Play Console $25 sekali bayar
Cursor Pro $20/bulan (opsional tetapi disarankan untuk eksekusi perintah AI)
Capgo Paket gratis tersedia; paket berbayar untuk skala produksi

Opsional (simulator lokal saja):

Alat Mengapa
Xcode (~15 GB, macOS saja) Simulator iOS di Mac Anda
Android Studio (~1 GB + SDK) Emulator Android

Kamu bisa melewatkan kedua-duanya. Jalur utama dalam panduan ini membangun di awan dan menginstal pada perangkat nyata tanpa mereka.

Catatan Singkat tentang Aplikasi yang Disukai dan Framework

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

Selama waktu lama, Lovable memiliki default sebagai Aplikasi tunggal halaman (SPA) React + Vite. Sejak Mei 2026, aplikasi Lovable baru dapat menggunakan TanStack Start dengan rendering sisi server (SSR) oleh default. SSR sangat baik untuk web, tetapi Capacitor mengemas Pembangunan statis --- sebuah folder dari HTML, CSS, dan JavaScript dengan index.html di dasarnya — yang berlayar di dalam aplikasi di perangkat.

Sebuah aplikasi SSR mengharapkan server untuk mengrender halaman pada setiap permintaan. Tidak ada server di dalam sebuah ponsel, jadi untuk Capacitor kamu ingin output statis yang diterjemahkan oleh klien.

Apa yang harus dilakukan:

  • Membuat dari awal: Tanyakan kepada Lovable untuk mendapatkan aplikasi tunggal halaman (SPA) atau untuk melompatkan SSR sehingga kamu mendapatkan folder statis. dist/ Sudah menggunakan TanStack Start (SSR):
  • Konfigurasi untuk memprediksi atau menghasilkan SPA statis. Satu-satunya syarat yang keras adalah folder pembangunan statis yang mengandung Aplikasi Lovable Legacy Next.js: index.html.
  • Perlu diingat bahwa saya telah menghilangkan kata-kata yang tidak perlu dan mengubah kalimat agar lebih sesuai dengan bahasa Indonesia. Pakai eksport statis — hasilnya akan keluar di out/ daripada dist/.

Terlepas dari framework apa pun yang Anda gunakan, poin Capacitor’s webDir ke folder itu. Untuk SPA Vite, folder itu adalah dist.

Langkah 1 — Eksportkan Aplikasi yang Disukai Anda ke GitHub

Aplikasi yang Disukai Anda menjaga code di editornya hingga Anda menghubungkan GitHub.

  1. Buka proyek Lovable Anda di browser
  2. Klik Perbarui (kanan atas) jika perlu, lalu buka Aplikasi Git dalam menu kiri
  3. Pilih GitHub, berikan izin kepada Lovable, dan hubungkan akun Anda
  4. Lovable membuat repositori dan memasukkan aplikasi secara otomatis

Koneksi Lovable.dev GitHub

Otorisasi Lovable.dev GitHub

Pengaturan repositori Lovable.dev

Proyek Lovable.dev diekspor

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

Langkah 2 — Atur Cursor dan Salin Projek Anda

Sebelum kita dapat bekerja dengan code Anda secara lokal, Anda akan membutuhkan 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 unduh versi untuk sistem operasi Anda
  2. Pasang Cursor mengikuti petunjuk instalasi
  3. Setelah terpasang, buka Cursor

Mulai Cursor

Konfigurasi Kursor untuk Pengembangan AI

Untuk pengalaman terbaik, konfigurasi Kursor sebelum Anda memulai:

  1. Belilah Rencana Kursor — Meskipun Kursor menawarkan tingkat gratis, rencana Pro ($20/bulan) memberikan Anda penyelesaian AI tak terbatas, akses ke Claude dan GPT-4, serta eksekusi perintah
  2. Buka Pengaturan Kursor Klik tombol Command+, (Mac) atau Ctrl+, (Windows)

Pengaturan Kursor

  1. Aktifkan Model AI — Pastikan fitur AI diaktifkan:

 Izinkan Model

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

Pilih Model Cursor

  1. Izinkan Eksekusi Perintah — Aktifkan Cursor untuk menjalankan perintah untuk Anda:

Izinkan Jalankan Perintah

Membuat Salinan Repositori Anda di Cursor

  1. Pada Cursor, tekan Shift+Command+P (Mac) atau Shift+Ctrl+P (Windows) untuk membuka palet perintah
  2. Masukkan "clone" dan pilih Git: Clone
  3. Masukkan URL repositori GitHub Anda: https://github.com/YOUR-USERNAME/your-lovable-app.git
  4. Pilih folder untuk menyimpan proyek Anda

Kloning di Cursor

  1. Cursor akan mengkloning dan membuka proyek Anda

Buka di Cursor

Langkah 3 — Instal Dependensi dan Jalankan Lokal

  1. Buka tab AI Cursor dengan menekan Command+K (Mac) atau Ctrl+K (Windows)
  2. Tipe perintah berikut:
Install Homebrew, Node.js and npm on my system, then install dependencies and run the dev server

AI akan secara otomatis mendeteksi OS, menginstal Node.js, dan menjalankan npm installdan mulai server pengembang dengan npm run dev.

Install Homebrew

Metode 2: Instalasi Manual

Buka terminal di Cursor dengan menekan Shift+Command+T (Mac) atau Shift+Ctrl+T (Windows), kemudian:

For 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

For Windows:

  1. Unduh installer 24 LTS dari nodejs.org
  2. Jalankan installer
  3. Buka terminal dan jalankan:
cd your-lovable-app
npm install
npm run dev

Aplikasi Lovable.dev berjalan secara lokal

Aplikasi Lovable biasanya berjalan di http://localhost:8080 atau http://localhost:5173 atau gunakan alamat 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 Paling Disukai)

Tombol 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 Nativ:

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

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

Sukses ekspor statis Lovable.dev

Proyek Lovable Next.js Legacy

Jika repositori Anda menggunakan Next.js, tanyakan Cursor:

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

Atau ikuti Ubah Aplikasi Next.js Anda ke Mobile untuk setup lengkap, kemudian gunakan next.config dalam __CAPGO_KEEP_0__ bukan webDir: 'out' in Capacitor instead of dist.

Folder pembangunan statis ada ( ataudist/ dengan out/dengan index.html.

Langkah 5 — Tambahkan Capacitor dan Platform Nativ

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

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

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

AI akan bertanya tentang nama aplikasi Anda dan context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan). ID Paket (misalnya com.yourcompany.myapp).

Capacitor inisialisasi

Metode 2: Instalasi Manual

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

Ketika diminta:

Prompt Contoh Catatan
Nama Aplikasi Aplikasi yang Dicintai Saya Ditampilkan di bawah ikon aplikasi
ID Paket Aplikasi com.yourcompany.myapp Gaya domain yang dibalikkan — tidak dapat diubah setelah publikasi toko
Direktori aset web dist Pilih out Untuk ekspor statis Next.js

Pilih ID Paket yang Anda miliki. ID Paket unik secara global. Gunakan ID domain balik berdasarkan domain yang Anda kendalikan dari awal — mengubahnya nanti 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 `and` (Dan).

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

Capacitor platforms added

Configure Capacitor

Konfigurasi __CAPGO_KEEP_0__

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

Metode 1: Menggunakan Cursor AI (Dianjurkan) 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;

Build dan Sinkron

Pertunjuk Cursor:

Build the production web app and sync it with Capacitor platforms

Metode 2: Perintah Manual

npm run build
npx cap sync

Capacitor sinkronisasi selesai

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

Tidak perlu CocoaPods. Capacitor 8 menggunakan Manajer 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 memasuki 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 (di awal cloud membangun dist selama pembangunan web)
  • ios/ dan android/ mereka sendiri tidak diabaikan

Sukses: git status menunjukkan ios/ dan android/ siap untuk di komit (tidak diabaikan).

Langkah 7 — Komit dan Push

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

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

Langkah 8 — Bangun File Binari yang Siap Dipasarkan dengan Pembangun Capgo

Anda tidak perlu memiliki Mac atau pipeline Xcode/Android Studio lokal untuk mengirimkan. Pembangun Capgo Pembangun Nativ

Set up 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

Pembangun Nativ V2 Bagikan Proses Bangun

Pembangun Pembangun Nativ V2 Manajemen Kredensial dan Build iOS dari Windows.

Minta bangun 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 bangun mengalir di terminal Anda. Dengan App Store Connect yang terkonfigurasi, bangun iOS dapat mengunggah ke TestFlight secara otomatis.

Pasang di perangkat nyata:

  • iOS: TestFlight (direkomendasikan) atau bangun pengembangan dengan UDID perangkat Anda yang terdaftar
  • Android: Track pengujian internal Google Play atau APK/AAB yang ditandatangani

Sukses: Bangun yang ditandatangani selesai dan Anda dapat memasangkannya di perangkat nyata.

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

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

For iOS

Open the iOS project in Xcode

Methode 2: Perintah Manual

npx cap open ios

Xcode membuka proyek Lovable

Pengaturan Xcode pertama kali:

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

Aplikasi yang disukai berjalan di iOS

Untuk Android

Open the Android project in Android Studio

Metode 2: Perintah Manual

npx cap open android

Studio Android membuka proyek Lovable

Konfigurasi Android Studio untuk pertama kali:

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

Aplikasi yang disukai berjalan di Android

Pakai IDE lokal untuk debugging sehari-hari. Gunakan Capgo Builder ketika Anda memerlukan file biner rilis yang ditandatangani.

Sukses: Aplikasi terbuka di simulator atau emulator menampilkan konten Lovable Anda.

Langkah 10 — Aktifkan Live Reload (Pengembangan)

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

Pertunjukkan Cursor:

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

Metode 2: Pengaturan Manual

  1. Cari alamat IP lokal Anda:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 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;

Pakai port 8080 atau 3000 jika itu yang npm run dev tercetak.

  1. Aplikasikan perubahan:
npx cap copy

Live reload diaktifkan

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

Langkah 11 — Tambahkan Fitur Asli: Kamera

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

Pertunjukkan Cursor:

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

Metode 2: Pemasangan 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> 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;
}

Fitur native yang ditambahkan

Menggunakan plugin memerlukan pembangunan native yang baru melalui __CAPGO_KEEP_0__ Pembangun sebelumnya dapat berjalan di perangkat. through Capgo Builder before it works on devices.

Kamera __CAPGO_KEEP_0__ mengompilasi dan Camera code compiles and npx cap sync Menggunakan plugin memerlukan pembangunan native yang baru melalui __CAPGO_KEEP_0__ Pembangun sebelumnya dapat berjalan di perangkat.

Langkah 12 — Tambahkan Capgo Live Updates

Setiap perubahan asli biasanya melalui tinjauan toko aplikasi. Capgo Live Updates Bagikan perubahan ke layer web aplikasi Anda (HTML, CSS, JS, gambar) secara daring dalam beberapa menit.

Instal pembarui di rilis pertama Anda Jadi Anda tidak pernah terjebak menunggu tinjauan ketika Anda perlu mengirimkan perbaikan.

npm install @capgo/capacitor-updater
npx cap sync

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

Awali di entry aplikasi (misalnya. src/main.tsx):

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

void CapacitorUpdater.notifyAppReady();

Komit, bagikan, dan jalankan build baru Capgo Builder sehingga pembarui SDK ada di shell native.

Unggah bundle web setelah peluncuran:

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

Lihat Capgo Live Updates dokumen.

To otomatisasi ini setiap kali seseorang mengklik Publish ikuti Mengautomasi Capgo Live Updates dari Lovable dengan GitHub Aksi.

Sukses: Plugin Pembarui telah terpasang dan notifyAppReady() berjalan pada startup.

Langkah 13 — Mengatasi Spasi Status Bar dengan Live Update

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

Aplikasi Lovable banyak 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));

In Cursor atau Lovable, tanyakan:

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

3. Kirimkan perbaikan secara daring – ini adalah CSS murni, tidak perlu membangun ulang 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 di perangkat Anda, buka kembali, tunggu sekitar 15-30 detik, dan buka lagi. Header harus berada di bawah status bar — diperbaiki tanpa tinjauan toko.

Sukses: Isi atas membersihkan status bar setelah bundle OTA diterapkan.

Untuk pekerjaan layout yang lebih dalam, lihat @capgo/tailwind-capacitor dan Capacitor edge-to-edge display.

__CAPGO_KEEP_0__ layar tanpa batas

Langkah 14 — Siapkan Daftar Pemasaran Anda

  • Aplikasi Anda telah dibangun, dapat diinstal, dan Anda dapat memasang pembaruan instan. Membuat aplikasi siap untuk dijual di toko-toko umum hampir saja merupakan tugas administrasi: Icon Aplikasi (Ikon Aplikasi):
  • Sketsa Layar — Apple memerlukan sketsa layar iPhone 6.9“ (1320×2868px)
  • Nama Aplikasi, Sub Judul, Deskripsi, Kata Kunci
  • URL Kebijakan Privasi — diperlukan oleh kedua toko, bahkan untuk aplikasi gratis
  • Penilaian Usia context: Halaman/area: Halaman solusi aplikasi contoh. Peran: Label UI pendek atau item navigasi. Dilihat di: komponen solusi/SolutionAppExample.astro. Kunci pesan `solution_app_examples_rating` (Penilaian Contoh Aplikasi Solusi).
  • — kuesioner di setiap konsol Penyataan Pengumpulan Data
Set up app icons and splash screens for my Capacitor app

Metode 1: Menggunakan Cursor AI (Dianjurkan)

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

Metode 2: Pengaturan Manual Tangan Mereka sendiri (Tangan Mereka sendiri tidak ada dalam bahasa Indonesia, jadi saya menggantinya dengan 'Manual')

Apa yang tersisa sebelum "live":

  1. Pengujian tertutup Google Play Pengguna pribadi yang dibuat setelah 13 November 2023): setidaknya 12 tester 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 pengujian dipenuhi.

Lihat panduan tinjauan aplikasi kami untuk daftar lengkapnya. Kesalahan Umum (dan Cara Mengatasinya)

— Jalankan

  • Could not find the web assets directory: ./dist sebelum npm run build atau npx cap add atau npx cap syncPastikan webDir dalam capacitor.config.ts sesuai dengan output framework Anda (dist untuk Vite, out untuk Next.js static export).
  • “ID Aplikasi … ini tidak tersedia” — ID Paket adalah unik secara global. Pilih ID balik-domain yang Anda kendalikan.
  • Build iOS gagal setelah mengubah ID paket — ID di proyek asli Anda harus sesuai dengan Apple App Store Connect. Cari dan ganti secara luas ios/ dan android/, commit, rebuild.
  • Layar putih pada peluncuran — Atur base: './' di konfigurasi Vite, rebuild, dan jalankan npx cap sync.
  • Isi konten di bawah bar status — Tambahkan viewport-fit=cover dan env(safe-area-inset-top) context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).
  • 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

For Capgo Builder issues, see Untuk __CAPGO_KEEP_0__ Masalah Pembuat, lihat dan Perbaruan Hidup Mencari Kesalahan.

Kesimpulan

Anda telah mengambil aplikasi web yang disukai ke iOS dan Android asli — dibangun di awan tanpa Mac, dengan fitur kamera nyata dan perbaikan tata letak yang dikirimkan secara nirkabel. Itu adalah bagian yang sulit selesai.

Langkah-Langkah Selanjutnya

Pendaftaran gratis untuk Capgo untuk mengaktifkan Live Updates dan pembangunan natively di cloud.

Sumber Daya

Teruskan dari Convert Aplikasi Lovable Anda ke iOS dan Android dengan Capacitor

Apa yang Anda lakukan jika Mengubah Aplikasi yang Disukai Anda ke iOS dan Android dengan Capacitor untuk merencanakan kerja 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 Native, dan Membangun iOS dari Windows untuk membuat iOS cloud tanpa Mac.

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

Dukungan Manusia dari Martin

Mulai Sekarang

Terbaru dari Blog Kami

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