html5 applications made easy on tizen ivi · tizen widgets, such as control bar and virtual list,...

HTML5 Applications Made

Easy on Tizen IVI

Brian Jones / Jimmy Huang

2

Obstacles IVI Developers Face Today

• Lots of hardware variety.

• Multiple operating systems

• Different input devices

• Software development requires access to the specific hardware /

OS combination.

• Long development cycles.

3

How Can HTML Help?

4

HTML Application Benefits

• Hardware independent

• OS independent

• Software development requires a computer with a browser

• Short development cycles

5

Why HTML5?

• Quick to port / Cross platform support Different vendors, image versions, hardware, and platform types can all run the

same app.

Apps can be run on other devices such as phones and tablets.

• Ease of development

No code compiling.

Fast prototyping and concept experimentation.

Tasks can be easily split among the team.

Low level tasks such as audio / video and user input are handled by the

browser.

6

Why HTML5?

• Speed to market

Development can take weeks instead of months or even years.

Apps can easily be built in stages.

• Easy updates and bug fixes

Since there is only one version, it only has to be patched once.

Small file sizes mean it can be done over the air.

• Hook up to the cloud

Already web based so connecting to the cloud is simple.

7

Why HTML5?

• Unified experience Apps can be deployed on other platform types such as phones and tablets. This gives

developers new and exciting opportunities for interaction between devices.

• License

Open standard and non-proprietary

• W3C

New APIs continue to be made, broadening the possibilities for web

applications.

8

Who Wins? Everyone.

• Benefits for application developers

Application developers are no longer forced to write and maintain multiple

versions of their app. This saves time and money.

It broadens the number of potential users.

• Benefits for platform makers

A large ecosystem of apps that will run on their system.

Easier to attract application developers to your system.

9

Tizen Web APIs

10

Alarm API

• This API provides the functionality for setting and unsetting of alarms.

It also allows applications to retrieve alarm information.

• Each client application has its own individual alarm storage, that is,

applications cannot view (or edit) alarms set by other applications.

11

Calendar API

• This API provides functionality to read, create, delete, and update

items in specific calendars.

12

Call History API

• This API provides interfaces and methods for retrieving information

from the call history.

13

Contact API

• This API is for managing Address Books.

• Contacts contain information, such as phone numbers, e-mail

addresses, etc.

14

Time API

• The Time API provides information regarding date / time and time

zones.

• This API can be used to get date objects with full time zone support,

convert them between time zones, retrieve available time zones.

15

Notification API

• Provides a way to notify user of events.

16

Bluetooth API • This specification defines interfaces and methods to manage Bluetooth.

• Controls local Bluetooth device (on, off, etc)

• Sets visibility

• Discovers nearby Bluetooth devices (Device discovery).

• Pair, un-pair, and retrieve paired devices information.

• Registers a service (RFCOMM) on a local device, which can be consumed by

remote devices to exchange data.

17

Application API

• This API provides a way to launch other applications and access

application management.

• Access current application's information and basic operations such as

exit or hide.

18

Package API

• This API provides functionalities to install or uninstall packages, and

retrieve information about installed packages.

• It also provides a listener method so that an application is able to be

notified when there is a change on the installed packages.

19

Messaging API

• This API provides interfaces and methods for managing SMS, MMS,

and email messages.

• Send, receive, search messages

• Manage messages: update, delete, and add.

• Subscribe to receive notifications of message storage modifications.

20

Content API

• This API discovers and manages contents such as images, videos,

music, and the other that are available on the device.

• It supports filtered searches. The API also supports setting attributes

of specific contents.

21

Message Port API

• This API provides the functionality for communicating with other

applications.

22

Power API

• This API provides support for requesting power resource states.

• Allows you to check screen brightness and whether the CPU is

awake.

• Allows you to set screen brightness for your application, possibly

disabling dimming.

• Turn screen on or off.

• Subscribe to screen change update.

23

System Info API

• This specification defines interfaces and methods that provide web

