Firebase iOS Codelab Swift

2efe6805ef369641.png

به كد كتاب Friendly Chat خوش آمدید. در این Codelab ، شما یاد خواهید گرفت که چگونه از پلت فرم Firebase برای ایجاد برنامه های iOS استفاده کنید. شما یک مشتری گپ را پیاده سازی کرده و با استفاده از Firebase بر عملکرد آن نظارت خواهید کرد.

این Codelab در Objective-C نیز موجود است.

آنچه یاد خواهید گرفت

  • به کاربران اجازه ورود به سیستم را بدهید.
  • داده ها را با استفاده از پایگاه داده Firebase Realtime همگام سازی کنید.
  • پرونده های باینری را در Firebase Storage ذخیره کنید.

آنچه شما نیاز دارید

  • کد 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 دکمه اجرا

باید ببینید صفحه اصلی Chat Friendly پس از چند ثانیه ظاهر می شود. UI باید ظاهر شود. اما در این مرحله نمی توانید وارد سیستم شوید ، پیام ارسال یا دریافت کنید. برنامه تا زمانی که مرحله بعدی را کامل نکنید ، به استثنا سقط می شود.

ایجاد پروژه

از کنسول Firebase گزینه Add Project را انتخاب کنید.

با پروژه FriendlyChat تماس بگیرید و سپس روی ایجاد پروژه کلیک کنید.

عکس صفحه از 2015-11-06 14: 13: 39.png

برنامه iOS خود را متصل کنید

  1. از صفحه نمای کلی پروژه جدید خود ، روی Add 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
}

از قوانین برای محدود کردن به کاربران معتبر استفاده کنید

اکنون ما یک قانون اضافه خواهیم کرد تا قبل از خواندن یا نوشتن پیام ، احراز هویت شود. برای انجام این کار ما قوانین زیر را به پیام داده های خود اضافه می کنیم. از بخش Database کنسول Firebase ، Realtime Database را انتخاب کرده و سپس روی تب Rules کلیک کنید. سپس قوانین را به روز کنید تا اینگونه به نظر برسند:

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

برای اطلاعات بیشتر در مورد نحوه عملکرد (از جمله اسناد مربوط به متغیر "auth") به اسناد امنیتی Firebase مراجعه کنید.

API های احراز هویت را پیکربندی کنید

قبل از اینکه برنامه شما از طرف کاربران خود به API های تأیید اعتبار Firebase دسترسی پیدا کند ، باید آن را فعال کنید

  1. به کنسول Firebase بروید و پروژه خود را انتخاب کنید
  2. احراز هویت را انتخاب کنید
  3. تب ورود به سیستم را انتخاب کنید
  4. کلید Google را فعال کنید (آبی)
  5. ذخیره را در گفتگوی حاصل فشار دهید

اگر بعداً در این کد کد با پیام "CONFIGURATION_NOT_FOUND" خطایی پیدا کردید ، به این مرحله برگردید و کار خود را دوباره بررسی کنید.

وابستگی Firebase Auth را تأیید کنید

تأیید کنید که وابستگی های Firebase Auth در پرونده Podfile وجود دارد.

Podfile

pod 'Firebase/Auth'

Info.plist خود را برای ورود به سیستم Google تنظیم کنید.

شما باید یک طرح URL سفارشی به پروژه XCode خود اضافه کنید.

  1. پیکربندی پروژه خود را باز کنید: روی نام پروژه در نمای درخت سمت چپ دوبار کلیک کنید. برنامه خود را از بخش TARGETS انتخاب کنید ، سپس زبانه اطلاعات را انتخاب کرده و قسمت انواع URL را گسترش دهید.
  2. روی دکمه + کلیک کنید و یک طرح URL برای شناسه مشتری معکوس خود اضافه کنید. برای یافتن این مقدار ، پرونده پیکربندی GoogleService-Info.plist را باز کرده و به دنبال کلید REVERSED_CLIENT_ID بگردید. مقدار آن کلید را کپی کرده و در کادر طرح های URL در صفحه پیکربندی جای گذاری کنید. قسمتهای دیگر را خالی بگذارید.
  3. پس از اتمام ، پیکربندی شما باید شبیه موارد زیر باشد (اما با مقادیر خاص برنامه شما):

