Firebase iOS Codelab Swift

2efe6805ef369641.png

Bienvenue dans l'atelier de programmation Friendly Chat. Dans cet atelier de programmation, vous apprendrez à utiliser la plate-forme Firebase pour créer des applications iOS. Vous implémenterez un client de chat et surveillerez ses performances à l'aide de Firebase.

Ce codelab est également disponible en Objective-C.

Ce que vous apprendrez

  • Autoriser les utilisateurs à se connecter.
  • Synchronisez les données à l'aide de la base de données en temps réel Firebase.
  • Stockez les fichiers binaires dans Firebase Storage.

Ce dont vous aurez besoin

  • Xcode
  • CocoaPods
  • Un appareil de test avec iOS 8.0+ ou un simulateur

Comment allez-vous utiliser ce tutoriel ?

Lisez-le seulement Lisez-le et complétez les exercices

Comment évalueriez-vous votre expérience avec la création d'applications iOS ?

Novice Intermédiaire Compétent

Clonez le référentiel GitHub à partir de la ligne de commande.

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

2f4c98d858c453fe.png

Pour créer l'application de démarrage :

  1. Dans une fenêtre de terminal, accédez au android_studio_folder.png ios-starter/swift-starter répertoire de votre exemple de code télécharger
  2. Exécuter pod install --repo-update
  3. Ouvrez le fichier FriendlyChatSwift.xcworkspace pour ouvrir le projet dans Xcode.
  4. Clique le 98205811bbed9d74.png Bouton Exécuter.

Vous devriez voir l'écran d'accueil de Friendly Chat apparaître après quelques secondes. L'interface utilisateur devrait apparaître. Cependant, à ce stade, vous ne pouvez pas vous connecter, envoyer ou recevoir des messages. L'application s'arrêtera avec une exception jusqu'à ce que vous ayez terminé l'étape suivante.

Créer un projet

A partir de la console Firebase sélectionnez Ajouter un projet.

Appelez le projet FriendlyChat , puis cliquez sur Créer un projet.

Capture d'écran du 06-11-2015 14:13:39.png

Connectez votre application iOS

  1. A partir de l'écran Aperçu du projet de votre nouveau projet, cliquez sur Ajouter Firebase à votre application iOS.
  2. Entrez l'ID bundle, comme " com.google.firebase.codelab.FriendlyChatSwift ".
  3. Entrez l'identifiant App Store comme « 123456 ».
  4. Cliquez sur Enregistrer App.

Ajoutez le fichier GoogleService-Info.plist à votre application

Sur le deuxième écran cliquez sur Télécharger GoogleService-Info.plist pour télécharger un fichier de configuration qui contient toutes les métadonnées nécessaires Firebase pour votre application. Copiez ce fichier dans votre application et l' ajouter à la cible de FriendlyChatSwift.

Vous pouvez maintenant cliquer sur le "x" dans le coin supérieur droit de la fenêtre contextuelle pour la fermer - en sautant les étapes 3 et 4 - car vous effectuerez ces étapes ici.

19d59efb213ddbdc.png

Importer le module Firebase

Commencez par vous assurant que le Firebase module est importé.

AppDelegate.swift , FCViewController.swift

import Firebase

Configurer Firebase dans AppDelegate

Utilisez la méthode "configure" dans FirebaseApp dans la fonction application:didFinishLaunchingWithOptions pour configurer les services Firebase sous-jacents à partir de votre fichier .plist.

AppDelegate.swift

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

Utiliser des règles pour restreindre aux utilisateurs authentifiés

Nous allons maintenant ajouter une règle pour exiger l'authentification avant de lire ou d'écrire des messages. Pour ce faire, nous ajoutons les règles suivantes à notre objet de données de messages. À partir de la section de base de données de la console Firebase sélectionnez Base de données en temps réel, puis cliquez sur l'onglet Règles. Mettez ensuite à jour les règles pour qu'elles ressemblent à ceci :

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

Pour plus d' informations sur la façon dont ces travaux (y compris la documentation sur la variable « auth ») voir la Firebase documentation de sécurité .

Configurer les API d'authentification

Avant que votre application puisse accéder aux API Firebase Authentication au nom de vos utilisateurs, vous devez l'activer

  1. Accédez à la console Firebase et sélectionnez votre projet
  2. Sélectionnez l' authentification
  3. Sélectionnez l'onglet Connexion Méthode
  4. Mettre le commutateur Google activé (bleu)
  5. Appuyez sur Enregistrer dans la boîte de dialogue résultante

Si vous obtenez des erreurs plus tard dans cet atelier de programmation avec le message "CONFIGURATION_NOT_FOUND", revenez à cette étape et vérifiez votre travail.

Confirmer la dépendance Firebase Auth

Confirmer Firebase dépendances Auth existent dans le Podfile fichier.

Fichier Pod

pod 'Firebase/Auth'

Configurez votre Info.plist pour Google Sign In.

Vous devrez ajouter un schéma d'URL personnalisé à votre projet XCode.

  1. Ouvrez votre configuration de projet : double-cliquez sur le nom du projet dans l'arborescence de gauche. Sélectionnez votre application dans la section CIBLES, puis sélectionnez l'onglet Informations et développez la section Types d'URL.
  2. Cliquez sur le bouton + et ajoutez un schéma d'URL pour votre ID client inversé. Pour trouver cette valeur, ouvrez le fichier de configuration GoogleService-Info.plist et recherchez la clé REVERSED_CLIENT_ID. Copiez la valeur de cette clé et collez-la dans la zone Schémas d'URL sur la page de configuration. Laissez les autres champs vides.
  3. Une fois terminée, votre configuration devrait ressembler à ce qui suit (mais avec des valeurs spécifiques à votre application) :

