Tutorial Membuat Aplikasi Mobile Menggunakan Ionic Framework

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.

1. Download dan install software Git disini https://git-scm.com/downloads
2. Download dan install software Node.js versi LTS disini https://nodejs.org/en/download/
3. Jika kedua software di atas sudah di install, selanjutnya buka CMD (command prompt)
4. Ketik di cmd sebagai berikut :

   npm -v

5. Maka akan muncul versi yang terlah terinstall seperti dibawah ini
6. Selanjutnya, kita akan install ionic cordova. Ketic di cmd sebagi berikut :

   npm install -g cordova

7. Setelah itu plugin ionic cordova akan di install ke dalam sistem. Tunggu sampai statusya selesai.
8. Untuk mengetesnya ketik sebagai berikut

   cordova -v

9. Maka veris cordova yang telah di instal akan tampil di cmd
10. Selanjutnya kita install ionic dengan mengetikan di cmd sebagai berikut

    npm install -g ionic

11. Jika selesai di install, cek versinya sebagai berkut

    ionic -v

12. Maka akan muncul versi ionic yang telah di install
13. 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

14. Untuk memastikan bower sudah terintall, cek versinya sebagai berikut

    bower -v

15. Maka akan tampil seperti gambar dibawah ini
16. 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

17. cek versi nya juga dengan mengetik

    gulp -v

18. Maka akan seperti pada gambar berikut
19. Selesai, kita sudah mengintall semua tools untuk frameword ionic yang dibutuhkan
20. Kamu bisa membersihkan tampilan cmd dengan perintah CLS untuk memudahkan mengetik perintah baru

Membuat Project Baru

1. Langkah selanjutnya ialah membuat project baru, buat folder baru misalkan di drive E dengan nama folder terserah yang kami inginkan misalkan Latihan
2. Buka cmd lalu arahkan ke folder Latihan ketikan baris perintah berikut untuk membuat project dengan nama demoapp.

   ionic start demoapp

3. Maka library ionic pada project demoapp akan di download
4. Jika muncul pesan untuk membuat push notification dilewatkan saja dengan mengetik n, lalu enter.
5. Selesai, kini project demoapp sudah selesai dibuat dan bisa dijalankan.

Menjalankan Project Demoapp

1. Buka cmd, pastikan sudah berada pada direktori demoapp, lalu ketikan kode berikut

   ionic serve

2. Sehingga muncul seperti ini
3. Maka secara otomatis browser akan kebuka dan menjalankan project demeoapp default bawaan ionic-nya
   

Menjalankan Project Ionic di Platform Android

1. Berikutnya kita akan menjalankannya di android dan akan membuat file apk-nya
2. Buka cmd, pastikan posisi folder berada di demoapp. Ketik di cmd dengan perintah dibawah, lalu enter

   ionic platform add android

3. Tunggu sampai selesai di download, setelah itu kita akan build andorid apk nya, ketik di cmd perintah berikut

   ionic build android

4. Tunggu sampai program android selesai di build, dan akan menampilkan pesan build successful
5. Selanjutnya, jalankan emulator androidnya dengan perintah berikut ini

   ionic emulate android

6. Tunggu sampai emulator androidnya jalan, jika sudah maka aplikasi android demoapp akan jalan di emulator tersebut
7. 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
8. Jalankan Ionic Lab
9. Silahkan berkarya!