1. Take Advantage of
UIWebView
for
iOS Native App
Developers
Ryan Chung
iOS UIWebView 1 http://MobileDev.TW

2. Ryan Chung (Ryan@iii.org.tw)
• 現任 • 經歷
• 資策會中壢中心課程研發經理 • 工研院電通所嵌入式網站開發
• 資策會中壢中心專任講師 • 經濟部工業局自由軟體推動計畫
• 資策會行動開發學院負責人 • 宜蘭縣政府自由軟體講師
• 學歷 • 平鎮陸軍通訊學校講師
• 台灣科技大學資工所碩士 • 龍潭陸軍總部講師
• 元智大學資訊工程系學士 • 資策會資訊技術訓練中心講師
• 資策會資技中心行動開發導師
• 教授科目
• 資策會資技中心數位學習網管理
• iOS App開發 – Objective-C
• Web App開發 – HTML5/CSS3
iOS UIWebView 2 http://MobileDev.TW

3. 學習、分享與成長
iOS UIWebView 3 http://MobileDev.TW

4. 智慧型手機即將比傳統手機還要多
iOS UIWebView 4 http://MobileDev.TW

5. 多數人的選擇已偏向智慧型手機
iOS UIWebView 5 http://MobileDev.TW

6. 我要智慧型手機幹嘛？
iOS UIWebView 6 http://MobileDev.TW

7. App生態圈
Cloud Service Provider
Customer
Training Center
ADs Seller
Developer Designer
Funder
Platform Holder Incubation Center
Network Admin
iOS UIWebView 7 http://MobileDev.TW

8. App 開發團隊角色
提出
需求
使用者經驗
架構師
圖像設計師
客戶
設計
專案經理
研發
內部
提案
跨平台開發者
企劃
iOS 開發者
Android 開發者
iOS UIWebView 8 http://MobileDev.TW

9. What is App?
行銷手法 趣味娛樂
提供功能 資訊提供
iOS UIWebView 9 http://MobileDev.TW

10. Native App
iOS UIWebView 10 http://MobileDev.TW

11. Web App
iOS UIWebView 11 http://MobileDev.TW

12. Hybrid App
iOS UIWebView 12 http://MobileDev.TW

13. Web App or Native App?
功能 Web App Native App
靜態圖片、文字展示
Ｏ
Ｏ
內容可直接線上更新
O
X
可上架販售
X
O
離線閱覽
X
O
加入主畫面螢幕
O
O
顯示自定啓動圖片
O
O
iOS UIWebView 13 http://MobileDev.TW

14. App1.0
• 將資訊以適合手機瀏覽的方式進行呈現
• 資訊來源可以是網路或是App中
• 例如：
• 百大小吃介紹
• 百大古蹟介紹
• 百大文化介紹 Content
• 百大活動介紹
iOS UIWebView 14 http://MobileDev.TW

15. App2.0
• 結合手機特性與既有資訊，以互動方式提供使用者
內容
• 例如：
• 最近的小吃
• 古蹟合成照相機
Content Device
iOS UIWebView 15 http://MobileDev.TW

16. App3.0
• 將App結合社群平台，提供使用者間的互動橋梁
• 例如：
• 用Facebook登入的聊天室App
• 美食心得分享App
Social
Content Device
iOS UIWebView 16 http://MobileDev.TW

17. How to develop them?
iOS UIWebView 17 http://MobileDev.TW

18. Native App
iOS UIWebView 18 http://MobileDev.TW

19. Web App
iOS UIWebView 19 http://MobileDev.TW

20. Hybrid App
iOS UIWebView 20 http://MobileDev.TW

21. Any other alternatives?
iOS UIWebView 21 http://MobileDev.TW

22. App Inventor
http://www.appinventorbeta.com/
iOS UIWebView 22 http://MobileDev.TW

23. PhoneGap
iOS UIWebView 23 http://MobileDev.TW

24. Titanium
iOS UIWebView 24 http://MobileDev.TW

25. Corona
iOS UIWebView 25 http://MobileDev.TW

26. Flash
iOS UIWebView 26 http://MobileDev.TW

27. Things become easier….
iOS UIWebView 27 http://MobileDev.TW

28. Retain Count? Out!
iOS UIWebView 28 http://MobileDev.TW

29. HYBRID APP WE ALWAYS DO THIS...
iOS UIWebView 29 http://MobileDev.TW

30. 資料介接
別人家的Server
XML Parser
XML or JSON JSON
Array Dic
自己架的Server PHP + MySQL
iOS UIWebView 30 http://MobileDev.TW

31. UIWebView
iOS UIWebView 31 http://MobileDev.TW

32. Load web page
[myWebView loadRequest:!
[NSURLRequest requestWithURL:!
[NSURL URLWithString:@http://MobileDev.TW]]];!
iOS UIWebView 32 http://MobileDev.TW

33. HTML5 - Video Tag
iOS UIWebView 33 http://MobileDev.TW

34. HTML5 - Canvas
iOS UIWebView 34 http://MobileDev.TW

35. HTML5 - Input Type
Range Date Picker Placeholder
iOS UIWebView 35 http://MobileDev.TW

36. HTML5 - Geolocation
iOS UIWebView 36 http://MobileDev.TW

37. Web Page與App互動
• 透過超連結的載入請求觸發，判斷超連結的字串是
否有特定關鍵字，來決定行為
Sent before a web view begins loading a frame.
iOS UIWebView 37 http://MobileDev.TW

38. Web Page與App互動
• 網頁上則撰寫一個特殊字串的超連結
iOS UIWebView 38 http://MobileDev.TW

39. UIWebView - Support Document Type
• Excel (.xls) • Rich Text Format (.rtf)
• Keynote (.key.zip) • Rich Text Format Directory
(.rtfd.zip)
• Numbers (.numbers.zip)
• Keynote '09 (.key)
• Pages (.pages.zip)
• Numbers '09 (.numbers)
• PDF (.pdf)
• Pages '09 (.pages)
• Powerpoint (.ppt)
• Word (.doc)
iOS UIWebView 39 http://MobileDev.TW

40. Support Document Type
iOS UIWebView 40 http://MobileDev.TW

41. Support Document Type
iOS UIWebView 41 http://MobileDev.TW

42. 運用CSS來進行頁面美化
iOS UIWebView 42 http://MobileDev.TW

43. 運用CSS來進行頁面美化
iOS UIWebView 43 http://MobileDev.TW

44. CSS3 Transform
iOS UIWebView 44 http://MobileDev.TW

45. CSS3 Transform
iOS UIWebView 45 http://MobileDev.TW

46. CSS3 多重背景
iOS UIWebView 46 http://MobileDev.TW

47. CSS3 Transition
• 運用touch事件與CSS3 Transition，當使用者觸碰
該區塊時，可產生橫向或直向的縮放動畫
iOS UIWebView 47 http://MobileDev.TW

48. CSS3 Animation
iOS UIWebView 48 http://MobileDev.TW

49. Mobile Web Framework
iOS UIWebView 49 http://MobileDev.TW

50. 重組網頁資訊
• 取得遠端的資訊
• 設計一個HTML頁面，可使用CSS排版
• 將遠端的資訊，結合近端HTML頁面的格式
iOS UIWebView 50 http://MobileDev.TW

51. 引用外部資訊
線上播放
首頁 花卉列表
維基百科
線上資訊
離線播放
(第⼀一次使用需下載)
iOS UIWebView 51 http://MobileDev.TW

52. Why Go Hybrid?
• 保留頁面的替換性
• 最新訊息發佈
• 公司促銷廣告
• 經常性更換資料
• 開啓特定文件
• 運用CSS來進行頁面美化
• 運用Mobile Web Framework
• 重組網頁資訊
• 引用外部資訊
iOS UIWebView 52 http://MobileDev.TW

53. Thank you
iOS UIWebView 53 http://MobileDev.TW