Seperti pada postingan sebelumnya Framework UI Aplikasi Mobile Hybrid salah satu framework yang cukup populer adalah Onsen UI. Diartikel ini akan dikenalkan lebih jauh lagi mengenai framework satu ini.
Apa itu Onsen UI?
Onsen UI adalah …
- Sejumlah UI components yang lengkap yang dirancang khusus untuk aplikasi seluler
- Dilengkapi dengan fitur ready-to-implement mengikuti standar desain iOS dan Android asli (Native)
- Gratis untuk digunakan, 100% opensource ( lisensi Apache v2 )
Onsen UI memperkaya pengalaman pengguna dalam mengakses aplikasi, hal ini dikarenakan elemen UI yang dirancang secara unik. Hal ini menjadikan Onsen UI sempurna untuk mengembangkan aplikasi hybrid menggunakan Cordova atau mengembangkan aplikasi web (juga disebut sebagai Progressive Web Apps ).
Dukungan Browser dan Perangkat
Onsen UI sepenuhnya dioptimalkan dan telah diuji untuk platform berikut.
- Mobile
- iOS 9 dan diatasnya
- Android 4.4.4 dan diatasnya dengan browser WebView atau Chrome (Android 4.0 dan lebih tinggi dengan mesin Crosswalk )
- Desktop
- Browser Safari versi terbaru
- Browser Chrome versi terbaru
Untuk platform lain, perlu diketahui bahwa beberapa komponen atau fitur mungkin tidak berfungsi dengan semestinya.
Membuat Aplikasi Pertama Menggunakan Onsen UI
Sebelumnya sudah berkenalan dengan Onsen UI, sekarang saatnya untuk mulai membuat aplikasi Anda sendiri. Untuk pemasangan yang lebih cepat, kita akan menggunakan file yang terdapat pada CDN (tanpa harus mengunduh master dari framework).
Pertama, buat file bernama index.html dan tempelkan HTML berikut.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
<ons-button onclick="alert('Hello World!')">Click Me</ons-button>
</body>
</html>
Jalankan file tersebut dan tampilan di browser seperti gambar di bawah ini.
Meskipun kode diatas belum sempurna, contoh ini mengandung beberapa aspek penting dari komponen Onsen UI seperti di bawah ini.
- Kita perlu menyertakan dua file CSS (
onsenui.cssdanonsen-css-components.min.css) dan satu file JavaScript (onsenui.min.js). - Pada kode di atas, komponen
<ons-button>digunakan. Ini adalah tag khusus yang mewakili tombol. Semua komponen dari Onsen UI memiliki prefix tag<ons-. - Seperti tag standar lainnya (atau elemen HTML), komponen Onsen UI memiliki atribut (dalam hal ini
onclick), method, dan event listeners.
Tips untuk membuat look and feel seperti aplikasi native untuk fungsi alert. Coba perhatikan bagian fungsi alert, fungsi
alert()kurang sesuai dengan desain aplikasi Native. Disini telah disediakan sebuah fungsions.notificationuntuk membuat sebuah dialog box untuk notifikasi. Coba gantialertdenganons.notification.alertJalankan kembali, maka tampilannya akan seperti gambar dibawah ini
Kita telah membahas semua hal mendasar untuk memulai menggunakan framework ini untuk membuat tampilan aplikasi mobile lebih menarik, mudah dan cepat.
Untuk lebih banyak mengetahui mengenai komponen yang disediakan kita dapat mengunjungi langsung ke website resminya. Untuk awalan kita dapat memperlajari di https://onsen.io/v2/api/css.html maupun https://onsen.io/v2/api/js/ . Kedua link tersebut berisi mengenai komponen-komponen yang disediakan, baik CSS Component maupun Web Component(Javascript). Kita juga dapat langsung mempraktekan/latihan di websitenya (live coding) melalui link https://onsen.io/playground/
