RIDWAN RAMADHAN: Alat Pengembang dari Canonical: Ubuntu SDK

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)

Menu Design di Ubutu SDK
Debug untuk melakukan debugging di aplikasi yang dikembangkan

Menu Edit di Ubuntu SDK
Projects untuk pengaturan proyek aplikasi Anda

Menu Project di Ubuntu SDK
Publish untuk mempublikasikan aplikasi Anda di Ubuntu Store

Menu Publish di Ubuntu SDK
Analyze untuk menganalisis performa aplikasi Anda

Menu Analyze: Timeline di Ubuntu SDK

Menu Analyze: Event di Ubuntu SDK
Help untuk melihat dokumentasi dari Qt Framework (jika menggunakan C++)

Menu Help di Ubuntu SDK
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.

Menu Device: Device di Ubuntu SDK

Menu Device: Advance di Ubuntu SDK
Wiki untuk mengakses Wiki Ubuntu Developer

Menu Wiki di Ubuntu SDK
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

Menu Pastebin di Ubuntu SDK
IRC adalah tombol untuk menggunakan fasilitas chat yang disediakan untuk berkomunikasi dengan pengembang Ubuntu di belahan dunia lainnya

Menu IRC di Ubuntu SDK
Core Apps adalah tombol untuk kumpulan contoh aplikasi yang dikembangkan dengan Ubuntu SDK dan tersedia di Launchpad

Menu Core Apps di Ubuntu SDK
API untuk mengakses API dari QML Ubuntu SDK

Menu API di Ubuntu SDK

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/avatar_contacts_list@8.png">
                        </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>

<!DOCTYPE html>

<html>

<head>

<title>An Ubuntu HTML5 application</title>

</head>

<body>

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

</ul>

</header>

<header class="large-font">My List Header</header>

<li>

<aside>

</aside>

<label>

</span>

</label>

</li>

</ul>

</section>

<menu>

</menu>

</section>

</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()
}

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);
                }
            }
        }
    }
}

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)

RIDWAN RAMADHAN

Minggu, 27 Desember 2015

Alat Pengembang dari Canonical: Ubuntu SDK

Potongan Source Code Aplikasi HTML5 di Ubuntu SDK

Potongan Source Code Aplikasi Go di Ubuntu SDK

Potongan Source Code Aplikasi QML di Ubuntu SDK

Tidak ada komentar:

Posting Komentar

Translate

Mengenai Saya