Setup Ionic Development Environment Di Windows

Membuat sebuah aplikasi dengan Ionic Framework, tentunya kita perlu meng-install environment yang dibutuhkan oleh Ionic terlebih dahulu. Ada beberapa environment yang perlu kita install untuk memulai men-develop sebuah aplikasi dengan Ionic Framework, diantaranya yaitu Node.js, Java, Android SDK, Ionic dan Cordova. Karena sistem operasi yang kita gunakan adalah Windows maka kita hanya dapat mengkompilasi kode menjadi sebuah file utuh berekstensi .apk yaitu untuk Android.

Sebelumnya kita telah membahas Ionic Framework dan sebelum melangkah lebih jauh sebaiknya kamu baca terlebih dahulu artikel sebelumnya jika kamu masih belum paham mengenai Ionic Framework, jika sudah silakan ikuti langkah-langkah berikut ini.

Let’s go!

Berikut ini adalah urutan environment yang akan kita setup.

  • Java
  • Node.JS
  • Android SDK
  • Ionic
  • Cordova

Jangan lupa untuk mengkoneksikan personal computer kamu dengan internet, karena kita membutuhkan koneksi internet yang stabil dan cepat untuk melakukan setup.

Java

Pertama, kita akan meng-install Java. Untuk mendapatkan Java, kamu dapat mengunjungi situs resminya di sini.

Kemudian pilih “Windows x86” untuk Windows 32-bit atau pilih “Windows x64” untuk Windows 64-bit. Untuk men-download, klik link di sampingnya dan sebelum itu jangan lupa untuk men-check “Accept License Agreement”.

Download hingga selesai dan jalankan file .exe yang telah di-download tersebut.

Setelah dijalankan biasanya akan muncul popup, jika muncul maka pilih “Yes” saja dan akan muncul tampilan selamat datang dari jendela installer Java, lalu pilih tombol “Next >”

Akan muncul tampilan berikutnya dari jendel installer Java, dibagian ini kamu dapat memilih fitur apa saja yang ingin kamu install dan memilih folder untuk Java di-install. Langsung “Next >” saja.

Berikutnya installer Java akan memulai memvalidasi personal computer kamu apakah memenuhi syarat untuk meng-install Java atau tidak. Tunggu saja dibagian ini hingga prosesnya selesai, biasanya membutuhkan waktu beberapa menit.

Jika sudah, maka kamu akan ditanya lagi mengenai folder tempat penyimpanan Java JRE nantinya. Maka langsung “Next >” saja agar di-install di dalam satu folder yang sama.

Berikutnya adalah proses instalasi Java, tunggu hingga prosesnya selesai dan jangan sampai personal computer kamu mati.

Jika selesai, maka akan menampilkan tampilan seperti berikut.

Sampai sini proses instalasi Java sudah selesai. Untuk memastikannya silakan buka CMD atau PowerShell dan ketik perintah java -version. Kemungkinan besar versi Java yang kamu install dengan saya berbeda, jadi tidak perlu heran.

Node.JS

Setelah Java, sekarang kita akan melakukan instalasi terhadap Node.JS. Sebelumnya, kamu perlu download terlebih dahulu Node.JS di sini.

Pilih versi Node.JS yang memiliki LTS (Long Term Support). Saat ini, versi yang memiliki LTS adalah versi 8.11.1 maka download versi tersebut dan tunggu hingga selesai.

Jika sudah, jalankan file installer tersebut lalu akan memunculkan jendela selamat datang dari Node. Lalu pilih “Next” saja.

Setelah jendela selamat datang, berikutnya akan muncul jendela “License Agreement”. Maka setujui dan “Next”.

Seperti pada umumnya, setiap installer akan menanyakan tempat penyimpanan folder untuk perangkat lunak yang akan di-install. Maka dalam kasus ini tidak perlu diubah dan pilih “Next” saja.

Kemudian, dibagian ini kamu dapat memilih fitur mana saja yang hendak di-install. Dalam kasus ini tidak perlu ada yang diubah dan “Next” saja.

Setelah semuanya dilalui, maka Node.JS bersedia untuk di-install. Klik “Install” untuk memulai proses instalasi.

Tunggu hingga prosesnya selesai.

Jika sudah maka akan menampilkan jendela seperti berikut.

Sampai sini Node.JS sudah berhasil di-install. Untuk memastikannya kamu dapat buka CMD atau PowerShell dan ketik perintah node -v. Kemungkinan besar versi Node.JS kamu dengan saya berbeda, jadi tidak perlu heran.

Android SDK

Berikutnya Android SDK. Kita tidak perlu men-download Android Studio-nya, melainkan kita hanya perlu Android SDK-nya saja, karena untuk development kita akan menggunakan IDE atau text editor yang lain seperti Sublime Text, Visual Studio Code, Atom, Brackets atau yang lainnya.

Bagian ini kita akan banyak menggunakan CMD dan akan sedikit sulit jika kamu tidak familiar dengan CLI dan tidak paham perintah-perintah dasar CLI. Tapi tidak perlu khawatir, karena saya akan menjelaskannya satu per satu.

Untuk men-download Android SDK maka pergi ke sini.

Karena kita menggunakan Windows, maka pilih Windows pada bagian platform dan klik link di sampingnya untuk memulai download. Lalu akan memunculkan dialog Term and Conditions” maka setujui dan klik tombol download yang berwarna biru.

Tunggu hingga proses download selesai dan ekstrak file .zip yang telah di-download tadi kemudian ubah namanya menjadi androidsdk. Dalam kasus ini saya mengekstrak file-nya ke dalam drive S:/.

Kemudian jalankan CMD secara administrator.

