Learn how to use Cordova to develop applications for Ubuntu. Support material for the workshop held at Phonegap Day EU 2016 in Amsterdam

1. Developing Cordova Apps
for Ubuntu
PhoneGap Day EU 2016 Amsterdam

2. The Xenial Xerus is out
Celebrating Ubuntu 16.04

3. Convergence is now
> Ubuntu runs anywhere
> Shipping the first
convergent devices
> snappy Ubuntu Core for IoT

4. The Xenial Xerus is out
Celebrating Ubuntu 16.04
Extending the Ubuntu devices lineup
bq Aquaris M10
Ubuntu Edition
Meizu Pro 5
Ubuntu edition

5. Ubuntu for devices
Ubuntu Technologies
● Based on the central Ubuntu/Debian archive
● Mir display server
● Oxide webview, based on Chromium/Blink
● App confinement
○ Packaged (click/snap)
○ Strict application lifecycle
○ Secure, thanks to Apparmor policy-groups and platform trust-prompts
● Distribution via the Ubuntu App Store

6. Ubuntu for devices
Platform Services
● Content Hub
Applications can expose content outside its sandbox, to give users control over data
exchanges
● Download Manager
Offload downloads to a background service
● Media Hub
Play audio in the background, view videos with HW accelerated codecs
● URL dispatcher
Linking to your app made easy

7. Ubuntu for devices
Platform Services (contd)
● Push notifications
Receive notifications from the network, filter and resume
an app
● Online accounts
User identities managed by the system, for OAuth based
services
Apps can only use those once the user has explicitly
granted permission

8. More on developer.ubuntu.com

9. Getting started
Development environment

10. Install an Ubuntu VM
Add Ubuntu SDK packages
Install cordova-cli
Check your setup
Development environment
1
2
3
4

