【Flutter, Firebase】Firebaseを使ったFlutterプロジェクトの始め方

# ミニマルなプロトタイプの最強タッグ Flutter & Firebase
Googleが開発し、存在感を発揮して来たクロスプラットフォームのFlutter。
同じくGoogleが提供するFirebaseと連携させる事で非常にミニマルにネイティブアプリのプロトタイプが作れます。

最近では企業でも利用される事例が増えて来ました。個人開発でもFlutter x Firebaseは面倒なバックエンドを簡略化しながら、iOS、Android双方をワンソースで作る事が出来るので、非常に遊びがいがあります。

今日はその初歩の初歩、Flutterプロジェクトを立ち上げ、Firebaseと連携する所をささっと案内していきます。

# 話さない事
- XCode、Android Studioとシュミレータなどの動かし方


# 作業手順
手順はシンプルです。
①Flutterプロジェクトを作る
②Firebaseプロジェクトを作る
③FlutterプロジェクトとFirebaseプロジェクトをSDKをインストールさせて繋げる
といった手順になります。

# ①Flutterプロジェクトを作る
まずFlutterのプロジェクトを作りましょう
#### 1. Flutterをローカルにgit clone

```zsh:zsh
$ git clone https://github.com/flutter/flutter.git
$ export PATH="$PATH:`pwd`/flutter/bin" //パスを通しましょう
```

#### 2. XCodeとAndroid Studioをインストール
下記よりXCodeとAndroid Studio両方をダウンロード・インストールしましょう
XCode: https://apps.apple.com/us/app/xcode/id497799835
Android Studio: https://developer.android.com/studio

下記コマンドを叩き、問題がなければ設定終了です。

```zsh:zsh
$ flutter doctor
```

#### 3. Flutterプロジェクトを作る
任意のディレクトリにて下記コマンドでFlutterプロジェクトを作りましょう

```zsh:zsh
$ flutter create <アプリ名>
```

#### 4. Flutterプロジェクトを立ち上げる

```zsh
$ cd <アプリ名>
$ open -a Simulator // iOSシミュレーターの立ち上げ
$ flutter run 
```
コレで正常に立ち上がれば、デフォルトのアプリがiOSシミュレータ上に立ち上がります。

# ②Firebaseプロジェクトを作る
さて次はFlutterのバックエンドとして使うFirebaseの準備をしましょう
firebaseコンソールをポチポチするだけです。
#### 1.「プロジェクトの追加」
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/8aa847db-0ba7-4bb3-fe69-cf059fbd951e.png">

#### 2. プロジェクトの名前を付ける
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/e2a463ea-d555-56ba-9d1c-1fbd202b4877.png">

#### 3. Googleアナリティクスの設定をする
ここからはオプショナルです。テストアプリを作りたいだけなら設定無しでも良いでしょう。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/9652ef80-5fea-07bd-7ac9-c5a4fcc75eee.png">
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/1cfd6999-4eaf-8325-cc9e-9b556ff0516b.png">

#### 4. プロジェクトの作成
「プロジェクトの作成」を押せばプロジェクトの完成です。


# ③FirebaseとFlutterを繋ぐ

iOSとAndroid両方を用意する場合は、それぞれのアプリをfirebaseプロジェクトに登録しなくてはいけません。
![スクリーンショット 2020-10-25 16.22.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/57be30d3-8e2c-b9b6-4904-528ea84d2bb4.png)
「＋アプリを追加」から追加していきましょう。

iOSもAndroidも手順は大体同じです。

アプリ名を記入
▼
GoogleService-Info.plistをダウンロード、所定の場所に配置
▼
読み込み用のコードを追加
▼
アプリを起動、通信させてインストールされているかを確認
## iOS, Android共通
まず始めにflutterプロジェクトの`pubspec.yml`の依存関係に`firebase-core`を追加しましょう

```yml:pubspec.yml
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.5.0+1 <--コイツを追加
```

## FirebaseとFlutterを繋ぐ【iOS編】
#### 1.  アプリ名を記入
今回私はtime-tracker-xという名前のアプリを作っていきたいと思います。

iOSバンドルIDはflutterプロジェクトの`iOS/Runner.xcodeproj/project.pbxproj`ファイル内に既に記載されているので、そちらを指定しましょう。エディタで`PRODUCT_BUNDLE_IDENTIFIER`を検索すれば見つかるはずです。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/cd461f27-c91b-47b7-a989-d53a07d7926f.png">


