Knowledge Sharing — How to become great software engineer and UI designer

Error Code And Exception Handling

Error code merupakan hal yang sangat membantu developer dalam pengembangan aplikasi. Error code harus di definisikan secara konsisten. Sedangkan Exception Handling adalah proses menangani error ketika program komputer dijalankan. exception biasa terjadi ketika ada sebuah event yang secara tiba-tiba terjadi dan membutuhkan prosessing yang special.

Berikut ini adalah exception handling yang kami implementasikan pada front end kami

export function* getVouchers(requestData) {
  const token = sessionStorage.getItem('token');
  const options = {
    method: 'GET',
    headers: {
      'content-type': 'application/json',
      Authorization: `Token ${token}`,
    },
  };
  try {
    // Call our request helper (see 'utils/request')
    let pageUrl = '';
    if (requestData.page !== undefined) {
      pageUrl = `?page=${requestData.page}`;
    }
    const response = yield call(request, vouchersUrl + pageUrl, options);
    yield put(getVouchersSuccess(response));
  } catch (error) {
    yield put(getVouchersFailed(error));
  }
}

Ada beberapa konvensi untuk HTTP status code sesuai dengan http://www.restapitutorial.com/httpstatuscodes.html. yaitu sebagai berikut :

• 1xx Informational

100 Continue, 101 Switching Protocols, 102 Processing (WebDAV)

• 2xx Success

Respon yang biasa menyatakan bahwa HTTP status codenya sukses adalah 200 Ok , 201 Created , 204 No Content

• 3xx Redirection

300 Multiple Choices, 301 Moved Permanently, 302 Found, 303 See Other, 304 Not Modified, 305 Use Proxy, 306 (Unused), 307 Temporary Redirect, 308 Permanent Redirect (experimental)

• 4xx Client Error

Respon error yang biasa menyatakan bahwa HTTP status codenya error adalah 400 Bad Request, 403 Forbidden, 401 Unauthorized, 404 Not Found. Perbedaan yang jelas anatara 403 dan 401 response error adalah. 403 forbidden biasanya bersifat permanen, itu seperti server mengatakan “Saya tau siapa kamu, Saya percaya apa yang kamu katakan, tapi kamu tidak memiliki permission untuk mengakses resource ini”.

• 5xx Server Error

500 Internal Server Error, 501 Not Implemented, 502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout, 505 HTTP Version Not Supported, 506 Variant Also Negotiates (Experimental), 507 Insufficient Storage (WebDAV), 508 Loop Detected (WebDAV), 509 Bandwidth Limit Exceeded (Apache), 510 Not Extended, 511 Network Authentication Required

Berikut ini error code yang kami definisikan pada proyek kami :

Sumber :

• https://documenter.getpostman.com/view/304631/println-printtransaction/RVuACSkg
• https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322
• http://www.baeldung.com/global-error-handler-in-a-spring-rest-api

Refactoring & Design Pattern

Saya melakukan banyak sekali refactoring pada proyek ppl kami. Selain karena untuk membuat kode menjadi lebih mudah dibaca, refactoring digunakan untuk meningkatkan performa pada javascript. Performa javascript sangat ditentukan oleh jumlah panjang kode pada javascript, sehingga semakin banyak kode yang ada maka akan semakin jelek juga performa javascriptnya.

Saya melakukan refactoring pada komponen LoginPage yaitu dengan menggunakan prinsip Higher Order Component Design Pattern pada react.

export class LoginPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

...

const mapStateToProps = createStructuredSelector({
  loginPage: makeSelectLoginPage(),
});
const withConnect = connect(mapStateToProps, { loginRequest });
const withReducer = injectReducer({ key: 'loginPage', reducer });
const withSaga = injectSaga({ key: 'loginPage', saga });
const composed = compose(
  withReducer,
  withSaga,
  withConnect,
)(LoginPage);
export default reduxForm({
  form: 'login',
})(composed);

pada kode diatas LoginPage menerapkan HigherOrderComponent pada component Composed sehingga hanya perlu di export composed component. File yang terkait pada loginPage diatas adalah router pada app.js sehingga mengurangi redudancy

Menurut buku yang diulis oleh Martin Fowler yaitu dlam bukunya yang menjelaskan mengenai bagaimana cara meningkatkan design dari code yang telah ada.

