Plugin integration

A.   Konsep plugins vuejs

konsep dari plugins vuejs yaitu menambah kefungsionalan level-global ke dalam vuejs dan plugin dalam vuejs memiliki beberapa tipe plugin seperti :

1.   Menambahkan beberapa metode global atau property. Seperti contoh vue-custom-element / component .

2.   Menambahkan satu atau lebih asset global seperti : direktif/filter/transisi dan lain lain. Seperti contoh vue-touch.

3.    Menambahkan beberapa opsi komponen oleh mixin global. Seperti contoh vue-router.

4.   Menambahkan beberapa metode instance vue dengan melampirkannya ke dalam Vue.prototype.

5.   Pustaka yang menyediakan API dari dirinya sendiri, dalam waktu yang sama menginjeksi beberapa kombinasi di atas.

Dan keuntungan menggunakan plugins pada vuejs adalah sebagai berikut:

1.   Mempermudah developer saat mengembangkan suatu project.

2.   Dapat meningkatkan fungsionalitas, keamanan, DLL.

B. Instalasi vuejs dan instalasi plugins pada vuejs

Berikut instalasi vuejs : 

1.   Download dan install node.js versi LTS (terbaru).

Node.js merupakan sebuah runtime environment yang bersifat open source dan juga cross-platform di mana kita bisa mengeksekusi javascript di luar environment browser. Node.js berjalan pada V8 engine yaitu sebuah javascript engine yang memungkinkan kita untuk mengeksekusi code javascript di dalam nya, kelebihan node.js adalah :

a.      Bersifat Non-blocking

non-blocking maksudnya adalah sebuah baris code tidak akan melakukan blocking terhadap baris code setelahnya. Artinya, sebuah kode dapat dijalankan meskipun proses proses pada exekusi sebelumnya belum selesai sehingga memungkinkan code untuk berjalan secara asynchronous.

b.     Fast Execution

Kode Javascript yang dieksekusi terbilang mempunyai performa yang bagus dan cepat. Hal ini dimungkinkan karena kode Javascript pada Node.js dijalankan menggunakan V8 engine yang ditulis menggunakan bahasa C++.

c.      Single Threaded

Node.js memiliki karakteristik single threaded. Artinya, Node.js berjalan pada satu proses pada waktu yang sama. Node.js hanya menggunakan satu thread saja pada prosesor. Oleh karena itu, program yang dibuat dengan Node.js bisa dibilang ringan.

2.   Pilih directory menggunakan command cd (nama directory) kemudian install vuejs dengan command npm init vue@latest ikuti konfigurasi di bawah .

 

Jika sudah selesai, lanjutkan dengan mengikuti command berwarna hijau. Command cd vue-tutorial berfungsi untuk masuk ke directory yg anda tuju (Linux) lalu command npm install untuk menginstall Node Package Manager dan npm run dev untuk menjalankan program vue js yang telah kalian install, dan kenapa kita menggunakan pinia state management nanti akan kita bahas di materi selanjut nya.

 

berikutnya adalah bagaimana cara menginstall dan mengimport sebuah plugins pada vuejs yang sudah kalian buat sebelumnya,sebenarnya ada banyak plugins yg dapat di gunakan di vue.js, sperti :

 

1. Vuetify

Vuetify adalah vue UI library yang menggunakan model material desain, vuetify juga memberikan berbagai komponen yang bisa kalian gunakan untuk membangun website kalian lebih interaktif.

2. Vue-chartjs

Vue-chartjs adalah pembungkus untuk chartjs di vue. Vue-chartjs memungkinkan anda menggunakan chart.js tanpa banyak kerumitan dalam vue.

 

3. Vue grid layout

Vue grid layout adalah system grid layout , seperti gridster, untuk vuejs.

 

4. Vue draggable

Vue draggable adalah Komponen Vue (Vue.js 2.0) atau direktif (Vue.js 1.0) memungkinkan pengguna untuk drag-and-drop dan sinkronisasi dengan view model array.

5. Instalasi Axios

Axios merupakan sebuah library pada JavaScript yang dapat melakukan permintaan HTTP dari browser atau dari sisi server menggunakan Node.js. Library ini menyediakan antarmuka yang sederhana dan konsisten untuk melakukan permintaan HTTP seperti GET, POST, PUT, DELETE, dan lain sebagainya. Berikut merupakan cara instalasi axios:

1.   Kalian masuk ke directory vuejs yg telah kalian buat sebelumnya, kemudian ketikan command di terminal kalian npm install axios.

2.   Untuk melihat apakah axios sudah terinstall, kalian bisa check di file package-lock.json di bagian dependencies.

 

3.   Selanjutnya, kalian pergi ke file app.vue kalian import axios yang telah kalian instal dengan mengetikkan script import axios from axios

 

 

 

 

 

 

 

 

NB: code setelah export default yang ada block putih tidak usah ditulis.

Di kasus ini kita memiliki Sebuah URL dan dari URL tersebut akan kita ambil datanya untuk ditampilkan ke dalam web yg telah kita buat menggunakan axios.

Dan code di atas kita gunakan untuk menampilkan data dari URL di atas, di sini kita menggunakan v-for untuk melooping data-data dari URL tersebut.

Selanjutnya kita akan membahas tentang instance axios, jadi pada intinya instance axios adalah sebuah objek yang dibuat dari kelas axios yang dilakukan untuk permintaan kepada HTTP dengan konfigurasi khusus. Dengan membuat instance axios anda dapat mengatur pengaturan default seperti base URL, header, timeout dan lain nya untuk semua permintaan yang dilalui melalui instance tersebut. dengan instance axios ini dapat menghilangkan kebutuhan untuk mengulangi base URL dalam setiap permintaan atau bisa disebut dengan (reusable) dan kita akan praktek membuat axios instance. Jadi, kita disini akan membuat instance axios untuk setting base URL.

