Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Firebase iOS Codelab Swift

2efe6805ef369641.png

Selamat datang di codelab Obrolan Ramah. Dalam codelab ini, Anda akan mempelajari cara menggunakan platform Firebase untuk membuat aplikasi iOS. Anda akan menerapkan klien obrolan dan memantau kinerjanya menggunakan Firebase.

Codelab ini juga tersedia di Objective-C.

Apa yang akan Anda pelajari?

  • Izinkan pengguna untuk masuk.
  • Sinkronkan data menggunakan Firebase Realtime Database.
  • Simpan file biner di Firebase Storage.

Apa yang Anda butuhkan?

  • Kode X
  • CocoaPods
  • Perangkat uji dengan iOS 8.0+ atau simulator

Bagaimana Anda akan menggunakan tutorial ini?

Baca saja sampai habis Baca dan selesaikan latihannya

Bagaimana penilaian pengalaman Anda dalam membuat aplikasi iOS?

pemula Intermediat Ahli

Kloning repositori GitHub dari baris perintah.

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

2f4c98d858c453fe.png

Untuk membangun aplikasi pemula:

  1. Di jendela terminal, navigasikan ke android_studio_folder.png ios-starter/swift-starter direktori dari sampel kode download Anda
  2. Run pod install --repo-update
  3. Buka file FriendlyChatSwift.xcworkspace untuk membuka proyek di Xcode.
  4. Klik 98205811bed9d74.png Tombol Run.

Anda akan melihat layar beranda Obrolan Ramah muncul setelah beberapa detik. UI akan muncul. Namun, saat ini Anda tidak dapat masuk, mengirim, atau menerima pesan. Aplikasi akan dibatalkan dengan pengecualian hingga Anda menyelesaikan langkah berikutnya.

Buat proyek

Dari Firebase konsol pilih Add Project.

Panggil proyek FriendlyChat , lalu klik Create Project.

Tangkapan layar dari 06-11-2015 14:13:39.png

Hubungkan aplikasi iOS Anda

  1. Dari Proyek Ikhtisar layar proyek baru Anda, klik Tambah Firebase ke aplikasi iOS Anda.
  2. Masukkan bundel ID, sebagai " com.google.firebase.codelab.FriendlyChatSwift ".
  3. Masukkan App Store id sebagai " 123456 ".
  4. Klik Register App.

Tambahkan file GoogleService-Info.plist ke aplikasi Anda

Pada kedua layar klik Unduh GoogleService-Info.plist untuk men-download file konfigurasi yang berisi semua metadata Firebase yang diperlukan untuk aplikasi Anda. Salin file tersebut ke aplikasi Anda dan menambahkannya ke target FriendlyChatSwift.

Anda sekarang dapat mengklik "x" di sudut kanan atas popup untuk menutupnya – melewatkan langkah 3 dan 4 – karena Anda akan melakukan langkah-langkah tersebut di sini.

19d59efb213ddbdc.png

Impor modul Firebase

Mulailah dengan memastikan Firebase modul diimpor.

AppDelegate.swift , FCViewController.swift

import Firebase

Konfigurasikan Firebase di AppDelegate

Gunakan metode "configure" di FirebaseApp di dalam fungsi application:didFinishLaunchingWithOptions untuk mengonfigurasi layanan Firebase yang mendasari dari file .plist Anda.

AppDelegate.swift

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

Gunakan Aturan Untuk Membatasi Untuk Pengguna yang Diautentikasi

Kami sekarang akan menambahkan aturan untuk meminta otentikasi sebelum membaca atau menulis pesan apa pun. Untuk melakukan ini, kami menambahkan aturan berikut ke objek data pesan kami. Dari dalam bagian Database Firebase konsol pilih Realtime Database, kemudian klik pada tab Aturan. Kemudian perbarui aturan sehingga terlihat seperti ini:

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

Untuk informasi lebih lanjut tentang cara kerja ini (termasuk dokumentasi pada variabel "auth") melihat Firebase dokumentasi keamanan .

Konfigurasikan API Otentikasi

Sebelum aplikasi Anda dapat mengakses Firebase Authentication API atas nama pengguna Anda, Anda harus mengaktifkannya

  1. Arahkan ke Firebase konsol dan pilih proyek Anda
  2. Pilih Otentikasi
  3. Pilih Masuk Metode tab
  4. Beralih beralih Google untuk diaktifkan (biru)
  5. Tekan Simpan pada dialog yang dihasilkan

Jika nanti Anda mendapatkan kesalahan dalam codelab ini dengan pesan "CONFIGURATION_NOT_FOUND", kembali ke langkah ini dan periksa kembali pekerjaan Anda.

Konfirmasi ketergantungan Firebase Auth

Konfirmasi Firebase Tupoksi dependensi ada di Podfile berkas.

Podfile

pod 'Firebase/Auth'

Siapkan Info.plist Anda untuk Google Sign In.

Anda harus menambahkan skema URL khusus ke proyek XCode Anda.

  1. Buka konfigurasi proyek Anda: klik dua kali nama proyek di tampilan hierarki kiri. Pilih aplikasi Anda dari bagian TARGET, lalu pilih tab Info, dan perluas bagian Jenis URL.
  2. Klik tombol +, dan tambahkan skema URL untuk ID klien terbalik Anda. Untuk menemukan nilai ini, buka file konfigurasi GoogleService-Info.plist, dan cari kunci REVERSED_CLIENT_ID. Salin nilai kunci itu, dan tempelkan ke kotak Skema URL di halaman konfigurasi. Biarkan bidang lainnya kosong.
  3. Setelah selesai, konfigurasi Anda akan terlihat seperti berikut ini (tetapi dengan nilai khusus aplikasi Anda):

