Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NetworkService-Swift

1,131 views

Published on

http://MobileDev.TW

Published in: Technology
  • Be the first to comment

NetworkService-Swift

  1. 1. Network Service http://MobileDev.TW iOS APP Developer 網路服務 – 資料傳送與接收 Ryan@MobileDev.TW 1
  2. 2. Network Service http://MobileDev.TW 大綱 1. 基本網路傳輸方式 • 取得一般字串資料 • 取得圖片資料 2. 網路常見資料格式一:JSON • NSJSONSerialization 3. 網路常見資料格式二:XML • XML Parser • XML與Master-Detail ViewController 4. 資料來源與介接 • Open Data API • 自己提供資料 2
  3. 3. Network Service http://MobileDev.TW 取得網路資料 • 透過URLSession進行一項data task,取得網路資料 3
  4. 4. Network Service http://MobileDev.TW 取得網路資料 1.在viewDidLoad中,加入以下內容 4
  5. 5. Network Service http://MobileDev.TW 取得網路資料 2.在Info.plist中加入: 5
  6. 6. Network Service http://MobileDev.TW 取得網路圖片 • 取得網路上的一張圖片,顯示在畫 面上 6
  7. 7. Network Service http://MobileDev.TW Lab 取得網路圖片 1. storyboard加入imageView,建立關聯性(Outlet) 2. 修改viewDidLoad的內容 7
  8. 8. Network Service http://MobileDev.TW PS.避免圖像比例失真 • ScaleToFill • 完全滿版(可能比例會失真) • ScaleAspectFit • 維持影像比例與完整圖,其他顯示區域以透明顯示 • ScaleAspectFill • 滿版+維持影像比例(但部分圖像內容可能會截掉) 8
  9. 9. Network Service http://MobileDev.TW 增加等待顯示 • Activity Indicator • Button 9
  10. 10. Network Service http://MobileDev.TW 非同步傳輸 1.在畫面上增加UIActivityIndicatorView,勾選Hides When Stopped,並建立程式關聯性 放置於畫面的正中央 10
  11. 11. Network Service http://MobileDev.TW 非同步傳輸 按鈕按下後,設定Indicator,開始運轉直到取得資料 11
  12. 12. Network Service http://MobileDev.TW URL Session Class 12
  13. 13. Network Service http://MobileDev.TW 取得下載進度 1.畫面上加入progressView 2.設定session的Delegate為self,並改用 downloadTask 13
  14. 14. Network Service http://MobileDev.TW 取得下載進度 3.遵循相關delegate 4.實作doanloadTask這兩個方法 14
  15. 15. Network Service http://MobileDev.TW 取得下載進度 5.完成下載時,設定圖片以及讓indicator停止 15
  16. 16. Network Service http://MobileDev.TW 取得下載進度 6.取得目前下載進度,並顯示至ProgressView 16
  17. 17. Network Service http://MobileDev.TW 2.網路常見資料格式一:JSON 這誰? 17
  18. 18. Network Service http://MobileDev.TW 台北市立動物園資料 18
  19. 19. Network Service http://MobileDev.TW 資料來源 http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=a3 e2b221-75e0-45c1-8f97-75acbd43d613 19
  20. 20. Network Service http://MobileDev.TW 單機 -> 網路 1.使用Master-Detail樣板,結合上例的資料傳輸,建立一個陣列來儲存資料 20
  21. 21. Network Service http://MobileDev.TW 單機 -> 網路 2.取得資料後,使用序列化,存入陣列,並重新整理 21
  22. 22. Network Service http://MobileDev.TW 單機 -> 網路 3.設定tableView的顯示與資料陣列的關聯性: • 資料筆數:依據陣列元素數量 • 項目文字:依據陣列每間房間裡頭用A_Name_Ch對應的值 22
  23. 23. Network Service http://MobileDev.TW Lab • 找到圖片的資料來源,設定好第二頁可以呈現動物的圖 片 • 有值與無值該如何處理? 23
  24. 24. Network Service http://MobileDev.TW 在第二個畫面中加入預設圖片 Storyboard -> add imageView -> 建立Outlet 24
  25. 25. Network Service http://MobileDev.TW 第二個畫面中增加一個變數 thisAnimalDic 25
  26. 26. Network Service http://MobileDev.TW 修改第一個畫面中的prepareForSegue controller.thisAnimalDic=object 26
  27. 27. Network Service http://MobileDev.TW 修改第二個畫面的viewDidLoad 有圖片網址的話,就去請求內容 27
  28. 28. Network Service http://MobileDev.TW 下載完成後,設定圖片 28
  29. 29. Network Service http://MobileDev.TW 3.處理XML資料 29
  30. 30. Network Service http://MobileDev.TW 處理XML資料 30
  31. 31. Network Service http://MobileDev.TW 處理XML資料 arrayResultObjects NewsItemObject stringTitle stringLink stringPubDate stringDescription 31
  32. 32. Network Service http://MobileDev.TW 處理XML資料 1. 建立一個專案,選擇Master-Detail 2. 新建檔案,命名為NewsItemObject.swift 3. 依要處理的XML進行調整 32
  33. 33. Network Service http://MobileDev.TW 處理XML資料 4. 新增檔案,繼承至NSObject,命名為 MyXMLParserDelegate 33
  34. 34. Network Service http://MobileDev.TW 處理XML資料 - MyXMLParserDelegate 6. 實作方法didStartElement:遇到一個元件的開始標籤 34
  35. 35. Network Service http://MobileDev.TW 處理XML資料 - MyXMLParserDelegate 7. 實作方法 foundCharacters:遇到一個元件的內容 35
  36. 36. Network Service http://MobileDev.TW 處理XML資料 - MyXMLParserDelegate 8. 實作方法 didEndElement:遇到一個元件的結束標籤 36
  37. 37. Network Service http://MobileDev.TW 處理XML資料 9. MasterViewController.swift 37
  38. 38. Network Service http://MobileDev.TW 處理XML資料 10.MasterViewController的viewDidLoad 38
  39. 39. Network Service http://MobileDev.TW 處理XML資料 11.處理拿到的Data,交給XML Parser 39
  40. 40. Network Service http://MobileDev.TW 處理XML資料 13.設定tableView的顯示內容 40
  41. 41. Network Service http://MobileDev.TW Lab • 修改範例,讓使用者按下該則新聞時,能在下一個畫 面呈現該則新聞網頁 41
  42. 42. Network Service http://MobileDev.TW Lab 1. 在第二個畫面中,增加一個webView,一個String 42
  43. 43. Network Service http://MobileDev.TW Lab 2. 第二個畫面元件載入完成時,就載入網頁 43
  44. 44. Network Service http://MobileDev.TW Lab 3. 回到第一個畫面,設定prepareForSegue 44
  45. 45. Network Service http://MobileDev.TW 資料介接 別人家的Server XML or JSON 自己架的Server PHP + MySQL XML Parser JSON Array & Dic 45
  46. 46. Network Service http://MobileDev.TW 台北市開放資料平台 • 網址:http://data.taipei • 提供資料格式:XML or jSON 46
  47. 47. Network Service http://MobileDev.TW 使用資料 -> API 47
  48. 48. Network Service http://MobileDev.TW 如果資料來源是自己的SERVER… 48
  49. 49. Network Service http://MobileDev.TW 自建Server提供內容 49
  50. 50. Network Service http://MobileDev.TW 建構順序 1. 建構資料庫資料 2. 撰寫API,吐出XML or JSON 3. 行動端程式接收資料 4. 顯示於手機畫面 50
  51. 51. Network Service http://MobileDev.TW Data API By PHP 資料庫連線 撈出資料 儲存資料 資料呈現 51
  52. 52. Network Service http://MobileDev.TW 圖片來自base64字串 • Image base64字串 • 當作網址來源處理,接收變成Data物件 52
  53. 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

×