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 🙂

Categories
Technology Tutorial Ubuntu Ubuntu Touch

Getting Started With Quasar and VueJS on Ubuntu

After watching this recommended tutorial I decided to try out this Quasar thing. My true hope is that we can eventually add Ubuntu Touch as one of the buildable outputs at the end of app creation as it apparently might not be that hard with Cordova… but I digress…

I’m not an experienced developer yet so getting started with all these different ‘things’ I had to install with the terminal was getting a bit concerning. I decided to document my journey so that others can hopefully follow along and save some research and time.

So, if your goal is to be able to, without a great deal of pain, create a good looking app to run on Ubuntu, this might just help.

Without further adoo here are the steps that I took to get set up on my Ubuntu 18 LTS machine so that I’m ready to start using the Quasar framework. I left very brief notes to show what you are actually doing so that it’s not some random terminal script from some random blog:

  1. Install npm
    sudo apt install npm
  2. Download and install NVM (a thing to help you install and manage nodejs. Ubuntu repository for NPM is apparently not reliably up to date so that’s why we are using NVM. NOTE: Before beginning, check this page to make sure the following script I’m about to give you is up to date as it changes from time to time. Oh, and if you want to have a dance party and learn more about the details of NVM, this video is good. curl -o https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  3. Install LTS version of Nodejs (you can do whatever version you want as well easily but I’m not bothering to show that in this tutorial): nvm install --lts
  4. Check to make sure what you installed was what you wanted nvm ls
  5. Install the Vue CLI which is apparently what real developers developing VueJS stuff use. I got a few ‘warning’ messages after running this about my OS but probably life will continue…note also that when running this script my whole computer slowed down: sudo npm i -g @vue/cli
  6. Install Quasar – the framework that apparently makes doing a lot of stuff easier: sudo npm i -g @quasar/cli

Now I’m off to try to actually do this tutorial

Some Follow-Up Updates from the first tutorial Journey

Might as well leave a few notes that might help you along the way. If you were doing this Quasar tutorial and had an issue with hot reload not opening, I figured out how to get it working by just running quasar dev again and that seemed to kickstart the hot reload option. I had this happen a few times when i made changes and nothing new showed on the hot reload app.

In order to get highlights working properly in VS Code like teacher’s you should get the extensions for Vue and Sass since they may not be installed. I used:

octref.vetur (Vetur) for Vue because this has html auto-complete as well (another one I tried didn’t…) and

syler.sass-indented for sass stuff

Converting your New App into an Electron App and then Building for Ubuntu with a Debian package

For some reason it doesn’t really say explicitly anywhere in the tutorial above nor on the Quasar site, how to build for Ubuntu / Linux. I assume most developers ‘just know’ this but I didn’t so I had to search and find. For your benefit,

Installing for Ubuntu

Very hard to figure this out for a noob but after a full day of time spent I figured out how to turn this Electron app into an ubuntu native app running in the launcher and everything (exciting moment for a noob, I say!)

I feel like there should be a way to do this right in Quasar with a terminal tag during the build but it seems not.

First, you need to install this by running this on your Quasar dev machine:

npm install -g electron-installer-debian

Then, you build the app with the Quasar electron instructions, but for me it was as simple as running this:

quasar build - m electron

After you run that you’ll find two directories, one of which I still don’t know what it does. The two directories were “my-app-name-linux-x64” and “Unpackaged”

I then created a directory in my quasar project folder at the top level called ‘installers’

I then took the following command which I pulled off the read me page above:

electron-installer-debian --src dist/app-linux-x64/ --dest dist/installers/ --arch amd64

And adjusted the ‘src’ (source) to point to my app-named directory in the electron folder and the ‘dest’ (destination) to the installer directory I created. You can do what you’d like but mine looked like this therefore:

electron-installer-debian --src dist/electron/my-app-name-linux-x64/ --dest installers/ --arch amd64

The result was a fully effective .deb installer file which installed without a hitch and really ended the above tutorial on a high note.

Important note: I had this error:

Creating package (this may take a while)
Error: could not find the Electron app binary at “dist/electron/Quasar App-linux-x64/my-app-name”. You may need to re-bundle the app using Electron Packager’s “executableName” option.

This took a long while to trouble shoot but the issue was nothing more than opening the package.json file and making sure that the following two entries match and probably have dashes in the names (haven’t confirmed that need but it worked with them so I’m sticking to it!)

“name”: “my-app”,
“productName”: “my-app”,

Hope this also saves someone some hair pulling

Cordova Stuff and Ubuntu Touch (raw notes for later)

Cordova is apparently our best hope to get Quasar stuff to be able to convert easily to the Ubuntu Touch framework so I’ll leave my quick notes although they are quick, dirty, and probably fairly useless. I don’t think it can support Electron as per above.

First, apparently… cordova was not installed yet when I ran quasar build -m cordova it never told me that… I had to install cordova with some command that I cannot seem to now find…

Also interesting is that the build let’s you build without error even if you have caps problem in command such as typing ‘Cordova’ instead of ‘cordova’. Neato.

A little late in the game this link was sent to me which I somehow didn’t find before beginning even though I searched. I would have started right here so hopefully this documentation link helps someone save some time.

More to follow, hopefully…

Categories
Freedom and Privacy Life Skills Nextcloud Tutorial Ubuntu Touch

How to Set up a Calendar with Ubuntu Touch and Nextcloud

1. Set up online account in Ubuntu Touch

You will need all your calendar info from your Nextcloud instance before beginning. Looks something like this: https://yourdomain.com/nextcloudserverlocation/remote.php/dav/calendars/username

  1. open calendar
  2. middle icon that shows grid calendar
  3. ‘add online calendar’
  4. choose NC
  5. enter credentials

2. Sync

UT calendar ‘should’ start syncing right away and you’ll see a little icon appear showing that sync started and stopped. Sometimes, however, it seems like a manual sync is required. You can do this by going to the calendar page and selecting the top right hamburger menu and then the circular arrow ‘refresh’ icon.

Categories
Freedom and Privacy Technology Tutorial Ubuntu Ubuntu Touch

How to Sync Files from Ubuntu Touch to Nextcloud using UBsync

Ubuntu Touch is awesome. Nextcloud is also awesome. Put them together and you have awesome… squared. How cool would it be to have your photos automatically sync to your own Nextcloud sever? Well, you can do it today and here is how.

EDIT DEC 24, 2018 – Important Security Warning before beginning!
Currently as of the time of this post, UBsync is not very secure. The volunteers who forked it are not security experts and the password file is not secure and is in plain text. Therefore, be warned that if your content is of extremely private nature, do not use this blog contents until the app has been properly updated.

However, if you are just trying to move your selfies from your phone to your Nextcloud for safe-keeping, this blog will suffice and hopefully in the next little while we’ll have some helpers in the project to improve the way the password is handed.

Also, there is a way to mitigate some risk so that at least your main NC user/password cannot be high jacked. When you log in to your Nextcloud user settings through a browser and go to ‘Security’ and ‘Create new app password’. Be sure to save this password right away during creation and in a safe place because you can only see the password one time (you can’t come back and see it again).

Once you have this password ready, continue with the blog.

  1. Make sure that you have a user account and password from a Nextcloud server.
    If you don’t have a nextcloud user account, consider strongly hosting your own. You can do this on an unused computer, or using Nextcloudpi on a Raspberry pi, or host a more ‘serious server’.
  2. In your Nextcloud user directory, create an appropriate directory to put your Ubuntu Touch files in. If you don’t touch anything everything will go into your ‘Photos’ folder by default.
  3. Make sure you have the UBsync app installed from the OpenStore
  4. Go to System Settings in Ubuntu Touch
  5. Go to ‘Accounts’
  6. Select ‘Add Account’
  7. Select ‘Nextcloud’
    Note: If you try to add an account and it doesn’t respond and take you to the next step, you may need to reboot your device.
  8. Enter your Nextcloud credentials (from the ‘new app password’ you created at the very beginning)
  9. Open UBsync App on your Ubunt Touch device
  10. Select ‘Add a New Account’
  11. Select ‘allow’ if the prompt is showing the correct username with the correct server address
  12. Go back to ‘General Settings’ screen of UBsync
  13. Set your sync frequency.
  14. Select any other changes you want on this page.
  15. Go back another screen with the back button top left
  16. Select the folders on your device that you want to sync to your Nextcloud with the ‘Sync Folders’ option.
    The default option will put your Ubuntu Touch photos (unedited) into the /photos directory (which is a default directory when Nextcloud creates a new account) from the following Ubuntu Touch directory

Default: /Pictures/com.ubuntu.camera/.original

  • Add a new folder with the + plus sign on the top right.
    Select the directory on your UT device you want to sync. NOTE: This is the tricky part, the big ‘tick’ check mark in the center of the screen is not ‘touchable’ but is trying to direct you to hit the ‘tick’ in the top right menu!

Do the same actions for the remote folder.
If the Folder doesn’t exist you can create a new one easily by just typing it. After creating it, touch it again and hit the ‘tick’ in the top right to make it real.

  1. When complete, press the back arrow at top left of ‘sync settings’ title.
  2. Start the sync
    Select ‘sync service’ and then the green ‘sync’ button. NOTE: Make sure you are on wifi if you allowed your settings to use both cell phone data and wifi as the sync could be pretty big, especially the first one while it pulls the files from your phone and moves them to nextcloud.

How to Delete an Account un UBsync for Ubuntu Touch

  1. Go to System Settings in Ubuntu Touch
  2. Go to ‘Accounts’
  3. Touch ‘Nextcloud’
  4. Select ‘Remove Account’ button

That’s it. The account is now removed/deleted.

Categories
Freedom and Privacy Life Skills Technology Ubuntu

Stop Fighting Apple-Just Force this Disclosure on buyers!

I’m super bored reading these kind of stories.  I’ve been free from such software and hardware for many years so at this point it’s just boring.  However, I do have a solution instead of trying to sue them for monopolizing or overcharging: just force a really simple, plain language disclosure document before the sale of any Apple Inc device. Here is my proposed disclosure:


I understand that by purchasing this Apple Inc device I will be forced into a software environment called the “App Store” that is the equivalent of a rigid monopolist jail cell.  I understand that the only apps I will be able to install must come from this Apple ‘App Store’.  There is no other way to get an app without violating your warranties but through this monopolist app store .

Because Apple Inc will take from the software developers who develop for this device a mandatory 30% of the purchase price when you purchase an app through their system, I could either be spending money on an app that could be otherwise free, or spending 30% more than I could while software developers try to make up for their business losses from this significant commission that Apple unilaterally takes for itself. 

Furthermore, I also understand that I will risk the chance of having my device’s performance remotely throttled by Apple Inc whenever they feel it is right to do so and without first consulting me about it.  I also understand that even the hardware itself is made with proprietary connectors (i.e. chargers) that will not work with other standard industry connectors.

I also understand that there are other software systems such as Linux which has operating systems such as Ubuntu, that respect my freedom and choices, and provide free software and free delivery of software and that are capable of running on top of many different types of hardware, including mobile phones.  I understand that many of the large corporations (such as Apple, Google) run these Linux systems for their own computers and servers. 

I declare that no one is forcing me to enter into this relationship with Apple Inc, that I have do have choices, that I have been warned, and I now choose to move forward with this purchase and risk suffering all of the above pains.

________________________

Apple Inc Device Customer

 

__________________________
Date of purchase