Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Firebase iOS Codelab Swift

2efe6805ef369641.png

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

קוד קוד זה זמין גם ב- Objective-C.

מה תלמד

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

מה אתה צריך

  • Xcode
  • CocoaPods
  • מכשיר בדיקה עם 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 להורדת קובץ תצורה המכיל את כל מטא הנתונים הדרושים של 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
}

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

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

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

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

הגדר תצורת ממשקי API לאימות

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

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

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

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

ודא שקיימות תלות Podfile של Podfile בקובץ Podfile .

פודפיל

pod 'Firebase/Auth'

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

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

  1. פתח את תצורת הפרויקט שלך: לחץ פעמיים על שם הפרויקט בתצוגת העץ השמאלית. בחר באפליקציה שלך מקטע TARGETS, ואז בחר בכרטיסייה מידע והרחיב את הקטע סוגי כתובות אתרים.
  2. לחץ על כפתור + והוסף ערכת כתובות אתרים עבור מזהה הלקוח ההפוך שלך. כדי למצוא ערך זה, פתח את קובץ התצורה של 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, כדי לאפשר למשתמש להיכנס לאפליקציה לאחר כניסה מוצלחת. והסר את המאזין ב- 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 הירוק + והאדום כדי להוסיף ולהסיר פריטים.

20ccf4856b715b4c.png

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

f3e0367f1c9cd187.png

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

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

פודפיל

pod 'Firebase/Database'

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

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

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

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

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

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. אשר שהם מופיעים בממשק המשתמש של צ'אט ידידותי.

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

דחוף ערכים למסד הנתונים. כאשר אתה משתמש בשיטת הדחיפה כדי להוסיף נתונים למסד הנתונים בזמן אמת של 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 , ודא 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 כדי לבנות בקלות אפליקציית צ'אט בזמן אמת.

מה סיקרנו

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

למד עוד