Firebase iOS Codelab Swift

1. Übersicht

2efe6805ef369641.png

Willkommen beim Codelab für Friendly Chat. In diesem Codelab erfahren Sie, wie Sie mit der Firebase-Plattform iOS-Anwendungen erstellen. Sie implementieren einen Chat-Client und überwachen seine Leistung mit Firebase.

Dieses Codelab ist auch in Objective-C verfügbar.

Was du lernst

  • Erlauben Sie Benutzern, sich anzumelden.
  • Synchronisieren Sie Daten mit der Firebase Realtime Database.
  • Speichern Sie Binärdateien in Firebase Storage.

Was du brauchen wirst

  • Xcode
  • Kakaoschoten
  • Ein Testgerät mit iOS 8.0+ oder Simulator

Wie werden Sie dieses Tutorial verwenden?

Nur durchlesen Lies es und vervollständige die Übungen

Wie würden Sie Ihre Erfahrung mit dem Erstellen von iOS-Apps bewerten?

Anfänger Dazwischenliegend Kompetent

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository über die Befehlszeile.

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

3. Erstellen Sie die Starter-App

2f4c98d858c453fe.png

So erstellen Sie die Starter-App:

  1. Navigieren Sie in einem Terminalfenster zum android_studio_folder.png ios-starter/swift-starter Verzeichnis aus Ihrem Download - Beispielcode
  2. Run pod install --repo-update
  3. Öffnen Sie die Datei FriendlyChatSwift.xcworkspace, um das Projekt in Xcode zu öffnen.
  4. Drücke den 98205811bbed9d74.png Run - Taste.

Nach einigen Sekunden sollte der Startbildschirm von Friendly Chat angezeigt werden. Die Benutzeroberfläche sollte angezeigt werden. Zu diesem Zeitpunkt können Sie sich jedoch nicht anmelden, Nachrichten senden oder empfangen. Die App wird mit einer Ausnahme abgebrochen, bis Sie den nächsten Schritt abgeschlossen haben.

4. Firebase-Konsolenprojekt erstellen

Projekt erstellen

Von Firebase Konsole wählen Projekt hinzufügen.

Rufen Sie das Projekt FriendlyChat , dann klicken Sie auf Projekt erstellen.

Screenshot vom 06.11.2015 14:13:39.png

Verbinden Sie Ihre iOS-App

  1. Von der Projektübersicht des neuen Projekts, klicken Sie auf Hinzufügen Firebase zu Ihrem iOS - App.
  2. Geben Sie die Bundle - ID als „ com.google.firebase.codelab.FriendlyChatSwift “.
  3. Geben Sie den App Store - ID als " 123456 ".
  4. Klicken Sie auf Registrieren App.

Fügen Sie Ihrer App die Datei GoogleService-Info.plist hinzu

Auf dem zweiten Bildschirm klicken Sie auf Download GoogleService-Info.plist eine Konfigurationsdatei herunterzuladen , die alle notwendigen Firebase Metadaten für Ihre App enthält. Kopieren Sie diese Datei in Ihrer Anwendung und fügen Sie es dem FriendlyChatSwift Ziel.

Sie können jetzt auf das "x" in der oberen rechten Ecke des Popups klicken, um es zu schließen – überspringen Sie die Schritte 3 und 4 – da Sie diese Schritte hier ausführen.

19d59efb213ddbdc.png

Firebase-Modul importieren

Beginnen Sie, indem sichergestellt wird die Firebase Modul importiert wird.

AppDelegate.swift , FCViewController.swift

import Firebase

Firebase in AppDelegate konfigurieren

Verwenden Sie die Methode "configure" in FirebaseApp in der Funktion application:didFinishLaunchingWithOptions, um die zugrunde liegenden Firebase-Dienste aus Ihrer .plist-Datei zu konfigurieren.

AppDelegate.swift

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

5. Identifizieren Sie Benutzer

Verwenden von Regeln zur Beschränkung auf authentifizierte Benutzer

Wir werden jetzt eine Regel hinzufügen, die eine Authentifizierung erfordert, bevor Nachrichten gelesen oder geschrieben werden. Dazu fügen wir unserem Nachrichten-Datenobjekt die folgenden Regeln hinzu. Aus dem Abschnitt Datenbank von Firebase Konsole wählen Realtime - Datenbank, dann klicken Sie auf die Registerkarte Regeln. Aktualisieren Sie dann die Regeln, sodass sie wie folgt aussehen:

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

Weitere Informationen darüber , wie das funktioniert (einschließlich Dokumentation auf der „Auth“ Variable) finden Sie in der Firebase Sicherheitsdokumentation .

