Samsung Indonesia: Tizen Web Apps
Transcript of 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
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
Introduction Tizen Web Development
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 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
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 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
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 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
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
For details: 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
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 TAU Framework (Tizen Advanced UI Framework)
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
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
• 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”
Developer Workshop TAU Framework (Tizen Advanced UI Framework)
Example of List View Styles Example of Button Styles
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 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
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 Tizen Web Development Toolkit Tizen Simulator
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 Tizen Web Development Toolkit Web Inspector & Dynamic Analyzer
Debugging Analyzing
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
Hands-on Session Tizen Weather Application
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 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
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 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
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 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
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 Creating Tab Navigation Using Tab and Section TAU UI Component Code: Inside <div id=“main”> in index.html Result
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 Add Event Listener when Changing Tabs Code: Inside “$(document).ready(…)” in main.js Result
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 Creating List View 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
Code:
Inside <div id=“sectionchanger”> in index.html
Developer Workshop Web Request Part 1: Add Features & Privileges in Tizen Manifest
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
• Features
– http://tizen.org/feature/network.wifi
– http://tizen.org/feature/network.telephony
• Privileges
– 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
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 Web Request Part 3: Add Request of Current & Forecast Weather
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
Code: Inside Class WeatherAPI in main.js
Developer Workshop Web Request Part 4: Trigger the request when changing tabs
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
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
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
• Features
– http://tizen.org/feature/location.gps
• Privileges
– http://tizen.org/privilege/location
Code: Inside Class GeolocationAPI in main.js
Developer Workshop Providing Fake Geolocation
Tizen Simulator
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
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
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 Creating Popup & Toast Code: Inside “$(document).ready(…)” in Main.js Result
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
• 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
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
• Add click event handling to remove localStorage
• Add localStorage to save popup state (first time popup)
Developer Workshop Project Result 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
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
The End – Thank You Completed source code of this workshop can be download at:
http://tinyurl.com/TizenWeatherComplete
Developer Workshop
Backup Slide