Firebase iOS कोडलैब का Swift

1. खास जानकारी

फ़्रेंडली चैट कोडलैब (कोड बनाना सीखना) में आपका स्वागत है. इस कोडलैब में, आपको iOS ऐप्लिकेशन बनाने के लिए Firebase प्लैटफ़ॉर्म का इस्तेमाल करने का तरीका बताया जाएगा. चैट क्लाइंट को लागू किया जा सकता है और Firebase का इस्तेमाल करके, उसकी परफ़ॉर्मेंस पर नज़र रखी जा सकती है.

आपको इनके बारे में जानकारी मिलेगी

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

आपको इन चीज़ों की ज़रूरत होगी

• Xcode
• CocoaPods
• iOS 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 में खोलने के लिए, AdaptiveChatSwift.xcworkspace फ़ाइल खोलें.
4. Run बटन पर क्लिक करें.

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

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

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

Firebase कंसोल में जाकर, प्रोजेक्ट जोड़ें चुनें.

प्रोजेक्ट FriendlyChat को कॉल करें. इसके बाद, प्रोजेक्ट बनाएं पर क्लिक करें.

अपना iOS ऐप्लिकेशन कनेक्ट करना

1. अपने नए प्रोजेक्ट की प्रोजेक्ट की खास जानकारी वाली स्क्रीन पर, अपने iOS ऐप्लिकेशन में Firebase जोड़ें पर क्लिक करें.
2. बंडल आईडी, "com.google.firebase.codelab.FriendlyChatSwift" के तौर पर डालें.
3. App Store आईडी को "123456" के तौर पर डालें.
4. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.

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

दूसरी स्क्रीन पर, एक कॉन्फ़िगरेशन फ़ाइल डाउनलोड करने के लिए GoogleService-Info.plist डाउनलोड करें पर क्लिक करें. इसमें आपके ऐप्लिकेशन के लिए सभी ज़रूरी Firebase मेटाडेटा शामिल होते हैं. उस फ़ाइल को अपने ऐप्लिकेशन में कॉपी करें और उसे AdaptiveChatSwift टारगेट में जोड़ें.

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

Firebase मॉड्यूल को इंपोर्ट करना

शुरू करने के लिए यह पक्का करें कि Firebase मॉड्यूल इंपोर्ट किया गया हो.

AppDelegate.swift, FCViewController.swift

import Firebase

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

"कॉन्फ़िगर करें" का इस्तेमाल करें तरीका का इस्तेमाल करें.

AppDelegate.swift

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

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

पुष्टि किए गए उपयोगकर्ताओं तक सीमित करने के लिए, नियमों का इस्तेमाल करना

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

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

इसके काम करने के तरीके के बारे में ज़्यादा जानकारी के लिए ("auth" वैरिएबल पर दस्तावेज़ सहित) Firebase सुरक्षा दस्तावेज़ देखें.

पुष्टि करने वाले एपीआई कॉन्फ़िगर करना

इससे पहले कि आपका ऐप्लिकेशन आपके उपयोगकर्ताओं की ओर से Firebase Authentication API को ऐक्सेस कर सके, आपको उसे चालू करना होगा

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

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

Firebase ऑथ डिपेंडेंसी की पुष्टि करना

पक्का करें कि Podfile फ़ाइल में, Firebase ऑथराइज़ेशन डिपेंडेंसी मौजूद है.

पॉडफ़ाइल

pod 'Firebase/Auth'

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

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

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

'Google साइन इन' के लिए clientID सेट करना

Firebase को कॉन्फ़िगर करने के बाद, हम "didFinishLaunchingWithOptions" में Google साइन इन को सेट अप करने के लिए clientID का इस्तेमाल कर सकते हैं: तरीका.

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 ऑथराइज़ेशन में लिसनर जोड़ें, ताकि साइन इन करने के बाद उपयोगकर्ता को ऐप्लिकेशन में जाने की अनुमति मिल सके. साथ ही, लिसनर को हटा दें.

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

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

Messages इंपोर्ट करें

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

इंपोर्ट करने के बाद, डेटाबेस ऐसा दिखना चाहिए:

Firebase डेटाबेस डिपेंडेंसी की पुष्टि करें

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

पॉडफ़ाइल

pod 'Firebase/Database'

मौजूदा मैसेज सिंक करना

ऐसा कोड जोड़ें जो ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में जोड़े गए नए मैसेज को सिंक करता हो.

इस सेक्शन में जोड़ा गया कोड:

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

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

8. इमेज सेव करना और पाना

Firebase स्टोरेज डिपेंडेंसी की पुष्टि करें

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

पॉडफ़ाइल

pod 'Firebase/Storage'

डैशबोर्ड में Firebase स्टोरेज चालू करना

Firebase कंसोल पर जाएं और पुष्टि करें कि "gs://PROJECTID.appspot.com" के ज़रिए स्टोरेज चालू किया गया है डोमेन

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

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

FCViewController.swift

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

मौजूदा मैसेज में इमेज पाना

Firebase स्टोरेज से इमेज डाउनलोड करने वाला कोड जोड़ें.

अपने FCViewController के "tableView: सेलForRowAt indexPath:" में बदलाव करें: तरीका; नीचे परिभाषित कोड से बदलें:

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. इमेज वाले मैसेज भेजें

स्टोर और भेजें इमेज लागू करना

उपयोगकर्ता की कोई इमेज अपलोड करें, फिर इस इमेज के स्टोरेज यूआरएल को डेटाबेस से सिंक करें, ताकि इस इमेज को मैसेज के अंदर भेजा जा सके.

अपने FCViewController के "imageSelecterController: didFinishPicingMediaWithInfo:" में बदलाव करें: तरीका; नीचे परिभाषित कोड से बदलें:

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

10. बधाई हो!

आपने आसानी से रीयल-टाइम चैट ऐप्लिकेशन बनाने के लिए, Firebase का इस्तेमाल किया है.

इसमें हमने इन विषयों के बारे में बताया

• रीयल टाइम डेटाबेस
• फ़ेडरेटेड साइन इन
• डिवाइस का स्टोरेज

ज़्यादा जानें

• Firebase.google.com