Category: Software Development

Categories
Software Development Technology Tutorial Ubuntu Ubuntu Touch

GETTING A QUASAR BUILD RUNNING AS APP ON UBUNTU TOUCH

Here is my journey to see if I can make a basic Quasar app work on Ubuntu Touch.
I should preface that I have never built an Ubuntu Touch app and I’m not even done my Quasar course
but there are enough people interested in this so I want to stop everything and try…

Quick Overview of Ubuntu Touch Apps and Quasar

To get familar with the Ubuntu Touch directory structure stuff, I git cloned this simple hymnal app since I knew it was mainly based on html website stuff and likely would not have complicated databae backend stuff going on. You may wish to do the same.

Build an Ubuntu Touch App with Clickable

What is clickable? It’s the thing Brian Douglass made, of course. And who is Brian Douglass Brian is just super great and one of the main/only reasons I started learning how to program. Thanks Brian again!!

Here is a link to UBport’s App Development for Ubuntu Touch

I will start by forcing myself to actually read the docs! Painful for a guy like me but I’ve learned that this is the right way to suffer less… I will start by reading all the links in the ‘Guides’ section on the link above.

In there, I found Lionel Duboeuf’s video on clickable. Nice! Thanks, Lionel (another great guy).

First, don’t rely on my commands here that I reference. Always go to the documentation page to make sure they are all updated. I’m just putting them here mainly for my own log.

Part of my journey was discovering that the clickable documentation assumes I would know what order to install dependent packages. Unfortunately that was not true so my journey was a bit painful. I’ll try to spare someone else this part of the journey. The docs instruct to install docker, adb, git and pip3 but it doesn’t say to make sure that you do these first and that the rest won’t work. At least this is what happened to me. So maybe just follow my order:

  1. Install adb (search it online but I recall it was just sudo apt install adb)
  2. Install git (probably sudo apt install git)
  3. Install pip3 (the python thingy that installs more python thingies) so that you can install Clickable. sudo apt install python3-pip should be the right command… but your terminal should tell you if I’m wrong, ha
  4. Install clickable: This page says everything. I’m waiting for an answer on why pip3 install method is recommendd over PPA method. I’m assuming it has to do with docker functionality? Anyway, I’m up and running with the following command so roll with this: pip3 install git+https://gitlab.com/clickable/clickable.git
  5. Install Docker: See dedicated instructions below
  6. Run clickable in the terminal but don’t do so until Docker is fully installed! It requires Docker!

Installing Docker

This part of the process, for me, required a dedicated section and a lot of learning. If you are already set up with Docker you can probably just skip all this. But for those like me who have never used it this section should save you a lot of pain.

Apparently you need the latest ‘engine’ for Docker and for Ubuntu that is found here. This part was pretty painful for me but it doesn’t need to be. I’ll leave a few of my long notes to scan through but you should be good to go to simply run:

sudo apt install docker.io

Feel free to run that and skip this next section if you want.

Installing Docker the Fast Way

As per above: sudo apt install docker.io will install it but it’s better to follow the docker instructions above.

Installing Docker the Long ‘Recommended way’

Setup some preliminary ‘stuff’ with this group of commands:

sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

Curl the gpg key with this command:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Looks like this next one sets up the right repository. Note! You can copy the back slashes and it works just find in terminal (somehow I never knew this…):

sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable"`

Run this:

sudo apt-get update

And then this:
sudo apt-get install docker-ce docker-ce-cli containerd.io

Finally, run a quick test to make sure it works:

sudo docker run hello-world

EDIT – 200427 apparently this next user section is not needed as it happens when you install Docker. Thanks

But don’t think you’re ready to go just yet! You have to make sure your Ubuntu machine has the right privelidges set for Docker.

Add Docker User to Ubuntu Group

If you know how to ‘add Docker to your user group’ or to check to see if you have it, then go ahead and do that and skip this section. For the rest of us, read on:

Apparently you can see what groups and users you have on your ubuntu machine by using this handy command, but note importantly that the list it outputs is not in alphabetical order:

For users: compgen -u
For groups: compgen -g

If all the Docker install stuff worked you should see ‘docker’ in the list under after running compgen -g

