1 A. Konsep dan instalasi vue router

 

Vue Router, Pinia State Management & Deployment

1                   A. Konsep dan instalasi vue router

Router vue / vue router adalah library yg biasa di gunakan untuk membuat navigasi di dalam aplikasi vue.js menjadi SPA (Single Page Aplication), secara teori SPA merupakan aplikasi yang berkerja di dalam browser tanpa membutuhkan reload page saat di gunakan. Dengan kata lain, pengguna atau user tidak akan berpindah halaman dengan melakukan request kepada server setiap kali interaksi pada apalikasi. jadi konsep dari vue router sendiri adalah memungkinkan pengguna untuk membuat aplikasi SPA yang dapat memuat halaman secara dinamis tanpa perlu mlakuakan refresh halaman secara keseluruhan dan kemudian kita akan membahas bagaimana cara instal vue router ke dalam vue js :

1. Buka vue js yg telah kalian install di materi pertama, kemudian ketikan command npm install vue-router.

Untuk melihat apakah vue-router sudah terinstall, kalian bisa check di file peckage-lock.json di bagian akhir dari dependencies terlihat ada tambahan yaitu vue-router.

2. Kemudian kalian buat folder dengan nama views di dalam folder src, dan silahkan kalian buat 2 file vue bernama home.vue dan about.vue Isikan setiap file tersebut dengan code seperti di bawah ini.

Jadi tujuan pembuatan folder baru bernama views dan di dalam nya memiliki file component home dan about berguna untuk display atau tampilan pada router .

3. Lalu kalian buat folder baru dengan nama router dalam folder src. Dan di dalam folder router silahkan buat file baru bernama index.js, kemudian masukan kode di bawah ini, pertama kita import dulu createRouter dan createWebHistory dari vue-router .

●       CreateRouter akan di gunakan untuk menganalisasi konfigurasi dari route yang akan kita buat.

●       createWebHistory merupakan mode yang di gunakan di dalam vue-router.

Kegunaan dari fungsi fungsi di atas adalah untuk membuat riwayat yang dapat di kunjungi kembali oleh pengguna dan membuat object router pada vue.

Dan di dalam vue-router memiliki 3 mode yaitu :

●       CreateWebHistory.

●       CreateWebHashHistory.

●       CreateMemoryHistory.

Dan semua bergantung pada mode yang kalian gunakan, anda harus menggantinya dengan mode yang sesuai

Dari routes di atas berikut kurang lebih penjelasan nya :

●       Path - merupakan URL yang akan di buat, contohnya adalah /

●       name merupakan nama dari route yang kita buat, ini mempermudah kita dalam memanggil route di dalam komponen.

●       Component merupakan view/ component yang akan di gunakan saat route ini di panggil, contoh di atas kita memanggil file yang berada di dalam folder src/views/home.vue.

5. Selanjutnya, agar router yg sudah kita buat dapat di gunakan dalam project vue kita, maka kita harus mengimport / register router di src12/main.js dan tambahkan code di bawah ini.

Dari sedikit perubahan kode di atas, pertama kita import terlebih dahulu file router yang sudah kita buat sebelum nya dengan code import router from ./router;

setelah itu kita register router tersebut ke dalam instance vuejs menggunakan keyword use

maka dengan cara di atas, router sudah dapat di gunakan di dalam project vuejs kita.

6. Kemudian kalian buka file app.vue dan agar vuejs dapat menampilkan sebuah view/component dari konfigurasi router yg kita buat, maka kita perlu mengubah beberapa code defaultnya.

Dan untuk menampilkan vue-router kita menggunakan code berikut .

Jalan kan program kalian dengan mengetikan command npm run dev di terminal kalian, dan kurang lebih tampilanya nya akan seperti ini jika di jalan kan. Jika kalian klik home maka kita akan di tujukan kehalaman nya dan begitu juga dengan menu about.

B. Pinia state management

