Skip to content
Home » Blog » Web Development – Persiapan Tools

Web Development – Persiapan Tools

Tools yang kita perlukan untuk memulai proses pengembangan aplikasi web banyak tersedia di Internet. Mulai dari yang berbayar sampai yang berlisensi open source. Dalam melakukan pengembangan aplikasi, kita perlu menyesuaikan IDE atau code editor apa yang harus kita pakai. Sebenarnya hal ini lebih ke arah kenyamanan saja dalam mengoperasikan tool.

Untuk tutorial ini, karena kita mengembangkan aplikasi berbasis web, maka tidak perlu menggunakan IDE yang terlalu berat jika dijalankan di PC kita, cukup menggunakan code editor sebagai tool utama kita.

Salah satu code editor yang penulis rekomendasikan yaitu Visual Studio Code, yang selanjutnya kita sebut dengan vscode saja. Vscode merupakan code editor yang relatif banyak penggunanya di kalangan developer web modern. Extensi yang ditawarkan juga sudah banyak, dan bisa dicopot pasang akan memudahkan pengguna untuk bisa berfokus/menyesuaikan dengan objective yang sedang dikerjakan.

Langkah-langkah instalasi Visual Studio Code adalah sebagai berikut:

  1. Download installer dari laman web resmi. Buka laman download Visual Studio Code terbaru pada tautan ini: Download VSCODE
  2. Klik pada tombol download sesuai OS yang dimiliki
  1. Tunggu beberapa detik hingga browser mulai proses download, kemudian tunggu hingga proses download selesai
  2. Buka file VSCodeUserSetup-xXX-1.x.x.exe sesuai versi yang telah diunduh
  3. Ikuti langkah instalasi dari installer VSCODE
  4. Pilih I accept the agreement, kemudian klik tombol Next >
  5. Klik tombol Next pada jendela Select Destination Location dan Select Start Menu Folder
  6. Centang semua pilihan pada jendela Select Additional Tasks dan klik tombol Next >, seperti berikut
  1. Klik tombol Install, dan tunggu hingga proses instalasi selesai, kemudian klik Finish untuk membuka aplikasi vscode
  1. Berikut contoh tampilan aplikasi code editor vscode:

Jika kita berhasil membuka aplikasi vscode dan sudah tampil workspace seperti gambar di atas, maka proses instalasi sudah selesai dan berhasil. Selanjutnya kita perlu menginstal(ini tidak mandatory sebenarnya) juga ekstensi-ekstensi yang untuk membantu kita dalam bekerja nantinya. Rekomendasi ekstensi yang mungkin bermanfaat untuk proses development UI front-end seperti:

  1. Bootstrap 5 Quick Snippets
  2. Font Awesome Auto-complete & Preview
  3. jQuery Code Snippets

Dengan ekstensi-ekstensi tersebut, bagi penulis sangat membantu dalam proses development UI untuk front end, sehingga bisa bekerja lebih cepat. Sekian untuk tulisan kali ini, selanjutnya kita akan beranjak ke persiapan environment untuk development, yaitu instalasi server dan aplikasi-aplikasi pendukungnya.

Salam.

Leave a Reply

Your email address will not be published. Required fields are marked *