I'm updating this topic, please stay tuned! 🙏

Big Misconceptions about Bare Metal, Virtual Machines, and Containers

Tulisan ini adalah bagian dari serangkaian materi dari Advisory Program BCA, untuk 


Container has been around and popular nowadays. The benefits of it are inescapable. Let’s try to make our application as a container using Docker. The end result is a Docker image file that we can share and run anywhere!

Advisory Program 2022 (Chapter 4) - Containerize Your App!

kita perlu terlebih dahulu melakukan modifikasi pada database kita. Pertama, tabel 

ini akan kita isi dengan informasi user yang akan diambil dari tabel 

. Data user ini juga akan kita gunakan untuk fitur login ke aplikasi sebelum aplikasi dapat digunakan. Dengan mekanisme seperti ini, skenario otentikasi dan otorisasi aplikasi yang kita harapkan akan menjadi sebagai berikut.

User harus melakukan login terlebih dahulu sebelum dapat melihat, menambah dan mengubah data.

Data yang dilihat, ditambah dan diubah adalah data spesifik per user.

User tidak dapat melihat, mengubah atau menambah data milik/untuk user lain.

Dengan desain tersebut, yuk pertama ubah tabel 

Kemudian kita lengkapi dahulu fungsionalitas dari entitas 

 akan digunakan untuk melakukan pengecekan apakah user  terdaftar / tidak melalui 

 akan digunakan untuk pencarian data user berdasarkan username tertentu. Hal ini bisa kita gunakan untuk pengecekan apakah user dengan username yang dimaksud terdaftar atau tidak, serta proses pendaftaran user agar tidak ada username yang sama.

 digunakan untuk fungsi login dengan mencocokan username dengan password yang dikirim.

Kita tambahkan fungsi registrasi user pada 

 layer dari entitas User sebagai berikut.

Nah, mari kita coba untuk membuat data user.

Setelah fungsional modul User berjalan dengan baik, saatnya kita lakukan modifikasi ke fitur Todo kita untuk dimanfaatkan sebagai otentikasi dan otorisasi.

Modifikasi yang akan kita lakukan pada API Todo kita adalah deteksi user yang mengakses/

/tidak. Pertanyaannya, melalui apa akan kita terima informasi tersebut? Apakah melalui 

? Sebenarnya sah-sah saja kita lakukan dengan cara itu, tapi perlu kita ingat bahwa komponen dalam HTTP 

yang digunakan untuk tujuan otorisasi seperti ini biasanya dilakukan melalui komponen 

. Cara ini juga memberikan benefit bagi kita untuk tidak menerima 

pada HTTP Header, Java telah menyediakan 

. Dengan demikian, kita akan mem-validasi terlebih dahulu 

 pada header, dan mencocokannya ke dalam data user.

source code TodoController.java yang sudah ditambahkan HttpServletRequest

source code TodoService.java yang sudah ditambahkan pengecekan user

Dengan ditambahkannya pengecekan ini, tentu kita juga perlu memodifikasi request payload kita agar dapat berjalan lancar. Melalui Postman, kita dapat menambahkan HTTP Header seperti ini.

Tambahkan beberapa data contoh dan lakukanlah tes 

dan dapat kita lihat bahwa API kita dapat berjalan dengan baik sesuai dengan skenario nomor 2, yaitu "Data yang dilihat, ditambah dan diubah adalah data spesifik per user".

Selanjutnya, kita juga perlu memodifikasi aplikasi Angular kita. 

Dimulai dari yang paling mendasar dahulu, mari kita buat component untuk fungsi signin dan signup pada frontend.

Aplikasi kita saat ini sudah dapat digunakan, namun semua orang dapat melihat dan mengubah data. Padahal seharusnya, item to-do adalah milik orang per orang. Bagaimana mengatasinya? Pada bagian ini, kita akan menambahkan fungsi autentikasi dan otorisasi pada aplikasi kita, serta melakukan skenario 

Advisory Program 2022 (Chapter 3) - Securing Our Application

, di tulisan ini saya tidak menjelaskan mengenai tutorial Angular. Namun apa yang saya jelaskan lebih ke bagaimana implementasi 

tertentu pada aplikasi sederhana dan integrasinya berdasarkan konsep yang dibahas, seperti misalnya model arsitektur BFF (

Hal ini saya tujukan karena materi seperti tutorial-tutorial tersebut sangat mudah 

. Nyatanya, saya sendiri pun belajar banyak dari platform-platform tersebut. Akan sangat memakan waktu dan tenaga apabila saya berusaha membuat tutorial serupa yang berulang dimana saya sendiri tidak begitu yakin bahwa 


Ditambah lagi, saya ingin berfokus pada hal-hal lain yang lebih diperlukan pada dunia industri profesional. Misalnya seperti desain arsitektur aplikasi, 

, tips & trik, atau bahkan sekedar memperkenalkan 

atau teknologi yang mungkin belum dikenal sebelumnya namun banyak digunakan di pekerjaan nantinya.

peserta program untuk dapat lebih dahulu mempelajari konsep dasar dari 

yang akan digunakan, misalnya seperti mengerti konsep dasar Java, OOP, JavaScript, database, dll. Hal ini akan membantu 

dalam mengikuti program ini dengan lebih efektif.


Sebagai permulaan, untuk kamu yang belum familiar dengan framework Angular, kamu dapat memulai belajar melalui referensi ini:


Kalau kalian lebih suka menonton video tutorial, video ini adalah salah satu yang cukup lengkap dan mendasar untuk pemula yang dapat saya rekomendasikan.

Angular For Beginners

mengetahui tentang dasar ES6 (ECMAScript 2015) karena untuk mayoritas pemrograman JavaScript hari ini menggunakan versi ES6. Untuk ES6 sendiri, saya merekomendasikan artikel ini:

Untuk dapat memulai pemrograman dengan Angular, kita terlebih dahulu harus menginstall Angular CLI. Dan untuk dapat menginstall Angular CLI, kita harus terlebih dahulu menginstall NodeJS, karena kita membutuhkan 

. Saya rekomendasikan untuk menginstall versi LTS (

). Setelah selesai menginstall NodeJS, kita dapat memastikannya melalui terminal dengan 

Kemudian langkah selanjutnya adalah menginstall Angular CLI. Sesuai 

Apabila sudah selesai, pastikan dengan version check:

ada yang menggunakan versi seperti saya dan mendapatkan warning seperti berikut:

Hal ini terjadi karena versi Angular CLI yang saya gunakan adalah versi 13. Sedangkan NodeJS saya versi 18 yang tidak di-

oleh Angular CLI versi tersebut. Support NodeJS 18 hadir pada Angular 15. Namun tidak serta merta bahwa kita tidak dapat melakukan 

karena hal ini. Memang saat melakukan build kemungkinan besar akan terjadi error. Namun hal itu akan kita atasi pada 

bukanlah hal sepele yang dapat dilakukan sewaktu-waktu. Malahan tidak jarang perusahaan tidak melakukan 

karena khawatir kalau aplikasi mereka malah tidak bisa digunakan karena faktor 

dapat kalian ganti sendiri sesuai preferensi. Akan ada beberapa pertanyaan yang perlu kita jawab sebelum Angular CLI men-

dapat mengikuti pilihan saya seperti berikut ini.

, aplikasi Angular akan berjalan pada port 

. Aplikasi Angular kita akan terlihat seperti ini.

Dari hasil generate Angular CLI, project kita terdiri dari beberapa files yang perlu kita pahami dulu fungsi dan kegunaannya.

Seperti halnya project Spring kita, di sini kita juga akan lebih banyak bekerja pada folder 

. Di dalamnya akan terdapat beberapa files yang akan kita buat untuk project ini

 pada project backend API kita, file di dalam folder ini merupakan konfigurasi aplikasi Angular kita

, file konfigurasi project, dependency dan instruksi untuk NPM

, akan sangat bermanfaat bagi kita untuk mengetahui bagaimana cara kerja framework Angular yang kita gunakan ini, seperti bagaimana Angular memulai prosesnya saat dijalankan. Di lingkungan saya, banyak developer Angular yang handal tapi tidak mengerti proses ini. Nah supaya 

tidak bernasib sama setelah mengikuti program ini, kita pahami dulu yuk bagaimana Angular berjalan 😁


Pada dasarnya, setiap aplikasi web harus memiliki sebuah HTML 

untuk diakses oleh browser. Pada Angular, HTML 

. Di dalam file ini, browser akan memproses dan me-

. Tentu kita tahu bahwa tag ini bukanlah tag HTML biasa, karena 

 tidak ada dalam kamus HTML. Angular-lah yang bertanggung jawab memproses elemen ini. Di dalam 

saya di atas, maka di file kalian tidak akan ada tag 

-nya aneh itu. Ya, file dan tag tersebut akan ditambahkan oleh Angular pada saat proses 

 akan digunakan sebagai acuan instruksi dalam menjalankan keseluruhan proses. 

 saya berikan penekanan pada penjelasan project structure bahwa ini adalah file yang penting. Berdasarkan instruksi dari 

 ini, Angular akan membangun keseluruhan aplikasi.

. Melalui Webpack inilah Angular akan mentransformasikan file-file yang kita buat pada project nanti menjadi JavaScript 

. Dan kemudian bundle tersebut akan dikirimkan dan di-

yang lebih baru untuk dapat dijalankan pada browser lama)

