Fakultas Ilmu Komputer UI

Commit 51fd0498 authored by Ragil Al Badrun Pasaribu's avatar Ragil Al Badrun Pasaribu
Browse files

Refactor blog post

parent bdf345c2
Pipeline #11204 passed with stages
in 3 minutes and 42 seconds
......@@ -15,14 +15,14 @@ Apa itu UI toolkit? Gampangnya, Blueprint menyediakan component-component yang s
Blueprint juga menyediakan styling dalam bentuk SASS yang bisa kita gunakan untuk menyamakan skema warna atau size untuk font.
![blueprint docs](/assets/images/blueprint-docs.png)
![blueprint docs](/assets/images/2019-03-20-blueprint-js/blueprint-docs.png)
Dokumentasi lengkap tersedia di [sini](https://blueprintjs.com/docs/).
Cara kami mengintegrasikan Blueprint di project kami adalah dengan membuat sebuah component baru yang memakai component-component yang sudah disediakan oleh Blueprint.
Contohnya adalah Navbar. Kami membuat component bernama CoolNavbar yang mengembalikan component Navbar milik Blueprint yang sudah disesuaikan isi dan propsnya. Dengan demikian, ketika kami ingin memanggil navbar kami tidak perlu menulis ulang semua isi dan propsnya, sehingga kode kami lebih modular.
![navbar code](/assets/images/navbar-code.png)
![navbar code](/assets/images/2019-03-20-blueprint-js/navbar-code.png)
Lalu jika stylenya masih belum sesuai, kami menambahkan class baru pada component yang diinginkan dan menuliskan style yang sesuai di sebuah file SASS tersendiri.
......
......@@ -15,7 +15,7 @@ Setelah Ragil membuat _project_, ia mulai mengundang kami untuk berkolaborasi. S
Yang kami lakukan selanjutnya adalah mengubah _password_ akun milik Ragil, dan membagikannya ke semua anggota tim. Dengan begitu, semua orang bisa berkolaborasi secara _real time_. Namun kelemahannya adalah ketika kami membuka _project_ bersamaan akan ada beberapa Ragil yang muncul dan tidak bisa dibedakan siapa yang melakukan pengubahan.
![ada banyak ragil](/assets/images/figma-multiple.png)
![ada banyak ragil](/assets/images/2019-03-20-figma-for-broke-college-student/figma-multiple.png)
Lalu apa yang bisa dilakukan di Figma? Menurut saya, Figma sangat mirip dengan aplikasi image editor, namun khusus untuk membuat _mockup_.
......
......@@ -16,12 +16,12 @@ Pada fitur login dan logout, kami memutuskan untuk menggunakan Django REST Frame
Agar dapat mengimplementasikan fitur logout, saya menambahkan penggunaan REST_FRAMEWORK (TokenAuthentication dan SessionAuthentication) pada file settings.py
Pembuatan tes untuk fitur ini saya buat pada dua buah kondisi, yaitu saat pengguna mengakses /logout/ dalam keadaan belum dan sudah ter-logout.
Sedangkan untuk dapat menjalankan tesnya dengan baik, saya menambahkan fungsi baru berupa post pada file views.py yang akan mengambil token dari pengguna lalu dihapus.
![](/assets/images/logout.png)
![](/assets/images/2019-03-21-gmt/logout.png)
Pada fitur pembuatan endpoint server, kami menggunakan DjangoModelFactory untuk membuat data dummy dan Serializer agar data yang kompleks dapat dikonversi ke dalam datatype milik Python sehingga dapat dirender ke dalam konten lain.
Untuk pengetesannya sendiri, saya mengikuti pengetesan pada fitur logout, yaitu saat pengguna mengakses /servers/ dalam keadaan belum dan sudah ter-logout.
Sedangkan untuk dapat menjalankan tesnya dengan baik, saya menambahkan path baru yang mencakup servers.urls pada file urls.py
![](/assets/images/model.png)
![](/assets/images/2019-03-21-gmt/model.png)
Pada fitur paginasi, saya hanya membuat tes yang akan membandingkan panjang dari data yang diterima serta menambahkan penggunaan pagination pada file views.py, ukuran page sebanyak 20 pada settings.py, dan kelas inner meta untuk membantu pengurutan ketika pagination berdasarkan id
![](/assets/images/page.png)
\ No newline at end of file
![](/assets/images/2019-03-21-gmt/page.png)
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment