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

Outline 暨南大學 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

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

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 暨南大學

Data Source: 暨南大學

Data Source: 暨南大學

Google Play 暨南大學

App Store 暨南大學

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 暨南大學

Web Browsing 暨南大學 10

Web App (1) 暨南大學 11

Web App (2) 暨南大學 12

Web App (3) 暨南大學 13

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 暨南大學

15 Data Source:

Native App – Interaction with Mobile Device 暨南大學 16 Data Source:

Web App – Interaction with Mobile Device 暨南大學 17 Data Source:

Hybrid App – Interaction with Mobile Device 暨南大學 18 Data Source:

Tradeoff between Different Approaches 暨南大學 19 Data Source:

Outline 暨南大學 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

Mobile Web App & HTML 暨南大學 21 Data source:

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

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

HTML5: Web Storage 暨南大學 24 Data source:

HTML5: Web SQL Database 暨南大學 25 Data source:

HTML5: Application Cache 暨南大學 26 Data source:

HTML5: WebSocket 暨南大學 27 Data source:

HTML5: FileSystem APIs 暨南大學 28 Data source:

HTML5: Geolocation 暨南大學 29 Data source:

HTML5: Device Orientation 暨南大學 30 Data source:

HTML5: Better semantic tags 暨南大學 31 Data source:

HTML5: New form types 暨南大學 32 Data source:

HTML5: Form field types on mobile 暨南大學 33 Data source:

HTML5: Audio + Video 暨南大學 34 Data source:

HTML5: Canvas 2D 暨南大學 35 Data source:

HTML5: Canvas 3D 暨南大學 36 Data source:

HTML5: CSS Selectors 暨南大學 37 Data source:

HTML5: CSS-Columns 暨南大學 38 Data source:

Outline 暨南大學 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

Multiple Mobile JavaScript Framework 暨南大學 40 Data source:

Two Popular Mobile JavaScript Frameworks 暨南大學 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

Sencha Touch 暨南大學 42

Sencha Touch 暨南大學 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.

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

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

Sencha Touch: Application Framework 暨南大學 46

Sencha Touch: Application Framework 暨南大學 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

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

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

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

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

Outline 暨南大學 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

Case Study: 暨南大學 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

暨南大學 55

暨南大學 56

暨南大學 57

暨南大學 58