Your Logo
Developing apps for
Samsung SmartTV
Presenter: Tuan Nguyen, Ph.D.
University of Information Technology
tuanna@ui...
Your Logo
Agenda
2
1 Introduction to Samsung
SmartTV SDK
2 Core technologies for SmartTV:
HTML5, CSS3, and Javascript
3 Ad...
Your Logo
INTRODUCTION TO SAMSUNG
SMARTTV & SDK
Section 1
3
Your Logo
Kiến trúc Samsung SmartTV
4
Your Logo
Cấu trúc & Kiến trúc ứng dụng
trên SmartTV
5
Application ArchitectureApplication Structure
Web applications
with...
Your Logo
6
Giao diện SmartTV IDE
• Based on
Eclipse IDE
– Project
Explorer
– Visual editor
– Outline
– Text editor
Your Logo
Giao diện SmartTV IDE (cont)
• Diagram
• Pallete
• Property
7
Your Logo
Cài đặt SDK
• Download SDK: Version 4.1
– http://www.samsungdforum.com/Devtools/SdkA
rchive
– SDK for Win 7, Mac...
Your Logo
Một số lưu ý khi cài SDK
• Windows 7
– Java SDK (32bit)
– Cài DirectX
– Cài Virtual Box
9
• MacOSX
– Boot Mac dư...
Bấm giữ phím 32 để boot MacOSX 32
bit
• Sau khi boot xong, kiểm tra bằng lệnh uname
10
Your Logo
What is new in Samsung
SmartTV SDK 4.1 ?
• Native Input Method
Editor
• App&Service
Panel Support
• Smart Intera...
Your Logo
Quy trình phát triển Apps
12
Your Logo
Hello World Application
• File  New  Projects…  Samsung Smart
TV Basic App Project
• Project Name:
– HelloWor...
Your Logo
Hello World Project
Your Logo
CORE TECHNOLOGIES FOR SMARTTV:
HTML5, CSS3, AND JAVASCRIPT
Section 2
15
Your Logo
HTML5
• HTML5 là một sự hợp tác giữa World Wide Web
Consortium (W3C) và the Web Hypertext Application
Technology...
Your Logo
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...
Your Logo
• 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 p...
Your Logo
Ví dụ HTML5
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type...
Your Logo
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 ...
Your Logo
Thuộc tính của CSS3
21
Your Logo
CSS3 modules
• CSS3 được chia thành modules
– The Box Model
– Lists Module
– Hyperlink Presentation
– Speech Mod...
Your Logo
Cấu trúc CSS Style
• Một cấu trúc CSS có dạng như sau:
selector {
property: value;
property: value;
}
23
Your Logo
4 cách dùng CSS
24
• Liên kết vào file CSS
<link rel="stylesheet"
type="text/css"
href="mystyles.css"
media="scr...
Your Logo
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 c...
Your Logo
Javascript
• Là một Scripting language,hướng đối tượng
• Lightweight programming language phát triển bởi
Netscap...
Your Logo
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 t...
Your Logo
Document Object Model - DOM
28
window
documenteventframe history location navigator screen
document form image l...
Your Logo
Samsung APIs
• Web Device API
• Device API
• Convergence API
• AllShare API
29
• Apps Framework
• Common Modules...
Your Logo
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ốn...
Your Logo
AllShare API Reference
31
• AllShare API có thể được định nghĩa như một
giao diện ứng dụng mà một ứng dụng widge...
Your Logo
ADOBE CREATIVE SUITE 6
Section 3
32
Your Logo
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
ản...
Your Logo
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...
Your Logo
Flash Pro
35
Your Logo
Giao diện Flash Builder
36
Your Logo
Tạo Flash App Project
• New project  Samsung Smart TV App Project
37
Your Logo
Chọn file flash để import
• Khai báo flash file name và đường dẫn.
38
Your Logo
Ví dụ: App mẫu của Samsung
• Link download
http://samsungdforum.com/Guide/tut00081
/index.html
39
Your Logo
ADVANCED APPLICATION:
1. GESTURE RECOGNITION
2. VIDEO ON DEMAND
Section 4
40
Your Logo
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 Visi...
Your Logo
Thử các hành vi trên emulator
• Gesture
Recognition
42
http://www.samsungdforum.com/Guide/d01/index.html
Kiểm tra Gesture Recognition
• Checking for Recognition support
if (webapis.recognition.IsRecognitionSupported()) {
if
(we...
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...
Your Logo
Xử lý sự kiện
45
handleRecognitionEvent: function (evt)
{
var delta, degree;
switch (evt.eventtype) {
case "EVEN...
Your Logo
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, Fl...
Your Logo
DEMONSTRATION, Q&A
Section 5
47
CHÚC CÁC BẠN THÀNH CÔNG
XIN CHÂN THÀNH CÁM ƠN
Thông tin liên hệ:
Giảng viên: TS....
Upcoming SlideShare
Loading in...5
×

WinStore.vn | Tài liệu tập huấn lập trình ứng dụng cho Samsung Smart TV

1,374
-1

Published on

http://winstore.vn/home/training-phat-trien-ung-dung-samsung-smart-tv/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,374
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Dr Tuan A. Nguyen is a Lecturer at the Faculty of Computer networks and Communications, University of Information Technology in Ho Chi Minh City Vietnam. He has been awarded a Ph.D. degree in Computer Science from La Trobe University, Victoria, Australia, in 2012. He received the Bachelor’s degree in Computer Engineering from Polytechnic University of Ho Chi Minh City, 2000. In 2004, he received the Master degree in Computer Science from University of Natural Science, Ho Chi Minh City, Vietnam. His research interests are in the areas of mobile and ubiquitous computing, knowledge engineering, semantic web, agents technology, and human computer interaction. He can be contacted via email: tuanna@uit.edu.vn, or via Google search: “tuan nguyen uit”, his facebook page is: www.facebook.com/tuannguyenuit
  • Activity Recognitionhttp://tuanubicom.blogspot.com/2013/06/samsungsmarttv.html
  • Native Input Method (On Screen Keyboard)
  • Nói tóm lại, Flash Builder là bộ công cụ cho việc lập trình giao diện với mục tiêu chính là tạo, đọc, cập nhật và xóa dữ liệu. Nó cung cấp cho lập trình viên những công cụ truy xuất dữ liệu và nhiều tính năng cực kỳ khó khăn, nếu không muốn nói là không thể làm được với Flash Pro
  • WinStore.vn | Tài liệu tập huấn lập trình ứng dụng cho Samsung Smart TV

    1. 1. Your Logo Developing apps for Samsung SmartTV Presenter: Tuan Nguyen, Ph.D. University of Information Technology tuanna@uit.edu.vn Google: tuan nguyen uit, tuanubicom www.facebook.com/tuannguyenuit
    2. 2. Your Logo Agenda 2 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
    3. 3. Your Logo INTRODUCTION TO SAMSUNG SMARTTV & SDK Section 1 3
    4. 4. Your Logo Kiến trúc Samsung SmartTV 4
    5. 5. Your Logo Cấu trúc & Kiến trúc ứng dụng trên SmartTV 5 Application ArchitectureApplication Structure Web applications with enhanced APIs from Samsung
    6. 6. Your Logo 6 Giao diện SmartTV IDE • Based on Eclipse IDE – Project Explorer – Visual editor – Outline – Text editor
    7. 7. Your Logo Giao diện SmartTV IDE (cont) • Diagram • Pallete • Property 7
    8. 8. Your Logo Cài đặt SDK • Download SDK: Version 4.1 – http://www.samsungdforum.com/Devtools/SdkA rchive – 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 8
    9. 9. Your Logo Một số lưu ý khi cài SDK • Windows 7 – Java SDK (32bit) – Cài DirectX – Cài Virtual Box 9 • 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
    10. 10. Bấm giữ phím 32 để boot MacOSX 32 bit • Sau khi boot xong, kiểm tra bằng lệnh uname 10
    11. 11. Your Logo 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) 11 • AdHub Support • UniPlayer • Service Extension Framework • Convergence Framework • OCI - Open Convergence Interface: MIDI support • Flash 11.1
    12. 12. Your Logo Quy trình phát triển Apps 12
    13. 13. Your Logo Hello World Application • File  New  Projects…  Samsung Smart TV Basic App Project • Project Name: – HelloWorld • Project template – Light Color 13
    14. 14. Your Logo Hello World Project
    15. 15. Your Logo CORE TECHNOLOGIES FOR SMARTTV: HTML5, CSS3, AND JAVASCRIPT Section 2 15
    16. 16. Your Logo 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 16
    17. 17. Your Logo 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 17
    18. 18. Your Logo • 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) 18 Browser support
    19. 19. Your Logo 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> 19 http://html5demos.com/
    20. 20. Your Logo 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 20
    21. 21. Your Logo Thuộc tính của CSS3 21
    22. 22. Your Logo 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 22 http://designshack.net/articles/introduction-to-css3-part-1-what-is-it/
    23. 23. Your Logo Cấu trúc CSS Style • Một cấu trúc CSS có dạng như sau: selector { property: value; property: value; } 23
    24. 24. Your Logo 4 cách dùng CSS 24 • 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;backgr ound:black;">This is a red heading with a black background</h2> • Import CSS bên trong CSS (lồng nhau) @import "newstyles.css";
    25. 25. Your Logo 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) 25
    26. 26. Your Logo 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 26
    27. 27. Your Logo 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. 27
    28. 28. Your Logo Document Object Model - DOM 28 window documenteventframe history location navigator screen document form image link style taganchor button checkbox radio reset selectinput submit textarea
    29. 29. Your Logo Samsung APIs • Web Device API • Device API • Convergence API • AllShare API 29 • Apps Framework • Common Modules API • SEF Plugin API http://www.samsungdforum.com/upload_files /files/guide/data/html/html_3/api_reference/j avascript_apis/javascript_apis_cover.html
    30. 30. Your Logo 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> 30 http://www.samsungdforum.com/upload_files/ files/guide/data/html/html_3/api_reference/ja vascript_apis/web_device_api/web_device_api .html
    31. 31. Your Logo AllShare API Reference 31 • 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
    32. 32. Your Logo ADOBE CREATIVE SUITE 6 Section 3 32
    33. 33. Your Logo 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). 33
    34. 34. Your Logo 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 34 • 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.
    35. 35. Your Logo Flash Pro 35
    36. 36. Your Logo Giao diện Flash Builder 36
    37. 37. Your Logo Tạo Flash App Project • New project  Samsung Smart TV App Project 37
    38. 38. Your Logo Chọn file flash để import • Khai báo flash file name và đường dẫn. 38
    39. 39. Your Logo Ví dụ: App mẫu của Samsung • Link download http://samsungdforum.com/Guide/tut00081 /index.html 39
    40. 40. Your Logo ADVANCED APPLICATION: 1. GESTURE RECOGNITION 2. VIDEO ON DEMAND Section 4 40
    41. 41. Your Logo 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 41
    42. 42. Your Logo Thử các hành vi trên emulator • Gesture Recognition 42 http://www.samsungdforum.com/Guide/d01/index.html
    43. 43. Kiểm tra Gesture Recognition • Checking for Recognition support if (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"); } 43
    44. 44. 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. 44
    45. 45. Your Logo Xử lý sự kiện 45 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.mainHel pbarTwoHand, 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; } }
    46. 46. Your Logo 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. 46 SÁNG TẠO, THÔNG MINH, KỸ THUẬT
    47. 47. Your Logo DEMONSTRATION, Q&A Section 5 47 CHÚC CÁC BẠN THÀNH CÔNG XIN CHÂN THÀNH CÁM ƠN Thông tin liên hệ: Giảng viên: TS. Nguyễn Anh Tuấn , tuanna@uit.edu.vn , 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, vinhnt@uit.edu.vn, 0121 771 0002 2. KS. Nguyễn Văn Thiệu , vanthieuuit@gmail.com, 097 723 1048
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×