Date post: | 20-Feb-2017 |
Category: |
Engineering |
Upload: | xiaoguo-liu |
View: | 443 times |
Download: | 1 times |
Webapps development on Ubuntu
XiaoGuo Liu <[email protected]>© 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! :)