1. 丁建文 國立高雄應用科大資管系副教授 兼任計網中心軟體發展組組長 跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 1 2012.04.12 暨南大學

2. Outline 2012.04.12 暨南大學 2 Four Types of Mobile Apps Mobile Native App Mobile Web Browsing Mobile Web App Hybrid HTML5 HTML + CSS + JavaScript Mobile JavaScript Framework Sencha Touch Case Study iMeeting@KUAS

3. Four Types of Mobile Apps Mobile Native App Mobile Web Browsing Mobile Web App Hybrid 3 2012.04.12 暨南大學

4. Four Types of Mobile Apps (1) Mobile Native App Source Code > Compiler > Binary executable file iOS: Objective-C Android: Java Windows Phone: C#, VB.NET Make use of operating-system APIs Put on popular app store (such as Apple Store and Google Play) Downloaded and stored on the file system of the mobile device No need for web browser 4 2012.04.12 暨南大學

5. Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development 5 2012.04.12 暨南大學

6. Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development 6 2012.04.12 暨南大學

7. Google Play 7 2012.04.12 暨南大學

8. App Store 8 2012.04.12 暨南大學

9. Four Types of Mobile Apps (2) Mobile Web Browsing Visited by web browser Generic look and feel Server-side rendering (3) Mobile Web App Written by HTML5 (explained latter) Installed and launched Touch optimized look and feel Client-side rendering 9 2012.04.12 暨南大學

10. Web Browsing 2012.04.12 暨南大學 10

11. Web App (1) 2012.04.12 暨南大學 11

12. Web App (2) 2012.04.12 暨南大學 12

13. Web App (3) 2012.04.12 暨南大學 13

14. Four Types of Mobile Apps (4) Hybrid A Hybrid App is a native app with embedded HTML It has all the benefits of native apps: full access to APIs, app store presence, etc. Selected portions of the app are written using web technologies The web portions of the app can either be downloaded from the web or packaged within the app 14 2012.04.12 暨南大學

15. 15 Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

16. Native App – Interaction with Mobile Device 2012.04.12 暨南大學 16 Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

17. Web App – Interaction with Mobile Device 2012.04.12 暨南大學 17 Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

18. Hybrid App – Interaction with Mobile Device 2012.04.12 暨南大學 18 Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

19. Tradeoff between Different Approaches 2012.04.12 暨南大學 19 Data Source: http://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-developmenthttp://www.worklight.com/resources/webinars-and-tools/native-web-hybrid-mobile-app-development

20. Outline 2012.04.12 暨南大學 20 Four Types of Mobile Apps Mobile Native App Mobile Web Browsing Mobile Web App Hybrid HTML5 HTML + CSS + JavaScript Mobile JavaScript Framework Sencha Touch Case Study iMeeting@KUAS

21. Mobile Web App & HTML5 2012.04.12 暨南大學 21 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

22. What is HTML5? 2012.04.12 暨南大學 22 HTML5 = HTML + CSS + JavaScript

23. HTML5 Capability 2012.04.12 暨南大學 23 Offline / Storage Realtime / Communication File / Hardware Access Semantics & Markup Graphics / Multimedia CSS3

24. HTML5: Web Storage 2012.04.12 暨南大學 24 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

25. HTML5: Web SQL Database 2012.04.12 暨南大學 25 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

26. HTML5: Application Cache 2012.04.12 暨南大學 26 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

27. HTML5: WebSocket 2012.04.12 暨南大學 27 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

28. HTML5: FileSystem APIs 2012.04.12 暨南大學 28 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

29. HTML5: Geolocation 2012.04.12 暨南大學 29 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

30. HTML5: Device Orientation 2012.04.12 暨南大學 30 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

31. HTML5: Better semantic tags 2012.04.12 暨南大學 31 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

32. HTML5: New form types 2012.04.12 暨南大學 32 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

33. HTML5: Form field types on mobile 2012.04.12 暨南大學 33 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

34. HTML5: Audio + Video 2012.04.12 暨南大學 34 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

35. HTML5: Canvas 2D 2012.04.12 暨南大學 35 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

36. HTML5: Canvas 3D 2012.04.12 暨南大學 36 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

37. HTML5: CSS Selectors 2012.04.12 暨南大學 37 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

38. HTML5: CSS-Columns 2012.04.12 暨南大學 38 Data source: http://slides.html5rocks.comhttp://slides.html5rocks.com

39. Outline 2012.04.12 暨南大學 39 Four Types of Mobile Apps Mobile Native App Mobile Web Browsing Mobile Web App Hybrid HTML5 HTML + CSS + JavaScript Mobile JavaScript Framework Sencha Touch Case Study iMeeting@KUAS

40. Multiple Mobile JavaScript Framework 2012.04.12 暨南大學 40 Data source: http://en.wikipedia.org/wiki/Multiple_phone_web-based_application_frameworkhttp://en.wikipedia.org/wiki/Multiple_phone_web-based_application_framework

41. Two Popular Mobile JavaScript Frameworks 2012.04.12 暨南大學 41 Sencha Touch A more complex framework It supports a well-defined programming language which is based on HTML5 (HTML+CSS+Javascript) Jquery Mobile A simpler framework An extension of HTML

42. Sencha Touch 2012.04.12 暨南大學 42

43. Sencha Touch 2012.04.12 暨南大學 43 Sencha Touch is a user interface (UI) JavaScript library, or framework, specifically built for Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is fully based on web standards such as HTML5, CSS3 and JavaScript.

44. Sencha Touch: UI Example (1) 2012.04.12 暨南大學 44

45. Sencha Touch: UI Example (2) 2012.04.12 暨南大學 45

46. Sencha Touch: Application Framework 2012.04.12 暨南大學 46

47. Sencha Touch: Application Framework 2012.04.12 暨南大學 47 Models: represent a type of object in your app - for example an e- commerce app might have models for Users, Products and Orders Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly Stores: are responsible for loading data into your app and power Components like Lists and DataViews Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible

48. Sencha Touch Components (Classes & Objects) 2012.04.12 暨南大學 48

49. 2012.04.12 暨南大學 49 Sencha Touch Components (Classes & Objects)

50. Example of Sencha Touch Component: NestedList 2012.04.12 暨南大學 50

51. Example of Sencha Touch Component: NestedList 2012.04.12 暨南大學 51

52. Outline 2012.04.12 暨南大學 52 Four Types of Mobile Apps Mobile Native App Mobile Web Browsing Mobile Web App Hybrid HTML5 HTML + CSS + JavaScript Mobile JavaScript Framework Sencha Touch Case Study iMeeting@KUAS

53. Case Study: iMeeting@KUAS 2012.04.12 暨南大學 53 校內行政會議： 校長、行政單位一級主管、各系所主任 使用 iPad2 觀看會議資料 Tool: Sencha Touch 2.0 Manpower: 2 programmers Working Time: 2.5 weeks (08:00-22:00) Including: SA+SD+Programming+Testing

54. 2012.04.12 暨南大學 54

55. 2012.04.12 暨南大學 55

56. 2012.04.12 暨南大學 56

57. 2012.04.12 暨南大學 57

58. 2012.04.12 暨南大學 58