Ćwiczenie z programowania w Firebase na iOS Swift

1. Omówienie

Witamy na szkoleniu z programowania na temat przyjaznego czatu. Z tego ćwiczenia w Codelabs dowiesz się, jak używać platformy Firebase do tworzenia aplikacji na iOS. Zaimplementujesz klienta czatu i będziesz monitorować jego skuteczność za pomocą Firebase.

Czego się nauczysz

• Zezwalaj użytkownikom na logowanie się.
• Synchronizowanie danych przy użyciu Bazy danych czasu rzeczywistego Firebase.
• Przechowuj pliki binarne w Firebase Storage.

Czego potrzebujesz

• Xcode
• CocoaPods
• urządzenia testowego z systemem iOS 8.0 lub nowszym albo symulatorem

2. Pobieranie przykładowego kodu

Skopiuj repozytorium GitHub z poziomu wiersza poleceń.

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

3. Utwórz aplikację startową

Aby utworzyć aplikację startową:

1. W oknie terminala przejdź do katalogu ios-starter/swift-starter z pobranego przykładowego kodu
2. Uruchom pod install --repo-update
3. Otwórz plik friendChatSwift.xcworkspace, by otworzyć projekt w Xcode.
4. Kliknij przycisk Uruchom.

Po kilku sekundach powinien wyświetlić się ekran główny znajomego czatu. Powinien się wyświetlić interfejs. Nie możesz się jednak zalogować, wysyłać ani odbierać wiadomości. Aplikacja zostanie przerwana w wyjątku, dopóki nie wykonasz kolejnego kroku.

4. Utwórz projekt w konsoli Firebase

Utwórz projekt

W konsoli Firebase wybierz Dodaj projekt.

Wywołaj projekt FriendlyChat, a następnie kliknij Utwórz projekt.

Łączenie aplikacji na iOS

1. Na ekranie „Przegląd projektu” nowego projektu kliknij Add Firebase to your iOS app (Dodaj Firebase do swojej aplikacji na iOS).
2. Wpisz identyfikator pakietu w postaci „com.google.firebase.codelab.FriendlyChatSwift”.
3. Wpisz „123456” jako identyfikator App Store.
4. Kliknij Zarejestruj aplikację.

Dodaj plik GoogleService-Info.plist do aplikacji

Na drugim ekranie kliknij Download GoogleService-Info.plist, aby pobrać plik konfiguracyjny zawierający wszystkie metadane Firebase niezbędne dla Twojej aplikacji. Skopiuj ten plik do aplikacji i dodaj go do środowiska docelowego friendlyChatSwift.

Klikamy „x”, w prawym górnym rogu wyskakującego okienka, aby je zamknąć (pomiń kroki 3 i 4), ponieważ będziesz wykonywać te czynności tutaj.

Zaimportuj moduł Firebase

Najpierw sprawdź, czy moduł Firebase został zaimportowany.

AppDelegate.swift, FCViewController.swift

import Firebase

Konfigurowanie Firebase w AppDelegate

Polecenie „Konfiguruj” w FirebaseApp w funkcji application:didFinishLaunchingWithOptions, aby skonfigurować podstawowe usługi Firebase z poziomu pliku .plist.

AppDelegate.swift

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

5. Identyfikowanie użytkowników

Używanie reguł do ograniczania dostępu do uwierzytelnionych użytkowników

Dodamy regułę wymagającą uwierzytelnienia przed odczytaniem lub zapisem jakichkolwiek wiadomości. W tym celu dodajemy poniższe reguły do obiektu danych wiadomości. W sekcji Baza danych w konsoli Firebase wybierz Baza danych czasu rzeczywistego i kliknij kartę Reguły. Następnie zmień reguły, aby wyglądały tak:

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

Więcej informacji o tym, jak to działa (w tym dokumentację zmiennej „auth”), znajdziesz w dokumentacji zabezpieczeń Firebase.

Konfigurowanie interfejsów API uwierzytelniania

