Flutter からFirebaseへ接続してみた

はじめに

こんにちは！
モバイルソリューショングループのishimaru.rです。
この記事は、アイソルートAdventCalenderの6日目の記事です。
昨日は、ide.tさんのswiftUIチュートリアルをやってみた！でした。

この記事で書くこと

以下の内容をまとめています。
・完成物
・Firebase接続までの手順
・codelabを進める上で詰まったポイント
・まとめ
Flutterで作成したアプリケーションとCloud Firestoreを接続して、
データのやりとりをするために必要な設定をまとめます。

完成物

まず本記事の手順を通して作成したアプリケーションが下図に示した物になります。

DBには文字列と数値のフィールドを持つコレクションがあり、アプリケーション上で特定の文字列をタップするとリアルタイムで数値の値が加算されます。

Firebase接続までの手順

こちらのcodelabを参考に進めています。

※この記事ではAndroidアプリケーションを作成しています。

手順

1. Android Studioで新しいFlutterプロジェクトを作成する

2. Firebaseのコンソールから新しくプロジェクトを作成する

3. FirebaseのコンソールでAndroidアプリを登録する

※作成したFlutterプロジェクトの/android/app/build.gradleに記載されている
android::defaultConfig::applicationIdの値をAndroidパッケージ名に登録します。

4. Flutterプロジェクト内にFirebaseの設定ファイルを設置する

手順3の手順後にAndroidアプリを登録後に設定ファイル[google-services.json]をダウンロード出来るようになります。
ダウンロードした設定ファイルを/android/app/ に配置します

5. プラグインを設定する

 /android/app/build.gradleへの追記

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    compile 'com.android.support:multidex:1.0.3'
    implementation 'com.android.support:multidex:1.0.3'
}

apply plugin: 'com.google.gms.google-services'

/android/build.gradleへの追記

dependencies {
    classpath 'com.android.tools.build:gradle:3.5.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:3.2.1'
}

/pubspec.yamlへの追記

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.3.0
  cloud_firestore: ^0.9.5
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  firebase_core: ^0.3.0
  cloud_firestore: ^0.9.5

6. Firebaseのコンソールで新しくDBを作成する

7. Firebaseと接続するFlutterのコードを書く

codelabのstep10まで進めれば、完成物で示したところまで作れます。
ひとまず動きをみたい人はstep11にまとまったコードが記載されていますので、参考にしてください。

【実行するまえに】

flutterのchannel を確認してください。今回は参考にしたcodelabが公開されたタイミングで動作可能だったdevにしています。

codelabを進める上で詰まったポイント

私が詰まったポイントとしては、【実行するまえ】にも記載しましたが、channelという概念でした。
codelabが公開された当時、firestoreに接続するためにはchannelをdevにしないと接続できないという制約があり、
公式の英語のサイトを見なければ分からなかったため見つけるまではとても時間がかかりました。
そして、プラグインを設定する場所もchannelによって異なるためなぜ繋がらないのか。。。ととても頭を抱えました。

まとめ

codelabを進めていく上で、設定周りの部分に詰まったため焦点をあてて記載しました。
導入するまでに初めは時間がかかりましたが、なんども繰り返していくうちにどこに何を
設定すれば良いのかわかるようになりました。(私は10回ほど繰り返してやっと分かりました…)

普段触らない分野でも繰り返し触ることでなんとなく分かるようになってきますので
あまり新しい分野に挑戦できていない人も初めの一歩を1年2年かけるつもりで挑戦してみてはいかがでしょうか。

明日はtahara.hさんで AWSとCiscoルーター間でActive-StandbyのインターネットVPN冗長した話 です!