Firebase iOS Codelab Swift

1. Genel Bakış

2efe6805ef369641.png

Samimi Sohbet codelab'ine hoş geldiniz. Bu codelab'de iOS uygulamaları oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz. Firebase'i kullanarak bir sohbet istemcisi uygulayacak ve performansını izleyebilirsiniz.

Neler öğreneceksiniz?

  • Kullanıcıların oturum açmasına izin verin.
  • Firebase Realtime Database'i kullanarak verileri senkronize edin.
  • İkili program dosyalarını Firebase Storage'da depolayın.

Gerekenler

  • Xcode
  • CocoaPods
  • iOS 8.0+ veya simülatör yüklü bir test cihazı

Bu eğiticiden nasıl yararlanacaksınız?

Yalnızca okuma Okuyun ve alıştırmaları tamamlayın

iOS uygulaması geliştirme deneyiminizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

2. Örnek kodu alın

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

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

3. Başlangıç uygulamasını oluşturma

2f4c98d858c453fe.png

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

  1. Terminal penceresinde, indirdiğiniz örnek koddan android_studio_folder.pngios-starter/swift-starter dizinine gidin.
  2. pod install --repo-update çalıştırma
  3. Projeyi Xcode'da açmak için FriendlyChatSwift.xcworkspace dosyasını açın.
  4. 98205811bbed9d74.pngÇalıştır düğmesini tıklayın.

Birkaç saniye sonra Samimi Sohbet ana ekranı görünecektir. Kullanıcı arayüzü görünecektir. Ancak bu noktada oturum açamaz, mesaj gönderemez veya alamazsınız. Uygulama, siz sonraki adımı tamamlayana kadar bir istisnayla iptal edilir.

4. Firebase konsol projesi oluşturma

Proje oluştur

Firebase konsolunda Proje Ekle'yi seçin.

FriendlyChat projesini çağırın, ardından Proje Oluştur'u tıklayın.

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

iOS uygulamanızı bağlama

  1. Yeni projenizin Project Overview (Projeye Genel Bakış) ekranında Add Firebase to your iOS app'i (Firebase'i iOS uygulamanıza ekleyin) tıklayın.
  2. Paket kimliğini "com.google.firebase.codelab.FriendlyChatSwift" olarak girin.
  3. App Store kimliğini "123456" olarak girin.
  4. Uygulamayı Kaydet'i tıklayın.

Uygulamanıza GoogleService-Info.plist dosyası ekleme

İkinci ekranda, uygulamanız için gerekli tüm Firebase meta verilerini içeren bir yapılandırma dosyasını indirmek üzere GoogleService-Info.plist dosyasını indir'i tıklayın. Dosyayı uygulamanıza kopyalayın ve FriendlyChatSwift hedefine ekleyin.

Şimdi "x" simgesini tıklayabilirsiniz tıklayın.

19d59efb213ddbdc.png

Firebase modülünü içe aktarma

İlk olarak Firebase modülünün içe aktarıldığından emin olun.

AppDelegate.swift, FCViewController.swift

import Firebase

AppDelegate'de Firebase'i yapılandırma

"Yapılandır"ı kullanın yöntemini kullanarak .plist dosyanızdan temel Firebase hizmetlerini yapılandırın.

AppDelegate.swift

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

5. Kullanıcıları Tanımlama

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

Artık ileti okumadan veya yazmadan önce kimlik doğrulaması yapılmasını gerektirecek bir kural ekleyeceğiz. Bunun için iletiler veri nesnemize aşağıdaki kuralları ekleriz. Firebase konsolunun Veritabanı bölümünde Realtime Database'i seçip Kurallar sekmesini tıklayın. Ardından, kuralları aşağıdaki gibi görünecek şekilde güncelleyin:

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

Bu sürecin işleyiş şekli hakkında daha fazla bilgi edinmek için ("kimlik doğrulama" değişkeniyle ilgili belgeler dahil), Firebase güvenlik belgelerini inceleyin.

Kimlik Doğrulama API'lerini yapılandırma

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

  1. Firebase konsoluna gidin ve projenizi seçin
  2. Authentication'ı (Kimlik Doğrulama) seçin
  3. Oturum Açma Yöntemi sekmesini seçin
  4. Google anahtarını etkin (mavi) duruma getirin.
  5. Açılan iletişim kutusunda Kaydet'e basın

Bu codelab'de daha sonra "CONFIGURATION_NOT_FOUND" mesajıyla hata mesajı alırsanız bu adıma dönüp çalışmanızı tekrar kontrol edin.

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

Podfile dosyasında Firebase Auth bağımlılıklarının olduğunu doğrulayın.

Pod dosyası

pod 'Firebase/Auth'

Google ile Oturum Açma için Info.plist dosyanızı ayarlayın.

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

  1. Proje yapılandırmanızı açın: Sol ağaç görünümünde proje adını ç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 ters çevrilmiş istemci 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ı bulun. 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 bir görünümde olacaktır (ancak uygulamaya özel değerlerinizle):

1b54d5bd2f4f1448.png

Google ile Oturum Açma için clientID'yi ayarlama

Firebase yapılandırıldıktan sonra "didFinishLaunchingWithOptions:" alanının içinde Google ile Oturum Açma'yı ayarlamak için clientID'yi kullanabiliriz: yöntemidir.

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 ekleme