1b54d5bd2f4f1448.png

Setel clientID untuk Masuk dengan Google

Setelah Firebase dikonfigurasi, kita dapat menggunakan clientID untuk menyiapkan Google Sign In di dalam metode "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
}

Tambahkan penangan masuk

Setelah hasil Google Sign-In berhasil, gunakan akun untuk mengautentikasi dengan 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
      }
    }
  }

Masuk pengguna secara otomatis. Kemudian tambahkan listener ke Firebase Auth, untuk mengizinkan pengguna masuk ke aplikasi, setelah berhasil masuk. Dan hapus listener di deinit.

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

Keluar

Tambahkan metode Keluar

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

Uji Membaca Pesan sebagai Pengguna yang Masuk

  1. Klik 98205811bed9d74.png Tombol Run.
  2. Anda akan segera diarahkan ke layar masuk. Ketuk tombol Masuk dengan Google.
  3. Anda kemudian harus dikirim ke layar pesan jika semuanya bekerja dengan baik.

2efe6805ef369641.png

Impor Pesan

Dalam proyek Anda di Firebase konsol pilih item database pada bar navigasi kiri. Dalam menu limpahan Database pilih Impor JSON. Browse ke initial_messages.json file dalam direktori friendlychat, pilih kemudian klik tombol Import. Ini akan menggantikan data apa pun yang saat ini ada di database Anda. Anda juga dapat mengedit database secara langsung, menggunakan tanda x hijau + dan merah untuk menambah dan menghapus item.

20ccf4856b715b4c.png

Setelah mengimpor database Anda akan terlihat seperti ini:

f3e0367f1c9cd187.png

Konfirmasi Ketergantungan Database Firebase

Dalam blok dependensi dari Podfile berkas, konfirmasi bahwa Firebase/Database disertakan.

Podfile

pod 'Firebase/Database'

Sinkronisasi Pesan yang Ada

Tambahkan kode yang menyinkronkan pesan yang baru ditambahkan ke UI aplikasi.

Kode yang Anda tambahkan di bagian ini akan:

  • Inisialisasi database Firebase dan tambahkan listener untuk menangani perubahan yang dibuat pada database.
  • Update DataSnapshot sehingga pesan baru akan ditampilkan.

Ubah metode "deinit", "configureDatabase", dan "tableView:cellForRow indexPath:" FCViewController Anda; ganti dengan kode yang didefinisikan di bawah ini:

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
  }

Sinkronisasi Pesan Uji

  1. Klik 98205811bed9d74.png Tombol Run.
  2. Klik Masuk untuk mendapatkan tombol mulai masuk ke jendela pesan.
  3. Tambahkan pesan baru langsung di konsol Firebase dengan mengklik simbol + hijau di sebelah entri "pesan" dan menambahkan objek seperti berikut: f9876ffc8b316b14.png
  4. Konfirmasikan bahwa mereka muncul di UI Friendly-Chat.

Terapkan Kirim Pesan

Dorong nilai ke database. Saat Anda menggunakan metode push untuk menambahkan data ke Firebase Realtime Database, ID otomatis akan ditambahkan. ID yang dibuat secara otomatis ini berurutan, yang memastikan bahwa pesan baru akan ditambahkan dalam urutan yang benar.

Ubah metode "sendMessage:" FCViewController Anda; ganti dengan kode yang didefinisikan di bawah ini:

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

Uji Mengirim Pesan

  1. Klik 98205811bed9d74.png Tombol Run.
  2. Klik Masuk untuk pergi ke jendela pesan.
  3. Ketik pesan dan tekan kirim. Pesan baru harus terlihat di UI aplikasi dan di konsol Firebase.

Konfirmasi Ketergantungan Penyimpanan Firebase

Dalam blok dependensi dari Podfile , konfirmasi Firebase/Storage disertakan.

Podfile

pod 'Firebase/Storage'

Aktifkan Penyimpanan Firebase di dasbor

Buka konsol Firebase dan konfirmasikan bahwa Penyimpanan diaktifkan dengan domain "gs://PROJECTID.appspot.com"

b0438b37a588bcee.png

Jika Anda melihat jendela aktivasi, klik "GET STARTED" untuk mengaktifkannya dengan aturan default.

c290bbebff2cafa7.png

Konfigurasikan FirebaseStorage

FCViewController.swift

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

Terima gambar dalam pesan yang ada

Tambahkan kode yang mendownload gambar dari Firebase Storage.

Ubah metode "tableView: cellForRowAt indexPath:" FCViewController Anda; ganti dengan kode yang didefinisikan di bawah ini:

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
  }

Terapkan Simpan dan Kirim Gambar

Unggah gambar dari pengguna, lalu sinkronkan URL penyimpanan gambar ini ke database sehingga gambar ini dikirim di dalam pesan.

Ubah metode "imagePickerController: didFinishPickingMediaWithInfo:" FCViewController Anda; ganti dengan kode yang didefinisikan di bawah ini:

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

Uji Mengirim dan Menerima Pesan Gambar

  1. Klik 98205811bed9d74.png Tombol Run.
  2. Klik Masuk untuk pergi ke jendela pesan.
  3. Klik ikon "tambah foto" untuk memilih foto. Pesan baru dengan foto tersebut akan terlihat di UI aplikasi dan di Firebase console.

Anda telah menggunakan Firebase untuk membuat aplikasi chat real-time dengan mudah.

Apa yang telah kita bahas

  • Basis Data Waktu Nyata
  • Masuk Federasi
  • Penyimpanan

Belajarlah lagi