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)

  <li><strong>Debug</strong> untuk melakukan <em>debugging</em> di aplikasi yang dikembangkan
  

• Projects untuk pengaturan proyek aplikasi Anda
• Publish untuk mempublikasikan aplikasi Anda di Ubuntu Store
• Analyze untuk menganalisis performa aplikasi Anda
• Help untuk melihat dokumentasi dari Qt Framework (jika menggunakan C++)
• 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. ]
• Wiki untuk mengakses Wiki Ubuntu Developer
• 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
• IRC adalah tombol untuk menggunakan fasilitas chat yang disediakan untuk berkomunikasi dengan pengembang Ubuntu di belahan dunia lainnya
• Core Apps adalah tombol untuk kumpulan contoh aplikasi yang dikembangkan dengan Ubuntu SDK dan tersedia di Launchpad
• API untuk mengakses API dari QML 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

  
    
    
    
    
<!-- 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>

  
  
<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>

  

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.

Cover Image: https://www.muylinux.com/2020/05/07/antes-de-instalar-ubuntu/ (rfs/ubuntudeveloper)