Last Week — Last Sprint in our Marathon and knowledge sharing time!
What have I done ?
Tidak terasa sekarang kita sudah memasuki minggu terakhir perkuliahan PPL ini. Pada minggu terakhir ini kami melakukan banyak sekali finishing dan mengejar banyak backlog. Oleh karena itu pada blog ini saya ingin membagikan mengenai bagaimana pengalaman saya dalam mengejar 6 backlog ini.
Melakukan Sprint Planning
Hal pertama yang harus dilakukan adalah melakukan perencanaan yang baik, setelah melakukan Sprint Review pada hari jumat kami melakukan Sprint Planning, Sprint Planning dilakukan dengan cukup lama, menimbang banyak sekali backlog yang harus kami kejar. Backlog pun satu persatu kami ambil dan kami pecah-pecah menjadi task-task yang kecil yang diurutkan berdasarkan prioritas pengerjaan.
Mengambil task untuk Sprint 3
Pada sprint 3 ini saya mengambil beberapa task untuk backlog membuat voucher dan loyalty points. Saya mengerjakan backlog tersebut dimulai dari backlog membuat voucher.
Pada page membuat voucher saya membuat 3 buah functionality yaitu membuat voucher, mendelete voucher dan melakukan search dan filter pada voucher.
Membuat Voucher
Hal pertama yang saya lakukan dalam membuat voucher diatas adalah saya membuat komponen-komponen dan melakukan validasi pada front-end apabila terdapat penulisan yang salah. Kemudian saya mengintegrasikannya dengan backend dengan melakukan post.
Mendelete Voucher
Untuk melakukan delete pada voucher saya pertama membuat komponen untuk melist semua user dan saya kemudian mengintegrasikannya dengan backend dengan melakukan delete.
Melakukan Filter Pada Voucher
Untuk melakukan filter seperti gambar diatas saya perlu menyimpannya dalam sebuah state untuk kemudian melakukan get untuk mendapatkan informasi user yang telah difilter.
What have I learn ?
- React and Redux in depth
- Django REST API
- Thousand Module in React
What problem did I encounter ?
Saya mengalami masalah ketika melakukan npm install karena npm saya tidak berjalan dengan baik
What am I going to do next?
Mengintegrasikan dan menyelesaikan marathon ini
Software Environment
Dalam development ini kami membuat sebuah git flow sistem untuk memudahkan developer dalam mengerjakan tasknya. Kami membuat beberapa branch diantaranya CobaCoba, SIT_UAT, UserStory dan Production.
- Coba-coba merupakan branch yang kami gunakan untuk memeriksa apakah sebuah kode dapat berfungsi apabila di push. Kami menggunakan branch coba-coba hanya untuk setup enviroment di awal sistem pengembangan.
- SIT_UAT_BACKEND, merupakan branch development yang digunakan oleh team backend, semua user stories yang telah selesai dikerjakan oleh team backend dapat di merge ke dalam branch ini
- SIT_UAT merupakan branch development yang digunakan oleh team frontend, semua user stories yang telah dikerjakan oleh team frontend dapat dimerge ke branch ini. Branch ini juga merupakan branch utama SIT_UAT sehingga semua pekerjaan yang telah diselesaikan oleh team backend di branch SIT_UAT_BACKEND dapat di merge ke SIT_UAT ini.
- User-Story merupakan branch development dari setiap task, branch ini dibuat agar menghindari terjadinya merge conflict dalam proses pengembangan
- Master merupakan branch yang ready untuk production
Pada tahap setup enviroment ini juga kami melakukan setting gitlab-ci.yml yang digunakan untuk Continues Integration, sehingga apabila pekerjaan telah di push maka CI akan secara otomatis melakukan testing dan deployment ke heroku
berikut ini merupakan script dari gitlab-ci.yml :
Dari script diatas CI dibagi menjadi 2 yaitu test dan deploy, test dan deploy juga dibagi menjadi test dan deploy untuk frontend dan test dan deploy untuk back end. tahap test dari masing masing sisi (front-end ataupun backend) hanya menjalani command yang dilakukan sampai menjalankan server masing-masing.
Contohnya untuk melakukan testing di frontend dilakukan npm run test, tapi sebelum itu dilakukan dengan masuk ke folder frontend, npm install baru kemudian melakukan testing. Hal yang sama dilakukan pada backend.
Quality Assurance
Saya pun melakukan quality assurance terhadap pekerjaan teman saya di front-end saya melakukan diskusi terkait komponen-komponen yang ada pada print page.
Software Architecture
Legenda:
Dari desain arsitektur diatas akan didapatkan software scalability yang baik karena memiliki sifat low coupling pada setiap servicenya, sehingga apabila terdapat perubahan arsitektur dan pengguna yang semakin banyak, refactoring tidak akan terlalu banyak dibutuhkan.
Gambar diatas menggunakan pattern layered patern sebagai software architecture layer . Terdapat frontend sebagai UI layer, Backend dan microservice sebagai Application Layer, DB Server sebagai persistence layer.
Selain layered pattern kami juga mengimplementasikan cient-server pattern dimaana frontend menjadi client dan backend menjadi server.
Sumber literature https://towardsdatascience.com/10-common-software-architectural-patterns-in-a-nutshell-a0b47a1e9013
Asset and Styling
Dalam membuat asset and styling ini saya membuat beberapa komponen yang bisa digunakan untuk website println, berikut ini merupakan asset-asset yang saya gunakan
Dan dibawah ini merupakan styling yang kami gunakan untuk menjaga konsistensi dari page
