ChuckNorris — Vue.js Chuck Norris Jokes Generator

Chuck Norris (sumber : http://www.healthfitnessrevolution.com)

Kali ini kita akan bereksperimen dengan Vue.js untuk membuat hal-hal yang lucu agar tidak bosan dengan kode yang setiap hari kita tulis. Melihat dari daftar public API yang dibuat om @toddmotto di github, maka terbersit untuk membuat satu interface dari API yang disediakan disana. Pilihan akhirnya jatuh pada API dari https://api.chucknorris.io/.

Jangan bilang Anda tidak kenal Chuck Norris, baca dulu disini ya mengenai Chuck Norris ini.

Sebelum membuat web client nya kita akan analisa terlebih dahulu mengenai ketersediaan dan spesifikasi yang ada di dokumentasi API yang bersangkutan. Dari dokumentasi yang ada, setidaknya ada 4 jenis API yang mereka sediakan yakni :

  1. Random Jokes : https://api.chucknorris.io/jokes/random
  2. Category : https://api.chucknorris.io/jokes/categories
  3. Random By Category : https://api.chucknorris.io/jokes/random?category={category}
  4. Search : https://api.chucknorris.io/jokes/search?query={query}

Setelah mengetahui ketersediaan API, maka kita akan sedikit berkelakar mengenai halaman apa saja yang ingin kita buat. Berdasarkan API yang ada maka saya kira-kira kita akan membuat beberapa halaman berikut :

  1. Homepage
  2. Daftar kategori
  3. Random jokes di masing-masing kategori
  4. Search

Menggunakan Vue.js tentu yang paling mudah adalah karena telah tersedia Vue-CLI yang bisa dengan mudah untuk membuat skeleton project awal, tentu kita akan pilih untuk menggunakan tools keren ini. Selain itu kita akan menggunakan template webpack dari Vue-CLI agar mudah di modifikasi bila dibutuhkan. Anda bisa membaca mengenai cara menggunakan Vue-CLI ini di halaman resminya disini atau bisa juga di blog saya disini.

Setelah selesai generate skeleton, berikutnya adalah membuat kerangka tampilan. Seperti kita tahu di Vue.js kita bisa menggunakan Vue-Router untuk melakukan frontend routing sehingga tidak perlu semua layout kita refresh melainkan hanya bagian konten saja yang perlu diubah ketika melakukan perubahan routing. Untuk ini kita akan memecah layout utama menjadi beberapa bagian berikut :

  • Header
  • Sidebar
  • Tab Navigasi
  • Konten

Tentu selain konten, akan kita letakkan saja di App.vue, yang bisa dilihat kodenya disini.

Setelah membuat layout utama di App.vue, kita akan membuat beberapa halaman yang sudah kita sepekati diawal. Masing-masing page akan direfleksikan dengan satu file .vue yang berisi konten masing-masing dan akan kita letakkan semuanya di folder pages agar mudah tracking nya. Semua file di halaman pages bisa dilihat disini. Karena beberapa pages yang kita buat masih sederhana dan tidak terlalu kompleks maka saya memutuskan untuk tidak memisah bagian di dalamnya menjadi komponen yang lebih kecil.

Beberapa komponen yang kita pisahkan akan kita letakkan di folder components, seperti file App.vue yang merupakan layout utama akan menjadi terlalu besar bila tidak kita pecah ke dalam komponen-komponen yang lebih kecil. Beberapa yang kita pecah adalah seperti SidebarHeaderTab Navigasi, dan Sosial Sharing.

Untuk melakukan routing kita akan menggunakan Vue-Router yang merupakan library resmi dari Vue.js. Kita akan mengarahkan url yang kita inginkan untuk memuat file .vue yang telah kita buat di folder pages tadi. Semua konfigurasi dari routing yang kita lakukan bisa dilihat di folder router, dimana ada file index.js yang merupakan file routing kita.

Menggunakan API berarti kita membutuhkan http-client library untuk melakukan pemanggilan endpoint yang tersedia. Disini kita akan menggunakan Vue-Resource sebagai library pembantu kita. Mengenai cara penggunaan Vue-Resource bisa dilihat langsung di halaman resmi mereka, namun secara prinsip dan syntax tidak jauh berbeda dengan beberapa http-client library lain yang tersedia di pasaran. Kita akan menjadikan satu file untuk melakukan pemanggilan API endpoint ini dan akan kita letakkan di folder api. Semua kode megenai pemanggilan API ini bisa dilihat di file index.js.

Membuat satu aplikasi utuh terkadang akan banyak menggunakan state yang makin banyak tentunya akan makin susah di manage, maka dari itu kita kan menambahkan Vuex sebagai pengatur state-state kita. Mengenai cara menggunakan dan berbagai hal dasar mengenai Vuex silahkan dibaca di halam resmi mereka. Kita menyiapkan satu file store.js yang kita letakkan di folder store sebagai pengatur state yang memanfaatkan Vuex.

Berikut sedikit screenshot hasil dari project yang telah kita buat :



Kode project ini telah diunggah ke Github dan bisa dipelajari untuk kepentingan pembelajaran bersama, silahkan di cek di tautan berikut : https://github.com/mazipan/chucknorris

Demikian sharing project sederhana yang saya buat, semoga bermanfaat.

Tulisan ini telah dipublikasikan juga di Medium: https://medium.com/vuejs-id/chucknorris-vue-js-chuck-norris-jokes-generator-30eff39b6862

 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.