Membangun Aplikasi Seluler dengan Vue dan Capacitor

Dalam tutorial ini, kami akan memandu Anda melalui proses mengonversi aplikasi web Vue menjadi aplikasi mobile native menggunakan Capacitor. Secara opsional, Anda juga dapat meningkatkan UI mobile Anda dengan Konsta UI, sebuah library UI mobile berbasis Tailwind CSS.

Tentang Capacitor

Capacitor adalah alat yang mengubah permainan yang memungkinkan Anda untuk dengan mudah mengintegrasikan Capacitor ke dalam proyek web apa pun dan mengonversi aplikasi Anda menjadi aplikasi mobile native. Alat ini menghasilkan proyek Xcode dan Android Studio native untuk Anda dan memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.

Mempersiapkan Aplikasi Vue

Pertama, buatlah sebuah aplikasi Vue baru dengan menjalankan perintah berikut:

vue create my-app
cd my-app
npm install

Untuk mempersiapkan aplikasi Vue Anda untuk pengembangan mobile native, Anda akan perlu mengexport proyek Anda. Tambahkan skrip di dalam file package.json untuk membangun dan menyalin proyek Vue:

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

Setelah menjalankan build perintah, Anda seharusnya melihat sebuah folder baru di direktori root proyek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ kemudian. dist Mengambahkan Capacitor ke Aplikasi Vue Anda

Adding Capacitor to Your Vue App

Pasang __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sebagai dependensi pengembangan dan atur dalam proyek Anda. Terima nilai default untuk nama dan ID paket selama pengaturan.

Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
Tambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek Anda:
Mengambahkan Capacitor ke Aplikasi Vue Anda

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue 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

Sekarang Anda harus melihat folder baru iOS dan android dalam proyek Vue Anda.

Perbarui file capacitor.config.json untuk mengarahkan webDir ke hasil perintah build Anda:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Sekarang, Anda dapat membangun proyek Vue Anda dan sinkronkan dengan Capacitor:

npm run build
npx cap sync

Buat dan Deploy Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan Android Studio terinstal. Selain itu, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Console Google Play untuk Android untuk mendistribusikan aplikasi Anda di toko aplikasi.

Gunakan Capacitor CLI untuk membuka proyek native baik:

npx cap open ios
npx cap open android

Deploy aplikasi Anda ke perangkat terhubung menggunakan Android Studio atau Xcode.

Capacitor Live Reload

Aktifkan ulang hidup pada perangkat mobile Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu di jaringan Anda.

Temukan alamat IP lokal Anda dan update file dengan alamat IP dan port yang benar: capacitor.config.ts Terapkan perubahan-perubahan ini dengan menyalinnya ke proyek native Anda:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Sekarang, aplikasi Anda akan secara otomatis reload dan menampilkan perubahan ketika Anda memperbarui aplikasi Vue Anda.

npx cap copy

Menggunakan __CAPGO_KEEP_0__ Plugins

Pasang plugin Capacitor seperti plugin Share, dan gunakan di aplikasi Vue Anda:

Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:

npm i @capacitor/share

Import the package and call the share() fungsi di aplikasi Anda:

<template>
  <div>
    <h1>Welcome to Vue 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 menginstal plugin baru, jalankan perintah ini dan redeploy aplikasi ke perangkat Anda: sync Menggunakan Konsta UI

npx cap sync

Untuk menggunakan Konsta UI di aplikasi Vue Anda, Anda perlu memiliki

__CAPGO_KEEP_0__ dan untuk menginstal paket: Untuk menggunakan Konsta UI di aplikasi Vue Anda, instal paket dan modifikasi file: Bungkus aplikasi Anda dengan komponen tailwind.config.js dalam file

npm i konsta

dan gunakan komponen Konsta UI Vue di halaman Vue Anda. App Kesimpulan pages/_app.vue Menggunakan Konsta UI di aplikasi Vue Anda, Anda perlu memiliki Tailwind sudah terinstal dan untuk menginstal paket:

Bungkus aplikasi Anda dengan komponen <KonstaUIApp> di dalam file main.ts, dan gunakan komponen Konsta UI Vue di halaman Vue Anda.

Capacitor adalah pilihan yang bagus untuk membuat aplikasi native berdasarkan proyek web yang sudah ada. Dengan penambahan Capgo, bahkan lebih mudah untuk menambahkan pembaruan live ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug yang terbaru.

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, Daftar diri untuk akun gratis hari ini.

Membangun Aplikasi Mobile dengan Vue dan Capacitor