Google cam kết thúc đẩy công bằng chủng tộc cho Cộng đồng người da đen. Xem cách thực hiện.
Trang này được dịch bởi Cloud Translation API.
Switch to English

Firebase iOS Codelab Swift

2efe6805ef369641.png

Chào mừng bạn đến với bộ mã trò chuyện thân thiện. Trong bảng mã này, bạn sẽ học cách sử dụng nền tảng Firebase để tạo các ứng dụng iOS. Bạn sẽ triển khai ứng dụng trò chuyện và theo dõi hiệu suất của ứng dụng này bằng Firebase.

Bộ mã này cũng có sẵn trong Objective-C.

Những gì bạn sẽ học

  • Cho phép người dùng đăng nhập.
  • Đồng bộ hóa dữ liệu bằng Cơ sở dữ liệu thời gian thực của Firebase.
  • Lưu trữ tệp nhị phân trong Bộ nhớ Firebase.

Những gì bạn cần

  • Xcode
  • Ca cao
  • Một thiết bị thử nghiệm với iOS 8.0+ hoặc trình mô phỏng

Bạn sẽ sử dụng hướng dẫn này như thế nào?

Chỉ đọc qua Đọc nó và hoàn thành các bài tập

Đánh giá trải nghiệm của bạn với việc xây dựng ứng dụng iOS như thế nào?

Người mới Trung gian Thành thạo

Sao chép kho lưu trữ GitHub từ dòng lệnh.

$ git clone https://github.com/firebase/codelab-friendlychat-ios

2f4c98d858c453fe.png

Để xây dựng ứng dụng khởi động:

  1. Trong cửa sổ dòng lệnh, điều hướng đến android_studio_folder.png ios-starter/swift-starter từ bản tải xuống mã mẫu của bạn
  2. Chạy pod install --repo-update
  3. Mở tệp FriendlyChatSwift.xcworkspace để mở dự án bằng Xcode.
  4. Nhấn vào 98205811bbed9d74.png Nút chạy .

Bạn sẽ thấy màn hình chính của Trò chuyện thân thiện xuất hiện sau vài giây. Giao diện người dùng sẽ xuất hiện. Tuy nhiên, tại thời điểm này, bạn không thể đăng nhập, gửi hoặc nhận tin nhắn. Ứng dụng sẽ hủy bỏ với một ngoại lệ cho đến khi bạn hoàn thành bước tiếp theo.

Tạo dự án

Từ bảng điều khiển Firebase, chọn Thêm dự án .

Gọi dự án là FriendlyChat , sau đó nhấp vào Tạo dự án .

Ảnh chụp màn hình từ 2015-11-06 14: 13: 39.png

Kết nối ứng dụng iOS của bạn

  1. Từ màn hình Tổng quan về dự án của dự án mới của bạn, hãy nhấp vào Thêm Firebase vào ứng dụng iOS của bạn .
  2. Nhập ID gói, là " com.google.firebase.codelab.FriendlyChatSwift ".
  3. Nhập id App Store là " 123456 ".
  4. Nhấp vào Đăng ký ứng dụng .

Thêm tệp GoogleService-Info.plist vào ứng dụng của bạn

Trên màn hình thứ hai, nhấp vào Tải xuống GoogleService-Info.plist để tải xuống tệp cấu hình chứa tất cả siêu dữ liệu Firebase cần thiết cho ứng dụng của bạn. Sao chép tệp đó vào ứng dụng của bạn và thêm tệp đó vào mục tiêu FriendlyChatSwift .

Bây giờ bạn có thể nhấp vào "x" ở góc trên bên phải của cửa sổ bật lên để đóng cửa sổ bật lên - bỏ qua bước 3 và 4 - vì bạn sẽ thực hiện các bước đó tại đây.

19d59efb213ddbdc.png

Nhập mô-đun Firebase

Bắt đầu bằng cách đảm bảo rằng mô-đun Firebase được nhập.

AppDelegate.swift , FCViewController.swift

import Firebase

Định cấu hình Firebase trong AppDelegate

Sử dụng phương pháp "config" trong FirebaseApp bên trong hàm ứng dụng: didFinishLaunchingWithOptions để định cấu hình các dịch vụ Firebase cơ bản từ tệp .plist của bạn.

AppDelegate.swift

  func application(_ application: UIApplication, didFinishLaunchingWithOptions
      launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
  FirebaseApp.configure()
  GIDSignIn.sharedInstance().delegate = self
  return true
}

Sử dụng các quy tắc để hạn chế đối với người dùng đã xác thực

