फायरबेस आईओएस कोडलैब स्विफ्ट

1 अवलोकन

दोस्ताना चैट कोडलैब में आपका स्वागत है। इस कोडलैब में, आप सीखेंगे कि आईओएस एप्लिकेशन बनाने के लिए फायरबेस प्लेटफॉर्म का उपयोग कैसे करें। आप एक चैट क्लाइंट लागू करेंगे और फायरबेस का उपयोग करके उसके प्रदर्शन की निगरानी करेंगे।

यह कोडलैब ऑब्जेक्टिव-सी में भी उपलब्ध है।

आप क्या सीखेंगे

• उपयोगकर्ताओं को साइन इन करने दें.
• फायरबेस रीयलटाइम डेटाबेस का उपयोग करके डेटा सिंक करें।
• फायरबेस स्टोरेज में बाइनरी फाइल स्टोर करें।

आपको किस चीज़ की ज़रूरत पड़ेगी

• एक्सकोड
• कोकोपोड्स
• आईओएस 8.0+ या सिम्युलेटर के साथ एक टेस्ट डिवाइस

2. नमूना कोड प्राप्त करें

कमांड लाइन से GitHub रिपॉजिटरी को क्लोन करें।

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

3. स्टार्टर ऐप बनाएं

स्टार्टर ऐप बनाने के लिए:

1. एक टर्मिनल विंडो में, नेविगेट करें आपके नमूना कोड डाउनलोड से ios-starter/swift-starter निर्देशिका
2. pod install --repo-update चलाएं
3. प्रोजेक्ट को Xcode में खोलने के लिए FriendlyChatSwift.xcworkspace फ़ाइल खोलें।
4. क्लिक करें रन बटन।

आपको कुछ सेकंड के बाद फ्रेंडली चैट होम स्क्रीन दिखाई देनी चाहिए। यूआई दिखना चाहिए। हालाँकि, इस समय आप साइन इन नहीं कर सकते, संदेश भेज या प्राप्त नहीं कर सकते। जब तक आप अगला चरण पूरा नहीं कर लेते, तब तक ऐप एक अपवाद के साथ निरस्त हो जाएगा।

4. फायरबेस कंसोल प्रोजेक्ट बनाएं

प्रोजेक्ट बनाएं

फायरबेस कंसोल से प्रोजेक्ट जोड़ें चुनें।

प्रोजेक्ट FriendlyChat को कॉल करें, फिर क्रिएट प्रोजेक्ट पर क्लिक करें।

अपने आईओएस ऐप को कनेक्ट करें

1. अपने नए प्रोजेक्ट की प्रोजेक्ट अवलोकन स्क्रीन से, अपने iOS ऐप में Firebase जोड़ें पर क्लिक करें।
2. बंडल आईडी, " com.google.firebase.codelab.FriendlyChatSwift " के रूप में दर्ज करें।
3. ऐप स्टोर आईडी को " 123456 " के रूप में दर्ज करें।
4. रजिस्टर ऐप पर क्लिक करें।

GoogleService-Info.plist फ़ाइल को अपने ऐप में जोड़ें

दूसरी स्क्रीन पर एक कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए GoogleService-Info.plist डाउनलोड करें पर क्लिक करें जिसमें आपके ऐप के लिए सभी आवश्यक फायरबेस मेटाडेटा शामिल हैं। उस फ़ाइल को अपने एप्लिकेशन में कॉपी करें और उसे FriendlyChatSwift लक्ष्य में जोड़ें।

अब आप इसे बंद करने के लिए पॉपअप के ऊपरी दाएं कोने में "x" पर क्लिक कर सकते हैं - चरण 3 और 4 को छोड़कर - जैसा कि आप यहां उन चरणों का पालन करेंगे।

फायरबेस मॉड्यूल आयात करें

यह सुनिश्चित करके प्रारंभ करें कि Firebase मॉड्यूल आयात किया गया है।

AppDelegate.swift , FCViewController.swift

import Firebase

AppDelegate में Firebase को कॉन्फ़िगर करें

अपनी .plist फ़ाइल से अंतर्निहित Firebase सेवाओं को कॉन्फ़िगर करने के लिए application:didFinishLaunchingWithOptions फ़ंक्शन के अंदर FirebaseApp में "कॉन्फ़िगर करें" विधि का उपयोग करें।

ऐपडिलेगेट.स्विफ्ट

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

5. उपयोगकर्ताओं की पहचान करें

प्रमाणीकृत उपयोगकर्ताओं तक सीमित करने के लिए नियमों का उपयोग करें

अब हम किसी संदेश को पढ़ने या लिखने से पहले प्रमाणीकरण की आवश्यकता के लिए एक नियम जोड़ेंगे। ऐसा करने के लिए हम अपने संदेश डेटा ऑब्जेक्ट में निम्नलिखित नियम जोड़ते हैं। फायरबेस कंसोल के डेटाबेस सेक्शन के भीतर से रीयलटाइम डेटाबेस का चयन करें, फिर रूल्स टैब पर क्लिक करें। फिर नियमों को अपडेट करें ताकि वे इस तरह दिखें:

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

