Tutorial Ionic part 1 : Cara Instal Ionic


Cara Instal Ionic

pada artikel kali saya akan membahas cara instal ionic, lanjut dari artikel sebelumnya pengenalan ionic framework. untuk instalasi ionic sendiri berbeda-beda menurut sistem operasi yang digunakan. namun saya disini menggunakan sistem operasi windows.

dalam menginstall ionic menggunakan command line NodeJs. berikut beberapa tool yang harus di persiapkan terlebih dahulu sebelum proses install ionic. tool tersebut adalah :

  1. NodeJS
  2. Java JDK
  3. Apache Ant
  4. Android SDK

download dulu masing-masing tool tersebut, tool ini sangat kita butuhkan dalam proses instalasi, jika salah satu dari tool ini tidak terintall maka akan akan terjadi error pada saat kita melakukan pengkodingan nantinya.

langkah-langkah instalasi ionic

saya tekankan lagi, download dulu tool yang sudah di list di atas. berikut tahap-tahap cara instal ionic di windows khusunya.

  1. install NodeJS. yang pertama harus kita lakukan adalah menginstall nodeJS. NodeJS sediri berfungsi untuk mengeksekusi aplikasi server. salah satu fungsinya yaitu kita bisa mengakses npm (perintah yang akan digunakan untuk menginstall salah satunya ionic). langkah-langkah instalasinya sama dengan proses kita menginstall aplikasi lain di windows.
  2. Install Java JDK. sama halnya dengan menginstall node js, pada category java saya sudah menjelaskan cara instalasi java jdk. silahkan dibaca kembali untuk memehami cara instalasi java-nya. fungsi java disini adalah kita memerlukannya ketika mengkompile aplikasi ionic yang kita buat.
  3. apache ant. setelah apache ant-nya di download, ekstrak terlebih dahulu dan letakkan pada direktori yang diinginkan (disini saya meletakkan apache ant ini di partisi C). sebenarnya apache ant ini tidak di install seperti aplikasi lainnya, dia hanya perlu di ekstrak dan di path (berfungsi ketika kita mamanggil lewat cmd) . spenjelasan path akan saya jelaskan di bawah.
  4. Intall android SDK. untuk android sdk sendiri ada yang android sdk-nya aja dan ada juga yang sudah di gabungkan dengan android studio. jadi anda anda tinggal memilih salah satunya. jika memiih android anda bisa mendownload dan menginstall android studio. intinya kita memerlukan android sdk ini untuk menjalankan aplikasi yang kita buat nantinya, dan selain itu android sdk ini juga perlu ketika kita membuild aplikasi android yang menggunakan ionic.

tahap instalasi tool yang kita perlukan untuk ionic sudah tersedia semua. berikut akan saya jelaskan cara melakukan path environment variabel. fungsi path disini salah satunya untuk memudahkan kita dalam memanggil aplikasi lewat CMD.

Cara Melakukan Path Environment

sebelum ke tahap instalasi ionic, kita harus melakukan path environtment untuk tiap-tiap tool yang sudah kita install tadinya. berikut langkah-langkah melakukan path environment untuk tiap-tiap tool.

  1. Path NodeJS. setelah melakukan instalasi NodeJS, ada yang sudah di path langsung, dan ada juga yang belum. untuk melihat apakah nodeJS yang sudah kita install sudah di path atau belum kitikkan perintah berikut di CMD

    Cara Instal Ionic

    path nodeJS

    jika tidak tampil seperti ini maka anda belum melakukan path untuk nodeJS. berikut cara melakukan path environtmmen untuk NodeJS. klik kanan pada my computer pilih properties-advanced System setting-environment variables..  klik pada variabel PATH pilih edit dan tambahkan C:\Users\c13\AppData\Roaming\npm (sesuaikan dengan direktori npm komputer anda)

    Cara Instal Ionic

    path nodeJS

  2. Path Java JDK. untuk java jdk, klik kanan my computer pilih properties-advanced System setting-environment variables.. pilih new dan tambahkan seperti yang di gambar berikut :
    Cara Instal Ionic

    path java

    untuk direktori java jdk sesauikan dengan yang ada di komputer anda. klik pada path pilih edit dan tambahkan seperti langkah-langkah pada gambar berikut :

    Cara Instal Ionic

    Path Java JDK

    sebenarnya path untuk java bisa dilakukan langsung,  caranya tambahkan direktory java untuk folder bin-nya kedalam path. untuk lebih jelas perhatikan gambar berikut :

    Cara Instal Ionic

    Path java jdk

    kita sudah selesai melakukan path untuk java JDK

  3. path apache ant. untuk path environtment apache ant sama seperti kita malakukan path nodeJS dan java jdk. klik pada PATH pilih edit dan tambahkan direktori apache ant/bin yang sudah kita ekstrak tadinya.untuk lebih jelas perhatikan gambar berikut :

    Cara Instal Ionic

    path apache ant

  4. path android sdk. ini sama halnya dengan tool lain.  klik new dan tulis seperti di gambar :
    ara Instal Ionic

    Path android sdk

    untuk variable value, sesuaikan dengan letak android sdk di komputer anda. langkah selanjutnya klik pada PATH tekan tombol EDIT tambahkan direktory android sdk, contohnya seperti berikut : %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

    selesai sudah kita melakukan path terhadap masing-masing tool yang dibutuhkan untuk membuat aplikasi dengan ionic.

Cara Instal Ionic

menuju ke langkah instalasi ionic. setelah kita melakukan instalasi dan path masing-masing dari tool yang dibutuhkan, selanjutnya kita mencoba melakukan instalasi ionic. buka command line (CMD) ketikkan perintah berikut :

ini akan membutuhkan beberapa saat sampai instalasi selesai. waktu yang dibutuhkan-pun tergantung pada kecepatan koneksi internet. berikut gambar instal ionic

Cara Instal Ionic

Instal Ionic

Cara Instal Ionic

selesai Instal Ionic

selain menggunakan perintah ini bisa juga dengan perintah menginstall satu -satu antara paket ionic dan cordova.

untuk melihat dokumentasi lengkap framework ionic bisa pelajari lansung di web resmi ionicframework.com disini sudah sediakan dukumentasi yang sangat lengkap berbahasi ingris.

oke, paket ionic dan cordova sudah siap di install. sekian dulu artikel cara instal ionic, artikel selanjutnya akan membahas cara membuat projek menggunakan ionic


Muzanni

Algorithms Learner, future lecturer and Happy to sharing about knowledge

Tutorial Menarik Lainnya

membuat icon pada ionic
Tutorial Ionic Part 10 Checkbox pada Ionic
Penggunaan Warna Pada Ionic
Tutorial Ionic Part 8 Pengenalan Komponen Tabs Pada Ionic

Diskusi

3 Komentar
  • anjar saputra 6 years ago

    terima kasih atas petunjuknya , sangat membantu saya belajar pemula

  • Isnan 6 years ago

    bang mau tanya, spek minimal untuk ionic ini bagaimana ya?

    • Diki Alfarabi Hadi 6 years ago

      kalau ionic gak ada spek khusus sih, beda dengan android studio yang berat dan butuh spek laptop yang lumayan

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD