Membangun Aplikasi Seluler Dengan Kapasitor Dan Vue.js

Baru-baru ini, tim Ionic mengumumkan penerus spiritual open-source untuk Apache Cordova dan Adobe PhoneGap, yang disebut Capacitor. Capacitor memungkinkan Anda membangun aplikasi dengan teknologi web modern dan menjalankannya di mana saja, dari browser web hingga perangkat seluler asli (Android dan iOS) dan bahkan platform desktop melalui Electron — platform GitHub yang populer untuk membangun aplikasi desktop lintas platform dengan Node.js dan teknologi web front-end.

Ionic — kerangka kerja seluler hybrid paling populer — saat ini berjalan di atas Cordova, tetapi di versi mendatang, Capacitor akan menjadi opsi default untuk aplikasi Ionic. Capacitor juga menyediakan lapisan kompatibilitas yang memungkinkan penggunaan plugin Cordova yang ada di proyek Capacitor.

Selain menggunakan Capacitor dalam aplikasi Ionic, Anda juga dapat menggunakannya tanpa Ionic dengan framework front-end atau library UI pilihan Anda, seperti Vue, React, Angular with Material, Bootstrap, dll.

Dalam tutorial ini, kita akan melihat cara menggunakan Capacitor dan Vue untuk membangun aplikasi seluler sederhana untuk Android. Bahkan, seperti yang disebutkan, aplikasi Anda juga dapat berjalan sebagai aplikasi web progresif (PWA) atau sebagai aplikasi desktop di sistem operasi utama hanya dengan beberapa perintah.

Kami juga akan menggunakan beberapa komponen Ionic 4 UI untuk mendesain aplikasi seluler demo kami.

Fitur Kapasitor

Kapasitor memiliki banyak fitur yang menjadikannya alternatif yang baik untuk solusi lain seperti Cordova. Mari kita lihat beberapa fitur dari Kapasitor:

• Sumber terbuka dan gratis
  Capacitor adalah proyek sumber terbuka, dilisensikan di bawah lisensi MIT yang permisif dan dikelola oleh Ionic dan komunitas.
• lintas platform
  Anda dapat menggunakan Capacitor untuk membangun aplikasi dengan satu basis kode dan untuk menargetkan beberapa platform. Anda dapat menjalankan beberapa perintah antarmuka baris perintah (CLI) lagi untuk mendukung platform lain.
• Akses asli ke platform SDK
  Kapasitor tidak menghalangi saat Anda membutuhkan akses ke SDK asli.
• Teknologi web dan browser standar
  Aplikasi yang dibuat dengan Capacitor menggunakan API web standar, sehingga aplikasi Anda juga akan lintas-browser dan akan berjalan dengan baik di semua browser modern yang mengikuti standar.
• dapat diperpanjang
  Anda dapat mengakses fitur asli dari platform yang mendasarinya dengan menambahkan plugin atau, jika Anda tidak dapat menemukan plugin yang sesuai dengan kebutuhan Anda, dengan membuat plugin khusus melalui API sederhana.

Persyaratan

Untuk menyelesaikan tutorial ini, Anda memerlukan mesin pengembangan dengan persyaratan berikut:

• Anda harus menginstal Node v8.6+ dan npm v5.6 + di mesin Anda. Cukup buka situs web resmi dan unduh versi untuk sistem operasi Anda.
• Untuk membuat aplikasi iOS, Anda memerlukan Mac dengan Xcode.
• Untuk membangun aplikasi Android, Anda harus menginstal Java 8 JDK dan Android Studio dengan Android SDK.

Membuat Proyek Vue

Di bagian ini, kita akan menginstal Vue CLI dan membuat proyek Vue baru. Kemudian, kita akan menambahkan navigasi ke aplikasi kita menggunakan router Vue. Terakhir, kita akan membangun UI sederhana menggunakan komponen Ionic 4.

Menginstal Vue CLI v3

Mari kita mulai dengan menginstal Vue CLI v3 dari npm dengan menjalankan yang berikut dari baris perintah:

 $ npm install -g @vue/cli

Anda mungkin perlu menambahkan sudo untuk menginstal paket secara global, tergantung pada konfigurasi npm Anda.

