---
tags: 新人資訊
GA: G-YWCCFEGXSJ
---
[新人資訊](https://hackmd.io/@newman/portal-info)

# 技術-iOS #8-使用套件管理平台，引入 Firebase Auth and Store 模組，完成即時聊天功能

這一次是要學習引入並管理第三方套件，相中 google 這超強的第三方，連結 Firebase 這龐大的應用程式開發與雲端營運平台可以讓系統功能水準飛速的提升，就先來下載課程提供的專案骨架：https://github.com/appbrewery/Flash-Chat-iOS13 ，此專案有較多畫面，可以讓使用者註冊，登入，進入聊天室即時聊天。


隨著課程的進展逐漸開拓了視野，要讓開發工作事半功倍，引進第三方套件是個好辦法，能夠吸引更多開發者貢獻程式套件讓生態系蓬勃發展就是平台業者最重要的事，必須讓套件的開發管理可以很容易的進行。但有點訝異的是，雖然官方有一個套件管理平台，但卻不是最受歡迎的，而是另一個 cocoapods https://cocoapods.org/ ，稍微看一下目前所管理的套過已經超過九萬了！用兩行指令安裝：

sudo gem install cocoapods
pod setup --verbose
確認是否安裝成功可以執行 pod --version
然後 cd 到專案目錄執行 pod init，完成後會新增一個 Podfile 文字檔，進入編輯加入想安裝的套件 (此例為 FirebaseAuth and FirebaseFirestore) 後再執行 pod install，執行完成後專案檔將被修改，並且增加一個 workspace file，之後開發時 xcode 就不要開啟原專案了而改成開啟這個新的 workspace，裡面除了原專案以外，還多了一個叫 Pods 的專案，兩者協同合作，必須遵照 cocoapods 的管理規則。本專案現在要加入的套件就是：出自 google 功能強大的超級套件 Firebase！

使用 Firebase 的方法－首先必須以 google 帳號登入 Firebase console https://console.firebase.google.com/ ，新增專案後網站會一步一步的引導設定，到了關鍵步驟如下，在 Podfile 增加下列兩行，代表要引入這兩個套件：


然後回 console 執行 pod install，他就會根據 Podfile 的設定執行所有必要的安裝：


跟著 Firebase 文件的引導，首先進行專案架構上基本且重要的設定，加入以下兩行後執行 Build，成功後就可以開始撰寫細部邏輯了。


首要任務是先搞定使用者的註冊，登入，登出等基本重要的程序，這部分完全倚賴 Firebase，查閱官方文件是必要的，其簡潔的設計完全符合原本的期待：




到 Firebase console 觀察一下，兩個使用者資料已經正確納管了。


接下來要跨過的門檻是是要學會這個複雜但每個 App 幾乎都會用到的 UI 元件 TableView，其中重複出現的每一行稱為 TableViewCell 需要細部設計，先定義一個提供重複顯示的資料結構 Model 部分：


另外比較麻煩的是要設計 UI 部分，在 Views 資料夾中新增一個檔案，template 選 Cocoa Touch Class，第二步驟勾選「Also create XIB file」如下：


完成後會得到兩個檔案，其中 xib file 可以讓我們用拖拉的方式設計 TableViewCell，用一個橫向的 Stack 排入左邊一個 UIView，裡面再放一個 Label，右邊一個 ImageView 其內容顯示頭像，初步已經可以表達某個人發出一則文字訊息了。


為了讓訊息匡的邊緣呈現圓角，可以加入以下這行：


為了先測通 TableView 的顯示功能，先試著顯示一個靜態的 array，ChatViewController 需要實作兩個 protocol 以確認本身可以被委任顯示 TableView 內容的任務，UITableViewDataSource and UITableViewDelegate，分別以 extension 方式撰寫，用已經使用過很多次的 delegate design pattern 方式，在 viewDidLoad 區塊把自己指定給 tabelView 元件：



執行看看 TableView 的顯示效果，有點樣子了！該做的工作真的很多，最後還有資料庫存取功能需要做。


資料庫部分，首先實作寫入部分，寫在 send 按鈕觸發處，Firestore 有很好的管理介面可以查詢資料寫入狀況。


然後就是抓出來呈現，做法就是先設計一個 query 邏輯，包含篩選條件和排序等規則，運用這個 Firebase 很令人激賞的功能，可以監控此 query 結果，若有變動則觸發一段程式，此程式可包在 closure 裡面，經測試這樣已經可以在每次按下 send 鍵時即時顯示訊息了，且會自動捲到最後一行：


系統開發過程有很多重複用到的常數，可以存在一個 struct，避免 typing error


接下來為了解決手機上虛擬螢幕會蓋住畫面的問題，引進一個很強的 Package https://github.com/hackiftekhar/IQKeyboardManager 號稱不需要任何程式碼，只要一安裝就直接可用，不管任何型號或直式橫式螢幕皆可適用。且因此套件支援 apple 官方的 Package Manager，所以也趁機演練一次，結果用法比 cocoapods 更簡單！只要從 xcode 選單點選 File -> Add Package，貼上 github 網址即可安裝，然後在 AppDelegate.swift 檔案中 import IQKeyboardManagerSwift，在 didFinishLaunchingWithOptions 段落加入 IQKeyboardManager.shared.enable = true 即可。執行時畫面會自動隨著虛擬鍵盤的出現與否而伸縮。另外再加入兩行設定，讓使用體驗更佳。
IQKeyboardManager.shared.enableAutoToolbar = false
IQKeyboardManager.shared.shouldResignOnTouchOutside = true

最後執行狀況如下：

https://youtu.be/YIBtAWxhWwY

By Newman Chen 2022/8/6