Clean Code, Persona, Design Guideline — Sprint 3 Blog Azahra
Sprint 3 kali ini terasa sedikit berbeda dengan sprint sebelumnya karena waktu sprint yang banyak terpotong oleh UTS dan deadline tugas dari mata kuliah yang lain. Saya dan kelompok saya berusaha untuk menyelesaikan setidaknya satu task kami masing-masing sebelum UTS tiba. Kami mengadakan sesi hackathon di luar jadwal hackathon kami yang biasanya karena kami menyadari kami harus meluangkan waktu lebih banyak sebelum kami sibuk mempersiapkan diri untuk UTS. Pada akhirnya, kami dapat menyelesaikan task kami di waktu yang telah kami tentukan bersama.
Sprint 3 ini adalah kali pertama saya mencoba mengambil task yang berurusan dengan backend. Kami menggunakan framework Django dalam bahasa pemrograman Python untuk backend. Dalam prosesnya saya harus melakukan sedikit penyesuaian karena sebelumnya saya hanya banyak berurusan dengan mockup dan frontend menggunakan React. Semakin banyak saya menulis code, baik itu di backend maupun frontend, saya semakin dituntut untuk menjaga code saya agar dapat dibaca dan dimengerti oleh orang lain.
Clean Code
Untuk menjadi programmer yang baik, kita tidak hanya diharuskan untuk menulis code yang fungsional, tetapi juga yang dapat dibaca dengan mudah. Di sini lah clean code berperan, yaitu untuk menjaga code lebih elegan sehingga mudah untuk dipahami dan dikembangkan lebih lanjut oleh orang lain. Berikut ini adalah aspek-aspek yang harus diperhatikan dalam clean code:
Nama
Pemberian nama untuk variabel, fungsi, dan kelas harus dibuat sedeskriptif mungkin. Acuan tertentu dari bahasa pemrograman atau framework juga sebaiknya diikuti.
Sebagai contoh, penamaan variabel bucket dari code yang saya buat berikut menyimpan object bucket yang dikembalikan oleh fungsi get_bucket() yang disediakan oleh google cloud. Bucket ini merupakan semacam tempat penyimpanan gambar, seperti sebuah folder. Kemudian, gambar, disebut blob oleh google cloud, diambil dari bucket tersebut dan disimpan dalam variabel image.
bucket = storage_client.get_bucket("connectdot")
image = bucket.blob(destination_image_name)Penamaan fungsi juga harus diperhatikan di mana nama fungsi seharusnya menggunakan kata kerja, seperti contoh berikut yang menggunakan kata kerja save dan upload. Selain itu, saya dan kelompok saya mengikuti konvensi penamaan PEP 8 milik Python yang menggunakan snake case.
class ImageService(): def save_to_database(uploaded_url):
return picture def upload_image(self, source_file, destination_image_name):
return self.save_to_database(uploaded_url)
Untuk penamaan kelas, sebaiknya digunakan kata benda untuk merepresentasikan object apa yang dibuat oleh kelas tersebut. Pada contoh di atas, saya membuat kelas ImageService yang berperan untuk menyediakan servis terkait gambar untuk digunakan oleh fungsi-fungsi yang lain.
Fungsi
Hal pertama yang harus diperhatikan dalam pembuatan fungsi adalah ukurannya. Di dalam buku Clean Code, Robert menyebutkan bahwa fungsi seharusnya tidak terdiri lebih dari 100 baris di mana setiap barisnya memiliki maksimal 150 karakter.
Kemudian harus diperhatikan juga bahwa fungsi seharusnya hanya fokus melakukan satu hal saja, tanpa membuat efek samping dari apa yang dideskripsikan oleh namanya.
Satu hal lagi yang penting dalam pembuatan fungsi adalah banyaknya argumen yang dimiliki. Idealnya jumlah argumen dalam fungsi adalah nol, tetapi fungsi masih dapat dibaca dengan baik selama membutuhkan tidak lebih dari tiga argumen.
def upload_image(self, source_file, destination_image_name):
storage_client = self.gcloud_storage_client
bucket = storage_client.get_bucket("connectdot")
image = bucket.blob(destination_image_name)
image.upload_from_string(source_file, content_type="image/png")
uploaded_url = "https://..."
return self.save_database(uploaded_url)Contoh di atas merupakan penerapan clean code dalam fungsi yang telah saya lakukan di mana saya mengusahakan agar fungsi tetap singkat, fokus melakukan satu tujuan yaitu mengunggah gambar, dan memiliki argumen sebanyak tiga.
Comment
Penulisan comment sebaiknya tidak dilakukan sama sekali. Adanya comment dimaksudkan untuk memberikan keterangan lebih lanjut tentang apa yang dilakukan oleh sebuah potongan code. Itu berarti bahwa code yang ditulis belum deskriptif sampai membutuhkan keterangan tambahan. Penamaan yang baik dan struktur code yang jelas seharusnya sudah memberikan deskripsi yang cukup mengenai fungsionalitas code tersebut.
Format Layout
Penerapan format layout pada code akan memudahkan proses membaca code karena tertata rapi. Besaran indentasi dan banyaknya line breaks akan mempengaruhi kerapian penulisan code. Tool linter seperti pylint sudah digunakan oleh kelompok saya untuk memudahkan proses layout formatting ini.
D.R.Y
Konsep Don’t Repeat Yourself menghindarkan kita dari duplikasi code dan mendekatkan kita dengan program yang modular dan tersusun rapi. Duplikasi code akan membuat program mengandung semakin banyak baris sehingga mempersulit pemahaman code.
Salah satu penerapan yang dilakukan oleh kelompok saya untuk D.R.Y adalah pada contoh fungsi upload_image yang saya sertakan di atas di mana fungsi ini kemudian akan digunakan oleh semua API yang membutuhkan proses pengunggahan foto ke image server yang kami miliki.
Error Handling
Kemungkinan terjadinya eror akan selalu ada walaupun program sudah dibuat untuk menghindari hal tersebut. Salah satu usaha yang dapat dilakukan oleh pengembang adalah membuat error handling. Tujuan dari error handling ini adalah agar pengguna mengetahui bahwa telah terjadi kesalahan dengan cara yang user-friendly dan juga memberikan kebebasan kepada pengembang untuk memberikan action yang sesuai dengan eror tersebut.
Persona
Platform yang dibuat oleh kelompok kami merupakan situs pencarian kerja bagi masyarakat yang tidak memiliki ijazah perguruan tinggi. Rancangan yang kami buat untuk pengguna kami sesuaikan agar pengalaman yang didapatkan oleh pengguna merupakan pengalaman yang terbaik.
Kami menyadari bahwa pengguna kami pada umumnya tidak terlalu familier dengan Bahasa Inggris. Oleh karena itu, kami menggunakan Bahasa Indonesia pada desain situs kami. Beberapa istilah umum di dunia maya tetap menggunakan Bahasa Inggris karena menurut kami pengguna akan memahami istilah-istilah tersebut, seperti login dan logout.
Desain situs kami juga kami buat minimalis agar pengguna tidak bingung mencapai tujuan utamanya dalam membuka situs kami, yaitu mencari kerja. Kami memberikan akses sebesar mungkin bagi pengguna agar proses pencarian kerja dapat dilakukan dengan lebih mudah. Penggunaan warna putih sebagai warna latar belakang situs kami juga bertujuan untuk memberikan kesan yang clean dan simple.
Selain dari sisi desain, kami juga berusaha untuk menyesuaikan alur penggunaan platform kami dengan pengguna. Menurut kami, sebagian pengguna mungkin belum memiliki email. Untuk mengatasi hal ini, kami menyediakan fitur pendaftaran akun dengan menggunakan nomor HP saja, tanpa email. Verifikasi akun juga dapat dilakukan dengan mengirimkan SMS ke nomor HP yang didaftarkan.
Data-data yang dibutuhkan oleh platform kami juga menyesuaikan dengan cakupan pengguna kami. Dengan tingkat profesionalisme yang berbeda, tidak seperti situs pencarian kerja yang lain, kami tidak membebani pengguna kami untuk mengisi data yang banyak untuk pengisian profilnya. Sebagai contoh, kami tidak mengharuskan pengguna untuk menyertakan semua jenjang pendidikannya di bagian riwayat pendidikan. Kami hanya membutuhkan jenjang pendidikan terakhir pengguna untuk dijadikan bahan pertimbangan oleh para employer.
Design Guideline
Pembuatan platform dalam sebuah tim merupakan hal yang menantang karena banyaknya orang yang terlibat. Dari sisi pemrograman, pekerjaan dalam tim dapat dipermudah oleh adanya TDD, Agile, dan clean code. Dari sisi desain, pekerjaan dalam tim dapat dibantu dengan design guideline. Sebagai hipster dalam kelompok saya, saya bertanggung jawab atas sebagian besar keputusan desain platform kami. Untuk menjaga konsistensi desain, saya menyediakan sebuah design guideline yang dapat dijadikan acuan oleh saya sendiri dan juga teman-teman kelompok saya yang lain.
Menurut Tomas Laurinavicius, seorang penulis di situs designmodo, terdapat beberapa komponen yang harus diperhatikan dalam pembuatan design guideline terutama untuk website.
Typography
Typography merupakan 95% dari keseluruhan web design, menurut Oliver Reichenstein, seorang pendiri perusahaan desain iA. Typography adalah hal penting karena itu merupakan salah satu media penyampaian informasi. Font-family, font-size, dan font-weight sebaiknya ditetapkan. Di ConnectDot, saya membuat dua jenis font untuk menghindari kesan monoton tetapi penggunaannya disesuaikan dengan keadaan.
Color Palette
Warna adalah salah satu hal yang paling berpengaruh dalam pembentukan brand. Seperti contoh, jika kita mendengar nama Go-Jek atau Tokopedia maka sudah terbayang di pikiran kita warna hijau. Warna juga memberikan kesan tertentu. Warna biru merepresentasikan rasa kepercayaan dan profesionalitas, itu lah salah satu alasan mengapa saya memutuskan menggunakan warna biru untuk ConnectDot. Sementara warna hijau merupakan keinginan dari product owner kami yang juga cocok disatukan dengan warna biru. Warna-warna pendukung lain seperti warna kuning dan abu-abu saya tambahkan untuk memberi highlight.
Iconography
Icon merupakan salah satu cara terbaik untuk menyampaikan informasi secara instan dibanding dengan teks. Icon memberikan gambaran langsung kepada pengguna mengenai apa yang sedang dilihat atau dilakukan. Untuk icon, secara garis besar saya menggunakan sumber yang tersedia secara terbuka di internet.
Imagery
Selain icon, gambar merepresentasikan informasi secara lebih baik dibanding teks. Dalam sebuah website, gambar membantu pengguna memahami branding bersamaan dengan warna. ConnectDot merupakan platform yang ditujukan untuk mencari kerja. Saya mengasosiasikan platform ini dengan tempat kerja dan orang-orang yang saling berinteraksi. Karena product owner kami lebih memilih untuk tidak menggunakan foto sebagai aset, maka saya membuat atau mencari aset selain foto.
Forms
Forms adalah salah satu media di mana pengguna dapat berinteraksi dengan platform. Pengguna memberikan berbagai data melalui form, seperti pada saat melakukan registrasi, login, maupun pengisian data-data profil. Untuk ConnectDot, saya berusaha membuat form agar memiliki konsistensi di setiap halaman yang membutuhkannya.
Buttons
Tombol adalah komponen yang selalu ada di setiap halaman. Tombol merupakan perpaduan dari warna dan typography. Tombol yang baik adalah tombol yang terlihat menonjol dan memberikan umpan balik kepada pengguna. Di ConnectDot saya membuat banyak jenis style tombol untuk menyesuaikan dengan desain yang ada di sekitar tombol tersebut.
Spacing
Spacing yang konsisten akan membuat website menjadi lebih rapi dan konsisten. Design guidline untuk spacing dapat dibuat dalam bentuk grid dan dispesifikasikan untuk jarak antara komponen, seperti jarak antara judul dengan konten halamana atau jarak antara gambar. Implementasi spacing dalam ConnectDot belum saya terapkan karena saya masih belum dapat menentukan ukuran spacing yang tepat dan komponen apa saja yang secara lengkap harus dispesifikasikan spacingnya.
Design guideline ConnectDot dapat dilihat di https://www.figma.com/file/EujvFqyVtZT7aXAnsyutUa4d/Mock-Up-Awal?node-id=82%3A0
Referensi:
