Take Advantage of
           UIWebView
               for
         iOS Native App
           Developers
                    Ryan Chung
iOS UIWebView   1    http://MobileDev.TW
Ryan Chung (Ryan@iii.org.tw)
• 現任                            • 經歷
  • 資策會中壢中心課程研發經理                   • 工研院電通所嵌入式網站開發
  • 資策會中壢中心專任講師                     • 經濟部工業局自由軟體推動計畫
  • 資策會行動開發學院負責人                    • 宜蘭縣政府自由軟體講師

• 學歷                                • 平鎮陸軍通訊學校講師

  • 台灣科技大學資工所碩士                     • 龍潭陸軍總部講師

  • 元智大學資訊工程系學士                     • 資策會資訊技術訓練中心講師
                                    • 資策會資技中心行動開發導師
• 教授科目
                                    • 資策會資技中心數位學習網管理
  • iOS App開發 – Objective-C
  • Web App開發 – HTML5/CSS3
                iOS UIWebView   2   http://MobileDev.TW
學習、分享與成長




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




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




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




iOS UIWebView   6   http://MobileDev.TW
App生態圈


                                Cloud Service Provider
Customer
                                                                    Training Center

            ADs Seller



                                Developer              Designer


 Funder


           Platform Holder                                        Incubation Center
                                   Network Admin
                iOS UIWebView         7     http://MobileDev.TW
App	 開發團隊角色

      提出
      需求

                                       	 使用者經驗
                                          架構師
                	 圖像設計師
客戶
                                                                          設計
                        專案經理

                                                                          研發
                            內部
                            提案
                                                   跨平台開發者




                            企劃
         iOS	 開發者
             Android	 開發者
            iOS UIWebView          8    http://MobileDev.TW
What is App?


行銷手法                                             趣味娛樂




提供功能                                             資訊提供


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




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




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




iOS UIWebView   12   http://MobileDev.TW
Web App or Native App?
         功能                   Web App                        Native App

靜態圖片、文字展示
                     O
                              O

內容可直接線上更新
                     O
                              X

可上架販售
                          X
                             O

離線閱覽
                           X
                             O

加入主畫面螢幕
                       O
                              O

顯示自定啓動圖片
                      O
                              O


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



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




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


                                Content               Device



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




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




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




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




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




  iOS UIWebView   21   http://MobileDev.TW
App Inventor




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




iOS UIWebView   23   http://MobileDev.TW
Titanium




iOS UIWebView      24   http://MobileDev.TW
Corona




iOS UIWebView     25   http://MobileDev.TW
Flash




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




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




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


       iOS UIWebView   29   http://MobileDev.TW
資料介接



別人家的Server




                                                 XML Parser
                               XML or JSON       JSON
                                                              Array  Dic




自己架的Server      PHP + MySQL

             iOS UIWebView    30   http://MobileDev.TW
UIWebView




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




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




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




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




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




 iOS UIWebView   36   http://MobileDev.TW
Web Page與App互動
•  透過超連結的載入請求觸發,判斷超連結的字串是
   否有特定關鍵字,來決定行為




                Sent before a web view begins loading a frame.


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




       iOS UIWebView   38   http://MobileDev.TW
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
Support Document Type




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




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




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




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




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




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




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




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




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




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




        iOS UIWebView   50   http://MobileDev.TW
引用外部資訊
                         線上播放
首頁   花卉列表




                                                     維基百科
                                                     線上資訊




                      離線播放
                      (第⼀一次使用需下載)
      iOS UIWebView       51   http://MobileDev.TW
Why Go Hybrid?
•  保留頁面的替換性
 •  最新訊息發佈
 •  公司促銷廣告
 •  經常性更換資料
•  開啓特定文件
•  運用CSS來進行頁面美化
•  運用Mobile Web Framework
•  重組網頁資訊
•  引用外部資訊
          iOS UIWebView   52   http://MobileDev.TW
Thank you


iOS UIWebView   53   http://MobileDev.TW

Take Advantage of UIWebView for iOS Native App Developers