Webapps development on Ubuntu

XiaoGuo Liu <xiaoguo.liu@canonical.com>© 2014 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.

(c) 2014 Canonical

Agenda1. Webapps on Ubuntu platform2. How to create an online webapp3. Develop a local application using HTML 5 and Javascipt4. Build a Cordova application on Ubuntu5. Online account API6. Application security

Webapps overview

Webapp types on Ubuntu platform

● Online webapps

● Local HTML 5 web apps though they cancall online resources○ Cordova HTML 5○ non-Cordova HTML 5

HTML 5 APIs on Ubuntu platform

Device and Sensors

● org.apache.cordova.battery-status

● org.apache.cordova.camera

● org.apache.cordova.device

● org.apache.cordova.device-motion

● org.apache.cordova.media-capture

● org.apache.cordova.vibration

Graphical Interface

● UbuntuUI

● org.apache.cordova.dialogs

● org.apache.cordova.splashscreen

Platform Services

● AlarmApi

● ContentHub

● OnlineAccounts

● org.apache.cordova.inappbrowser

● org.apache.cordova.network-

information

Multimedia

● org.apache.cordova.media

Language Types

● org.apache.cordova.globalization

Webapp container

(c) 2014 Canonical

Webapps Architecture

Mobile Webapps

Local Files &System access

Direct APIs toDownload Mgr,

etc.

WebappsQML/JS bridge

Push Service,Media-Hub

etc.

Push API, etc.

Content Hub API

Media API

WebAppCode

> Oxide <

Chromium Web engine (Google)

Accounts API

Online Accounts

ContentHub

HTML5 Apps

Online WebApps on Ubuntu

> Super simple and easy to create and publish

> Extend your websites into converged Ubuntu as apps

> URL patterns control what can be opened in webapp and what goes to browser while enabling complex apps drawn from multiple URLs

> Security: Links to other URLs open in browser, so user cannot be spoofed

> Containment: Webapps use isolated cookies, history, etc. that is not shared with any browser

> Integration with Ubuntu/Unity shell: Found as an app, launched as an app, displayed as app

> Click packaged and distributed through the Ubuntu Software Store

> Runs on Oxide, a state-of-the-art web engine based on Blink/Chromium, optimized for Ubuntu

Reference: http://developer.ubuntu.com/web/

What you should know about online webapps

Webapps are click packages; you need

