Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,717 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×