Membuat Aplikasi Mobile dengan pembaruan live, Quasar dan Capacitor.

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 memandu Anda melalui proses, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk beralih ke dunia aplikasi mobile asli. Selain itu, Anda juga akan menggunakan Capgo untuk mengirimkan pembaruan hidup 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 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. Fungsi API yang tipis dan fungsionalitas yang diperbarui membuatnya mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi native yang sepenuhnya berfungsi dengan Capacitor!

Mengatur 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 export proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam package.json untuk membangun dan menyalin proyek Quasar:

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

Setelah menjalankan perintah generate, Anda seharusnya dapat melihat folder baru di root proyek. dist Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kami harus mengaturnya dengan benar.

Menambahkan Capacitor ke Aplikasi Quasar Anda

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 Firstly, we can install the __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sebagai dependensi pengembangan, dan kemudian atur setelan dalam proyek kami. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.

Next, kami perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android. Capacitor CLI Initialize __CAPGO_KEEP_0__

Pada titik ini, Anda seharusnya dapat melihat folder baru

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

android __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ folder-folder di proyek Quasar Anda.

Itu adalah proyek asli native!

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

Selain itu, Anda harus menemukan sebuah capacitor.config.ts berkas 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 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 kamu dan menyalin pembangunan statis, sedangkan perintah kedua npx cap sync akan sinkronkan 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 kamu menginstal plugin baru Capacitor maka saatnya untuk menjalankan npx cap sync lagi.

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

Buat 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 Anda di toko aplikasi, Anda memerlukan mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Jika Anda baru mengenal pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native:

npx cap open ios
npx cap open android

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

Di Xcode, Anda memerlukan mengatur akun tanda tangan Anda untuk mengdeploy aplikasi Anda ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (tetapi lagi, Anda memerlukan mendaftar ke 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 ini:

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

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

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

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 Untuk menginstal plugin ke 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.

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 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 di __CAPGO_KEEP_0__ Capgo jika ada build.

Anda bahkan bisa menguji aplikasi ini dengan aplikasi sandbox mobile saya Buat channel default.

Setelah Anda telah mengirimkan aplikasi ke __CAPGO_KEEP_0__, Anda perlu membuat channel default agar aplikasi dapat menerima update dari __CAPGO_KEEP_1__.:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.

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

Tambahkan konfigurasi ini ke file JavaScript utama Anda.:

Lalu lakukan

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

CapacitorUpdater.notifyAppReady()

untuk memperbarui aplikasi Anda. npm run build && npx cap copy Terima Update Langsung

Untuk aplikasi Anda dapat menerima update 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.:

__CAPGO_KEEP_1__

  npx cap run [ios | android]

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

Selamat! 🎉 Anda telah berhasil mengdeploy update hidup pertama Anda. Ini hanya awal dari apa yang bisa Anda lakukan dengan Update Hidup. Untuk mempelajari lebih lanjut, lihat dokumen Update Hidup.

Menggunakan Capacitor Plugin

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 Bagikan, tapi tetap membawa dialog bagikan native! Untuk ini sekarang kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubah share() pages/index.vue menjadi ini: Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian meng-redeploy 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>

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

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 layout iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.

Antarmuka UI yang terasa asli dengan Capgo Navigasi dan Transisi Asli

Saya telah bekerja selama tahun-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 yang asli di aplikasi Quasar + Capacitor, gunakan plugin Capgo bukan kit UI web 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 keadaan jalur; plugin ini menguasai chrome asli.
• @capgo/capacitor-transitions — transisi halaman yang mirip dengan Ionic dan swipe-back di lapisan WebView di iOS tanpa mengadopsi UI Ionic.

Instal 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 native:

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 milik sistem; Android menggunakan latar belakang WebView yang diburamkan):

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

Langkapi halaman yang diarahkan dengan cap-router-outlet, cap-page, dan cap-content, serta panggil setDirection('forward') atau setDirection('back') , sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transisi.

Daerah aman dengan Tailwind

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

npm add -D tailwind-capacitor

Di 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 yang hilang untuk pengaturan Quasar Anda, Membuka PR di GitHub.

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

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 dapat memperbaikinya. Jalankan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Dalam 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" />

Menangani Area Aman iOS dari satu wrapper root saja

Buatlah sebuah 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 layout 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 di shell tunggal tersebut.

Atur Capacitor iOS contentInset ke never pertama

Di capacitor.config.ts, lebih baik mengaktifkan inset native dan biarkan CSS (atau Native Navigation’s) contentInsetMode: 'css') mengontrol 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 benar-benar mengalami overflown

Biasanya, musuh utama adalah elemen yang menggunakan 100vwTailwind w-screen, lebar piksel tetap, atau kontainer yang terlalu 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 ketika memungkinkan. Banyak masalah keluaran horizontal berasal dari 100vw / w-screenpadding area aman yang digandakan, atau kontainer dengan lebar tetap — bukan dari tag meta viewport 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, menambahkan pembaruan waktu nyata ke aplikasi Anda bahkan lebih mudah, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.

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

Teruslah dari Membuat Aplikasi Mobile dengan pembaruan waktu nyata, Quasar dan Capacitor.

Jika Anda menggunakan Membuat Aplikasi Mobile dengan pembaruan waktu nyata, 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, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Perusahaan Ionic untuk alur kerja produk di Alternatif Plugin Perusahaan Ionic, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.