Membuat Aplikasi Mobile dengan pembaruan langsung, Quasar dan Capacitor.

Dalam tutorial ini, kami akan memulai dengan membuat aplikasi web baru menggunakan Quasar. Kemudian, kami akan belajar bagaimana 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 memandu Anda melalui prosesnya, mulai dari aplikasi Quasar baru dan kemudian mengintegrasikan Capacitor untuk beralih ke dunia aplikasi mobile asli. Selain itu, Anda juga akan menggunakan Capgo untuk mengirimkan pembaruan live 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 ia akan menggabungkan aplikasi Anda ke dalam tampilan native, menghasilkan proyek Xcode dan Android Studio asli 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 diperbarui membuatnya mudah untuk diintegrasi ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile native yang sepenuhnya berfungsi dengan Capacitor!

Mempersiapkan 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 ekspor dari proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam file package.json yang dapat digunakan untuk membangun dan menyalin proyek Quasar: Setelah menjalankan perintah

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

, Anda seharusnya dapat melihat proyek baru yang segar generate]} dist folder di root proyek Anda.

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

Menambahkan Capacitor ke Aplikasi Quasar Anda

Untuk mengemas aplikasi web menjadi kontainer mobile native, kita harus mengikuti beberapa langkah awal, tetapi setelah itu, cukup sederhana seperti menjalankan perintah tunggal. sync Pertama-tama, kita dapat menginstal

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Kemudian, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Terakhir, kita dapat menambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek kita:

Mulai Capacitor

# 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

By this point, you should be able to observe new iOS dan Android folder-folder di proyek Quasar Anda.

Itu adalah proyek asli native!

Untuk mengakses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda membutuhkan Mac dan harus menginstal 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 direktori web, yang harus mengarah ke hasil perintah pembangunan Anda. Saat ini, itu tidak akurat.

Untuk memperbaiki hal ini, buka capacitor.config.json file dan perbarui direktori web:

{
  "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 hanya akan membangun proyek Quasar Anda dan menyalin pembangunan statis, sedangkan perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat di platform-platform native sehingga dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin juga memperbarui platform-platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin __CAPGO_KEEP_0__ baru mungkin akan memperbarui platform-platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin Capacitor baru Sekarang saatnya menjalankan kembali npx cap sync lagi.

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 terpasang, dan untuk aplikasi Android, Anda memerlukan Android Studio terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda memerlukan pendaftaran di Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

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 android

__CAPGO_KEEP_0__

In 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 proses tersebut (tetapi lagi, Anda perlu terdaftar dalam Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi pada 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 untuk mengirimkan pembaruan ke aplikasi mobile mereka tanpa harus melalui proses pengiriman tradisional App Store. 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 kekuatan untuk menguasai kekuatan pembaruan waktu nyata. Panduan langkah demi langkah ini akan membawa 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! Mulailah dengan mendaftar untuk akun Capgo.

Instal Capgo SDK:

Dari baris perintah, langsung ke akar 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.

Masuk ke Capgo CLOUD:

Pertama, gunakan all apikey yang ada 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

Perintah ini akan menggunakan semua variabel yang telah ditentukan di file konfigurasi Capacitor untuk membuat aplikasi.

Unggah versi pertama Anda:

Jalankan perintah untuk membangun code Anda 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 di Capgo jika pembangunan ada.

Anda bahkan bisa menguji dengan aplikasi sandbox ponsel saya Buat channel default.

Setelah Anda telah mengirimkan aplikasi Anda ke __CAPGO_KEEP_0__, Anda perlu membuat channel default untuk memungkinkan aplikasi menerima pembaruan dari __CAPGO_KEEP_1__.:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.

npx @capgo/cli@latest channel set production -s default

Tambahkan konfigurasi ini ke file JavaScript utama Anda.:

Lalu lakukan

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Konfigurasi ini harus ada sebelum Anda melakukan npm run build && npx cap copy Untuk memperbarui aplikasi Anda.

Menerima Pembaruan Langsung:

Untuk menerima pembaruan langsung dari Deploy, aplikasi Anda harus dijalankan 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 bisa Anda lakukan dengan Pembaruan Langsung. Untuk mengetahui lebih lanjut, lihat dokumentasi Pembaruan Langsung yang lengkap. Dokumentasi Pembaruan Langsung.

Menggunakan Plugin Capacitor

Marilah 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/share

Tidak ada yang istimewa tentang plugin ini, Tetapi plugin ini 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() __CAPGO_KEEP_0__ halaman utama.vue ke halaman 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 meng-redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

npx cap sync

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

Menggunakan Konsta UI secara opsional

Untuk menggunakan Konsta UI di aplikasi Quasar Anda, Anda perlu memiliki tailwind sudah terinstal dan untuk menginstal paket:

npm i konsta

Selain 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 utama Aplikasi komponen sehingga kita 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 terinstal, kita dapat menggunakan komponen UI Konsta Vue di halaman Quasar kita.

Misalnya, buka pages/index.vue dan ubahnya 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 CapgoBahkan lebih mudah lagi untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.

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