Developing Cordova Appsfor UbuntuPhoneGap Day EU 2016 Amsterdam

The Xenial Xerus is outCelebrating Ubuntu 16.04

Convergence is now

> Ubuntu runs anywhere> Shipping the first convergent devices> snappy Ubuntu Core for IoT

The Xenial Xerus is outCelebrating Ubuntu 16.04

Extending the Ubuntu devices lineup

bq Aquaris M10Ubuntu Edition

Meizu Pro 5Ubuntu edition

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

Ubuntu for devices

Platform Services

● Content HubApplications can expose content outside its sandbox, to give users control over data exchanges

● Download ManagerOffload downloads to a background service

● Media HubPlay audio in the background, view videos with HW accelerated codecs

● URL dispatcherLinking to your app made easy

Ubuntu for devices

Platform Services (contd)

● Push notificationsReceive notifications from the network, filter and resume an app

● Online accountsUser identities managed by the system, for OAuth based servicesApps can only use those once the user has explicitly granted permission

More on developer.ubuntu.com

Getting started

Development environment

Install an Ubuntu VM

Add Ubuntu SDK packages

Install cordova-cli

Check your setup

Development environment

1

2

3

4

Development environment

Installing an Ubuntu VMInstall from an ISO imageOr 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 sshsudo vi /etc/hosts # add ubuntu-xenial to localhostsudo passwd # fix the password / login problemscp -P 2222 -i .vagrant/machines/default/virtualbox/private_key packages/* ubuntu@127.0.0.1:/var/cache/apt/archives/

1

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

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

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

Run and debug

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>

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

Ubuntu Cordova Application Development

Plugins

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, …)

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)

Cordova and Ionic for your Ubuntu App

Install Ionic and run the sample appcd ~/

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

Publishing your app

The Ubuntu App Store

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

Ubuntu Cordova Development: What’s next?

Convergence, IoT

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

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

IoT

● Snappy Ubuntu CoreA new, transactionally-updated Ubuntu for IoTdevices, clouds and more

● Connect to devices from your Cordova app

● New cordova-plugin-ble-central for Ubuntu

● Demo

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);

});

Developing Apps for UbuntuPhoneGap Day EU 2016 Amsterdam