Aby aplikacja miała dostęp do interfejsów API uwierzytelniania Firebase w imieniu użytkowników, musisz ją włączyć

1. Otwórz konsolę Firebase i wybierz projekt.
2. Wybierz Authentication (Uwierzytelnianie).
3. Wybierz kartę Metoda logowania.
4. Ustaw przełącznik Google w pozycji włączonej (niebieski).
5. W wyświetlonym oknie kliknij Zapisz.

Jeśli w dalszej części tego ćwiczenia w Codelabs wystąpi błąd i pojawi się komunikat „CONFIGURATION_NOT_FOUND”, wróć do tego kroku i dokładnie sprawdź swoją pracę.

Potwierdź zależność Uwierzytelniania Firebase

Potwierdź, że w pliku Podfile istnieją zależności Uwierzytelniania Firebase.

Plik Podfile

pod 'Firebase/Auth'

Skonfiguruj plik Info.plist na potrzeby logowania przez Google.

Musisz dodać do projektu XCode niestandardowy schemat adresu URL.

1. Otwórz konfigurację projektu: kliknij dwukrotnie nazwę projektu w widoku drzewa po lewej stronie. Wybierz swoją aplikację w sekcji CELE, kliknij kartę Informacje i rozwiń sekcję Typy adresów URL.
2. Kliknij przycisk + i dodaj schemat adresu URL dla odwrotnego identyfikatora klienta. Aby znaleźć tę wartość, otwórz plik konfiguracyjny GoogleService-Info.plist i odszukaj klucz REVERSED_CLIENT_ID. Skopiuj wartość tego klucza i wklej ją w polu Schematy URL na stronie konfiguracji. Pozostałe pola pozostaw puste.
3. Po zakończeniu konfiguracja powinna wyglądać mniej więcej tak (ale z wartościami specyficznymi dla aplikacji):

Ustawianie identyfikatora klienta na potrzeby Logowania przez Google

Po skonfigurowaniu Firebase możemy użyć identyfikatora klienta, aby skonfigurować Logowanie przez Google w polu „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
}

Dodawanie modułu obsługi logowania

Jeśli logowanie przez Google przebiegło pomyślnie, użyj konta, aby uwierzytelnić się w 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
      }
    }
  }

Automatycznie loguj użytkownika. Następnie dodaj detektor do Uwierzytelniania Firebase, aby po zalogowaniu się użytkownik mógł korzystać z aplikacji. I usuń deinit.

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

Wyloguj się

Dodawanie metody Wylogowywanie się

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

Przetestuj czytanie wiadomości jako zalogowany użytkownik

1. Kliknij przycisk Uruchom.
2. Powinien natychmiast wyświetlić się ekran logowania. Kliknij przycisk Logowanie przez Google.
3. Jeśli wszystko zadziałało poprawnie, powinien wyświetlić się ekran z wiadomościami.

6. Aktywuj bazę danych czasu rzeczywistego

Importowanie wiadomości

W projekcie w konsoli Firebase na pasku nawigacyjnym po lewej stronie wybierz element Baza danych. W rozszerzonym menu bazy danych wybierz Importuj plik JSON. Przejdź do pliku initial_messages.json w katalogu friendchat, wybierz go i kliknij przycisk Importuj. Spowoduje to zastąpienie wszystkich danych znajdujących się obecnie w bazie danych. Możesz też bezpośrednio edytować bazę danych, używając zielonych + i czerwonych X do dodawania i usuwania elementów.

Po zaimportowaniu bazy danych Twoja baza danych powinna wyglądać tak:

Potwierdź zależność bazy danych Firebase

Sprawdź, czy w bloku zależności pliku Podfile znajduje się parametr Firebase/Database.

Plik Podfile

pod 'Firebase/Database'

Synchronizowanie istniejących wiadomości

Dodaj kod, który synchronizuje nowo dodane wiadomości z interfejsem aplikacji.

