http://MobileDev.TW

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

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

3. Network Service http://MobileDev.TW
取得網路資料
• 透過URLSession進行一項data task，取得網路資料
3

4. Network Service http://MobileDev.TW
取得網路資料
1.在viewDidLoad中，加入以下內容
4

5. Network Service http://MobileDev.TW
取得網路資料
2.在Info.plist中加入：
5

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

7. Network Service http://MobileDev.TW
Lab 取得網路圖片
1. storyboard加入imageView，建立關聯性(Outlet)
2. 修改viewDidLoad的內容
7

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

9. Network Service http://MobileDev.TW
增加等待顯示
• Activity Indicator
• Button
9

10. Network Service http://MobileDev.TW
非同步傳輸
1.在畫面上增加UIActivityIndicatorView，勾選Hides
When Stopped，並建立程式關聯性
放置於畫面的正中央
10

11. Network Service http://MobileDev.TW
非同步傳輸
按鈕按下後，設定Indicator，開始運轉直到取得資料
11

12. Network Service http://MobileDev.TW
URL Session Class
12

13. Network Service http://MobileDev.TW
取得下載進度
1.畫面上加入progressView
2.設定session的Delegate為self，並改用
downloadTask
13

14. Network Service http://MobileDev.TW
取得下載進度
3.遵循相關delegate
4.實作doanloadTask這兩個方法
14

15. Network Service http://MobileDev.TW
取得下載進度
5.完成下載時，設定圖片以及讓indicator停止
15

16. Network Service http://MobileDev.TW
取得下載進度
6.取得目前下載進度，並顯示至ProgressView
16

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

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

19. Network Service http://MobileDev.TW
資料來源
http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=a3
e2b221-75e0-45c1-8f97-75acbd43d613
19

20. Network Service http://MobileDev.TW
單機 -> 網路
1.使用Master-Detail樣板，結合上例的資料傳輸，建立一個陣列來儲存資料
20

21. Network Service http://MobileDev.TW
單機 -> 網路
2.取得資料後，使用序列化，存入陣列，並重新整理
21

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

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

24. Network Service http://MobileDev.TW
在第二個畫面中加入預設圖片
Storyboard -> add imageView -> 建立Outlet
24

25. Network Service http://MobileDev.TW
第二個畫面中增加一個變數
thisAnimalDic
25

26. Network Service http://MobileDev.TW
修改第一個畫面中的prepareForSegue
controller.thisAnimalDic=object
26

27. Network Service http://MobileDev.TW
修改第二個畫面的viewDidLoad
有圖片網址的話，就去請求內容
27

28. Network Service http://MobileDev.TW
下載完成後，設定圖片
28

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

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

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

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

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

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

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

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

37. Network Service http://MobileDev.TW
處理XML資料
9. MasterViewController.swift
37

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

39. Network Service http://MobileDev.TW
處理XML資料
11.處理拿到的Data，交給XML Parser
39

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

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

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

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

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

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

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

47. Network Service http://MobileDev.TW
使用資料 -> API
47

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

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

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

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

52. Network Service http://MobileDev.TW
圖片來自base64字串
• Image base64字串
• 當作網址來源處理，接收變成NSData物件
52

53. Network Service http://MobileDev.TW
有的資料有第二頁(超過1000筆)
• 查看Response Header
• http://web-sniffer.net/
• http://taipeicityopendata.cloudapp.net/v1/TaipeiOGDI/EPA
01/?format=json&NextPartitionKey=1!48!.....&NextRowKey
=1!48!.....
53