Membangun Aplikasi Seluler dengan Vue dan Capacitor

Pada tutorial ini, kami akan mengajak Anda melalui proses mengonversi aplikasi web Vue menjadi aplikasi mobile native menggunakan Capacitor. Jika diinginkan, Anda juga dapat meningkatkan antarmuka pengguna mobile Anda dengan Konsta UI, sebuah perpustakaan UI mobile berbasis Tailwind CSS.

Tentang Capacitor

Capacitor adalah alat yang mengubah segalanya, 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.

Mengatur Aplikasi Vue Anda

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 mengekspor proyek Anda. Tambahkan skrip di dalam file package.json untuk membangun dan menyalin proyek Vue:

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

Setelah menjalankan perintah di atas, Anda dapat melanjutkan ke langkah berikutnya. build anda menjalankan perintah, Anda harus melihat folder baru di direktori root projek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ kemudian. dist Menambahkan Capacitor ke Aplikasi Vue Anda

Adding Capacitor to Your Vue App

Pasang __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sebagai dependensi pengembangan dan atur dalam projek Anda. Terima nilai default untuk nama dan ID aplikasi 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 projek Anda:
Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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

iOS dan android di projek Vue Anda. iOS adalah sistem operasi mobile yang dikembangkan oleh Apple. Sistem operasi ini digunakan pada perangkat mobile seperti iPhone dan iPad. Android adalah sistem operasi mobile yang dikembangkan oleh Google. Sistem operasi ini digunakan pada perangkat mobile seperti smartphone dan tablet.

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 dan sinkronkan dengan Capacitor:

npm run build
npx cap sync

Membangun dan Mengirimkan 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 Google Play Console 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

Kirimkan aplikasi Anda ke perangkat yang terhubung menggunakan Android Studio atau Xcode.

Capacitor Live Reload

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

Cari alamat IP lokal Anda dan update file dengan IP dan port yang benar: capacitor.config.ts Update file dengan IP dan port yang benar:

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;

Terapkan perubahan ini dengan menyalinnya ke proyek asli Anda:

npx cap copy

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

Menggunakan Capacitor Plugin

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

npm i @capacitor/share

Impor paket dan panggil fungsi di aplikasi Anda: share() Setelah memasang plugin baru, jalankan perintah ini dan redeploy aplikasi ke perangkat 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>

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

npx cap sync

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

Untuk menggunakan Konsta UI di aplikasi Vue Anda, Anda perlu memiliki __CAPGO_KEEP_0__ tailwind sudah terinstal dan untuk menginstal paket: Untuk menggunakan Konsta UI di aplikasi Vue Anda, instal paket dan modifikasi tailwind.config.js file:

npm i konsta

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

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

Capacitor is a great option for building native applications based on an existing web project. With the addition of Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

Learn how Capgo can help you build better apps faster, hari ini. Ditulis oleh

Membangun Aplikasi Mobile dengan Vue dan Capacitor