Kod, który dodasz w tej sekcji:

• Zainicjuj bazę danych Firebase i dodaj detektor, aby obsługiwać zmiany wprowadzone w bazie danych.
• Zaktualizuj aplikację DataSnapshot, aby wyświetlały się nowe wiadomości.

Zmodyfikuj parametry „deinit”, „configureDatabase” i „tableView:cellForRow indexPath:” kontrolera FCViewController: Metody; zastąp kodem zdefiniowanym poniżej:

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
  }

Testowanie synchronizacji wiadomości

1. Kliknij przycisk Uruchom.
2. Kliknij przycisk Zaloguj się, aby rozpocząć, aby przejść do okna wiadomości.
3. Dodawaj nowe wiadomości bezpośrednio w konsoli Firebase, klikając zielony symbol + obok „wiadomości”. i dodaj obiekt taki jak ten:
4. Sprawdź, czy pojawiają się w interfejsie przyjaznego czatu.

7. Wysyłanie wiadomości

Implementowanie funkcji Wyślij wiadomość

Przekazywanie wartości do bazy danych. Gdy dodasz dane do Bazy danych czasu rzeczywistego Firebase za pomocą metody push, zostanie dodany automatyczny identyfikator. Identyfikatory są generowane automatycznie, dzięki czemu nowe wiadomości są dodawane w odpowiedniej kolejności.

Zmodyfikuj parametr „sendMessage:” kontrolera FCViewController ; zastąp kodem zdefiniowanym poniżej:

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

Testowanie wysyłania wiadomości

1. Kliknij przycisk Uruchom.
2. Kliknij Zaloguj się, aby przejść do okna wiadomości.
3. Napisz wiadomość i kliknij Wyślij. Nowa wiadomość powinna być widoczna w UI aplikacji i w konsoli Firebase.

8. Przechowywanie i odbieranie obrazów

Potwierdź zależność miejsca na dane w Firebase

Sprawdź, czy w bloku zależności instancji Podfile uwzględniono tag Firebase/Storage.

Plik Podfile

pod 'Firebase/Storage'

Aktywowanie usługi Firebase Storage w panelu

Otwórz konsolę Firebase i potwierdź, że pamięć masowa została włączona, korzystając z adresu „gs://PROJECTID.appspot.com”. domena

Jeśli widzisz okno aktywacji, kliknij „ROZPOCZNIJ”. aby aktywować ją z regułami domyślnymi.

Skonfiguruj FirebaseStorage

FCViewController.swift,

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

Odbieranie obrazów w istniejących wiadomościach

Dodaj kod pobierający obrazy z Firebase Storage.

Zmodyfikuj w obiekcie FCViewController wartość „tableView: mobileForRowAt indexPath:” ; zastąp kodem zdefiniowanym poniżej:

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. Wyślij wiadomości graficzne

Wdróż przechowywanie i wysyłanie obrazów

Prześlij obraz od użytkownika, a następnie zsynchronizuj adres URL pamięci tego obrazu z bazą danych, aby ten obraz był wysyłany w treści wiadomości.

Zmodyfikuj parametr „imagePickerController: didFinishPickingMediaWithInfo” kontrolera FCViewController: ; zastąp kodem zdefiniowanym poniżej:

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

Testowanie wysyłania i odbierania wiadomości graficznych

1. Kliknij przycisk Uruchom.
2. Kliknij Zaloguj się, aby przejść do okna wiadomości.
3. Kliknij „Dodaj zdjęcie”. aby wybrać zdjęcie. Nowa wiadomość ze zdjęciem powinna być widoczna w interfejsie aplikacji i konsoli Firebase.

10. Gratulacje!

Udało Ci się wykorzystać Firebase, aby łatwo stworzyć aplikację do obsługi czatu w czasie rzeczywistym.

Omówione zagadnienia

• Baza danych czasu rzeczywistego
• Logowanie sfederowane
• Pamięć

Więcej informacji

• Firebase.google.com.