Memulai Pengembangan Aplikasi Angular – Teknologi pengembangan aplikasi berkembang dengan sangat cepat belakangan ini. Perkembangan teknologi pengembangan aplikasi mengarah kepada pengembangan aplikasi web dan mobile. Salah satu teknologi pengembangan aplikasi yang mulai populer adalah angular. Pada bab ini, penulis akan menjelaskan mengenai apa itu angular, bagaimana arsitektur angular serta bagaimana proses instalasi untuk pengembangan aplikasi dengan angular. Selain itu, pada bab ini akan dibahas mengenai bagaimana memulai dan menjalankan project angular juga tools pendukung yang membantu proses pengembangan aplikasi angular.

1.1. Tentang Angular

Angular atau yang lebih dahulu dikenal dengan angularjs merupakan framework JavaScript untuk pengembangan aplikasi web. Sejak versi ke 2 angularjs berubah nama menjadi angular, sehingga nama angularjs merujuk pada angular versi 1 dan angular untuk versi 2. Sampai pada saat tulisan ini dibuat, versi angular terakhir adalah versi 2.5 atau disebut angular 5.

Angular dikembangkan oleh google sebagai alat untuk mengembangkan aplikasi dengan jenis Single Page Application (SPA). Angular lebih dikenal sebagai tools untuk mengembangkan aplikasi web dari sisi front-end. Walaupun tidak menutup kemungkinan untuk dikembangkan juga sebagai server side.

Arsitektur angular tersusun atas beberapa bagian yang berpusat pada komponen. Komponen pada angular adalah sebuah kelas yang ditambahkan decorator @Component sehingga memiliki fungsionalitas komponen. Komponen menyajikan tampilan user interface melalui template. Komunikasi atau pertukaran dari komponen ke template menggunakan property binding, sedangkan dari template ke komponen menggunakan event binding. Data yang digunakan oleh komponen berasal dari service sehingga komponen tidak berinteraksi langsung ke sumber data, melainkan melalui service. Untuk memudahkan perancangan dan pengembangan user interface template dapat menggunakan directive yang bertindak seperti tag HTML. Ilustrasi arsitektur angular dapat dilihat pada Gambar 1.

Gambar-1.1. Arsitektur aplikasi angular

 1.2. Instalasi Angular

Terdapat beberapa hal yang perlu dipersiapkan sebelum memulai membuat aplikasi angular. Lingkungan pengembangan yang perlu dipersiapkan antara lain adalah Node.js dan angular-cli (angular command line interface). Berikut ini langkah-langkah penyiapan lingkungan pengembangan.

1.2.1.Instalasi Node.Js

Node.js® adalah JavaScript runtime yang dibuat diatas engine JavaScript V8 Chrome. Node.js menggunakan event-driven, model I/O non-blocking yang menjadikannya ringan dan efisien. Node.js juga memiliki ekosistem untuk paket-paket yang bernama npm (node package manager) yang merupakan ekosistem untuk pustaka open source yang terbesar. Instalasi Node.js cukup mudah, situs Node.js menyediakan instalasi untuk berbagai sistem operasi. Berkas instalasi Node.js dapat diunduh pada situs https://nodejs.org/en/download/.

 Gambar-1.2. Situs untuk mengunduh berkas instalasi Node.js

Pada sistem operasi windows proses instalasi dilakukan dengan menjalankan berkas instalasi yang telah diunduh. Setelah itu kemudian proses dilakukan dengan mengikuti petunjuk yang terdapat pada proses instalasi tersebut. Penempatan berkas Node.js untuk instalasi disesuaikan dengan keadaan dan kebutuhan masing-masing lingkungan pengembangan. Guna memudahkan untuk proses penggunaan Node.js, pilihlah opsi untuk menginstal npm serta pengaturan untuk menambah path, seperti terlihat pada gambar 3.

 

Gambar-1.3. Instalasi Node.js pada OS Windows

Gambar-1.4. Pastikan lokasi Node.js, juga menginstal npm serta setting path

Gambar-1.5. Proses instalasi Node.js

Setelah proses instalasi selesai, lakukanlah pengecekan untuk mengetahui apakah Node.js sudah terinstall dan dapat berfungsi dengan baik. Pengecekan dilakukan dengan mengetikkan perintah node -v pada command prompt atau terminal. Jika sudah terinstal dengan baik, maka hasilnya adalah berupa versi Node.js tercetak pada layar seperti terlihat pada gambar 6.

Gambar-1.6. Pengecekan hasil instalasi Node.js

1.2.2.Instalasi angular-cli

Angular CLI adalah command line interface (CLI) yang digunakan sebagai alat bantu untuk membuat project angular, menambah atau men-generate file. Selain itu angular-cli juga dapat melakukan beberapa hal lain terkait dengan pengembangan aplikasi seperti testing, bundling, dan deployment.

Instalasi angular-cli dilakukan dengan menggunakan bantuan npm (node package manager). Sebelum melakukan proses instalasi, pastikan koneksi internet tersedia, atau jika menggunakan proxy, pastikan npm telah dilakukan pengaturan sesuai dengan proxy yang digunakan. Jika tidak, maka akan muncul error seperti pada gambar 7. Perintah yang digunakan untuk melakukan instalasi adalah:

npm install -g @angular/cli

Setelah selesai melakukan proses instalasi, lakukan pengecekan dengan menggunakan perintah ng -v . Hasil dari perintah tersebut adalah versi angular-cli akan ditampilkan pada layar.

l

Gambar-1.7. Instalasi angular-cli yang gagal karena tidak ada koneksi internet

1.3. Membuat Project Angular

Membuat project angular dapat dilakukan dengan menggunakan bantuan angular-cli maupun dengan melakukan proses copy dari project yang sudah pernah dibuat. Pembuatan project dengan menggunakan bantuan angular-cli memerlukan koneksi internet untuk mengunduh paket-paket yang dibutuhkan.

1.3.1. Memulai project angular dengan angular-cli

Pada command prompt atau terminal, ketikkan perintah ng new <nama project>. Contoh dibawah ini, akan dibuat project angular dengan nama my-angular-project. Perintah tersebut akan membuat direktori dengan nama yang sama dengan nama project. Proses pembuatan project angular dengan angular-cli terlihat pada gambar 8.

Gambar-1.8. Proses pembuatan project dengan angular-cli

 Isi dari direktori hasil pembuatan project tersebut adalah seperti berikut:

Gambar-1.9. Struktur direktori hasil pembuatan project

Gambar-1.10. Struktur lengkap direktori project

1.3.2. Memulai project angular dengan menggunakan repositori

Selain dengan menggunakan bantuan angular-cli, project angular juga dapat dibuat dengan menduplikasi project angular yang pernah dibuat atau dari repositori. Berikut ini adalah contoh untuk mengcopy project angular dari contoh repositori https://github.com/angular/quickstart

Gambar-1.11. Proses cloning project dari repositori

Gambar-1.12. Proses instalasi dependensi dari repositori

1.4. Menjalankan Project Angular

Project yang telah dibuat dengan menggunakan angular-cli maupun dengan mengcopy project dari repositori dapat dijalankan dengan menggunakan angular-cli maupun nodejs.

1.4.1. Menjalankan project angular dengan angular-cli

Angular-cli menyediakan perintah ng serve untuk menjalankan project angular. Hal yang harus diperhatikan adalah perintah ng serve tersebut dijalankan didalam direktori project yang akan dijalankan.

Gambar-1.13. Proses menjalankan project angular pada linux

Gambar-1.14. Proses menjalankan project angular pada windows

Bukalah browser dengan alamat http://localhost:4200 maka akan tampil halaman berikut:

Gambar-1.15. Project angular ketika dijalankan

1.4.2. Menjalankan project angular dengan nodejs

Selain dengan menggunakan bantuan angular-cli, project angular juga dapat dijalankan dengan menggunakan Node.js, khususnya project yang dibuat tidak dengan menggunakan angular-cli. Cara menjalankannya adalah dengan mengeksekusi perintah Node.js

Gambar-1.15. Menjalankan project angular dengan npm

1.5. Peralatan pengembangan

Tools yang dibutuhkan untuk mengembangkan project angular antara lain text editor dan browser. Guna mempermudah proses pengembangan, text editor yang digunakan dapat berupa IDE (Integrated Development Environtment) agar kesalahan penulisan kode maupun proses pembuatan komponen aplikasi menjadi lebih mudah.

1.5.1. IDE

Angular menyarankan pengembang untuk menggunakan beberapa IDE yang telah mendukung pengembangan project angular seperti berikut ini:

• Angular IDE dari webclipse

Angular IDE adalah IDE untuk angular yang dikembangkan oleh webclipse. IDE ini menyediakan versi  trial. Namun untuk menggunakan fitur secara lengkap perlu membeli atau mebayar aplikasi ini.

Gambar-1.16.Angular IDE

 Visual Studio Code

Alternatif IDE lainnya adalah VS CODE. IDE ini termasuk IDE yang cukup lengkap fiturnya dengan tetap bebas (free) untuk digunakan, sehingga menjadi pilihan yang layak untuk dipertimbangkan.

Gambar-1.17.Visual Studio Code

• Webstorm

Gambar-1.18.Webstorm IDE

Selain IDE yang disebutkan diatas, dapat pula digunakan IDE untuk pengembangan aplikasi lain seperti Atom maupun Sublime.

1.5.2. Browser

Browser digunakan untuk menjalankan aplikasi angular yang telah dibuat, browser yang digunakan dapat berupa browser apapun. Selain digunakan untuk melihat hasil dari aplikasi yang telah dibuat, browser juga digunakan untuk melakukan proses debugging. Proses debugging dilakukan dengan menggunakan developer tools pada browser.

Gambar-1.19.Proses debugging pada browser

*Penulis: Hilmy Abidzar Tawakal, ST., M.Kom (Dosen STT Nurul Fikri dan Instruktur NF COMPUTER)

 

=============================================

Untuk informasi lebih lanjut, silahkan hubungi kami di:
NF COMPUTER Training Center
Jl. Lenteng Agung Raya No. 20-21
Srengseng Sawah – Jagakarsa
Jakarta Selatan 12640
Tel. 021-7874223, 7874224
WA. 081296421595