Alat Pengembang dari Canonical: Ubuntu SDK

Ditulis oleh Ridwan Fajar, dipublikasi pada 28 Jul 2014 dalam kategori Tools
Alat Pengembang dari Canonical: Ubuntu SDK - CodePolitan.com

Canonical, perusahaan yang merilis sebuah distro Linux yang bernama Ubuntu, sudah lama mencoba untuk bergeliat di pasar mobile. Perusahaan yang merilis distro Linux dengan semboyan for human being ini, merilis sebuah platform yang bernama Ubuntu Touch yang ditujukan untuk perangkat mobile seperti smartphone dan tablet. Ubuntu Touch ini dapat dipasang di perangkat yang menggunakan sistem operasi mobile Android. Ada beberapa pilihan untuk memasang Ubuntu Touch. Bahkan bisa dilakukan dual booting dengan Android yang sudah terpasang. Anda dapat melihat cara instalasi Ubuntu di perangkat mobile disini: Cara install Ubuntu Touch.

Untuk mengakomodasi pengembang aplikasi yang ingin mencoba berkarya di Ubuntu Touch ini, Canonical merilis sebuah software development kit yang bernama Ubuntu SDK. Ubuntu SDK ini dapat Anda gunakan baik untuk pengembangan aplikasi Ubuntu Touch ataupun Ubuntu Desktop. Untuk pengembangan aplikasi menggunakan Ubuntu SDK, Anda dapat memilih pengembangan menggunakan HTML5, Qt Markup Language (QML),C++ atau Go. Selain itu Anda dapat mengambil proyek aplikasi dari luar komputer Anda menggunakan Bazaar, Git, Subversion, Mercurial, CVS, dan Gitorious. Selain Ubuntu SDK, Canonical menyediakan juga emulator untuk Ubuntu Touch jika Anda belum melakukan instalasi Ubuntu Touch di perangkat Anda. Ubuntu SDK ini telah dirilis sejak Ubuntu versi 13.10, dan berlanjut hingga 14.04.

Dengan menggunakan perintah: apt-get install ubuntu-sdk dan apt-get install ubuntu-emulator. Anda sudah mendapatkan Ubuntu SDK dan Ubuntu Touch Emulator untuk bersiap - siap mengembangkan aplikasi untuk Ubuntu Touch maupun Ubuntu Desktop. Jika Anda berminat untuk mencoba, silahkan pasang dulu Ubuntu versi 13.10 atau 14.04 di komputer Anda. Dan mari kita jelajahi beberapa penampakkan Ubuntu SDK.

Pertama kali Anda menyalakan Ubuntu SDK, Anda akan menjumpai tampilan Qt Creator yang sedikit berbeda karena telah dikhususkan untuk Ubuntu. Anda dapat memilih untuk membuat proyek baru dengan menekan tombol New Project dan Anda akan diberikan pilihan untuk mengembangkan aplikasi dengan Go, HTML5, QML, atau C++. Selain itu di Ubuntu SDK ini disediakan pula tombol di sebelah kiri yang terdiri dari:

  • Design untuk mendesain antarmuka aplikasi (jika menggunakan QML) [caption id="attachment_1353" align="aligncenter" width="350"]Menu Design di Ubutu SDK Menu Design di Ubutu SDK[/caption]
  • Debug untuk melakukan debugging di aplikasi yang dikembangkan [caption id="attachment_1352" align="aligncenter" width="350"]Menu Edit di Ubuntu SDK Menu Edit di Ubuntu SDK[/caption]
  • Projects untuk pengaturan proyek aplikasi Anda [caption id="attachment_1351" align="aligncenter" width="350"]Menu Project di Ubuntu SDK Menu Project di Ubuntu SDK[/caption]
  • Publish untuk mempublikasikan aplikasi Anda di Ubuntu Store [caption id="attachment_1350" align="aligncenter" width="350"]Menu Publish di Ubuntu SDK Menu Publish di Ubuntu SDK[/caption]
  • Analyze untuk menganalisis performa aplikasi Anda [caption id="attachment_1354" align="aligncenter" width="350"]Menu Analyze: Timeline di Ubuntu SDK Menu Analyze: Timeline di Ubuntu SDK[/caption] [caption id="attachment_1355" align="aligncenter" width="350"]Menu Analyze: Event di Ubuntu SDK Menu Analyze: Event di Ubuntu SDK[/caption]
  • Help untuk melihat dokumentasi dari Qt Framework (jika menggunakan C++) [caption id="attachment_1349" align="aligncenter" width="350"]Menu Help di Ubuntu SDK Menu Help di Ubuntu SDK[/caption]
  • Devices untuk mengelola Ubuntu Touch Emulator yang anda miliki. Untuk menggunakan Ubuntu Touch Anda dapat menekan tombol Devices dan tinggal nyalakan emulator dengan menekan tombol play. Dan disana Anda dapat melihat beberapa menu pengelola emulator seperti Device, Emulator, Advance, Builder, dan Log. [caption id="attachment_1339" align="aligncenter" width="350"]Menu Device: Device di Ubuntu SDK Menu Device: Device di Ubuntu SDK[/caption] [caption id="attachment_1340" align="aligncenter" width="350"]Menu Device: Advance di Ubuntu SDK Menu Device: Advance di Ubuntu SDK[/caption]
  • Wiki untuk mengakses Wiki Ubuntu Developer [caption id="attachment_1344" align="aligncenter" width="350"]Menu Wiki di Ubuntu SDK Menu Wiki di Ubuntu SDK[/caption]
  • Pastebin untuk mencatat bagian source code dari aplikasi Anda yang akan digunakan kepada pengembang lain untuk mencari solusi dari masalah yang terjadi dari aplikasi yang Anda temukan selama pengembangan aplikasi [caption id="attachment_1345" align="aligncenter" width="350"]Menu Pastebin di Ubuntu SDK Menu Pastebin di Ubuntu SDK[/caption]
  • IRC adalah tombol untuk menggunakan fasilitas chat yang disediakan untuk berkomunikasi dengan pengembang Ubuntu di belahan dunia lainnya [caption id="attachment_1346" align="aligncenter" width="350"]Menu IRC di Ubuntu SDK Menu IRC di Ubuntu SDK[/caption]
  • Core Apps adalah tombol untuk kumpulan contoh aplikasi yang dikembangkan dengan Ubuntu SDK dan tersedia di Launchpad [caption id="attachment_1343" align="aligncenter" width="350"]Menu Core Apps di Ubuntu SDK Menu Core Apps di Ubuntu SDK[/caption]
  • API untuk mengakses API dari QML Ubuntu SDK [caption id="attachment_1348" align="aligncenter" width="350"]Menu API di Ubuntu SDK Menu API di Ubuntu SDK[/caption]

