Firebase iOS Codelab Swift

2efe6805ef369641.png

Dostça Sohbet kod laboratuvarına hoş geldiniz. Bu kod laboratuvarında, iOS uygulamaları oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz. Firebase'i kullanarak bir sohbet istemcisi uygulayacak ve performansını izleyeceksiniz.

Bu codelab, Objective-C'de de mevcuttur.

ne öğreneceksin

  • Kullanıcıların oturum açmasına izin verin.
  • Firebase Gerçek Zamanlı Veritabanını kullanarak verileri senkronize edin.
  • İkili dosyaları Firebase Storage'da saklayın.

Neye ihtiyacın olacak

  • Xcode
  • CocoaPod'lar
  • iOS 8.0+ veya simülatörlü bir test cihazı

Bu öğreticiyi nasıl kullanacaksınız?

Sadece baştan sona oku Okuyun ve alıştırmaları tamamlayın

iOS uygulamaları oluşturma deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta düzey Yetkin

GitHub deposunu komut satırından klonlayın.

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

2f4c98d858c453fe.png

Başlangıç ​​uygulamasını oluşturmak için:

  1. Bir terminal penceresinde, şuraya gidin: android_studio_folder.png ios-starter/swift-starter sizin örnek kod download dizin
  2. Çalıştır pod install --repo-update
  3. Projeyi Xcode'da açmak için FriendlyChatSwift.xcworkspace dosyasını açın.
  4. Tıkla 98205811bbed9d74.png Çalıştır butonuna basın.

Birkaç saniye sonra Dostça Sohbet ana ekranının göründüğünü görmelisiniz. UI görünmelidir. Ancak bu noktada oturum açamaz, mesaj gönderemez veya alamazsınız. Bir sonraki adımı tamamlayana kadar uygulama bir istisna dışında durdurulur.

Proje oluştur

Gönderen Firebase konsoluna Project Ekle seçeneğini seçin.

Proje Çağrı FriendlyChat ardından tıklayın Project oluşturun.

2015-11-06 14:13:39.png'den ekran görüntüsü

iOS uygulamanızı bağlayın

  1. Yeni projenin Proje Genel Bakış ekranından, tık iOS uygulamasına Firebase ekleyin.
  2. "Olarak, paket kimliğini girin com.google.firebase.codelab.FriendlyChatSwift ".
  3. "Olarak App Store kimliği girin 123456 ".
  4. Kayıt App tıklayın.

GoogleService-Info.plist dosyasını uygulamanıza ekleyin

İkinci ekran tıklama indirin On GoogleService-Info.plist tüm uygulamanız için gerekli Firebase meta verileri içeren bir yapılandırma dosyasını indirmek için. Uygulamanıza bu dosyayı kopyalayıp FriendlyChatSwift hedefe ekleyin.

Şimdi, bu adımları burada uygulayacağınız için, 3. ve 4. adımları atlayarak, pop-up'ı kapatmak için sağ üst köşedeki "x" işaretini tıklayabilirsiniz.

19d59efb213ddbdc.png

Firebase modülünü içe aktar

Emin olmakla başlayın Firebase modülü alınır.

AppDelegate.swift , FCViewController.swift

import Firebase

AppDelegate'te Firebase'i yapılandırın

.plist dosyanızdan temeldeki Firebase hizmetlerini yapılandırmak için uygulama içindeki FirebaseApp'teki "configure" yöntemini kullanın:didFinishLaunchingWithOptions işlevi.

AppDelegate.swift

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

Kimliği Doğrulanmış Kullanıcılarla Kısıtlamak İçin Kuralları Kullanın

Şimdi herhangi bir mesajı okumadan veya yazmadan önce kimlik doğrulaması gerektiren bir kural ekleyeceğiz. Bunu yapmak için, mesaj veri nesnemize aşağıdaki kuralları ekliyoruz. Veritabanı bölümünde içinden Firebase konsola sonra, Gerçek Zamanlı Veritabanı seçmek Kurallar sekmesini tıklayın. Ardından kuralları şu şekilde görünecek şekilde güncelleyin:

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

( "Auth" değişkeni belgelerine dahil) bu eserler Firebase bakın konusunda daha fazla bilgi için güvenlik belgelerine .

