04/08/2013
 
Membuat sebuah currency converter phone app
 
http://developer.ubuntu.com/resources/tutorials/getting-started/currency-converter-phone-app/3/
 
3 Hal yang wajib dilakukan:

  • Instal Ubuntu 12.04 atau yang lebih baru – get Ubuntu ›
  • Instal Qt5 serta Ubuntu QML toolkit – get Qt5 and the Ubuntu toolkit ›
  • install Qt Creator
  •  
    Qt Creator = aplikasi untuk membuat IDE berdasarkan Qt framework.

    Untuk Ubuntu 12.04 LTS, Ubuntu 12.10 serta Ubuntu 13.04
     

    1.Instal Ubuntu SDK preview (tools berikut dependenciesnya…) itu dilakukan melalui “PPAs” Pada Terminal ketik sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get install ubuntu-sdk

     
    ubuntu-sdk-dash
     
     
    Start Qt creator dengan membuka the Dash, ketik “ubuntu sdk”, setelah itu klik ikon Qt Creator icon
     
     
     
     
     
     
     
     
     
    Ubuntu-SDK
     
    2.Membuat sebuah label dalam Main View

  • Buat projek baru dengan tekan Ctrl+N pada Qt Creatort
  • Pilih Projek > Ubuntu > Simple Touch UI template setelah itu klik Choose…
  • Berikan nama “CurrencyConverter” …biarkan field the Create in sebagai default setelah itu klik Next ..Finish.
  • Ganti the Column component serta all of its children dengan Halaman sebagai berikut…save dengan klik Ctrl+S:
  •  

    1 import QtQuick 2.0
    2 import Ubuntu.Components 0.1
    3
    4 /*!
    5 \brief MainView with a Label and Button elements
    6 */
    7
    8 MainView {
    9 id: root
    10 // objectName for functional testing purposes (autopilot-qt5)
    11 objectName: “mainView”
    12 applicationName: “CurrencyConverter”
    13
    14 width: units.gu(100)
    15 height: units.gu(75)
    16
    17 property real margins: units.gu(2)
    18 property real buttonWidth: units.gu(9)
    19
    20 Page {
    21 title: i18n.tr(“Currency Converter”)
    22
    23 }
    24 }
     
    Sekarang coba jalankan untuk melihat hasilnya:

    Pada Qt Creator, tekan Ctrl+R ..

    atau pada Terminal ketik qmlscene ~/CurrencyConverter/CurrencyConverter.qml

    currency_header
     
    Sekarang app dapat ditutup
     

    Pengertian dari code tersebut diatas
     
    I.Import the QML types and components yang diperlukan ..dengan mencantumkan namespace serta versinya..yaitu mengimpor the built-in QML serta and Ubuntu types berikut komponenya.


    1.import QtQuick 2.0
    2.import Ubuntu.Components 0.1


     

    Setiap dokumen QML terdiri atas 2 bagian yaitu:


    1.imports section
    2.object declaration section.

     
    II.Declaring our objects

    Pada QML, maka user interface diperlakukan sebagai sebuah tree of objects with properties.
    JavaScript dapat dibenamkan sebagai sebuah scripting language

    Membuat MainView
     
    8 MainView {
    9 id: root
    10 // objectName for functional testing purposes (autopilot-qt5)
    11 objectName: “mainView”
    12 applicationName: “CurrencyConverter”
    13
    14 width: units.gu(100)
    15 height: units.gu(75)
    16
    17 property real margins: units.gu(2)
    18 property real buttonWidth: units.gu(9)
    19
    20 Page {
    21 title: i18n.tr(“Currency Converter”)
    22
    23 }
    24 }

     
    MainView merupakan bagian yang penting dari SDK yang bertindak sebagai root container untuk aplikasi serta menampilkan standard Toolbar dan Header.

    Dengan sintak yang mirip dengan JSON, ditentukanlah propertiesnya dengan memberikan:

    1.sebuah “Id”untuk referensi(root)
    2.menentukan visual properties (width, height, color).
    3.custom properties seperti margins, number dengan decimal point
    4.menentukan unit sebagai units.gu (grid units)
     
    Didalam main view, akan ditambahkan sebuah “child Ubuntu Page”, yang berisi sisa kompnen serta memberikan sebuah Ubuntu title.
    Page title yaitu “Currency Converter ditentukan dengan i18n.tr dikurung () function sehingga Resolution Independence

    Gunanya resolution independence adalah agar memudahkan untuk graphical user interfaces di Ubuntu untuk dapat scale kesemua form factors yang menjadi target Ubuntu seperti: phones, tablets, laptops dan desktops.

    Measurement Units

    Sebuah measurement unit = the grid unit, disingkat “gu”.
    1 grid unit = sejumlah pixels tergantung tipe monitor …contoh pada sebuah laptop 1 grid unit = 8 pixels…1 grid unit selalu merupakan sejumlah integer number dari sebuah pixel.

    Contoh perbandingan

    laptops 1 gu = 8 px
    Retina laptops 1 gu = 16 px
    Phone dengan layar 4 inch pada resolusi HD (720×1,280 pixels) 1 gu = 18 px
    Tablet dengan layar 10 inch pada resolusi HD (720×1,280 pixels) 1 gu = 10 px

    Contoh pengunaannya :

    import Ubuntu.Components 0.1

    Item {
    width: units.gu(2)
    height: units.gu(5)
    }
     
    Pada keadaan dimana diperlukan ukuran kurang dari 1 gu maka sebuah unit lain tersedia yaitu density independent pixel disingkat “dp. 1 dp” yang setara dengan 1 pixel pada laptop serta pada mobile phones dan tablets berresolusi rendah

    Contoh penggunaannya:

    import Ubuntu.Components 0.1

    Rectangle {
    height: units.dp(1)
    }
     
    Bitmaps

    Daripada menetapkan ukuran “font size” dalam pixels atau points, lebih baik ditentukan sebagai berikut:


    x-large
    large
    medium
    small
    x-small

     
    Contoh Pengunaannya:

    import Ubuntu.Components 0.1

    Label {
    fontSize: “small”
    }
     
    Bahan referensi

    ScreenResolution

     
    Internationalization

    Sejalan dengan filosofi Ubuntu maka internationalization serta support beragam bahasa merupakan key feature dari Ubuntu toolkit …di QML melalui “i18n.tr()” functions.
     
    Mendapatkan dan konversi mata uang

    Mulai dengan code disekitar line 23 sebelum closing brace
    Perhatikan bahwa setiap menambah code maka itu adalah sebelum MainView closing brace diujung file
     
    23 ListModel {
    24 id: currencies
    25 ListElement {
    26 currency: “EUR”
    27 rate: 1.0
    28 }
    29
    30 function getCurrency(idx) {
    31 return (idx >= 0 && idx = 0 && idx < count) ? get(idx).rate: 0.0
    36 }
    37 }
     
    Disini mata uang dijadikan ListModel object yang berisi listing items yang terdiri dari:


    currency
    rate pairs

     
    ListModel mata uang akan dijadikan sumber untuk “view elements” yang akan menampilkan data.
    Data mata uang akan diambil dari the Euro foreign exchange reference rates from the European Central Bank.
    Dengan demikian maka mata uang Euro tidak tampil sehingga perlu melakukan pre-populate listing dengan mata uang Euro dengan reference rate sebesar 1.0.
     
    The function statements untuk mata uang memperlihatkan powerful feature dari QML yaitu : integration dari JavaScript code dalam QML objects

    Ke-2 JavaScript functions digunakan sebagai glue code untuk mendapatkan sebuah mata uang atau rate dari sebuah index.
    Itu diperlukan karena mata uang tidak boleh ditampilkan ketika component property bindings menggunakannya untuk pertama kali

    Mendapatkan data

    Gunakan QtQuick object untuk load XML data dalam sebuah model yaitu: the XmlListModel.
    Untuk menggunakannya tambahkan sebuah import statement dipermulaan file
     
    1 import QtQuick 2.0
    2 import QtQuick.XmlListModel 2.0
    3 import Ubuntu.Components 0.1
     
    Pada line 39, tambahkan actual rate exchange fetcher code:

    39 XmlListModel {
    40 id: ratesFetcher
    41 source: "http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml&quot;
    42 namespaceDeclarations: "declare namespace gesmes='http://www.gesmes.org/xml/2002-08-01&#039;;"
    43 +"declare default element namespace 'http://www.ecb.int/vocabulary/2002-08-01/eurofxref&#039;;"
    44 query: "/gesmes:Envelope/Cube/Cube/Cube"
    45
    46 onStatusChanged: {
    47 if (status === XmlListModel.Ready) {
    48 for (var i = 0; i < count; i++)
    49 currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)
    50 }
    51 }
    52
    53 XmlRole { name: "currency"; query: "@currency/string()" }
    54 XmlRole { name: "rate"; query: "@rate/string()" }
    55 }
     

  • Properties source memperlihatkan URL darimana data akan diambil
  • Query memperlihatkan absolute XPath query untuk digunakan sebagai dasar pembuatan model items dari XmlRoles selanjutnya
  • namespaceDeclarations = the namespace declarations untuk digunakan pada XPath queries
  • The onStatusChanged signal handler merupakan kombinasi the signal and handler system bersama dengan JavaScript…Setiap QML property mempunyai “Changed signal” dan “onChanged” signal handler.
    Pada contoh ini maka the StatusChanged signal akan memberitahu setiap perubahan dari status property .. sebuah handler dibuat untuk append all the currency/rate items ke currencies ListModel setelah ratesFetcher selesai menload data
  •  
    Dengan kata lain ratesFetcher akan diisi dengan currency/rate items yang akan di appended pada mata uang
     
    Memperlihatkan aktivitas

    Pada line 56 tambahkan komponen Ubuntu ActivityIndicator untuk memperlihatkan aktivitas ketika matauang sedang didapatkan
     
    56 ActivityIndicator {
    57 anchors.right: parent.right
    58 running: ratesFetcher.status === XmlListModel.Loading
    59 }
     
    Itu ditambatkan disebelah kanan parent (root)
     
    Actual currency conversions
     
    Pada line 66 (above and outsideof the Page), tambahkan fungsi convert JavaScript yang akan melakukan konversi mata uang
    21
    22
    23
    24
    25
    26

    function convert(from, fromRateIndex, toRateIndex) {
    var fromRate = currencies.getRate(fromRateIndex);
    if (from.length <= 0 || fromRate <= 0.0)
    return "";
    return currencies.getRate(toRateIndex) * (parseFloat(from) / fromRate);
    }
     
    Memilih mata uang

    Sebelumnya append two import statements di sebelah atas file:
    4
    5

    import Ubuntu.Components.ListItems 0.1
    import Ubuntu.Components.Popups 0.1
     
    Pada line 68 tambahkan code
     
    68 Component {
    69 id: currencySelector
    70 Popover {
    71 Column {
    72 anchors {
    73 top: parent.top
    74 left: parent.left
    75 right: parent.right
    76 }
    77 height: pageLayout.height
    78 Header {
    79 id: header
    80 text: i18n.tr("Select currency")
    81 }
    82 ListView {
    83 clip: true
    84 width: parent.width
    85 height: parent.height – header.height
    86 model: currencies
    87 delegate: Standard {
    88 text: currency
    89 onClicked: {
    90 caller.currencyIndex = index
    91 caller.input.update()
    92 hide()
    93 }
    94 }
    95 }
    96 }
    97 }
    98 }
     
    Pada tingkat ini apabila app dijalankan belum melihat perubahan kecuali sebuah rectangle kososng
    Hal itu disebabkan karena baru sampai ditingkat membuat sebuah based on an Ubuntu Popover dan standard Qt Quick ListView.
     
    The ListView akan menampilkan data dari currencies ListMode….Object Column object wraps the Ubuntu Header serta list view untuk menyusun secara vertical dan sekarang setiap item pada listing menjadi komponen Standard list item
     
    The popover akan menampilkan seleksi mata uang ketika dipilih
    Ketika dipilih maka the popover akan tersembunyi (see onClicked signal) dan the caller’s data diupdate …dengan syarat
    the caller mempunyai currencyIndex dan input properties demikian pula input merupakan item dengan update() function.

    Up next: Menata penampilan UI
     
    Ok sampai disini kita telah membuat sebuah backend serta building blocks untuk currency converter app….Langkah selanjutnya adalah menyatukan semua data dan melihat hasilnya

    Tambahkan final snippet pada line 99:
     
    99 Column {
    100 id: pageLayout
    101
    102 anchors {
    103 fill: parent
    104 margins: root.margins
    105 }
    106 spacing: units.gu(1)
    107
    108 Row {
    109 spacing: units.gu(1)
    110
    111 Button {
    112 id: selectorFrom
    113 property int currencyIndex: 0
    114 property TextField input: inputFrom
    115 text: currencies.getCurrency(currencyIndex)
    116 onClicked: PopupUtils.open(currencySelector, selectorFrom)
    117 }
    118
    119 TextField {
    120 id: inputFrom
    121 errorHighlight: false
    122 validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
    123 width: pageLayout.width – 2 * root.margins – root.buttonWidth
    124 height: units.gu(5)
    125 font.pixelSize: FontUtils.sizeToPixels(“medium”)
    126 text: ‘0.0’
    127 onTextChanged: {
    128 if (activeFocus) {
    129 inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
    130 }
    131 }
    132 function update() {
    133 text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
    134 }
    135 }
    136 }
    137
    138 Row {
    139 spacing: units.gu(1)
    140 Button {
    141 id: selectorTo
    142 property int currencyIndex: 1
    143 property TextField input: inputTo
    144 text: currencies.getCurrency(currencyIndex)
    145 onClicked: PopupUtils.open(currencySelector, selectorTo)
    146 }
    147
    148 TextField {
    149 id: inputTo
    150 errorHighlight: false
    151 validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
    152 width: pageLayout.width – 2 * root.margins – root.buttonWidth
    153 height: units.gu(5)
    154 font.pixelSize: FontUtils.sizeToPixels(“medium”)
    155 text: ‘0.0’
    156 onTextChanged: {
    157 if (activeFocus) {
    158 inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
    159 }
    160 }
    161 function update() {
    162 text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
    163 }
    164 }
    165 }
    166
    167 Button {
    168 text: i18n.tr(“Clear”)
    169 width: units.gu(12)
    170 onClicked: {
    171 inputTo.text = ‘0.0’;
    172 inputFrom.text = ‘0.0’;
    173 }
    174 }
    175 }
     

    onClicked signal handlers digunakan untuk menentukan apa yang akan terjadi apabila user klik pada currency selectors (the pop ups akan terbuka)

    onTextChanged handler digunakan untuk call the convert() function untuk melakukan konversi apabila kita mengetik

    update() function akan view list items dari komponen currencySelector

    Sebuah Column dan 2 Rows digunakan untuk set up …setiap row berisi sebuah tombol currency selector serta text field untuk menampilkan atau input currency conversion values….dibawahnya ditambahkan tombol untuk menghapus ke-2 text field
     
    PageLayout_2
     
    Menjalankan Currency Converter

    Tekan Ctrl+R shortcut didalam Qt Creator ….

    Currency-Converter-plain
     
    Currency-Converter-popover

     
    =========================================================================
     

    Di situs http://tough2slf.multiply.com/journal/item/259/Ubuntu-11.04-Membuat-Launcher-Who-need-an-iPAD telah saya bahas bahwa kadang kadang maksud hati maunya langsung menuju ke website yang diinginkan tanpa harus membuka Firefox terlebih dahulu setelah itu menuju website yang dikehendaki seperti pada iPAD

     
     

    Custom Launcher

    Di Terminal ketik

    gnome-desktop-item-edit ~/Desktop/ –create-new

     

    Maka Create Launcher akan tampil

     
    Misalkan ingin membuat Launcher untuk website di http://tough2slf.multiply.com/

    Bagaimana caranya …?

    http://handytutorial.com/manually-create-custom-application-launcher-in-ubuntu-12-10-unity/

    Buatlah custom Launcher seperti contoh berikut

  • Klik gambar pegas dan insert gambar yang diinginkan dari folder Picture
    • isi Nama :Budi’s Place
    • Location: letak Website >>
      http:/tough2slf.multiply.com/
    • klik ok

     

     

    Launcher akan tampil pada Desktop

     

    Automatic Launcher

    Sekarang bagi versi 12.04 dan 12.10 telah tersedia ppa(beta) yang dapat ditambahkan pada Software Sources.
     
    http://www.liberiangeek.net/2012/07/install-and-preview-the-new-ubuntu-webapps-in-ubuntu-12-04-precise-pangolin/
     

    Untuk Install

    Di Terminal ketik
     

    sudo add-apt-repository ppa:webapps/preview
    sudo apt-get update && sudo apt-get install unity-webapps-preview

     

    Untuk uninstal

    sudo apt-get install ppa-purge
    sudo ppa-purge ppa:webapps/preview

     

    Logout

    =====================

    Menggunakan WebApps

    Setelah terinstal maka gunakanlah Firefox atau Chromium dan berselancarlah ke website yang ingin ditambahkan… misalkan Facebook

    Masukkan Name & Pasword anda maka akan muncul message berikut ini:

    • Please authorize Ubuntu to access your Face Book account
    • Serta Icon Facebook akan ditambahkan pada Unity

    Akan tetapi kalau anda keluar dari Ubuntu dan Restart maka icon tersebut hilang dari Unity ..bukan masalah karena dapat diketemukan di Dash Home dan kalau perlu ditambahkan ke Unity serta dapat dilock ..
    Pada saat ini maka ada 33 website yang di support oleh Unity Web Apps termasuk Pandora, Last.FM, GMail, Facebook, Twitter and Yahoo! Mail)
    Sebuah toolbar/message akan muncul dengan permintaan “asking you for permission to integrate.”

    Klik yes

    Karena masih dalam versi beta maka pasti ada bugs

    =======================

    News Sites:

    BBC News (bbc.co.uk/news)
    CNN News (cnn.com)
    Yahoo! News (news.yahoo.com/)
    Google News (news.google.com)
    Yandex News (news.yandex.ru)
    Google Reader (google.com/reader)
    Reddit (reddit.com)


    Mail services:

    GMail (mail.google.com)
    Yahoo! Mail (mail.yahoo.com)
    Yandex Mail (mail.yandex.ru)
    QQ Mail (mail.qq.com)
    Windows Live Mail (login.live.com)
    Mail RU (mail.ru)

    Social Networks:

    Facebook (facebook.com)
    Twitter (twitter.com)
    Google+ (plus.google.com)
    VK.com (vk.com)
    LinkedIn (linkedin.com)
    YouTube (youtube.com)

    Games:

    Cut the Rope
    Angry Birds (chrome.angrybirds.com)

    Office Apps:

    Google Docs (docs.google.com)
    Google Calendar (google.com/calendar)

    Dengan integrasi Google Docs dengan Ubuntu’s HUD. maka sekarang anda tidak perlu mencari cari sebuah dokumen, spreadsheet atau presentasi klik saja tombol Alt key dan tulis nama yang anda inginkan.

    Music:

    Libre.fm (libre.fm)
    Last.fm (lastfm.com)
    Pandora (pandora.com)
    Grooveshark (grooveshark.com)
    Hulu Player
    Yandex Music (music.yandex.ru)

    Misc

    Launchpad (launchpad.net)
    WordPress.com (wordpress.com)