Creating Mobile Apps with live updates, Quasar and Capacitor.

Apa yang akan kita lakukan dalam tutorial ini adalah membuat aplikasi web baru menggunakan Quasar. Later on, we’ll learn how to turn it into a mobile app using Capacitor. If you want to make your app look better on mobile.

With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.

This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo Tutorial ini akan mengajarkan Anda cara melakukannya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan

About Capacitor

untuk mengirimkan pembaruan live ke aplikasi Anda dalam beberapa detik.

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

CapacitorJS adalah benar-benar perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke proyek web apa pun, dan itu akan membungkus aplikasi Anda ke dalam 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 menggunakan Capgo, Anda mendapatkan aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Fungsi yang tipis dan terstruktur dari membuatnya sangat mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile yang sepenuhnya berfungsi dengan menggunakan Capgo!

npm init quasar

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

Untuk membuat aplikasi mobile native, kami memerlukan ekspor projek kami. 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 generatekamu harus dapat melihat folder baru di root proyek kamu. dist Folder ini akan digunakan oleh __CAPGO_KEEP_0__ di kemudian hari, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

Mengintegrasikan Capacitor ke dalam Aplikasi Quasar

Adding Capacitor to Your Quasar App

To package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single perintah. sync Perintah pertama, kita dapat menginstal

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Selanjutnya, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Terakhir, kita dapat menambahkan platform, dan

Capacitor

# 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

Mulai __CAPGO_KEEP_0__ Pada titik ini, Anda seharusnya dapat melihat folder baru ios dan folder di proyek Quasar Anda.

Itu adalah proyek native asli!

Untuk mengakses proyek Android nanti, Anda harus menginstal Android StudioUntuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.

Selain itu, Anda harus menemukan file capacitor.config.ts dalam proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan adalah webDiryang harus mengarah ke hasil perintah build Anda. Saat ini, itu tidak akurat.

Untuk memperbaiki hal ini, buka capacitor.config.json file dan update webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Kamu bisa mencobanya dengan menjalankan perintah-perintah berikut:

npm run generate
npx cap sync

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

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

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

Bangun dan Rilis Aplikasi Nativ

Membangun aplikasi iOS memerlukan Anda memiliki Xcode terpasang, dan untuk aplikasi Android, Anda memerlukan Android Studio terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Jika Anda baru dalam pengembangan aplikasi mobile natif, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek-proyek natif:

npx cap open ios
npx cap open android

Setelah Anda telah mengatur proyek-proyek natif Anda, mengirimkan aplikasi Anda ke perangkat yang terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi Anda ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Contoh berikut:

Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengirimkan aplikasi Anda ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan membimbing Anda melalui prosesnya (tetapi lagi, Anda perlu terdaftar di Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Contoh berikut:

Selamat! Anda telah berhasil mengirimkan aplikasi web Quasar Anda ke perangkat mobile. Contoh berikut:

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 mengunduh pembaruan ke aplikasi mobile mereka tanpa harus melewati proses pengiriman aplikasi ke App Store. 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 dalam aplikasi Quasar Anda adalah proses yang sederhana yang memberi Anda kemampuan untuk mengakses kekuatan pembaruan 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 Anda! 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 Untuk menginstal 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 bahwa instalasi telah berhasil.

Masuk ke Capgo CLOUD:

Pertama, gunakan all apikey gunakan API kunci yang ada di akun Anda untuk masuk ke 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 telah 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 diambil dari file package.json Anda.

Periksa masuk Capgo jika ada build.

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

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

Terbuka aplikasi, letakkan di latar belakang dan buka lagi, Anda seharusnya melihat di log aplikasi melakukan update.

Selamat! 🎉 Anda telah berhasil menginstal Live Update pertama Anda. Ini hanya awal dari apa yang bisa Anda lakukan dengan Live Updates. Untuk mengetahui lebih lanjut, lihat dokumentasi Live Updates yang lengkap. Dokumentasi Live Updates.

Menggunakan Plugin Capacitor

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

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin Share plugin, tetapi plugin ini tetap saja membawa dialog berbagi native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubah share() pages/index.vue ke ini: Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian menginstal ulang aplikasi ke perangkat kita. 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>

sync

npx cap sync

Setelah 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 Capgo navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflow 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 daripada kit UI web-only 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 jalur; plugin ini menguasai chrome asli.
• @capgo/capacitor-transitions — transisi halaman Ionic dan swipe-back iOS di layer WebView, tanpa mengadopsi UI Ionic.

Install kedua-duanya:

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

Konfigurasi navigasi asli dengan mod 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 dibor):

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 asli di dalam 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 dalam cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') context: Fragment teks HTML dari string Capgo UI 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 Capgo UI 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 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. Simpanlah istilah produk/brand dan istilah pengembang Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Fragment teks HTML dari string Capgo UI yang lebih panjang (kunci induk `consulting_faq_subtitle`). Halaman/area: Halaman layanan 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 Subjudul FAQ 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).

sebelum berpindah. Jangan duplikasi kepala atau kaki web ketika navigasi asli menguasai permukaan-permukaan tersebut. Using @capgo/capacitor-native-navigation Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Gunakan @capgo/capacitor-transisi.

Daerah aman dengan Tailwind

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

npm add -D tailwind-capacitor

Ini src/css/app.scss:

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

Pakailah utilitas seperti pt-safe, pb-safe, dan px-safe sebaliknya dari menyebarkan env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada yang hilang untuk pengaturan Quasar Anda, buka PR di GitHub.

Mengatasi Masalah Tata Letak iOS (Viewport, Area Aman, dan Overflows Horizontal)

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

Mengatasi 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-shellPenggunaan padding area aman yang berulang di header, modal, dan wrapper tata letak sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitor, Anda dapat mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe On single shell itu.

Set Capacitor iOS contentInset ke never Pertama

Dalam capacitor.config.ts, lebih baik menggunakan inset disabled asli dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengontrol area 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 double spacing.

Temukan elemen yang benar-benar mengalami overflown

Masalah biasanya disebabkan oleh elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel tetap, atau kontainer yang 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 keluaran horizontal berasal dari 100vw / w-screen, padding area aman yang digandakan, 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 CapgoJadi, bahkan lebih mudah untuk menambahkan pembaruan live ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.

Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi Next.js Anda, lihatlah 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 Plugin Directory untuk alur kerja produk di Capgo Plugin Directory, Capacitor Plugins oleh Capgo untuk detail implementasi di Capacitor Plugins oleh Capgo, Tambahkan atau Perbarui Plugin untuk detail implementasi di Tambahkan atau Perbarui Plugin, Alternatif Plugin Bisnis Ionic Enterprise untuk alur kerja produk dalam Alternatif Plugin Bisnis Ionic Enterprise, dan Capgo Pembangunan Nativ untuk alur kerja produk dalam Capgo Pembangunan Nativ.