Kimlik Doğrulama API'lerini Yapılandırın

Uygulamanızın kullanıcılarınız adına Firebase Authentication API'lerine erişebilmesi için önce onu etkinleştirmeniz gerekir.

  1. Gidin Firebase konsoluna ve projenizi seçin
  2. seç Kimlik Doğrulama
  3. Oturum Açma Yöntemi sekmesini seçin
  4. Etkin (mavi) için Google anahtarı Geçiş
  5. Ortaya çıkan iletişim kutusunda Kaydet düğmesine basın

Bu kod laboratuvarında daha sonra "CONFIGURATION_NOT_FOUND" mesajıyla hata alırsanız, bu adıma geri dönün ve çalışmanızı iki kez kontrol edin.

Firebase Auth bağımlılığını onaylayın

Onayla Firebase Kimlik Doğrulama bağımlılıkları var Podfile dosyası.

pod dosyası

pod 'Firebase/Auth'

Google Sign In için Info.plist'inizi kurun.

XCode projenize özel bir URL şeması eklemeniz gerekecek.

  1. Proje konfigürasyonunuzu açın: sol ağaç görünümünde proje adına çift tıklayın. HEDEFLER bölümünden uygulamanızı seçin, ardından Bilgi sekmesini seçin ve URL Türleri bölümünü genişletin.
  2. + düğmesini tıklayın ve tersine çevrilmiş müşteri kimliğiniz için bir URL şeması ekleyin. Bu değeri bulmak için GoogleService-Info.plist yapılandırma dosyasını açın ve REVERSED_CLIENT_ID anahtarını arayın. Bu anahtarın değerini kopyalayın ve yapılandırma sayfasındaki URL Şemaları kutusuna yapıştırın. Diğer alanları boş bırakın.
  3. Tamamlandığında, yapılandırmanız aşağıdakine benzer görünmelidir (ancak uygulamaya özel değerlerinizle):

1b54d5bd2f4f1448.png

Google Sign In için clientID ayarlayın

Firebase yapılandırıldıktan sonra, "didFinishLaunchingWithOptions:" yöntemi içinde Google Sign In'i ayarlamak için clientID'yi kullanabiliriz.

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
}

Oturum açma işleyicisini ekleyin

Google ile Oturum Açma işleminin sonucu başarılı olduğunda, Firebase ile kimlik doğrulaması yapmak için hesabı kullanın.

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

Kullanıcıda otomatik olarak oturum açın. Ardından, başarılı bir şekilde oturum açtıktan sonra kullanıcının uygulamaya girmesine izin vermek için Firebase Auth'a bir dinleyici ekleyin. Ve dinleyiciyi deinit'te kaldırın.

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

Oturumu Kapat

Çıkış yöntemini ekleyin

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

Mesajları Oturum Açmış Kullanıcı Olarak Test Etme

  1. Tıkla 98205811bbed9d74.png Çalıştır butonuna basın.
  2. Hemen oturum açma ekranına gönderilmelidir. Google Oturum Aç düğmesine dokunun.
  3. Her şey yolunda gittiyse, daha sonra mesajlaşma ekranına gönderilmelisiniz.

2efe6805ef369641.png

Mesajları İçe Aktar

Daki projede Firebase konsolun sol gezinme çubuğunda Veritabanı öğeyi seçin. Veritabanı taşma menüsünde İthalat JSON seçin. İçin Gözat initial_messages.json friendlychat dizinde dosyanın, daha sonra Al düğmesini tıklatın seçin. Bu, şu anda veritabanınızda bulunan tüm verilerin yerini alacaktır. Öğeleri eklemek ve kaldırmak için yeşil + ve kırmızı x'i kullanarak veritabanını doğrudan da düzenleyebilirsiniz.

20ccf4856b715b4c.png

Veritabanınızı içe aktardıktan sonra şöyle görünmelidir:

f3e0367f1c9cd187.png

Firebase Veritabanı Bağımlılığını Onaylayın

Arasında bağımlılıkları bloğunda Podfile dosyası, onayla o Firebase/Database dahildir.

pod dosyası

pod 'Firebase/Database'

