Firebase iOS Codelab Swift

2efe6805ef369641.png

ברוכים הבאים לקודלאב Friendly Chat. בתפריט קוד זה תלמד כיצד להשתמש בפלטפורמת Firebase ליצירת יישומי iOS. תוכל ליישם לקוח צ'אט ולפקח על הביצועים שלו באמצעות Firebase.

Codelab זה זמין גם ב- Objective-C.

מה תלמד

  • אפשר למשתמשים להיכנס.
  • סנכרן נתונים באמצעות מסד הנתונים בזמן אמת של Firebase.
  • אחסן קבצים בינאריים ב- Firebase Storage.

מה אתה צריך

  • Xcode
  • קקאו פודים
  • מכשיר בדיקה עם iOS 8.0+ או סימולטור

כיצד תשתמש במדריך זה?

תקרא את זה רק קרא אותו והשלים את התרגילים

כיצד היית מדרג את החוויה שלך בבניית אפליקציות iOS?

טִירוֹן ביניים בקיא

שיבוט את מאגר GitHub משורת הפקודה.

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

2f4c98d858c453fe.png

לבניית אפליקציית המתנע:

  1. בחלון מסוף, נווט אל android_studio_folder.png ios-starter/swift-starter ספרייה מן הורידו את הקוד לדוגמה שלך
  2. הפעלת pod install --repo-update
  3. פתח את הקובץ FriendlyChatSwift.xcworkspace כדי לפתוח את הפרויקט ב- Xcode.
  4. לחץ על 98205811bbed9d74.png כפתור הפעלה.

אתה אמור לראות את מסך הבית של צ'אט ידידותי מופיע לאחר מספר שניות. ממשק המשתמש צריך להופיע. עם זאת, בשלב זה אינך יכול להיכנס, לשלוח או לקבל הודעות. האפליקציה תבוטל למעט חריגה עד שתשלים את השלב הבא.

צור פרויקט

מ Firebase הקונסולה לבחור להוסיף לפרויקט.

התקשר הפרויקט FriendlyChat , ולאחר מכן לחץ על צור הפרויקט.

צילום מסך מ- 2015-11-06 14: 13: 39.png

חבר את אפליקציית iOS שלך

  1. ממסך סקירת הפרויקט של הפרויקט החדש שלך, לחץ על הוסף Firebase אפליקציית iOS שלך.
  2. הזן את זיהוי החבילה, כמו " com.google.firebase.codelab.FriendlyChatSwift ".
  3. הזן את מזהה App Store כמו " 123456 ".
  4. לחץ לרשום את האפליקציה.

הוסף את קובץ GoogleService-Info.plist לאפליקציה שלך

על הורדת לחץ על המסך השני GoogleService-info.plist להוריד קובץ תצורה המכיל את כל metadata Firebase הכרחי עבור האפליקציה שלך. להעתיק את הקובץ ליישום שלך ולהוסיף אותו אל היעד FriendlyChatSwift.

כעת תוכל ללחוץ על "x" בפינה השמאלית העליונה של המוקפץ כדי לסגור אותו - דילוג על שלבים 3 ו -4 - כפי שתבצע את השלבים האלה כאן.

19d59efb213ddbdc.png

ייבא מודול Firebase

התחל על ידי הקפדה על Firebase מודול מיובא.

AppDelegate.swift , FCViewController.swift

import Firebase

הגדר את Firebase ב- AppDelegate

השתמש בשיטת "הגדר" ב- FirebaseApp בתוך היישום: didFinishLaunchingWithOptions כדי להגדיר את שירותי Firebase הבסיסיים מקובץ ה- .plist שלך.

AppDelegate.swift

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

השתמש בכללים להגבלת משתמשים מאומתים

כעת נוסיף כלל הדורש אימות לפני קריאה או כתיבה של הודעות כלשהן. לשם כך אנו מוסיפים את הכללים הבאים לאובייקט נתוני ההודעות שלנו. מתוך אזור Database של קונסולת Firebase לבחור מסד זמן אמת, ולאחר מכן לחץ על הכרטיסייה הכללית. לאחר מכן עדכן את החוקים כך שהם ייראו כך:

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