Martin Fowler menyebutkan beberapa yang harus diperhatikan dalam merefaktor kode yaitu dalam bab 3 pada bukunya yang menjelaskan mengenai bad smells in code. Ada 22 Bad Smell in code tapi disini saya akan merangkumnya menjadi 10 saja yaitu :

1. Duplicated code

Struktur kode yang sama lebih dari 1

2. Long Method

Method yang panjang dan sulit untuk dipahami

3. Large Classes

Class yang melakukan hal terlalu banyak

4. Long Parameter List

Parameter yang jumlahnya panjang sehingga sulit untuk di mengerti

5. Divergent Change

Ketika sebuah kelas berubah dengan cara yang berbeda dan alasan yang berbeda

6. Shotgun Surgery

Setiap saat membuat perubahan kamu harus membuat sedikit peubahan untuk beberapa class yang berbeda

7. Feature Envy

Sebuah method lebih terlihat sangat menarik dalam sebuah kelas dibandingkan method yang lain

8. Data Clumps

Banyak data yang bergantung bersama

9. Primitive Obsession

menggunakan primitives types dibanding small objects.

10. Switch Statements

Terlalu banyak switch statement, seharusnya menggunakan polymorpishm.

berikut ini contoh refactoring yang saya gunakan sesuai dengan buku Martin Fowler

Pada kode diatas dilakukan efesiensi terhadap setiap saga yang ada di kontainer. sehingga tidak perlu dituliskan secara ulang seluruh api url yang digunakan.

Sumber :

HugoMatilla/Refactoring-Summary

Usabillity Testing

Usability Testing merupakan sebuah metode untuk mengevaluasi seberapa mudah sebuah website digunakan. Test menjadi menempatkan kedudukan tertinggi dalam seberapa intuitive dan seberapa mudah user menggunakan website kita. Oleh karna itu usabillity testing sangat diperlukan dalam mengembangkan produk.

Dalam mengembangkan produk println sebelum saya mengimplementasikan mockup dan beralih ke ranah development saya terlebih dahulu melakukan usability testing untuk memastikan apakah product yang saya kerjakan memiliki user experience yang baik atau tidak.

Usability testing sebaiknya dikerjakan sebelum mengimplementasikan kode dalam proyek printn mic ini karena apabila kita melakukan usability testing ditengah dan terdapat perubahan pada tengah-tengah pengembangan hal ini akan memperlambat pengerjaan sehingga sebaiknya usability testing dilakukan diawal atau diakhirdari development agar tidak membuang sebagian dari waktu development. usability testing yang baik biasanya dilakukan dalam skala perusahaan dilakukan sekitar 1 harian oleh seorang UI engineer dilakukan survey secara langsung dengan memilih beberapa user untuk dilakkan survey.

Pada usability testing kelompok saya, saya melakukan survey terhadap 5 orang yang memiliki background yang berbeda beda diantaranya sebagai berikut

1. Nadhifa Azzahra, Siswi Sd kelas 6, umur 13 tahun
2. Jamilah, Ibu Rumah Tangga, umur sekitar 40
3. Valentina Kania, Mahasiswa, umur sekitar 19 tahun
4. Nabila Laili, Mahasiswa umur sekitar 19 tahun
5. Ahmad Elang, Mahasiswa umur sekitar 20 tahun

Saya menyiapkan beberapa case sebelum melakukan usability testing yaitu :

1. Melakukan print dimulai dari login kemudian upload file dan print
2. Melakukan upload file dimulai dari login kemudian upload dari saved file dan melakukan print

Berdasarkan 2 case tersebut user mengalami beberapa kesulitan ketika melakukan print, yaitu posisi navbar yang membingungkan user. Sehingga melakukan refactoring terhadap desain seperti pada gambar dibawah ini :

Pada gambar diatas, sebelum dilakukan usability testing posisi navbar adalah sebagai berikut : Dashboard > Print > Logout.

Posisi tersebut menyulitkan user ketika melakukan print sehingga dilakukan refactoring dalam design.

Sekian blog yan dapat saya bagikan, semoga teman-teman dapat menjadi developer dan desainer yang baik.

have a nice day~ ^^