Membuat Aplikasi Mobile dengan pembaruan langsung, Quasar dan Capacitor.

Dalam tutorial ini, kami akan memulai dengan membuat aplikasi web baru menggunakan Quasar. Kemudian, kami 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 mengantumkan Anda melalui prosesnya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk memasuki wilayah aplikasi mobile native. Selain itu, Anda juga akan menggunakan Capgo untuk mengirimkan pembaruan hidup ke aplikasi Anda dalam hitungan detik.

Tentang Capacitor

CapacitorJS benar-benar merupakan perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke dalam proyek web apa pun, dan ia akan menggabungkan aplikasi Anda ke dalam sebuah tampilan web native, menghasilkan proyek Xcode dan Android Studio native 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. API dan fungsi yang diperbarui membuatnya mudah untuk diintegrasikan ke dalam proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile native yang sepenuhnya berfungsi dengan Capacitor!

Mengatur Aplikasi Quasar

Untuk membuat aplikasi Quasar baru, jalankan perintah berikut:

npm init quasar

Pilih opsi “Aplikasi dengan Quasar CLI” kemudian “Quasar v2”.

Untuk menciptakan aplikasi mobile native, kami memerlukan ekspor Proyek kita. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam file package.json kita sehingga dapat digunakan untuk membangun dan menyalin proyek Quasar: Setelah menjalankan perintah kamu harus dapat melihat folder baru di root proyek kamu.

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tapi untuk saat ini, kita harus mengaturnya dengan benar. generateMengintegrasikan __CAPGO_KEEP_0__ ke Aplikasi Quasar Anda dist Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tapi setelah itu, cukup sederhana seperti menjalankan perintah tunggal.

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Capacitor __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI sebagai dependensi pengembangan, dan kemudian atur dalam proyek kami. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.

Kemudian, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Akhirnya, kita dapat menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek kami:

# 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 titik ini, Anda seharusnya dapat melihat folder baru ios dan android dalam proyek Quasar kami.

Itu adalah proyek native asli!

Untuk mengakses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan sebaiknya instal Xcode.

Selain itu, Anda harus menemukan file capacitor.config.ts di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Satu-satunya hal yang perlu Anda perhatikan adalah webDir, yang harus mengarah ke hasil perintah build 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"
}

Anda dapat mencobanya dengan menjalankan perintah-perintah berikut:

npm run generate
npx cap sync

Perintah pertama npm run generate hanya akan membangun proyek Quasar Anda dan menyalin pembangunan statis, sementara perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat dari platform native sehingga dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin juga memperbarui platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru Capacitor waktunya untuk menjalankan npx cap sync lagi.

Tidak menyadari, Anda sekarang sudah selesai, jadi mari kita lihat aplikasi di perangkat!

Membangun dan Mengembangkan Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terpasang, dan untuk aplikasi Android, Anda perlu memiliki Studio Android sudah terinstal. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Console Google Play untuk Android. Jika Anda baru-baru ini memulai pengembangan mobile native, Anda dapat menggunakan __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ untuk dengan mudah membuka proyek native:

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

xcode-run

quasar-mobile-app

__CAPGO_KEEP_0__ Live Update

Capgo Live Update adalah layanan yang memungkinkan pengembang untuk mengirimkan pembaruan ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional ke Toko Aplikasi. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan kecil ke aplikasi tanpa harus menunggu proses tinjauan Toko Aplikasi.

Capgo adalah layanan yang memungkinkan pengembang untuk mengirimkan pembaruan ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional ke Toko Aplikasi. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan kecil ke aplikasi tanpa harus menunggu proses tinjauan Toko Aplikasi.

Mengintegrasikan Capgo ke dalam aplikasi Quasar Anda adalah proses yang sederhana yang memberi Anda kemampuan untuk mengakses pembaruan waktu nyata secara langsung. Panduan langkah demi langkah ini akan membawa Anda melalui integrasi dan implementasi Capgo Live Update, sehingga Anda dapat menyampaikan pembaruan yang halus.

Daftar dan Akses Dashboard Capgo:

Sekarang saatnya untuk mendaftar dan mendapatkan kunci API untuk mengunggah versi pertama Anda! Mulailah dengan mendaftar untuk akun Capgo.

Pasang Capgo SDK:

Dari command line, langsung ke root aplikasi Capacitor, jalankan:

npm i @capgo/capacitor-updater && npx cap sync Untuk menginstal plugin ke dalam aplikasi Capacitor.

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 bahwa instalasi telah berhasil.

Login ke Capgo CLOUD:

Pertama, gunakan all apikey tersedia 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 add