Pinia adalah library state management yang membantu anda mengelola dan menyimpan data reaktif dan status di seluruh komponen anda di dalam aplikasi vuejs anda. Berikut merupakan contoh kode program impor Pinia untuk membuat instance store, pastikan bahwa Pinia telah terinstall pada proyek kalian masing-masing

Dan dari sini kita dapat menyimpulkan bahwa konsep dasar dari pinia adalah store. Definisi store sendiri adalah tempat di mana kalian menyimpan dan mengelola keadaan aplikasi kalian. Di pinia sendiri memiliki 3 core component (component inti) yaitu:

1. State

State adalah fungsi yang mengembalikan nilai kondisi awal, hal ini memungkinkan pinia untuk bekerja di sisi server maupun di sisi client. Berikut merupakan contoh deklarasi state pada Pinia

2. Getters

Getters sama persis dengan computed values yang dihitung untuk status store / penyimpanan, mereka dapat didefinisikan dengan getters properti di define store . Mereka menerima state sebagai parameter pertama untuk mendorong penggunaan arrow function. Berikut merupakan contoh deklarasi getters pada Pinia

3. Action

Action sama hal nya seperti getters yang dapat mengakses seluruh instance store menggunakan keyword this dengan autocomplete dan action juga dapat berjalan secara asynchronous. Berikut merupakan contoh deklarasi action pada Pinia

Untuk dapat mengakses semua komponen pinia tersebut perlu dilakukan impor ke komponen Vue yang ingin menggunakan komponen-komponen pada pinia tersebut (state, acions, atau getters). Berikut merupakan contoh impor komponen dari Pinia ke Vue

Selain itu juga komponen Pinia perlu diregistrasikan pada file `main.js` seperti contoh di bawah

State management seringkali dibutuhkan untuk aplikasi yang kompleks atau berskala besar, di mana banyak komponen atau modul harus terbagi dan mengkoordinasikan state nya agar berfungsi dengan baik.

State management bisa jadi sangat penting saat aplikasi perlu pengingat data di beberapa halaman dan komponen atau saat aplikasi perlu melacak interaksi pengguna, misalkan seperti chart (keranjang) belanja perlu mengingat item di tambahkan ke keranjang, dan aplikasi web perlu mengingat preferensi dan pengaturan pengguna. Tanpa state management yang tepat aplikasi tidak akan dapat menyimpan data dan kemudian tidak akan memberikan fungsionalitas atau pengalaman pengguna yang diharapkan.

C.Deployment

Deployment adalah kegiatan yang merupakan untuk mengembangkan aplikasi atau website yang tidak bisa di lepas dari kegiatan para programmer dan sebuah deployment juga memiliki siklus yaitu :

1. Siklus Delivery

Siklus ini menyediakan penggunaan perkembangan oprasional software beserta fingsi dan fitur fitur tang dapat di gunakan.

 

2. Siklus support

tahap ini menyediakan dokumentasi dan campur tangan manusia terhadap fungsi dan fitur yang di kendalikan pada proses deployment secara teratur sesuai perkembangan.

 

3. Siklus feedback

Tahap ini menyediakan tim perancang software dengan petunjuk petunjuk penting yang mengarah pada modifikasi fungsi, fitur, dan langkah yang akan di ambil untuk perkembangan selanjutnya.

Dan selanjutnya kita akan mengenal tentang yang namanya hosting, hosting adalah salah satu layanan yang anda perlukan ketika sedang membuat website, dan berikut ini adalah langkah umum yang anda dapat ikuti untuk hosting pada server.

1. Pilih jenis server

Kalian pelu memutuskan jenis sever yang perlu di gunakan, seperti server fisik (bare metal),VPS (Virtual Private Server),atau cloud server.

2. Piih platform hosting

Ada banyak platfrm hosting yang tersedia, seperti Amazon Web Services (AWS), Google Cloud Platform (GCP) dan lain nya

3. Siapkan Server

Jika kalian menggunakan server fisik kalian perlu menyiapkan hardware server dan mengistal OS (Oprasi System yang sesuai), jika kalian mengguanakn VPS atau cloud server kalian dapat membuat instance server melalui antarmuka pengelolaan platform hosting yang di pilih.

