samsung indonesia: tizen web apps

Developer Workshop

Hands-On: Building Weather Application using Tizen Web

Peradnya Dinata [email protected]

Samsung Research and Development Institute Indonesia (SRIN)

Slide URL: http://tinyurl.com/TizenWebWorkshop2016

Developer Workshop Agenda • Pre-Requisites

• Introduction

– Why & When using Tizen Web – Tizen Web API – TAU Framework – Tizen Web Development Toolkit

• Workshop Hands-on – Project Structure – Project Manifest – Creating Tab Navigation – Creating List View – Web Request – Get Geolocation Information – Creating Popup & Toast – Web Local Storage

• Open Discussion

Pre-Requisites

Introduction

Why & When using Tizen Web

Tizen Web API

TAU Framework

Tizen Web Development Toolkit

Workshop Hands-on

Project Structure

Project Manifest

Creating Tab Navigation

Creating List View

Web Request

Get Geolocation Information

Creating Popup & Toast

Web Local Storage

Open Discussion

Developer Workshop Pre-requisites

• Java 8 SDK (for Tizen IDE)

• Tizen SDK 2.4 (Latest Revision) – https://developer.tizen.org/development/tools/download

• In Tizen Update Manager, Please Install (in 2.4 Mobile): – Emulator – Web app. Development (CLI & IDE) – TAU (CLI & IDE)

• Latest Google Chrome (for Tizen Simulator)

• Tizen Weather Project – Skeleton: http://tinyurl.com/TizenWeatherSkeleton – Complete: http://tinyurl.com/TizenWeatherComplete

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

https://developer.tizen.org/development/tools/download

http://tinyurl.com/TizenWeatherSkeleton

http://tinyurl.com/TizenWeatherSkeleton

http://tinyurl.com/TizenWeatherComplete

Developer Workshop

Introduction Tizen Web Development

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Why & When Using Tizen Web ?

• Easy to code!

• Can use many existing web libraries (ex: AngularJS, JQuery, etc.)

• High customizable (via CSS & JS)

• High Compatibility (via Webkit as intermediate layer)

• Apps that not compute intensive

• If you want to use your code in another platform (maybe by using Apache Cordova)

• If you don’t know how to code in C/C++

Why ? When ?

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web API

W3C HTML5

Tizen Device

API

Tizen Web API

• W3C/HTML5 API

– API that supported by HTML5 compliance browser

• Tizen Device API

– API that only supported by Tizen Platform

• Developer Guide

– https://developer.tizen.org/dev-guide/2.4/

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

https://developer.tizen.org/dev-guide/2.4/




Developer Workshop Tizen Web API

• Base • Account • Application Framework

– Package, Application, etc.

• Content • Messaging • Multimedia • Network

– Bluetooth, NFC (if available)

• Social – Contact, bookmark, etc.

• System – Setting, sensor, power, etc.

• DOM, Form, & Styles • Device • Graphics • Media • Communication

– Web Socket API

• Storage – Web Storage, File API

• Security • UI • Performance

– Web Worker

• Location • Widget • Supplementary

– WebGL

Tizen Device API

W3C/HTML5 Standard API

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

For details: https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/tizen-apis

https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/tizen-apis











Developer Workshop TAU Framework (Tizen Advanced UI Framework)

• Like Bootstrap, TAU Framework provides: – Tizen UI components (ex: button, list, etc.) – Page routing – Event, Animation, and Effect – Compatibility with JQuery

• Good References to About TAU Framework (2.4): – TAU Framework Practices

• https://developer.tizen.org/dev-guide/2.4/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm

– TAU Framework Documentation • https://developer.tizen.org/dev-

guide/2.4/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

https://developer.tizen.org/dev-guide/2.4/org.tizen.ui.practices/html/web/tau/guides_tau_w.htm



https://developer.tizen.org/dev-guide/2.4/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm





UI Components Tizen Version (Since)

Button 2.0

Checkbox 2.4

Colored List View

2.4

Drawer 2.3

Dropdown Menu

2.4

Expandable 2.4

Floating Actions 2.4

Grid View 2.4

Index Scrollbar 2.4

List View 2.0

Navigation 2.3

UI Components Tizen Version (Since)

Page Indicator 2.4

Panel Changer 2.4

Popup 2.0

Progress 2.0

Radio 2.4

Search Input 2.4

Section Changer 2.4

Slider 2.0

Tabs 2.4

Text Enveloper 2.4

Text Input 2.0

Toggle Switch 2.0

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

• There are 23 UI Components that supported by TAU 2.4

• Example of TAU UI Component can be found at:

1. New Tizen Web Project

2. Click “Tizen Online Example”

