Laporan Progres Alih Kredit

Nama    : Riza Dwi Andhika

NRP      : 05111940000149

Kelas    : Pemrograman Web A 2021

Pada laporan ini saya akan melaporkan progres kegiatan yang telah saya lakukan selama mengikuti kegiatan MBKM Studi Independen pada Alterra Academy. Sebelumnya, pada kurikulum Alterra Academy sendiri secara umum terbagi menjadi tiga yaitu: 

1. front-end (23 Agustus 2021 - 8 Oktober 2021) 
2. back-end (18 Oktober 2021 - 3 Desember 2021)
3. capstone project (6 Desember 2021 - 31 Januari 2022)

Jadi pada laporan progres ini berisikan progres untuk materi front-end yang telah saya pelajari.

Di akhir kurikulum front-end ini saya diberikan penugasan mini-project dengan membuat aplikasi web yang menerapkan ilmu-ilmu yang sudah dipelajari. Berikut ini adalah aplikasi web yang telah saya kerjakan berserta souce code dan desain antarmuka aplikasi:

• Aplikasi: https://mini-project-rizadwi.netlify.app/
• Source code: https://github.com/rizadwiandhika/mini-project-alterra
  
• Desain antarmuka pengguna: https://www.figma.com/file/MgvGtMSlpQo4oqWcmPcNwK/mini-project

Penjelasan dari aplikasi project tersebut dapat dilihat pada laporan minggu keenam & ketujuh dibawah.

Minggu pertama

Pada minggu pertama Studi Independen di Alterra Academy ini, saya mempelajari berbagai macam konsep dalam membangun front-end website, yaitu UI/UX, HTML, CSS, dan Bootstrap sebagai framework dari CSS. 

Dalam topik UI/UX, saya memahami alur dalam mendesain UX suatu produk, mulai dari emphatize, define, ideate, prototype, dan validate. Dari segi UI, untuk bisa menciptakan UI yang baik harus terpenuhinya 4 pilar UI yaitu consistency, keep the interface simple, good typography, dan offer informative feedback. Selanjutnya saya mempelajari prototype dimana fungsinya itu adalah untuk mendapatkan feedback dari user, stackholder, serta tim dan juga untuk menunjukan interaksi & flow kepada developer. Adapun pilar dalam prototype ini, yaitu representation dimana desain dibuat (misalkan mobile atau desktop), precision, dan interactivity. 

Selain itu pada topik HTML, saya mempelajari pembuatan kerangka website menggunakan HTML. Adapun kegunaan HTML seperti untuk membuat struktur website, mendefinisikan elemen website, membuat tabel, membuat form, dan menambahkan gambar, dan lain-lain. Selain itu dilakukan juga pembelajaran & praktik menggunakan berbagai macam tag yang ada pada HTML5 ini seperti html dan body sebagai tag utama, div sebagai tag container, span, p, h1 - h6 sebagai tag untuk membuat text , a sebagai tag untuk membuat link URL, form, label, input, textarea untuk mendapatkan input dari user, dan lain-lain. 

Masuk pada styling sebuah website, CSS (cascading style sheet) digunakan untuk menghias HTML. Untuk menyambungkan CSS dengan HTML terdapat tiga cara, yaitu: 

1. Inline pada tag HTML 
2. Menggunakan tag <style> 
3. Menggunakan external CSS dan menghubungkannya dengan <link>

Setiap elemen HTML dapat dikenakan CSS-nya sendiri-sendiri, adapun cara untuk meberikan CSS pada suatu elemen adalah dengan menarget elemen tersebut yaitu mendefinisikan selectornya (bisa dari nama tag HTML, class, id, dan lain-lain). CSS tersebut memiliki berbagai macam properti dan setiap properti memiliki beragam nilai. Selain itu, dipelajari juga framework bernama Bootstrap untuk mempercepat dekorasi karena Bootstrap telah menyediakan berbagai template komponen dengan stylingnya sendiri-sendiri. Cara kerja bootstrap ini adalah dengan memberikan nama class yang sudah didefiniskan oleh Bootstrap kepada elemen HTML yang diinginkan, maka elemen tersebut akan memiliki styling sesuai nama class tersebut yang ada di Bootstrap. Terlebih lagi, dipelajari konsep penting dalam Bootstap yaitu sistem grid yang dimilikinya dimana kolom suatu kontainer akan berjumlah dua belas.

 

