Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic

13
598
Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic

Pada artikel kali ini warung komputer akan memberikan Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic.

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 Ionic menggunakan 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 emulator untuk 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 iniTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 cmdTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 installTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 iniTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 berikutTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 downloadTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  4. Jika muncul pesan untuk membuat push notification dilewatkan saja dengan mengetik n, lalu enter.Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 iniTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  3. Maka secara otomatis browser akan kebuka dan menjalankan project demeoapp default bawaan ionic-nya
    Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic

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 successfulTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  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 tersebutTutorial Lengkap Membuat Aplikasi Mobile dengan Ionic
  7. Selesai.

Bersambung…

13 COMMENTS

  1. sudah saya coba install di ubuntu, sampai dengan perintah ionic serve, sudah sukses tetapi ketika menjalankan ionic platform add android, ionic build android terjadi error.
    “Error: Failed to find ‘ANDROID_HOME’ environment variable. Try setting setting it manually.
    Failed to find ‘android’ command in your ‘PATH’. Try update your ‘PATH’ to include path to valid SDK directory.”
    Terima kasih

    • error itu ada penjelasannya.
      kalau yang ditulis admin sini, “ionic start ” nanti ada penjelasannya untuk melanjutkan, dan bisa milih dengan arah. blank/tabs/sidemenu (kalau batal ctrl+c) lebih simpelnya pakai yang ini.
      “ionic start blank untuk yang blank”
      “ionic start tabs”
      “ionic start sidemenu”
      (tanpa petik)

  2. cordova emulate android
    [18:49:55] lint finished in 2.78 s
    Error: Failed to find ‘ANDROID_HOME’ environment variable. Try setting setting it manually.
    Failed to find ‘android’ command in your ‘PATH’. Try update your ‘PATH’ to include path to valid SDK directory.

    [ERROR] An error occurred while running cordova emulate android (exit code 1).

    mohon solusinya

LEAVE A REPLY

Please enter your comment!
Please enter your name here