ini akan ditambahkan seperti halnya pada snippet 

 saya di atas. Sejauh ini kita baru saja membahas mengenai 

 di belakangnya. Hal ini berguna untuk memastikan bahwa 

 ini akan berubah apabila kita melakukan perubahan bahkan sekedar menambahkan spasi atau mengubah huruf kapital menjadi huruf kecil.

Nah, eksekusi aplikasi Angular juga dimulai dari file konfigurasinya. Dimanakah itu? Ya! File tersebut adalah 

. Berdasarkan konfigurasi inilah, Angular akan memastikan bahwa 

 yang notabene adalah halaman HTML utama yang sudah kita bahas tadi. Itulah sebabnya 

Nah setelah kita mengetahui pada file pertama yang sebenarnya disentuh Angular adalah 

), mari kita lihat ada apa di dalam file ini.

OOP jadi tidak ada yang spesial di sini. Baris selanjutnya adalah pengecekan apakah kondisi saat ini merupakan kondisi 

atau bukan. Kondisi ini dicek berdasarkan file 

. Pengecekan ini dilakukan untuk menentukan apakah Angular perlu melakukan 


Yang terutama adalah pada baris terakhir, yakni:

 seperti namanya, bertugas untuk membuat 

 yang memungkinkan Angular dapat berjalan pada 

 segala yang diperlukan dari komponen-komponen framework dan mengkonfigurasikannya sedemikian rupa. Mengingat bahwa Angular dapat berjalan pada 

 perlu diketahui juga bahwa ada beberapa cara dalam me-

 yang menginstrusikan Angular untuk melakukan 

 adalah salah satu file terpenting dalam aplikasi Angular karena di dalamnya akan kita definisikan segala 

 dan apapun yang akan digunakan aplikasi. Melalui 

 file tersebut dan sesuai perintah tadi, Angular akan mencari 

, Angular memiliki semua informasi yang diperlukan aplikasi dan akan me-

 yang sebenarnya bukan tag HTML yang valid, namun tag tersebut masih dapat dikenali karena Angular-lah yang akan memprosesnya untuk dapat dikonsumsi oleh 


Dengan demikian cerita dimulainya aplikasi Angular telah menjadi cerita yang utuh. Dengan memahami konsep dasar ini, saya yakin akan sangat membantu 

Pada project kita ini, kita tidak menggunakan 

, seperti yang biasanya kita lakukan pada pemrograman web. Kita akan menggunakan CSS framework untuk membantu proses 

kita menjadi lebih cepat. Framework yang akan kita gunakan adalah Tailwind CSS. Sekali lagi, untuk mempersingkat konten materi saya juga tidak mengupas secara detil mengenai Tailwind CSS, 

Nah, untuk mengintegrasikan Tailwind CSS ke project Angular kita dibutuhkan sedikit konfigurasi. Tenang saja, ini bukanlah hal yang ribet. 

 yang disediakan Tailwind CSS sangat lengkap dan mudah diikuti. Yuk kita lakukan 

Tailwind CSS terlebih dahulu ke project kita. Cukup jalankan 

 di dalam folder project kita. Langkah kedua, kita perlu mengubah 

folder Angular project kita yang berada di folder 