#### 2. GoogleService-Info.plistをダウンロード、所定の場所に配置
次は指示通り、GoogleService-Info.plistをダウンロードし、flutterプロジェクト内の`iOS/Runner`ディレクトリに配置してあげましょう。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/4c13fb13-7538-f519-a2a7-f73f02793e1a.png">

**!!注意!!：** 配置の際の最大の注意点は単純にダウンロードしたファイルをプロジェクトファイルにコピペするのではなく、**必ずXCodeを使用してください**。

XcodeからFlutterプロジェクトのRunnerディレクトリを選択した状態で、`Add Files to "Runner"`でダウンロードした`GoogleService-Info.plist`を選択してくダサい。この手順を踏まないとファイルを認識せずエラーになってしまいます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/56ec53c6-a68d-e596-c9cc-46e7898b9973.png">
#### 3.  `pod install`でアプリの `.xcworkspace`を作成
今度は`iOS`ディレクトリに移動し、依存関係のインストールと管理を行います。
Googleアナリティクスを使う場合は下記を`Podfile`に追記しましょう。

```zsh:Podfile
pod 'Firebase/Analytics'
``` 
配置後に`pod install`をする事で依存関係のインストールと`.xcworkspace`が作成されます。

#### 4. 初期化コードを追加
初期化コードを`iOS/Runner/AppDelegate`に追加します。

```swift:iOS/Runner/AppDelegate.swift
import UIKit
import Flutter
import Firebase // <--コレを追記

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    FirebaseApp.configure() // <--コレを追記
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}
```
**!!注意!!：**ちなみに`FirebaseApp.configure()`を`GeneratedPluginRegistrant.register(with: self)`の後に記述するとアプリがクラッシュしますので注意してください。
参考： https://stackoverflow.com/questions/63204172/errors-launching-flutter-app-in-ios-simualtor

#### 5. アプリを立ち上げて、インストールを確認
諸々の設定が正しく反映されているかをアプリを立ち上げて、firebaseと通信させる事で確認します。今一度プロジェクトのルートに戻り、`flutter run`をしましょう。

```zsh:zsh
$ open -a Simulator // iOSシミュレータを起動
$ flutter run // アプリを起動
```

## FirebaseとFlutterを繋ぐ【Android編】
#### 1.  アプリ名を記入
iOSと同様にアプリ名を記入します。Androidの場合は`android/app/build.gradle`内24行目に記載されています。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/4f054185-edb5-9054-e3d1-43a898edb836.png">

#### 2. google-services.jsonをダウンロード、所定の場所に配置
指示通りgoogle-services.jsonをダウンロードし、所定の場所に配置します。Androidの場合は、`android/app`に配置します。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334813/c729ca23-0fe8-37f9-49a2-c4c719ddbc5f.png">

#### 3. Firebase SDKを追加
androidのプロジェクトレベルの`build.gradle`、アプリレベルの`build.gradle`にそれぞれFirebase SDKを読み込む為のコードを追記します。

プロジェクトレベルの`build.gradle`

```java:android/build.gradle
buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google() // <--コレを追加
        jcenter()
    }

    dependencies {
        classpath 'com.google.gms:google-services:4.3.4'　// <--コレを追加
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()　// <--コレを追加
        jcenter()
    }
}
```

アプリレベルの`build.gradle`

```java:android/app/build.gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'com.google.gms.google-services'　// <--コレを追加 
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

dependencies {
    implementation platform('com.google.firebase:firebase-bom:25.12.0')　// <--コレを追加 
    implementation 'com.google.firebase:firebase-analytics'　// <--コレを追加 
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

```

#### 5. アプリを立ち上げて、インストールを確認
Androidのシミュレーターを立ち上げ、`flutter run`でアプリを起動しましょう。

```zsh:zsh
$ emulator -avd <avd_name> // androidシミュレータを起動
$ flutter run // アプリを起動
```

# 完了！
コレで無事flutterプロジェクトをiOS、Android両方でfirebaseを使う準備が出来ました。

そこまで複雑ではないネイティブアプリならflutter x firebaseで爆速で作る事も可能です。ジャンジャンプロトタイプ作ってアイデアを形にしていきましょう！！

#### 参考
Flutter公式 : https://flutter.dev/
Firebase公式 : https://firebase.google.com/>