Google ile Oturum Açma işleminin sonucu başarılı olduğunda Firebase ile kimlik doğrulamak 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ının otomatik olarak oturum açmasını sağlayı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 işleyici ekleyin. Son olarak, dinleyiciyi YouTube'da devre dışı bırakabilirsiniz.

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

Oturumu kapatma yöntemini ekleme

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

İletileri Oturum Açmış Kullanıcı Olarak Okumayı Test Etme

  1. 98205811bbed9d74.pngÇalıştır düğmesini tıklayın.
  2. Hemen oturum açma ekranına yönlendirilirsiniz. Google ile Oturum Açma düğmesine dokunun.
  3. Her şey yolundaysa mesajlaşma ekranına yönlendirilirsiniz.

6. Realtime Database'i etkinleştir

2efe6805ef369641.png

İletileri içe aktarma

Firebase konsolundaki projenizde, sol gezinme çubuğundan Veritabanı öğesini seçin. Veritabanının taşma menüsünde Import JSON'u (JSON'u İçe Aktar) seçin. Friendlychat dizinindeki initial_messages.json dosyasına göz atın, dosyayı seçin ve ardından Import (İçe aktar) düğmesini tıklayın. Bu işlemle, şu anda veritabanınızda olan tüm veriler değiştirilir. Ayrıca, öğe ekleyip kaldırmak için yeşil + ve kırmızı x işaretlerini kullanarak veritabanını doğrudan düzenleyebilirsiniz.

20ccf4856b715b4c.png

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

f3e0367f1c9cd187.png

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

Podfile dosyasının bağımlılıklar bloğunda Firebase/Database öğesinin dahil olduğunu onaylayın.

Pod dosyası

pod 'Firebase/Database'

Mevcut İletileri Senkronize Etme

Yeni eklenen mesajları uygulamanın kullanıcı arayüzüne senkronize eden bir 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 işleyici ekleyin.
  • Yeni mesajların gösterilebilmesi için DataSnapshot uygulamasını güncelleyin.

FCViewController'ınızın "deinit", "configureDatabase" ve "tableView:cellForRow indexPath:" değerlerini değiştirin. yöntemler; aşağıdaki 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
  }

Mesaj Senkronizasyonunu Test Etme

  1. 98205811bbed9d74.pngÇalıştır düğmesini tıklayın.
  2. Mesajlar penceresine gitmek için Başlamak için oturum açın düğmesini tıklayın.
  3. "Mesajlar"ın yanındaki yeşil + simgesini tıklayarak yeni mesajları doğrudan Firebase konsolunda ekleyin. şuna benzer bir nesne ekleyerek: f9876ffc8b316b14.png
  4. Dost Canlısı Sohbet Kullanıcı Arayüzünde göründüğünü doğrulayın.

7. Mesajlar Gönderme

Mesaj Gönderme özelliğini uygulama

Değerleri veritabanına aktarın. Firebase Realtime Database'e veri eklemek için aktarma yöntemini kullandığınızda otomatik kimlik eklenir. Otomatik olarak oluşturulan bu kimlikler sıralı olduğundan yeni iletilerin doğru sırada eklenmesini sağlar.

FCViewController'ınızın "sendMessage" öğesini değiştirin: yöntemini kullanarak aşağıdaki 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 Etme

  1. 98205811bbed9d74.pngÇalıştır düğmesini tıklayın.
  2. Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
  3. Mesajınızı yazın ve Gönder'e basın. Yeni mesaj, uygulamanın kullanıcı arayüzünde ve Firebase konsolunda görünür.

8. Resimleri Depola ve Al

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

Podfile öğesinin bağımlılıklar bloğunda Firebase/Storage öğesinin dahil edildiğini onaylayın.

Pod dosyası

pod 'Firebase/Storage'

Kontrol panelinde Firebase Storage'ı etkinleştirme

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

b0438b37a588bcee.png

Bunun yerine etkinleştirme penceresini görüyorsanız "BAŞLAYIN"ı tıklayın. varsayılan kurallarla etkinleştirin.

c290bbebff2cafa7.png

FirebaseStorage'ı yapılandırma

FCViewController.swift

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

Mevcut mesajlarda resim alma

Firebase Storage'dan resim indiren bir kod ekleyin.

FCViewController uygulamanızın "tableView: CellForRowAt indexPath:" değerini değiştirin. yöntemini kullanarak aşağıdaki 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
  }

9. Resim Mesajları Gönderme

Mağazayı Uygulama ve Resimleri Gönderme

Kullanıcıdan bir resim yükleyin, ardından bu resmin iletinin içinde gönderilmesi için resmin depolama URL'sini veritabanıyla senkronize edin.

FCViewController'ınızın "image PickerController: didFinish PickingMediaWithInfo:" değerini değiştirin: yöntemini kullanarak aşağıdaki 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])
      }
    }
  }

Resim Mesajları Gönderme ve Alma Testi

  1. 98205811bbed9d74.pngÇalıştır düğmesini tıklayın.
  2. Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
  3. "Fotoğraf ekle"yi tıklayın simgesine dokunun. Fotoğraflı yeni mesaj, uygulamanın kullanıcı arayüzünde ve Firebase konsolunda görünür olmalıdır.

10. Tebrikler!

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

İşlediklerimiz

  • Realtime Database
  • Birleşik Oturum Açma
  • Depolama

Daha Fazla Bilgi