lifelong learner — urip iku urup, currently working on accenture.

Bab 1 Persiapan environment – Tutorial pemrograman javascript pemula

0
Degananda.com -

js-start

Untuk memulai pemrograman javascript yang perlu terdapat beberapa software yang perlu di siapkan dan di install pada local machine (pc ataupun laptop) untuk menunjang pemrograman javascript.

Sistem operasi untuk pemrograman javascript

Seluruh sistem operasi mulai dari linux, windows hingga mac osx dapat digunakan untuk memulai pemrograman javascript karena NodeJS dapat digunakan dikeseluruhan sistem operasi tersebut.

NodeJS sebagai runtime environment

NodeJS merupakan runtime environment yang digunakan untuk menjalankan javascript secara server side. Umumnya, javascript dijalankan pada sisi client-side yang familiar adalah bentuk interaksi antara pengguna dengan halaman website pada browser yang diatur oleh javascript.

Namun saat ini, seiring dengan perkembangan teknologi , javascript dapat dijalankan secara server side. Teknologi server side ini tidak hanya dapat digunakan untuk membangun aplikasi backend namun framework frontend seperti angular pun dibangun dengan menggunakan nodejs meski nantinya kode utamannya akan dicompile sehingga dapat dijalankan dibrowser tanpa bantuan runtime nodejs.

Sehingga, NodeJS menjadi wajib untuk di install pada local machine karena merupakan runtime yang digunakan untuk menjalankan javascript secara server-side. Nodejs dapat di unduh melalui halaman resmi mereka.

https://nodejs.org/en/download/

pastikan memilih versi nodejs dengan tag LTS (Long time support) dan sesuaikan dengan sistem operasi yang digunakan. Contohnya pada saat ulasan ini dibuat pada tanggal 22 desember 2019 maka versi LTS nya adalah 12.14lts_nodejs.jpg

setelah terinstall pastikan nodejs telah terinstall dengan sempurna dengan membuka windows power shell (jika menggunakan windows) dan tuliskan node -v. apabila pada konsol muncul versi nodejs sesuai dengan versi installer yang didownload/install maka nodejs telah terinstall secara sukses pada local machine

ch1-node-js-result.jpg

buat file dengan nama test.js dan tuliskan baris kode dibawah ini

console.log("Halo dunia, ini adalah pemrograman javascript");

kemudian pergi folder dimana file test.js tersebut tersimpan dan buka windows power shell disana (shift + klik kanan -> open windows power shell here

atau juga dapat mengarahkan windows power shell tersebut ke folder yang menyimpan file test.js itu dengan menggunakan perintah

cd [folderpath]

Contohnya

cd "C:/Users/degananda.ferdian/Documents/Workspace/Node Workspace/degananda.com"

kemudian gunakan perintah dibawah ini untuk melakukan compile pada file test.js tersebut

node test.js

hasilnya akan muncul pada windows power shell.

ch1-compile-nodejs.jpg

Text editor untuk pemrograman javascript

Untuk text editor yang disarankan adalah menggunakan microsoft visual studio code. IDE tersebut sangat ringan dan terdapat ribuan library yang dapat menunjang pemrograman javascript.

Selain itu, microsoft merupakan perusahaan yang mensupport perkembangan typescript (memungkinkan menulis kode javascript dengan kaidah object oriented serta memberikan tipedata pada variable layaknya pada java ataupun pemrograman object lainnya ). Sehingga dengan menggunakan microsoft visual studio code maka secara otomatis saat hendak migrasi menggunakan typescrpit environment yang digunakan telah siap.

unduh microsoft visual studio code pada halaman resmi microsoft visual studio code. Pilihlah versi stable.

https://code.visualstudio.com/

hal menarik lainnya adalah visual studio code memiliki integrated terminal sehingga tidak perlu membuka window terminal lain / power shell untuk dapat melakukan kompilasi.

ch1-integrated-termina2l.jpg

Debugging pemrograman javsacript pada visual studio code

tidak perlu khawatir, secara built-in microsoft visual studio code telah menyediakan fitur untuk melakuan debugging. Cukup tekan F5 maka fitur debugging akan aktif.

ch1-debug-or-run.jpg

log debugging akan muncul pada window yang berada dibagian bawah visual studio code.ch1-debug-result.jpg

Daftar library microsoft visual studio code yang disarankan untuk di install.

Untuk dapat melakukan installasi library pergi ke menu extension atua tekan ctrl + shift + x jika menggunakan windows dan cari nama library yang hendak di install.

vs-code-extension.jpg

berikut ini adalah daftar library yang direkomendasikan untuk di install pada microsoft visual studio code.

1.ES6 code snippet – shortcut untuk memercepat pemrograman javascript

es6-code-snippet.jpgCode snippet adalah suatu shortcut yang dapat digunakan untuk memudahkan menulis kode javascript. Contohnya untuk membuat foreach loop yang perlu ditulis adalah fre. Secara otomatis library ini akan menuliskan template foreach loop dengan kaidah ES6.

Tulis fre pada editor visual studio code (pastikan menggunakan extensi .js pada nama filenya) maka secara otomatis akan terdapat popup untuk menggunakan snippet tersebut.

ch1-fre-snippet.jpg

Kemudian tekan enter(pilih) shortcut fre maka secara otomatis template kode foreach dengan kadaiah ES6 akan terbentuk.

ch1-fre-result.jpg

snippet ini sangat membantu untuk mempersingkat waktu pemrograman javascript serta dapat mengingatkan bentuk(format) syntax yang benar ketika lupa dengan format syntax tersebut.

2.JSLint untuk memeriksa kualitas kode

sesuai dengan namannya library akan sangat membantu dalam melakukan pengecekan kualitas kode javascript berdasarkan best practicenya. jika menggunakan typescript maka tslint juga harus terinstall pada visual studio code.

ch1-js-lint.jpg

setelah melakukan install jslint terdapat library lain yang perlu di install dengan menggunakan NPM (Node Package manager). Ini diperuntukan agar kode pada workspace dapat secara langsung teringrasi dengan jslint serta visual studio code.

Gunakan perintah dibawah ini untuk menginstall jslint pada nodejs

npm install jslint -g

gunakan parameter -g karena jslint akan di install secara global. Sehingga jika kedepannya membuat workspace baru maka jslint dan microsoft visual studio code sudah terintegrasi

*pastikan telah membuat project nodejs yang ditandakan dengan terdapatnya file package.json pada workspace sebelum melakukan installasi jslint dengan npm (node pacakge manager). Project nodejs dapat dibuat dengna menggunakan perintah dibawah ini

npm init

masukan deskripsi project sesuai kebutuhkan.

Validasi JSLint

setelah JSLint library pada visual studio code dan nodejs telah terinstall untuk melakukan cek apakah integrasinya berhasil, buka file javascript pada project maka secara otomatis pada setiap line yang bermasalah akan terhighlight dan jslint akan memberikan rekomendasi best practicenya.

ch1-js-lint-in-actionjpg.jpg

done, enjoy pemrograman javscript dengan nyaman dan bahagia.