לקבלת מידע נוסף בנוגע לאופן הפעולה הזו (כולל תיעוד על המשתנה "אימות") לראות את Firebase תיעוד ביטחון .

קבע את התצורה של ממשקי API לאימות

לפני שהיישום שלך יוכל לגשת לממשקי ה- API של אימות Firebase בשם המשתמשים שלך, יהיה עליך להפעיל אותו

  1. הנווט אלי Firebase הקונסולה ובחר הפרויקט שלך
  2. אימות בחר
  3. בחר את כרטיסיית השיטה היכנס
  4. החלף בין מצבי גוגל כדי לאפשר (כחול)
  5. לחצו שמור על הדו-שיח שתופיע

אם תקבל שגיאות מאוחר יותר בתא codelab עם ההודעה "CONFIGURATION_NOT_FOUND", חזור לשלב זה ובדוק שוב את עבודתך.

אשר את תלות אימות Firebase

תלות אישור Firebase המחבר קיימת Podfile הקובץ.

קובץ פוד

pod 'Firebase/Auth'

הגדר את Info.plist שלך עבור כניסה ל- Google.

יהיה עליך להוסיף ערכת URL מותאמת אישית לפרויקט XCode שלך.

  1. פתח את תצורת הפרויקט שלך: לחץ פעמיים על שם הפרויקט בתצוגת העץ השמאלית. בחר את האפליקציה שלך מהקטע TARGETS, בחר בכרטיסיה מידע והרחיב את הקטע סוגי כתובות אתרים.
  2. לחץ על הלחצן + והוסף ערכת כתובת URL עבור מזהה הלקוח ההפוך שלך. כדי למצוא ערך זה, פתח את קובץ התצורה של GoogleService-Info.plist וחפש את המפתח REVERSED_CLIENT_ID. העתק את הערך של מפתח זה והדבק אותו בתיבה ערכות כתובות אתרים בדף התצורה. השאר את השדות האחרים ריקים.
  3. בסיום, התצורה שלך צריכה להיראות דומה לדברים הבאים (אך עם הערכים הספציפיים ליישום שלך):

1b54d5bd2f4f1448.png

הגדר לקוח מזהה עבור כניסה ל- Google

לאחר קביעת התצורה של Firebase, נוכל להשתמש ב- clientID כדי להגדיר את כניסה ל- Google בתוך שיטת "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
}

הוסף את מטפל הכניסה

לאחר שתוצאת הכניסה של 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, כדי לאפשר למשתמש להיכנס לאפליקציה, לאחר כניסה מוצלחת. והסר את המאזין on 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)")
    }
  }

בדוק הודעות קריאה כמשתמש מחובר

  1. לחץ על 98205811bbed9d74.png כפתור הפעלה.
  2. עליך לשלוח אותך מיד למסך הכניסה. הקש על כפתור הכניסה של Google.
  3. לאחר מכן עליך לשלוח אותך למסך ההודעות אם הכל עבד היטב.

2efe6805ef369641.png

ייבוא ​​הודעות

בפרויקט שלך Firebase קונסולה לבחור בפריט המסד בסרגל הניווט השמאלי. באפשרויות הנוספות של המסד לבחור יבוא JSON. עיון אלי initial_messages.json הקובץ בתיקיית friendlychat, בחר אותו ולאחר מכן לחץ על לחצן יבוא. זה יחליף את כל הנתונים הנמצאים כעת במסד הנתונים שלך. תוכל גם לערוך את מסד הנתונים ישירות באמצעות x + ואדום x כדי להוסיף ולהסיר פריטים.

20ccf4856b715b4c.png

לאחר ייבוא ​​מסד הנתונים שלך אמור להיראות כך:

f3e0367f1c9cd187.png

אשר את תלות מסד הנתונים של Firebase

בבלוק התלות של Podfile הקובץ, לאשר כי Firebase/Database כלול.