4. Konfigurasi server

setelah serever siap, kalian perlu mengkonfigurasi berbagai komponen server seperti operasi, firewall, pengaturan jaringan, dan lain nya.

5. Install dan konfigurasi aplikasi

stelah itu kalian perlu menginstall aplikasi yang akan di hosting bukan di gosting, pastikan aplikasi tersebut sesuai dengan kebutuhan anda

6. Atur domain

jika kalian ingin mengaitkan nama domain server kalian, kalian perlu mengatur pengaturan DNS untuk mengarahkan nama domain ke alamat IP server anda.

7. Uji dan periksa kinerja

Setelah semua konfigurasi selelsai, penting untuk menguji dan memeriksa kinerja server anda.

8. Backup dan keamanan

Selalu pastikan untuk melakukan backup secara teratur dari data anda dan mengatur tindakan keamanan yang tepat.

D. Deploy menggunakan heroku

Dan kali ini kita akan mendeploy sebuah website yang telah kita buat di materi sebelumnya ke heroku, Berikut adalah langkah-langkah untuk mendeploy website Vue.js ke platform Heroku:

1. Pastikan Anda sudah memiliki akun Heroku: Jika belum memiliki akun, kunjungi situs web Heroku (https://www.heroku.com) dan daftar untuk mendapatkan akun gratis.

 

2. Instal Heroku CLI: Heroku CLI (Command Line Interface) memungkinkan Anda untuk berinteraksi dengan Heroku dari baris perintah. Anda dapat mengunduh dan menginstal Heroku CLI sesuai dengan sistem operasi yang Anda gunakan. Panduan instalasi tersedia di situs web Heroku.

 

3. Inisialisasi repositori Git: Pastikan proyek Vue.js Anda berada dalam repositori Git. Jika belum, inisialisasi repositori Git dengan perintah berikut di dalam direktori proyek Anda:

git init

 

4. Buat file `Procfile`: Heroku menggunakan file `Procfile` untuk menentukan perintah yang akan dijalankan ketika aplikasi dideploy. Buat file `Procfile` di direktori proyek Anda (jika belum ada) dan tambahkan baris berikut:

web: npm run serve

 

5. Buat aplikasi baru di Heroku: Buka terminal atau command prompt, lalu masuk ke direktori proyek Vue.js Anda. Gunakan perintah berikut untuk membuat aplikasi baru di Heroku:

heroku create nama-aplikasi-kalian

Ganti "nama-aplikasi-anda" dengan nama yang Anda inginkan untuk aplikasi Anda.

 

6. Tambahkan file ke Git dan lakukan commit: Gunakan perintah berikut untuk menambahkan file ke repositori Git dan lakukan commit:

git add .

git commit -m "Initial commit"

 

7. Deploy aplikasi ke Heroku: Gunakan perintah berikut untuk mendeploy aplikasi Anda ke Heroku:

git push heroku master

Perintah ini akan mengirimkan kode proyek Anda ke Heroku dan memulai proses deploy.

 

8. Tunggu proses deploy selesai: Heroku akan melakukan proses build dan deploy aplikasi Vue.js Anda. Anda dapat melihat log proses deploy dengan perintah:

heroku logs --tail

Tunggu sampai Anda melihat pesan "App deployed successfully" atau pesan serupa.

 

9. Buka aplikasi di browser: Setelah proses deploy selesai, Anda dapat membuka aplikasi Vue.js Anda di browser dengan menggunakan perintah:

heroku open

Perintah ini akan membuka aplikasi Anda di URL yang diberikan oleh Heroku.

Task : menambahkan vue router pada vuejs kalian dan mendeploy project kalian ke heroku

 

 

https://devsaurus.com/redux-intro

https://santrikoding.com/tutorial-vuejs-dan-expressjs-3-installasi-dan-konfigurasi-vue-router

https://www.telerik.com/blogs/vue-js-state-management-pinia-vs-vuex

https://coderpad.io/blog/development/how-to-handle-state-management-in-vue-using-pinia/

https://devcenter.heroku.com/articles/heroku-cli

 

Quiz

1. Apa yang dimaksud dengan Vue Router 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 navigasi antar halaman pada aplikasi Vue.js
4. Plugin yang menyediakan fitur state management untuk Vue.js
2. Bagaimana cara menginstal Vue Router pada aplikasi Vue.js?
1. Menjalankan perintah npm install vue-router pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Vue Router pada file index.html
3. Menambahkan konfigurasi Vue Router pada file vue.config.js
4. Mengunduh file Vue Router secara manual dan menambahkannya ke proyek Vue.js
3. Apa yang dimaksud dengan Pinia State Management 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 state management pada aplikasi Vue.js
4. Plugin yang menyediakan fitur routing untuk Vue.js
4. Apa perbedaan antara Pinia dengan Vuex dalam konteks state management Vue.js?
1. Pinia lebih mudah digunakan dan memiliki performa yang lebih baik daripada Vuex
2. Vuex memiliki lebih banyak fitur dan opsi konfigurasi dibandingkan dengan Pinia
3. Pinia hanya mendukung state management sederhana, sedangkan Vuex cocok untuk proyek yang kompleks
4. Pinia menggunakan pendekatan yang berbeda dalam mengatur state management dibandingkan dengan Vuex
5. Bagaimana cara menginstal Pinia pada aplikasi Vue.js?
1. Menjalankan perintah npm install pinia pada terminal proyek Vue.js
2. Menambahkan kode script yang memuat Pinia pada file index.html
3. Menambahkan konfigurasi Pinia pada file vue.config.js
4. Mengunduh file Pinia secara manual dan menambahkannya ke proyek Vue.js
6. Apa itu deployment dalam konteks pengembangan aplikasi Vue.js?
1. Proses menguji dan memeriksa kesalahan pada aplikasi Vue.js
2. Proses meluncurkan aplikasi Vue.js secara publik agar dapat diakses oleh pengguna
3. Proses mengembangkan tampilan antarmuka pengguna (UI) pada aplikasi Vue.js
4. Proses menyusun komponen-komponen pada aplikasi Vue.js untuk membentuk aplikasi yang utuh
7. Apa yang dimaksud dengan Heroku dalam konteks deployment aplikasi Vue.js?
1. Layanan hosting gratis untuk aplikasi Vue.js
2. Bahasa pemrograman yang digunakan untuk mengembangkan aplikasi Vue.js
3. Platform deployment yang mendukung berbagai bahasa pemrograman termasuk Vue.js
4. Plugin deployment yang digunakan untuk mengintegrasikan Vue.js dengan platform cloud
8. Bagaimana cara melakukan deployment aplikasi Vue.js menggunakan Heroku?
1. Melakukan push kode ke repository GitHub, lalu menghubungkan Heroku dengan GitHub untuk melakukan deployment otomatis
2. Mengunduh file aplikasi Vue.js ke Heroku secara manual melalui antarmuka pengguna Heroku
3. Menjalankan perintah npm run deploy pada terminal proyek Vue.js untuk melakukan deployment ke Heroku
4. Mengedit konfigurasi heroku.json pada proyek Vue.js untuk menentukan pengaturan deployment
9. Apa keuntungan menggunakan Heroku untuk deployment aplikasi Vue.js?
1. Gratis untuk digunakan oleh proyek open source
2. Mudah digunakan dengan antarmuka pengguna yang intuitif
3. Mendukung berbagai bahasa pemrograman termasuk Vue.js
4. Menyediakan dukungan bantuan dan dokumentasi yang lengkap
10. Apa yang dimaksud dengan SPA (Single Page Application) dalam konteks Vue.js?
1. Aplikasi web yang hanya memiliki satu halaman tampilan untuk semua konten
2. Aplikasi Vue.js yang hanya terdiri dari satu komponen utama
3. Aplikasi web yang memiliki banyak halaman tampilan yang saling terhubung
4. Aplikasi Vue.js yang menggunakan fitur routing untuk mengatur navigasi antar halaman