> manifest.json (click package and app definition)"description": "Ubuntu app for example.com","framework": "ubuntu-sdk-14.04","hooks": {

"example": {"apparmor": "app.json","desktop": "app.desktop"}

...

> app.desktop (app launcher)[Desktop Entry]Name=example.comComment=webapp for example.comType=ApplicationIcon=app.pngExec=webapp-container http://m.example.com...

> app.png (icon)

> app.json (security policy groups)"template": "ubuntu-webapp","policy_groups": [ "networking", "audio", "video", "webview", "content_exchange" ],"policy_version": 1.2

How to package

Usage: webapp-container [options] URL

> User Interface Options–enable-back-forward

–enable-addressbar

> URL patterns (warning: unconstrained by default)–webappUrlPatterns=<pattern>, example: http://www.ubuntu.com/*

> Others options–inspector

–store-session-cookies

--user-agent-string=[UA]

Main Command Line Options

webapp-container --fullscreen --store-session-cookies --webappUrlPatterns=https?://browserquest.mozilla.org/* http://browserquest.mozilla.org

> Unconstrained by defaultwebapp-container http://mobile.website.com/

> Adding a specific domain--webappUrlPatterns=http://developer.ubuntu.com/*

> Adding subdomains with wildcards--webappUrlPatterns=http://*.ubuntu.com/*

> Adding HTTPS--webappUrlPatterns=https?://www.launchpad.net/*

> List of patterns--webappUrlPatterns=http://developer.ubuntu.com/*,http://www.ubuntu.com/*

> But this is not allowed: https?://*.ebay.*/calendar*

Example URL Patterns

Demo - Twitter Webapp

Code available on Launchpad

http://developer.ubuntu.com/webapp-generator/

Local HTML5 Apps on Ubuntu

> Pretty much the same: Use the same Oxide web engine as online Webapps

> Your code is local:

- the application code and assets are in the local filesystem- define the JS code and HTML interface for your own app- no need to host your code like what online webapps do

> Secure and contained: HTML5 apps are isolated by apparmor

> Extended JS API bindings: native, direct access to system and platform APIs

> Optional Ubuntu UI: you can style your application to look like a QML app (unsupported, community driven)

Local HTML5 Apps compared to online Webapps

https://developer.ubuntu.com/en/apps/html-5/

> Web engine is Oxide, based on Chromium

> Best of HTML5 APIs available:

WebGL

File system API

Various media APIs

IndexedDB

> No W3C API available? We got you covered:

Ubuntu Touch Content Hub (application resource sharing)

Download Manager

Online Accounts

Runtime api (application lifecycle and environment)

Alarm api

Examples

HTML5 runtime environment

HTML5 applications are click packages

> manifest.json (click package and app definition)"description": "My Ubuntu HTML5 App","framework": "ubuntu-sdk-14.10","hooks": {

"myapp": {"apparmor": "app.json","desktop": "app.desktop"}

> app.desktop (app launcher)[Desktop Entry]Name=MyHTML5AppComment=MyAppType=ApplicationIcon=app.pngExec=webapp-container ./www/index.html

> app.png (icon)

> app.json (security policy groups)"policy_groups": [ "networking", "webview", "audio", "video"],"policy_version": 1.2

How to package?

Sytle your App with Ubuntu look

Thanks to the popular ubuntu-html5-theme developed by community member Daker

● App layouts○ A header with tabitems (flat)○ A pagestack of pages (deep)

HTML 5 Toolkit (1/2)

HTML 5 Toolkit (2/2)

https://developer.ubuntu.com/en/apps/html-5/guides/introduction-to-the-html5-ui-toolkit/file:///usr/share/ubuntu-html5-ui-toolkit/0.1/examples/ui-gallery/index.html

● sudo apt-get install ubuntu-html5-ui-toolkit-examples● Search for “Ubuntu HTML5 UI Gallery”

Demo (五子棋)

Building a Cordova app on Ubuntu

> Apache Cordova / PhoneGap lets you develop hybrid cross-platform HTML5 apps, supporting Apple iOS, Android, Windows Phone, etc.

> Ubuntu is a supported Cordova platform:

. port an existing Cordova app to Ubuntu

. or create an app on Ubuntu and port it to iOS or Android

> To start using Cordova on Ubuntu:

. sudo apt-add-repository ppa:cordova-ubuntu/ppa; sudo apt-get update

. sudo apt-get install cordova-cli

cordova create <myproject>; cd <myproject>

cordova platform add ubuntu

To build for the phone, you also need to create a click chroot, from the Ubuntu SDK IDE, or manually.

Cordova & Ubuntu

https://developer.ubuntu.com/en/apps/html-5/guides/cordova-guide/

> Plugins: on top of W3C and plain HTML5 APIs, you can add platform specific plugins:

cordova plugin add org.apache.cordova.camera

Plugin names: http://plugins.cordova.io/#/

> Plugins Support Matrix: mobile support, with Desktop for dev. purposes see Cordova Ubuntu WIki Page

> Easy to build and run: A simple command generates, cross-builds, and starts the app on an Ubuntu Touch device.

cordova run --device

> To debug:

1. cordova run --debug

2. open localhost:9222 in chromium (chromium-browser --localhost=9222)

Cordova & Ubuntu

http://cordova.apache.org/docs/en/4.0.0/guide_support_index.md.html#Platform%20Support

References

> Apache Cordova Main Site: http://cordova.apache.org/

> Cordova Ubuntu Platform Support: http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ubuntu_index.md.html#Ubuntu%20Platform%20Guide

> Cordova Ubuntu PPA: https://launchpad.net/~cordova-ubuntu/+archive/ubuntu/ppa

Cordova & Ubuntu

Online account API

OnlineAccounts

API

(c) 2014 Canonical

Ubuntu Apps &Scopes(click)

DesktopApps(X11)

signond

OA PluginsOA PluginsOA Plugins

(OAuth)

3rd-party plugins(identity, service)

Identity

API key

System Settings(USSOA)signon UI Settings

Config files

Service Providers

(Google, Facebook)

Auth / Sign-in

Online Accounts Overview

Ubuntu OS 上的Online Accounts 研讨（英文视频)

Online Accounts HTML5/JS API (1/2)

> Initialize the context var api = external.getUnityObject('1.0'); var oa = api.OnlineAccounts;

> Enumerate providers (if necessary) oa.api.getProviders({"applicationId": "webbrowser-app"}, function(providers) { // from here, access providers[x] each provider having a displayName, // a providerId, etc. });

> Enumerate accounts available for a defined provider oa.api.getAccounts(filters, function(accounts) { if (accounts.length !== 0) { for(var i = 0; i < accounts.length; ++i) console.log(accounts[i].accountId()) });

如何使用Ubuntu online account API来创建微博HTML5应用

Online Accounts HTML5/JS API (2/2)

> Authenticate with a particular identity (account) // From an Account object retrieved by a getAccounts() call function authcallback(results) { // Access to a dictionary of results, with e.g. AccessToken etc. console.log('Authentication result: ' + JSON.stringify(results)); }; accounts[i].authenticate(authcallback);

> Allow to the user to grant access to a given provider and (if it applies) to create a new account for this provider oa.api.getAccounts(filters, function(accounts) { console.log("total length: " + accounts.length); if (accounts.length < 1) { oa.api.requestAccount( "html5-weibo.ubuntu_html5weibo", unescape("html5-weibo.ubuntu_account-plugin"), function() { } }); } else { }

https://developer.ubuntu.com/en/apps/platform/guides/online-accounts-developer-guide/

Application security

The application will have read/write access files in the standard XDG base directories. Specifically:

● XDG_CACHE_HOME/<APP_PKGNAME>● XDG_CONFIG_HOME/<APP_PKGNAME>● XDG_DATA_HOME/<APP_PKGNAME>● XDG_RUNTIME_DIR/<APP_PKGNAME>● XDG_RUNTIME_DIR/confined/<APP_PKGNAME> (for TMPDIR)

Environment variables:● XDG_CACHE_HOME: set to $HOME/.cache● XDG_CONFIG_HOME: set to $HOME/.config● XDG_DATA_HOME: set to $HOME/.local/share● XDG_RUNTIME_DIR: set to /run/user/$UID

Runtime Environment

e.g. XDG_DATA_HOME/com.ubuntu.developer.liu-xiao-guo.chinamobiledev

Ubuntu OS应用Runtime Enviroment

Security policy for click packages 1/3

● Untrusted by the OS: Ubuntu Software Store apps run in a restricted sandbox as defined in Application Confinement. Reviews of apps can be shallow, but as a result AppStore apps are considered untrusted. Untrusted applications:

○ can freely access their own data○ cannot access other applications’ data○ cannot access user data○ cannot access privileged portions of the OS○ cannot access privileged APIs, such as Telephony○ may access sensitive APIs with user permission, such as Location

or Online Accounts.○ are not typically supported by Ubuntu or Canonical

https://developer.ubuntu.com/en/publish/security-policy-groups/http://blog.csdn.net/ubuntutouch/article/details/41281971https://developer.ubuntu.com/en/apps/platform/guides/app-confinement/

● Trusted by the OS: software installed as part of the base OS or part of the Ubuntu archive are considered trusted by the OS. These applications typically do not run under confinement. User applications trusted by the OS:

○ can typically access any resources or data available within the user’s session

○ have limited access to system services and data as defined by the OS (ie, traditional filesystem permissions, PolicyKit, etc)

○ are supported by Ubuntu and/or Canonical and may receive security and high impact bug fixes based on the software’s support status.

Security policy for click packages 2/3

Security policy for click packages 3/3

Policy groups - apps may use any API that complies with the defined policy:

● Ubuntu HTML5 Application Docs ● https://launchpad.net/ubuntu-html5-theme (Ubuntu SDK UI)● https://launchpad.net/oxide● Javascript Ubuntu Platform APIs: http://bazaar.launchpad.

net/~webapps/unity-webapps-qml/trunk/files/head:/examples/api-bindings/

● HTML 5 totorials● Chinese tutorials “ 在Ubuntu手机平台上创建一个HTML 5的应用”● Ubuntu 手机开发培训准备● http://design.ubuntu.com/apps

Resources

Q & A

Now, to your keyboards! :)