More than 3 years have passed since last update.

エンジニアと人生コミュニティ

爆速でFlutterからFirestoreを使えるようにするまでの手順書

Last updated at 2020-12-01Posted at 2020-10-25

モチベーション

Flutter+Firebaseの構成でアプリを作るときに、毎回やってる作業なので、自分のために手順をまとめておこうと思った

環境

Mac OSX Catalina(10.15.7)

% firebase --version
8.13.1

% flutter --version
Flutter 1.24.0-3.0.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 2783f8e2e1 (3 days ago) • 2020-10-22 09:36:06 -0700
Engine • revision defa8be2b1
Tools • Dart 2.11.0 (build 2.11.0-242.0.dev)

マシンで1回だけやっておけば良いこと

direnv/firebase-cliのインストール

$ brew install direnv firebase-cli

アプリ毎にやること

環境変数の確認

# アプリのRoot
$ pwd
~/git/hogeApp

# hogeApp直下にdirenv用の.envrcをこんな感じに置いておく
$ cat .envrc
export YOUR_DOMAIN=com.example  # Flutterのorganizerに使用。逆から書くアレ。
export APP_NAME=hoge            # アプリ名(=Flutterのフォルダ名, BundleIDに使われる)

# 上記の場合、Bundle IDは com.example.hoge になる

# Firebaseの認証情報をこのプロジェクト以下で固定させる
$ echo "export XDG_CONFIG_HOME=`pwd`/.config" >> .envrc
# こうすると ~/git/hogeApp 以下のフォルダでfirebaseコマンドを叩くと、どこでも同じ認証情報を見てくれる

# 設定した.envrcを有効化
$ direnv allow

Flutterアプリの作成

# --orgオプションを忘れると大変面倒なので忘れずに
$ flutter create --org ${YOUR_DOMAIN} ${APP_NAME}

~/git/hogeApp/hoge がFlutter用のプロジェクトディレクトリとして作成される

Firebase Projectの作成

Firebaseでは、1つのProjectの下に複数のFirebaseアプリがぶら下がる。
iOS/Android/Webがそれぞれ別にFirebaseアプリとして登録する必要がある。

準備

#ディレクトリ堀って移動
$ mkdir firebase && cd $_

# firebaseへログイン（ブラウザが開くのでアカウント選択して許可をする）
$ firebase login

いざ`firebase init`

