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 ranah 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 dalam 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 diperbaruhinya membuatnya mudah untuk diintegrasikan ke dalam 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 menciptakan aplikasi mobile native, kami 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 seharusnya dapat melihat folder baru di root proyekmu. dist Folder ini akan digunakan oleh kemudian, 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 __CAPGO_KEEP_1__

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

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 pendek 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 harus menginstal Xcode.

Selain itu, Anda harus menemukan file capacitor.config.ts 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. 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 maka saatnya untuk menjalankan npx cap sync 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 terpasang, dan untuk aplikasi Android, Anda perlu memiliki Studio Android Dipasang. 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 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 Anda ke perangkat terhubung sangat mudah. Di Studio Android, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi Anda ke perangkat 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 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 Anda 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 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 pembaruan waktu nyata secara langsung. Panduan langkah demi langkah ini akan membimbing 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.

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 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 Jika Anda ingin mengirimkan aplikasi Anda ke __CAPGO_KEEP_0__.

Ubah saluran default:

Setelah Anda telah mengirimkan aplikasi ke Capgo, Anda perlu mengubah saluran 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()

Lakukan npm run build && npx cap copy untuk memperbarui aplikasi Anda.

Menerima 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 harus 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 Dokumentasi Pembaruan Langsung.

Menggunakan 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

Namun, tidak ada yang istimewa tentang plugin Share plugin, tetapi plugin ini tetap saja menampilkan dialog berbagi native! share() Untuk melakukan ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai 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 overflown horizontal atau area aman yang dipotong.

Antarmuka yang terasa lebih native dengan Navigasi dan Transisi Native Capgo

Saya telah bekerja selama bertahun-tahun dengan Untuk membangun aplikasi multi-platform, tetapi mengintegrasikannya dengan Quasar adalah sulit dan jarang berguna ketika Anda sudah memiliki Untuk merasa aplikasi Quasar + Capgo Anda seperti aplikasi mobile asli, gunakan plugin-plugin Capgo alih-alih kit UI web seperti Konsta UI: @Capgo/Capacitor-native-navigation.

For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation — transisi halaman seperti Ionic dan swipe-back di lapisan WebView iOS, tanpa mengadopsi UI Ionic.
• @capgo/capacitor-transitions Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:

Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki sistem; Android menggunakan latar belakang WebView yang di blur):

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

Tambahkan transisi halaman native di shell aplikasi Anda:

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

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

Install kedua plugin ini:

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

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

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

Penggunaan halaman yang diarahkan harus dilapisi dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') context

Sebelum berpindah. Jangan duplikasi kepala atau footer web ketika navigasi asli menguasai permukaan tersebut. Using @capgo/capacitor-native-navigation Penggunaan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.

Penggunaan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transisi

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

npm add -D tailwind-capacitor

In src/css/app.scss:

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

Pakai utilitas seperti pt-safe, pb-safe, dan px-safe daripada menambahkannya secara manual. Projek ini aktif dikembangkan — jika ada yang hilang untuk pengaturan Quasar Anda, env(safe-area-inset-*) buka PR di __CAPGO_KEEP_0__ open a PR on GitHub.

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak

atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan. overflow-x: hidden Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow)

Pastikan tag meta viewport sudah 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" />

Atasi area aman iOS dari satu wrapper root saja

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

Bungkuslah semua konten halaman di .app-shellPengaplikasian 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 mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Atur 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') mengendalikan 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 jarak ganda.

Cari elemen yang sebenarnya mengalami overflows

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

Inspektor Web Safari, 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,
  }));

Apa itu Tailwind, ganti dengan 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 mempertahankan UI yang konsisten.

Dan dengan penambahan Capgocontext

Jika Anda ingin mempelajari cara 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, Ganti Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Ganti Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Native.