Setelah memahami apa itu Ionic pada artikel pengenalan, langkah selanjutnya adalah mempersiapkan “bengkel” atau lingkungan pengembangan di komputer Anda. Proses instalasi ini sangat penting dan menjadi fondasi untuk semua proyek yang akan Anda bangun. 🛠️

Tutorial ini akan memandu Anda langkah demi langkah dalam menginstal semua perangkat lunak yang dibutuhkan untuk mulai mengembangkan aplikasi dengan Ionic.

## Prasyarat: Apa yang Perlu Diinstal?

Sebelum kita bisa membuat proyek Ionic, ada tiga komponen utama yang harus terpasang di sistem Anda:

1. Node.js: Ini adalah lingkungan eksekusi JavaScript yang memungkinkan kita menjalankan JavaScript di luar browser. Di dalamnya sudah termasuk npm (Node Package Manager), sebuah alat untuk mengelola library atau paket JavaScript.
2. Ionic CLI: Singkatan dari Command Line Interface. Ini adalah alat bantu baris perintah resmi dari Ionic yang akan kita gunakan untuk membuat, menjalankan, dan membangun proyek.
3. Code Editor: Anda butuh tempat untuk menulis kode. Visual Studio Code (VS Code) adalah pilihan yang sangat populer dan direkomendasikan karena gratis, kuat, dan memiliki banyak ekstensi yang mempermudah pengembangan.

Mari kita instal satu per satu.

## Langkah 1: Instalasi Node.js dan npm

Ionic CLI dan banyak perkakas web development modern membutuhkan Node.js untuk berjalan.

1. Kunjungi Situs Resmi Node.js: Buka browser Anda dan pergi ke nodejs.org.
2. Pilih Versi LTS: Anda akan melihat dua versi yang ditawarkan: LTS (Long-Term Support) dan Current. Selalu pilih dan unduh versi LTS. Versi ini adalah yang paling stabil dan direkomendasikan untuk sebagian besar pengguna.
3. Jalankan Installer: Setelah unduhan selesai, jalankan file installer tersebut. Ikuti semua langkah instalasi dengan menyetujui lisensi dan menggunakan pengaturan default. Cukup klik “Next” hingga proses selesai.
4. Verifikasi Instalasi: Untuk memastikan Node.js dan npm sudah terinstal dengan benar, buka command prompt atau terminal Anda:
   • Windows: Tekan Win + R, ketik cmd, lalu Enter.
   • Mac/Linux: Buka aplikasi Terminal.

   Ketik perintah berikut satu per satu dan tekan Enter. Anda akan melihat nomor versi jika instalasi berhasil.

   Bash

   node -v
   npm -v
   

   Jika kedua perintah tersebut menampilkan nomor versi, berarti Anda sudah siap untuk langkah berikutnya.

## Langkah 2: Instalasi Ionic CLI

Dengan npm yang sudah siap, menginstal Ionic CLI menjadi sangat mudah. Ionic CLI adalah “tongkat sihir” Anda untuk berinteraksi dengan Ionic Framework.

1. Buka Terminal atau Command Prompt: Gunakan terminal yang sama seperti pada langkah verifikasi sebelumnya.
2. Jalankan Perintah Instalasi: Ketik perintah berikut dan tekan Enter.
   Bash

   npm install -g @ionic/cli
   

   Mari kita bedah perintah ini:

   • npm install: Ini adalah perintah dasar npm untuk menginstal sebuah paket.
   • -g: Flag ini berarti global. Artinya, Ionic CLI akan diinstal secara global di sistem Anda, sehingga bisa diakses dari direktori mana pun.
   • @ionic/cli: Ini adalah nama resmi dari paket Ionic CLI di repositori npm.
3. Tunggu Proses Selesai: npm akan mengunduh dan menginstal paket Ionic CLI beserta dependensinya. Proses ini mungkin memakan waktu beberapa menit tergantung kecepatan internet Anda.
4. Verifikasi Instalasi Ionic CLI: Setelah selesai, ketik perintah berikut untuk memastikan Ionic CLI sudah terpasang.
   Bash

   ionic -v
   

   Jika Anda melihat nomor versi Ionic CLI, selamat, instalasi berhasil!

## Langkah 3: Instalasi Visual Studio Code (Opsional, tapi Direkomendasikan)

Meskipun Anda bisa menggunakan editor teks apa pun, VS Code memberikan pengalaman pengembangan yang jauh lebih baik.

1. Kunjungi Situs Resmi VS Code: Buka code.visualstudio.com.
2. Unduh dan Instal: Situs akan secara otomatis mendeteksi sistem operasi Anda. Unduh dan jalankan installer-nya. Prosesnya sangat mudah, cukup ikuti petunjuk di layar.
3. Instal Ekstensi Penting: Setelah VS Code terbuka, buka tab Extensions (ikon balok). Cari dan instal beberapa ekstensi yang sangat membantu untuk pengembangan Ionic:
   • Ionic Snippets: Menyediakan snippet kode untuk komponen Ionic.
   • Prettier – Code formatter: Membuat kode Anda rapi secara otomatis.
   • ESLint: Membantu menemukan kesalahan pada kode JavaScript Anda.

## Kesimpulan ✅

Lingkungan pengembangan Anda kini sudah siap! Anda telah berhasil menginstal Node.js, npm, dan Ionic CLI. Dengan tiga alat utama ini, Anda sudah memiliki semua yang dibutuhkan untuk membuat aplikasi mobile cross-platform pertama Anda.

Di tutorial selanjutnya, kita akan menggunakan Ionic CLI untuk membuat proyek Ionic pertama, memahami struktur foldernya, dan menjalankannya di browser. Happy coding!