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.

Firebase iOS Codelab Swift

2efe6805ef369641.png

Chào mừng bạn đến với codelab 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ữ các 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 dành cho người mới bắt đầu:

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

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 một 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ừ căn cứ hỏa lực console chọn Add Project.

Hãy gọi cho dự án FriendlyChat , sau đó bấm vào Create Project.

Ả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 chính của dự án Tổng quan về dự án mới của bạn, nhấp Thêm căn cứ hỏa lực để ứng dụng iOS của bạn.
  2. Nhập ID bó, như " com.google.firebase.codelab.FriendlyChatSwift ".
  3. Nhập id App Store là " 123456 ".
  4. Nhấn vào Register App.

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

Trên màn hình thứ hai bấm vào Download GoogleService-Info.plist để tải về một tập tin cấu hình có chứa tất cả các căn cứ hỏa lực siêu dữ liệu cần thiết cho ứng dụng của bạn. Sao chép tập tin mà ứng dụng của bạn và thêm nó vào các 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 các Firebase mô-đun được nhập khẩu.

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 một 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ừ bên trong phần Cơ sở dữ liệu của căn cứ hỏa lực console chọn cơ sở dữ liệu thời gian thực, sau đó bấm vào tab Quy tắc. Sau đó, cập nhật các quy tắc để chúng trông giống như sau:

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

Để biết thêm thông tin về cách thức hoạt động này (bao gồm cả tài liệu về biến "auth") xem căn cứ hỏa lực tài liệu an ninh .

Đị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 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 căn cứ hỏa lực console và chọn dự án của bạn
  2. Chọn xác thực
  3. Chọn Trong Method Đăng tab
  4. Chuyển đổi công tắc của Google để kích hoạt (màu xanh)
  5. Nhấn Save 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ăn cứ hỏa lực Auth phụ thuộc tồn tại trong Podfile tập tin.

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 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 là người dùng đã đăng nhập

  1. Nhấn vào 98205811bbed9d74.png Run nút.
  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 căn cứ hỏa lực console chọn mục Cơ sở dữ liệu trên thanh điều hướng bên trái. Trong menu tràn của Cơ sở dữ liệu chọn Import JSON. Duyệt đến initial_messages.json tập tin trong thư mục friendlychat, chọn nó sau đó nhấn nút Import. Đ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ẽ giống như sau:

f3e0367f1c9cd187.png

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

Trong sự phụ thuộc khối của Podfile tập tin, 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 nên thư 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 Run nút.
  2. Nhấp vào Đăng nhập để có được nút bắt đầu đi về phía 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 Run nút.
  2. Nhấn Đăng nhập để đi đến cửa sổ tin nhắn.
  3. Nhập một 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 sự phụ thuộc của bộ nhớ Firebase

Trong sự phụ thuộc khối 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 nhì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 Run nút.
  2. Nhấn Đăng nhập để đi đến cửa sổ tin nhắn.
  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 xây dựng ứ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
  • Kho

Tìm hiểu thêm