Minggu kedua

Pada kegiatan minggu ke dua (30 Agustus 2021 - 3 September 2021) secara general membahas lebih dalam mengenai javascript. Javascript adalah bahasa pemrograman high-level, scripting, untyped, dan interpreted. Javascript ini dimanfaatkan untuk berinteraksi dengan halaman web. Konsep-konsep penting yang dipelajari seperti pendeklarasian variable menggunakan keyword var, let, dan const. Selain itu juga dipelajari perbedaan antara ketiganya. Adapun tipe data pada javascript yang terbagi menjadi dua yaitu primitive (string, boolean, number, bigInt (ES11), undefined, null, symbol (ES6)) dan objects (object, array, function, date, set, map, weak set, weak map). Destructuring pula menjadi konsep yang penting dan berguna, dimana kita bisa menarik elemen pada array atau attribute pada object kedalam suatu variable. Selain itu dipelajari juga beberapa penggunaan method seperti concat, map, foreach, slice, filter, reduce. 

Konsep javascript yang cukup penting seperti async await pun dibahas. Asynchronous sendiri merupakan hasil eksekusi yang tidak selalu berurutan berdasarkan urutan kode, tetapi berdasarkan waktu proses. Bentuk asynchronous ini biasanya berupa promise pada javascript. Adapun fungsi asynchronous dimana di dalam fungsi tersebut kita bisa menggunakan keyword await untuk menunggu promise sampai selesai terlebih dahulu, baru kemudian lanjut eksekusi baris kode dibawahnya. 

Dengan menggunakan pula javascript, kita dapat melakukan manipulasi DOM (document object model). DOM ini merupakan API untuk HTML yang merepresentasikan halaman web pada suatu dokumen menjadi sebuah object. Adapun beberapa method penting yang dipelajari untuk melakukan suatu task seperti: 

1. Selection document, yaitu memilih dokumen yang ada pada HTML. Method yang bisa digunakan adalah getElementById(), getElementsByTagName(), getElementsByClassName(), querySelector(), dan querySelectorAll(). 
2. Manipulasi dokumen yang ada. Contoh penggunaannya seperti mengubah isi dari tag HTML yang ada maupun merubah styling css. 
3. Event document, yaitu aksi yang dilakukan ketika suatu event terjadi. Beberapa event yang dipelajari yaitu click, change, blur, mouseover, mouseout, dan copy. 

Cara meregister event tersebut bisa dengan cara menggunakan method bernama addEventListener pada object dokumen. Pada minggu ini juga diperkenalan pada nodeJS. NodeJS dapat digunakan sebagai server aplikasi web dan untuk mempermudah implementasi server tersebut digunakan framework NodeJS untuk server web bernama express. Bersama nodeJS ada pula npm (node package manager) dimana dengan ini kita dapat menginstall library atau package yang berguna untuk mempercepat proses development. 

Adapun perkenalan mengenai library ReactJS yang dapat digunaakan untuk membangun fron-end sebuah web. Jika hanya meggunakan javascript, manipulasi DOM akan menjadi susah ketika project sudah berskala besar, karena perlu memperhatikan state-state dari DOM yang ada. Oleh karena itu ReactJS menghandlenya untuk kita sehingga setiap terjadi perubahan state, maka ReactJS akan melakukan rerendering dengan cara membandingkan perbedaan state sebelum dan sesudahnya. Ini dimungkinkan karena ReactJS sendiri memiliki virtual DOM untuk melakukan semua hal tersebut. 

 

