#15 StoreMap

今天來練習串接API，並把最後的資料用struct 回傳。

以下需求：

1. 盡量做一個SDK，方便使用者串接2間超商的地圖。
2. 記住使用者前次選擇的店家，下次打開優先顯示。
3. 用protocol 回傳最後截圖畫面＆網址的query。
4. 用 WKWebView 顯示地圖畫面。

以下重點心得分享：

1. 設計架構時，盡量要保留變化，除了使程式碼簡潔外，後續維護也容易。

這次用protocol 設計StoreMapConfig，另外2間超商分別繼承之。有個好處是因為發送條件不同，拆開寫易讀且好維護，使用人在初始化時也方便。

protocol StoreMapConfig {
var request: URLRequest { get set }
}
class FamilyMartConfig: StoreMapConfig {
var request: URLRequest
init() {
}
}
class SevenElevenConfig: StoreMapConfig {
var request: URLRequest
init() {
}
}

2. 關於wkwebView ，這次用到幾個方法：

※ 顯示畫面:

wKwebView.load(URLRequest())

WKNavigationDelegate 的 func :

※ 網址完成加載：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {.  }

※ 網址開始加載：

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {   }

※ 抓取其他的網址：這次就是要抓網頁轉導中的網址，

因此navigationAction.navigationType 選 .other ，

再用navigationAction.request.url 就可以抓到網址。

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Swift.Void) {
if navigationAction.navigationType == .other {
guard let url = navigationAction.request.url else {
print("Transform URL Fail")
decisionHandler(.cancel)
return
}
if let config = current as? SevenElevenConfig {
config.saveStoreId(from: url)
}
}
decisionHandler(.allow)
}

Apple Developer Documentation

3. “where” 的用法：

這次學到了where的用法，可以更方便達成的目標，以下網址可供參考～

翻译：where在Swift中的用法_AI架构师易筋-CSDN博客_swift中where

4. 利用protocol 回傳資料：

宣告形狀長這樣，可以看到裡面有一個func getResult… 這個方法很明顯沒有身體，因為要留給繼承此delegate的人實作的～

使用者繼承delegate，即會實作此方法～

5. 螢幕截圖func～～

private func getScreenShot(uiElement: UIView)->UIImage{
let renderer = UIGraphicsImageRenderer(bounds: uiElement.bounds)
return renderer.image { rendererContext in
uiElement.layer.render(in: rendererContext.cgContext)
}
}

6. 此func 寫法，運用泛型概念，除了可以開啟畫面，

也可以一同設定delegate～

雖然這次不適用，但也留個記錄在這裡，未來可以用ＸＤ

// 可以設定delegate
// 但不建議此，因為保留彈性給使用者
static func showChoseStoreButton<T: UIViewController & StoreMapToolViewControllerDelegate>(from vc: T) {
let storeMapToolVC = StoreMapToolViewController()
storeMapToolVC.delegate = vc
storeMapToolVC.modalPresentationStyle = .fullScreen
vc.present(storeMapToolVC, animated: false)

}

7. 以下網站，是一個後台測試網站。像這次練習，超商地圖最後會把user所選擇的資訊打回回傳網址（只有7–11會回傳）。

Webhook.site - Test, process and transform emails and HTTP requests

8. 多瞭解網路相關概念，包括HTTP 發送流程，Browser行為概念，網址組成等。另外這次練習2種串接網址的寫法（依需求調整寫法），有興趣的朋友打開code吧～

Github:

GitHub - ChenHongYang327/StoreMap