Bây giờ chúng tôi sẽ thêm quy tắc yêu cầu xác thực trước khi đọc hoặc viết bất kỳ tin nhắn nào. Để làm điều này, chúng tôi thêm các quy tắc sau vào đối tượng dữ liệu thư của chúng tôi. Từ trong phần Cơ sở dữ liệu của bảng điều khiển Firebase, chọn Cơ sở dữ liệu thời gian thực, sau đó nhấp vào tab Quy tắc. Sau đó, cập nhật các quy tắc để chúng trông như thế này:

{
  "rules": {
    "messages": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
  }
}

Để biết thêm thông tin về cách hoạt động của điều này (bao gồm tài liệu về biến "auth"), hãy xem tài liệu bảo mật của Firebase.

Định cấu hình API xác thực

Trước khi ứng dụng của bạn có thể truy cập vào các API xác thực Firebase thay mặt cho người dùng của bạn, bạn sẽ phải bật nó

  1. Điều hướng đến bảng điều khiển Firebase và chọn dự án của bạn
  2. Chọn xác thực
  3. Chọn tab Phương thức Đăng nhập
  4. Chuyển công tắc Google thành bật (xanh lam)
  5. Nhấn Lưu trên hộp thoại kết quả

Nếu bạn gặp lỗi sau đó trong bảng mã này với thông báo "CONFIGURATION_NOT_FOUND", hãy quay lại bước này và kiểm tra kỹ công việc của bạn.

Xác nhận sự phụ thuộc của Firebase Auth

Xác nhận các phụ thuộc Firebase Auth tồn tại trong tệp Podfile .

Podfile

pod 'Firebase/Auth'

Thiết lập Info.plist của bạn để Đăng nhập bằng Google.

Bạn sẽ cần thêm lược đồ URL tùy chỉnh vào dự án XCode của mình.

  1. Mở cấu hình dự án của bạn: bấm đúp vào tên dự án trong chế độ xem dạng cây bên trái. Chọn ứng dụng của bạn từ phần MỤC TIÊU, sau đó chọn tab Thông tin và mở rộng phần Loại URL.
  2. Nhấp vào nút + và thêm lược đồ URL cho ID khách hàng đã đảo ngược của bạn. Để tìm giá trị này, hãy mở tệp cấu hình GoogleService-Info.plist và tìm khóa REVERSED_CLIENT_ID. Sao chép giá trị của khóa đó và dán vào hộp Lược đồ URL trên trang cấu hình. Để trống các trường khác.
  3. Khi hoàn tất, cấu hình của bạn sẽ trông giống như sau (nhưng với các giá trị dành riêng cho ứng dụng của bạn):

1b54d5bd2f4f1448.png

Đặt clientID cho Đăng nhập Google

Sau khi Firebase được định cấu hình, chúng tôi có thể sử dụng clientID để thiết lập Đăng nhập bằng Google bên trong phương thức "didFinishLaunchingWithOptions:".

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
}

Thêm trình xử lý đăng nhập

Sau khi kết quả Đăng nhập bằng Google thành công, hãy sử dụng tài khoản để xác thực với 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
      }
    }
  }

Tự động đăng nhập người dùng. Sau đó, thêm trình lắng nghe vào Firebase Auth, để cho phép người dùng vào ứng dụng, sau khi đăng nhập thành công. Và xóa trình nghe đó trên 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)
    }
  }

Đăng xuất

Thêm phương thức Đăng xuất

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)")
    }
  }

Kiểm tra việc đọc tin nhắn với tư cách người dùng đã đăng nhập

  1. Nhấn vào 98205811bbed9d74.png Nút chạy .
  2. Bạn sẽ ngay lập tức được đưa đến màn hình đăng nhập. Nhấn vào nút Đăng nhập bằng Google.
  3. Sau đó, bạn sẽ được chuyển đến màn hình nhắn tin nếu mọi thứ hoạt động tốt.

2efe6805ef369641.png

Nhập tin nhắn

Trong dự án của bạn trong bảng điều khiển Firebase, hãy chọn mục Cơ sở dữ liệu trên thanh điều hướng bên trái. Trong menu mục bổ sung của Cơ sở dữ liệu, chọn Nhập JSON . Duyệt đến tệp initial_messages.json trong thư mục thân thiện, chọn tệp đó rồi nhấp vào nút Nhập . Điều này sẽ thay thế bất kỳ dữ liệu nào hiện có trong cơ sở dữ liệu của bạn. Bạn cũng có thể chỉnh sửa cơ sở dữ liệu trực tiếp, sử dụng dấu x màu xanh lá cây + và màu đỏ để thêm và xóa các mục.

20ccf4856b715b4c.png

Sau khi nhập cơ sở dữ liệu của bạn sẽ trông như thế này:

f3e0367f1c9cd187.png

Xác nhận sự phụ thuộc vào cơ sở dữ liệu Firebase

