Apa itu Ionic?
Framework Ionic adalah merupakan framework HTML5 yang membantu kita dalam mengembangkan aplikasi mobile dengan teknologi web seperti HTML, CSS dan Javascript. Framework Ionic adalah platform yang mentargetkan Programmer Web agar bisa membuat aplikasi Mobile dengan Teknologi Web. Artinya Programmer web yang ingin menjadi programer Mobile tidak perlu belajar Java atau Objective C atau C# untuk membuat versi Aplikasi dari layanan webnya.
Framework Ionic terdiri dari sekumpulan teknologi yang dikembangkan untuk membangun aplikasi mobile hybrid yang powerful, cepat, mudah dan juga memiliki tampilan yang menarik.Framework Ionicmenggunakan AngularJS sebagai framework berbasis web dan menggunakanCordova untuk membangun aplikasi mobile.
Saat ini, Framework Ionic mendukung UIWebView untuk iOS 6+ dan Android 4+ (dengan beberapa dukungan untuk 2.3). Sebagai pengembang (developer), tentu Anda juga dapat menggunakan emulatoruntuk menjalankan aplikasi dari Ionic ini, seperti Genymotion, Android Emulator, iOS Simulator atau BlueStacks.
Platform apa saja yang kamu bisa buat dengan Ionic ini?
Dengan franework Ionic, kamu bisa membuat aplikasi cross platform di beberapa sistem operasi yang berbeda, seperti Android, Windows dan juga iOS. Keren kan? Jadi kamu tidak perlu susah payah memahami bahasa pemrograman khusus untuk membuat ketiga aplikasi yang berbeda perangkat ini.
Apa saja yang kamu butuhkan dalam membuat aplikasi berbasis framework Ionic?
Pada tutorial ini saya memfokuskan pembuatan aplikasi android yang membutuhkan tools yang berbeda dengan aplikasi iOS.
Sebelum memulai terlebih dahulu kamu harus menginstal Android Studio dan JDK. Kamu bisa melihatnya tutorialnya disini.
Instalasi software yang dibutuhkan
Terlebih dahulu kamu harus mendownload software yang dibutuhkan sebagai berikut.
- Download dan install software Git disini https://git-scm.com/downloads
- Download dan install software Node.js versi LTS disini https://nodejs.org/en/download/
- Jika kedua software di atas sudah di install, selanjutnya buka CMD (command prompt)
- Ketik di cmd sebagai berikut :
npm -v
- Maka akan muncul versi yang terlah terinstall seperti dibawah ini
- Selanjutnya, kita akan install ionic cordova. Ketic di cmd sebagi berikut :
npm install -g cordova
- Setelah itu plugin ionic cordova akan di install ke dalam sistem. Tunggu sampai statusya selesai.
- Untuk mengetesnya ketik sebagai berikut
cordova -v
- Maka veris cordova yang telah di instal akan tampil di cmd
- Selanjutnya kita install ionic dengan mengetikan di cmd sebagai berikut
npm install -g ionic
- Jika selesai di install, cek versinya sebagai berkut
ionic -v
- Maka akan muncul versi ionic yang telah di install
- Selanjutnya kita install bower, yaitu sebuah package manager yang dibutuhkan dalam membuat aplikasi ionic, caranya dengan mengetikan di cmd sebagai berikut
npm install -g bower
- Untuk memastikan bower sudah terintall, cek versinya sebagai berikut
bower -v
- Maka akan tampil seperti gambar dibawah ini
- Install juga gulp yang merupakan sebuah library javascript yang dibutuhkan untuk membuat aplikasi berbasis framwork ionic, dengan mengetikan di cmd sebagai berikut
npm install -g gulp
- cek versi nya juga dengan mengetik
gulp -v
- Maka akan seperti pada gambar berikut
- Selesai, kita sudah mengintall semua tools untuk frameword ionic yang dibutuhkan
- Kamu bisa membersihkan tampilan cmd dengan perintah CLS untuk memudahkan mengetik perintah baru
Membuat Project Baru
- Langkah selanjutnya ialah membuat project baru, buat folder baru misalkan di drive E dengan nama folder terserah yang kami inginkan misalkan Latihan
- Buka cmd lalu arahkan ke folder Latihan ketikan baris perintah berikut untuk membuat project dengan nama demoapp.
ionic start demoapp
- Maka library ionic pada project demoapp akan di download
- Jika muncul pesan untuk membuat push notification dilewatkan saja dengan mengetik n, lalu enter.
- Selesai, kini project demoapp sudah selesai dibuat dan bisa dijalankan.
Menjalankan Project Demoapp
- Buka cmd, pastikan sudah berada pada direktori demoapp, lalu ketikan kode berikut
ionic serve
- Sehingga muncul seperti ini
- Maka secara otomatis browser akan kebuka dan menjalankan project demeoapp default bawaan ionic-nya
Menjalankan Project Ionic di Platform Android
- Berikutnya kita akan menjalankannya di android dan akan membuat file apk-nya
- Buka cmd, pastikan posisi folder berada di demoapp. Ketik di cmd dengan perintah dibawah, lalu enter
ionic platform add android
- Tunggu sampai selesai di download, setelah itu kita akan build andorid apk nya, ketik di cmd perintah berikut
ionic build android
- Tunggu sampai program android selesai di build, dan akan menampilkan pesan build successful
- Selanjutnya, jalankan emulator androidnya dengan perintah berikut ini
ionic emulate android
- Tunggu sampai emulator androidnya jalan, jika sudah maka aplikasi android demoapp akan jalan di emulator tersebut
- Untuk kemudahan, selain menjalankan Ionic dengan command, kita dapat juga menjalankan Ionic dalam format GUI. Silahkan download melalui link http://bit.ly/ionic-lab-win atau link https://ionic-io-assets.s3.amazonaws.com/labs/IonicLabSetup.zip
- Jalankan Ionic Lab
- Silahkan berkarya!
Indonesian
Arabic
Dutch
English
German
Japanese
Portuguese
Russian
Error running android app.
Error: cmd: Command failed with exit code 2 Error output: ERROR: Error: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.