Setelah berhasil menginstall Ubuntu SDK di Ubuntu Desktop 12.04, kini saatnya mencoba membuat aplikasi sederhana untuk mengetes Ubuntu SDK tersebut. Aplikasi yang akan saya buat adalah Quran yang saya adopsi dari esv-bible. Pada tahap awal, saya hanya berencana membuat terjemahan Quran dalam bahasa Indonesia saja. Sebelum membuat aplikasi ini ada baiknya anda mencoba membuat aplikasi currency converter seperti yang dijelaskan disini. Artikel ini juga merupakan terjemahan bebas saya dari tutorial aslinya: [Tutorial] How to Write Ubuntu Touch Application yang ditulis oleh +Brad Well.
 |
| Screenshot Quran Tahap Awal |
Konsep Dasar
Pembuatan aplikasi ini memanfaatkan konsep dasar kombinasi Tabs dan PageStack dengan suatu metode yang tidak menyalahi panduan desain navigasi Ubuntu Touch OS. Aplikasi ini dibuat dengan menggunakan XmlListModel untuk mengambil dan membagi data XML dalam bentuk ListView. Sebagai tambahan, tutorial aplikasi ini juga menggambarkan bagaimana mengatur komponen-komponen berbeda dalam tiap folder untuk menjaga agar kode sumber tetap rapi dan mudah dilacak keberadaannya.Memulai Proyek
Saya asumsikan anda telah mendownload Ubuntu SDK dengan sukses, jika ada kendala instalasi Ubuntu SDK, silakan googling, ada banyak solusinya, tinggal copy-paste saja pesan error yang muncul pada mesin pencari Google. Langkah pertama untuk membuat aplikasi Quran ini adalah melalui Ubuntu SDK (Qt Creator) >> File >> New File or Project >> Ubuntu >> Simple UI. Aplikasi yang akan kita buat adalah Ubuntu Quran, atau "Quran" saja yang kita adopsi dari esv-bible. UI (user interface) aplikasi tersebut kita desain melalui implementasi kode Qt QML.Main View
Panduan desain Ubuntu App menyebutkan bahwa header Tabs tidak dikombinasikan dengan tombol Back pada PageStack. Konsekuensinya, cara satu-satunya untuk mengkombinasikan Tabs dengan PageStack adalah dengan meletakkan Tabs pada halaman awal PageStack dan halaman lain di atasnya.Main View dari aplikasi Quran ini adalah sebagai berikut,
/*... */
property string selectedbook
property int selectedchapter
PageStack {
id: pageStack
Component.onCompleted: push(tabs)
Tabs {
id: tabs
Tab {
title: "Quran"
page: Page {
id: bookslistPage
BooksList {
anchors.fill:parent
}
tools: BookListTools {
}
visible: true
}
}
Tab {
title: "Daily"
page: Page {
id: dailyversePage
DailyVerse {
anchors.fill: parent
}
visible: true
}
}
}
Page {
id: chaptersgrid
title: selectedbook
ChaptersList{
id:chapterlistpage
anchors.fill:parent
}
visible: false
}
Page {
id: chapterview
title:selectedbook + " " + selectedchapter
ChapterView{
id:chapterviewpage
anchors.fill:parent
}
tools: ChapterViewTools {
}
visible: false
}
}
Pertama, dideklarasikan beberapa variabel yang akan digunakan dalam aplikasi Quran yang kita buat, kemudian kita susun PageStack-nya. Perlu diingat, bahwa halaman-halaman yang didefinisikan di PageStack harus di-set visibilitasnya ke "false" (visible: false) untuk menghindari halaman tersebut memblok PageStack sebelum ditekan tombolny.
Halaman pertama dari PageStack adalah interface "Tabs". Ada dua tabs pada aplikasi Quran. Seperti yang terlihat, antar tabs terlihat renggang, Komponen tiap halaman tersebut didefinisikan dalam item file tersendiri. Perhatikan snippet kode berikut,
BooksList {
anchors.fill:parent
}
tools: BookListTools {
}
Halaman utama didefinisikan dalam file yang dinamakan BookList.qml dan toolbar aksi itemnya didefiniskan dalam file BookListTools.qml. Pada posting selanjutnya akan kita lihat komponen-komponen dalam file BookList.qml tersebut.
Aplikasi Quran ini masih dalam tahap sangat awal (very pre-alpha), karena saya juga baru belajar QML. Jika sudah saya upload di Launchpad, akan saya post link-nya di sini. Jika ada yang tertarik silakan bergabung dengan saya untu membuat aplikasi ini karena bila dikerjakan sendiri rasanya akan berat. Dan yang paling penting, pembuatan aplikasi ini bisa menambah pundi-pundi amal kita selamanya. Mari kita realisasikan dan sambut peluang baru sistem operasi smartphone ini, SmartFren sudah bergabung dengan Carrier Advisory Group-nya Canonical dan pasar Ubuntu Touch OS di Indonesia terbuka lebar.
Keterangan istilah:
- Header: Blok utama core app yang memberi tahu posisi pengguna. Lebih detail lihat penjelasannya di sini.
- PageStack : Blok urutan/tumpukan halaman aplikasi, ketika berpindah dari halaman utama ke halaman berikutnya. Lebih detail lihat di sini.
- Tabs: Perpindahan antar halaman pada Ubuntu App. Lebih jelasnya lihat di sini.
Bersambung.
