Flutter・Firebaseでゼロからアプリをつくる。【勉強会レポ】

# はじめにの前に(概要/対象読者)
### 概要
- Flutterを使うと、簡単に動くアプリが作れる
- FireBaseと連携するとサーバーレス開発もできる

### 対象読者
- 基本的なアプリ開発を経験している人
- Flutterをいじってみたい人

# はじめに
今年の3月に大学を卒業し、4月からアプリを作る会社に入社した者です。
SwiftUIと同じくらい？話題になっているFlutterの勉強会に参加してきたので、そのレポです。

[Flutter・Firebaseでゼロからアプリをつくる。(connpassリンク)](
https://ueqareer.connpass.com/event/135658/)
[勉強会資料](https://ueqareer.net/3056)
[サンプルコード](https://github.com/SotaYamaguchi/flutter-todo)

### Flutterのダウンロードから実際にプロジェクトをrunするまで
**アプリの開発環境(XcodeまたはAndroidStudio)が用意されている前提です**

- [公式サイト](https://flutter.dev/docs/get-started/install/macos)からzipファイルをインストールする

- 公式サイトに従って環境構築する
英語ですがものすごく丁寧です、公式サイトを見ながら勉強会の資料を時折読めば詰まらずに構築できます

```bash
$ cd <プロジェクトルート>
# 解凍して
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
# パス通して
$ export PATH="$PATH:`pwd`/flutter/bin"
```
- テストのためにエミュレータを起動する  
事前にエミュを起動していないと`flutter run`できないようです

```bash
$ open -a Simulator
```

- プロジェクトを作る
言語を指定する場合はオプションをつけます。デフォルトだとiOSはObj-C、AndroidはJavaになります

```bash
$ flutter create -i swift -a kotlin <アプリ名>
$ cd <アプリ名>
```

- プロジェクトを実行する

```bash
$ flutter run
```
ダウンロード時に用意されていたアプリが起動できます。ぼたんぽちぽちー
というかこれだけでこれだけで動くアプリができるのすごいですね :astonished:
![1_sO_6n1Gt9oLV7R0G2gqgyg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203273/f9363079-5785-2c3b-19fa-d0d5e26b1d17.png)
今回の勉強会はハンズオンだったので「動けばいいや」で作っていましたが、ちゃんとした開発をする場合は`flutter doctor`してあげましょう。結構怒られます。

```bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for
      detailed instructions.
[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
...........(略)
```

### アプリを書き換えて機能追加する場合
- メイン画面にあたる、`lib/main.dart`ファイルを書き換えてUIを作成しましょう  
もちろん`lib/`以下であれば複数ファイルに分けて書いてもOKです。


ex) カスタムテキストフィールドを作る場合

```dart
  final emailInputController = new TextEditingController();
  Widget _showEmailForm() {
    return TextFormField(
      controller: emailInputController,
      decoration: InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: 'Email',
      ),
    );
  }
```

テキストフィールドや○○View、リスナーなど、一部の部品は[Widget](https://flutter.dev/docs/development/ui/widgets)として用意されています。
`TextFormField`はテキストフィールドのWidget、`TextEditingController`は入力された文字列をリスナーに通知する、などの役割を持つWidgetです。
「iOSで言う所のTableView、Androidで言う所のListViewはFlutterだと`ListView`」のような具合に大体のパーツが用意されているようです。

### FireBaseと連携する場合
FireBaseと連携する際にiOSの場合バンドルID(Bundle Identifier)、Androidの場合パッケージ名が必要になります。その後ダウンロードされるplist(JSON)ファイルをXCode(AndroidStudio)のプロジェクトルートに配置します。

<img width="753" alt="スクリーンショット 2019-07-04 16.08.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203273/7b1615eb-1429-7822-5acf-e62ff16e33b4.png">
<img width="753" alt="スクリーンショット 2019-07-04 16.09.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203273/13e66174-52d7-2fd3-abe7-49b48f456340.png">

### 注意点
FireBaseなどの外部ライブラリを使う場合は`pubspec.yaml`を編集する必要があります。ファイル内の`dependencies`以下を編集し、`pub get`コマンドを叩きます。

```(前後略)pubspec.yaml
# firebase及びfiewbaseと連携したGoogle analyticsを導入する場合
dependencies:
  flutter:
    sdk: flutter
  firebase_core: 0.4.0  # add dependency for Firebase Core
  firebase_analytics: 3.0.3  # add dependency for Google Analytics for Firebase
  firebase_database: 3.0.3
  firebase_auth: 0.11.1
  rapido: 0.1.9
```

```bash
$ flutter packages pub get
```


## さいごに
本当はもう少し踏み込んだ実装をしたかったのですが、勉強会の時間の都合でここまでしか進められませんでした。UIがちょっと作れるだけではアレなのであれこれ試して追記していきたいです。
こちらも試してないのですが、同期から「デバッグモードで`flutter run`するとホットリロードせずに変更が反映されるから楽になる」とタレコミがありました。
Flutterでフロント開発して、FireBaseと連携してサーバーレスにアプリを開発...って、すごく「イマドキエンジニア」感があって高まりますね :innocent: :innocent: :innocent: 
~~(高まりだけで記事を書いたので着地点が迷子になったことは反省しています)~~