Minggu ketiga

Pada kegiatan minggu ketiga (6 September 2021 - 10 September 2021) secara umum membahas penggunaan dasar dari library react untuk membangun front-end sebuah aplkasi web. Adapun beberapa materi dan tugas yang berkaitan dengan react dipelajari mulai dari penggunaan JSX pada javascript, komponen, lifecycle, state, event handler, react hooks, routing, dan form pada react. 

Dengan menggunakan react, kita dapat membangun aplikasi satu halaman (single page application). Sesuai namanya dimana aplikasi web hanya memiliki satu halaman tetapi dengan isi konten yang dapat berubah-ubah sesuai yang sudah dirancang. Aplikasi satu halaman ini dapat mempercepat proses memuat halaman karena rendering dilakukan di sisi client. Oleh karena itu penting untuk dapat memahami konsep dari library react. 

Untuk membangun komponen HTML pada aplikasi react, kita melakukannya di dalam file javascript menggunakan syntax JSX. Syntax ini memiliki bentuk mirip seperti HTML pada umumnya, tetapi dengan beberapa perbedaan. Kita dapat mendekomposisi komponen-komponen yang ada pada sebuah aplkasi dengan menyimpannya pada file javascript lalu melakukan export pada komponen tersebut sesuai kebutuhan. Dalam cara kerjanya, react memiliki daur hidup atau lifecycle yang berguna untuk melakukan render UI dengan state yang berbeda sehingga tampilan UI akan selalu update. Kita juga dapat mendaftarkan sebuah aksi untuk event tertentu kepada suatu komponen. 

Berikutnya konsep penting dan baru pada react adalah hooks. Dengan react hooks memungkinkan kita untuk membuat stateful komponen (komponen yang memiliki state) pada functional component. Beberapa hooks inti pun dibahas mulai dari useState yaitu hooks yang digunakan untuk membuat state pada functional component, useEffect untuk melakukan side-effect seperti melakukan query pada server, dan useRef untuk menyimpan refrensi suatu nilai seperti menyimpan refrensi elemen JSX yang ada. 

Untuk melakukan routing atau perpindahan dari suatu halaman ke halaman lain pada aplikasi satu halaman menggunakan react ini digunakan library bernama react-router-dom. Dengan library tersebut kita dapat seolah-olah berpindah dari halaman satu ke halaman lainnya tanpa melakukan reloading atau request ke server, hal ini karena proses rendering dilakukan pada sisi client. Library ini bekerja dengan cara mencocokan url yang ada dengan komponen yang ingin dirender aplkasi kita. 

 Selanjutnya dipelajari juga bagaimana cara menangani form pada react. Dengan react umumnya kita membuat form menjadi sebuah stateful komponen dimana state komponen tersebut berisikan state dari form seperti value suatu field pada form. Untuk melakukan hal tersebut, kita wajib mengimplementasikan event handler untuk setiap field ketika terjadi perubahan, yang mana kita menyimpan value terbaru kedalam state komponen sehingga value form akan selalu terupdate. 

 

Minggu keempat

Pada kegiatan minggu keempat (13 Agustus 2021 - 17 September 2021) secara umum membahas lebih dalam lagi pengguaan react dalam membangun front-end aplkasi web serta pengelanan graphQL. Materi utama react yang dibahas yaitu global state management menggunakan redux, testing pada aplikasi react, membagun (build) aplikasi, deployment aplikasi pada internet, dan praktik menggunakan graphQL. 

Global state merupakan state yang dapat diakses oleh seluruh component yang ada pada aplikasi react kita. Library yang biasa dipakai untuk global state management adalah redux. Terdapat 3 hal penting pada redux yaitu action, reducer, dan store. 

