Dalam tutorial ini, kami akan memulai dengan membuat aplikasi web baru menggunakan Quasar. Kemudian, 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 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 mengajak 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 To mengirimkan pembaruan live ke aplikasi Anda dalam beberapa detik.
About Capacitor
CapacitorJS benar-benar merupakan perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke dalam proyek web apa pun, dan itu akan mengemas 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. Slim API dan fungsi yang terstruktur membuatnya mudah untuk diintegrasikan ke dalam proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi native yang sepenuhnya berfungsi dengan 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 menciptakan aplikasi mobile native, kami memerlukan ekspor proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam package.json Bahasa yang dapat digunakan untuk membangun dan menyalin proyek Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Setelah menjalankan perintah generateAnda seharusnya dapat melihat folder baru di root proyek. dist Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi Quasar Anda
Adding Capacitor to Your Quasar App
Pertama-tama, kita dapat menginstal sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__
sebagai dependensi pengembangan, dan kemudian mengaturnya dalam proyek. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket. Capacitor CLI __CAPGO_KEEP_0__ __CAPGO_KEEP_1__
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__
Akhirnya, kita bisa menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root project kita:
# 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 di project Quasar Anda.
Itu adalah proyek native asli!
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 file 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 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 syncPerintah pertama npm run generate hanya akan membangun proyek Quasar Anda dan menyalin build statis, sedangkan 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 juga memperbarui platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru __CAPGO_KEEP_0__ Capacitor plugins lagi. npx cap sync Tidak menyadari, Anda sekarang 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 perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android. Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan Android Studio terinstal.
Jika Anda baru memulai pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek mobile native:
npx cap open ios
npx cap open androidSetelah Anda telah mengatur proyek mobile native, mengirimkan aplikasi ke perangkat yang terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Contoh berikut ini:
Di 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 terdaftar dalam 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 ini:
Selamat! Anda telah berhasil mengirimkan aplikasi web Quasar ke perangkat mobile. Contoh berikut ini:
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 App Store yang tradisional. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan 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 membantu 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.
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.
Login 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 addPerintah ini akan menggunakan semua variabel yang didefinisikan 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 masuk Capgo jika build ada.
Anda bahkan bisa menguji dengan aplikasi sandbox mobile saya Anda bisa menguji dengan aplikasi sandbox mobile saya.
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()Lalu 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 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 mengirimkan pembaruan langsung pertama Anda. Ini hanya awal dari apa yang dapat Anda lakukan dengan Pembaruan Langsung. Untuk mempelajari lebih lanjut, lihat dokumen Pembaruan Langsung.
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/shareTidak ada yang istimewa tentang plugin Share plugin, tetapi itu tetap 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 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>Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!
npx cap syncMenggunakan Konsta UI secara Opsional
Untuk menggunakan Konsta UI di aplikasi Quasar Anda, Anda perlu memiliki
tailwind sudah terinstal install dan untuk menginstal paket:
npm i konstaSelain itu, Anda perlu mengubah file: tailwind.config.js konfigurasi:
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./pages/**/*.{vue}',
'./components/**/*.{vue}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig Akan memperluas konfigurasi CSS Tailwind default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas bantuan yang diperlukan untuk UI Konsta.
Sekarang kita perlu mengatur komponen utama App untuk dapat menetapkan beberapa parameter global (seperti theme).
Kita perlu mengelilingi aplikasi seluruhnya dengan App dalam pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>Halaman Contoh
Sekarang ketika semua sudah diatur, kita dapat menggunakan komponen UI Konsta Vue di halaman Quasar kita.
Misalnya, buka pages/index.vue dan ubahlah menjadi:
<template>
<Page>
<Navbar title="My App" />
<Block strong>
<p>
Here is your Quasar & Konsta UI app. Let's see what we have here.
</p>
</Block>
<BlockTitle>Navigation</BlockTitle>
<List>
<ListItem href="/about/" title="About" />
<ListItem href="/form/" title="Form" />
</List>
<Block strong class="flex space-x-4">
<Button>Button 1</Button>
<Button>Button 2</Button>
</Block>
</Page>
</template>
<script setup>
import {
Page,
Navbar,
Block,
Button,
List,
ListItem,
Link,
BlockTitle,
} from 'konsta/vue';
</script>Jika reload hidup tidak sinkron setelah menginstal semua komponen yang diperlukan, coba restart semuanya. Setelah itu, Anda seharusnya melihat sebuah aplikasi seluler dengan tampilan yang agak native, dibangun dengan Quasar dan Capacitor!
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 Capgo, itu bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.
Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi Next.js Anda, lihatlah artikel berikutnya :
Teruslah dari Membuat Aplikasi Seluler dengan pembaruan hidup, Quasar dan Capacitor.
Jika Anda menggunakan Membuat Aplikasi Seluler dengan pembaruan hidup, Quasar dan Capacitor. untuk merencanakan kerja 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 Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.
