Firebaseでチャットアプリを作る(Cloud Firestore)

背景

• なんとなくFirebase使ったことないのまずいかなぁと思ってFirebaseに手を出してみる。
• 今まではPush通知くらいしか使ってなかった。
• 今回はCloud Firestoreを利用してチャットアプリを作ってみる

Cloud Firestore

NoSQLドキュメント指向データベースらしい。

firebase.google.com

ちなみに NoSQLっていうのはNot Only SQLの略で、SQL言語を利用しないDBのこと。Realmとかそうですね。 ドキュメント指向というのはSQLにおけるテーブルとかカラムみたいな管理ではなく、自由なデータ構造を持つドキュメントを一つの単位として持ちます。 そのためSQLと違い事前にデータ構造を決めておく必要がないみたいですね。すごい。

サンプルを組んでみる

codeLabあった！やった！

codelabs.developers.google.com

build.gradleに依存関係を追加

    // Firestore
    implementation 'com.google.firebase:firebase-firestore:17.1.5'

とりあえずcollectionに追加してみる。

FireBaseFireStoreのインスタンスを取得して、対象のcollectionにaddするだけ。簡単。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // FireBaseFireStore: すべてのFireBaseデータベースのエントリポイント。
        val firebase = FirebaseFirestore.getInstance()

        // コレクションに追加するオブジェクト(ドキュメント)
        val user = User("testiD")

        // collection:users にuserオブジェクト(ドキュメント)を追加
        firebase.collection("users").add(user)

    }
}

なんて簡単なんや。。

FireStoreのデータを監視する。

これも簡単。

1. 対象のCollectionのQueryを取得する。
2. EventListenerをimplement、onEventを実装する。
3. QueryにaddSnapshotListenerを設定する。

とりあえず適当にActivityに書いてみる。

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        // FireBaseFireStore: すべてのFireBaseデータベースのエントリポイント。
        val firebase = FirebaseFirestore.getInstance()
        findViewById<Button>(R.id.button).setOnClickListener {
            // コレクションに追加するオブジェクト(ドキュメント)
            val user = User("testiDBbcb")

            // collection:users にuserオブジェクト(ドキュメント)を追加
            firebase.collection("testUsers").add(user)
        }

        // Queryを作成する。collectionはcollectionReferenceを返しているんだけど、
        // collectionReferenceはQueryを継承しているクラスなので、Queryのメソッドが利用できる。
        val query = firebase.collection("testUsers")

        // Snapshotのリスナーを設定する。
        query.addSnapshotListener(this)

    }

    override fun onEvent(querySnapshot: QuerySnapshot?, firebaseFirestoreExeption: FirebaseFirestoreException?) {

        // nullableなので念の為。
        if (querySnapshot == null) {
            return
        }

        querySnapshot.documentChanges
                .forEach {
                    // typeは３つ。追加か変更か削除
                    when (it.type) {
                        DocumentChange.Type.ADDED -> {
                            val data = it.document.data
                            findViewById<TextView>(R.id.textView).text = data["userId"].toString().plus(" ADDED")
                        }
                        DocumentChange.Type.MODIFIED -> {
                            val data = it.document.data
                            findViewById<TextView>(R.id.textView).text = data["userId"].toString().plus(" MODIFERD")
                        }
                        DocumentChange.Type.REMOVED -> {
                            findViewById<TextView>(R.id.textView).text = "Remove"
                        }
                        else -> {
                            findViewById<TextView>(R.id.textView).text = "else"
                        }
                    }
                }
    }
}

ちょっとFluxベースで整理してみる。

3日くらいかかった。。。
サンプルコードあげるつもりだったけど、Google API Keyあるし載せられなかった。辛い。

感想

• そこらへんのBaasよりすごい使いやすかった。
• ただなんかFirebase側をみても更新されていない時があって、何でだろうってなった。タイミングかな。。