firebase initを叩いて、EmulatorsだけONにする(Firestoreを選択してはいけない）
Create a new Projectを選択
Firestore Emulatorを選択して、あとはEnter連打
うまくいけばこんな感じ

Firestoreの初期化

ブラウザからじゃないとできないので

# ブラウザが開く。便利！
$ firebase open firestore

どまん中の「データベースの作成」ボタンを押す
とりあえずはテストモードでも良い
リージョンは**asia-northeast1(Tokyo)**にするのを忘れずに

４. ターミナルに戻り、再びfirebase init。設問でFirestoreをスペースキーで選択状態にしてEnter

5. あとはEnter連打してれば成功するはず

FirebaseのiOSアプリ用の設定

認証用のファイルをダウンロードしてios/Runnerのフォルダに設置する作業をせねばならない。
ブラウザからやっても良いが、コマンドラインでもできる

$ pwd
~/git/hogeApp/firebase

$ firebase apps:create IOS -b ${YOUR_DOMAIN}.${APP_NAME} ${APP_NAME}
$ firebase apps:sdkconfig IOS > ../${APP_NAME}/ios/Runner/GoogleService-Info.plist

次にXcodeを開いて、Runnerフォルダから「Add Files to "Runnter"」を選び、GoogleService-Info.plistを追加
- ブラウザのダウンロードエリアから直接D&Dするとコピーされないので注意

FirebaseのAndroidアプリの向けの設定

google-services.jsonの設置

$ firebase apps:create ANDROID -a ${YOUR_DOMAIN}.${APP_NAME} ${APP_NAME}
$ firebase apps:sdkconfig ANDROID > ../${APP_NAME}/android/app/google-services.json

SHA1とSHA256をFirebaseアプリに登録する

~~注: Firebase Authenticationを使用しないなら以下の手順は不要だが、全裸セキュリティでFirestore使うことはまずありえないので...~~
上記は微妙にうそっぱちで、Firebase Authのうち、GoogleID認証と電話番号認証を使う場合のみ必要のようです。匿名認証だけなら不要。

# App IDを調べる
$ pwd
~/git/hogeApp/firebase

$ firebase apps:list
✔ Preparing the list of your Firebase ANDROID apps
┌──────────────────┬───────────────────────────────────────────────┬──────────┐
│ App Display Name │ App ID                                        │ Platform │
├──────────────────┼───────────────────────────────────────────────┼──────────┤
│ [Not specified]  │ 1:1234567890:android:123456789abcdefxxxxxxxxg │ ANDROID  │
└──────────────────┴───────────────────────────────────────────────┴──────────┘

# ↑のApp IDをコピー

# SHA1/SHA256を取得
$ cd ../${APP_NAME}/android
$ ./gradlew signingReport

> Task :app:signingReport
...
SHA1: 11:22:33:44:55:66:77:88:99:00:AA:BB:CC:DD:EE:FF:11:22:33:44
SHA-256: 11:22:33:44:55:66:77:88:99:00:AA:BB:CC:DD:EE:FF:11:22:33:44:55:66:77:88:99:00:AA:BB:CC
...

### SHA1/SHA256の登録

$ cd ../../firebase/

# SHA1例: 
# firebase apps:android:sha:create 1:1234567890:android:123456789abcdefxxxxxxxxg 11:22:33:44:55:66:77:88:99:00:AA:BB:CC:DD:EE:FF:11:22:33:44

$ firebase apps:android:sha:create {APP_ID} {SHA1鍵}

# SHA256例: 
# firebase apps:android:sha:create 1:1234567890:android:123456789abcdefxxxxxxxxg 11:22:33:44:55:66:77:88:99:00:AA:BB:CC:DD:EE:FF:11:22:33:44:55:66:77:88:99:00:AA:BB:CC

$ firebase apps:android:sha:create {APP_ID} {SHA256鍵}

# 鍵の種類は勝手に認識するのでオプション等は不要

# 登録されたか確認
$ firebase apps:android:sha:list 1:1234567890:android:123456789abcdefxxxxxxxxg

${APP_NAME}/android/build.gradle を書き換え

buildscript {
    ...
    
    dependencies {
        ...
        // 追加
        classpath 'com.google.gms:google-services:4.3.4'
    }
}

${APP_NAME}/android/app/build.gradle を書き換え

// 追加
apply plugin: 'com.google.gms.google-services'

android {
    ...
    defaultConfig {
        ...
        // 追加(忘れるとAndoridのコンパイルでコケる）
        multiDexEnabled true
    }
}

dependencies {
    ...
    // 追加（Analyticsいらないならいらないかも？）
    implementation platform('com.google.firebase:firebase-bom:25.12.0')
}

pubspec.yaml に追記

${APP_NAME}/pubspec.yaml

dependencies:
  # 追加
  firebase_core: 
  firebase_auth:
  cloud_firestore:

main.dartに追記

// firebase_coreをimportする
import 'package:firebase_core/firebase_core.dart';

// mainをasyncにしてしまう
Future<void> main() async {

  // 2行追記
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // とりあえずFirebaseAuthに
  await FirebaseAuth.instance.signInAnonymously();

  // とりあえずFirestoreへ書き込んで見るテストコード
  await FirebaseFirestore.instance.collection('users').add({'hoge': 'piyo'});

  runApp(MyApp());
}

できた！

まとめ

全然爆速じゃないんだよなぁ...🤔

110

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

爆速でFlutterからFirestoreを使えるようにするまでの手順書

モチベーション

環境

マシンで1回だけやっておけば良いこと

direnv/firebase-cliのインストール

アプリ毎にやること

環境変数の確認

Flutterアプリの作成

Firebase Projectの作成

準備

いざfirebase init

Firestoreの初期化

FirebaseのiOSアプリ用の設定

FirebaseのAndroidアプリの向けの設定

google-services.jsonの設置

SHA1とSHA256をFirebaseアプリに登録する

${APP_NAME}/android/build.gradle を書き換え

${APP_NAME}/android/app/build.gradle を書き換え

pubspec.yaml に追記

${APP_NAME}/pubspec.yaml

main.dartに追記

できた！

まとめ

いざ`firebase init`