Authentifizierungs-APIs konfigurieren

Bevor Ihre Anwendung im Namen Ihrer Benutzer auf die Firebase Authentication APIs zugreifen kann, müssen Sie sie aktivieren

  1. Navigieren Sie zu dem Firebase - Konsole und wählen Sie Ihr Projekt
  2. Wählen Sie Authentication
  3. Wählen Sie das Anmelden Registerkarte Methode
  4. Schalten Sie die Google - Schalter auf aktiviert (blau)
  5. Drücken Sie Speichern auf dem daraufhin angezeigten Dialog

Wenn Sie später in diesem Codelab Fehler mit der Meldung "CONFIGURATION_NOT_FOUND" erhalten, kehren Sie zu diesem Schritt zurück und überprüfen Sie Ihre Arbeit.

Bestätigen Sie die Firebase Auth-Abhängigkeit

Bestätigen Firebase Auth Abhängigkeiten bestehen in der Podfile Datei.

Pod-Datei

pod 'Firebase/Auth'

Richten Sie Ihre Info.plist für die Google-Anmeldung ein.

Sie müssen Ihrem XCode-Projekt ein benutzerdefiniertes URL-Schema hinzufügen.

  1. Öffnen Sie Ihre Projektkonfiguration: Doppelklicken Sie in der linken Baumansicht auf den Projektnamen. Wählen Sie Ihre App im Abschnitt ZIELE aus, wählen Sie dann die Registerkarte Info und erweitern Sie den Abschnitt URL-Typen.
  2. Klicken Sie auf die Schaltfläche + und fügen Sie ein URL-Schema für Ihre umgekehrte Client-ID hinzu. Um diesen Wert zu finden, öffnen Sie die Konfigurationsdatei GoogleService-Info.plist und suchen Sie nach dem Schlüssel REVERSED_CLIENT_ID. Kopieren Sie den Wert dieses Schlüssels und fügen Sie ihn in das Feld URL-Schemas auf der Konfigurationsseite ein. Lassen Sie die anderen Felder leer.
  3. Nach Abschluss sollte Ihre Konfiguration in etwa wie folgt aussehen (aber mit Ihren anwendungsspezifischen Werten):

1b54d5bd2f4f1448.png

ClientID für die Google-Anmeldung festlegen

Nachdem Firebase konfiguriert wurde, können wir die clientID verwenden, um die Google-Anmeldung innerhalb der Methode "didFinishLaunchingWithOptions:" einzurichten.

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
}

Den Anmelde-Handler hinzufügen

Sobald das Ergebnis der Google-Anmeldung erfolgreich war, verwenden Sie das Konto, um sich bei Firebase zu authentifizieren.

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

Melden Sie den Benutzer automatisch an. Fügen Sie dann einen Listener zu Firebase Auth hinzu, um den Benutzer nach erfolgreicher Anmeldung in die App zu lassen. Und entfernen Sie den Listener bei 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)
    }
  }

Austragen

Abmeldemethode hinzufügen

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

Testen Sie das Lesen von Nachrichten als angemeldeter Benutzer

  1. Drücke den 98205811bbed9d74.png Run - Taste.
  2. Sie sollten sofort zum Anmeldebildschirm weitergeleitet werden. Tippen Sie auf die Google-Anmeldeschaltfläche.
  3. Sie sollten dann zum Nachrichtenbildschirm weitergeleitet werden, wenn alles gut funktioniert hat.

6. Echtzeit-Datenbank aktivieren

2efe6805ef369641.png

Nachrichten importieren

In einem Projekt in Firebase - Konsole wählen Sie das Datenbankelement auf der linken Navigationsleiste. Im Überlaufmenü der Datenbank auswählen Import JSON. Wechseln Sie zu der initial_messages.json Datei im Verzeichnis friendlychat, wählen Sie es dann auf die Schaltfläche Importieren klicken. Dadurch werden alle Daten ersetzt, die sich derzeit in Ihrer Datenbank befinden. Sie können die Datenbank auch direkt bearbeiten, indem Sie das grüne + und das rote x verwenden, um Elemente hinzuzufügen und zu entfernen.

20ccf4856b715b4c.png

Nach dem Import sollte Ihre Datenbank so aussehen:

f3e0367f1c9cd187.png

Bestätigen Sie die Firebase-Datenbankabhängigkeit

Im Abhängigkeit Block der Podfile Datei, bestätigt , dass Firebase/Database enthalten ist.

Pod-Datei

pod 'Firebase/Database'

