Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic v3

  1. Home
  2. Blog
  3. Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic v3

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 menggunakan Cordova untuk membangun aplikasi mobile.

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 instalasi software yang dubutuhkan untuk ionic, terlebih dahulu kamu harus menginstal Android Studio (yang dibutuhkan hanya Android SDK) dan JDK. Kamu bisa melihatnya tutorialnya disini.

Berikut Tutorial Lengkap Membuat Aplikasi Mobile dengan Ionic

Kita akan mengintals Git dan NodeJS. Ikuti langkahnya 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. Selanjutnya kita akan install Cordova CLI, buka command prompt, (selanjutnya disebut CMD), ketik di cmd sebagai berikut :
    npm install -g cordova

    Lalu tekan enter, maka proses instalasi akan berjalan, tunggu saja sampai selesai. Untuk mengecek versinya bisa ketikkan pertintah berikut :

    cordova -v
  1. Setelah itu install Ionic CLI dengan perintah berikut :
    npm install -g ionic

    Untuk mengecek versinya bisa ketikkan perintah berikut :

    ionic -v

Instalasi Visual Studio Code

Kita akan melakukan instalasi code editor menggunakan Visual Studio Code, agar nanti kita lebih mudah melakukan edit kodenya.

Download dan Visual Studio Code memalui link berikut :

https://code.visualstudio.com/download

Ok, semua software yang dibtuhkan sudah diinstal, setelah ini kita akan memulai membuat project di Ionic.

Membuat Project Ionic

Pada bagian ini kita akan membuat project ionic untuk pertama kali, ikuti langkahnya dibawah ini :

  1. Buat folder baru misalkan di drive C bernama latihan ionic (kamu bisa juga membuatnya di drive D atau di mana pun yang kamu inginkan).
  2. Setelah itu tekan di keyboard shift + klik kanan di folder latihan ionic, lalu pilih Open command window here.
  3. Ketik perintah berikut :ionic start testAppLalu pilih opsi > tabs , untuk membuat proejct dengan tampilan tabs. Lalu tekan enter.
  4. Tunggu sampai proses intalasi selesai. Jika ada pertanyaan Ionic Pro seperti ini di ketik n saja untuk memilih no, lalu enter.
  5. Setelah itu masuk ke folder testApp project yang barusan kita buat dengan perintah berikut :
    cd testApp
  6.  Lalu jalankan aplikasi ionic nya dengan perintah berikut :
    ionic serve

    Maka secara otimatis aplikasi akan jalan secara otomatis di browser.

  7. Aplikasi testApp yang baru kita buat ini dapat berjalan juga pada versi mobile, kita bisa merubah ukuran tampilan layarnya seperti di smartphone. Caranya klik kanan di browser Google Chrome > klik inspect.Untuk mengubahnya klik tampilan titik tiga seperti gambar dibawah, lalu klik panel tampikang yang paling kanan seperti pada panah yang ditunjuk dibawah.
  8. Lalu ganti tampilannya dari responsive menjadi Galaxy S5 atau yang sesuai dengan smartphone terbaru.
  9. Maka akan menjadi seperti di mobile smartphone tampilannya.
  10. Aplikasi diatas merupakan tampilan mobile dari aplikasi android/ios yang nanti akan kita buat. Karena tadi kita memulai project nya dengan tampilan tabs, kama secara default sudah dibuatkan tab nya dibawah.

Selanjutnya kita akan memasuki contoh studi kasus membuat aplikasi daftar pekerjaan di Ionic.

Lihat kelanjutannya disini Membuat Aplikasi Ionic Daftar Pekerjaan (Studi Kasus)

Baca juga :
Cara Mudah Membuat Aplikasi Android Serbaguna dengan Universal

Previous Post
Virginia Rometty, CEO IBM yang Pekerja Keras
Next Post
Robert Pera, CEO Ubiquiti Network yang Terinspirasi Apple

Related Posts

Selected Grid Layout is not found. Check the element settings.

15 Comments. Leave new

postingan yang bagus, maaf mau tanya kalau untuk di ubuntu 16.04 32 bit, untuk install dan panduan ada linknya kah?

Reply

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

Reply

Mantap gan, ane bisa tertolong, jd referensi buat aplikasi android, rencananya ini mau ane buat versi mobilenya, coba lihat di SINI

Reply

sayangnya ini tak berjalan mulus saat build platform dan release to apk.
ada yang tau cara menggunakan gradle daemon?

Reply

pas mau nginstall “npm install -g ionic” error truss gan gimana solusi nya boss..,

Reply

itu bener gk cuma nulis “ionic start demoapp”.kok eror terus

Reply

    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)

    Reply

mantap gan postingannya…ditungggu kelanjutanyaa 🙂

Reply

CARA MUDAH MEMBUAT APK ANDROID GAK PAKE LAMA.
buat APK sebanyak-banyaknya agar earning anda banjir tiap bulannya.

Reply

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

Reply

[…] telah membahas langkah awal instalasi software yang dibutuhkan untuk membuat aplikasi mobile ionic disini, kini kita akan membuat studi kasus project ionic yaitu Membuat Aplikasi Daftar Pekerjaan dengan […]

Reply

gan tanya donk, ini error kenapa ya pas ada upgrade versi ionic 2 ke 3
Error: No component factory found for MenuPage. Did you add it to @NgModule.entryComponents?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Artikel Terbaru

Kategori Artikel