aulch’s — week 14
Analyse Design and Evaluate Alternatives
Ketika kita hendak membuat sebuah sistem, ada baiknya kita membuat class diagram terlebih dahulu. Tujuannya agar kita dapat menunjukkan sistem dalam sudut object-oriented dan juga orientasi objek dari sistem tersebut. Tiap sistem memiliki gaya class diagramnya masing-masing. Namun umumnya, sebuah class diagram yang pasti memiliki interfaces, classes, associations and collaborations. Penjelasan dari tiap bagian sudah dipelajari di mata kuliah Basis Data kemudian Rekayasa Perangkat Lunak. Pada mata kuliah ini, saatnya kami mencoba untuk mengimplementasi class diagram tersebut sesuai dengan sistem yang kami buat.
Class diagram memiliki guideline yang menunjukkan best practice dalam pembuatannya. Berdasarkan web http://creately.com/diagram-type/article/simple-guidelines-drawing-uml-class-diagrams, terdapat dua bagian dalam menuliskan class diagram. Yaitu bagian analysis dan design.
Berikut guidelines secara umum untuk membuat class diagram:
1. Show visibility only on design models
2. Assess responsibilities on domain class diagrams
3. Highlight language-dependent visibility with property strings
4. Highlight types only on design models
5. Highlight types on analysis models only when the type is an actual requirement
Di web tersebut juga disebut bahwa penamaan di dalam design class diagram harus mengikuti standard code convention yang digunakan. Misalnya pada gambar di atas, kita tuiskan placementDate dan calculateTaxes() sesuai dengan Java Standard Code Convention yaitu dengan gaya camel case.
Pada class diagram yang telah dibuat Haryo, kita juga dapat melihat bahwa penulisan atribut atau method untuk kelas tersebut sudah mengikuti standard code convention yang ada
Selain itu, sesuai dengan guidelines, pada class diagram juga dicantumkan tipe dari atribut tersebut, apakah private atau global. Tiap kelas juga memiliki relasi yang sesuai.
Pada web tersebut juga dijelaskan guidelines untuk tiap class di class diagram :
1. Put common terminology for names
2. Choose complete singular nouns over class names
3. Name operations with a strong verb
4. Name attributes with a domain-based noun
5. Do not model scaffolding code. Scaffolding code refers to the attributes and operations required to use basic functionality within your classes, such as the code required to implement relationships with other classes. The image above depicts the difference between the OrderItem class without scaffolding code
6. Never show classes with just two compartments
7. Label uncommon class compartments
8. Include an ellipsis ( … ) at the end of incomplete lists
9. List static operations/attributes before instance operations/attributes
10. List operations/attributes in decreasing visibility
11. For parameters that are objects, only list their type
12. Develop consistent method signatures
13. Avoid stereotypes implied by language naming conventions
14. Indicate exceptions in an operation’s property string. Exceptions can be indicated with a UML property string, an example of which is shown in the above image.
Jika kita periksa class diagram yang kita miliki, class diagram ini sudah cukup mengikuti best practice yang ada. Kelas ini juga sudah menggunakan agregasi yang sesuai. Misalnya sekali kelas CrawlerController dijalankan, ia pasti akan memiliki log dari proses crawlnya. Yang sedikit kurang di class diagram ini ialah relasi antar kelas.
Penjelasan Class Diagram
Pada program ini, main class yang digunakan ialah kelas CrawlerController. Nantinya, kita akan menjalankan program crawler dengan memanggil kelas tersebut dan setiap kali program berjalan, ia akan memiliki log yang bersesuaian. Setiap log dari crawler akan disimpan dan hal tersebut dilakukan oleh kelas CrawlerLog. Selain itu, ketika crawler mencari data, tentunya ada karakteristik yang harus dipenuhi agar data yang masuk ke dalam database merupakan quote. Maka kita membutuhkan kelas QuoteFilterer untuk menyaring apakah data yang kita dapatkan benar sebuah quote. Proses penyaringan akan dibantu dengan kelas WordTagger yang akan memberikan tag kepada kata yang didapat menggunakan POSTAG dan NER. Kelas Quote akan menentukan format dari data yang telah didapat, sebuah data (quote) akan dipecah ke dalam beberapa bagian. Bagian tersebut ialah kalimat dari quote, pencetus quote, kategori dari quote tersebut, sumber web dimana quote didapatkan, cara menambahkan quote tersebut apakah manual atau tidak, juga Bahasa dari quote itu sendiri. Untuk saat ini, crawler hanya mengambil Bahasa Indonesia atau inggris, maka nilai dari atribut language berupa integer 1 atau 0. Kita juga memiliki kelas QuoteController yang berfungi untuk menyambungkan program dengan database. Kelas ini juga digunakan untuk melakukan CRUD terhadap data yang telah kita dapatkan. Database adalah kelas yang digunakan crawler untuk menentukan database mana yang digunakan.
Kemudian kita beralih ke ERD dari database kita. Di atas adalah gambaran design dari database yang digunakan oleh produk Inspire Crawler. Di sini, produk menggunakan bentuk database yang sangat sederhana. Hanya terdiri dari dua collection dan masing-masing memiliki sedikit atribut dan kita juga tidak membutuhkan relational database untuk mengolah datanya. Berangkat dari fakta tersebut, kami memutuskan untuk menggunakan mongodb sebagai database.
Jika dilihat, memang cukup sederhana yang kami miliki, namun, terdapat kekurangan pada design database tersebut, yaitu tidak tercantum atribut language yang padahal atribut tersebut terdapat di dalam class diagram sebelumnya. Sehingga ERD yang seharusnya ialah
Secure Deployment and Administration
Ketika kita sudah men-deploy produk kita, kita harus memastikan bahwa produk kita aman. Misalnya, jika produk kita berupa web, maka kita buat alamatnya menggunakan https. Contoh lain yang kami dapati di produk kami ialah, halaman .env dari produk kami seharusnya tidak bisa diakses oleh sembarang orang. Namun sayangnya di awal deployment .env masih dapat diakses dengan mudah.
Namun hal ini sudah teratasi dengan mengubah permission dari file tersebut agar tidak menjadi 777 yang artinya dapat dilihat publik. Jadi kini, .env sudah tidak bisa diakses. Jika kita mengetikkan http://sandbox.badr.co.id/ppl1/timAul/web/.env, kita akan dialihkan ke halaman utama dari Inspire Crawler web. oh iya, pathnya sudah dirapihkan, jadi kalau ingin akses web kami, ke sandbox.badr.co.id/ppl1 ;)
Mengapa .env tidak boleh diketahui publik? Karena di dalam file tersebut terdapat key-key yang berhubungan dengan web atau produk Inspire Crawler, jika key tersebut dapat diketahui orang banyak, khawatir akan ada oknum-oknum tidak bertanggung jawab yang menyalahgunakan key tersebut.
Continuous Integration, Build Script, Continuous Deployment
Kami akan melakukan continuous integration dengan travis-ci. Namun sebelum mulai untuk melakukan CI, kami harus memiliki .travis.yml file terlebih dahulu, sebuah build script yang berisi setting untuk menjalankan travis-ci yang diintegrasikan di github. Seperti yang telah saya jelaskan sebelumnya, continuous integration ialah salah satu cara untuk mendeteksi error lebih cepat dan terauotomasi. Langkah-langkah untuk menjalankan CI menggunakan travis-ci cukup mudah, yaitu pertama kita integrasikan github kita, kemudian simpan file yml yang telah kita buat di repo yang kita integrasikan tersebut, kemudian trigger dengan push origin ke branch. Jadi setelah kita push source code kita ke branch, travis-ci akan aktif dan memeriksa apakah ada error atau tidak dalam source code tersebut. Berikut contoh yang saya alami setelah push dan mendapati error.
Salah satu error ini didapatkan karena kami belum mengatur php untuk mongodb. Tidak lupa juga, Travis-ci memiliki fitur notifikasi melalui email, jadi ketika ada yang push source code di suatu branch, aka nada laporan berbentuk email dikirimkan ke seluruh anggota repo tersebut.
Build Script and Software Integration
Untuk build script ini, membutuhkan .travis.yml file, sebuah file build script yang berisi setting untuk menjalankan travis-ci yang diintegrasikan di github.
Kemarin saya mencoba membuat file tersebut, mencontoh dari yang sudah ada di web travis-ci.org dan settingan default yang sebenarnya.
Namun saat dicoba berkali-kali (dapat dilihat commit-an saya berkali-kali di github) untuk dijalankan, tetap tidak bisa, padahal alief sudah mengintegrasikan repo timAul (karena repo ini Alief yang punya) dengan travis-ci. Akhirnya setelah kami diskusikan, ditemukanlah solusi bahwa Alief mengubah settingan file .travis.yml tersebut agar bisa di-trigger oleh semua branch yang ada.
Step untuk menjalankan CI menggunakan travis-ci cukup mudah, yaitu pertama kita integrasikan github kita, kemudian simpan file yml yang telah kita buat di repo yang kita integrasikan tersebut, kemudian trigger dengan push origin ke branch. Karena di awal settingan tersebut belum dibuat untuk bisa di-trigger oleh semua branch, maka saya mencoba untuk build di branch alief terlebih dahulu, dan ini hasilnya
Setelah alief mengganti settingannya, saya dapat melakukan continuous integration di branch saya sendiri. Hal tersebut dapat dilihat di sini.
Masih terdapat error karena kami belum menggunakan php untuk mongodb kami di sana.
Kemudian, setelah diperhatikan lagi, file yang alief buat juga masih kurang, yaitu untuk versi php yang dimasukkan. Di sana, Alief hanya menggunakan php 5.6.xx. sebaiknya dimasukkan juga php versi 5.5.x, 5.4.x, karena tidak semua menggunakan php versi 5.6.x
Kemudian settingan ini telah ditambahkan oleh ega menjadi seperti yang dapat dilihat di link ini
Secure Deployment and Administration
Ketika kita sudah men-deploy produk kita, kita harus memastikan bahwa produk kita aman. Misalnya, jika produk kita berupa web, maka kita buat alamatnya menggunakan https. Contoh lain yang kami dapati di produk kami ialah, halaman .env dari produk kami seharusnya tidak bisa diakses oleh sembarang orang. Namun sayangnya di awal deployment .env masih dapat diakses dengan mudah.
Namun hal ini sudah teratasi dengan mengubah permission dari file tersebut agar tidak menjadi 777 yang artinya dapat dilihat publik. Jadi kini, .env sudah tidak bisa diakses. Jika kita mengetikkan http://sandbox.badr.co.id/ppl1/timAul/web/.env, kita akan dialihkan ke halaman utama dari Inspire Crawler web.
Mengapa .env tidak boleh diketahui publik? Karena di dalam file tersebut terdapat key-key yang berhubungan dengan web atau produk Inspire Crawler, jika key tersebut dapat diketahui orang banyak, khawatir akan ada oknum-oknum tidak bertanggung jawab yang menyalahgunakan key tersebut.
Role Management
Role yang ada di dalam produk kami ialah admin dan pengguna API (user non admin). Kali ini, role tersebut sudah aktif dan bisa dijalankan. Admin untuk produk ini dapat mengakses database dengan interface. Admin dapat melakukan crawling dan juga CRUD untuk data yang ada di database. Kali ini, saya membuat fitur Search dan Delete untuk quote.
Search
Admin dapat mencari quote yang diinginkan yang nantinya dapat dihapus atau diedit atau hanya sekadar cek apakah quote tersebut ada di dalam database. Untuk menjalankan fungsi searchnya, kita harus membuat fungsi di controller terlebih dahulu. Di awal, Haryo tidak tau bahwa task ini punya saya, akhirnya dia sudah menyelesaikan fungsi searchnya terlebih dahulu. Berikut fungsi yang telah dibuat Haryo.
https://github.com/Alieff/timAul/blob/development/web/app/Http/Controllers/CRUDController.php
kemudian saya lanjut untuk merapihkan cssnya dan juga mengaktifkan fitur delete di sana.
Delete
Semua proses delete, search, update ada di dalam satu file CRUD.blade.php. Maka ketika saya membuat fungsi delete untuk halaman search, fungsi delete tersebut juga akan berlaku pada halaman utama CRUD. Berikut form delete dan fungsinya yang saya buat.
https://github.com/Alieff/timAul/blob/development/web/resources/views/admin/CRUD.blade.php
Sebelum melakukan deletion untuk quote, admin akan diminta konfirmasi apakah benar ia ingin menghapus quote tersebut. Setelah di-deploy di server, tentunya halaman admin ini hanya dapat diakses oleh admin. Anda dapat mencoba fitur ini di sandbox.badr.co.id/ppl/admin/CRUD setelah login.
Bug/ticket tracking
Saat saya mencoba untuk mengakses tiap halaman yang telah di-deploy, saya menemukan bahwa fitur update quote belum berjalan dengan seharusnya. Maka saya buka issue di github untuk melaporkan hal tersebut
Software Profiling
Setelah poduk kami berhasil di-deploy ke server, kami dapat melihat seberapa optimal web tersebut berjalan. Dengan melihat time to load dari tiap halaman yang ada di web tersebut, kita dapat menentukan apakah halaman tersebut masih dapat di-optimisasi atau tidak. Berikut laporan dari time to load halaman about.
Salah satu cara untuk menilai seberapa optimal sebuah halaman, yaitu dengan melakukan inspect element dan lihat time to load dari seluruh konten dari halaman tersebut. Pada gambar di atas, dapat dilihat bahwa di halaman about terdapat foto-foto yang masing-masing memiliki lama waktu untuk di-load. alief.jpg butuh waktu selama 44 ms untuk dapat selesai di-load. Kita juga dapat melihat foto mana yang paling lama di-load. Dalam hal ini, foto aul.jpg adalah yang paling banyak membutuhkan waktu untuk di-load, yaitu selama 782 ms. Dan untuk total waktu yang dibutuhkan untuk load halaman tersebut ialah 5.81 s. Namun hal ini juga tidak lepas dari pengaruh kecepatan koneksi yang ada. Dilihat dari kecepatan koneksi dan total size yang harus di-load, sepertinya wajar saja jika harus menghabiskan waktu selama 5.81 s untuk menampilkan halaman about secara keseluruhan.
Code Reviews
Kali ini saya mereview code yang dibuat oleh Alief. Saat implementasi travis-ci di github, kita harus memiliki file .travis.yml agar build bisa dijalankan. Namun, di code yang Alief buat sebelumnya, terdapat kekurangan untuk versi PHP yang digunakan. Di sana, Alief hanya memasukkan PHP versi 5.6.x saja, padahal versi PHP yang digunakan developer lain tidak hanya versi 5.6.x. maka seharusnya ditambahkan versi lain seperti 5.5 dan atau 5.4.
tambahkan
Living Documentation
Berdasarkan Definition Of Done yang telah disusun, terdapat perubahan untuk pilihan search quote dari database. Awalnya, kita bisa mencari quote berdasarkan cara insert (isManual) quote tersebut dan juga Bahasa quote tersebut. Namun yang sebenarnya (dan lebih utama) diimplementasi hanyalah pilihan mencari quote di database berdasarkan substring quote, substring nama penulis, atau source alamat website yang diinginkan. Perubahan tersebut terekam di dokumen ini.
Unit Test and Test Coverage
Kemarin, saya baru melakukan PHP Unit Test untuk konten dari halaman web about, documentation, dan Contact. Kini, saya akan mencoba untuk melakukan Unit Test di seluruh halaman dan elemen yang ada di halaman tersebut, seperti button dan form.
sekian testing yang saya lakukan.