यह कैसे काम करता है इस बारे में अधिक जानकारी के लिए ("प्रमाणीकरण" चर पर प्रलेखन सहित) फायरबेस सुरक्षा दस्तावेज देखें।

प्रमाणीकरण API कॉन्फ़िगर करें

इससे पहले कि आपका एप्लिकेशन आपके उपयोगकर्ताओं की ओर से Firebase प्रमाणीकरण API तक पहुंच सके, आपको इसे सक्षम करना होगा

1. फायरबेस कंसोल पर नेविगेट करें और अपनी परियोजना का चयन करें
2. प्रमाणीकरण का चयन करें
3. साइन इन मेथड टैब चुनें
4. Google स्विच को सक्षम करने के लिए टॉगल करें (नीला)
5. परिणामी संवाद पर सहेजें दबाएं

यदि आपको बाद में इस कोडलैब में "CONFIGURATION_NOT_FOUND" संदेश के साथ त्रुटियां मिलती हैं, तो इस चरण पर वापस आएं और अपने काम की दोबारा जांच करें।

फायरबेस प्रमाणीकरण निर्भरता की पुष्टि करें

पुष्टि करें कि Podfile फ़ाइल में फायरबेस प्रामाणिक निर्भरता मौजूद है।

पोडफाइल

pod 'Firebase/Auth'

Google साइन इन के लिए अपना Info.plist सेटअप करें।

आपको अपने एक्सकोड प्रोजेक्ट में एक कस्टम यूआरएल योजना जोड़ने की आवश्यकता होगी।

1. अपना प्रोजेक्ट कॉन्फ़िगरेशन खोलें: बाएं ट्री व्यू में प्रोजेक्ट के नाम पर डबल-क्लिक करें। TARGETS अनुभाग से अपने ऐप का चयन करें, फिर जानकारी टैब का चयन करें और URL प्रकार अनुभाग का विस्तार करें।
2. + बटन पर क्लिक करें, और अपनी उलटी क्लाइंट आईडी के लिए एक URL योजना जोड़ें। यह मान खोजने के लिए, GoogleService-Info.plist कॉन्फ़िगरेशन फ़ाइल खोलें, और REVERSED_CLIENT_ID कुंजी देखें। उस कुंजी के मान की प्रतिलिपि बनाएँ, और उसे कॉन्फ़िगरेशन पृष्ठ पर URL स्कीम बॉक्स में पेस्ट करें। अन्य क्षेत्रों को खाली छोड़ दें।
3. पूर्ण होने पर, आपका कॉन्फ़िगरेशन निम्न के समान दिखना चाहिए (लेकिन आपके एप्लिकेशन-विशिष्ट मानों के साथ):

Google साइन इन के लिए क्लाइंट आईडी सेट करें

फायरबेस कॉन्फ़िगर होने के बाद, हम "didFinishLaunchingWithOptions:" विधि के अंदर Google साइन इन सेट अप करने के लिए क्लाइंटआईडी का उपयोग कर सकते हैं।

ऐपडिलेगेट.स्विफ्ट

  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 के साथ प्रमाणित करने के लिए खाते का उपयोग करें।

ऐपडिलेगेट.स्विफ्ट

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

उपयोगकर्ता में स्वचालित रूप से साइन इन करें। फिर सफलतापूर्वक साइन इन करने के बाद, उपयोगकर्ता को ऐप में जाने देने के लिए फायरबेस ऑथ में एक श्रोता जोड़ें। और श्रोता को deinit पर हटा दें।

साइनइनव्यूकंट्रोलर.स्विफ्ट

  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.स्विफ्ट

  @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. क्लिक करें रन बटन।
2. आपको तुरंत साइन-इन स्क्रीन पर भेज दिया जाना चाहिए। Google साइन-इन बटन पर टैप करें।
3. अगर सब कुछ ठीक से काम करता है तो आपको फिर मैसेजिंग स्क्रीन पर भेजा जाना चाहिए।

6. रीयलटाइम डेटाबेस को सक्रिय करें

संदेश आयात करें

फायरबेस कंसोल में अपने प्रोजेक्ट में बाएं नेविगेशन बार पर डेटाबेस आइटम का चयन करें। डेटाबेस के अतिप्रवाह मेनू में JSON आयात करें चुनें। फ्रेंडलीचैट डायरेक्टरी में initial_messages.json फ़ाइल ब्राउज़ करें, इसे चुनें और फिर इम्पोर्ट बटन पर क्लिक करें। यह आपके डेटाबेस में वर्तमान में मौजूद किसी भी डेटा को बदल देगा। आप आइटम जोड़ने और निकालने के लिए हरे + और लाल x का उपयोग करके डेटाबेस को सीधे संपादित भी कर सकते हैं।

अपना डेटाबेस आयात करने के बाद ऐसा दिखना चाहिए:

फायरबेस डेटाबेस निर्भरता की पुष्टि करें

Podfile फ़ाइल के डिपेंडेंसी ब्लॉक में, पुष्टि करें कि Firebase/Database शामिल है।

पोडफाइल

pod 'Firebase/Database'

मौजूदा संदेशों को सिंक्रनाइज़ करें

ऐप यूआई में नए जोड़े गए संदेशों को सिंक्रनाइज़ करने वाला कोड जोड़ें।

इस अनुभाग में आप जो कोड जोड़ेंगे वह होगा:

• फायरबेस डेटाबेस को इनिशियलाइज़ करें और डेटाबेस में किए गए परिवर्तनों को संभालने के लिए एक श्रोता जोड़ें।
• DataSnapshot अपडेट करें ताकि नए संदेश दिखाए जा सकें।

अपने FCViewController के "deinit", "configureDatabase", और "tableView:cellForRow indexPath:" विधियों को संशोधित करें; नीचे परिभाषित कोड से बदलें:

FCViewController.स्विफ्ट

  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. क्लिक करें रन बटन।
2. संदेश विंडो पर जाने के लिए प्रारंभ करने के लिए साइन इन करें बटन पर क्लिक करें।
3. "संदेश" प्रविष्टि के बगल में हरे + प्रतीक पर क्लिक करके और निम्न की तरह एक वस्तु जोड़कर सीधे फायरबेस कंसोल में नए संदेश जोड़ें:
4. पुष्टि करें कि वे फ्रेंडली-चैट UI में दिखाई देते हैं।

7. संदेश भेजें

संदेश भेजें लागू करें

डेटाबेस में मान पुश करें। जब आप फायरबेस रीयलटाइम डेटाबेस में डेटा जोड़ने के लिए पुश विधि का उपयोग करते हैं, तो एक स्वचालित आईडी जोड़ दी जाएगी। ये स्वतः उत्पन्न आईडी अनुक्रमिक हैं, जो सुनिश्चित करती हैं कि नए संदेश सही क्रम में जोड़े जाएंगे।

अपने FCViewController के "sendMessage:" मेथड को संशोधित करें; नीचे परिभाषित कोड से बदलें:

FCViewController.स्विफ्ट

  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. क्लिक करें रन बटन।
2. संदेश विंडो पर जाने के लिए साइन इन पर क्लिक करें।
3. एक संदेश टाइप करें और भेजें हिट करें। नया संदेश ऐप यूआई और फायरबेस कंसोल में दिखाई देना चाहिए।

8. छवियों को स्टोर और प्राप्त करें

फायरबेस स्टोरेज डिपेंडेंसी की पुष्टि करें

Podfile के डिपेंडेंसी ब्लॉक में, पुष्टि करें कि Firebase/Storage शामिल है।

पोडफाइल

pod 'Firebase/Storage'

डैशबोर्ड में फायरबेस स्टोरेज को सक्रिय करें

फायरबेस कंसोल पर जाएं और पुष्टि करें कि स्टोरेज "gs://PROJECTID.appspot.com" डोमेन के साथ सक्रिय है

यदि आप इसके बजाय सक्रियण विंडो देख रहे हैं, तो इसे डिफ़ॉल्ट नियमों के साथ सक्रिय करने के लिए "शुरू करें" पर क्लिक करें।

फायरबेसस्टोरेज को कॉन्फ़िगर करें

FCViewController.स्विफ्ट

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

मौजूदा संदेशों में चित्र प्राप्त करें

फायरबेस स्टोरेज से छवियों को डाउनलोड करने वाला कोड जोड़ें।

अपने FCViewController की "तालिका दृश्य: cellForRowAt indexPath:" विधि को संशोधित करें; नीचे परिभाषित कोड से बदलें:

FCViewController.स्विफ्ट

  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. छवि संदेश भेजें

स्टोर लागू करें और छवियां भेजें

उपयोगकर्ता से एक छवि अपलोड करें, फिर इस छवि के भंडारण यूआरएल को डेटाबेस में सिंक करें ताकि यह छवि संदेश के अंदर भेजी जा सके।

अपने FCViewController की "imagePickerController: didFinishPickingMediaWithInfo:" विधि को संशोधित करें; नीचे परिभाषित कोड से बदलें:

FCViewController.स्विफ्ट

  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. क्लिक करें रन बटन।
2. संदेश विंडो पर जाने के लिए साइन इन पर क्लिक करें।
3. फोटो चुनने के लिए "फोटो जोड़ें" आइकन पर क्लिक करें। फोटो के साथ नया संदेश ऐप यूआई और फायरबेस कंसोल में दिखाई देना चाहिए।

10. बधाई हो!

आपने रीयल-टाइम चैट एप्लिकेशन को आसानी से बनाने के लिए Firebase का उपयोग किया है।

हमने क्या कवर किया है

• रीयलटाइम डेटाबेस
• फ़ेडरेटेड साइन इन
• भंडारण

और अधिक जानें

• Firebase.google.com