iOS(swift)版Firebaseアプリ ハンズオンを試してみました

iOSでFirebaseアプリを作るハンズオンが公開されているので試してみました。
Firebase iOS Codelab

Chatアプリの実装を通してFirebaseの機能を試すことができます。
注)理由はわかりませんが、このチュートリアルはガイド(日本語版)からはリンクされていません。

ソースコード追加時にエラーが発生しますが、XCodeによる修正候補にてすべて修正できました。
途中まではシミュレータでも動作できましたが最後の機能まで試すためには実機が必要です。

環境

MacOS X Sierra(10.12.1)
Xcode 8.0

事前準備

ここを参考に事前準備をします。

• Xcode 7.0 以降
• 物理 iOS 端末(クラウドメッセージ用)
• Xcode プロジェクトとバンドル識別子
• CocoaPods 1.0.0 以降

目次

目次の数が多いので長くかかりそうですが、目安の時間は30分と表示されています。

1. OverView
2. Get the sample code
3. Build the starter app
4. Create Firebase console Project
5. Identify Users
6. Activate Realtime Database
7. Send Messages
8. Store and Receive images
9. Send Image Messages
10. Configure Friendly Message Length
11. Track User Flows
12. Monetize with Ads
13. Report Crashes
14. Congratulations!

OverView(残り29分)

Firebaseを使ったチャットアプリケーションをステップバイステップで作成するチュートリアルです。

Get the sample code(残り28分)

Githubからソースを取得します。

$ git clone https://github.com/firebase/friendlychat

iosプロジェクトは、ios-starter/swift-starterとios/swiftがあります。前者は、チュートリアルで機能を追加する版、後者はすべての機能を含む版(チュートリアル完成後)です。
注)objecive-c版もありました。

Build the starter app(残り26分)

firebase SDKをインストールしてXcodeを起動します。

$ cd friendlychat/ios-starter/swift-starter
$ pod update
$ open FriendlyChatSwift.xcworkspace

設定画面(General)でBundle IdentifierとTeamを変更します。

ビルドが成功して、シミュレータ起動できれば成功です。

Create Firebase console Project(残り24分)

Firebase consoleでプロジェクトを作成します。
プロジェクト名は、何でもかまいません。FriendlyChatにしました。プロジェクトにiOSアプリを追加します。
bundle identifierはXcodeで設定した値を入力します(ここが重要です)。
作成するとGoogleService-Info.plistがダウンロードされますので、このファイルをプロジェクトに追加します。このファイルにはAPI-KEYやプロジェクトIDなどが含まれています。

Firebaseライブラリの初期化

Xcodeプロジェクトに戻り、Firebaseライブラリの初期化処理をAppDelegate.swiftに追加します。

// 最初から入っていました
import Firebase

  func application(_ application: UIApplication, didFinishLaunchingWithOptions
      launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // この行を追加します
    FIRApp.configure()
    return true
  }

アプリを再起動して、GoogleService-Info.plistが見つからないというエラーが出ていなければOKです。

Identify Users(残り23分)

Use Rules To Restrict To Authenticated Users

Filebaseコンソールにおいてアクセス制御ルールを修正します。デフォルトは、すべてに対して読み書きともに認証が必要となっています。messagesデータのみ読み書きに認証が必要となるようにルールを修正します。

PodfileにFirebase/Authが入っていることを確かめます。

Add Email/Password Sign In via Firebase Authentication

アプリにFirebase認証経由でEmail認証を追加します。
Firebaseコンソールでログイン方法タブでプロバイダとしてメール／パスワードを有効にします。
次に、ユーザータブでログインユーザーを追加します(忘れやすいので注意が必要です)。SDK経由でユーザー登録もできます。

SignInViewController.swift, FCViewController.swiftを修正します。
修正量が多いのでチュートリアルページを参照してください。

アプリを再起動して、登録したユーザーでログインできれば成功です。

Activate Realtime Database(残り18分)

Import Messages