1.      Buatlah file baru dengan nama `axios.js` di direktori `src/plugins`. File tersebut akan digunakan untuk konfigurasi dan pembuatan instance Axios seperti contoh di bawah

 

2.      Buatlah file baru dengan nama `axios-plugin.js` di direktori `src/plugins`. File tersebut akan digunakan untuk mendaftarkan Axios sebagai plugin Vue seperti contoh di bawah

3.      Buka file `main.js` di direktori utama proyek Vue.js kalian masing-masing, kemudian tambahkan kode di bawah untuk mendaftarkan plugin Axios yang telah dibuat sebelumnya

4.      Buka file `App.vue` di direktori utama proyek Vue.js kalian masing-masing, kemudian implementasikan penggunaan Axios pada langkah-langkah sebelumnya dalam komponen Vue seperti contoh di bawah

 

Dengan mengikuti langkah-langkah di atas, kalian telah membuat instance Axios dengan pengaturan base URL pada Vue.js. Kalian dapat menggunakan instance tersebut untuk melakukan permintaan HTTP ke server sesuai dengan kebutuhan proyek kalian masing-masing.

 

 

Task : praktek mengambil dan menampilkan data pada web dengan menggunakan axios

URL : https://ibnux.github.io/BMKG-importer/

untuk URL terserah kalian

 

 

 

 

 

Quiz

1. Apa yang dimaksud dengan plugin dalam konteks Vue.js?
1. Sekumpulan komponen yang telah dibuat oleh komunitas pengembang
2. Sekumpulan fungsi dan perpustakaan eksternal yang dapat digunakan dalam aplikasi Vue.js
3. Sekumpulan template yang dapat digunakan untuk mempercepat pengembangan aplikasi Vue.js
4. Sekumpulan konfigurasi khusus yang mengatur behavior dasar aplikasi Vue.js
2. Bagaimana cara menginstal plugin pada aplikasi Vue.js menggunakan npm?
1. Mengunduh plugin secara manual dan menambahkannya ke proyek Vue.js
2. Menambahkan kode script yang memuat plugin pada file index.html
3. Menjalankan perintah npm install plugin-name pada terminal proyek Vue.js
4. Menambahkan konfigurasi plugin pada file vue.config.js
3. Apa yang dimaksud dengan Vuetify dalam konteks Vue.js?
1. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Axios
2. Plugin yang menyediakan komponen-komponen UI yang siap pakai untuk Vue.js
3. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Chart.js
4. Plugin yang menyediakan fitur layout grid yang fleksibel untuk Vue.js
4. Bagaimana cara menginstal Vuetify pada aplikasi Vue.js?
1. Menjalankan perintah npm install vuetify pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Vuetify pada file index.html
3. Menambahkan konfigurasi Vuetify pada file vue.config.js
4. Mengunduh file Vuetify secara manual dan menambahkannya ke proyek Vue.js
5. Apa yang dimaksud dengan Vue-Chartjs dalam konteks Vue.js?
1. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Axios
2. Plugin yang menyediakan komponen-komponen UI yang siap pakai untuk Vue.js
3. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Chart.js
4. Plugin yang menyediakan fitur layout grid yang fleksibel untuk Vue.js
6. Bagaimana cara menginstal Vue-Chartjs pada aplikasi Vue.js?
1. Menjalankan perintah npm install vue-chartjs chart.js pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Vue-Chartjs pada file index.html
3. Menambahkan konfigurasi Vue-Chartjs pada file vue.config.js
4. Mengunduh file Vue-Chartjs secara manual dan menambahkannya ke proyek Vue.js
7. Apa yang dimaksud dengan Vue Grid Layout dalam konteks Vue.js?
1. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Axios
2. Plugin yang menyediakan komponen-komponen UI yang siap pakai untuk Vue.js
3. Plugin yang digunakan untuk mengatur tata letak grid pada aplikasi Vue.js
4. Plugin yang menyediakan fitur drag-and-drop untuk Vue.js
8. Bagaimana cara menginstal Vue Grid Layout pada aplikasi Vue.js?
1. Menjalankan perintah npm install vue-grid-layout pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Vue Grid Layout pada file index.html
3. Menambahkan konfigurasi Vue Grid Layout pada file vue.config.js
4. Mengunduh file Vue Grid Layout secara manual dan menambahkannya ke proyek Vue.js
9. Apa yang dimaksud dengan Vue Draggable dalam konteks Vue.js?
1. Plugin yang digunakan untuk mengintegrasikan Vue.js dengan Axios
2. Plugin yang menyediakan komponen-komponen UI yang siap pakai untuk Vue.js
3. Plugin yang digunakan untuk mengatur tata letak grid pada aplikasi Vue.js
4. Plugin yang menyediakan fitur drag-and-drop untuk Vue.js
10. Bagaimana cara menginstal Vue Draggable pada aplikasi Vue.js?
1. Menjalankan perintah npm install vue-draggable pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Vue Draggable pada file index.html
3. Menambahkan konfigurasi Vue Draggable pada file vue.config.js
4. Mengunduh file Vue Draggable secara manual dan menambahkannya ke proyek Vue.js

 

Source:

https://www.npmjs.com/package/vuedraggable

https://jbaysolutions.github.io/vue-grid-layout/

https://vue-chartjs.org/guide/

https://www.sahretech.com/2021/05/apa-itu-vuetify-dan-bagaimana-cara.html

https://www.vuemastery.com/blog/most-popular-vuejs-plugins-and-packages/

https://docs.vuejs.id/v2/guide/plugins.html

https://vuejs.org/guide/quick-start.html

https://axios-http.com/docs/intro