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

1 अवलोकन

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

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

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

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

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

• एक्सकोड
• कोकोपोड्स
• आईओएस 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 को कॉल करें, फिर क्रिएट प्रोजेक्ट पर क्लिक करें।

अपना iOS ऐप कनेक्ट करें

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 में फायरबेस कॉन्फ़िगर करें

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

AppDelegate.swift

  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" संदेश के साथ त्रुटियां मिलती हैं, तो इस चरण पर वापस आएं और अपने काम की दोबारा जांच करें।

Firebase प्रामाणिक निर्भरता की पुष्टि करें

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

पॉडफाइल

pod 'Firebase/Auth'

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

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

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

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

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

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

उपयोगकर्ता में स्वचालित रूप से साइन इन करें। फिर फायरबेस ऑथ में एक श्रोता जोड़ें, ताकि उपयोगकर्ता को सफलतापूर्वक साइन इन करने के बाद ऐप में आने दिया जा सके। और श्रोता को 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.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. दबाएं रन बटन।
2. आपको तुरंत साइन-इन स्क्रीन पर भेज दिया जाना चाहिए। Google साइन-इन बटन पर टैप करें।
3. फिर आपको मैसेजिंग स्क्रीन पर भेजा जाना चाहिए अगर सब कुछ ठीक रहा।

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

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

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

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

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

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

पॉडफाइल

pod 'Firebase/Database'

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

कोड जोड़ें जो नए जोड़े गए संदेशों को ऐप UI में सिंक्रनाइज़ करता है।

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

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

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

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

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

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

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

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

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

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

Firebase संग्रहण निर्भरता की पुष्टि करें

Podfile के निर्भरता ब्लॉक में, पुष्टि करें कि फायरबेस Firebase/Storage शामिल है।

पॉडफाइल

pod 'Firebase/Storage'

डैशबोर्ड में Firebase संग्रहण सक्रिय करें

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

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

FirebaseStorage कॉन्फ़िगर करें

FCViewController.swift

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

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

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

अपने 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
  }

9. छवि संदेश भेजें

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

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

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

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

10. बधाई!

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

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

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

और अधिक जानें

• Firebase.google.com