Sprint Blog #5
WARNING: the quote below may be a spoiler to Avengers: Endgame. Read at your own risk.
One week ago, we lost. All of us. Backlog Rejected. We lost motivations. We lost a part of ourselves. Today, we have a chance to take it all back. You know your teams, you know your tasks. Finish the backlog, get them back. One round trip each. No mistakes. No do-overs. Most of us are going to do something we don’t know, we don’t know what to expect. Be careful. Look out for each other. This is the sprint of our lives. And we’re going to win. Whatever it takes. Good luck.
— Endgame
Helloo. kembali lagi dengan saya, Bram Sedana, pada serial medium yang berjudul Sprint Blog. Dan seperti kata seseorang yang pernah saya dengan sebelumnya:
All things must come to an end.
— Someone
Sprint Blog #5 ini bisa jadi Sprint Blog terakhir yang akan saya tulis, meskipun pada jadwal seharusnya ada 6 individual review. Dan karena ini bisa jadi blog terakhir yang akan saya buat, saya akan banyak membahas tentang hal-hal yang sudah saya bahas pada blog-blog sebelumnya, for old times’ sake (sekalian mau nyoba ngetigain yang belum tiga sebenernya hehehe). Jadi yang akan saya bahas pada Sprint Blog kali ini adalah Persona and My Implementation of It, Clean Code and How I Use It, dan terakhir yaitu Docker Orchestration/Software Architecture.
Persona?!
Jadi sebelumnya saya sudah pernah membahas Persona dan juga contoh persona milik slovneek pada Sprint Blog #2. Namun akan saya coba rangkum lagi, untuk mengingat apa saja yang sebelumnya telah dibahas. Tapi sebelum itu saya ingin membahas sesuatu, pada Sprint Blog sebelumnya saya sempat menunjukkan gambar sebuah game yang berjudul Persona. Nah ternyata game tersebut akan mengeluarkan versi baru yang berjudul Persona 5R atau Persona 5 Royal dan saya sagatlah tidak sabar menunggu game tersebut.
Cukup curhatan dari saya, sekarang saya akan menjelaskan ulang tentang persona.
Apa itu persona? Persona itu adalah suatu representasi data pengguna yang akan atau berpotensi untuk menggunakan aplikasi kita. Sehingga dari persona tersebut, kita jadi tahu untuk siapa sebenarnya kita akan membuat aplikasi yang kita buat. Pembuatan persona ini membutuhkan penelitian yang cukup mendalam. Isi dari persona ini adalah sebuah data mayoritas dari potential user dari aplikasi. Data mayoritas yang dimaksud bisa jadi dalam bentuk data paling banyak (modus) dari kelompok user aplikasi.
Dari persona ini, kita dapat lebih membuat aplikasi yang cocok untuk user tersebut. Nah bagaimana sih contoh persona?
Gambar diatas itu merupakan contoh persona yang baik, tidak menggunakan data asli dari user. Berikut adalah persona yang diberikan oleh partner kami:
Data tersebut menunjukkan data asli dari user aplikasi kami, sehingga sebenarnya tidak bisa dibilang sebagai contoh persona yang baik. Tapi dari data tersebut didapatkan bahwa potential user dari aplikasi kami adalah pekerja kantoran, terutama yang sering duduk di depan komputer.
Nah sekarang apasih implementasi yang bisa dibuat oleh seorang hacker, terutama frontend, dalam membuat aplikasi yang sesuai dengan potential user dari aplikasi kita? Implementasi tersebut adalah dalam bentuk User Experience atau biasa disebut dengan UX. Dengan mengetahui jenis user yang akan menggunakan aplikasi kita, kita bisa menyesuaikan aplikasi kami agar memiliki user experience yang cocok untuk potential user.
Pada kelompok kami, melakukan implementasi persona tersebut terbukti susah untuk frontend. Hal tersebut dikarenakan hipster slovneek, Hilya Auli, yang jauh lebih memahami UX daripada saya dan juga sudah sangat menyesuaikan UX aplikasi sehingga menurut saya sendiri sudah cocok untuk digunakan oleh potential user aplikasi yaitu orang kantoran.
Oleh karena itu sangatlah sedikit yang saya improvisasi UX nya untuk menyesuaikan persona. Salah satu yang saya ubah sesuai dengan persona yang didapatkan adalah dalam Comment di DataDefinitionPage.
Dari persona yang didapatkan, bisa saya asumsikan bahwa user yang akan menggunakan aplikasi ini adalah orang kantoran yang seharian penuh melihat layar komputer. Sehingga terkadang sudah tidak bisa fokus lagi jika sudah capek. Sehingga pada Comment saya tambahkan sebuah pembantu berupa garis vertikal agar mereka bisa membedakan level dari comment seperti berikut:
Menurut saya, dengan adanya bantuan garis vertikal tersebut, akan lebih mudah untuk mengetahui suatu komen itu setara dengan komen yang mana. Selain itu, penggunaan foto terasa sedikit mengganggu dan kurang penting sehingga saya mengusulkan untuk tidak menggunakan foto.
“Clean” Code
Untuk Clean Code sudah pernah saya bahas di Sprint Blog #1. Clean Code ini merupakan sebuah kebiasaan kita sebagai developer agar kode yang kita tulis sesuai dengan best practice yang ada. Hal-hal ini ditulis oleh Robert C. Martin pada bukunya yang berjudul Clean Code: A Handbook of Agile Software Craftsmanship.
Buku tersebut dibagi menjadi tiga, yang pertama menjelaskan tentang prinsip, pola dan penerapannya. Bagian kedua berisi studi kasus yang semakin lama semakin kompleks, tiap studi kasus adalah latihan membersihkan kode. Bagian ketiga berisi list heuristik dan smell yang digunakan untuk membuat studi kasus.
Dalam menerapkan Clean terdapat beberapa best practice yang harus diikuti, antara lain:
- Komentar yang efisien
- Penamaan yang baik
- Penulisan fungsi simple dan efektif
- Penyusunan error code dan Exception Handling
- Kurangi duplicate code (DRY)
- Layout Formatting
- Penamaan variable yang konsisten, seperti konsisten camelCase atau snake_case
- Dalam pembuatan test untuk TDD, terdapat acuan F.I.R.S.T yaitu Fast, Isolated, Repeatable, Self-validating dan Timely.
Dalam mengimplementasikan Clean Code, saya sudah mengurangi sebanyak mungkin penggunaan kode duplikat dan dibuat sebuah fungsi sehingga jika ada kode yang duplikat cukup memanggil fungsi tersebut. Selain itu, penamaan dari variabel sudah dilakukan agar bisa menjelaskan kegunaan variabel tersebut dengan baik. Untuk penulisan kode, digunakan linter yang sama seperti linter yang digunakan oleh airbnb, sehingga jika ada penulisan kode yang tidak sesuai akan diberitahu oleh linter tersebut.
Docker Orchestration/Software Architecture
Arsitektur secara umumnya merupakan perencanaan atau penggambaran yang dilakukan yang menunjukkan kerangka dari suatu bangunan. Sama seperti bangunan, software atau aplikasi juga memiliki kerangka arsitekturnya.
Sebelum membahas tentang arsitekturnya, lebih baik dijelaskan terlebih dahulu tentang aplikasi yang kami buat, yaitu sebuah web application yang memiliki fitur untuk mendaftarkan data beserta detailnya. Dan di detail data tersebut bisa diberikan komen serta reply dari komen tersebut. Arsitektur dari aplikasi tersebut adalah sebagai berikut:
Dalam pengembangan aplikasi ini, terdapat tiga image yang digunakan sesuai kebutuhan masing-masing bagian, React-Redux untuk bagian Frontend, Django Rest Framework untuk bagian Backend, dan Postgres Database untuk bagian Database. Image tersebut kemudian disimpan kedalam containernya masing-masing. Dibuat 2 network, yaitu network Frontend-Backend dan network Backend-Database. Tiap network berisi 2 container agar image-image dalam network dapat berkomunikasi satu sama lain. Semua image tersebut kemudian dibungkus sebagai satu aplikasi oleh Docker dan dideploy sebagai satu aplikasi.
Ketika user mengakses web application, image Frontend akan terpanggil yang kemudian akan berkomunikasi dengan image Backend. Frontend dapat mendapatkan atau mengakses Database dengan berkomunikasi dengan Backend terlebih dahulu untuk meminta Backend agar mengakses atau merubah database sesuai dengan kebutuhan. Dari database tersebut frontend dapat menampilkan data-data kepada user.
Maybe this is the end?
Cukup ini saja yang bisa saya sampaikan pada Sprint Blog. Mohon maaf jika ada yang merasa terkena spoiler setelah membaca quote paling atas, tidak bermaksud begitu wkwk. Jika memang bakal ada Individual Review ke 6, berarti ini bukan akhir untuk Sprint Blog. Semoga yang sampaikan diatas bisa bermanfaat dan membantu dalam memahami materi tersebut. Terima kasih telah membaca blog saya. Sampai jumpa di Sprint Blog selanjutnya?
