Weekly Progress 3 — Wiring FrontEnd and BackEnd

Pada post kali ini saya akan membagikan mengenai progress saya pada minggu ke 9 PPL ini

What Have I Done ?

Pada minggu kesembilan ini saya menyelesaikan banyak task diantaranya membuat halaman login-logout, membuat tampilan edit profile, top up admin, fix seluruh navbar dan yang paling penting dilakukan adalah mengintegrasikan semua front-end yang kami kerjakan dengan REST API yang telah dibuat oleh tim backend.

Masih menggunakan React-boilerplate sebagai base code, kami membuat halaman login pada branch login-logout yang sebelumnya diambil dari branch sit_uat yang sudah di merge dengan branch register.

Post ini akan dibagi menjadi 2 buah sesi yang pertama mengenai bagaimana cara membuat tampilan static menggunakan react dan styled component. Yang kedua mengenai menghubungkan frontend dan backend menggunakan redux-saga.

Membuat static pages menggunakan React dan Styled-Component

Pada minggu kesembilan ini saya membuat beberapa static pages diantaranya edit profile page, top up admin page dan navbar untuk user dan admin. Kami menggunakan styled-component yaitu sebuah library yang disediakan oleh react untuk styling aplikasi kami dengan mudah. Styled component memiliki beberapa keunggulan diantaranya dapat melakukan theming dan support server-side rendering

berikut ini merupakan theming yang kami lakukan yang kami sesuaikan dengan UI Style Guideline yang kami buat

dan berikut ini bagaimana kami mengimplementasikan styled component pada edit profile pages

dengan menggunakan styled component tersebut kita dapat mengubah styling dari css hanya dengan menginisiasi objek yang akan membungkus komponen dan kemudian akan merender komponen sesuai dengan styled component yang telah di definisikan

gambar diatas merupakan tampilan dari halaman edit profile yang telah di implementasikan

Menghubungkan Front-end dan Back-End menggunakan react-redux

Untuk menghubungkan antara aplikasi front-end yang kami buat dengan rest api yang dibuat oleh tim backend kami menggunakan library react-redux. Redux merupakan sebuah library yang dapat mempermudah dalam management state dan data-flow. Kami juga menggunakan library redux-saga yaitu sebuah library untuk mengatur side-effect yang dihasilkan dari mengakses browser data ataupun dispatching sebuah actions.

Untuk memanggil API kami membuat 4buah fungsi yang dipisahkan dalam 4 buah file yaitu actions, reducer, selector dan saga.

Action pada Login Page

Fungsi diatas akan dipanggil apabila LOGIN_REQUEST, LOGIN_SUCCESS atau LOGIN_FAILED dispatched

Reducer pada Login Page

Setelah fungsi action maka reducer akan bekerja. Reducer merupakan sebuah fungsi yang akan mengembalikan state

saga pada Login Page

Saga merupakan middleware yang akan menghandle side-effect dari dispatching

selector pada login page

selector digunakan untuk membaca sebuah value dari state

jadi data-flow dari redux diatas adalah

dispatch(action) -> reducer -> new state -> re-render

What have I learnt ?

• Redux in depth
• Styled-Component
• Data-Flow in Redux
• Redux Store management

What problem did I encounter ?

Masalah yang saya temukan ketika menghubungkan front-end dan back-end adalah tidak biasanya saya dalam menggunakan react-redux

What am I going to do next?

Membuat halaman Print Pages