Membuat Aplikasi Mobile dengan Update Langsung, Quasar, dan Capacitor.

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.

Dengan Capacitor, Anda dapat mengubah aplikasi web Quasar menjadi aplikasi mobile tanpa harus 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. Capgo untuk mengirimkan pembaruan hidup ke aplikasi Anda dalam beberapa detik.

Tentang Capacitor

__CAPGO_KEEP_0__ 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. API dan fungsi 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

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, kita memerlukan __CAPGO_KEEP_0__ proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam 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 nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

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

Adding Capacitor to Your Quasar App

Pertama-tama, kita dapat menginstal sync Capacitor Quasar

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

Selanjutnya, kami perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Terakhir, kami 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 context Page/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).

Android

folder di proyek Quasar Anda. Yaitu proyek asli native!Untuk iOS, Anda membutuhkan 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. Yang perlu Anda perhatikan adalah webDircontext: Direktori web

, yang harus mengarah ke hasil perintah build Anda. Saat ini, nilai ini tidak akurat. capacitor.config.json __CAPGO_KEEP_0__.config.json dan update nilai:

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

webDir

npm run generate
npx cap sync

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

Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru Capacitor Plugin npx cap sync maka saatnya untuk menjalankan

lagi.

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

Pembangunan dan Pengiriman Aplikasi Native Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode Studio Android Dengan demikian, jika Anda merencanakan 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 dalam pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native berikut:

npx cap open ios
npx cap open android

Setelah Anda telah mengatur proyek native Anda, mengdeploy aplikasi ke perangkat terhubung sangatlah mudah. Di Studio Android, 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 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:

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

Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan...

Capgo Live Update

Capgo Live Update adalah layanan yang memungkinkan pengembang untuk mengdeploy update ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional ke App Store. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat perubahan kecil pada 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 pembaruan waktu nyata secara langsung. Panduan langkah demi langkah ini akan memandu 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 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 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

Ini perintah 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`

Versi default akan diambil dari file package.json Anda.

Pantau perubahan Capgo jika build sudah ada.

Anda juga bisa menguji aplikasi dengan saya di aplikasi sandbox mobile saya.

Buat channel default:

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

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

Selamat! 🎉 Anda telah berhasil mengdeploy pembaruan langsung pertama Anda. Ini hanya awal dari apa yang dapat Anda lakukan dengan Pembaruan Langsung. Untuk mengetahui lebih lanjut, lihat dokumentasi Pembaruan Langsung yang lengkap. Menggunakan __CAPGO_KEEP_0__ Plugins.

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 plugin, tetapi plugin ini tetap saja membawa dialog berbagi native! Untuk 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 overflow horizontal atau area aman yang dipotong.

Antarmuka native dengan Navigasi dan Transisi Capgo Native

Native-feeling UI with Capgo Native Navigation and Transitions

__CAPGO_KEEP_0__ Quasar Mobile App dengan Capacitor untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Quasar adalah hacky dan jarang berguna ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan sentuhan mobile asli dalam aplikasi Quasar + Capacitor , gunakan plugin Capgo daripada UI web-only seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Router Quasar Anda tetap mengatur status rute; plugin ini menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman Ionic-style dan swipe-back di lapisan WebView iOS tanpa mengadopsi UI Ionic.

Install kedua-duanya:

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

Rapikan halaman yang diarahkan ke cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') Sebelum melanjutkan. 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.

Area yang aman dengan Tailwind

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

npm add -D tailwind-capacitor

In 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 menambahkannya 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 banyak overflow-x: hidden atau menyesuaikan tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport sudah diterapkan dengan benar

In 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 shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen nested yang banyak:

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-shell. Pengulangan padding area aman di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitorkamu bisa mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Setel Capacitor iOS contentInset To never Pertama

Pada capacitor.config.ts, lebih baik menggunakan inset native dan biarkan CSS (atau Native Navigation) mengatur area aman: contentInsetMode: 'css'Menggabungkan __CAPGO_KEEP_0__’s automatic content inset dengan padding CSS adalah penyebab umum dari jarak ganda.

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-*) Biasanya, penyebabnya adalah elemen yang menggunakan

, Tailwind

, lebar piksel tetap, atau besar 100vwIn Safari Web Inspector, jalankan: w-screenfirst min-width.

In

[...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,
  }));

Apa itu Tailwind, ganti w-screen dengan w-full banyak masalah overflow 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 Capgocontext

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

Teruskan dari Membuat Aplikasi Mobile dengan live updates, Quasar dan Capacitor.

Jika Anda menggunakan Aplikasi Mobile dengan Update 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 Build Natively untuk alur kerja produk di Capgo Build Natively.