Nah selain menjelajahi antarmuka dari Ubuntu SDK, mari kita coba lihat juga beberapa potongan source code dari Go, HTML5, dan QML yang digunakan untuk membangun aplikasi menggunakkan Ubuntu SDK.

Potongan Source Code Aplikasi HTML5 di Ubuntu SDK

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <!-- <script src="cordova/cordova.js"></script> -->

    <!-- Application script -->
    <script src="js/app.js"></script>
  </head>

  <body>

    <div data-role="mainview">

      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="hello-page">Hello World</li>
        </ul>
      </header>

      <div data-role="content">

          <!-- The application main page -->

          <div data-role="tab" id="hello-page">

            <section data-role="list">
                <header class="large-font">My List Header</header>
                <ul data-role="listview" id="contacts">

                    <li>
                        <aside>
                            <img alt="placeholder" src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/[email protected]">
                        </aside>

                        <p>Jane</p>

                        <!-- A list item side control -->
                        <label>
                            <input type="checkbox" data-type="switch">
                            <span class="toggle">
                                <span class="toggle-handle"></span>
                                <span class="toggle-bg"></span>
                            </span>
                        </label>
                    </li>
                </ul>
            </section>
            <div data-role="dialog" id="dialog1">
                <section>
                    <h1></h1>
                    <menu>
                        <button data-role="button" id="no">OK</button>
                    </menu>
                </section>
            </div>

          </div>

      </div>

    </div>
  </body>
</html>

Potongan Source Code Aplikasi Go di Ubuntu SDK

package main

import (
    "gopkg.in/qml.v0"
    "math/rand"
    "time"
)

func main() {
    qml.Init(nil)
    engine := qml.NewEngine()
    component, err := engine.LoadFile("share/SimpleGo/main.qml")
    if err != nil {
        panic(err)
    }

    ctrl := Control{Message: "Hello from Go!"}

    context := engine.Context()
    context.SetVar("ctrl", &ctrl)

    window := component.CreateWindow(nil)

    ctrl.Root = window.Root()

    rand.Seed(time.Now().Unix())

    window.Show()
    window.Wait()
}

Potongan Source Code Aplikasi QML di Ubuntu SDK

import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.Popups 0.1
import "components"

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.username.SimpleUI"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("Simple")
        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            HelloComponent {
                id: label1
                objectName: "label1"
                text: i18n.tr("Hello..")
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Tap me!")

                onClicked: {
                    label1.text = i18n.tr("The Button was clicked!")
                    PopupUtils.open(dialog);
                }
            }
        }
    }
}

Semakin tertarik untuk mengembangkan aplikasi untuk Ubuntu Touch dan Ubuntu Desktop? silahkan ikuti tutorial lengkapnya disini: Ubuntu SDK Tutorial.

(rfs/ubuntudeveloper)



Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.