Store sendiri merupakan object sentral yang menyimpan state aplikasi. Action digunakan untuk memberikan informasi kepada store, action ini berbentuk object yang wajib memiliki attribute "type" yang menjadi acuan aksi pada reducer. Reducer adalah fungsi javascript yang menerima action dan global state saat itu lalu mengembalikan state terbaru untuk disimpan. Umumnya reducer akan menggunakan informasi "type" untuk menentukan tindakan yang ingin dilakukan berkaitan dengan global state. Untuk menggunakan/mengubah state ini dapat menggunaakan hooks atau connect pada component react yang diinginkan. 

Adapun batasan penggunaan redux yaitu tidak dapat melakukan asyncronous untuk melakukan logika pengaturan state. Oleh karena itu dapat digunakan library bernama redux-thunk sehingga kita dapat melakukan asyncronous code. Selain itu, jika kita ingin agar global state tersimpan pada local storage browser, library redux-persist dapat mengatasi hal tersebut, sehingga kita tidak perlu secara manual mengatur penyimpanan ke local storage. 

Testing sendiri dilakukan menggunakan library yang sudah ada pada project ketika project diinstall menggunakan create-react-app. Dalam melakukannya kita dapat membuat file dengan eksetensi "test.js" lalu menjalankan perintah "npm run test". Perintah tersebut sudah ada bersamaan ketika kita menginstall aplikasi react menggunakan create-react-app. Untuk melakukan testing kita dapat menggunakan fungsi bernama describe yang menerima argumen string label dan fungsi callback. Fungsi callback tersebut akan dijalankan dengan label pada argumen pertama. Di dalam callback, kita dapat menggunaakn fungsi bernama test ataupun it. Kedua fungsi ini akan menerima argumen string label dan fungsi callback juga yang akan dijalankan. Di dalam callback ini lah (callback pada fungsi test atau it) kita melakukan testing seperti melakukan check apakah suatu elemen benar-benar ada pada halaman maupun apakah aplkasi berjalan dengan benar ketika suatu panggilan API telah selesai. 

Untuk melakukan build aplikasi source code react kita yang diinstal menggunakan create-react-app dapat menjalankan perintah "npm run build". Perintah tersebut akan menghasilkan folder bernama "build" yang didalamnya adalah source code aplikasi yang sudah dioptimisasi. 

Untuk deployment sendiri dapat menggunakan layanan bernama surge dan netlify. Pada surge, caranya adalah: 

1. Pastikan surge sudah terinstall secara global. (install: npm i -g surge) 
2. Jalankan perintah "surge" 
3. Login menggunakan akun surge 
4. Arahkan project menuju directory "build" yang sudah di-build sebelumnya 
5. Tentukan domain web. 

Selanjutnya adalah materi mengenai graphQL. GraphQL merupakan bahasa query untuk API dan runtime sisi server untuk mengeksekusi query dengan menggunakan sistem yang kita definisikan untuk data kita. Dengan graphQL ini kita dapat meminimalisir besarnya data yang harus ditransfer melalui jaringan. Terdapat tiga fitur utama graphQL untuk client yaitu query yang gunanya untuk mendapatkan data, mutation yang berguna untuk melakukan insert update delete data, dan subscription untuk mendapatkan updatedata secara real time. Untuk pengenalan menggunakan graphQL disini digunakan platform website hasura.io. Sebelum praktik, peserta membuat sebuah database dan tabel-tabel yang diperlukan terlebih dahulu menggunakan heroku melalui hasura.io. Setelah database berhasil dibuat, kita dapat melakukan testing graphQL.  

 

Minggu kelima

Pada kegiatan minggu kelima (20 Agustus 2021 - 24 September 2021) secara umum membahas mengenai GraphQL. GraphQL adalah bahasa data query dan manipulasi untuk APIs. Dengan menggunaakn graphql kita dapat melakukan request data baik untuk mendapatkan data (query) ataupun untuk memodifikasi data (mutation). Selain itu, dengan graphql ini memungkinkan adanya subscription yaitu mendapatkan informasi real-time dari perubahan data yang terjadi. 