1b54d5bd2f4f1448.png

شناسه مشتری را برای ورود به سیستم Google تنظیم کنید

پس از پیکربندی Firebase ، می توانیم از clientID برای تنظیم Google Sign in در داخل روش "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 اضافه کنید تا پس از ورود موفقیت آمیز به سیستم ، کاربر بتواند وارد برنامه شود. و شنونده را از طریق برنامه حذف کنید.

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 ، مورد Database را در نوار پیمایش سمت چپ انتخاب کنید. واردات JSON را در منوی سرریز پایگاه داده انتخاب کنید. به پرونده initial_messages.json در فهرست initial_messages.json ، آن را انتخاب کنید و سپس روی دکمه Import کلیک کنید. این داده های فعلی موجود در پایگاه داده شما را جایگزین می کند. همچنین می توانید با استفاده از سبز + و قرمز x برای افزودن و حذف موارد ، پایگاه داده را مستقیماً ویرایش کنید.

20ccf4856b715b4c.png

پس از وارد کردن پایگاه داده ، باید به این شکل باشد:

f3e0367f1c9cd187.png

وابستگی پایگاه داده Firebase را تأیید کنید

در بلوک وابستگی های پرونده Podfile ، تأیید کنید که Firebase/Database دارد.

Podfile

pod 'Firebase/Database'

پیام های موجود را همگام سازی کنید

کدی را اضافه کنید که پیامهای تازه اضافه شده را به UI برنامه همگام سازی می کند.

کدی که در این بخش اضافه می کنید:

  • پایگاه داده Firebase را آغاز کرده و یک شنونده برای مدیریت تغییرات ایجاد شده در پایگاه داده اضافه کنید.
  • DataSnapshot به روز کنید تا پیام های جدید نشان داده شوند.

"deinit" ، "configureDatabase" و "tableView: cellForRow indexPath:" FCViewController خود را تغییر دهید. با کد تعریف شده در زیر جایگزین کنید:

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. تأیید کنید که آنها در رابط کاربری Friendly-Chat نمایش داده می شوند.

پیغام ارسال را پیاده سازی کنید

مقادیر را به پایگاه داده فشار دهید. وقتی از روش push برای افزودن داده به پایگاه داده Firebase Realtime استفاده می کنید ، یک شناسه اتوماتیک اضافه می شود. این شناسه های تولید شده به صورت خودکار متوالی هستند ، که اطمینان حاصل می کند پیام های جدید به ترتیب صحیح اضافه می شوند.

روش "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. یک پیام را تایپ کنید و ارسال را فشار دهید. پیام جدید باید در UI برنامه و در کنسول Firebase قابل مشاهده باشد.

وابستگی ذخیره سازی Firebase را تأیید کنید

در بلوک وابستگی های Podfile ، تأیید کنید Firebase/Storage گنجانده شده است.

Podfile

pod 'Firebase/Storage'

Firebase Storage را در داشبورد فعال کنید

به کنسول Firebase بروید و تأیید کنید که Storage با دامنه "gs: //PROJECTID.appspot.com" فعال شده است

b0438b37a588bcee.png

اگر به جای آن پنجره فعال سازی را مشاهده کردید ، روی "شروع" کلیک کنید تا با قوانین پیش فرض فعال شود.

c290bbebff2cafa7.png

FirebaseStorage را پیکربندی کنید

FCViewController.swift

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

تصاویر را در پیام های موجود دریافت کنید

کدی را اضافه کنید که تصاویر را از Firebase Storage بارگیری کند.

روش "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
  }

ذخیره و ارسال تصاویر

تصویری را از کاربر بارگذاری کنید ، سپس URL ذخیره سازی این تصویر را در پایگاه داده همگام سازی کنید تا این تصویر در داخل پیام ارسال شود.

روش "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. برای انتخاب عکس ، روی نماد "افزودن عکس" کلیک کنید. پیام جدید همراه با عکس باید در UI برنامه و در کنسول Firebase قابل مشاهده باشد.

شما از Firebase استفاده کرده اید تا به راحتی یک برنامه چت در زمان واقعی بسازید.

آنچه ما پوشش داده ایم

  • پایگاه داده بیدرنگ
  • ورود به سیستم فدراسیون
  • ذخیره سازی

بیشتر بدانید