Mevcut Mesajları Senkronize Et

Yeni eklenen mesajları uygulama kullanıcı arayüzüne senkronize eden kod ekleyin.

Bu bölüme ekleyeceğiniz kod:

  • Firebase veritabanını başlatın ve veritabanında yapılan değişiklikleri işlemek için bir dinleyici ekleyin.
  • Güncelleme DataSnapshot yeni mesajlar gösterilir böylece.

FCViewController'ınızın "deinit", "configureDatabase" ve "tableView:cellForRow indexPath:" yöntemlerini değiştirin; aşağıda tanımlanan kodla değiştirin:

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
  }

Test Mesajı Senkronizasyonu

  1. Tıkla 98205811bbed9d74.png Çalıştır butonuna basın.
  2. Mesajları penceresine gitmek için düğmeye Başlamak için Oturum tıklayın.
  3. "Mesajlar" girişinin yanındaki yeşil + sembolüne tıklayarak ve aşağıdaki gibi bir nesne ekleyerek doğrudan Firebase konsolunda yeni mesajlar ekleyin: f9876ffc8b316b14.png
  4. Dostça Sohbet Kullanıcı Arayüzü'nde göründüklerini onaylayın.

Uygula Mesaj Gönder

Değerleri veritabanına itin. Firebase Realtime Database'e veri eklemek için push yöntemini kullandığınızda, otomatik bir kimlik eklenecektir. Bu otomatik oluşturulan kimlikler sıralıdır, bu da yeni mesajların doğru sırada eklenmesini sağlar.

FCViewController'ınızın "sendMessage:" yöntemini değiştirin; aşağıda tanımlanan kodla değiştirin:

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

Mesaj Göndermeyi Test Et

  1. Tıkla 98205811bbed9d74.png Çalıştır butonuna basın.
  2. Mesajları penceresine gitmek için Oturum tıklayın.
  3. Bir mesaj yazın ve gönder'e basın. Yeni mesaj, uygulama kullanıcı arayüzünde ve Firebase konsolunda görünmelidir.

Firebase Depolama Bağımlılığını Onaylayın

Arasında bağımlılıkları bloğunda Podfile , onayla Firebase/Storage dahildir.

pod dosyası

pod 'Firebase/Storage'

Kontrol panelinde Firebase Storage'ı etkinleştirin

Firebase konsoluna gidin ve Depolamanın "gs://PROJECTID.appspot.com" alanıyla etkinleştirildiğini onaylayın

b0438b37a588bcee.png

Bunun yerine etkinleştirme penceresini görüyorsanız, varsayılan kurallarla etkinleştirmek için "BAŞLA" düğmesine tıklayın.

c290bbebff2cafa7.png

FirebaseStorage'ı yapılandırın

FCViewController.swift

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

Mevcut mesajlarda resim alın

Firebase Storage'dan görüntüleri indiren kod ekleyin.

FCViewController'ınızın "tableView: cellForRowAt indexPath:" yöntemini değiştirin; aşağıda tanımlanan kodla değiştirin:

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
  }

Mağazayı Uygulayın ve Görüntüleri Gönderin

Kullanıcıdan bir resim yükleyin, ardından bu resmin depolama URL'sini veritabanına senkronize edin, böylece bu resim mesajın içinde gönderilir.

FCViewController'ınızın "imagePickerController: didFinishPickingMediaWithInfo:" yöntemini değiştirin; aşağıda tanımlanan kodla değiştirin:

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

Görüntülü Mesaj Gönderme ve Alma Testi

  1. Tıkla 98205811bbed9d74.png Çalıştır butonuna basın.
  2. Mesajları penceresine gitmek için Oturum tıklayın.
  3. Bir fotoğraf seçmek için "fotoğraf ekle" simgesine tıklayın. Fotoğraflı yeni mesaj, uygulama kullanıcı arayüzünde ve Firebase konsolunda görünmelidir.

Gerçek zamanlı bir sohbet uygulamasını kolayca oluşturmak için Firebase'i kullandınız.

Neyi kapsadık

  • Gerçek Zamanlı Veritabanı
  • Federasyon Girişi
  • Depolamak

Daha fazla bilgi edin