Framework Ionic :Tool Untuk Membuat Aplikasi Mobile

Diartikel kali ini kita akan membahas mengenai Framework bernama Ionic,salah satu manfaat framework ini memiliki dan membangun aplikasi mudah dan cepat.Ionic merupakan salah satu kerangka kerja pengembangan perangkat lunak berbasis mobile.Aplikasi yang dihasilkan dengan framework ionic bersifat hybrid yang menggabungkan sistem native dan webview. Meski demikian,performa aplikasi ini tidak perlu diragukan lagi.Langsung saja kita bahas satu per satu,mulai dari pengertian,kelebihan dan yang lainnya.

Pengertian Framework Ionic

Merupakan sebuah framewok aplikasi mobile berbasis HTML5 yang 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.

Aplikasi ionic ditulis menggunakan HTML,Javascript dan CSS.Ionic dianggap sebagai kerangka kerja UI yang menangani interaksi UI aplikasi dengan dukungan untuk komponen mobile asli dan desain yang indah.

Sejarah Framework Ionic

Tahun 2013 : Ionic mulai dibuat oleh Max Lynch, Ben Sperry, dan Adam Bradley.Ionic menggunakan AngluarJS.Jadi untuk bisa membuat aplikasi dengan Ionic,kalian harus bisa menggunakan angularjs.Lalu Angular versi 2 rilis dan pada versi ini js  dihilangkan diganti menggunakan Typescript.Karena itu, disebut Angular bukan Angularjs.Ionic versi 2 dan 3 juga rilis mengikuti Angular.Seiring berjalannya waktu, framework javascript juga menjamur.Berbagai macam framework bermunculan.Begitu juga yang terjadi dalam pengembangan Ionic.Pada tanggal 23 Januari 2019 Ionic versi 4 dirilis dengan slogan Ionic for Everyone.Artinya,Ionic tidak hanya fokus menggunakan Angular saja.Ionic juga akan mendukung untuk menggunakan framework lain seperti Vuejs,React bahkan juga Web Components.

Kelebihan Framework Ionic

Berikut beberapa kelebihan Ionic dalam membangun aplikasi menggunakan framework ini :

• Bersifat open source.
• Menggunakan teknologi web terbaru.
• Aplikasi dibangun bisa dilihat melalui browser.
• Terbilang cepat dibandingkan framework lainnya.
• Aplkasi biasa ditransfer menjadi Android,iOS atau Windows Phone.

Kekurangan Framework Ionic

•  Yakni itu berbayar untuk versi pro.Untuk versi pro tersebut programer tinggal drag and drop component kemudian dengan menggunakan sedikit koding sudah bisa jadi kedalam sebuah aplikasi yang di inginkan dan satu lagi aplikasi tersebut dapat disimpan online.
• Yaitu ketika membangun program tergantung pada internet sehingga ketika tidak ada internet maka ioni tidak bisa dijalankan dengan semestinya.
• Resourse yang besar ketika melakukan pembuatan aplikasi dimana satu program bisa sampai ratusan mb yang diperlukan untuk menampung dari resaurce tersebut.

Tool Resmi Ionic

• Ionic Lab

Merupakan solusi bagi kita yang ingin kenyamanan.Ionic Lab adalah Versi GUI dari Ionic CLI,kalian tinggal klik untuk melakukan operasi-operasi yang semula harus mengetikan perintah di Console.

• Ionic CLI

Merupakan tool command line yang digunakan untuk membuat project dan juga menjalankan project.

• Ionic Creator

Merupakan produk gratis yang akan memudahkan anda mendesain tampilan UI dari aplikasi.Ionic Creator sendiri adalah WebApp artinya harus mengaksesnya lewat Browser.Untuk Akun gratisnya kita hanya bisa mendesain satu aplikasi saja,Jika ingin lebih harus membeli paket Premium.

• Ionic ViewApp

Merupakan aplikasi Android.Fungsi utamanya adalah mempreview program Ionic langsung dari Android.Aplikasi yang bisa di preview oleh ViewApp bisa aplikasi yang kita buat atau aplikasi orang lain yang dishare di Ionic Market.

Persiapan Coding Untuk Ionic

Adapun alat-alat yang dipersiapkan untuk belajar atau coding Ionic adalah Text Editor,Nodejs dan Ionic CLI.Lalu untuk membuat APK dan menjalankannya di emulator,kita juga membutuhkan Android Studio dan Android SDK.Tapi,mari kita fokus mengugnakan peralatan utama,yaitu: Nodejs dan Ionic CLI..

Instalasi Nodejs

Nodejs adalah peralatan pertama yang harus diinstal,gunakan perintah berikut untuk menginstal Nodejs di Linux (Ubuntu) :

sudo apt-get install -y nodejs

• Setelah itu,periksa versi Nodejs dan NPM yang terinstal.

• Berikutnya,menginstal Ionic CLI.

Instalasi Ionic CLI

Ionic CLI merupakan prgram atau tool berabasis teks untuk membuat project Ionic,menjalankan server dan build aplikasi.Kita bisa menginstal Ionic CLI menggunakan npm dengan perintah :

sudo npm -g install iconic

• Tunggu sampai prosesnya selesai.

• Setelah itu,periksa versi yang terinstal dengan perintah ionic.

Membuat Project Baru

Setelah kita menginstal semua peralatan yang dibutuhkan,sekarang coba membuat sebuah project Ionic.

Ketik perintah berikut di terminal :

iconic start myApp tabs

• Tunggu sampai proses selesai.

Keterangan:

• start adalah perintah untuk memulai project;
• myApp adalah nama project atau aplikasi yang akan dibuat;
• tabs dalah jenis template yang akan digunakan.

Ada jenis template untuk memulai project baru :

• Blank.
• Tabs.
• Side Menu.

Perintah ionic start merupakan perintah untuk membuat project Ionic.Perintah ini membuat sebuah direktori baru berisi source code aplikasi.Sekarang buka project yang baru di buat pada teks editor.

• Inilah struktur direktori project Ionic.Terdapat beberapa file dan Folder.Buat yang pertama melihat ini, mungkin ada beberapa file dan folder yang belum diketahui fungsinya.

Struktur Project Ionic

Terdiri 3 direktori utama : e2e,mode_modules dan src.Direktori paling penting adalah src karena direktori ini berisi source code aplikasi.

fungsi setiap folder dan file:

• 📁 e2e berisi source untuk Melakukan End 2 End Testing.
• 📁node_modules berisi modul Nodejs.
• 📁 src berisi source code aplikasi,disini kita menulis code.
  • 📁  app beisi modul aplikasi.
  • 📁 assets berisi file statis seperti gambar;
  • 📁 environtment berisi file untuk mengatur environtment;
  • 📁 theme berisi file SASS untuk definisi tema aplikasi;
  • 📄 global.scss file sass global;
  • 📄 index.html file HTML untuk aplikasi;
  • 📄 karma.config.js file konfigurasi untuk karma;
  • 📄 main.ts file utama aplikasi;
  • 📄 polyfills.ts file polyfills yang dibutuhkan oleh angular;
  • 📄 test.ts file ini dibutuhkan oleh karma.config.js;
  • 📄 testconfig.app.json file ini akan di-load oleh test.ts;
  • 📄 testconfig.spec.json file ini akan di-load oleh test.ts;
• 📄 .gitignore file git yang berisi daftar file dan folder yang diabaikan;
• 📄 angular.json file JSON yang berisi konfigurasi untuk Angular;
• 📄 ionic.config.json file JSON yang berisi konfigurasi untuk Ionic;
• 📄 package-lock.json file JSON yang berisi daftar versi modul nodejs;
• 📄 package.json file JSON yang berisi info project dan daftar modul nodejs yang dibutuhkan;
• 📄 testconfig.json file JSON yang berisi konfigurasi untuk testing;
• 📄 tslint.json file JSON yang berisi konfigurasi untuk linting.

Menjalankan Development Server

Ini merupakan sebuah fitur Ionic CLI yang fungsinya untuk membuat web server sehingga aplikasi dapat dibuka melalui web browser.Tujuannya memudahkan pengembangan aplikasi.

Ini yang diakukan saat membuat aplikasi android dengan Java (Android Studio) :

• Buat Project.
• Coding.
• Build dan Run.
• Buka Emulator.
• Ada Error,ulangi langkah 2.
• App Selesai,Publish.

Ini yang dilakukan saat membuat aplikasi android engan Ionic:

• Buar project.
• Coding.
• Jalankan Server.
• Ada error,balik ke langkah 2.
• App Selesai,Publish.

Untuk menjalankan Development Server,masuk dulu ke direktori projectnya dengan perintah cd.

cd myApp

Kemudian jalankan perintah :

ionic serve

untuk menjalankan Development Server.Maka web browser akan terbuka.

Ini adalah tampilan aplikasi dengan template tabs. Kita bisa memanfaatkan inspect element untuk melihat tampilan versi mobile.

Sampai sini selesai,kalian sudah mengenal Ionic dan sudah berhasil membuat aplikasi pertama serta menjalankannya di Dev Server.

sekian artikel kali ini semoga bisa bermanfaat untuk kalian semua 🙂

Baca Juga Artikel Ini :

Inilah 4 Teknik SEO untuk Meningkatkan Traffic Website

Pengertian, Fungsi dan Cara Kerja VoIP

Progressive Web App untuk Website Lebih Lancar

Beberapa Contoh Newsletter Untuk Email Marketing

Mengecek Website Down atau Tidak Dengan Menggunakan Tool Online