Firebase iOS Codelab Swift

1. Genel Bakış

2efe6805ef369641.png

Friendly Chat kod laboratuvarına hoş geldiniz. Bu codelab'de iOS uygulamaları oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz. Bir sohbet istemcisi uygulayacak ve Firebase'i kullanarak performansını izleyeceksiniz.

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

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

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

Sadece okumayı Okuyun ve alıştırmaları tamamlayın

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

Acemi Orta Seviye Uzman

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ünür. Ancak bu aşamada oturum açamaz, mesaj gönderip alamazsınız. Sonraki adımı tamamlayana kadar uygulama bir istisnayla iptal edilir.

4. Firebase konsol projesi oluşturma

Proje oluşturma

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

Firebase fiyatlandırma planınızı yükseltme

Cloud Storage for Firebase'i kullanmak için Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planı kapsamında olması, yani bir Cloud Faturalandırma hesabına bağlı olması gerekir.

  • Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
  • Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma Hesabı için uygun olup olmadığınızı kontrol edin.
  • Bu codelab'i bir etkinliğin parçası olarak gerçekleştiriyorsanız düzenleyen kişiye, kullanılabilir Cloud kredisi olup olmadığını sorun.

Projenizi Blaze planına yükseltmek için aşağıdaki adımları uygulayın:

  1. Firebase konsolunda planınızı yükseltmeyi seçin.
  2. Blaze planını seçin. Projenize bir Cloud Faturalandırma hesabı bağlamak için ekrandaki talimatları uygulayın.
    Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

iOS uygulamanızı bağlama

  1. Yeni projenizin Projeye Genel Bakış ekranında Firebase'i iOS uygulamanıza ekle'yi 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ı indirmek üzere GoogleService-Info.plist dosyasını indir'i tıklayın. Bu dosyayı uygulamanıza kopyalayıp FriendlyChatSwift hedefine ekleyin.

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

19d59efb213ddbdc.png

Firebase modülünü içe aktarma

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

Temel Firebase hizmetlerini .plist dosyanızdan yapılandırmak için application:didFinishLaunchingWithOptions işlevindeki FirebaseApp'te "configure" yöntemini kullanı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

Kimlik doğrulanmış kullanıcılarla kısıtlamak iç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 Konsolu'nun Veritabanı bölümünden Gerçek Zamanlı Veritabanı'nı seçin ve ardından 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 Konsolu'na 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) konuma 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'

Info.plist dosyanızı Google ile oturum açma için 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. Yapılandırmanız tamamlandığında aşağıdakine benzer bir şekilde görünmelidir (ancak uygulamaya özgü değerlerinizle):

1b54d5bd2f4f1448.png

Google ile oturum açma için clientID ayarlama

Firebase yapılandırıldıktan sonra, "didFinishLaunchingWithOptions:" yönteminde Google ile oturum açma özelliğini 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
}

Giriş 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 oturumunu otomatik olarak açma Ardından, başarılı bir oturum açtıktan sonra kullanıcının uygulamaya girmesine izin vermek için Firebase Auth'a bir dinleyici 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 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 yolunda giderse mesajlaşma ekranına yönlendirilirsiniz.

6. Realtime Database'i etkinleştir

2efe6805ef369641.png

Mesajlar'ı 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

İçe aktarma işleminden sonra veritabanınız şu şekilde görünecektir:

f3e0367f1c9cd187.png

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

Podfile dosyasının bağımlılıklar bloğunda Firebase/Database'un dahil edildiğinden emin olun.

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 dinleyici ekleyin.
  • Yeni mesajların gösterilebilmesi için DataSnapshot uygulamasını güncelleyin.

FCViewController'ınızın "deinit", "configureDatabase" ve "tableView:cellForRow indexPath:" yöntemlerini değiştirin; 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" girişinin yanındaki yeşil + simgesini tıklayıp aşağıdakine benzer bir nesne ekleyerek doğrudan Firebase konsolunda yeni mesajlar ekleyin: 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 push yöntemini kullandığınızda otomatik bir kimlik eklenir. Otomatik olarak oluşturulan bu kimlikler sıralı olduğundan yeni iletilerin doğru sırayla eklenmesi sağlanır.

FCViewController'ınızın "sendMessage:" yöntemini değiştirin ve 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önderme İşlemini 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, uygulama kullanıcı arayüzünde ve Firebase konsolunda görünür olmalıdır.

8. Resim depolama ve alma

Firebase Storage Bağımlılığını Onaylama

Podfile öğesinin bağımlılıklar bloğunda Firebase/Storage'un dahil edildiğinden emin olun.

Pod dosyası

pod 'Firebase/Storage'

Cloud Storage for Firebase'i ayarlama

Firebase projenizde Cloud Storage for Firebase'i ayarlamak için:

  1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Depolama'yı seçin.
  2. Başlayın'ı tıklayın.
  3. Varsayılan Storage paketiniz için bir konum seçin.
    US-WEST1, US-CENTRAL1 ve US-EAST1 bölgelerindeki paketler, Google Cloud Storage için "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
  4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolama alanı paketiniz için Güvenlik Kuralları eklemedenbir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
  5. Oluştur'u tıklayın.

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'ınızın "tableView: CellForRowAt indexPath:" yöntemini değiştirin ve 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
  }

9. Resim mesajları gönderme

Mağazayı Uygulama ve Resimleri Gönderme

Kullanıcıdan bir resim yükleyin, ardından bu resmin depolama alanı URL'sini veritabanıyla senkronize edin. Böylece resim, ileti içinde gönderilir.

FCViewController'ınızın "image PickerController: didFinish PickingMediaWithInfo:" yöntemini belirleyin. Bunu 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])
      }
    }
  }

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 seçmek için "Fotoğraf ekle" simgesini tıklayın. Fotoğrafın yer aldığı yeni mesaj, uygulama kullanıcı arayüzünde ve Firebase konsolunda görünür.

10. Tebrikler!

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

İşlediklerimiz

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

Daha Fazla Bilgi