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

2efe6805ef369641.png

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

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

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

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

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

  • एक्सकोड
  • कोकोपोड्स
  • आईओएस 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. प्रोजेक्ट को Xcode में खोलने के लिए FriendlyChatSwift.xcworkspace फ़ाइल खोलें।
  4. दबाएं 98205811bbed9d74.png रन बटन।

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

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

से Firebase सांत्वना परियोजना जोड़ें का चयन करें।

परियोजना कॉल FriendlyChat , फिर पर क्लिक करें परियोजना बनाएँ।

2015-11-06 14:13:39.png से स्क्रीनशॉट

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

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

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

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

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

19d59efb213ddbdc.png

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

सुनिश्चित करते हुए आरंभ 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
}

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

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

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

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

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

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

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

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

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

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

पॉडफाइल

pod 'Firebase/Auth'

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

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

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

1b54d5bd2f4f1448.png

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

2efe6805ef369641.png

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

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

20ccf4856b715b4c.png

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

f3e0367f1c9cd187.png

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

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

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

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

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

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

पॉडफाइल

pod 'Firebase/Storage'

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

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

b0438b37a588bsee.png

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

c290bbebff2cafa7.png

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
  }

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

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

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

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

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

और अधिक जानें