Dalam tutorial ini, kita akan memulai dengan membuat aplikasi web baru menggunakan Quasar. Kemudian, kita akan belajar cara mengubahnya menjadi aplikasi mobile menggunakan Capacitor. Jika Anda ingin membuat aplikasi Anda terlihat lebih baik di mobile.
Dengan Capacitor, Anda dapat mengubah aplikasi web Quasar Anda menjadi aplikasi mobile tanpa perlu melakukan banyak hal sulit atau belajar cara baru membuat aplikasi seperti yang Anda lakukan dengan React Native.
Tutorial ini akan mengajarkan Anda prosesnya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk memasuki dunia aplikasi mobile asli. Selain itu, Anda juga akan menggunakan Capgo untuk mengirimkan pembaruan langsung ke aplikasi Anda dalam beberapa detik.
Tentang Capacitor
CapacitorJS benar-benar merupakan perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke proyek web apa pun, dan itu akan menggabungkan aplikasi Anda ke dalam tampilan web native, menghasilkan proyek Xcode dan Android Studio asli untuk Anda. Selain itu, plugin-pluginnya memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JS.
Dengan Capacitor, Anda mendapatkan aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Fungsi API dan fungsi yang diperbarui membuatnya mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile yang sepenuhnya fungsional dengan Capacitor!
Mengpersiapkan Aplikasi Quasar Anda
Untuk membuat aplikasi Quasar baru, jalankan perintah berikut:
npm init quasar
Pilih opsi “Aplikasi dengan Quasar CLI” kemudian “Quasar v2”.
Untuk membuat aplikasi mobile native, kami memerlukan ekspor proyek Anda. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam file package.json yang dapat digunakan untuk membangun dan menyalin proyek Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Setelah menjalankan perintah generate, Anda seharusnya dapat melihat folder baru di root proyek Anda. dist Membuat aplikasi mobile native memerlukan
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Quasar App
Untuk mengemas aplikasi web menjadi kontainer mobile native, kita harus mengikuti beberapa langkah awal, tapi setelah itu, cukup sederhana seperti menjalankan perintah tunggal. sync Langkah pertama, kita bisa menginstal Capgo dan
sebagai dependensi pengembangan, lalu mengaturnya dalam proyek kita. Selama pengaturan, Anda bisa menekan "enter" untuk menerima nilai default untuk nama dan ID aplikasi. Capacitor CLI Langkah terakhir, kita bisa menambahkan platform, dan Capgo akan membuat folder untuk setiap platform di root proyek kita:
Inisialisasi Capgo
Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your Quasar project
npx cap init
# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platforms
npx cap add ios
npx cap add android
By this point, you should be able to observe new ios dan android folder di proyek Quasar Anda.
Proyek tersebut adalah proyek asli native!
Untuk mengakses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.
Dengan demikian, Anda harus menemukan file capacitor.config.ts di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan hanyalah webDiryang harus mengarah ke hasil perintah pembangunan Anda. Saat ini, itu tidak akurat.
Untuk memperbaiki hal ini, buka file capacitor.config.json dan update webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}konteks: Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `solutions_cordova_to_capacitor_ai_step2_body`). Halaman/area: Halaman pemasaran solusi Capgo. Peran: Kalimat teks situs web. Dilihat di: halaman solutions/cordova-to-capacitor-ai.astro. Kunci pesan `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).
npm run generate
npx cap syncKamu bisa mencobanya dengan menjalankan perintah-perintah berikut: npm run generate Perintah pertama npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.
akan sinkronisasi semua web __CAPGO_KEEP_0__ ke tempat-tempat yang tepat dari platform-platform native sehingga dapat ditampilkan dalam aplikasi. Selain itu, perintah sinkronisasi mungkin memperbarui platform-platform native dan menginstal plugin, sehingga ketika kamu menginstal plugin Capacitor baru itulah saatnya untuk menjalankan npx cap sync lagi.
Tidak menyadari, Anda sudah selesai, jadi mari kita lihat aplikasi di perangkat!
Build dan Deploy aplikasi native
Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan Android Studio terinstal. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi di toko aplikasi, Anda perlu mendaftar ke Apple Developer Program untuk iOS dan Google Play Console untuk Android.
Jika Anda baru dalam mengembangkan aplikasi mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek-proyek native tersebut:
npx cap open ios
npx cap open androidSetelah Anda telah mengatur proyek-proyek native Anda, mengdeploy aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengdeploy aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut:
Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengdeploy aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (tetapi lagi, Anda perlu terdaftar di Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat terhubung, yang dapat Anda pilih di bagian atas. Contoh berikut:
Selamat! Anda telah berhasil menginstal aplikasi web Quasar ke perangkat mobile. Berikut contoh:
Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukan ini selama pengembangan…
Capgo Live Update
Capgo Live Update adalah layanan yang memungkinkan pengembang untuk menginstal pembaruan ke aplikasi mobile mereka tanpa harus melewati proses pengajuan App Store yang tradisional. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan kecil ke aplikasi tanpa harus menunggu proses tinjauan App Store.
Integrasi Capgo ke aplikasi Quasar Anda adalah proses yang sederhana yang memberi Anda kekuatan untuk menggunakannya live update waktu nyata. Panduan langkah demi langkah ini akan membawa Anda melalui integrasi dan implementasi Capgo Live Update, sehingga Anda dapat mengirimkan pembaruan yang lancar.
Daftar dan Akses Dashboard Capgo:
Sekarang saatnya untuk mendaftar dan mendapatkan kunci API untuk mengunggah versi pertama! Mulailah dengan Mendaftar untuk akun Capgo.
Instal Capgo SDK:
Dari command line, langsung ke root aplikasi Capacitor, jalankan:
npm i @capgo/capacitor-updater && npx cap sync To install plugin ke dalam aplikasi Capacitor Anda.
Dan kemudian tambahkan ke aplikasi Anda ini code sebagai pengganti CodePush satu:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Ini akan memberitahu plugin native instalasi sebagai berhasil.
Masuk ke Capgo CLOUD:
Pertama, gunakan all apikey yang ada di akun Anda untuk masuk dengan CLI:
`npx @capgo/cli@latest login YOU_KEY`Tambahkan aplikasi pertama Anda:
Mari kita mulai dengan membuat aplikasi pertama di Capgo Cloud dengan CLI.
npx @capgo/cli@latest app addIni perintah akan menggunakan semua variabel yang didefinisikan di file konfigurasi Capacitor untuk membuat aplikasi.
Unggah versi pertama Anda:
Jalankan perintah untuk membangun code Anda dan kirimkannya ke Capgo dengan:
npx @capgo/cli@latest bundle upload`Secara default, nama versi akan menjadi yang ada di file package.json Anda.
Periksa masuk Capgo Jika ada build.
Kamu bahkan bisa menguji dengan aplikasi sandbox mobile saya. Aplikasi Sandbox Mobile.
Buat default channel:
Setelah Anda telah mengirimkan aplikasi ke Capgo, Anda perlu membuat channel default agar aplikasi dapat menerima pembaruan dari Capgo.
npx @capgo/cli@latest channel set production -s default
Konfigurasi aplikasi untuk memvalidasi pembaruan:
Tambahkan konfigurasi ini ke file JavaScript utama Anda.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Lalu lakukan npm run build && npx cap copy untuk memperbarui aplikasi Anda.
Terima Pembaruan Langsung:
Untuk aplikasi Anda menerima pembaruan langsung dari Deploy, Anda perlu menjalankan aplikasi pada perangkat atau emulator. Cara termudah untuk melakukannya adalah dengan menggunakan perintah berikut untuk meluncurkan aplikasi lokal Anda di emulator atau perangkat yang terhubung ke komputer Anda.
npx cap run [ios | android]Buka aplikasi, letakkan di latar belakang, dan buka lagi, Anda harus melihat di log bahwa aplikasi melakukan pembaruan.
Selamat! 🎉 Anda telah berhasil mengdeploy pembaruan langsung pertama Anda. Ini hanya awal dari apa yang bisa Anda lakukan dengan Pembaruan Langsung. Untuk mengetahui lebih lanjut, lihat dokumentasi Pembaruan Langsung yang lengkap. Dokumentasi Pembaruan Langsung.
Menggunakan Plugin Capacitor
Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah kami sebut beberapa kali sebelumnya. Untuk melakukan ini, kami dapat menginstal plugin yang cukup sederhana dengan menjalankan:
npm i @capacitor/shareTidak ada yang istimewa tentang plugin Tetapi plugin ini tetap saja membawa dialog bagikan native!Untuk ini, kami hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kami, jadi mari kita ubah share() pages/index.vue pages/index.vue kepadanya:
<template>
<div>
<h1>Welcome to Quasar and Capacitor!</h1>
<button @click="share">Share now!</button>
</div>
</template>
<script setup lang="ts">
import { Share } from '@capacitor/share';
async function share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
</script>As yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:
npx cap syncSaat menekan tombol, Anda dapat menyaksikan dialog berbagi asli yang indah dalam aksi!
Selanjutnya, Anda dapat membuat aplikasi terasa lebih asli di iOS dan Android dengan navigasi dan transisi Capgo dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflown horizontal atau area aman yang dipotong.
Antarmuka yang terasa asli dengan Capgo Navigasi dan Transisi Asli
Saya telah bekerja selama beberapa tahun dengan Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Quasar adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.
Untuk merasakan mobile asli di aplikasi Quasar + Capacitor, gunakan plugin Capgo yang lebih baik daripada kit UI web saja seperti Konsta UI:
- @capgo/capacitor-native-navigation – navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang diblur di Android. Router Quasar Anda tetap menjaga status rute; plugin ini yang menguasai chrome asli.
- Transisi @capgo/capacitor Transisi halaman dengan gaya Ionic dan pengembalian ke belakang dengan gesekan sisi iOS di layer WebView, tanpa menerima UI Ionic.
Instal kedua:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Tampilkan tab bar kaca cair (iOS menggunakan rendering milik sistem; Android menggunakan latar belakang WebView yang diboroskan):
await NativeNavigation.setTabbar({
selectedId: 'home',
labelVisibilityMode: 'labeled',
icons: true,
colors: { dynamic: true },
tabs: [
{ id: 'home', title: 'Home', icon: { svg: '...' } },
{ id: 'settings', title: 'Settings', icon: { svg: '...' } },
],
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
router.push(`/${id}`);
});Tambahkan transisi halaman native di shell aplikasi:
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';
initTransitions({ platform: 'auto' });
const router = useRouter();
const outletRef = ref(null);
onMounted(() => {
if (outletRef.value) {
setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
}
});
const openSettings = () => {
setDirection('forward');
router.push('/settings');
};
</script>
<template>
<cap-router-outlet ref="outletRef">
<router-view />
</cap-router-outlet>
</template>Wrap halaman yang diarahkan dengan cap-router-outlet, cap-pagedan cap-contentdan panggil setDirection('forward') atau setDirection('back') context
HTML fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `alternatives_cta_questions`). Halaman/area: Halaman perbandingan pembaruan hidup Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Fragment teks HTML dari string UI Capgo yang lebih panjang (kunci induk `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Fragment teks HTML dari string UI Capgo 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. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Halaman/area: Halaman jasa konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ Jasa Konsultasi). | Halaman/area: Halaman perbandingan/migrasi pemasaran 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). Memanfaatkan @capgo/capacitor-native-navigation dan Memanfaatkan @capgo/capacitor-transisi.
Area yang aman dengan Tailwind
Untuk area yang aman pada perangkat dengan Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm. Ini menyediakan safe-areas fasilitas dan plugin-plugin lainnya yang Capacitor-ramah Tailwind:
npm add -D tailwind-capacitorDalam src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Pakai fasilitas seperti pt-safe, pb-safe, dan px-safe bukan dengan menyebarkan env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Quasar Anda, buka PR di GitHub.
Pengaturan Layout iOS (Viewport, Area Aman, dan Horizontal Overflow)
Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih overflow-x: hidden atau mengatur tag viewport saja biasanya tidak cukup untuk memperbaikinya. Jalankan periksaan-periksaan ini secara berurutan.
Pastikan tag meta viewport diterapkan dengan benar
Di index.html (atau template HTML Quasar Anda), atur tag meta viewport di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Pengaturan Area Aman iOS dari satu wrapper root saja
Buatlah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda:
html,
body,
#q-app {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.app-shell {
min-height: 100dvh;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}Selimuti semua konten halaman di dalam .app-shellJangan duplikasi padding area aman di header, modal, dan wrapper layout untuk menghindari tampilan UI yang terpotong atau terlalu besar.
Dengan @capgo/tailwind-capacitor, Anda dapat mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe pada shell tunggal tersebut.
Tetapkan Capacitor iOS contentInset ke never context":"Halaman/Areas: Halaman produk update langsung. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To)."
pertama capacitor.config.tsDalam contentInsetMode: 'css', lebih baik menggunakan inset asli native dan biarkan CSS (atau Native Navigation’s
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) jeda adalah penyebab umum dari penambahan spasi ganda.
Cari elemen yang sebenarnya mengalami overflows.
Penyebab biasanya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel tetap, atau lebar yang sangat besar min-width.
In Safari Web Inspector, jalankan:
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
el,
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: document.documentElement.clientWidth,
}));Dengan Tailwind, ganti w-screen dengan w-full ketika memungkinkan. Banyak masalah overflows horizontal berasal dari 100vw / w-screen, padding area yang aman duplikat, atau kontainer lebar tetap — bukan dari tag meta viewport itu sendiri.
Kesimpulan
Capacitor adalah pilihan yang sangat baik untuk membuat aplikasi native berdasarkan proyek web yang sudah ada, menawarkan cara sederhana untuk berbagi code dan menjaga UI yang konsisten.
Dan dengan penambahan CapgoDengan demikian, sangatlah mudah menambahkan pembaruan live ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.
Jika Anda ingin mengetahui cara menambahkan Capgo ke aplikasi Next.js Anda, silakan lihat artikel berikutnya:
Teruskan dari Membuat Aplikasi Mobile dengan pembaruan live, Quasar dan Capacitor.
Jika Anda menggunakan Membuat Aplikasi Mobile dengan pembaruan live, Quasar dan 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 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 Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.
