iOS - NetworkService

Network Service http://MobileDev.TW iOS APP Developer 網路服務 – 資料傳送與接收
[email protected] 1

Network Service http://MobileDev.TW 大綱 1.  基本網路傳輸方式 •  同步傳輸 • 
非同步傳輸 2.  網路常見資料格式一：JSON •  NSJSONSerialization 3.  網路常見資料格式二：XML •  XML Parser •  XML與Master-Detail ViewController 4.  資料來源與介接 •  Open Data API •  自己提供資料 2

Network Service http://MobileDev.TW 1-1.同步傳輸取得網路資料 •  透過NSURLConnection的同步請求，直接取得網路資料 •  缺點：資料量大時，會造成App停頓
3

Network Service http://MobileDev.TW 同步傳輸取得網路資料 1.  在Storyboard上新增一顆按鈕，並建立程式關聯性 2.  在對應按鈕Action的方法中，加入以下內容 4

Network Service http://MobileDev.TW 1-1.Lab 取得網路圖片 •  取得網路上的一張圖片，顯示在畫面上 5

Network Service http://MobileDev.TW Lab 取得網路圖片 1.  在storyboard中加入一個imageView，並建立程式關聯性(Outlet) 2. 
修改按鈕按下後所執行的方法 6

Network Service http://MobileDev.TW PS.避免圖像比例失真 7 •  UIViewContentModeScaleToFill •  完全滿版(可能比例會失真)
•  UIViewContentModeScaleAspectFit •  維持影像比例與完整圖，其他顯示區域以透明顯示 •  UIViewContentModeScaleAspectFill •  滿版+維持影像比例(但部分圖像內容可能會截掉)

Network Service http://MobileDev.TW 1-2.非同步傳輸 •  不會Hold住使用者畫面 8

Network Service http://MobileDev.TW 非同步傳輸 1.  在ViewController.h中加入2個iVar： •  returnData (NSMutableData)
•  myIndicator (UIActivityIndicatorView) 9

Network Service http://MobileDev.TW 非同步傳輸 2.  修改按鈕方法，設定Indicator，疊到ImageView上，開始運轉 10

Network Service http://MobileDev.TW 非同步傳輸 3.  繼續撰寫在按鈕方法中，設定網址、Request，啟動連線，開始取得資料 11

Network Service http://MobileDev.TW 非同步傳輸 4.  實作以下4個Delegate方法(接收回應、接收資料、完成接收、發生錯誤) 12

Network Service http://MobileDev.TW Lab1 •  如何顯示出下載進度? 線索： 1.  接收到的response中有一個屬性可取得欲接收內容長度
2.  NSData有一個屬性可得知data的檔案大小 3.  注意數值型態 13

Network Service http://MobileDev.TW Lab2 •  使用sendAsynchronousRequest 14

Network Service http://MobileDev.TW 2.網路常見資料格式一：JSON 這誰? 15

Network Service http://MobileDev.TW 台北市立動物園資料 16

Network Service http://MobileDev.TW 資料來源 http://data.taipei.gov.tw/opendata/apply/json /RjYyMDdCMzUtRDE5Ny00MTg1LTg4ODgtOEMyNkE1NDEyMkY0 17

Network Service http://MobileDev.TW 單機 -> 網路 1.  以先前TableView的例子為基礎開始修改 2. 
增加接收資料用的responseData以及tableView 要用的資料來源dataArray 18

Network Service http://MobileDev.TW 單機 -> 網路 3.  在viewDidLoad中增加資料請求、來源設定 19

Network Service http://MobileDev.TW 單機 -> 網路 4.  在非同步接收資料的方法實作中，完成接收時，使用NSJSONSerialization來轉換資料放入陣列
，tableView重新整理 20

Network Service http://MobileDev.TW 單機 -> 網路 5.  設定tableView的顯示與資料陣列的關聯性： • 
資料筆數：依據陣列元素數量 •  項目文字：依據陣列每間房間裡頭用A_Name_Ch對應的值 21

Network Service http://MobileDev.TW Lab •  找到圖片的資料來源，設定好第二頁可以呈現動物的圖片 •  有值與無值該如何處理？
22

Network Service http://MobileDev.TW NSJSONSerialization 使用 23

Network Service http://MobileDev.TW 3.處理XML資料 24

Network Service http://MobileDev.TW 處理XML資料 25

Network Service http://MobileDev.TW 處理XML資料 arrayResultObjects 26 NewsItemObject stringTitle stringLink
stringPubDate stringDescription

Network Service http://MobileDev.TW 處理XML資料 1.  建立一個專案，選擇Master-Detail 2.  新建檔案，繼承NSObject，命名為NewsItemObject 3. 
NewsItemObject.h (依要處理的XML進行調整) 27

Network Service http://MobileDev.TW 處理XML資料 28 4.  新增檔案，繼承至NSObject，命名為MyXMLParserDelegate

Network Service http://MobileDev.TW 處理XML資料 5.  MyXMLParserDelegate.m，初始化方法 29

Network Service http://MobileDev.TW 處理XML資料 6.  MyXMLParserDelegate.m，實作三個方法 didStartElement：遇到一個元件的開始標籤 30

Network Service http://MobileDev.TW 處理XML資料 7.  MyXMLParserDelegate.m，實作三個方法 foundCharacters：遇到一個元件的內容 31

Network Service http://MobileDev.TW 處理XML資料 8.  MyXMLParserDelegate.m，實作三個方法 didEndElement：遇到一個元件的結束標籤 32

Network Service http://MobileDev.TW 處理XML資料 9.  MasterViewController.h 33

Network Service http://MobileDev.TW 處理XML資料 10. MasterViewController.m的viewDidLoad 34

Network Service http://MobileDev.TW 處理XML資料 11. 實作非同步傳輸的四個方法 35

Network Service http://MobileDev.TW 處理XML資料 12. 實作非同步傳輸的四個方法 36

Network Service http://MobileDev.TW 處理XML資料 13. 設定tableView的顯示內容 37

Network Service http://MobileDev.TW 3.Lab •  修改範例，讓使用者按下該則新聞時，能在下一個畫面呈現該則新聞網頁 38

Network Service http://MobileDev.TW Lab 1.  在第二個畫面中，增加一個webView，一個NSString 39

Network Service http://MobileDev.TW Lab 2.  第二個畫面元件載入完成時，就載入網頁 40

Network Service http://MobileDev.TW Lab 3.  回到第一個畫面，設定prepareForSegue 41

Network Service http://MobileDev.TW 資料介接 42 別人家的Server XML or JSON
自己架的Server PHP + MySQL XML Parser JSON Array & Dic

Network Service http://MobileDev.TW 台北市政府公開資料平台 •  網址：http://data.taipei.gov.tw/ •  提供資料格式：XML or
jSON 43

Network Service http://MobileDev.TW 一般介接 44

Network Service http://MobileDev.TW 進階顯示與過濾 45

Network Service http://MobileDev.TW 如果資料來源是自己的SERVER… 48

Network Service http://MobileDev.TW 自建Server提供內容 49

Network Service http://MobileDev.TW 建構順序 1.  建構資料庫資料 2.  撰寫API，吐出XML or
JSON 3.  行動端程式接收資料 4.  顯示於手機畫面 50

Network Service http://MobileDev.TW Data API By PHP 51 資料庫連線
撈出資料儲存資料資料呈現

Network Service http://MobileDev.TW 不想自建SERVER但又想自己維護資料 52

Network Service http://MobileDev.TW Parse 53

iOS - NetworkService

iOS - NetworkService

Transcript

More Decks by Ryan Chung

Other Decks in Technology

Featured