How to Build Apps for Ubuntu Touch OS

In this blog, we will learn how to build an app for Ubuntu Touch OS.

Introduction

Ubuntu Touch OS is a mobile operating system designed for smartphones, tablets, and other smart screens. Originally developed by Canonical, it is now maintained by the UBports community.

Unlike typical Android or iOS devices, it runs a full Linux system like a desktop. This gives users greater control and privacy over their mobile device.

One of the biggest advantages of Ubuntu Touch is that it doesn’t rely on Google services. Unlike most smartphones, it offers an alternative that respects user privacy.

Usages of Ubuntu Touch

Ubuntu Touch is a privacy-focused mobile OS with no Google tracking or dependencies.
It offers full Linux terminal access, just like a desktop computer.
The convergence feature allows your Ubuntu Touch phone to function like a full desktop computer when you connect it to a monitor, keyboard, and mouse.
For native apps (best performance), use QML (like Morph Browser). For web apps, use HTML5 (like a Twitter PWA).
The system is highly customizable for business and special use cases, like schools modifying tablets to only run e-book readers and math apps while blocking social media, all without expensive management software.

Popular Apps Available

Morph Browser for private web browsing.
UTTician provides a native Telegram messaging experience.
OpenStore serves as the official app marketplace.
The built-in File Manager offers easy file organization.
Upad is a simple yet effective note-taking application.

Create a New Project for an Ubuntu Touch OS App

The best way to build high-performance, native apps for Ubuntu Touch is by using QML (Qt Modeling Language) with the Clickable tool.

Steps to Create a QML App

Open Terminal and hit these commands.

1. Install Clickable

First, install Clickable using the command below:

1	sudo snap install clickable --classic

Explain Code

2. Create a New Project

To check that your development environment is set up correctly for Clickable, create a new Clickable project:

clickable init

Select Template:

1 - QML Only

2 - C++

3 - Python

4 - HTML

5 - Go

6 - Rust

7 - Godot (Precompiled)

Choose from 1, 2, 3, 4, 5, 6, 7 [1]:

Title [App Title]:

Description [A short description of your app]:

App Name [appname]:

Namespace [yourname]:

Maintainer Name [Your FullName]:

Maintainer Email [email@domain.org]:

Select License:

1 - GNU General Public License v3

2 - MIT license

3 - BSD license

4 - ISC license

5 - Apache Software License 2.0

6 - Not open source

Choose from 1, 2, 3, 4, 5, 6 [1]:

Git Tag Versioning [n]:

Save as Default [n]:

Successfully created app "appname.yourname"

Get started with the following commands:

$ cd appname

Explain Code

3. Run your project

To build and run your Ubuntu Touch app on desktop, use the following commands:

// first build your project

clickable build

// after that run app on desktop

clickable desktop

Explain Code

After the above command, you will see a simple “Hello World” app like this:

Create a New Project for an Ubuntu Touch OS App

We created a demo Ubuntu Touch OS project using Clickable, covering setup, initialization, and running the app in three simple steps.

Create a demo app for Ubuntu Touch OS.

Create the App Components

We’ll start by creating a productApi.qml file in the qml/api folder.

ProductApi.qml

This QML code fetches product data from a fake store API. It uses QML to load and display product details like title, price, rating, and image.

import QtQuick 2.7
import QtQuick.XmlListModel 2.0

QtObject {
    id: productApi

property ListModel productListModel: ListModel {}

Component.onCompleted: fetchProducts()
}

import QtQuick 2.7

import QtQuick.XmlListModel 2.0

QtObject {

id: productApi

property ListModel productListModel: ListModel {}

function fetchProducts() {

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://fakestoreapi.com/products");

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

try {

var json = JSON.parse(xhr.responseText);

productListModel.clear();

for (var i = 0; i < json.length; ++i) {

productListModel.append({

title: json[i].title,

price: json[i].price,

image: json[i].image,

rating: json[i].rating.rate

});

}

} catch (e) {

console.log("Error parsing JSON:", e);

}

xhr.send();

}

Component.onCompleted: fetchProducts()

}

Explain Code

ProductCard.qml

This QML code creates a stylish product card layout for a Ubuntu Touch app using Lomiri Components. It displays the product image, title, price, and rating in a clean and responsive design.

import QtQuick 2.7
import Lomiri.Components 1.3

LomiriShape {
    width: ListView.view.width - units.gu(2)
    height: units.gu(15)
    radius: "medium"
    aspect: LomiriShape.DropShadow

RowLayout {
        anchors.fill: parent
        anchors.margins: units.gu(1)
        spacing: units.gu(2)

// Product Image
        LomiriShape {
            Layout.preferredWidth: units.gu(12)
            Layout.preferredHeight: units.gu(12)
            radius: "small"
            aspect: LomiriShape.Flat

Image {
                anchors.fill: parent
                source: model.image
                fillMode: Image.PreserveAspectFit
                asynchronous: true
            }
        }

// Product Details
        ColumnLayout {
            Layout.fillWidth: true
            spacing: units.gu(0.5)

Label {
                text: model.title
                wrapMode: Text.WordWrap
                maximumLineCount: 2
                elide: Text.ElideRight
                font.bold: true
            }

Label {
                text: "$" + model.price.toFixed(2)
                color: LomiriColors.green
                font.bold: true
            }

Row {
                spacing: units.gu(0.5)
                Icon {
                    name: "starred"
                    width: units.gu(1.5)
                    color: LomiriColors.orange
                }
                Label {
                    text: model.rating
                    color: LomiriColors.orange
                }
            }
        }
    }
}

import QtQuick 2.7

import Lomiri.Components 1.3

LomiriShape {

width: ListView.view.width - units.gu(2)

height: units.gu(15)

radius: "medium"

aspect: LomiriShape.DropShadow

RowLayout {

anchors.fill: parent

anchors.margins: units.gu(1)

spacing: units.gu(2)

// Product Image

LomiriShape {

Layout.preferredWidth: units.gu(12)

Layout.preferredHeight: units.gu(12)

radius: "small"

aspect: LomiriShape.Flat

Image {

anchors.fill: parent

source: model.image

fillMode: Image.PreserveAspectFit

asynchronous: true

}

// Product Details

ColumnLayout {

Layout.fillWidth: true

spacing: units.gu(0.5)

Label {

text: model.title

wrapMode: Text.WordWrap

maximumLineCount: 2

elide: Text.ElideRight

font.bold: true

}

Label {

text: "$" + model.price.toFixed(2)

color: LomiriColors.green

font.bold: true

}

Row {

spacing: units.gu(0.5)

Icon {

name: "starred"

width: units.gu(1.5)

color: LomiriColors.orange

}

Label {

text: model.rating

color: LomiriColors.orange

}

Explain Code

Main.qml

This QML code creates the main view of a Ubuntu Touch app showing products from a fake store API. It uses a ListView with custom product cards and a loading indicator during data fetch.

import QtQuick 2.7

import Lomiri.Components 1.3

import "./api" as Api

import "./components" as Components

MainView {

id: root

objectName: 'mainView'

applicationName: 'demo.demo'

width: units.gu(45)

height: units.gu(75)

Api.ProductApi {

id: productApi

}

Page {

anchors.fill: parent

header: PageHeader { title: "FakeStore Products" }

ListView {

anchors.fill: parent

anchors.margins: units.gu(1)

model: productApi.productListModel

delegate: Components.ProductCard {}

spacing: units.gu(1)

ActivityIndicator {

anchors.centerIn: parent

running: parent.count === 0

}

Explain Code

Now, save your code and run the app using the commands mentioned above.

Here is the Output of the project