. Hal ini memungkinkan Tailwind CSS untuk mengerti letak file project yang perlu di-

menggunakan TypeScript, maka kita perlu menambahkan juga file-file 

. File ini sudah diberikan oleh Angular pada saat proses 

! Mari kita coba apakah Tailwind CSS sudah dapat berjalan pada project kita. Buka file 

 dan ganti semua isinya misalnya seperti ini.

pada halaman aplikasi kita. Dengan demikian, kita sudah dapat melakukan 

Kita sudah selangkah lebih dekat ke proses 

yang penting adalah untuk kita mengerti beberapa 

Component adalah bagian utama dari Angular. Definisi Angular sendiri adalah 

. Ya, framework JavaScript masa kini hampir semuanya mengusung konsep component.


Lalu apa itu component? Mengacu pada dokumentasi resminya, component adalah 

. Karena sedikit aneh kalau diterjemahkan ke Bahasa Indonesia (balok bangunan), ya saya sebut saja component ibarat batu bata dari sebuah rumah. Yang artinya, ini adalah barang wajib di sebuah aplikasi Angular. Hampir semua bagian dalam Angular adalah component. Tapi selayaknya batu bata, tentu dapat kita sesuaikan besar/bobot sebuah component tergantung bagaimana kita mendesainnya.


Component dalam Angular ditandai dengan 

, manifestasinya dalam bentuk custom HTML tag seperti 

HTML template, menjelaskan bagaimana sebuah component di-

.

In Chapter 1, we have successfully created our backend API. Let's make it usable by creating frontend application for the graphical user interface (GUI). The frontend application will be built with Angular as the Javascript framework and Tailwind as the CSS framework.

Advisory Program 2022 (Chapter 2) - Integrating Frontend & Backend

Sebelum memulai masuk lebih dalam, ada beberapa program yang

Menjelaskan instalasi masing-masing program tersebut akan memakan waktu dan membuat tulisan ini menjadi lebih panjang dan melebar, 

bisa mencari referensi di internet ya, banyak sekali kok 😁

Perlu diketahui bahwa pada program ini saya tidak menjelaskan mengenai tutorial, misalnya tutorial Java, tutorial Spring atau tutorial Angular. Namun apa yang saya jelaskan lebih ke bagaimana implementasi 

tertentu pada aplikasi sederhana dan integrasinya berdasarkan konsep yang dibahas, seperti misalnya model arsitektur, mengapa menggunakan 


Hal ini saya tujukan karena materi seperti tutorial-tutorial tersebut sangat mudah 

yang akan digunakan, misalnya seperti mengerti konsep dasar Java, OOP, Javascript, database, dll. Hal ini akan membantu 

, atau juga dikenal BFF, terdiri dari paling sedikit dua bagian utama, yaitu 

biasanya berperan sebagai perantara dalam bentuk API untuk berhubungan dengan bagian "dalam" aplikasi seperti database, 

bagi pengguna agar dapat berinteraksi dengan aplikasi kita. Arsitektur ini sudah sangat 

digunakan dalam membangun aplikasi terutama aplikasi berbasis web.

Tapi, kenapa kita perlu memisahkan frontend dengan backend 

? 

Ada beberapa alasan kenapa kita perlu melakukan pemisahan ini. Berdasarkan pengalaman saya pribadi, dua hal terpenting untuk melakukan separasi ini adalah alasan 

. Namun, di artikel ini saya tidak akan membahas mengenai hal tersebut, kita akan bahas lagi lain waktu.

Sebagai referensi, 

Gambaran arsitektur aplikasi yang akan kita bangun berdasarkan pemisahan tersebut adalah sebagai berikut.


Teknologi yang akan kita gunakan untuk membangun aplikasi sederhana kita adalah Spring Boot untuk 

dimana kita akan menggunakan komponen-komponen seperti Spring Web MVC untuk membuat REST API, Spring Data JPA untuk berinteraksi dengan 

, kita akan menggunakan PostgreSQL saja untuk kemudahan.


Apabila kamu belum familiar dengan API, 


Nah, aplikasi yang akan kita buat adalah aplikasi 

 sederhana dimana pengguna dapat menambahkan 

. Kurang lebih, API yang akan kita buat nantinya adalah berikut ini.