Vorhandene Nachrichten synchronisieren

Fügen Sie Code hinzu, der neu hinzugefügte Nachrichten mit der App-Benutzeroberfläche synchronisiert.

Der Code, den Sie in diesem Abschnitt hinzufügen, wird:

  • Initialisieren Sie die Firebase-Datenbank und fügen Sie einen Listener hinzu, um die an der Datenbank vorgenommenen Änderungen zu verarbeiten.
  • Aktualisieren Sie die DataSnapshot so neue Nachrichten werden angezeigt.

Ändern Sie die Methoden "deinit", "configureDatabase" und "tableView:cellForRow indexPath:" Ihres FCViewControllers; durch den unten definierten Code ersetzen:

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
  }

Nachrichtensynchronisierung testen

  1. Drücke den 98205811bbed9d74.png Run - Taste.
  2. Klicken Sie auf die Anmelden , um loszulegen Schaltfläche , um die Nachrichten - Fenster zu gehen.
  3. Fügen Sie neue Nachrichten direkt in der Firebase Console hinzu, indem Sie auf das grüne + Symbol neben dem Eintrag "Nachrichten" klicken und ein Objekt wie das folgende hinzufügen: f9876ffc8b316b14.png
  4. Bestätigen Sie, dass sie in der Friendly-Chat-Benutzeroberfläche angezeigt werden.

7. Nachrichten senden

Nachricht senden implementieren

Push-Werte in die Datenbank. Wenn Sie die Push-Methode verwenden, um Daten zur Firebase Realtime Database hinzuzufügen, wird eine automatische ID hinzugefügt. Diese automatisch generierten IDs sind sequenziell, wodurch sichergestellt wird, dass neue Nachrichten in der richtigen Reihenfolge hinzugefügt werden.

Ändern Sie die "sendMessage:"-Methode Ihres FCViewControllers; durch den unten definierten Code ersetzen:

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

Senden von Nachrichten testen

  1. Drücke den 98205811bbed9d74.png Run - Taste.
  2. Klicken Sie auf Anmelden , um das Meldungsfenster zu gehen.
  3. Geben Sie eine Nachricht ein und klicken Sie auf Senden. Die neue Nachricht sollte in der App-Benutzeroberfläche und in der Firebase-Konsole sichtbar sein.

8. Bilder speichern und empfangen

Bestätigen Sie die Firebase-Speicherabhängigkeit

Im Abhängigkeit Block des Podfile , bestätigt Firebase/Storage ist enthalten.

Pod-Datei

pod 'Firebase/Storage'

Firebase Storage im Dashboard aktivieren

Gehen Sie zur Firebase Console und bestätigen Sie, dass der Speicher mit der Domain "gs://PROJECTID.appspot.com" aktiviert ist

b0438b37a588bcee.png

Wenn stattdessen das Aktivierungsfenster angezeigt wird, klicken Sie auf "ERSTE SCHRITTE", um es mit den Standardregeln zu aktivieren.

c290bbebff2cafa7.png

FirebaseStorage konfigurieren

FCViewController.swift

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

Bilder in bestehenden Nachrichten empfangen

Fügen Sie Code hinzu, der Bilder von Firebase Storage herunterlädt.

Ändern Sie die "tableView: cellForRowAt indexPath:"-Methode Ihres FCViewControllers; durch den unten definierten Code ersetzen:

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. Bildnachrichten senden

Bilder speichern und senden implementieren

Laden Sie ein Bild vom Benutzer hoch und synchronisieren Sie dann die Speicher-URL dieses Bilds mit der Datenbank, damit dieses Bild in der Nachricht gesendet wird.

Ändern Sie die Methode "imagePickerController: didFinishPickingMediaWithInfo:" Ihres FCViewControllers; durch den unten definierten Code ersetzen:

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

Testen Sie das Senden und Empfangen von Bildnachrichten

  1. Drücke den 98205811bbed9d74.png Run - Taste.
  2. Klicken Sie auf Anmelden , um das Meldungsfenster zu gehen.
  3. Klicken Sie auf das Symbol "Foto hinzufügen", um ein Foto auszuwählen. Die neue Nachricht mit dem Foto sollte in der App-Benutzeroberfläche und in der Firebase-Konsole sichtbar sein.

10. Herzlichen Glückwunsch!

Sie haben Firebase verwendet, um auf einfache Weise eine Echtzeit-Chat-Anwendung zu erstellen.

Was wir abgedeckt haben

  • Echtzeit-Datenbank
  • Verbundene Anmeldung
  • Lagerung

Erfahren Sie mehr