, 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-

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

.

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

A utility-first CSS framework that can be composed to build any design, directly in your markup.

BLOG TAG

Tailwind CSS

A utility-first CSS framework that can be composed to build any design, directly in your markup.

Here are some articles tagged with "Tailwind CSS" :