Membuat Proyek Vue Baru

Setelah menginstal Vue CLI, mari kita gunakan untuk menghasilkan proyek Vue baru dengan menjalankan yang berikut dari CLI:

 $ vue create vuecapacitordemo

Anda dapat memulai server pengembangan dengan menavigasi di dalam folder root proyek dan menjalankan perintah berikut:

 $ cd vuecapacitordemo $ npm run serve

Aplikasi front-end Anda akan berjalan dari https://localhost:8080/ .

Jika Anda mengunjungi https://localhost:8080/ di browser web Anda, Anda akan melihat halaman berikut:

Menambahkan Ionik 4

Untuk dapat menggunakan komponen Ionic 4 dalam aplikasi Anda, Anda harus menggunakan paket inti Ionic 4 dari npm.

Jadi, lanjutkan dan buka file index.html , yang berada di folder public proyek Vue Anda, dan tambahkan <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> tag di kepala file.

Ini adalah isi dari public/index.html :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecapacitordemo</title> </head> <body> <noscript> <strong>We're sorry but vuecapacitordemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div> <!-- built files will be auto injected --> <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> </body> </html>

Anda bisa mendapatkan versi terbaru dari paket inti Ionic dari npm.

Sekarang, buka src/App.vue , dan tambahkan konten berikut di dalam tag template setelah menghapus apa yang ada di sana:

 <template> <ion-app> <router-view></router-view> </ion-app> </template>

ion-app adalah komponen ionik. Itu harus menjadi komponen tingkat atas yang membungkus komponen lain.

router-view router adalah outlet router Vue. Komponen yang cocok dengan jalur akan dirender di sini oleh router Vue.

Setelah menambahkan komponen Ionic ke aplikasi Vue Anda, Anda akan mulai mendapatkan peringatan di konsol browser yang mirip dengan berikut ini:

 [Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>

Ini karena komponen Ionic 4 sebenarnya adalah komponen web, jadi Anda harus memberi tahu Vue bahwa komponen yang dimulai dengan awalan ion bukanlah komponen Vue. Anda dapat melakukannya di file src/main.js dengan menambahkan baris berikut:

 Vue.config.ignoredElements = [/^ion-/]

Peringatan itu sekarang harus dihilangkan.

Menambahkan Komponen Vue

Mari kita tambahkan dua komponen. Pertama, hapus file apa pun di folder src/components (juga, hapus impor apa pun untuk komponen HelloWorld.vue di App.vue ), dan tambahkan file Home.vue dan About.vue .

Buka src/components/Home.vue dan tambahkan template berikut:

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p> </ion-content> </ion-app> </template>

Selanjutnya, di file yang sama, tambahkan kode berikut:

 <script> export default { name: 'Home' } </script>

Sekarang, buka src/components/About.vue dan tambahkan template berikut:

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor | About </ion-title> </ion-toolbar> </ion-header> <ion-content padding> This is the About page. </ion-content> </ion-app> </template>

Juga, di file yang sama, tambahkan kode berikut:

 <script> export default { name: 'About' } </script>

Menambahkan Navigasi Dengan Vue Router

Mulailah dengan menginstal router Vue, jika belum diinstal, dengan menjalankan perintah berikut dari folder root proyek Anda:

 npm install --save vue-router

Selanjutnya, di src/main.js , tambahkan impor berikut:

 import Router from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'

Ini mengimpor router Vue dan komponen "Home" dan "About".

Tambahkan ini:

 Vue.use(Router)

Buat instance Router dengan larik rute:

 const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })

Terakhir, beri tahu Vue tentang instance Router :

 new Vue({router, render: h => h(App) }).$mount('#app')

Sekarang setelah kita mengatur perutean, mari tambahkan beberapa tombol dan metode untuk menavigasi antara dua komponen "Beranda" dan "Tentang" kita.

Buka src/components/Home.vue dan tambahkan metode goToAbout() berikut:

 ... export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

Di blok template , tambahkan tombol untuk memicu metode goToAbout() :

 <ion-button @click="goToAbout" full>Go to About</ion-button>

Sekarang kita perlu menambahkan tombol untuk kembali ke rumah ketika kita berada di komponen "Tentang".

Buka src/components/About.vue dan tambahkan metode goBackHome() :

 <script> export default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } } </script>

Dan, di blok template , tambahkan tombol untuk memicu metode goBackHome() :

 <ion-button @click="goBackHome()" full>Go Back!</ion-button>

Saat menjalankan aplikasi pada perangkat seluler atau emulator nyata, Anda akan melihat masalah penskalaan. Untuk mengatasi ini, kita hanya perlu menambahkan beberapa tag meta yang mengatur viewport dengan benar.

Di public/index.html , tambahkan kode berikut ke bagian head halaman:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no">

Menambahkan Kapasitor

Anda dapat menggunakan Kapasitor dengan dua cara:

• Buat proyek Kapasitor baru dari awal.
• Tambahkan Capacitor ke proyek front-end yang ada.

Dalam tutorial ini, kita akan mengambil pendekatan kedua, karena kita membuat proyek Vue terlebih dahulu, dan sekarang kita akan menambahkan Capacitor ke proyek Vue kita.

Mengintegrasikan Kapasitor Dengan Vue

Capacitor dirancang untuk dimasukkan ke dalam aplikasi JavaScript modern apa pun. Untuk menambahkan Capacitor ke aplikasi web Vue Anda, Anda harus mengikuti beberapa langkah.

Pertama, instal Capacitor CLI dan paket inti dari npm. Pastikan Anda berada di proyek Vue Anda, dan jalankan perintah berikut:

 $ cd vuecapacitordemo $ npm install --save @capacitor/core @capacitor/cli

Selanjutnya, inisialisasi Capacitor dengan informasi aplikasi Anda dengan menjalankan perintah berikut:

 $ npx cap init

Kami menggunakan npx untuk menjalankan perintah Capacitor. npx adalah utilitas yang disertakan dengan npm v5.2.0 dan dirancang untuk memudahkan menjalankan utilitas CLI dan executable yang dihosting di registri npm. Misalnya, ini memungkinkan pengembang untuk menggunakan executable yang diinstal secara lokal tanpa harus menggunakan skrip npm run.

Perintah init dari Capacitor CLI juga akan menambahkan platform bawaan bawaan untuk Capacitor, seperti Android dan iOS.

Anda juga akan diminta untuk memasukkan informasi tentang aplikasi Anda, seperti nama, ID aplikasi (yang akan digunakan terutama sebagai nama paket untuk aplikasi Android) dan direktori aplikasi Anda.

Setelah Anda memasukkan detail yang diperlukan, Kapasitor akan ditambahkan ke proyek Vue Anda.

Anda juga dapat memberikan detail aplikasi di baris perintah:

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

Nama aplikasinya adalah vuecapacitordemo , dan ID-nya adalah com.example.vuecapacitordemo . Nama paket harus berupa nama paket Java yang valid.

Anda akan melihat pesan yang mengatakan, "Proyek Kapasitor Anda sudah siap!"

Anda mungkin juga memperhatikan bahwa sebuah file bernama capacitor.config.json telah ditambahkan ke folder root dari proyek Vue Anda.

Seperti yang disarankan CLI ketika kita telah menginisialisasi Capacitor di proyek Vue kita, sekarang kita dapat menambahkan platform asli yang ingin kita targetkan. Ini akan mengubah aplikasi web kita menjadi aplikasi asli untuk setiap platform yang kita tambahkan.

Tetapi sebelum menambahkan platform, kita perlu memberi tahu Capacitor di mana mencari file yang dibangun — yaitu, folder dist dari proyek Vue kita. Folder ini akan dibuat ketika Anda menjalankan perintah build dari aplikasi Vue untuk pertama kalinya ( npm run build ), dan folder ini terletak di folder root dari proyek Vue kami.

Kita dapat melakukannya dengan mengubah webDir di capacitor.config.json , yang merupakan file konfigurasi untuk Capacitor. Jadi, cukup ganti www dengan dist . Berikut adalah isi dari capacitor.config.json :

 { "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist" }

Sekarang, mari buat folder dist dan bangun proyek Vue kita dengan menjalankan perintah berikut:

 $ npm run build