11. Development environment
Installing an Ubuntu VM
Install from an ISO image
Or copy the Virtualbox provided during the workshop
mkdir devbox; cd devbox
vagrant init ubuntu/xenial64
# add this to your Vagrantfile
config.vm.provider "virtualbox" do |vb|
vb.name = "devbox"
end
vagrant up
vagrant ssh
sudo vi /etc/hosts # add ubuntu-xenial to localhost
sudo passwd # fix the password / login problem
scp -P 2222 -i .vagrant/machines/default/virtualbox/private_key packages/*
ubuntu@127.0.0.1:/var/cache/apt/archives/
1

12. Development environment
Add the Ubuntu SDK packages
● This is already included in the vagrant box...
sudo apt-add-repository ppa:ubuntu-sdk-team/ppa
sudo apt-get update
# this will create a clean click chroot build environment
sudo apt-get install click-dev phablet-tools ubuntu-sdk-api-15.04
# add build dependencies inside the click chroot
sudo click chroot -a armhf -f ubuntu-sdk-15.04 install cmake libicu-dev:armhf pkg-
config qtbase5-dev:armhf qtchooser qtdeclarative5-dev:armhf qtfeedback5-dev:armhf
qtlocation5-dev:armhf qtmultimedia5-dev:armhf qtpim5-dev:armhf libqt5sensors5-dev:
armhf qtsystems5-dev:armhf
2

13. Development environment
Install cordova-cli
● 4.3.x is still the recommended path
● The debian package has fixes in cordova-lib
sudo apt-add-repository ppa:cordova-ubuntu/ppa
sudo apt-get update
sudo apt-get install cordova-cli
cordova -v
4.3.1
cordova create testapp testapp.pgdayeu "test app"
# cordova-ubuntu github master has the latest release (4.3.4 currently)
cordova platform add https://github.com/cordova-ubuntu/cordova-ubuntu
3

14. Development environment
Check your setup
● Add a USB port to the VM
● Connect an Ubuntu phone
sudo adb kill-server
sudo adb start-server
# should display the list of visible devices
adb devices
# just in case...
ssh-keygen
# log into the phone
phablet-shell
3

15. Run and debug

16. Running a Cordova app on Ubuntu
cordova run --device
What it does is:
- Build the app & plugin runtime
- Package the result in a .click file
- Connects over ADB to the device
- Stop the application if it was already running
- Installs the app via pkcon local-install --allow-untrusted
- Start the app with ubuntu-app-launch <app id>

17. Debugging tools
Chrome Devtools support
cordova run --device -- --debug
App logs on the phone
phablet-shell
tail -f ~/.cache/upstart/application-click-<your app id>.log
Detailed build logs
cordova -d build --device -- --verbose

18. Ubuntu Cordova
Application Development
Plugins

19. Using plugins
● We maintain our ports for most of the core plugins,
● The more up to date versions can be found in our github repos:
https://github.com/cordova-ubuntu
● We are increasing our core and extra plugins support
○ File transfer platform support
○ BLE/Bluetooth plugin (based on Don Coleman’s API)
○ Planning to release plugins for specific platform supports (Content hub, Online
Accounts, …)

20. Using plugins (contd)
● Sample usage for plugins:
○ https://github.com/cordova-ubuntu/ubuntu-demo
cordova plugin add https://github.com/apache/cordova-plugin-compat.git
cordova plugin add https://github.com/apache/cordova-plugin-camera.git
cordova plugin add https://github.com/apache/cordova-plugin-device.git
cordova plugin add https://github.com/apache/cordova-plugin-device-motion.git
cordova plugin add https://github.com/cordova-ubuntu/cordova-plugin-geolocation.git
cordova plugin add https://github.com/cordova-ubuntu/cordova-plugin-ble-central.git
cordova plugin add https://github.com/cordova-ubuntu/cordova-plugin-vibration.git
(Some plugins are in the process of being upstreamed with updates)

22. Cordova and Ionic for your
Ubuntu App

23. Install Ionic and run the sample app
cd ~/
npm install ionic # note: no need to use -g
export PATH=~/node_modules/.bin:$PATH
ionic start ionicapp
cd ionicapp
# add platform
ln -s ionic.png www/img/logo.png # grmbl…
cordova platform add https://github.com/cordova-ubuntu/cordova-ubuntu
ionic run --device

25. Publishing your app
The Ubuntu App Store

26. Ubuntu Store
● Application packaged as a “click”
● Click package created when running
cordova build --device
● Upload to the store from
○ https://myapps.developer.ubuntu.com/dev/click-apps/
○ quick automated approval with automated click introspection

27. Ubuntu Cordova
Development: What’s
next?
Convergence, IoT

28. Convergence
● Range of supported form factors expanding
● Unity8 to “rule them all” with flexibility
● Adaptive behavior
○ Dynamic over US B or wifi connection to HDMI monitor
○ Bluetooth keyboard, mouse
● Applications should be responsive

29. Design Guidelines for Convergence
Ubuntu UI design guidelines, examples & assets
○ http://design.ubuntu.com/apps
■ Navigation concepts
■ Presentation guidelines
○ http://design.ubuntu.com/examples
○ http://design.ubuntu.com/downloads
Community supported HTML5 UI templates & SDK:
○ https://code.launchpad.net/~ubuntu-html5-theme-devs/ubuntu-html5-
theme/trunk
○ Support for most of the widgets & ubuntu elements
○ Core can easily be embedded

30. IoT
● Snappy Ubuntu Core
A new, transactionally-updated Ubuntu for IoT
devices, clouds and more
● Connect to devices from your Cordova app
● New cordova-plugin-ble-central for Ubuntu
● Demo

31. Sample BLE code
Connect your app to an Ubuntu device, with Bluetooth Low Energy !
function deviceDiscovered(device) {
if (device.name.match(/sensor/i)) {
var tags = self._ui.list("#sensortags");
tags.append(device.name + ", " + device.id, null, null,
function (target, thisdevice) {
ble.connect(device.id, onConnect, bleError);
}, device);
}
};
function bleError(msg) {}
plugins.append("BLE SensorTag",
null,
null,
function (target, result_infos) {
self._ui.pagestack.push("plugin-ble");
ble.scan([], 5, deviceDiscovered, bleError);
});

32. Developing Apps for Ubuntu
PhoneGap Day EU 2016 Amsterdam