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.
This tutorial akan mengajarkan Anda melalui prosesnya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk memasuki dunia aplikasi mobile native. 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 sebuah 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 mobile native yang sepenuhnya berfungsi dengan Capacitor!
Persiapan 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, kami memerlukan export proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana dalam file package.json kami yang dapat digunakan untuk membangun dan menyalin proyek Quasar: file package.json Setelah menjalankan perintah
{
"scripts": {
// ...
"build": "quasar build"
}
}, Anda harus dapat melihat folder baru di root proyek Anda. generateFolder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar. dist Menambahkan __CAPGO_KEEP_0__ ke Aplikasi Quasar Anda
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Quasar App
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sync ke dalam proyek kami.
Dengan demikian, kita dapat memulai dengan lebih mudah. Langkah awal ini termasuk menginstal Capacitor dan mengatur 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.
Kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.
Akhirnya, kita 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 dan folder di proyek Quasar Anda. Itu adalah proyek native asli! Untuk mengakses proyek Android nanti, Anda harus menginstal
Studio Android
Initialize __CAPGO_KEEP_0__ By this point, you should be able to observe new. 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. 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 pembangunan statis, sementara perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat dari platform native sehingga dapat ditampilkan dalam aplikasi.
Selain itu, perintah sinkronisasi mungkin juga memperbarui platform native dan menginstal plugin, jadi ketika Anda menginstal plugin baru Capacitor waktunya untuk menjalankan npx cap sync lagi.
Tanpa menyadari, Anda sekarang sudah selesai, jadi mari kita lihat aplikasi di perangkat!
Membangun dan Mengembangkan Aplikasi Native
Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terpasang, dan untuk aplikasi Android, Anda perlu memiliki Studio Android sudah 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. Jika Anda baru-baru ini memulai pengembangan mobile native, Anda dapat menggunakan __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ untuk dengan mudah membuka proyek native:
If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:
npx cap open ios
npx cap open androidandroid-studio-run
xcode-run
quasar-mobile-app
__CAPGO_KEEP_0__ Live Update
Capgo Live Update adalah layanan yang memungkinkan pengembang mengirimkan pembaruan ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional ke App Store. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan kecil pada aplikasi tanpa harus menunggu proses tinjauan App Store.
Android Studio sudah 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. Jika Anda baru-baru ini memulai pengembangan mobile native, Anda dapat menggunakan Capgo __CAPGO_KEEP_1__ untuk dengan mudah membuka proyek native: Setelah Anda telah mengatur proyek native, mengirimkan aplikasi ke perangkat terhubung sangat mudah. Di Studio Android, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut ini: android-studio-run 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 membantu 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 ini: xcode-run Selamat! Anda telah berhasil mengirimkan aplikasi web Quasar ke perangkat mobile. Contoh berikut ini: quasar-mobile-app Tapi tunggu dulu, ada juga 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 ke App Store. Ini dapat menjadi cara yang nyaman untuk memperbaiki bug atau membuat pembaruan kecil pada aplikasi tanpa harus menunggu proses tinjauan App Store.
Mengintegrasikan 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 proses 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.
Pasang Capgo SDK:
Dari command line, langsung ke root 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.
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 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 mobile sandbox saya Anda dapat menguji aplikasi mobile sandbox saya.
Buat saluran default:
Setelah Anda telah mengirimkan aplikasi ke Capgo, Anda perlu membuat saluran default agar aplikasi dapat menerima update dari Capgo.
npx @capgo/cli@latest channel set production -s default
Konfigurasi aplikasi untuk memvalidasi update:
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 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.
npx cap run [ios | android]Buka aplikasi, letakkan di latar belakang dan buka lagi, Anda seharusnya melihat di log bahwa aplikasi melakukan update.
Selamat! 🎉 Anda telah berhasil mengembangkan update langsung pertama Anda. Ini hanya awal dari apa yang dapat Anda lakukan dengan Update Langsung. Untuk mengetahui lebih lanjut, lihat dokumen Dokumen Update Langsung.
Menggunakan Capacitor Plugin
Mari kita lihat cara 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 Pengunggah, tetapi itu tetap membawa dialog berbagi native! share() Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, 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>Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:
npx cap syncSetelah menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!
Menambahkan Konsta UI secara Opsional
Untuk menggunakan Konsta UI di aplikasi Quasar Anda, Anda perlu memiliki tailwind dan untuk menginstal paket:
npm i konstaSelain itu, Anda perlu mengubah tailwind.config.js file:
// 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 Konsta UI.
Sekarang kita perlu mengatur komponen utama 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 Konsta UI Vue di halaman Quasar kita.
contohnya, mari kita 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 yang sederhana untuk berbagi code dan menjaga UI yang konsisten.
Dan dengan penambahan dari Capgo, 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 pekerjaan plugin native, hubungkannya dengan Direktori Plugin Capgo untuk alur kerja produk di Direktori Plugin Capgo, 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.
