Embed Size (px)
DESCRIPTION
http://winstore.vn/home/training-phat-trien-ung-dung-samsung-smart-tv/
Citation preview
Your Logo
Developing apps for Samsung SmartTV Presenter: Tuan Nguyen, Ph.D. University of Information Technology [email protected] Google: tuan nguyen uit, tuanubicom
www.facebook.com/tuannguyenuit
Your Logo2
Agenda
1 Introduction to Samsung SmartTV SDK
2 Core technologies for SmartTV: HTML5, CSS3, and Javascript
3 Adobe Creative Suite 6
4 Advanced application: Video on Demand
5 Demonstration, Q&A
Tuan Nguyen Ubicom, http://tuanubicom.blogspot.com
Your Logo3
INTRODUCTION TO SAMSUNG SMARTTV & SDK
Section 1
Your Logo4
Kiến trúc Samsung SmartTV
Your Logo5
Cấu trúc & Kiến trúc ứng dụng trên SmartTV
Application ArchitectureApplication Structure
Web applications with enhanced APIs
from Samsung
Your Logo6
Giao diện SmartTV IDE• Based on
Eclipse IDE– Project
Explorer– Visual editor– Outline– Text editor
Your Logo7
Giao diện SmartTV IDE (cont)• Diagram • Pallete• Property
Your Logo8
Cài đặt SDK
• Download SDK: Version 4.1 – http://
www.samsungdforum.com/Devtools/SdkArchive – SDK for Win 7, MacOSX, SDK Emulator Image for
Virtual Box – Cài DirectX 2010.
http://www.microsoft.com/en-us/download/details.aspx?id=9033
Your Logo9
Một số lưu ý khi cài SDK
• Windows 7– Java SDK (32bit)– Cài DirectX – Cài Virtual Box
• MacOSX – Boot Mac dưới mode
32 bit • Giữ phím 3,2 trên bàn
phím • Test uname –a
– Cài SDK bình thường
Bấm giữ phím 32 để boot MacOSX 32 bit
• Sau khi boot xong, kiểm tra bằng lệnh uname
Your Logo11
What is new in Samsung SmartTV SDK 4.1 ?
• Native Input Method Editor
• App&Service Panel Support
• Smart Interaction: Gesture events, Gesture Simulator.
• 2013 App Engine (HTML5 Video/Audio, WebSocket, WebGL)
• AdHub Support• UniPlayer• Service Extension
Framework• Convergence Framework• OCI - Open Convergence
Interface: MIDI support• Flash 11.1
Your Logo12
Quy trình phát triển Apps
Your Logo13
Hello World Application
• File New Projects… Samsung Smart TV Basic App Project
• Project Name: – HelloWorld
• Project template – Light Color
Your Logo
Hello World Project
Your Logo15
CORE TECHNOLOGIES FOR SMARTTV: HTML5, CSS3, AND JAVASCRIPT
Section 2
Your Logo16
HTML5
• HTML5 là một sự hợp tác giữa World Wide Web Consortium (W3C) và the Web Hypertext Application Technology Working Group (WHATWG) để tạo ra một phiên bản mới của HTML. – Các tính năng mới phải dựa trên HTML, CSS, DOM, và
JavaScript– Giảm thiểu sự phụ thuộc các plugins ngoại (như Flash)– Xử lý lỗi tốt hơn, – Nhiều tags hơn thay vì dùng scripts – HTML5 phải độc lập thiết bị – Quá trình phát triển phải cho cho công chúng thấy.
• HTML5 vẫn đang trong quá trình hoàn thiện
Your Logo17
Các tính năng mới của HTML5
• Cung cấp thành phần canvas cho vẽ hình • Cung cấp thành phần âm thanh và video cho
việc trình chiếu media. • Hỗ trợ offline storage • Một số form điều khiển khác như caledar,
time, date, email, url, search
Your Logo18
• HTML5 vẫn chưa có công bố chính thức và chưa có browsers nào hoàn toàn hỗ trợ HTML5
• Tuy nhiên, các browser phổ biến như Chrome, Firefox, Opera, IE, đã có những hỗ trợ cho HTML5 (http://html5test.com)
Browser support
Your Logo19
Ví dụ HTML5
<!DOCTYPE HTML><html><body><video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video></body></html>
http://html5demos.com/
Your Logo20
CSS3
• “CSS” - Cascading Style Sheets, là một markup language dạng web dùng để mô tả giao diện và định dạng của một website trên browser.
• Thông thường CSS có thể được dùng trong HTML, XHTML, nhưng có thể có trong XML, SVG
• “CSS3” nghĩa là CSS phiên bản 3. » Năm 1997-2001 CSS1 » Năm 2001-2006 CSS2 » Năm 2007-đến nay CS3
Your Logo21
Thuộc tính của CSS3
Your Logo22
CSS3 modules
• CSS3 được chia thành modules– The Box Model – Lists Module – Hyperlink Presentation – Speech Module – Backgrounds and Borders – Text Effects – Multi-Column Layout
http://designshack.net/articles/introduction-to-css3-part-1-what-is-it/
Your Logo23
Cấu trúc CSS Style
• Một cấu trúc CSS có dạng như sau: selector {
property: value;property: value;
}
Your Logo24
4 cách dùng CSS
• Liên kết vào file CSS <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
• Nhúng trong file HTML <style type="text/css"> CSS code is typed here </style>
• Chèn trực tiếp vào tags<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
• Import CSS bên trong CSS (lồng nhau)
@import "newstyles.css";
Your Logo25
Dùng CSS trong SDK
• Các thư mục mặc định của app– Htmls– Scenes– Stylesheets
• Lưu ý quan trọng: – SmartTV chạy Linux OS
(Ubuntu) nên nó phân biệt chữ hoa thường (case sensitive)
Your Logo26
Javascript• Là một Scripting language,hướng đối tượng
• Lightweight programming language phát triển bởi Netscape
• Thông dịch, không phải biên dịch• Được thiết kế để nhúng trong browsers
• Dùng để thêm khả năng tương tác cho HTML• Phát hiện loại, phiên bản browser. • Xử lý các đối tượng HTML forms• Tạo cookies• Validate form data• Đọc & ghi các thành phần HTML
Your Logo27
Giới thiệu DOM
• JavaScript sắp xếp các đối tượng trong một Document Object Model or DOM.
• DOM định nghĩa cấu trúc logic của các đối tượng và cách các đối tượng được truy cập và xử lý.
• Mô hình DOM có thể được coi như một hệ thống phân cấp di chuyển từ đối tượng chung nhất để cụ thể nhất.
Your Logo28
Document Object Model - DOM
window window
documentdocumenteventeventframeframe historyhistory locationlocation navigatornavigator screenscreen
documentdocument formform imageimage linklink stylestyle tagtaganchoranchor
buttonbutton checkboxcheckbox radioradio resetreset selectselectinputinput submitsubmit textareatextarea
Your Logo29
Samsung APIs
• Web Device API • Device API• Convergence API • AllShare API
• Apps Framework• Common Modules API• SEF Plugin API
http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/api_reference/javascript_apis/javascript_apis_cover.html
Your Logo30
Web Device API
• Cung cấp khả năng sử dụng các các chức năng SmartTV middleware , chẳng hạn như truy cập hệ thống tập tin, tương tác thông minh, điều khiển video âm thanh <script type="text/javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
http://www.samsungdforum.com/upload_files/files/guide/data/html/html_3/api_reference/javascript_apis/web_device_api/web_device_api.html
Your Logo31
AllShare API Reference• AllShare API có thể được định nghĩa như
một giao diện ứng dụng mà một ứng dụng widget có thể sử dụng một tập hợp các tính năng được cung cấp bởi các thiết bị khác. Bao gồm:• Chia sẻ phương tiện truyền thông
giữa các thiết bị khác nhau• Thiết bị phát hiện được phân phối
trong một mạng gia đình• Cung cấp kiểm soát truy cập đến các
thiết bị được xác định trước khác nhau
Your Logo32
ADOBE CREATIVE SUITE 6Section 3
Your Logo33
Giới thiệu Adobe Flash
• Flash là một nền tảng phần mềm multimedia cho phép tạo ra các ứng dụng hiển thị hình ảnh vector, hoạt hình, các nội dung multimedia và tương tác được chạy trên “Flash player”
• Flash player này có thể được nhúng trong các browser của hệ thống (browser plugin).
Your Logo34
Flash Pro vs Flash Builder• Flash Professional
– Flash Professional là một loạt phần mềm tạo ra các Flash tương tác.
– Flash pro thiên về các thiết kế trực quan
• Flash Builder– Flash Builder (old
name Flex Builder) được xây dựng từ Eclipse IDE chuyên dụng cho phát triển actionscript.
– Flash Builder được thiết kế cho các lập trình viên tạo ra các tác vụ phức tạp hơn cho app mà không thể làm được trong Flash Pro.
Your Logo35
Flash Pro
Your Logo36
Giao diện Flash Builder
Your Logo37
Tạo Flash App Project• New project Samsung Smart TV App Project
Your Logo38
Chọn file flash để import
• Khai báo flash file name và đường dẫn.
Your Logo39
Ví dụ: App mẫu của Samsung
• Link download http://samsungdforum.com/Guide/tut00081/index.html
Your Logo40
ADVANCED APPLICATION: 1. GESTURE RECOGNITION
2. VIDEO ON DEMAND
Section 4
Your Logo41
Nhận dạng cử chỉ trong SDK 4.1
• Gesture Recognition: – Một hướng nghiên cứu mạnh sử dụng kỹ thuật
Computer Vision • Các hành vi mà SDK hỗ trợ
– Nhận dạng bàn tay – Nhận dạng hai tay, like, zoom
Your Logo42
Thử các hành vi trên emulator
• Gesture Recognition
http://www.samsungdforum.com/Guide/d01/index.html
Kiểm tra Gesture Recognition
• Checking for Recognition supportif (webapis.recognition.IsRecognitionSupported()) { if (webapis.recognition.IsGestureRecognitionEnabled()) { // perform Recognition related actions here, //e.g. subscribe to recognition events } else { alert("ERROR: Gesture recognition is not enabled"); } } else { alert("ERROR: Gesture recognition not supported"); }
Các hành vi được nhận dạng • EVENT_GESTURE_BEGIN_MONITOR: được gọi
khi tay đầu tiên của người dùng được phát hiện.• EVENT_GESTURE_SECONDARY_LOST: được gọi
khi tay thứ hai của người dùng ra khỏi vùng nhận diện của camera.
• EVENT_GESTURE_SECONDARY_DETECT: được gọi khi tay thứ hai của người dùng được phát hiện.
• EVENT_GESTURE_2HAND_ZOOM: được gọi khi cử chỉ "zoom in/out" được nhận.
• EVENT_GESTURE_2HAND_ROTATE: được gọi khi cử chỉ xoay được nhận.
• EVENT_GESTURE_LIKE: được đưa ra khi "như" cử chỉ được nhận.
Your Logo45
Xử lý sự kiện handleRecognitionEvent: function (evt) { var delta, degree;
switch (evt.eventtype) { case "EVENT_GESTURE_BEGIN_MONITOR": case "EVENT_GESTURE_SECOND_HAND_LOST": if (this.transformed) { alert("was transformed"); this.transformed = false; Grid.transformation_end(); } this.updateKeyHelpDetailed( this.mainHelpbarOneHand, this.previewHelpbarOneHand, this.hands.ONE); break;
case "EVENT_GESTURE_SECONDARY_DETECT": this.updateKeyHelpDetailed(this.mainHelpbarTwoHand, this.previewHelpbarTwoHand, this.hands.TWO); break;
case "EVENT_GESTURE_2HAND_ZOOM": this.transformation_begin(); var delta = evt.result; Grid.zoom(delta); break; case "EVENT_GESTURE_2HAND_ROTATE": this.transformation_begin(); var degree = evt.result; Grid.rotation(degree); break; case "EVENT_GESTURE_LIKE": Grid.like_photo(); break; } }
Your Logo46
Kết luận• Phát triển ứng dụng trên Smart TV là một kỹ
thuật kết hợp nhuần nhuyễn: – HTML5, CSS3, JavaScript, Flash, …
• Giao diện cực lớn, và sự hỗ trợ multimedia làm Smart TV nổi bật lên so với các nền tảng khác.
• Khả năng nhận dạng hành vi mang lại những trải nghiệm mới lạ cho người dùng.
SÁNG TẠO, THÔNG MINH,
KỸ THUẬT
Your Logo47
DEMONSTRATION, Q&A Section 5
CHÚC CÁC BẠN THÀNH CÔNGXIN CHÂN THÀNH CÁM ƠN
Thông tin liên hệ: Giảng viên: TS. Nguyễn Anh Tuấn , [email protected] , 093 221 5030
Khoa mạng máy tính & Truyền Thông Trường Đại Học Công Nghệ Thông Tin
Trợ giảng: 1. KS. Nguyễn Thành Vinh, [email protected], 0121 771 00022. KS. Nguyễn Văn Thiệu , [email protected], 097 723 1048
