Tutorial QML Untuk Ubuntu Touch [4]: Menjalankan Aplikasi Pada Emulator

Ubuntu Emulator

So far, aplikasi Currency Converter yang telah kita buat untuk Ubuntu Touch dengan Qt Meta Languange (QML) sudah selesai. Selanjutnya selain dengan me-run keseluruhan kode atau dengan tools qmlscene, kita juga bisa mendemokan aplikasi tersebut pada emulator. Emulator pada dasarnya adalah sama dengan devais fisik smartphone, namun di-emulasikan (di-replikasi/duplikasi) secara virtual dengan komputer.

Pada Ubuntu 14.04, Ubuntu emulator sudah terinstall ketika kita menginstall Ubuntu SDK, untuk versi lainnya bisa menginstall secara manual, salah satunya seperti yang disebutkan di webupd8. Untuk mejalankan aplikasi yang telah kita buat langsung pada emulator, caranya adalah seperti berikut.

Tutorial QML Untuk Ubuntu Touch [3]: Menyusun User Interface

Bagian ke-3 tutorial QML untuk Ubuntu Touch ini merupakan penyusunan user interface (ui) dari implementasi logika pada aplikasi. UI yang kita rancang terdiri dari satu kolom dua bari plus tombol clear seperti yang terlihat pada gambar dibawah. Ketika mata uang EUR sebagai basis tampilan awal di sentuh maka akan keluar opsi mata uang lainnya. Begitu pula dengan mata uang tujuan konversi. Di bagian bawah, ada tombol clear untuk me-reset data yang telah dimasukkan. Bandingkan gambar ini dengan hasil akhir program.

Rancangan UI, 1 kolom 2 Baris + clear button

Terakhir, tambahkan kode berikut pada baris ke-99,

Tutorial QML Untuk Ubuntu Touch [2]: Implementasi Logika Dalam Aplikasi

Untuk membuat aplikasi pada Ubuntu (touch), setelah template dan halaman muka jadi, maka kita menambahkan alur logika untuk aplikasi kita, yakni menghitung nilai tukar antar dua mata uang dengan API dari bank sentral Uni Eropa. Baiklah, kita review program kita sebelumnya yang kurang lebih seperti ini,

import xxx x.x
import xxx x.x

MainView {
    //id
    //property
    //internasionalisasi
}

Skrip kode diatas terbagi atas bagian import dan deklarasi obyek. Selanjutnya, kita tambahkan pada baris 23, sebelum kurung penutup page dan MainView kode sebagai berikut,

ListModel {
    id: currencies
    ListElement {
        currency: "EUR"
        rate: 1.0
    }
 
    function getCurrency(idx) {
        return (idx >= 0 && idx < count) ? get(idx).currency: ""
    }
 
    function getRate(idx) {
        return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
    }
}

yang kita lakukan diatas adalah menggunakan currency sebagai obyek ListModel yang berisi beberapa nilai mata uang dan nilai tukarnya. ListModel dari nilai tukar (currencies) digunakan untuk menampilkan data nilai tukar pada halaman aplikasi. Data yang digunakan merupakan data aktual di bank sentral uni eropa sedangkan nilai patokan mata uang yang dipakai adalah euro (EUR), jadi nilai tukar EUR - EUR = 1.0.

Salah satu keunggululan scripting dengan qml adalah integrasi dengan javascript yang juga digunakan dalam aplikasi currency ini. Fungsi javascript digunakan sebagai glue code untuk mengisolasi currency dari index ketika pertama kali di load oleh aplikasi (??). Yang perlu diingat, bahwa kita bisa menggunakan javascript dalam qml ini, sepert halnya dengan html dan css.

Tutorial QML untuk Ubuntu Touch [1]: Membuat Template dan Halaman Awal Aplikasi (MainView)

Setelah berhasil membuat "Hello World!" dengan QML, saatnya untuk membuat aplikasi sederhana dan menjalankannya pada Ubuntu emulator. Code di di bawah merupakan tutorial yang diberikan di developer.ubuntu.com untuk membuat currenccy converter, sebuah program untuk menghitung nilai tukar mata uang.

Tutorial ini dibagi menjadi 4 tahapan sebagai berikut,

1. Template aplikasi dan dasar komponen dasar Ubuntu Toolkit
2. Alur logika dalam aplikasi currency converter
3. Menyusun User Interface (UI)
4. Finalisasi dan menjalankan aplikasi pada Ubuntu-emulator

Pada bagian pertama, akan dibuat template dan halaman muka aplikasi currency converter. Seperti halnya aplikasi hello world yang telah kita buat, aplikasi currency converter ini juga menggunakan konsep dasar QML sebagai scripting language yang akan mengkonversikan dua nilai mata uang yang berbeda dengan API dari Bank Central Uni Eropa. Aplikasi ini mengintegrasikan dasar-dasar Ubuntu QML toolkit seperti i18n, units, ItemStyle for theming, Label, ActivityIndicator, Popover, Button, TextField, ListItems.Header dan ListItems.Standard.

Silakan ketik atau copy-paste berikut pada layar Ubuntu SDK (File >> New Project >> Simple UI).

import QtQuick 2.0
import Ubuntu.Components 0.1
 
/*!
    brief MainView with a Label and Button elements.
*/
 
MainView {
    id: root
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView" //nama object
    applicationName: "CurrencyConverter" //nama aplikasi
 
    width: units.gu(100) //lebar UI
    height: units.gu(75) //tinggi UI
 
    property real margins: units.gu(2) //batas fisik
    property real buttonWidth: units.gu(9) //
 
    Page {
        title: i18n.tr("Currency Converter")
 
    }
}

Simpan program di atas (Ctrl-S) kemudian run (Ctrl-R) untuk menjalankan hasilnya. Maka, akan muncul tampilan UI seperti berikut,

Tampilan muka aplikasi currency converter

Ya! semudah dan sesederhana itu untuk membuat aplikasi Ubuntu dengan QML karena aplikasi yang kita buat memang masih sangat sederhana. Baiklah, kita akan menganalisa kode diatas baris per baris.