Dalam tutorial ini, kita akan mulai dengan membuat web app baru menggunakan Quasar. Selanjutnya, kita akan belajar cara mengubahnya menjadi mobile app menggunakan Capacitor. Jika Anda ingin tampilan app lebih baik di mobile.
Dengan Capacitor, Anda bisa mengubah Quasar web app menjadi mobile app tanpa perlu melakukan banyak hal rumit atau mempelajari cara baru dalam membuat app seperti pada React Native.
Tutorial ini akan memandu Anda melalui prosesnya, dimulai dengan aplikasi Quasar baru lalu menambahkan Capacitor untuk masuk ke ranah aplikasi mobile native. Selain itu, Anda akan menggunakan Capgo to send live update to your app in seconds.
Tentang Capacitor
CapacitorJS benar-benar game-changer! Anda bisa dengan mudah memasukkannya ke proyek web apa pun, dan ia akan membungkus aplikasi Anda ke dalam native webview, sekaligus membuatkan proyek native Xcode dan Android Studio untuk Anda. Plus, plugin-nya menyediakan akses ke fitur native perangkat seperti kamera melalui JS bridge.
Dengan Capacitor, Anda mendapatkan aplikasi mobile native yang luar biasa tanpa setup rumit atau kurva belajar yang curam. API yang ramping dan fungsionalitasnya yang efisien membuatnya sangat mudah diintegrasikan ke proyek Anda. Percayalah, Anda akan takjub betapa mudahnya membuat aplikasi native yang berfungsi penuh dengan Capacitor!
Menyiapkan Aplikasi Quasar Anda
Untuk membuat aplikasi Quasar baru, jalankan perintah berikut:
npm init quasar
Pilih opsi “App with Quasar CLI” lalu “Quasar v2”.
Untuk membuat aplikasi mobile native, kita memerlukan sebuah ekspor dari proyek kita. Jadi, mari kita tambahkan script sederhana ke dalam package.json yang bisa dipakai untuk build dan copy proyek Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Setelah menjalankan perintah tersebut generate, Anda seharusnya bisa mengenali yang baru dist folder baru di root proyek Anda.
Folder ini akan digunakan oleh Capacitor nanti, tapi untuk saat ini, kita harus mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi Quasar Anda
Untuk membungkus web app ke dalam container mobile native, kita perlu melakukan beberapa langkah awal, tapi setelah itu cukup dengan menjalankan satu sync perintah.
Pertama, kita bisa menginstal Capacitor CLI sebagai dev dependency, lalu mengaturnya di dalam proyek. Saat setup, Anda bisa tekan “enter” untuk menerima nilai default untuk name dan bundle ID.
Selanjutnya, kita perlu menginstal paket inti serta paket yang relevan untuk platform iOS dan Android.
Terakhir, kita bisa menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek kita:
# 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
Pada tahap ini, Anda seharusnya sudah bisa melihat iOS dan Android folder baru di dalam proyek Quasar Anda.
Itu proyek native sungguhan!
Untuk mengakses proyek Android nantinya, Anda harus menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan sebaiknya menginstal Xcode.
Selain itu, Anda perlu menemukan file capacitor.config.ts di proyek Anda, yang berisi beberapa pengaturan fundamental Capacitor yang digunakan saat sinkronisasi. Satu hal yang perlu Anda perhatikan adalah webDir, yang harus mengarah ke hasil perintah build Anda. Saat ini, nilainya tidak tepat.
Untuk memperbaikinya, buka file capacitor.config.json file dan perbarui webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Anda bisa mencobanya dengan menjalankan perintah berikut:
npm run generate
npx cap syncPerintah pertama npm run generate hanya akan mem-build proyek Quasar Anda dan menyalin static build, sementara perintah kedua npx cap sync akan menyinkronkan semua web code ke tempat yang tepat di platform native agar bisa ditampilkan di aplikasi.
Selain itu, perintah sync mungkin akan memperbarui platform native dan menginstal plugin, jadi saat Anda menginstal Plugin Capacitor saatnya menjalankan npx cap sync lagi.
Tanpa terasa, Anda sebenarnya sudah selesai, jadi mari lihat aplikasinya di perangkat!
Build dan Deploy aplikasi native
Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terinstal, dan untuk aplikasi Android, Anda perlu memiliki Android Studio terinstal. Selain itu, jika Anda berencana mendistribusikan aplikasi di app store, Anda perlu mendaftar di Apple Developer Program untuk iOS dan Google Play Console untuk Android.
Jika Anda baru mengenal pengembangan mobile native, Anda bisa menggunakan Capacitor CLI untuk membuka kedua proyek native dengan mudah:
npx cap open ios
npx cap open androidSetelah proyek native siap, deploy aplikasi ke perangkat yang terhubung sangatlah mudah. Di Android Studio, Anda cukup menunggu hingga semuanya siap, lalu deploy aplikasi ke perangkat tanpa mengubah pengaturan apa pun. Berikut contohnya:
Di Xcode, Anda perlu mengatur signing account untuk deploy aplikasi ke perangkat asli, bukan sekadar simulator. Jika belum pernah melakukannya, Xcode akan memandu prosesnya (tapi sekali lagi, Anda harus terdaftar di Developer Program). Setelah itu, Anda cukup tekan play untuk menjalankan aplikasi di perangkat yang terhubung, yang bisa dipilih di bagian atas. Berikut contohnya:
Selamat! Anda telah berhasil deploy web app Quasar ke perangkat mobile. Berikut contohnya:
Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukan ini saat development…
Capgo Live Update
Capgo Live Update adalah layanan yang memungkinkan developer men-deploy update ke aplikasi mobile mereka tanpa melalui proses pengajuan ke App Store yang tradisional. Ini cara praktis untuk memperbaiki bug dengan cepat atau membuat update kecil pada aplikasi tanpa menunggu proses review App Store.
Integrasi Capgo ke dalam aplikasi Quasar Anda sangatlah mudah, memungkinkan Anda memanfaatkan kekuatan real-time live updates. Panduan langkah demi langkah ini akan memandu Anda dalam integrasi dan implementasi Capgo Live Update, sehingga Anda dapat memberikan update yang seamless.
Daftar dan Akses Dashboard Capgo:
Saatnya mendaftar dan dapatkan key API untuk upload versi pertama Anda! Mulai dengan signing up for a Capgo account.
Install Capgo SDK:
Dari command line, langsung di root app Capacitor Anda, jalankan:
npm i @capgo/capacitor-updater && npx cap sync Untuk menginstal plugin ke aplikasi Capacitor Anda.
Lalu tambahkan code ini ke aplikasi Anda sebagai pengganti CodePush:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Ini akan memberi tahu native plugin bahwa instalasi berhasil.
Login ke Capgo CLOUD:
Pertama, gunakan all apikey yang ada di akun Anda untuk login dengan CLI:
`npx @capgo/cli@latest login YOU_KEY`Tambah App pertama Anda:
Mari kita mulai dengan membuat aplikasi di Capgo Cloud menggunakan CLI.
npx @capgo/cli@latest app addPerintah ini akan menggunakan semua variabel yang ditentukan dalam file config Capacitor untuk membuat app.
Upload versi pertama Anda:
Jalankan perintah untuk build code Anda dan kirim ke Capgo dengan:
npx @capgo/cli@latest bundle upload`Secara default, nama versi akan mengikuti yang ada di file package.json Anda.
Cek Capgo jika build tersedia.
Anda bahkan bisa mencobanya dengan app sandbox mobile saya.
Jadikan channel default:
Setelah Anda mengirimkan aplikasi ke Capgo, Anda perlu mengatur channel Anda sebagai default agar aplikasi dapat menerima update dari Capgo.
npx @capgo/cli@latest channel set production -s default
Konfigurasikan aplikasi untuk memvalidasi update:
Tambahkan konfigurasi ini ke file JavaScript utama Anda.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Lalu jalankan npm run build && npx cap copy untuk memperbarui aplikasi Anda.
Terima Live Update:
Agar aplikasi Anda menerima live update dari Deploy, Anda perlu menjalankan aplikasi di device atau emulator. Cara termudah adalah dengan menjalankan perintah berikut untuk membuka aplikasi lokal di emulator atau device yang terhubung ke komputer Anda.
npx cap run [ios | android]Buka aplikasi, pindahkan ke background lalu buka kembali, Anda akan melihat di logs bahwa aplikasi sudah melakukan update.
Selamat! 🎉 Anda berhasil men-deploy Live Update pertama Anda. Ini baru awal dari apa yang bisa Anda lakukan dengan Live Updates. Untuk info lebih lanjut, lihat dokumentasi Live Updates.
Menggunakan Plugin Capacitor
Mari kita lihat cara menggunakan plugin Capacitor secara langsung, yang sudah kami sebutkan beberapa kali sebelumnya. Untuk melakukannya, kita bisa menginstal plugin yang cukup simpel dengan menjalankan:
npm i @capacitor/shareTidak ada yang istimewa dari plugin Share, tapi tetap memunculkan dialog share bawaan! Untuk ini, kita hanya perlu mengimpor package dan memanggil share() fungsi dari aplikasi kita, jadi mari kita ubah pages/index.vue menjadi:
<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>Seperti yang disebutkan sebelumnya, saat menginstal plugin baru, kita perlu melakukan operasi sync lalu redeploy aplikasi ke perangkat. Untuk melakukannya, jalankan perintah berikut:
npx cap syncSetelah menekan tombol, Anda bisa melihat dialog share native yang keren langsung beraksi!
Selanjutnya, Anda bisa membuat aplikasi terasa lebih native di iOS dan Android dengan navigasi dan transisi Capgo, serta memperbaiki masalah layout iOS yang umum menyebabkan horizontal overflow atau safe area terpotong.
UI yang terasa native dengan Native Navigation dan Transitions dari Capgo
Saya sudah bertahun-tahun bekerja dengan Ionic untuk membangun aplikasi cross-platform, tapi mengintegrasikannya dengan Quasar terasa kurang optimal dan jarang sepadan jika Anda sudah menggunakan Tailwind CSS.
Untuk mendapatkan feel mobile native di aplikasi Quasar + Capacitor, gunakan plugin Capgo alih-alih UI kit berbasis web seperti Konsta UI:
- @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar blur di Android. Quasar router Anda tetap menjaga route state; plugin yang mengelola native chrome.
- @capgo/capacitor-transitions — transisi halaman ala Ionic dan fitur iOS edge swipe-back di layer WebView, tanpa harus memakai Ionic UI.
Install keduanya:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfigurasi navigasi native dengan mode inset CSS agar konten web menyesuaikan dengan bar native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Render Liquid Glass tab bar (iOS menggunakan rendering dari sistem; Android menggunakan backdrop WebView yang blur):
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 app shell Anda:
<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>Bungkus halaman yang di-route dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum navigasi. Jangan duplikasi header atau footer web kalau navigasi native sudah menangani area tersebut.
Lihat panduan lengkapnya: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.
Safe areas dengan Tailwind
Untuk safe area perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor pada npm). Ini menyediakan safe-areas utilitas dan plugin Tailwind lain yang kompatibel dengan Capacitor:
npm add -D tailwind-capacitorDi src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Gunakan utilitas seperti pt-safe, pb-safe, dan px-safe daripada menyisipkan env(safe-area-inset-*) secara manual. Proyek ini dikembangkan secara aktif — jika ada yang kurang untuk setup Quasar Anda, buka PR di GitHub.
Memperbaiki Masalah Layout iOS (Viewport, Safe Area, dan Horizontal Overflow)
Jika konten terlihat terpotong, bergeser, atau bisa di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau hanya mengutak-atik tag viewport saja biasanya tidak memperbaikinya. Lakukan pemeriksaan ini secara berurutan.
Pastikan meta tag viewport diterapkan dengan benar
Di index.html (atau template HTML Quasar Anda), atur viewport meta tag di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Tangani iOS safe area hanya dari satu root wrapper
Buat satu app shell dan terapkan safe area padding di sana — bukan di beberapa komponen bersarang:
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);
}Bungkus seluruh konten halaman di dalam .app-shell. Padding safe-area yang dobel di header, modal, dan wrapper layout sering membuat UI terlihat terpotong atau terlalu besar.
Dengan @capgo/tailwind-capacitor, Anda bisa menggunakan padding yang sama dengan utility seperti pt-safe pb-safe px-safe pada satu shell tersebut.
Atur Capacitor iOS contentInset ke never dulu
Di capacitor.config.ts, lebih baik nonaktifkan native inset dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengatur safe area:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mencampur automatic content inset dari Capacitor dengan CSS env(safe-area-inset-*) padding sering kali menjadi penyebab spasi ganda.
Temukan elemen yang benar-benar overflow
Penyebab umumnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar pixel tetap, atau ukuran yang besar min-width.
Di 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 jika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, duplikasi safe-area padding, atau container berukuran tetap — bukan dari viewport meta tag itu sendiri.
Kesimpulan
Capacitor adalah pilihan tepat untuk membangun aplikasi native dari proyek web yang sudah ada, memberikan cara simpel untuk berbagi code dan menjaga UI tetap konsisten.
Dan dengan hadirnya Capgo, makin mudah menambahkan live updates ke aplikasi Anda, sehingga pengguna Anda selalu bisa mengakses fitur terbaru dan perbaikan bug.
Jika Anda ingin mempelajari cara menambahkan Capgo ke aplikasi Next.js Anda, lihat artikel berikut:
Lanjutkan dari Membuat Mobile Apps dengan live updates, Quasar dan Capacitor.
Jika Anda menggunakan Membuat Aplikasi Mobile dengan live updates, Quasar, dan Capacitor. untuk merencanakan pekerjaan plugin native, hubungkan dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, Plugin Capacitor oleh Capgo untuk detail implementasi pada Capacitor Plugins oleh Capgo Menambahkan atau Memperbarui Plugin untuk detail implementasi pada Menambahkan atau Memperbarui Plugin, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di alternatif plugin Ionic Enterprise, dan Capgo Native Build untuk alur kerja produk di Capgo Native Builds.
