MEMBUAT APLIKASI MOBILE SEDERHANA MENGGUNAKAN FRAMEWORK IONIC

MEMBUAT APLIKASI MOBILE SEDERHANA MENGGUNAKAN FRAMEWORK IONIC

MEMBUAT APLIKASI MOBILE SEDERHANA MENGGUNAKAN FRAMEWORK IONIC

  1. Penjelasan Framework Ionic

Gambar 1 Logo Framework Ionic

Ionic adalah sebuah framewok aplikasi mobile berbasis HTML5 yang dapat digunakan untuk mengembangkan apikasi mobile dengan teknologi web seperti HTML, CSS, dan Javascript. Dengan menggunakan Ionic, para developer web bisa membuat aplikasi lintas platform seperti untuk Android dan iOS.

Dengan menggunakan Ionic, para developer web tidak perlu belajar bahasa pemrograman Java, Objective C, atau C# untuk membuat aplikasi mobile karena mereka cukup menggunakan ilmu mereka di bahasa pemrograman web.

  1. Yang Dibutuhkan Dalam Penggunaan Ionic

IONIC membutuhkan aplikasi tambahan dalam penggunaannya seperti berikut:

  1. Text Editor (Visual Studio Code, Sublime Text, Notepad++ dan sebagainya)
  2. Web Browser (Google Chrome, Mozilla Firefox, Safari dan sebagainya)
  3. Android SDK ( dapat di install via SDK Manager di Android Studio)
  4. Instalasi Framework Ionic

Sebelum menginstall IONIC perangkat harus sudah terinstall dengan Node JS. Node JS dapat diinstall dengan mengunduh installernya di alamat https://nodejs.org/en/.

Gambar 2 Website resmi dari node js

Prosedur untuk menginstall IONIC adalah:

  1. Pastikan komputer sudah dalam keadaan terhubung internet
  2. Buka terminal atau command prompt
  3. Ketikkan npm install -g ionic cordova lalu tekan enter
  4. Tunggu proses sampai selesai
  5. Dan ionic sudah terinstall

Gambar 3 Instalasi Framework IONIC

  1. Membuat Projek Baru Ionic

Framework IONIC memiliki antarmuka CLI yakni kita memasukkan perintah menggunakan teks Untuk membuat aplikasi sederhana buka command prompt lalu arahkan ke direktori yang diinginkan. Ketikkan “ionic start helloWorld blank” untuk membuat sebuah projek baru dengan nama helloWorld.

Gambar 4 Memindahkan Direktori dan Membuat Projek baru

Gambar 5 Proses Pembuatan Projek Baru IONIC

Jika muncul “install the free Ionic Pro SDK and connect your app?” tulis No lalu enter

Tunggu proses sampai selesai.

  1. Menjalankan dan Merubah Isi Projek Ionic

Jalankan projek baru yang sudah kita buat menggunakan terminal atau command prompt lalu akses direktori projek kita. Ketikkan ionic serve pada command prompt maka tunggu sesaat akan muncul tab baru pada web browser

Gambar 6 Akses Direktori Dan Jalankan Projek Tersebut

Gambar 7 Tab Baru Akan Muncul Setelah Kita Menjalankan Perintah Ionic Serve

Tekan ctrl+shift+I untuk merubah ke tampilan mobile

Gambar 8 Tampilan Mobile

Buka text editor untuk merubah projek yang sudah dibuat. Di dalam text editor buka direktori projek dan cari helloWorld\src\pages\home\home.html

Gambar 9 Isi Dari home.html

Coba lah berkreasi dengan merubah isi dari home.html lalu simpan maka akan terjadi perubahan pada tab web browser secara langsung

Gambar 10 Merubah Isi Dari Projek Ionic

  1. Komponen Resmi Dari Ionic

Akses https://ionicframework.com/docs/components/ lalu pilih komponen apa yang ingin ditambahkan ke dalam aplikasi. Cara kerja komponen Ionic cukup mudah yakni tinggal menyalin source code dan menempelkan ke home.html projek kita.

Gambar 11 Tampilan Web Komponen Ionic

Gambar 12 Membuat Dua Tombol Dengan Warna Yang Berbeda

  1. Build aplikasi

Sebelum membuild aplikasi pastikan bahwa android sdk sudah terpasang. Pemasangan android sdk dapat melalui SDK Manager pada aplikasi Android Studio.

Hasil gambar untuk sdk manager

Untuk membuild projek menjadi aplikasi mobile menggunakan perintah text yang kita masukkan ke command prompt yang tadi kita buka dengan menulis “ionic cordova build android” lalu tekan enter. Diperlakukann proses untuk membuild suatu projek dan hasil akan muncul di folder platforms\android\app\build\outputs\apk pada direktori projek kita.

Tinggalkan Balasan

Need Help? Chat with us