Perintah ini akan menggunakan semua variabel yang ditentukan di file konfigurasi Capacitor untuk membuat aplikasi.

Unggah versi pertama Anda:

Jalankan perintah untuk membangun code dan kirimkannya ke Capgo dengan:

npx @capgo/cli@latest bundle upload`

Dengan default, nama versi akan menjadi yang ada di file package.json Anda.

Periksa masuk Capgo jika bangunan ada.

Anda bahkan bisa menguji aplikasi mobile sandbox saya Anda dapat menguji aplikasi mobile sandbox saya.

Set Channel Default:

Setelah Anda telah mengirimkan aplikasi ke Capgo, Anda perlu membuat channel default untuk memungkinkan aplikasi menerima pembaruan dari Capgo.

npx @capgo/cli@latest channel set production -s default

Konfigurasi Aplikasi untuk Mengvalidasi 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.

Menerima 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 seharusnya melihat di log bahwa aplikasi melakukan pembaruan.

Selamat! 🎉 Anda telah berhasil mengirimkan pembaruan hidup pertama Anda. Ini hanya awal dari apa yang bisa Anda lakukan dengan Pembaruan Langsung. Untuk mengetahui lebih lanjut, lihat dokumentasi Pembaruan Langsung. Menggunakan __CAPGO_KEEP_0__ Plugin.

Using Capacitor Plugins

Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah kami sebutkan beberapa kali sebelumnya. Untuk melakukan ini, kami dapat menginstal plugin yang cukup sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin "Share", tetapi plugin ini tetap saja membawa dialog berbagi native!Untuk melakukan ini, kami hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kami, jadi mari kita ubah share() pages/index.vue menjadi ini: Seperti yang telah kami sebutkan sebelumnya, ketika menginstal plugin baru, kami perlu melakukan operasi sinkronisasi dan kemudian meng-redeploy aplikasi ke perangkat kami. Untuk melakukan ini, jalankan perintah berikut:

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

Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!

npx cap sync

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan navigasi dan transisi __CAPGO_KEEP_0__ dan memperbaiki masalah layout iOS yang umum yang menyebabkan overflows horizontal atau area aman yang dipotong.

Antarmuka UI yang terasa asli dengan Navigasi dan Transisi Native Capgo

Native-feeling UI with Capgo Native Navigation and Transitions

__CAPGO_KEEP_0__ Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Quasar adalah sulit dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan sentuhan mobile asli di aplikasi Quasar + Capacitor , gunakan plugin Capgo daripada kit UI web seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Router Quasar menjaga status rute; plugin ini menguasai chrome asli.
• @capgo/capacitor-transitions — transisi halaman Ionic dan geser mundur iOS di layer WebView, tanpa menerapkan UI Ionic.

Pasang kedua:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar asli:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki 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>

Bungkus halaman yang diarahkan dengan cap-router-outlet, cap-pagedan cap-contentdan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi asli menguasai permukaan-permukaan tersebut.

Lihat panduan lengkapnya: Menggunakan @capgo/capacitor-navigasi-asli dan Menggunakan @capgo/capacitor-transisi.

Area yang aman dengan Tailwind

Untuk area yang aman perangkat dengan Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor di npm). Ini menyediakan safe-areas fasilitas dan plugin lainnya yang ramah Capacitor:

npm add -D tailwind-capacitor

Dalam src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Gunakan fasilitas seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Quasar Anda, buka PR di GitHub.

Mengatasi Masalah Layout iOS (Viewport, Area Aman, dan Horizontal Overflow)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan pengecekan-pengecekan 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" />

Tangani zona aman iOS dari wrapper root saja

Buat shell aplikasi tunggal dan terapkan padding zona aman di sana — bukan di komponen nested beberapa:

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 semua konten halaman di dalam .app-shellPengaturan padding zona aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitor, Anda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Atur Capacitor iOS contentInset To never Pertama

In capacitor.config.ts, lebih suka native inset dinonaktifkan dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') menguasai area yang aman:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Menggabungkan Capacitor’s automatic content inset dengan CSS env(safe-area-inset-*) padding adalah penyebab umum dari jarak ganda.

Temukan elemen yang sebenarnya mengalami keluaran yang berlebihan

Penyebab biasanya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel yang tetap, atau besar min-width.

Dalam 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 keluaran horizontal berasal dari 100vw / w-screendipadankan padding area yang aman, atau kontainer dengan 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 dari Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug yang terkini.

Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi Next.js Anda, lihatlah artikel berikutnya :

Teruskan dari Membuat Aplikasi Mobile dengan pembaruan hidup, Quasar dan Capacitor.

Jika Anda menggunakan Membuat Aplikasi Mobile dengan pembaruan secara langsung, 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.