1b54d5bd2f4f1448.png

Définir l'ID client pour la connexion Google

Une fois Firebase configuré, nous pouvons utiliser le clientID pour configurer Google Sign In dans la méthode "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
}

Ajouter le gestionnaire de connexion

Une fois le résultat de la connexion Google réussi, utilisez le compte pour vous authentifier auprès de 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
      }
    }
  }

Connectez-vous automatiquement à l'utilisateur. Ajoutez ensuite un écouteur à Firebase Auth, pour permettre à l'utilisateur d'accéder à l'application, après s'être connecté avec succès. Et supprimez l'écouteur à la fin.

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

Se déconnecter

Ajouter la méthode de déconnexion

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

Tester la lecture des messages en tant qu'utilisateur connecté

  1. Clique le 98205811bbed9d74.png Bouton Exécuter.
  2. Vous devriez être immédiatement redirigé vers l'écran de connexion. Appuyez sur le bouton de connexion Google.
  3. Vous devriez alors être redirigé vers l'écran de messagerie si tout a bien fonctionné.

2efe6805ef369641.png

Importer des messages

Dans votre projet dans la console Firebase sélectionnez l'élément de base de données sur la barre de navigation de gauche. Dans le menu de débordement de la base de données sélectionnez Importer JSON. Accédez au initial_messages.json fichier dans le répertoire friendlychat, sélectionnez - le puis cliquez sur le bouton Importer. Cela remplacera toutes les données actuellement dans votre base de données. Vous pouvez également modifier directement la base de données, en utilisant le + vert et le x rouge pour ajouter et supprimer des éléments.

20ccf4856b715b4c.png

Après avoir importé votre base de données devrait ressembler à ceci :

f3e0367f1c9cd187.png

Confirmer la dépendance de la base de données Firebase

Dans le bloc de dépendances du Podfile fichier, vérifiez que Firebase/Database de Firebase/Database est inclus.

Fichier Pod

pod 'Firebase/Database'

Synchroniser les messages existants

Ajoutez du code qui synchronise les messages nouvellement ajoutés à l'interface utilisateur de l'application.

Le code que vous ajoutez dans cette section :

  • Initialisez la base de données Firebase et ajoutez un écouteur pour gérer les modifications apportées à la base de données.
  • Mettre à jour le DataSnapshot afin que les nouveaux messages seront affichés.

Modifiez les méthodes "deinit", "configureDatabase" et "tableView:cellForRow indexPath:" de votre FCViewController ; remplacer par le code défini ci-dessous :

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
  }

Tester la synchronisation des messages

  1. Clique le 98205811bbed9d74.png Bouton Exécuter.
  2. Cliquez sur le signe pour bouton Commencer à aller à la fenêtre des messages.
  3. Ajoutez de nouveaux messages directement dans la console Firebase en cliquant sur le symbole + vert à côté de l'entrée « messages » et en ajoutant un objet comme celui-ci : f9876ffc8b316b14.png
  4. Confirmez qu'ils apparaissent dans l'interface utilisateur de Friendly-Chat.

Mettre en œuvre Envoyer un message

Pousser les valeurs vers la base de données. Lorsque vous utilisez la méthode push pour ajouter des données à Firebase Realtime Database, un ID automatique sera ajouté. Ces ID générés automatiquement sont séquentiels, ce qui garantit que les nouveaux messages seront ajoutés dans le bon ordre.

Modifiez la méthode « sendMessage : » de votre FCViewController ; remplacer par le code défini ci-dessous :

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

Tester l'envoi de messages

  1. Clique le 98205811bbed9d74.png Bouton Exécuter.
  2. Cliquez sur Se connecter pour accéder à la fenêtre des messages.
  3. Tapez un message et appuyez sur envoyer. Le nouveau message doit être visible dans l'interface utilisateur de l'application et dans la console Firebase.

Confirmer la dépendance du stockage Firebase

Dans le bloc de dépendances du Podfile , confirment Firebase/Storage est inclus.

Fichier Pod

pod 'Firebase/Storage'

Activer le stockage Firebase dans le tableau de bord

Accédez à la console Firebase et confirmez que le stockage est activé avec le domaine "gs://PROJECTID.appspot.com"

b0438b37a588bcee.png

Si vous voyez la fenêtre d'activation à la place, cliquez sur "COMMENCER" pour l'activer avec les règles par défaut.

c290bbbff2cafa7.png

Configurer FirebaseStorage

FCViewController.swift

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

Recevoir des images dans les messages existants

Ajoutez du code qui télécharge des images depuis Firebase Storage.

Modifiez la méthode "tableView: cellForRowAt indexPath:" de votre FCViewController ; remplacer par le code défini ci-dessous :

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
  }

Mettre en œuvre le stockage et l'envoi d'images

Téléchargez une image de l'utilisateur, puis synchronisez l'URL de stockage de cette image avec la base de données afin que cette image soit envoyée dans le message.

Modifiez la méthode "imagePickerController: didFinishPickingMediaWithInfo:" de votre FCViewController ; remplacer par le code défini ci-dessous :

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

Tester l'envoi et la réception de messages image

  1. Clique le 98205811bbed9d74.png Bouton Exécuter.
  2. Cliquez sur Se connecter pour accéder à la fenêtre des messages.
  3. Cliquez sur l'icône "ajouter une photo" pour choisir une photo. Le nouveau message avec la photo doit être visible dans l'interface utilisateur de l'application et dans la console Firebase.

Vous avez utilisé Firebase pour créer facilement une application de chat en temps réel.

Ce que nous avons couvert

  • Base de données en temps réel
  • Connexion fédérée
  • Espace de rangement

Apprendre encore plus