קובץ פוד

pod 'Firebase/Database'

סנכרן הודעות קיימות

הוסף קוד שמסנכרן הודעות שנוספו לממשק המשתמש של האפליקציה.

הקוד שתוסיף בחלק זה יהיה:

  • אתחל את מסד הנתונים של Firebase והוסף מאזין שיטפל בשינויים שבוצעו במסד הנתונים.
  • עדכן את DataSnapshot כך יוצגו הודעות חדשות.

שנה את השיטות "deinit", "configureDatabase" ו- "tableView: cellForRow indexPath:" של FCViewController שלך; החלף בקוד המוגדר להלן:

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
  }

סנכרון הודעות בדיקה

  1. לחץ על 98205811bbed9d74.png כפתור הפעלה.
  2. לחץ על הכניסה להתחיל כפתור כדי לעבור לחלון ההודעות.
  3. הוסף הודעות חדשות ישירות במסוף Firebase על ידי לחיצה על הסמל הירוק + שליד הערך "הודעות" והוספת אובייקט כמו: f9876ffc8b316b14.png
  4. אשר שהם מופיעים בממשק המשתמש של Friendly-Chat.

יישום שלח הודעה

דחוף ערכים למסד הנתונים. כאשר אתה משתמש בשיטת הדחיפה כדי להוסיף נתונים למסד הנתונים של Firebase בזמן אמת, יתווסף מזהה אוטומטי. המזהים שנוצרו אוטומטית הם רציפים, מה שמבטיח כי הודעות חדשות יתווספו בסדר הנכון.

שנה את שיטת "sendMessage:" של FCViewController שלך; החלף בקוד המוגדר להלן:

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

בדיקת שליחת הודעות

  1. לחץ על 98205811bbed9d74.png כפתור הפעלה.
  2. לחץ כניסה ללכת לחלון הודעות.
  3. הקלד הודעה ולחץ על שלח. ההודעה החדשה צריכה להיות גלויה בממשק המשתמש של האפליקציה ובמסוף Firebase.

אשר את תלות אחסון Firebase

בבלוק תלות של Podfile , לאשר Firebase/Storage כלול.

קובץ פוד

pod 'Firebase/Storage'

הפעל את אחסון Firebase בלוח המחוונים

עבור אל מסוף Firebase וודא שאחסון מופעל באמצעות הדומיין "gs: //PROJECTID.appspot.com"

b0438b37a588bcee.png

אם אתה רואה את חלון ההפעלה במקום זאת, לחץ על "התחל" כדי להפעיל אותו עם כללי ברירת מחדל.

c290bbebff2cafa7.png

הגדר את FirebaseStorage

FCViewController.swift

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

קבל תמונות בהודעות קיימות

הוסף קוד שמוריד תמונות מאחסון Firebase.

שנה את שיטת "tableView: cellForRowAt indexPath:" של FCViewController שלך; החלף בקוד המוגדר להלן:

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
  }

יישום אחסון ושליחת תמונות

העלה תמונה מהמשתמש, ולאחר מכן סנכרן את כתובת האתר של האחסון של התמונה למסד הנתונים כך שתמונה זו תישלח בתוך ההודעה.

שנה את שיטת "imagePickerController: didFinishPickingMediaWithInfo:" של FCViewController שלך; החלף בקוד המוגדר להלן:

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

בדיקת שליחה וקבלה של הודעות תמונה

  1. לחץ על 98205811bbed9d74.png כפתור הפעלה.
  2. לחץ כניסה ללכת לחלון הודעות.
  3. לחץ על סמל "הוסף תמונה" כדי לבחור תמונה. ההודעה החדשה עם התמונה צריכה להיות גלויה בממשק המשתמש של האפליקציה ובמסוף Firebase.

השתמשת ב- Firebase כדי לבנות בקלות יישום צ'אט בזמן אמת.

מה שסיקרנו

  • מסד נתונים בזמן אמת
  • כניסה לפדרציה
  • אִחסוּן

למד עוד