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

Mengpersiapkan Aplikasi Vue

Pertama, buatlah aplikasi Vue baru dengan menjalankan perintah berikut:

vue create my-app
cd my-app
npm install

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

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

Setelah menjalankan perintah tersebut, Anda harus melihat folder baru di direktori root proyek Anda. Folder ini akan digunakan oleh Capgo nanti. build Mengintegrasikan Capgo ke Aplikasi Vue Anda dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

Instal paket inti dan paket relevan untuk platform iOS dan Android.

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.
Sekarang Anda harus melihat folder baru untuk iOS
Capacitor

# 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

__CAPGO_KEEP_1__ __CAPGO_KEEP_0__ dan android folder-folder di proyek Vue Anda.

Perbarui file capacitor.config.json untuk menunjuk direktori web ke hasil perintah build Anda: Sekarang, Anda dapat membangun proyek Vue Anda dan sinkronkan dengan __CAPGO_KEEP_0__: Buat dan Rilis Aplikasi Native

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

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

Gunakan __CAPGO_KEEP_0 CAPGO_KEEP_1__ untuk membuka proyek native keduanya:

Buat dan Rilis Aplikasi Native

Use the Capacitor CLI to open both native projects:

npx cap open ios
npx cap open android

Deploy your app to a connected device using 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 IP dan port yang benar: capacitor.config.ts Aplikasikan 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

Instal 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

Setelah menginstal plugin baru, jalankan share() __CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__ sync command dan redeploy aplikasi ke perangkat Anda:

npx cap sync

Menggunakan Konsta UI

Untuk menggunakan Konsta UI di aplikasi Vue Anda, Anda memerlukan tailwind sudah terinstall dan untuk menginstall paket: Untuk menggunakan Konsta UI di aplikasi Vue Anda, instal paket dan modifikasi file Anda. tailwind.config.js file:

npm i konsta

Bungkus aplikasi Anda dengan komponen App dalam file pages/_app.vue file, dan gunakan komponen Konsta UI Vue di halaman Vue Anda.

Kesimpulan

Capacitor adalah pilihan yang bagus untuk membuat aplikasi native berdasarkan proyek web yang sudah ada. Dengan penambahan Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup 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 untuk akun gratis Hari ini.

Teruskan dari Membangun Aplikasi Mobile dengan Vue dan Capacitor

Jika Anda menggunakan Membangun Aplikasi Mobile dengan Vue dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan native di Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.

Membangun Aplikasi Mobile dengan Vue dan Capacitor