Jika sudah terbuka, maka jalankan perintah S: untuk pindah drive, saya menggunakan S: karena nama letter drive tempat folder Android SDK tadi saya adalah S:, jika kamu menggunakan drive lain untuk menyimpan folder Android SDK-nya, misal D: atau E: atau yang lainnya maka sesuaikan.

Maka CMD telah berpindah ke drive yang dituju. Berikutnya kita akan melakukan printah cd yaitu change directory yang berfungsi untuk berpindah folder ke folder lain dan mengakses folder tersebut. Karena saya memberikan nama foldernya adalah androidsdk dan menyimpan folder Android SDK tepat di dalam drive S dan tidak di dalam folder manapun maka saya menggunakan perintah cd androidsdk.

Jika sudah, maka lakukan perintah cd sekali lagi untuk mengakses folder bin di dalam folder androidsdk.

Jika sudah berada di dalam folder androidsdk/bin maka berikutnya ketik perintah seperti berikut.

sdkmanager "platform-tools" "platforms;android-26"

Perintah tersebut untuk men-download kebutuhan development Android. Tunggu hingga muncul tampilan “License Agreement” dan tekan “Y” seperti berikut.

Setelah menyetujui lisensi maka CMD akan mulai men-download file yang diminta. Pastikan koneksi internet kamu stabil dan cepat. Juga, proses download tidak terlihat, bahkan terkesan CMD-nya stuck padahal itu sedang proses men-download jadi biarkan saja.

Tunggu hingga proses download selesai. Jika berhasil maka akan membuat terdapat folder baru di luar folder androidsdk bernama platform-tools, license dan platforms.

Proses download telah selesai, namun kita perlu melakukan konfigurasi path.

Pergi ke Computer Properties.

Lalu pilih “Advanced System Settings“.

Kemudian akan muncul jendela baru, lalu klik “Environment Variables …“.

Akan muncul jendela baru lagi, lalu klik tombol “New” yang bagian bawah “System Variables”.

Lalu akan muncul jendela baru lagi, masukkan ANDROID_HOME pada kolom Variable Name dan berikan lokasi folder platform-tools yang telah di-download sebelumnya. Dalam kasus ini lokasi folder platform-tools saya berada di S:\platform-tools.

Kemudian klik “OK”.

Lalu, klik pada variable path dan klik tombol “Edit” di bawahnya dan akan muncul jendela baru.

Klik tombo “New” untuk menambahkan path baru.

Berikan nilai alamat folder platform-tools lagi.

Tekan Enter pada keyboard dan tekan tombol “OK” pada semua jendela hingga semuanya tertutup.

Sampai sini Android SDK sudah terkonfigurasi, untuk mengujinya maka kamu dapat membuka CMD dan ketik perintah adb. Jika berhasil maka akan muncul seperti ini.

Ionic & Cordova

Terkahir kita akan meng-install Ionic dan Cordova, pada bagian ini sangat mudah, karena hanya menjalankan 1 perintah pada CMD dan tunggu, lalu selesai.

Karena Ionic dan Cordova termasuk package dari Node.JS maka kita akan meng-install-nya menggunakan perintah npm. NPM merupakan kependekan dari Node Package Manager yang berfungsi untuk me-manage package pada Node seperti meng-install, menghapus dan meng-update. Dalam kasus ini kita akan meng-install package bernama ionic dan cordova. Gunakan perintah berikut.

Tunggu hingga proses instalasi selesai, kecepatan instalasi bergantung pada koneksi internet.

Jika berhasil maka akan tampil seperti ini dan jika gagal silakan ulangi, kemungkinan bermasalah pada koneksi internet kamu.

Sampai sini, Ionic dan Cordova telah berhasil di-install. Untuk memastikannya, kamu dapat membuka CMD dan ketika perintah ionic -v dan cordova -v.

 

Memulai Project Pertama Dengan Ionic

Setelah semuanya siap, maka kita akan mencoba membuat project pertama dengan Ionic. Caranya mudah, buka CMD dan ketik perintah ionic start nama_project. Sebagai contoh saya beri nama project saya adalah myfirstapp. Nama project tidak boleh mengandung spasi.

Lalu kamu akan ditanya, pertanyaan ini mengenai template starter yang akan kita gunakan. Pilih saja sidemenu. (Gunakan tombol arah atas dan bawah pada keyboard dan tekan Enter untuk memilih).

Kemudian kamu akan ditanya lagi, ketik “Y” saja dan tekan Enter. Pertanyaan ini mengenai integrasi dengan Cordova.

Lalu tunggu hingga proses selesai.

Kamu akan ditanya lagi, maka pilih “N” dan tekan Enter.

Lalu tunggu hingga proses selesai, jika terdapat error maka abaikan saja, kemungkinan itu error dari GIT.

Sampai sini project Ionic sudah siap. Untuk menjalankannya, ketik perintah cd nama_project.

Lalu ketik perintah ionic serve.

Tunggu hingga proses berhasil.

Jika berhasil, maka akan otomatis membuka tab browser baru dengan tampilan project Ionic kita.

Di atas adalah tampilan pada template bawaan Ionic yaitu sidemenu. Ionic memiliki template bawaan lainnya seperti tab, blank dan lain sebagainya. Dengan template bawaan Ionic kita tidak perlu membangun aplikasi mobile benar-benar dari nol.

 

Final Words

Sampai sini kita sudah dapat mulai men-develop aplikasi mobile dengan Ionic Framework. Untuk tutorial berikutnya kita akan mencoba mengkompilasi kode Ionic menjadi sebuah file .apk untuk diuji pada smartphone sungguhan. Semoga Bermanfaat.

Digital Ocean baner

Muhamad Nauval Azhar

Code of a down