Java adalah bahasa pemrograman yang dapat dibilang "tua", dan di zaman sekarang ini banyak developer yang mungkin sudah tidak menggunakannya lagi. Berkaitan dengan hal tersebut, 

  mengenai mengapa saya masih menggunakan Java hingga saat ini😁

tidak akan kesulitan mendapatkannya di internet. Namun dalam perjalanan saya bersama Java selama kurang lebih 10 tahun ini, 

tidak ada yang lebih mudah melakukan Java development daripada menggunakan Spring sebagai 


Menurut saya, sepertinya di luar sana Spring sudah menjadi "

. Memang banyak alternatif lain selain Spring, seperti Struts, JSF, Vaadin, Grails, 

kita mendapatkan pengalaman pemrograman yang lebih mudah, lebih cepat, dan lebih aman.


Untuk lebih lengkap silakan cek link ini, 

Untuk membuat aplikasi Spring Boot, Spring telah menyediakan sebuah 

 yang memudahkan kita untuk memulai, yaitu 

. Sebenarnya ada juga cara lain seperti membuat sebuah Maven project kemudian kita tambahkan Spring Boot 


Pada Spring Initialzr, saya akan menggunakan Maven untuk 

nya dengan Java 11 untuk versinya. Untuk versi Java sendiri 

dapat memilih versi java 8 atau bahkan 17. Namun saat 

ini saya tulis, Java 11 adalah versi menengah yang tidak terlalu tertinggal dan juga tidak terlalu baru (cenderung stabil).


Nah kemudian, kita perlu untuk menambahkan 

 kita. Kalau kalian bingung dengan istilah 

Spring Web (komponen Spring utama yang kita butuhkan untuk membuat aplikasi Spring Web atau REST API dengan Spring)

Spring Data JPA (diperlukan untuk berinteraksi dengan 

Lombok (sebuah library yang sangat berguna untuk memudahkan kita dalam menuliskan program Java, terutama untuk mempersingkat dan mengurangi redundansi yang tidak perlu)

berikut adalah konfigurasi Spring Initialzr kita.

bagi saya, IDE ibarat agama, jadi saya tidak mengharuskan 

untuk mengikuti dengan IDE yang saya gunakan. 

But in my development, most of the time I will go with 

tidak punya preferensi IDE dan ingin menggunakan VSCode juga, silakan kalian dapat 

Spring kita ke IDE ada banyak cara, namun secara umum, cari opsi seperti 

dapat menggunakan cara yang lebih singkat dengan klik kanan pada folder 

Nah, sebelum kita melangkah lebih dalam, ada baiknya kita lebih dulu mengerti apa saja 

 yang mungkin akan kita ubah adalah filel 

baru atau ada konfigurasi Maven khusus yang perlu dilakukan.

 ini tidak akan saya bahas dulu karena akan menambah kompleksitas 

 oleh Maven. Dan karena kita tidak menggunakannya, kita hapus saja.

pendukung yang akan digunakan oleh aplikasi, misalnya seperti 

ini biasanya kita gunakan untuk konfigurasi yang akan dibaca oleh Spring saat proses 

 namun biasanya akan digunakan sekalipun dalam aplikasi sederhana. FYI, 

yang sesuai dengan packaging yang kita tentukan di Initializr, yaitu 

. Di dalam folder inilah kita akan fokus untuk 

Nah, hal ini berkaitan dengan bagaimana sebuah aplikasi Spring berjalan. Pada saat proses 

. Sederhananya, proses ini berjalan secara internal dimana aplikasi akan mulai membaca semua konfigurasi yang diperlukan atau yang telah di-

konfigurasi tersebut ke dalam sistem sehingga dapat digunakan untuk memulai. 

tidak perlu pusing mengenai bagaimana proses 

 ini? Kita kan belum menyentuh apapun dari 

ini? Nah, kalau kita lihat di dalam file 

tidak perlu melakukan banyak konfigurasi manual pada aplikasi Spring Boot. Hal ini juga berlaku pada 

ini akan memudahkan kita dalam melakukan transaksi dengan 

BLOG TAG

ADAM

BCA Advisory Program is a mentoring program for internal employee of BCA to enrich, polish, and share knowledge.

Here are some articles tagged with "ADAM" :