Its been just a day or two since Ubuntu Phone OS’s preview has been released. Along with a lot others, I installed it on my phone and it works pretty well. You can find the whole documentation on how to install it on your device here. After a few hours of fiddling with the OS, I thought it will be a good idea to develop some quick apps for the phone. As such there is no official guides to develop your hello world apps for the phone at the moment, although the resource available on the Ubuntu site is just enough to pull out some idea and develop a test app for it. In this post, I present you a quick guide to develop a simple XKCD comic app for Ubuntu Phone OS. The expected features are listed below. You can add more features as you learn more.
- Have a title bar and show XKCD on it
- A button named Random
- On clicking Random it should load a random comic from xkcd.
The features are simple enough for a hello world app. So first thing to consider is the API xkcd provides. Thankfully the xkcd API is also very simple to be used in our app. The xkcd API returns JSON document from which we get comic metadata such as image URL and comic search keyword strings. So that part is more or less fine. You can see the API details here.
As with any projects, the next step is to create a mockup for the application. I use pencil here to create a mockup as shown in the image below.
The language Ubuntu Phone OS prefers is Qt with QML. QML is a declarative UI markup language. You may find more details about QML from the Qt documentation website here. For developing apps for Phone OS, you need to install Qt5 and Qt-Creator with Ubuntu development plugins. You may find the full instruction for doing that here. Note that Ubuntu Phone SDK contains the whole Qt libs and editors. There are some dependency problems as of now, that we will consider later in this post. Once the SDK installed, open Qt-Creator, press Ctrl+N and select a new Ubuntu UI application.
For now, name the project xkcd and press Finish. When opening Qt-Creator, you may see an error which says “Error : Plugin Load Failed” meaning that some Ubuntu components can’t be loaded. This is due to a missing dependency in the toolchain, and you can fix it by installing the package libbotan-1.10-0 (sudo apt-get install libbotan-1.10-0). Once the project is created, you may delete the file named firstname.lastname@example.org from the project folder which is not needed in our project for now. Although we need another image for this project, which will be used as a placeholder when the comic image is being loaded from the network. This image will simply say LOADING for now. You don’t actually need to use an image for this purpose, yet again, doing it this way for now to keep it simple. You can download and use an image which says loading, from the Internet. The only file we need to change is the xkcd.qml in this project. The following is the content of the file.
- [Line : 46] Load a placeholder image into the Image object
- [Line : 47] Prepare a network request object named doc
- [Line : 48] Declare a network request state-change listener
- [Line : 52] If the network request is DONE, find the img key from the JSON returned by XKCD API. This key holds the actual image URL to the comic. And finally set it as the image source for the Image object.
Done! Our first Ubuntu Phone OS app is ready to be deployed. The device connectivity concept is slightly different in Ubuntu Phone OS. You need to connect the device to the LAN where the actual key pairing is done over the air. Once the device is detected in the device tab on the Qt-Creator, we can deploy the app directly into the device. Apparently, the preview release holds a remote qmlscene with which we can marely run the app. To deploy an app to a connected device, press Ctrl + F12 or you can do it via the menus. When developing apps for Ubuntu Phone OS platform, you may find several issues around the platform itself and the development environment. One of them is that multiple qmlscene instances running on the device with each deployment you do, which essentially makes the device slower. You can press Ctrl + Shift + F12 to kill all qmlscene instances on the device. Or alternatively, you can connect to the device over SSH, and use pkill. Another issues is with the app debugging. Android’s debug bridge is hardly of any use at the moment, even though Canonical says we can use it officially. You can use console.log() for debugging purposes but you have to kill all the qmlscene on the device to see the messages back in the IDE. The console log data will go to the General Messages tab in Qt-Creator. Secondly, you may find the device getting disconnected so frequently when you are developing, which you need to go to device tab and detect the device again to reconnect. Also, remember that this is a preview release of the OS which means, not even the core apps are ready to be used in production. There are multiple bugs in the flashing process as well, so take care when you fiddle with your device. Your phone might turn into a chicken ;). These little issues are expected to be fixed very soon. So you may live with it for now, or wait for a few months, which I failed to do. :)
Here is a screenshot of the application running on a device here. Not much polished, though good enough for a start.
The full source for the app is available here. As you know, it is another open source initiative from Canonical. The important thing to do is, contributing back to the project. Whether it is a bug report or a word of mouth or whatever, please take the effort to do it. Happy hacking and have a nice day.
//See you in the afterlife