[Week 15] Finalisasi Lapak Beli

William Adjandra
LapakLaut
Published in
4 min readMay 15, 2018

Disini saya ingin menjelaskan sedikit tentang gitflow yang digunakan untuk membuat arahan bagi para developer dalam satu tim
Arahan ini diperlukan agar seluruh developer memiliki cara yang sama untuk menggunakan git terutama untuk dapat melakukan merging antar fitur
Pada gitflow adanya env sit_uat production dan juga branch lainnya sesuai dari fiturnya
Hal ini juga agar tidak adanya kerusakan antar fitur dan untuk menggabungkannya diperlukan rebase terlebih dahulu ke branch yang ingin digabung yaitu sit_uat untuk dapat menyamakan kedua branch tersebut sehingga conflict dapat diselesaikan.

Selain itu saya juga ingin menjelaskan sedikit tentang dua jenis arsitektur, yaitu monolitik dan service oriented.
arsitektuk Monolitik adalah arsitektur dimana seluruh kode dan database menjadi satu tempat.
sedangkan untuk service oriented adalah arsitektur dimana kodenya dan databasenya dapat terpisah-pisah sesuai dengan service yang diperlukan,
contohnya fitur login dan fitur melihat list produk dibuat dalam 2 kode dan 2 database yang berbeda. Fungsinya adalah ketika ada salah satu yang down/failed maka tidak semuanya rusak.
Pada PPL sekarang digunakan monolitik dan menurut saya cukup baik karena dilihat dari keterbatasan waktu, load, dan juga kemampuan dari setiap mahasiswa. untuk memakai service oriented sudah harus mapan dan mengerti penggunaan dan pembuatan API

8 Golden Rules

Strive for Consistency
Rule ini maksudnya untuk kesamaan dari tampilan dan juga dari step by step langkah yang dipilih dari usernya. Pada penerapannya kami sudah menyamakan warna-warna dan juga font yang digunakan. Seperti pada header dan footer digunakan warna dan font yang sama namun berbeda dengan isinya. Selain itu juga kesamaan dalam menampilkan konfirmasi pada formulir.

Offer informative feedback
Rule ini maksudnya untuk setiap aksi yang user lakukan harus ada jawaban informatif. Contohnya dapat terlihat pada validasi menambah lapak jual. Jika user memilih tombol menambah lapak maka akan divalidasi terlebih dahulu dan validasi tersebut akan menampilkan apa yang kurang dari pengisian form dan diberikan feedback yang sesuai dengan pengisian yang kurang tersebut.

Design dialog to yield closure
Rule ini maksudnya untuk setiap dialog/tahapan adanya penutupan. Contoh dari kode yang sudah saya bikin ada pada buat lapak jual disini ketika orang ingin untuk menambahkan lapaknya maka pada akhir dari penambahan akan ada suatu loading bar dan ketika loading bar dan tulisan sudah berhasil ditambahkan dan setelah sudah selesai maka akan kembali ke halaman lapak.

Offer simple error handling
Rule ini maksudnya untuk program dapat menampilkan error handling yang mudah dan jelas ke pengguna. Contoh yang ingin diterapkan untuk validasi pada halaman lapak jual dimana ketika ada yang kurang maka akan ada warna yang berbeda pada field yang belum diisi.

Support Internal Locus of Control
Rule ini maksudnya agar pengguna dapat secara bebas merasa memiliki kontrol dari software tersebut sehingga mereka tidak bingung untuk memilih tombol-tombol. Pada penerapan dikelompok kami semua tombol yang mengharuskan pengguna menekannya cukup terlihat jelas seperti tanda tambah yang ada pada halaman lapak, submit, search dan lain-lain. Dengan ini pengguna dapat merasa mengkontrol dan tidak bingung untuk menjalankan software tersebut.

Reduce short-term memory load
Rule ini maksudnya agar pengguna tidak terlalu banyak harus berpikir untuk dapat menggunakan software yang digunakan karena ada keterbasan memory load manusia. Disini diterapkan pada penambahan lapak jual lebih banyak pilihan dropdown sehingga pengguna bisa langsung memilih tanpa harus berpikir jenis tangkapan mereka apa, jenis satuan yang digunakan apa, nama ikan yang mereka tangkap apa. Mereka dapat langsung memilih dan submit.

Dan ada dua lagi yang belum diterapkan, yaitu Enable frequent users to use shortcuts dimana user yang sudah sering menggunakan dapat menggunakan shortcut dengan mudah agar navigasi dapat lebih cepat dan Permit easy reversal of actions dimana adanya reversal/undo yang mudah ketika salah menginput data.

Pada minggu ini saya memfokuskan pengerjaan pada pembuatan lapak beli karena ada beberapa hal yang perlu diubah dan ditambahkan

Selain itu sebelumnya dalam memasukkan gambar saya tidak membuat sebagai suatu promise. Dimana promise ini digunakan untuk membuat suatu kode yang asynchronous berarti kode tersebut akan berjalan sendiri tanpa urutan yang berdasarkan kodenya.
Jika kode asynchronous tidak dibuat dalam suatu promise maka jika kode yang dijalankan dan mengalami error maka akan diresolve dengan promise tersebut.

Ini adalah contoh dari promise untuk pembuatan blob gambar
Untuk pembuatan promise pada dasarnya adalah return new Promise((resolve, reject) =>{
//disini dituliskan kode asynnya
//makesomething})
.then((ret)=>{
//Use the ret val the return something else
or resolve to close it with “resolve(ret)”})
.catch((err)=>{reject(err)})

Selain itu saya juga menambahkan testing dengan menggunakan react-native-test-utils untuk dapat mengambil data dengan CSS, contohnya
let view = rendererUtil(<BuatLapakJual />)
let textInputView = view.query(“TextInput[id=’title’]”)
textInputView.simulate(‘changeText’, ‘Dijual ikan salmon’)
expect(view.state().title).toEqual(“Dijual ikan salmon”)
Dengan kode ini kita dapat mencari text input dengan id title dan kemudian dapat disimulasikan untuk diisi. Disini setiap kita changeText maka state dari title akan berubah sesuai dengan textnya maka jika expect seperti diatas akan benar. Simulate juga tidak hanya untuk mengganti text namun juga dapat press dan lain-lain.

Selain itu dengan react-native-test-utils juga dapat menggunakan fungsi dengan cara seperti dibawah ini
let view = rendererUtil(<BuatLapakJual />)
let BuatFunc = renderer.create(<BuatLapakJual />).getInstance();
expect(BuatFunc.onInputNumeric(“asw12412414”)).toEqual(“12.412.414”)
Dengan kode diatas dipanggil onInputNumeric dimana kode ini mengubah semua isi menjadi numeric saja dan diberikan “.” setiap ada 3 digit kemudian direturn. Sehingga dengan kode diatas dapat dipanggil fungsi tersebut dan hasil returnnya juga dapat di periksa.

--

--