Hulunews.net – Tampilan UI yang kita buat dengan HTML dan CSS belum tentu akan sama persis seperti tampilan UI Android maupun iOS. Android menggunakan konsep Material design Bagaimana caranya kita akan mengakses manager, dan sebagainya? Masalah ini diatasi oleh Ionic Framework.
Apa itu Ionic Framework?
Ionic Framework merupakan sebuah framework membuat aplikasi web PWA, dekstop, mobile
seperti HTML, CSS, dan Javascript. Jadi dengan satu code base, kita sudah bisa membuat aplikasi Web, desktop, dan mobile. Ini adalah stack teknologi Ionic Framework Di atas Ionic Framework kita bisa mengguna Vue, Stencil, dan vanila Javascript. Jadi untuk bisa membuat aplikasi dengan Ionic, kamu juga harus bisa menggunakan angularjs. Lalu Angular versi 2 rilis dan pada versi ini Karena itu, disbut Angular saja bukan Ionic versi 2 dan 3 juga rilis mengikuti Angular.
Seiring berjalannya waktu, framework javascript juga menjamur. Berbagaimacam framework bermunculan. Belajar Membuat Aplikasi Android Menggunakan Ionic Framework
Tampilan UI yang kita buat dengan HTML dan CSS belum tentu akan sama persis seperti tampilan UI
Material design dan iOS memiliki standar desain sendiri.
Bagaimana caranya kita akan mengakses native API seperti mengakses kamera, WiFi, contact, file
tasi oleh Ionic Framework.merupakan sebuah framework open source yang menyeidakan UI Toolkit
membuat aplikasi web PWA, dekstop, mobile (Android dan iOS) dengan menggunakan bahasa web 1
, kita sudah bisa membuat aplikasi Web, desktop, dan mobile.
teknologi Ionic Framework:
Di atas Ionic Framework kita bisa menggunakan beberapa front-end framework seperti Angular, React,
Jadi untuk bisa membuat aplikasi dengan Ionic, kamu juga harus bisa menggunakan angularjs.
Lalu Angular versi 2 rilis dan pada versi ini ‘js’ dihilangkan dan diganti menggunakan Typescript.
saja bukan Angularjs. Ionic versi 2 dan 3 juga rilis mengikuti Angular. Seiring berjalannya waktu, framework javascript juga menjamur. Berbagaimacam framework bermunculan. Tampilan UI yang kita buat dengan HTML dan CSS belum tentu akan sama persis seperti tampilan UI memiliki standar desain sendiri. seperti mengakses kamera, WiFi, contact, file UI Toolkit untuk (Android dan iOS) dengan menggunakan bahasa web , kita sudah bisa membuat aplikasi Web, desktop, dan mobile.
seperti Angular, React, Jadi untuk bisa membuat aplikasi dengan Ionic, kamu juga harus bisa menggunakan angularjs. anti menggunakan Typescript. Ledakan framework ini membuat kita bingung untuk memilih menggunakan yang mana. Begitu juga yang terjadi dalam pengembangan Ionic.
Karena itu, pada tanggal 23 Januari 2019 Ionic versi 4 dirilis dengan selogan “Ionic for Everyone” (Ionic
untuk siapa saja) 3 Artinya, Ionic tidak hanya fokus menggunakan Angular saja. Ionic juga akan mendukung untuk menggunakan framework yang lain seperti Vuejs, React, bahkan juga Web Components.
Persiapan alat untuk coding Ionic
Adapun alat-alat yang harus dipersiapkan untuk belajar atau coding Ionic adalah
Text Editor, cmd/PowerShell
Nodejs, dan
Ionic CLI.
Lalu untuk membuat APK dan menjalankannya di emulator, kita juga membutuhkan Android Studio dan
Android SDK.
Berikutnya kita akan menginstal Ionic CLI.
Instalasi Ionic CLI
Ionic CLI merupakan program atau tool berabasis teks untuk membuat project Ionic, menjalankan
server, dan build aplikasi.
Kita bisa menginstal Ionic CLI menggunakan npm dengan perintah:
npm install -g @ionic/cli
Tunggulah sampai prosesnya selesai.
Setelah itu coba periksa versi yang terinstal dengan perintah pada prompt :ionic
telah kita mengisntal semua peralatan yang dibutuhkan, sekarang kita coba membuat sebuah project
Ionic.
Caranya:
Ketik perintah berikut di terminal.
ionic start myApp tabs
Tunggulah sampai prosesenya selesai…
Keterangan:
start adalah perintah untuk memulai project;
myApp adalah nama project atau aplikasi yang akan dibuat;
tabs adalah jenis template yang akan digunakan.
Ada beberapa jenis template untuk memulai project baru:
- Blank;
- Tabs;
- sidemenu.
Perintah ionic start merupakan perintah untuk membuat project Ionic. Perintah ini akan membuat
sebuah direktori baru yang berisi source code aplikasi. Jika selesai infonya seperti berikut:
Your Ionic app is ready! Follow these next steps:
- Go to your new project: cd .\myApp
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res –skip-config –copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition
Sekarang coba buka project yang baru saja di buat pada teks editor. (perhatikan di mana letak
index.html)
Mengenal Stukrutr Project Ionic
Struktur project Ionic terdiri dari tiga direktori utama: e2e, node_modules, dan src. Direktori yang paling
penting adalah src karena direktori ini berisi source code aplikasi.
Mari kita bahas lebih detail fungsi setiap folder dan file:
e2e berisi source untuk Melakukan End 2 End Testing;
node_modules berisi modul Nodejs;
src berisi source code aplikasi, di sini lah kita akan menulis kode;
app berisi 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.
Berikutnya mari kita coba:
Menjalankan Development Server
Development Server adalah sebuah fitur Ionic CLI yang fungsinya untuk membuat webserver sehingga
aplikasi dapat dibuka melalui web browser.
Tujuannya untuk memudahkan pengembangan aplikasi.
Kita tidak butuh emulator untuk membuka aplikasi, karena kita bisa menggunakan web browser.
Nanti kalau aplikasi sudah jadi, baru kita bisa coba menggunakan emulator dengan membuat APK-nya.
Baiklah, 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 dengan framework angular)
Ini adalah tampilan aplikasi dengan template tabs. Kita bisa memanfaatkan Inspect element untuk
melihat tampilan versi mobile
Penulis : Yendi Putra