Untuk mengimplementasikannya pada aplikasi react, kita dapat menggunakan library bernama apollo client. Apollo client merupakan library yang dapat mendukung graphql didala aplikasi react kita. Untuk penggunaannya pertama-tama kita harus memiliki end-point data. Disini kita menggunakan platform hasura (hasura.io) yang dapat digunakan sebagai database sekaligus end-point graphql. Ketika kita membuat database dengan hasura, kita bisa mendapatkan end-point graphql yang dapat digunakan pada aplikasi react menggunakan apollo client. 

Untuk mendefinisikan query graphql baik untuk pengambilan data, mutasi, atau subscription, kita dapat mengguanakn bantuan dari platform hasura. Pada dasarnya query graphql yang dibangun menggunaakn hasura dapat dibentuk menggunakan logika query SQL, lalu harusa dapat mentranslate menjadi query graphql yang siap digunaakan. 

 

Minggu keenam

Pada minggu keenam (27 September 2021 - 1 Oktober 2021) secara umum adalah kegiatan perencanaan, pengerjaan, dan konsultasi mini project aplikasi web dengan mengimplementasikan materi-materi fron-end yang selama ini telah dipelajari seperti UI/UX, HTML, CSS, React, dan GraphQL. Pada mini project front-end ini saya berencana membuat sebuah aplikasi artikel online dimana user dapat menuliskan artikel dan melakukan publish. 

Langkah pertama yang saya lakukan adalah dengan membuat desain antarmuka pengguna (UI) menggunakan software figma. Saya membuat beberapa halaman yaitu halaman depan, halaman mencari article, halaman membaca artikel, halaman user, dan halaman membuat & publish artikel. 

Kemudian setelah medapatkan persetujuan dari desain dan konsep yang direncanakan, saya mulai mengimplementasikan membuat aplikasi. Progres yang saya lakukan adalah menganalisis dan membuat komponen-komponen yang reuseable atau dapat dipakai berkali-kali. Setelah komponen tersebut jadi, saya membuat halaman-halaman yang telah didesain sebelumnya. Lalu saya juga mempersiapkan schema database SQL pada hasura.io supaya nanti dapat dibentuk query GraphQL. 

 

Minggu ketujuh

Pada minggu ketujuh (4 Oktober 2021 - 8 Oktober 2021) secara umum adalah kegiatan pengerjaan  & presentasi mini-project front-end yang telah dirancang dan disetujui oleh mentor pada minggu sebelumnya. Pada mini project ini saya membuat sebuah aplikasi web bernama FREETICLES. FREETICLES adalah aplikasi dimana user dapat menulis artikel dan melakukan publish sehingga user lain dapat membaca sekaligus berinteraksi seperti memberikan like maupun komentar pada artikel yang telah dipublish. Selain itu aplikasi ini juga dapat melakukan pencarian artikel menggunakan suatu keyword yang diberikan oleh user, kemudian aplikasi akan memberikan artikel-artikel yang relevan sesuai dengan keyword pencarian. Aplikasi ini juga menyediakan fitur untuk dapat menyimpan artikel untuk dijadikan bookmark sehingga ketika user ingin membaca suatu artikel nanti, user dapat dengan mudah melihat list artikel yang telah disimpannya. 

Pada aplikasi ini digunakan teknologi react js dalam membangun front-end web, graphql sebagai teknologi untuk melakukan manipulasi data yang disimpan pada database, dan firebase untuk menyimpan file foto yang diupload user ketika membuat sebuah artikel. 

Untuk dapat menulis dan berinteraksi dengan artikel yang ada, user perlu membuat sebuah akun terlebih dahulu. Setelah itu user dapat menggunakan fitur-fitur yang ada pada apliaksi seperti yang telah disebutkan sebelumnya. Meskipun demikian, user yang tidak memiliki akun masih tetap dapat menggunakan aplikasi, tetapi hanya terbatas untuk mencari dan membaca artikel yang ada saja. 

 

Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Sekian dari saya, terima kasih atas perhatiannya.