メッセージの初期データをFirebaseコンソールからインポートします。
インポートするファイル(initial_messages.json)は、取得したソースコードのルートにあります。
FirebaseコンソールでDatabaseを選択します。データを展開／たたむ(＋−)アイコンの右の3点アイコンをクリックするとインポートメニューが表示されます。

Confirm Firebase Database Dependency

PodfileにFirebase/Databaseが入っていることを確かめます。

Synchronize Existing Messages

起動時に、メッセージを読み込む処理をFCViewController.swiftに追加します。

修正量が多いのでチュートリアルページを参照してください。

アプリを再起動して、登録したメッセージが表示できれば成功です。

Send Messages(残り13分)

FCViewController.swiftに処理を追加します。
UI部品からデータ取得する処理はあるので、データを送信する処理を1行追加するだけです。
childByAutoIdはユニークなIDを生成してくれるメソッドです(便利メソッドです)。

  func sendMessage(withData data: [String: String]) {
    var mdata = data
    mdata[Constants.MessageFields.name] = AppState.sharedInstance.displayName
    if let photoURL = AppState.sharedInstance.photoURL {
      mdata[Constants.MessageFields.photoURL] = photoURL.absoluteString
    }
    // この行を追加します
    // Push data to Firebase Database
    self.ref.child("messages").childByAutoId().setValue(mdata)
  }

テキストフィールドにメッセージを入力し、Sendボタンをクリックします。メッセージが一覧に表示されれば成功です。Firebaseコンソールでもデータを確認できます。

Store and Receive images(残り13分)

Confirm Firebase Storage Dependency

PodfileにFirebase/Storageが入っていることを確かめます。

FCViewController.swiftに処理を追加します。

  func configureStorage() {
    // 以下の2行を追加します
    let storageUrl = FIRApp.defaultApp()?.options.storageBucket
    storageRef = FIRStorage.storage().reference(forURL: "gs://" + storageUrl!)
  }

次ステップで画像メッセージを送信します。

Send Image Messages(残り8分)

画像をアップロードする処理をFCViewController.swiftに追加します。

修正量が多いのでチュートリアルページを参照してください。

Firebaseコンソール(Storage)に画像がアップロードできれば成功です。

また、Firebaseコンソール(Database)にアップロードした画像のURLを持つメッセージが登録されていれば成功です。

Configure Friendly Message Length(残り8分)

Firebase Remote Configを使うとアプリの挙動をリモート制御できます。
たとえば、Friendly messagesアプリに、メッセージの長さを制御する設定を追加します。

Add Config Rules in Firebase console

FirebaseコンソールにRemote Config(friendly?msg_length=10)を追加します。

Confirm Firebase RemoteConfig Dependency

PodfileにFirebase/RemoteConfigが入っていることを確かめます。

RemoteConfig処理を追加します

修正量が多いのでチュートリアルページを参照してください。

10文字を超えたメッセージを登録しても10文字で打ち切られることをアプリとFirebaseコンソールで確認できれば成功です。

Track User Flows(残り3分)

Firebase Analyticsはユーザーの行動を追跡する機能を提供してくれます。
※) Google Analyticsの結果はすぐに見ることはできません。アップロードの24時間後から見ることができます。

MeasurementHelper.swiftに処理を追加します。
修正量が多いのでチュートリアルページを参照してください。

ActivityをXCodeのコンソールに表示したい場合には、ビルドオプションに-FIRAnalyticsDebugEnabledを追加します。

Monetize with Ads(残り2分)

AdMobが使えます。

Confirm the AdMob dependency

PodfileにFirebase/AdMobが入っていることを確かめます。

修正量が多いのでチュートリアルページを参照してください。

AdMob広告が表示されれば成功です。

Report Crashes(残り1分)

Crashレポート送信機能を追加します。

Confirm the Crash dependency

PodfileにFirebase/Crashが入っていることを確かめます。

修正量が多いのでチュートリアルページを参照してください。

1. Crashボタンをクリックします。
2. 再度アプリを起動します
3. Firebaseコンソール(Crash Repoting)にエラーが表示されます。
   

Congratulations!

おつかれさまでした。