If you don’t, then if you run the following command you can add it. Be sure to replace the $USER – incuding the $ with your Ubuntu machine’s user name.

sudo usermod -aG docker $USER

CLICKABLE TIME – THE MOMENT OF TRUTH

This section now assumes that you have done all the steps above including Docker. Here is a quick review so you can check again:

  1. adb
  2. git
  3. pip3
  4. clickable
  5. docker

Before you do this next step, if possible, make sure you are on a wired connection or the fastest connection you can get. I will explain…

Ok, let’s do this. Type clickable in your terminal.

Note! this part is wacky and doesn’t deliver the usual ‘status’ stuff to know what’s going on and how long it will take. There were a lot of the following kind of messages in the terminal which were normal. Here are some notes I took so that you can feel less ‘curious’ about whether things are progressing or broken:

waiting
Download complete
Verifying Checksum
etc
etc
Download complete

At this ‘Download complete’ message this is where things hung for a long time for me. Apparently what is happening here is that an entire Docker image is being downloaded and set up and this is nearly 1 gigabyte of data.

Pull complete

Once I hit this stage ‘Pull complete’, then there was another batch of messages that included ‘verifying checksum’ and ‘Download complete’ at which point it again paused for a really long time.

After what seemed like forever in my case (bad wifi) it all ended the process.

It’s also interesting to note, but I have not tested, that apparently this long process only happens the first time you set up your app and subsequent updates you make to your app will not require this process, which is nice.

Ubuntu Touch(ing) Your Quasar Package

Now you’ve powered through that process you’re now ready to move your Quasar app to Ubuntu Touch. The good news is that this part is pretty easy! I’ll try to make this more of a step-by-step guide since probably we’ll all need to refer back to it.

Setup your Quasar stuff for the Ubuntu Touch stuff

This assumes you know what quasar build means and that you have have already run it in your quasar directory and have the ‘app’ ready to go. On my machine, the files we need are found in the /dist/spa directory.

  1. Create a directory on your development machine with your Ubuntu Touch app name somewhere logical for later use
  2. In the same directory create another directory called ‘www’ (you can probably call it what you want but might want to keep it ‘www’ for this tutorial for ease). To be honest I think the main purpose of doing this is to keep your source files in a logical spot. At least that’s why I did it…
  3. Go to your Quasar /dist/spa directory and copy all the files from there to the ‘www’ directory you just created in step 2.
  4. Set up your logo file for UT. I think there are two ways to do that so I’ll outline them both with a and b as follows:
    a) stick it in the main directory of your directory you created in step 2 above and give it the title (“icon.png”)
    b) stick your logo file in a logical place then go in and edit your appname.desktop file and point the following line to your icon: Icon=path/to/your/icon.png

Now you have the foundation laid and are ready to build the app

Build the Ubuntu Touch App Pre-Build Structure

  1. In your terminal cd inside your app’s top level directory, run clickable create which will create the structure for your app, not the app itself (the click file). I was mixed up on this for a while so note this.
  2. As Clickable walks you through the process, the key step is to select option 5 (HTML) . The rest of the options are for standard app building processes and details about those can be found if you’d like to learn more or just watch Lionel walk through it in his video.

Move your Quasar files to your Ubuntu Touch app structure

  1. Manually copy/move all the contents of your top level app `www’ directory into the newly-created /YourAppName/www folder (I wonder if we can automate this step later so the build script grabs it?)
  2. Run clickable desktop which gives you a really cool test emulation of the app before you build it. If everything seems to open up and work on your dev machine, continue.
  3. Make sure your Ubuntu Touch device is plugged in by USB (so that it will get the adb push of the app) and recognized. I also discovered there is a handy clickable tool clickable devices to do just that.
  4. Run `clickable’ which will build the app, and push your Quasar app to Ubuntu Touch as a click file. You should now be able to find a newly-created /YourAppName/build directory which should hold your shiny new Quasar appready to publish to OpenStore, or use on your local Ubuntu Touch device for whatever you need.

Success? Let me know if it helped and how the tutorial can be improved as I had to rush it out for someone 🙂