Membuat Aplikasi Seluler dengan pembaruan langsung, Quasar dan Capacitor.

Dalam tutorial ini, kami akan memulai dengan membuat aplikasi web baru menggunakan QuasarKemudian, 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 menjadi aplikasi mobile tanpa perlu melakukan banyak hal sulit atau belajar cara baru membuat aplikasi seperti Anda akan melakukannya dengan React Native.

Tutorial ini akan memandu Anda melalui prosesnya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk memasuki dunia aplikasi mobile asli. Selain itu, Anda juga akan menggunakan Capgo Mengirimkan live update 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.

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!

Mengatur Proyek Quasar

Untuk membuat aplikasi Quasar baru, jalankan perintah berikut:

npm init quasar

Pilih opsi "Aplikasi dengan Quasar CLI" kemudian "Quasar v2".

Untuk membuat sebuah aplikasi mobile asli, kami memerlukan ekspor proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke proyek kami. 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 proyekmu. dist folder di root projek Anda.

Folder ini akan digunakan oleh Capacitor nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

Menambahkan Capacitor ke Aplikasi Quasar Anda

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 sync command.

Pertama-tama, kita dapat menginstal Capacitor CLI as a development dependency, and then set it up within our project. During the setup, you can press “enter” to accept the default values for name and bundle ID.

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 project 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 folder di proyek Quasar Anda.

Proyek-proyek tersebut adalah asli dan native!

Untuk mengakses proyek Android nanti, Anda harus menginstal Yaitu proyek asli native!Untuk mengakses proyek Android nanti, Anda harus menginstal Xcode.

Selain itu, Anda harus menemukan sebuah Konfigurasi capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. 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"
}

Anda dapat 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, sementara perintah kedua npx cap sync akan sinkronkan semua web code ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi.

Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru Capacitor plugin Sekarang saatnya menjalankan npx cap sync again.

Sekarang Anda telah menyelesaikan tanpa menyadari, mari kita lihat aplikasi di perangkat!

Membangun dan Mengirimkan Aplikasi Nativ

Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Studio Android 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 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, mengirimkan aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut:

Dalam Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengirimkan 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 mengirimkan 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 mengirimkan pembaruan ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional di 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 update waktu nyata secara langsung. Panduan langkah demi langkah ini akan memandu Anda melalui integrasi dan implementasi Capgo Live Update, sehingga Anda dapat mengirimkan update yang lancar.

Pendaftaran dan Akses Dashboard Capgo:

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

Instalasi Capgo SDK:

Dari command line, langsung ke root direktori aplikasi Capacitor Anda, 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.

Penggunaan Akun 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 ditentukan dalam 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 pembangunan ada.

Anda bahkan dapat menguji aplikasi sandbox mobile saya jika pembangunan ada..

Ubah channel default:

Setelah Anda telah mengirimkan aplikasi ke Capgo, Anda perlu mengatur 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.

Menerima Live Update:

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

Selamat! 🎉 Anda telah berhasil mengirimkan aplikasi pertama Anda ke Live Update. Ini hanya awal dari apa yang dapat Anda lakukan dengan Pembaruan Langsung. Untuk mengetahui lebih lanjut, lihat dokumentasi Pembaruan Langsung yang lengkap. Dokumentasi Pembaruan Langsung.

Menggunakan Plugin Capacitor

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

Namun, tidak ada yang istimewa tentang plugin Bagikan pluginTapi itu tetap membuka dialog berbagi asli! Untuk hal ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai. share() fungsi dari aplikasi kami, jadi mari kita ubah pages/index.vue menjadi ini:

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

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

npx cap sync

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

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

UI yang terasa native dengan Navigasi dan Transisi Native Capgo

Saya telah bekerja selama bertahun-tahun dengan Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Quasar adalah sulit dan jarang berguna ketika Anda sudah memiliki Tailwind CSS.

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

• @capgo/capacitor-navigasi native — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Router Quasar Anda tetap menjaga status jalur; plugin ini menguasai chrome native.
• Transisi capgo/capacitor — transisi halaman Ionic dan swipe balik iOS di layer WebView, tanpa menerima UI Ionic.

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

Memasukkan halaman yang diarahkan ke dalam cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum navigasi. Jangan duplikat header atau footer web ketika navigasi asli menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi native and Menggunakan @capgo/capacitor-transisi.

Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transisi

Area yang aman dengan Tailwind @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm). Ini menyediakan safe-areas utilitas dan plugin-plugin lainnya yang bersifat Capacitor-friendly Tailwind:

npm add -D tailwind-capacitor

, dan src/css/app.scss:

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

sebaliknya dari menambahkan secara manual pt-safe, pb-safe, and px-safe alih-alih menyebarkan env(safe-area-inset-*) dengan tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Quasar Anda, Buka PR di GitHub.

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

Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow) overflow-x: hidden atau mengatur tag viewport saja biasanya tidak cukup untuk memperbaiki masalah tersebut. Jalankan periksa-periksa ini dalam urutan yang tepat.

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 beberapa kali:

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);
}

Wrap semua konten halaman di dalam .app-shellPenambahan padding area aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

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

Setel Capacitor iOS contentInset ke never pertama

Pada capacitor.config.ts, lebih baik menggunakan inset disabled asli dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengelola 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 padding CSS env(safe-area-inset-*) adalah penyebab umum dari jarak ganda.

Cari elemen yang benar-benar mengalir keluar

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

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

Memanfaatkan Tailwind, ganti w-screen dengan w-full banyak masalah overflow horizontal berasal dari 100vw / w-screentambahan padding area aman yang di duplikat, 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 CapgoMenggunakan Capacitor, Anda bahkan dapat menambahkan pembaruan live ke aplikasi Anda dengan lebih mudah, sehingga pengguna selalu memiliki akses ke fitur dan perbaikan bug terbaru.

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

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

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