Fitur Pencarian pada Lowongan
Saya mendapat tugas kelompok untuk menambah fitur atau bug fixing pada produk hasil mata kuliah PPL yang diberi nama ‘Kape’. Produk tersebut memiliki tujuan untuk menghubungkan antara pihak mahasiswa dengan para penyedia KP. Produk tersebut berbasis website dengan frontend React dan backend Django dengan bantuan library Django REST Framework.
Penambahan Fitur pada Website Kape
Saya akan melongkapi bagian login karena fokus penambahan fitur terletak pada halaman lowongan. Pada halaman lowongan saat ini, hanya terdapat daftar lowongan dan navigasi untuk ke halaman selanjutnya atau sebelumnya. Tampilan halaman lowongan dapat dilihat pada gambar berikut.
Dapat dilihat bahwa tidak terdapat search bar untuk mencari lowongan kerja praktik, sehingga navigasi yang dilakukan menjadi sulit. Oleh karena itu, saya ingin menambahkan fitur search bar untuk mencari lowongan berdasarkan posisi maupun nama perusahaan.
Cara Kerja Fitur Pencarian
Berdasarkan kode sumber, digunakan pagination untuk mengatasi kasus dimana lowongan yang ditampilkan sangat banyak. Cara kerja pagination ini berfungsi untuk mempertahankan performa. Hal ini diimplementasikan dari segi backend, sehingga fitur pencarian tidak dapat dilakukan hanya dari segi frontend saja, melainkan harus dari backend juga.
Pendekatan Quality Assurance dalam Penambahan Fitur
Dalam proses penambahan fitur, saya mengaplikasikan ilmu Test Driven Development yang sekaligus diperkaya dengan materi Quality Assurance yang sudah diajarkan di kelas. Saya mencoba untuk memetakan input dengan cara interface based yang memiliki tujuan untuk membangun karakteristik dari parameter secara individual. Hal ini saya lakukan karena saya tidak memahami secara cara kerja dari berbagai modul yang ada dalam kode sumber tersebut secara spesifik.
Sebagai contoh, berikut ini adalah salah satu fungsi, yaitu fungsi list yang berada di dalam views untuk vacancies. Lebih tepatnya terdapat di class VacancyViewSet.
Pada fungsi tersebut sebelumnya hanya mengambil seluruh vacancy dengan cara Vacancy.objects.all(). Kemudian saya menambahkan kondisi if dan else untuk mengecek apakah sedang dalam mode search. Apabila mode search tersebut terdapat di parameter request, maka vacancy tersebut akan di-filter berdasarkan nilai yang terdapat pada request tersebut.
Sebelumnya, dilakukan proses testing untuk mengecek apakah dengan parameter search dapat masuk ke klausa tersebut dan dapat mengembalikan nilai yang sesuai. Setelah proses implementasi backend sudah rampung, maka berlanjut ke implementasi frontend, khususnya di bagian Pagination.jsx . Pada komponen tersebut, ditambahkan elemen input dan button. Cara kerjanya adalah sebagai berikut.
- Akan melakukan request dengan menambahkan parameter search yang berisi nilai dari elemen input
- Apabila sebelumnya nilai input berisi nilai tertentu dan dihapus sehingga menjadi kosong, akan otomatis melakukan request untuk mengambil kembali seluruh data lowongan tanpa menekan tombol cari
Elemen pencarian tersebut saya letakkan pada Pagination.jsx. Pada elemen tersebut ditambahkan input box dan button. Pada button diimplementasikan pemanggilan API dengan menambahkan parameter search. Kemudian pada fungsi getItemsData() barulah dicek nilai dari input box untuk search tersebut dan dilakukan pemanggilan API.
Berdasarkan implementasi tersebut, saya merasa pentingnya TDD khususnya ketika menambahakn suatu fitur agar tidak terjadi regresi pada program yang sebelumnya sudah berjalan.