3. Click “Tizen TAU Component”


Example of List View Styles Example of Button Styles

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Development Toolkits

• Tizen Simulator (Run Mode) – The fastest way to run/test your Tizen Web code – Need Google Chrome™ to run simulator

• Web Inspector (Debug Mode) – Inspect element, resource, or network request/response of your Tizen Web

code. The feel is similar to Google Chrome™ Web Inspector. – Best for debugging JS code, show payload of response.

• Dynamic Analyzer (Profile Mode) – Inspect CPU usage, memory usage, GPU usage, Energy usage, etc. – Best for finding bottleneck or optimizing apps

• In-Build Checker, Beautifier, and Minifier – For HTML, CSS, and JS

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Development Toolkit Tizen Simulator

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Development Toolkit Web Inspector & Dynamic Analyzer

Debugging Analyzing

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop

Hands-on Session Tizen Weather Application

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Project Structure

• /css – Dir. to place CSS files

• /js – Dir. to place JS files

• /lib – Dir. to place JS Lib files

• /lib/tau – Dir. of TAU (Tizen Advanced

UI) Framework

• /index.html – Tizen Web Main Page

• /config.xml – Tizen Web Manifest

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Project Manifest

• Overview – General Information

• Widget – Specific Information

• Features – Declare required features

• Privileges – Declare required API accesses

• Policy – Declare required URL accesses

• Localization • Preferences • Tizen

– Build Parameter

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Tizen Web Project Manifest

• API Privileges Detail:

– https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/security-and-api-privileges

• Tizen Web Features Detail:

– https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/application-filtering

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/security-and-api-privileges















https://developer.tizen.org/development/getting-started/web-application/understanding-tizen-programming/application-filtering











Developer Workshop Creating Tab Navigation Using Tab and Section TAU UI Component Code: Inside <div id=“main”> in index.html Result

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Add Event Listener when Changing Tabs Code: Inside “$(document).ready(…)” in main.js Result

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Creating List View Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Code:

Inside <div id=“sectionchanger”> in index.html

Developer Workshop Web Request Part 1: Add Features & Privileges in Tizen Manifest

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

• Features

– http://tizen.org/feature/network.wifi

– http://tizen.org/feature/network.telephony

• Privileges

– http://tizen.org/privilege/internet

http://tizen.org/feature/network.wifi

http://tizen.org/feature/network.telephony

http://tizen.org/privilege/internet

Developer Workshop Web Request Part 2: Add Access Policy in Tizen Manifest

• Allow web application to access whitelisted URL. – Solve cross-origin problem

• How to Add Whitelist ?

1. Open Config.xml (Tizen Manifest)

2. Click “Policy” tab 3. Click “Add” in access section

• To open the access for all network URLs: – Network URL: “*” – Allow subdomain: true

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Web Request Part 3: Add Request of Current & Forecast Weather

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Code: Inside Class WeatherAPI in main.js

Developer Workshop Web Request Part 4: Trigger the request when changing tabs

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Code: Inside “$(document).ready(…)” in main.js

As Default GPS Value

Developer Workshop Get Geolocation Information Trigger the GeolocationAPI when apps started

Code: Inside “$(document).ready(…)” in main.js

Tizen Manifest Settings

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

• Features

– http://tizen.org/feature/location.gps

• Privileges

– http://tizen.org/privilege/location

Code: Inside Class GeolocationAPI in main.js

http://tizen.org/feature/location.gps

http://tizen.org/feature/location.gps

http://tizen.org/privilege/location

http://tizen.org/privilege/location

Developer Workshop Providing Fake Geolocation

Tizen Simulator

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Tizen Emulator

Developer Workshop Creating Popup & Toast

• Popup will be showing when user starting the app for the first time

• Toast will be use as notification for clearing webStorage

Code: Inside <div id=“main”> in index.html Info

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop Creating Popup & Toast Code: Inside “$(document).ready(…)” in Main.js Result

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

• Register popup and toast

Developer Workshop Web Local Storage Implementing Web Local Storage into Popup Code: Inside “$(document).ready(…)” in Main.js

Result

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

• Add click event handling to remove localStorage

• Add localStorage to save popup state (first time popup)

Developer Workshop Project Result Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop

Open Discussion

Pre-Requisites

Introduction


Tizen Web API

TAU Framework


Workshop Hands-on

Project Structure

Project Manifest


Creating List View

Web Request



Web Local Storage

Open Discussion

Developer Workshop

The End – Thank You Completed source code of this workshop can be download at:

http://tinyurl.com/TizenWeatherComplete

Developer Workshop

Backup Slide

samsung indonesia: tizen web apps

Software