Setelah itu, kita dapat menambahkan platform Android menggunakan yang berikut ini:

 npx cap add android

Jika Anda melihat di proyek Anda, Anda akan menemukan bahwa proyek asli android telah ditambahkan.

Itu saja yang kita butuhkan untuk mengintegrasikan Capacitor dan menargetkan Android. Jika Anda ingin menargetkan iOS atau Electron, jalankan npx cap add ios atau npx cap add electron .

Menggunakan Plugin Kapasitor

Capacitor menyediakan runtime yang memungkinkan pengembang menggunakan tiga pilar web — HTML, CSS, dan JavaScript — untuk membangun aplikasi yang berjalan secara native di web dan pada platform desktop dan seluler utama. Tetapi juga menyediakan satu set plugin untuk mengakses fitur asli perangkat, seperti kamera, tanpa harus menggunakan kode tingkat rendah khusus untuk setiap platform; plugin melakukannya untuk Anda dan menyediakan API tingkat tinggi yang dinormalisasi, dalam hal ini.

Capacitor juga menyediakan API yang dapat Anda gunakan untuk membuat plugin khusus untuk fitur asli yang tidak tercakup oleh kumpulan plugin resmi yang disediakan oleh tim Ionic. Anda dapat mempelajari cara membuat plugin di dokumen.

Anda juga dapat menemukan detail selengkapnya tentang API dan plugin inti yang tersedia di dokumen.

Contoh: Menambahkan Plugin Kapasitor

Mari kita lihat contoh penggunaan plugin Capacitor di aplikasi kita.

Kami akan menggunakan plugin “Modals”, yang digunakan untuk menampilkan jendela modal asli untuk peringatan, konfirmasi dan petunjuk input, serta lembar tindakan.

Buka src/components/Home.vue , dan tambahkan impor berikut di awal blok script :

 import { Plugins } from '@capacitor/core';

Kode ini mengimpor kelas Plugins dari @capacitor/core .

Selanjutnya, tambahkan metode berikut untuk menampilkan kotak dialog:

 … methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

Terakhir, tambahkan tombol di blok template untuk memicu metode ini:

 <ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>

Berikut adalah screenshot dari kotak dialog:

Anda dapat menemukan detail lebih lanjut di dokumen.

Membangun Aplikasi untuk Platform Target

Untuk membangun proyek Anda dan menghasilkan biner asli untuk platform target Anda, Anda harus mengikuti beberapa langkah. Mari kita lihat mereka secara singkat:

1. Buat build produksi aplikasi Vue Anda.
2. Salin semua aset web ke proyek asli (Android, dalam contoh kami) yang dihasilkan oleh Capacitor.
3. Buka proyek Android Anda di Android Studio (atau Xcode untuk iOS), dan gunakan lingkungan pengembangan terintegrasi asli (IDE) untuk membangun dan menjalankan aplikasi Anda di perangkat nyata (jika terpasang) atau emulator.

Jadi, jalankan perintah berikut untuk membuat build produksi:

 $ npm run build

Selanjutnya, gunakan perintah copy CLI Capacitor untuk menyalin aset web ke proyek asli:

 $ npx cap copy

Terakhir, Anda dapat membuka proyek asli Anda (Android, dalam kasus kami) di IDE asli (Android Studio, dalam kasus kami) menggunakan perintah open dari Capacitor CLI:

 $ npx cap open android

Android Studio akan dibuka dengan proyek Anda, atau folder yang berisi file proyek asli akan dibuka.

Jika itu tidak membuka Android Studio, maka cukup buka IDE Anda secara manual, buka “File” → “Open…”, lalu navigasikan ke proyek Anda dan buka folder android dari dalam IDE.

Anda sekarang dapat menggunakan Android Studio untuk meluncurkan aplikasi Anda menggunakan emulator atau perangkat nyata.

Kesimpulan

Dalam tutorial ini, kami telah menggunakan Ionic Capacitor dengan komponen web Vue dan Ionic 4 untuk membuat aplikasi Android seluler dengan teknologi web. Anda dapat menemukan kode sumber aplikasi demo yang telah kami buat sepanjang tutorial ini di repositori GitHub.