このページは Cloud Translation API によって翻訳されました。

Firebase iOS コードラボ Swift

1。概要

Friendly Chat コードラボへようこそ。このコードラボでは、Firebase プラットフォームを使用して iOS アプリケーションを作成する方法を学びます。チャットクライアントを実装し、Firebase を使用してそのパフォーマンスを監視します。

学べること

ユーザーにサインインを許可します。
Firebase Realtime Database を使用してデータを同期します。
バイナリファイルを Firebase Storage に保存します。

必要なもの

Xcode
ココアポッド
iOS 8.0以降のテストデバイスまたはシミュレータ

このチュートリアルをどのように使用しますか?

あくまで通読してください

それを読んで演習を完了してください

iOS アプリの構築に関するあなたの経験をどのように評価しますか?

初心者

中級

熟練した

2. サンプルコードを入手する

コマンドラインから GitHub リポジトリのクローンを作成します。

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

3. スターターアプリを構築する

スターターアプリを構築するには:

ターミナルウィンドウで、次の場所に移動します。サンプルコードのダウンロードからのios-starter/swift-starterディレクトリ
pod install --repo-updateを実行します。
FriendlyChatSwift.xcworkspace ファイルを開いて、Xcode でプロジェクトを開きます。
クリック実行ボタン。

数秒後にフレンドリーチャットのホーム画面が表示されるはずです。 UI が表示されるはずです。ただし、この時点ではサインインしたり、メッセージを送受信したりすることはできません。次の手順を完了するまで、アプリは例外を発生して異常終了します。

4. Firebase コンソールプロジェクトを作成する

プロジェクトの作成

Firebase コンソールから[プロジェクトの追加]を選択します。

プロジェクトにFriendlyChatという名前を付け、 「プロジェクトの作成」をクリックします。

2015-11-06 14:13:39.png のスクリーンショット

iOS アプリを接続する

新しいプロジェクトの [プロジェクトの概要] 画面で、 [iOS アプリに Firebase を追加] をクリックします。
バンドル ID を「 com.google.firebase.codelab.FriendlyChatSwift 」として入力します。
App Store IDを「 123456 」と入力します。
[アプリの登録]をクリックします。

GoogleService-Info.plist ファイルをアプリに追加します

2 番目の画面で[Download GoogleService-Info.plist]をクリックして、アプリに必要なすべての Firebase メタデータを含む構成ファイルをダウンロードします。そのファイルをアプリケーションにコピーし、 FriendlyChatSwiftターゲットに追加します。

ここでステップ 3 と 4 を実行するので、ステップ 3 と 4 をスキップして、ポップアップの右上隅にある「x」をクリックしてポップアップを閉じることができます。

Firebaseモジュールをインポートする

まず、 Firebaseモジュールがインポートされていることを確認します。

AppDelegate.swift 、 FCViewController.swift

import Firebase

AppDelegate で Firebase を構成する

application:didFinishLaunchingWithOptions 関数内の FirebaseApp の「configure」メソッドを使用して、.plist ファイルから基盤となる Firebase サービスを構成します。

AppDelegate.swift

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

5. ユーザーの識別

ルールを使用して認証されたユーザーに制限する

次に、メッセージの読み取りまたは書き込みの前に認証を要求するルールを追加します。これを行うには、メッセージデータオブジェクトに次のルールを追加します。 Firebase コンソールの [データベース] セクションで [リアルタイムデータベース] を選択し、[ルール] タブをクリックします。次に、ルールを次のように更新します。

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

これがどのように機能するか（「auth」変数に関するドキュメントを含む）の詳細については、Firebaseセキュリティドキュメントを参照してください。

認証 API の構成

アプリケーションがユーザーに代わって Firebase Authentication API にアクセスできるようにするには、これを有効にする必要があります

Firebase コンソールに移動し、プロジェクトを選択します
認証の選択
「サインイン方法」タブを選択します
Googleスイッチを有効 (青) に切り替えます。
表示されたダイアログで「保存」を押します

このコードラボの後半で「CONFIGURATION_NOT_FOUND」というメッセージを含むエラーが発生した場合は、このステップに戻って作業内容を再確認してください。

Firebase 認証の依存関係を確認する

Firebase Auth の依存関係がPodfileファイルに存在することを確認します。

ポッドファイル

pod 'Firebase/Auth'

カスタム URL スキームを XCode プロジェクトに追加する必要があります。

プロジェクト構成を開きます。左側のツリービューでプロジェクト名をダブルクリックします。「ターゲット」セクションからアプリを選択し、「情報」タブを選択して、「URL タイプ」セクションを展開します。
[+] ボタンをクリックし、逆引きされたクライアント ID の URL スキームを追加します。この値を見つけるには、GoogleService-Info.plist 構成ファイルを開き、REVERSED_CLIENT_ID キーを探します。そのキーの値をコピーし、構成ページの [URL スキーム] ボックスに貼り付けます。他のフィールドは空白のままにします。
完了すると、構成は次のようになります (ただし、アプリケーション固有の値が含まれます)。

Firebase を構成したら、clientID を使用して、「didFinishLaunchingWithOptions:」メソッド内で Google サインインを設定できます。

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
}

Google サインインの結果が成功したら、そのアカウントを使用して 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
      }
    }
  }

ユーザーを自動的にサインインします。次に、リスナーを Firebase Auth に追加して、サインインに成功した後にユーザーをアプリに入れます。そして、初期化時にリスナーを削除します。

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

サインアウト

サインアウトメソッドを追加する

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

サインインしたユーザーとしてメッセージをテスト読み取りする

クリック実行ボタン。
すぐにサインイン画面が表示されます。「Google サインイン」ボタンをタップします。
すべてが正常に動作した場合は、メッセージ画面が表示されます。