applications with access to various properties of a system. These

include items such as Battery, Display, Locale, Network, Device

orientation, etc.

• This API also the ability to subscribe for notification of changes to

selected values.

24

Web UI Framework

25

Web UI Framework

• The Web UI framework provides tools such as widgets, events,

effects, and animations, for web application development. Widgets

includes things like Button, Checkbox, Gallery, Popup, Progress Bar,

and so on.

• In the Tizen Web UI framework, the application page structure is

based on jQuery Mobile.

26

Web UI Framework

The Web UI framework consists of the following services:

Web widgets

Tizen widgets, such as control bar and virtual list, and jQuery Mobile widgets are

available.

Web themes

CSS themes and resources for Tizen widgets are available.

Loader

Configurations such as Web theme and internationalization set-up, can be loaded.

27

Tizen SDK

28

Tizen SDK Overview

The Tizen SDK includes the following for creating both native and web applications:

Tools

IDE for app development

Emulator (virtual machine)

Web simulator

Documentation

Complete API documentation

Sample apps

Developer tutorials

29

Web IDE • Based on eclipse

• HTML/JS/CSS content creation

• Syntax highlighting/Syntax checking

• HTML/CSS previews

• JS Minifying/Beatifying

• Content Assist

• Hover

• Access API documentation from within the code

• Auto-completion

30

Event Injector

• Emulate custom events

• Battery level

• Peripherals

• USB, headphone

• Sensors

• Accelerometer, Gyroscope,

• Proximity, light.

• Telephony

• SMS Messages, Calls

• Supports CLI

31

Connection Explorer

• Manage connected devices

• File Explorer

• tree-view

• Transfer files

• send/receive by drag and drop

• File operations

• create/delete/rename

32

UI Builder

• File New Tizen Web

Project Template using UI

Builder

• Based on UI Framework

• Drag and Drop

33

Emulator • QEMU-based

• Multiple platforms (Linux/Windows/Mac)

• Multiple configurations (screen resolution & RAM

size)

• HW Acceleration (CPU/GPU)

• Event Injector (Integrated in IDE)

34

Remote Inspector

• Javascript debugger based on Webkit’s web inspector

• Runs on Google Chrome

• Inspect styles

• DOM inspection

• Resources

• Debug JS

• Console Log

35

Simulator • Based on Ripple-UI Framework

• Simulates Tizen Web APIs

• orientation/zooming

• system info

• Geolocation

• Sensor

• Communication

• Power management

• Network

• Notification

• Package and app

• Configurable Panels

36

Tizen Application Development Process

37

Creating a Tizen web app

38

Setup

Setting up the environment

• Download the SDK and SDK image

• https://developer.tizen.org/downloads/tizen-sdk

• Ubuntu (32bit/64bit), Windows XP, Windows 7(32bit/64bit), Mac OSX

• Install Install Manager and SDK Image

• Run certificate generator

39

New project

• File New Tizen Web Project Choose a template

40

Existing Sample Application

• File New Tizen Web Project Sample application

41

Project Structure

• Content

• index.html

• Javascript

• CSS

• Application icon

• config.xml

• Tizen-web-ui-fw

• Packaging and Signing

• .wgt extension

• W3C Web Widget specification

42

Template index.html

main.js

43

UI Builder

44

Config.xml

45

API Access

46

Create a emulator image

47

Running in Emulator

48

Running in Simulator

49

Manual Installation

• Download a Tizen IVI 2.0 liveusb image

• http://download.tizen.org/releases/milestone/2.0/

• Build and package web app (generate and sign wgt)

• Copy to image

• scp <path to .wgt file> root@192.168.1.101:/opt/home/root/

• Use wrt-installer to install to a device

• #ssh root@192.168.1.101

• wrt-installer –i myapp.wgt

• wrt-launcher -l

• wrt-client -l <app_id>

50

Questions

51

Contact Info

Brian Jones – brian.j.jones@intel.com

Jimmy Huang – jimmy.huang@intel.com