1. 概述
歡迎來到友好聊天代碼實驗室。在此 Codelab 中，您將學習如何使用 Firebase 平台創建 iOS 應用程序。您將實現一個聊天客戶端並使用 Firebase 監控其性能。
此 Codelab 也可在 Objective-C 中使用。
你將學到什麼
- 允許用戶登錄。
- 使用 Firebase 實時數據庫同步數據。
- 將二進製文件存儲在 Firebase 存儲中。
你需要什麼
- Xcode
- 可可豆莢
- iOS 8.0+ 或模擬器的測試設備
您將如何使用本教程？
您如何評價您構建 iOS 應用程序的體驗？
2. 獲取示例代碼
從命令行克隆 GitHub 存儲庫。
$ git clone https://github.com/firebase/codelab-friendlychat-ios
3. 構建入門應用程序
要構建入門應用程序：
- 在終端窗口中，導航到
示例代碼下載中的ios-starter/swift-starter目錄 - 運行
pod install --repo-update - 打開FriendlyChatSwift.xcworkspace 文件以在Xcode 中打開項目。
- 點擊
運行按鈕。
幾秒鐘後，您應該會看到友好聊天主屏幕出現。用戶界面應該出現。但是，此時您無法登錄、發送或接收消息。應用程序將異常中止，直到您完成下一步。
4.創建Firebase控制台項目
創建項目
從Firebase 控制台中選擇“添加項目” 。
將該項目命名為FriendlyChat ，然後單擊“創建項目” 。
連接您的 iOS 應用程序
- 在新項目的“項目概述”屏幕中，單擊“將 Firebase 添加到您的 iOS 應用程序” 。
- 輸入捆綁包 ID，如“
com.google.firebase.codelab.FriendlyChatSwift”。 - 輸入 App Store ID“
123456”。 - 單擊註冊應用程序。
將 GoogleService-Info.plist 文件添加到您的應用程序
在第二個屏幕上，單擊“下載 GoogleService-Info.plist”以下載包含應用程序所需的所有 Firebase 元數據的配置文件。將該文件複製到您的應用程序並將其添加到FriendlyChatSwift目標中。
您現在可以單擊彈出窗口右上角的“x”將其關閉 - 跳過步驟 3 和 4 - 因為您將在此處執行這些步驟。
導入 Firebase 模塊
首先確保Firebase模塊已導入。
AppDelegate.swift ， FCViewController.swift
import Firebase
在 AppDelegate 中配置 Firebase
使用 application:didFinishLaunchingWithOptions 函數內 FirebaseApp 中的“configure”方法從 .plist 文件配置底層 Firebase 服務。
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().delegate = self
return true
}
5. 識別用戶
使用規則限制經過身份驗證的用戶
我們現在將添加一條規則，要求在讀取或寫入任何消息之前進行身份驗證。為此，我們將以下規則添加到消息數據對像中。在Firebase 控制台的“數據庫”部分中，選擇“實時數據庫”，然後單擊“規則”選項卡。然後更新規則，使其看起來像這樣：
{
"rules": {
"messages": {
".read": "auth != null",
".write": "auth != null"
}
}
}
有關其工作原理的更多信息（包括有關“auth”變量的文檔），請參閱 Firebase安全文檔。
配置身份驗證 API
在您的應用程序可以代表您的用戶訪問 Firebase 身份驗證 API 之前，您必須啟用它
- 導航到Firebase 控制台並選擇您的項目
- 選擇身份驗證
- 選擇登錄方法選項卡
- 將Google開關切換為啟用（藍色）
- 在出現的對話框中按“保存”
如果您稍後在此 Codelab 中遇到錯誤並顯示消息“CONFIGURATION_NOT_FOUND”，請返回此步驟並仔細檢查您的工作。
確認 Firebase 身份驗證依賴項
確認Podfile文件中存在 Firebase Auth 依賴項。
Podfile
pod 'Firebase/Auth'
設置您的 Info.plist 以進行 Google 登錄。
您需要將自定義 URL 方案添加到您的 XCode 項目中。
- 打開項目配置：雙擊左側樹視圖中的項目名稱。從“目標”部分選擇您的應用程序，然後選擇“信息”選項卡，並展開“URL 類型”部分。
- 單擊 + 按鈕，並為反向客戶端 ID 添加 URL 方案。要查找此值，請打開 GoogleService-Info.plist 配置文件，然後查找 REVERSED_CLIENT_ID 鍵。複製該鍵的值，並將其粘貼到配置頁面上的 URL 方案框中。將其他字段留空。
- 完成後，您的配置應類似於以下內容（但具有特定於應用程序的值）：
設置 Google 登錄的 clientID
配置 Firebase 後，我們可以使用 clientID 在“didFinishLaunchingWithOptions:”方法中設置 Google Sign In。
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
GIDSignIn.sharedInstance().delegate = self
return true
}
添加登錄處理程序
Google 登錄成功後，使用該帳戶通過 Firebase 進行身份驗證。
AppDelegate.swift
func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error?) {
if let error = error {
print("Error \(error)")
return
}
guard let authentication = user.authentication else { return }
let credential = GoogleAuthProvider.credential(withIDToken: authentication.idToken,
accessToken: authentication.accessToken)
Auth.auth().signIn(with: credential) { (user, error) in
if let error = error {
print("Error \(error)")
return
}
}
}
自動登錄用戶。然後向 Firebase Auth 添加一個監聽器，讓用戶在成功登錄後進入應用程序。並在 deinit 上刪除監聽器。
SignInViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
GIDSignIn.sharedInstance().uiDelegate = self
GIDSignIn.sharedInstance().signInSilently()
handle = Auth.auth().addStateDidChangeListener() { (auth, user) in
if user != nil {
MeasurementHelper.sendLoginEvent()
self.performSegue(withIdentifier: Constants.Segues.SignInToFp, sender: nil)
}
}
}
deinit {
if let handle = handle {
Auth.auth().removeStateDidChangeListener(handle)
}
}
登出
添加退出方法
FCViewController.swift
@IBAction func signOut(_ sender: UIButton) {
let firebaseAuth = Auth.auth()
do {
try firebaseAuth.signOut()
dismiss(animated: true, completion: nil)
} catch let signOutError as NSError {
print ("Error signing out: \(signOutError.localizedDescription)")
}
}
測試以登錄用戶身份閱讀消息
- 點擊運行按鈕。
- 您應該立即轉到登錄屏幕。點擊 Google 登錄按鈕。
- 如果一切順利，您應該會被發送到消息屏幕。
6. 激活實時數據庫
導入消息
在Firebase 控制台的項目中，選擇左側導航欄上的數據庫項。在數據庫的溢出菜單中選擇Import JSON 。瀏覽到Friendlychat 目錄中的initial_messages.json文件，選擇它，然後單擊“導入”按鈕。這將替換數據庫中當前的所有數據。您還可以直接編輯數據庫，使用綠色 + 和紅色 x 來添加和刪除項目。
導入數據庫後應如下所示：
確認 Firebase 數據庫依賴性
在Podfile文件的依賴項塊中，確認包含Firebase/Database 。
Podfile
pod 'Firebase/Database'
同步現有消息
添加將新添加的消息同步到應用程序 UI 的代碼。
您在本部分中添加的代碼將：
- 初始化 Firebase 數據庫並添加監聽器來處理對數據庫所做的更改。
- 更新
DataSnapshot，以便顯示新消息。
修改 FCViewController 的“deinit”、“configureDatabase”和“tableView:cellForRow indexPath:”方法；替換為下面定義的代碼：
FCViewController.swift
deinit {
if let refHandle = _refHandle {
self.ref.child("messages").removeObserver(withHandle: _refHandle)
}
}
func configureDatabase() {
ref = Database.database().reference()
// Listen for new messages in the Firebase database
_refHandle = self.ref.child("messages").observe(.childAdded, with: { [weak self] (snapshot) -> Void in
guard let strongSelf = self else { return }
strongSelf.messages.append(snapshot)
strongSelf.clientTable.insertRows(at: [IndexPath(row: strongSelf.messages.count-1, section: 0)], with: .automatic)
})
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String: String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
return cell
}
測試消息同步
- 點擊運行按鈕。
- 單擊“登錄以開始”按鈕轉至消息窗口。
- 通過單擊“消息”條目旁邊的綠色 + 符號並添加如下所示的對象，直接在 Firebase 控制台中添加新消息：
- 確認它們出現在友好聊天用戶界面中。
7. 發送消息
實施發送消息
將值推送到數據庫。當您使用推送方法將數據添加到 Firebase 實時數據庫時，將添加自動 ID。這些自動生成的 ID 是連續的，這確保了新消息將以正確的順序添加。
修改 FCViewController 的“sendMessage:”方法；替換為下面定義的代碼：
FCViewController.swift
func sendMessage(withData data: [String: String]) {
var mdata = data
mdata[Constants.MessageFields.name] = Auth.auth().currentUser?.displayName
if let photoURL = Auth.auth().currentUser?.photoURL {
mdata[Constants.MessageFields.photoURL] = photoURL.absoluteString
}
// Push data to Firebase Database
self.ref.child("messages").childByAutoId().setValue(mdata)
}
測試發送消息
- 點擊運行按鈕。
- 單擊登錄轉至消息窗口。
- 輸入一條消息並點擊發送。新消息應該在應用 UI 和 Firebase 控制台中可見。
8. 存儲和接收圖像
確認 Firebase 存儲依賴性
在Podfile的依賴項塊中，確認包含Firebase/Storage 。
Podfile
pod 'Firebase/Storage'
在儀表板中激活 Firebase 存儲
轉到 Firebase 控制台並確認已使用“gs://PROJECTID.appspot.com”域激活存儲
如果您看到的是激活窗口，請單擊“開始”以使用默認規則激活它。
配置 Firebase 存儲
FCViewController.swift
func configureStorage() {
storageRef = Storage.storage().reference()
}
接收現有消息中的圖像
添加從 Firebase 存儲下載圖像的代碼。
修改你的FCViewController的“tableView: cellForRowAt indexPath:”方法；替換為下面定義的代碼：
FCViewController.swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable .dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot: DataSnapshot! = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String:String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
if let imageURL = message[Constants.MessageFields.imageURL] {
if imageURL.hasPrefix("gs://") {
Storage.storage().reference(forURL: imageURL).getData(maxSize: INT64_MAX) {(data, error) in
if let error = error {
print("Error downloading: \(error)")
return
}
DispatchQueue.main.async {
cell.imageView?.image = UIImage.init(data: data!)
cell.setNeedsLayout()
}
}
} else if let URL = URL(string: imageURL), let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage.init(data: data)
}
cell.textLabel?.text = "sent by: \(name)"
} else {
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
}
return cell
}
9. 發送圖像消息
實施存儲和發送圖像
上傳用戶的圖像，然後將該圖像的存儲 URL 同步到數據庫，以便該圖像在消息中發送。
修改你的FCViewController的“imagePickerController: didFinishPickingMediaWithInfo:”方法；替換為下面定義的代碼：
FCViewController.swift
func imagePickerController(_ picker: UIImagePickerController,
didFinishPickingMediaWithInfo info: [String : Any]) {
picker.dismiss(animated: true, completion:nil)
guard let uid = Auth.auth().currentUser?.uid else { return }
// if it's a photo from the library, not an image from the camera
if #available(iOS 8.0, *), let referenceURL = info[UIImagePickerControllerReferenceURL] as? URL {
let assets = PHAsset.fetchAssets(withALAssetURLs: [referenceURL], options: nil)
let asset = assets.firstObject
asset?.requestContentEditingInput(with: nil, completionHandler: { [weak self] (contentEditingInput, info) in
let imageFile = contentEditingInput?.fullSizeImageURL
let filePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000))/\((referenceURL as AnyObject).lastPathComponent!)"
guard let strongSelf = self else { return }
strongSelf.storageRef.child(filePath)
.putFile(from: imageFile!, metadata: nil) { (metadata, error) in
if let error = error {
let nsError = error as NSError
print("Error uploading: \(nsError.localizedDescription)")
return
}
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
})
} else {
guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return }
let imageData = UIImageJPEGRepresentation(image, 0.8)
let imagePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000)).jpg"
let metadata = StorageMetadata()
metadata.contentType = "image/jpeg"
self.storageRef.child(imagePath)
.putData(imageData!, metadata: metadata) { [weak self] (metadata, error) in
if let error = error {
print("Error uploading: \(error)")
return
}
guard let strongSelf = self else { return }
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
}
}
測試發送和接收圖像消息
- 點擊運行按鈕。
- 單擊登錄轉至消息窗口。
- 單擊“添加照片”圖標來選擇照片。帶有照片的新消息應該在應用 UI 和 Firebase 控制台中可見。
10. 恭喜！
您已使用 Firebase 輕鬆構建了實時聊天應用程序。
我們涵蓋的內容
- 實時數據庫
- 聯合登錄
- 貯存