6. リアルタイムデータベースをアクティブ化する

メッセージのインポート

Firebase コンソールのプロジェクトで、左側のナビゲーションバーにある[データベース]項目を選択します。データベースのオーバーフローメニューで、 [JSON のインポート]を選択します。 Friendlychat ディレクトリ内のinitial_messages.jsonファイルを参照し、それを選択して、 [インポート]ボタンをクリックします。これにより、現在データベース内にあるデータがすべて置き換えられます。緑色の + と赤色の x を使用して項目を追加および削除し、データベースを直接編集することもできます。

インポート後のデータベースは次のようになります。

Firebase データベースの依存関係を確認する

Podfileファイルの依存関係ブロックに、 Firebase/Databaseが含まれていることを確認します。

ポッドファイル

pod 'Firebase/Database'

既存のメッセージを同期する

新しく追加されたメッセージをアプリ UI に同期するコードを追加します。

このセクションで追加するコードは次のとおりです。

Firebase データベースを初期化し、データベースに加えられた変更を処理するリスナーを追加します。
新しいメッセージが表示されるようにDataSnapshotを更新します。

FCViewController の「deinit」、「configureDatabase」、および「tableView:cellForRowindexPath:」メソッドを変更します。以下に定義されているコードに置き換えます。

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
  }

メッセージ同期のテスト

クリック実行ボタン。
[サインインして開始]ボタンをクリックして、メッセージウィンドウに移動します。
新しいメッセージを Firebase コンソールに直接追加するには、「メッセージ」エントリの横にある緑色の + 記号をクリックし、次のようなオブジェクトを追加します。
Friendly-Chat UI に表示されることを確認します。

7. メッセージを送信する

メッセージ送信の実装

値をデータベースにプッシュします。プッシュメソッドを使用して Firebase Realtime Database にデータを追加すると、自動 ID が追加されます。これらの自動生成された ID は連続しているため、新しいメッセージが正しい順序で追加されることが保証されます。

FCViewController の「sendMessage:」メソッドを変更します。以下に定義されているコードに置き換えます。

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

メッセージ送信のテスト

クリック実行ボタン。
「サインイン」をクリックしてメッセージウィンドウに移動します。
メッセージを入力して送信を押します。新しいメッセージはアプリの UI と Firebase コンソールに表示されるはずです。

8. 画像の保存と受信

Firebase ストレージの依存関係を確認する

Podfileの依存関係ブロックに、 Firebase/Storageが含まれていることを確認します。

ポッドファイル

pod 'Firebase/Storage'

ダッシュボードで Firebase Storage をアクティブ化する

Firebase コンソールに移動し、ストレージが「gs://PROJECTID.appspot.com」ドメインでアクティブ化されていることを確認します。

代わりにアクティブ化ウィンドウが表示される場合は、[開始する] をクリックしてデフォルトのルールでアクティブ化します。

FirebaseStorage を構成する

FCViewController.swift

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

既存のメッセージで画像を受信する

Firebase Storage から画像をダウンロードするコードを追加します。

FCViewController の「tableView: cellForRowAtindexPath:」メソッドを変更します。以下に定義されているコードに置き換えます。

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. 画像メッセージを送信する

画像の保存と送信を実装する

ユーザーから画像をアップロードし、この画像のストレージ URL をデータベースに同期して、この画像がメッセージ内で送信されるようにします。

FCViewController の「imagePickerController: DidFinishPickingMediaWithInfo:」メソッドを変更します。以下に定義されているコードに置き換えます。

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

画像メッセージの送受信をテストする

クリック実行ボタン。
「サインイン」をクリックしてメッセージウィンドウに移動します。
「写真を追加」アイコンをクリックして写真を選択します。写真付きの新しいメッセージがアプリの UI と Firebase コンソールに表示されるはずです。

10. おめでとうございます!

Firebase を使用してリアルタイムチャットアプリケーションを簡単に構築しました。

私たちがカバーした内容

リアルタイムデータベース
フェデレーションサインイン
ストレージ

もっと詳しく知る

Firebase.google.com

Firebase iOS コードラボ Swift

1。概要

学べること

必要なもの

このチュートリアルをどのように使用しますか?

iOS アプリの構築に関するあなたの経験をどのように評価しますか?

2. サンプルコードを入手する

3. スターターアプリを構築する

4. Firebase コンソール プロジェクトを作成する

プロジェクトの作成

iOS アプリを接続する

GoogleService-Info.plist ファイルをアプリに追加します

Firebaseモジュールをインポートする

AppDelegate.swift 、 FCViewController.swift

AppDelegate で Firebase を構成する

5. ユーザーの識別

ルールを使用して認証されたユーザーに制限する

認証 API の構成

Firebase 認証の依存関係を確認する

Google サインイン用に Info.plist をセットアップします。

Googleサインイン用のclientIDを設定する

サインインハンドラーを追加する

サインアウト

サインインしたユーザーとしてメッセージをテスト読み取りする

6. リアルタイムデータベースをアクティブ化する

メッセージのインポート

Firebase データベースの依存関係を確認する

既存のメッセージを同期する

メッセージ同期のテスト

7. メッセージを送信する

メッセージ送信の実装

メッセージ送信のテスト

8. 画像の保存と受信

Firebase ストレージの依存関係を確認する

ダッシュボードで Firebase Storage をアクティブ化する

FirebaseStorage を構成する

既存のメッセージで画像を受信する

9. 画像メッセージを送信する

画像の保存と送信を実装する

画像メッセージの送受信をテストする

10. おめでとうございます!

私たちがカバーした内容

もっと詳しく知る

4. Firebase コンソールプロジェクトを作成する