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.
Prerequisites
- Angular
- NodeJS
- Tailwind CSS
- IDE (sesuai preferensi)
Disclaimer
Seperti pada materi sebelumnya yakni Chapter 1, di tulisan ini saya tidak menjelaskan mengenai tutorial Angular. Namun apa yang saya jelaskan lebih ke bagaimana implementasi framework tertentu pada aplikasi sederhana dan integrasinya berdasarkan konsep yang dibahas, seperti misalnya model arsitektur BFF (Backend For Frontend).
Hal ini saya tujukan karena materi seperti tutorial-tutorial tersebut sangat mudah fellowdevs dapatkan melalui platform online course seperti Udemy atau bahkan video gratis seperti Youtube. 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 content yang saya deliver akan lebih baik dari para creator tersebut.
Ditambah lagi, saya ingin berfokus pada hal-hal lain yang lebih diperlukan pada dunia industri profesional. Misalnya seperti desain arsitektur aplikasi, security, common practices, tips & trik, atau bahkan sekedar memperkenalkan tools atau teknologi yang mungkin belum dikenal sebelumnya namun banyak digunakan di pekerjaan nantinya.
Oleh karena itu, saya mendorong fellowdevs peserta program untuk dapat lebih dahulu mempelajari konsep dasar dari stack yang akan digunakan, misalnya seperti mengerti konsep dasar Java, OOP, JavaScript, database, dll. Hal ini akan membantu fellowdevs 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 Course [Full Front End Tutorial with TypeScript]](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fwww.youtube.com%252Fs%252Fdesktop%252F27f3c87c%252Fimg%252Ffavicon_144x144.png%3Ftable%3Dblock%26id%3D4a689c2f-a90e-48ff-9b59-0e8d747746fc%26cache%3Dv2&w=384&q=75)
![Angular for Beginners Course [Full Front End Tutorial with TypeScript]](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F3qBXWUpoPHo%252Fmaxresdefault.jpg%3Ftable%3Dblock%26id%3D4a689c2f-a90e-48ff-9b59-0e8d747746fc%26cache%3Dv2&w=3840&q=75)
Tidak kalah penting juga untuk fellowdevs mengetahui tentang dasar ES6 (ECMAScript 2015) karena untuk mayoritas pemrograman JavaScript hari ini menggunakan versi ES6. Untuk ES6 sendiri, saya merekomendasikan artikel ini:
Getting Started with Angular
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 Node Package Manager (NPM) di dalamnya.
Setup
Untuk menginstall NodeJS, fellowdevs dapat mengacu pada link ini. Saya rekomendasikan untuk menginstall versi LTS (Long Term Support). Setelah selesai menginstall NodeJS, kita dapat memastikannya melalui terminal dengan version check.
╭─ powershell ╰─❯ node -v v18.12.1 ╭─ powershell ╰─❯ npm -v 8.19.2
Kemudian langkah selanjutnya adalah menginstall Angular CLI. Sesuai dokumentasinya, kita dapat melakukannya melalui command:
npm install -g @angular/cli
Apabila sudah selesai, pastikan dengan version check:
╭─ powershell ╰─❯ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 13.1.2 Node: 18.12.1 (Unsupported) Package Manager: npm 8.19.2 OS: win32 x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1301.2 (cli-only) @angular-devkit/core 13.1.2 (cli-only) @angular-devkit/schematics 13.1.2 (cli-only) @schematics/angular 13.1.2 (cli-only)
Tenang saja apabila fellowdevs ada yang menggunakan versi seperti saya dan mendapatkan warning seperti berikut:
Warning: The current version of Node (18.12.1) is not supported by Angular.
Hal ini terjadi karena versi Angular CLI yang saya gunakan adalah versi 13. Sedangkan NodeJS saya versi 18 yang tidak di-support oleh Angular CLI versi tersebut. Support NodeJS 18 hadir pada Angular 15. Namun tidak serta merta bahwa kita tidak dapat melakukan development karena hal ini. Memang saat melakukan build kemungkinan besar akan terjadi error. Namun hal itu akan kita atasi pada Chapter 4.
Kita akan disarankan untuk melakukan update, tapi pada kenyataannya di production, update/upgrade versi stack bukanlah hal sepele yang dapat dilakukan sewaktu-waktu. Malahan tidak jarang perusahaan tidak melakukan update karena khawatir kalau aplikasi mereka malah tidak bisa digunakan karena faktor breaking changes.
Create Angular Project
Apabila Angular CLI sudah ter-install, maka saatnya untuk kita bisa membuat project Angular. Jalankan command berikut.
ng new bcaadam-frontend
Tentu penamaan project dapat kalian ganti sendiri sesuai preferensi. Akan ada beberapa pertanyaan yang perlu kita jawab sebelum Angular CLI men-generate project untuk kita. Fellowdevs dapat mengikuti pilihan saya seperti berikut ini.
╭─ powershell ╰─❯ ng new bcaadam-frontend ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS ....
Setelah proses generate selesai, kita dapat menjalankan project Angular kita dengan menggunakan command
ng serve atau npm run start. By default, aplikasi Angular akan berjalan pada port 4200. Untuk membuat command ini membuka browser secara otomatis, tambahkan parameter --open menjadi ng serve --open. Aplikasi Angular kita akan terlihat seperti ini.
Project Structure
Dari hasil generate Angular CLI, project kita terdiri dari beberapa files yang perlu kita pahami dulu fungsi dan kegunaannya.
. ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.spec.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ └── test.ts ├── angular.json ├── package.json └── ... any other files that not related to this project
Seperti halnya project Spring kita, di sini kita juga akan lebih banyak bekerja pada folder
/src/app. Di dalamnya akan terdapat beberapa files yang akan kita buat untuk project ini:main.ts: Entry point JavaScript file
index.html: HTML entry point file
/environments, seperti halnya file.propertiespada project backend API kita, file di dalam folder ini merupakan konfigurasi aplikasi Angular kita
angular.json, konfigurasi project Angular. This is actually an important file.
package.json, file konfigurasi project, dependency dan instruksi untuk NPM
How Angular Starts
Sebelum kita memulai ngoding, 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 fellowdevs tidak bernasib sama setelah mengikuti program ini, kita pahami dulu yuk bagaimana Angular berjalan 😁
Pada dasarnya, setiap aplikasi web harus memiliki sebuah HTML entrypoint untuk diakses oleh browser. Pada Angular, HTML entrypoint yang akan diakses adalah file
index.html. Di dalam file ini, browser akan memproses dan me-load file-file yang dibutuhkan, seperti assets, styles, dan tidak terkecuali JavaScript.<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>BCA ADAM</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.09e2c710755k85667a460.css"> </head> <body> <app-root></app-root> <script src="runtime.e227d1a0e31cqwfcbf8ec.js" defer></script> <script src="polyfills.a4021de6744558bb0fec14.js" defer></script> <script src="main.1feaffbe857qpockf7ee0db.js" defer></script> </body> </html>
File
index.html ini harus memiliki setidaknya satu root component (entry point component), dalam hal ini adalah <app-root></app-root>. Tentu kita tahu bahwa tag ini bukanlah tag HTML biasa, karena <app-root> tidak ada dalam kamus HTML. Angular-lah yang bertanggung jawab memproses elemen ini. Di dalam root component inilah Angular akan me-render component-component yang sesuai dengan yang diminta. That's actually end of story. Sedikit membingungkan? Mari kita rewind sedikit.JS Bundling
Apabila fellowdevs bandingkan isi file
index.html kalian dengan snippet saya di atas, maka di file kalian tidak akan ada tag <script></script> ke file JavaScript yang naming-nya aneh itu. Ya, file dan tag tersebut akan ditambahkan oleh Angular pada saat proses build. Pada saat Angular berjalan, file angular.json akan digunakan sebagai acuan instruksi dalam menjalankan keseluruhan proses. That's why saya berikan penekanan pada penjelasan project structure bahwa ini adalah file yang penting. Berdasarkan instruksi dari angular.json ini, Angular akan membangun keseluruhan aplikasi.Under the hood, Angular menggunakan Webpack sebagai module bundler. Melalui Webpack inilah Angular akan mentransformasikan file-file yang kita buat pada project nanti menjadi JavaScript bundle. Dan kemudian bundle tersebut akan dikirimkan dan di-load melalui browser. Pada saat kita menjalankan perintah build seperti
ng build, Angular akan melakukan compile dan men-generate beberapa file JavaScript untuk kita.├── favicon.ico ├── index.html ├── main.1feaffbe857aaf7ee0db.js ├── polyfills.a4021de53358bb0fec14.js ├── runtime.e227d1a0e31cbccbf8ec.js └── styles.09e2c710755c8867a460.css
main.xxxx.tsadalah segala code yang kita tulis
polyfills.xxxx.tsberisi code polyfills (biasanya konversi code yang lebih baru untuk dapat dijalankan pada browser lama)
runtime.xxxx.tsberisi utility code untuk Webpack
Ketiga script ini akan ditambahkan seperti halnya pada snippet
index.html saya di atas. Sejauh ini kita baru saja membahas mengenai file loading, tapi bagaimana eksekusinya?Penamaan file yang di-generate ini menggunakan tambahan hash string di belakangnya. Hal ini berguna untuk memastikan bahwa browser perlu melakukan update apabila hash ini berubah. Ya, hash ini akan berubah apabila kita melakukan perubahan bahkan sekedar menambahkan spasi atau mengubah huruf kapital menjadi huruf kecil.
Main Entry Point Execution
Nah, eksekusi aplikasi Angular juga dimulai dari file konfigurasinya. Dimanakah itu? Ya! File tersebut adalah
angular.json..... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/bcaadam-frontend", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, ....
Perhatikan pada node
architect - build, di sana terdapat instruksi pada property main adalah menunjuk pada file src/main.ts. Berdasarkan konfigurasi inilah, Angular akan memastikan bahwa module tersebut tereksekusi begitu bundle berhasil ter-load.Serta property
index merujuk ke src/index.html yang notabene adalah halaman HTML utama yang sudah kita bahas tadi. Itulah sebabnya browser akan memulai rendering HTML melalui file ini.Angular Application Bootstrap
Nah setelah kita mengetahui pada file pertama yang sebenarnya disentuh Angular adalah
main.ts (setelah angular.json), mari kita lihat ada apa di dalam file ini.import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
Beberapa import statement terletak di awal file, well ini adalah basic OOP jadi tidak ada yang spesial di sini. Baris selanjutnya adalah pengecekan apakah kondisi saat ini merupakan kondisi production atau bukan. Kondisi ini dicek berdasarkan file
environment.ts yang ada di folder /environment. Pengecekan ini dilakukan untuk menentukan apakah Angular perlu melakukan performance tweak untuk production built.Yang terutama adalah pada baris terakhir, yakni
platformBrowserDynamic().bootstrapModule(AppModule); : seperti namanya, bertugas untuk membuat platform yang memungkinkan Angular dapat berjalan pada web browser context. Module ini me-load segala yang diperlukan dari komponen-komponen framework dan mengkonfigurasikannya sedemikian rupa. Mengingat bahwa Angular dapat berjalan pada context lain seperti mobile, server-side, etc perlu diketahui juga bahwa ada beberapa cara dalam me-load Angular.Setelah Angular ter-load oleh
platformBrowserDynamic, perintah selanjutnya adalah melakukan boostrapModule(...) yang menginstrusikan Angular untuk melakukan boostraping module yang diminta, pada case ini adalah AppModule. AppModule adalah salah satu file terpenting dalam aplikasi Angular karena di dalamnya akan kita definisikan segala component, directives, pipes, services dan apapun yang akan digunakan aplikasi. Melalui import statement, Angular dapat mengetahui path dari AppModule ini, me-load file tersebut dan sesuai perintah tadi, Angular akan mencari bootstrap option.import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Berdasarkan value dari
bootstrap option ini, maka Angular akan me-load file selanjutnya yaitu AppComponent dari app.component.ts.import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'bcaadam-frontend'; }
Perhatikan value
selector dari definisi component ini, yaitu app-root. Artinya component ini akan hidup dengan menggunakan tag <app-root></app-root>. Ring a bell? Yes! Dugaan kalian benar. Dengan di-load nya AppModule, Angular memiliki semua informasi yang diperlukan aplikasi dan akan me-load segala kebutuhan tersebut, seperti AppComponent ini. Oleh karena itu, saat browser me-render <app-root> yang sebenarnya bukan tag HTML yang valid, namun tag tersebut masih dapat dikenali karena Angular-lah yang akan memprosesnya untuk dapat dikonsumsi oleh browser.Dengan demikian cerita dimulainya aplikasi Angular telah menjadi cerita yang utuh. Dengan memahami konsep dasar ini, saya yakin akan sangat membantu fellowdevs di dalam membangun aplikasi kita nanti.
Integrating with Tailwind CSS
Pada project kita ini, kita tidak menggunakan native CSS styling, seperti yang biasanya kita lakukan pada pemrograman web. Kita akan menggunakan CSS framework untuk membantu proses styling 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, fellowdevs dapat memulai mempelajarinya di sini.
Nah, untuk mengintegrasikan Tailwind CSS ke project Angular kita dibutuhkan sedikit konfigurasi. Tenang saja, ini bukanlah hal yang ribet. Dokumentasi yang disediakan Tailwind CSS sangat lengkap dan mudah diikuti. Yuk kita lakukan step by step nya.
Pertama, kita perlu install Tailwind CSS terlebih dahulu ke project kita. Cukup jalankan command berikut.
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init
Perintah npx tailwindcss init akan men-generate file bernama
tailwind.config.js di dalam folder project kita. Langkah kedua, kita perlu mengubah path dari source folder Angular project kita yang berada di folder /src. Hal ini memungkinkan Tailwind CSS untuk mengerti letak file project yang perlu di-transpile olehnya. Selain file .html, karena Angular by default menggunakan TypeScript, maka kita perlu menambahkan juga file-file .ts tersebut./** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{html,ts}", ], theme: { extend: {}, }, plugins: [], }
Ketiga, kita perlu menambahkan directive dari Tailwind CSS pada base style file kita yaitu
style.css. File ini sudah diberikan oleh Angular pada saat proses project generation. @tailwind base; @tailwind components; @tailwind utilities;
And that's it! Mari kita coba apakah Tailwind CSS sudah dapat berjalan pada project kita. Buka file
app.component.html dan ganti semua isinya misalnya seperti ini.<h1 class="text-3xl font-bold underline text-red-500 text-center"> Hello world! </h1>
Styling yang kita terapkan pada teks
Hello world! sudah berhasil ter-render pada halaman aplikasi kita. Dengan demikian, kita sudah dapat melakukan development dengan menggunakan Tailwind CSS 👍
Bagi yang menggunakan VSCode sebagai IDE, kita dapat menggunakan extension Tailwind CSS Intellisense dari Tailwind Labs untuk memudahkan development.
Understanding Angular Essentials
Kita sudah selangkah lebih dekat ke proses development kita. Last thing yang penting adalah untuk kita mengerti beberapa core concepts dari Angular atau disebut juga Angular Essentials.
Components
Component adalah bagian utama dari Angular. Definisi Angular sendiri adalah component based framework. Ya, framework JavaScript masa kini hampir semuanya mengusung konsep component.
Lalu apa itu component? Mengacu pada dokumentasi resminya, component adalah building block. 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 decorator
@Component yang di dalamnya mengandung:- Component selector, manifestasinya dalam bentuk custom HTML tag seperti
<app-root></app-root>pada penjelasan sebelumnya.
- HTML template, menjelaskan bagaimana sebuah component di-render dalam tag HTML
- CSS untuk styling (opsional)
Paling minimal, sebuah component Angular akan terlihat sebagai berikut.
import { Component } from '@angular/core'; @Component({ selector: 'hello-world', template: ` <h2>Hello World</h2> <p>This is my first component!</p> ` }) export class HelloWorldComponent { // The code in this class drives the component's behavior. }
Untuk dapat menggunakan component ini, kita akan menggunakan HTML tag
<hello-world></hello-world> sebagaimana ter-define pada value selector. Cukup sederhana bukan?Template
Nah, setelah mengetahui bahwa component adalah bagian penting dalam Angular, maka begitu juga dengan Template. Setiap component pasti memiliki sebuah template. Why? Karena melalui template-lah Angular mengerti bagaimana me-render sebuah component menjadi halaman.
Dependency Injection (DI)
Kalau fellowdevs tidak asing dengan istilah ini, artinya kalian menyimak apa yang kita pelajari di Chapter 1 dimana saya menyebutkan mengenai DI pada framework Spring. Faktanya, DI sudah menjadi common practice di dunia pemrograman modern saat ini dan direkomendasikan menjadi cara yang baik dalam menulis code (best practice).
Definisi DI pada dokumentasi Angular sangatlah mudah dimengerti, yakni: cara mendefinisikan sebuah dependency terhadap class lain tanpa peduli bagaimana class tersebut diinisiasi. Hal ini dicapai melalui dependency injector dalam framework seperti Angular atau Spring sehingga framework yang akan melakukan inisiasi object/class tersebut untuk kita. Melalui DI, code kita menjadi lebih testable dan flexible. Di Angular sendiri, DI menjadi lem yang banyak digunakan dan kalian akan sering menemui konsep ini nantinya.
Sebagai penutup bagian ini, link ini adalah tutorial dasar untuk berkenalan dengan framework Angular sudah disediakan secara detil, lengkap dan komprehensif oleh dokumentasi resminya. Banyak sekali konsep Angular yang akan fellowdevs dapatkan dari mengerjakan tutorial ini seperti:
- Event Binding
- Bekerja dengan simple forms
Saya sangat menyarankan untuk kalian bisa mencoba mengerjakannya juga untuk lebih mengerti lagi terlebih dari apa yang saya tidak jelaskan di materi ini.
So, tunggu apa lagi? Segera pelajari tutorialnya ya sebelum lanjut ke materi berikutnya.
Happy coding fellowdevs!
Untuk source code dari project yang kita kerjakan dapat fellowdevs checkout melalui Git repository ini.