Trong khối phụ thuộc của tệp Podfile , xác nhận rằng Firebase/Database được bao gồm.

Podfile

pod 'Firebase/Database'

Đồng bộ hóa các tin nhắn hiện có

Thêm mã đồng bộ hóa các tin nhắn mới được thêm vào giao diện người dùng ứng dụng.

Mã bạn thêm vào phần này sẽ:

  • Khởi tạo cơ sở dữ liệu Firebase và thêm trình lắng nghe để xử lý các thay đổi được thực hiện đối với cơ sở dữ liệu.
  • Cập nhật DataSnapshot để các thông báo mới sẽ được hiển thị.

Sửa đổi các phương thức "deinit", "configureDatabase" và "tableView: cellForRow indexPath:" của FCViewController; thay thế bằng mã được xác định bên dưới:

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
  }

Kiểm tra đồng bộ hóa tin nhắn

  1. Nhấn vào 98205811bbed9d74.png Nút chạy .
  2. Nhấp vào nút Đăng nhập để bắt đầu để chuyển đến cửa sổ tin nhắn.
  3. Thêm tin nhắn mới trực tiếp trong bảng điều khiển Firebase bằng cách nhấp vào biểu tượng + màu xanh lục bên cạnh mục nhập "tin nhắn" và thêm một đối tượng như sau: f9876ffc8b316b14.png
  4. Xác nhận rằng họ hiển thị trong giao diện người dùng Trò chuyện thân thiện.

Triển khai Gửi tin nhắn

Đẩy giá trị vào cơ sở dữ liệu. Khi bạn sử dụng phương pháp đẩy để thêm dữ liệu vào Cơ sở dữ liệu thời gian thực của Firebase, một ID tự động sẽ được thêm vào. Các ID được tạo tự động này là tuần tự, điều này đảm bảo rằng các thư mới sẽ được thêm vào theo đúng thứ tự.

Sửa đổi phương thức "sendMessage:" của FCViewController; thay thế bằng mã được xác định bên dưới:

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)
  }

Kiểm tra việc gửi tin nhắn

  1. Nhấn vào 98205811bbed9d74.png Nút chạy .
  2. Nhấp vào Đăng nhập để chuyển đến cửa sổ thư.
  3. Nhập tin nhắn và nhấn gửi. Thông báo mới sẽ hiển thị trong giao diện người dùng ứng dụng và trong bảng điều khiển Firebase.

Xác nhận mức độ phụ thuộc của bộ nhớ Firebase

Trong khối phụ thuộc của Podfile , xác nhận Firebase/Storage được bao gồm.

Podfile

pod 'Firebase/Storage'

Kích hoạt Bộ nhớ Firebase trong trang tổng quan

Đi tới bảng điều khiển Firebase và xác nhận rằng Bộ nhớ đã được kích hoạt với miền "gs: //PROJECTID.appspot.com"

b0438b37a588bcee.png

Nếu bạn thấy cửa sổ kích hoạt thay vào đó, hãy nhấp vào "BẮT ĐẦU" để kích hoạt nó với các quy tắc mặc định.

c290bbebff2cafa7.png

Định cấu hình FirebaseStorage

FCViewController.swift

  func configureStorage() {
    storageRef = Storage.storage().reference()
  }

Nhận hình ảnh trong tin nhắn hiện có

Thêm mã tải xuống hình ảnh từ Bộ nhớ Firebase.

Sửa đổi phương thức "tableView: cellForRowAt indexPath:" của FCViewController; thay thế bằng mã được xác định bên dưới:

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
  }

Triển khai Lưu trữ và Gửi Hình ảnh

Tải lên hình ảnh từ người dùng, sau đó đồng bộ hóa URL lưu trữ của hình ảnh này với cơ sở dữ liệu để hình ảnh này được gửi bên trong thư.

Sửa đổi phương thức "imagePickerController: didFinishPickingMediaWithInfo:" của FCViewController; thay thế bằng mã được xác định bên dưới:

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])
      }
    }
  }

Kiểm tra việc gửi và nhận tin nhắn hình ảnh

  1. Nhấn vào 98205811bbed9d74.png Nút chạy .
  2. Nhấp vào Đăng nhập để chuyển đến cửa sổ thư.
  3. Nhấp vào biểu tượng "thêm ảnh" để chọn ảnh. Thông báo mới có ảnh sẽ hiển thị trong giao diện người dùng ứng dụng và trong bảng điều khiển Firebase.

Bạn đã sử dụng Firebase để dễ dàng tạo ứng dụng trò chuyện thời gian thực.

Những gì chúng tôi đã đề cập

  • Cơ sở dữ liệu thời gian thực
  • Đăng nhập liên kết
  • Lưu trữ

Tìm hiểu thêm