Flutter+Firebaseアプリをリリースするまでに参考にしたウェブサイト集

# はじめに
今回リリースしたアプリは以下のフレームワークやサービスを利用しました。
- Flutter
- さけのわデータのWebAPI
- Firebase Authentication
- Cloud Firestore
- Firebase Storage
- Firebase Crashlytics

つまり！
Flutter + Firebaseでアプリを作って、ちょっとWebAPIも利用しちゃおうって感じなわけです。
私はこれまでAndroidアプリをJavaを利用して作ってきましたが、今回はFlutterもFirebaseもWebAPIもぜーんぶ初めてだったのでとても苦労しました。
そこで、アプリをリリースするまでに参考にしたウェブサイトを各項目毎に紹介していきたいと思います。

# アプリ紹介
ウェブサイトの紹介の前に、最初にどんなアプリを作ったのかを簡単に紹介します。
日本酒好きのための「日本酒を育てる」アプリです！

https://play.google.com/store/apps/details?id=com.highcom.growing_sake

日本酒は、銘柄や原材料の違いだけでなく、飲み方や保管温度、開栓後からの経過日数によって香りの変化などさまざまな表情を出してくれます。
そのような飲み方までを詳細に記録できるようなアプリとなっています。

### では！ここからウェブサイトの紹介をしていきます！

# Flutterの利用
そもそもFlutterは公式のドキュメントが充実していると聞いたため、まずは公式のドキュメントをと思ったら英語だった。。。

https://flutter.ctrnost.com/tutorial/

なので、私は日本語化してくれたウェブサイトのチュートリアルから始めました。
基本となるStatelessWidgetやStatefulWidgetの内容、基本的なListViewの使い方まで学べます。

https://zenn.dev/kazutxt/books/flutter_practice_introduction

そして何よりもこれ！この本！
Zennで無料で公開している本になりますが、入門書としてはもう最高でした。
これが無料で読めるなんて神様です。

https://medium.com/flutter-community/a-visual-guide-to-input-decorations-for-flutter-textfield-706cf1877e25

Widgetをいじってみたくなったら、このサイトで様々なTextFieldのデザインが紹介されており、コピペして利用する事が出来ます。

https://zenn.dev/hndr/scraps/05b30da301d8cb

少しFlutterの事が分かってくると今度はDartの文法を知りたくなるので、Dartの文法についてリンクをまとめてくれた上記ページから色々とリンクに飛んで学びました。

https://riverpod.dev/ja/docs/concepts/reading/#statefulwidgetstate-の代わりに-consumerstatefulwidgetconsumerstate-を継承する

そして、どんどんアプリを作り進めていくと画面間での制御が必要となり、Riverpodのライブラリにたどり着くのです。ですが最初にRiverpodの理解をするのが難しく、上記のサイトをよく読んで理解を深めました。

https://qiita.com/chooyan_eng

仕上げに入っていくとエラーや細かい調整が必要になりましたが、@chooyan_engさんの記事たちがとても参考になりました。

# さけのわデータのWebAPI
そもそも、さけのわってのはこちら。

https://sakenowa.com

今回のアプリでは、銘柄名、地域、酒舗をそれぞれ別のWebAPIを呼び出して取得しました。

https://muro.sakenowa.com/sakenowa-data/

上記を読んでAPIの仕様を理解しました。

https://quality-start.in/2021/08/flutterで非同期で取得した値をtextfieldに入れて初期化した/

非同期で取得した値をTextFieldに入れる方法を理解し・・・

https://zenn.dev/moimoi_prog/articles/fda2be542c326c

複数の非同期処理が全て終わるまで待つ方法を把握しました。

https://www.kindacode.com/article/how-to-create-a-filter-search-listview-in-flutter/

そして最後に、取得したデータをフィルタするような処理を上記サイトで学びました。

# Firebase Authentication
https://pub.dev/packages/firebase_auth/example

基本的にはpub.devのexampleを見れば実装出来てしまう。公式強い。

https://qiita.com/highcom/items/e77abd45be372f905c9d

ですが、Firebase console側で様々な設定をする必要があり、大変だったので自分で記事にまとめました。

http://maniera.xyz/2020/07/18/post-612/

そして、ApiExeptionが発生したので、上記を参考に修正しました。

https://developers.google.com/android/guides/client-auth?authuser=0&hl=ja

最後に一番ハマったのが、フィンガープリントの登録でした。apkファイルをGooglePlayストアに登録する場合は、keytoolを叩いて、そのフィンガープリントを登録しておけば良かったのですが、aabの場合はGooglePlayストアでビルドされて配信されるもののため、DeveloperConsoleで用意されている上記のフィンガープリントを登録する必要がありました。
これを知らなかったため、色々調べまくって１日中悩まされました・・・。

# Cloud Firestore
これまでの私はSQLiteを利用してきて、テーブルの正規化とかを考えながらデータベース設計をしてきました。
ですが、Cloud FirestoreはいわゆるNoSQLと言われるドキュメント型のデータベースとなっており、最初にこの概念を理解するところが大変でした。

https://firebase.google.com/docs/firestore/quickstart?hl=ja#android

なので、まずはドキュメント型データベースを理解すべく、上記サイトの動画を視聴して理解を深めました。

https://qiita.com/karayok/items/0996c8f0ea219c284dbd

AuthenticationとFirestoreを連携して利用する方法は上記サイトで学びました。

https://qiita.com/PictoMki/items/52012bf222de1b0440cc

https://zenn.dev/t0_inoue/articles/5711e411f1bf4f

https://zenn.dev/yucatio/articles/173f386c471398

ドキュメント型のデータベースは理解できたけど、結局どんなふうにデータベースを設計すればいいの？ってなったので、上記サイトを参考に理解を深めて、今回のアプリで必要となるデータベースの設計を進めました。

https://www.wakuwakubank.com/posts/723-firebase-firestore-query/

あとは、上記サイトを参考にFlutterでFirestoreを利用する場合の基本的な文法を学んで実装を進めました。

# Firebase Storage
https://pub.dev/packages/firebase_storage/example

Storageの導入は、アップロードされた日本酒画像の保存のために利用しました。実装自体はそれほど難しくなく、pub.devのexampleを見れば実装出来ました。

https://www.rm48.net/post/flutter-dart-cloud-firestoreとfirebase_storageを組み合わせてデータを管理する

あとは、Firestoreとの連携を上記サイトから学びました。

# Firebase Crashlytics
https://pub.dev/packages/firebase_crashlytics/example

https://firebase.google.com/docs/crashlytics/get-started?hl=ja&platform=flutter

難しいカスタマイズはしなかったので、pub.devとFirebaseの公式ドキュメントの通りに実装をしたら出来ました。

# さいごに
参考にしたウェブサイトの紹介は以上となります！
特に私が苦労したのは以下２つです。
・Flutterを理解すること
　→Stateless、Statefulの理解、Riverpodの利用などなど
・Cloud Firestoreを理解すること
　→ドキュメント型データベースの理解、クラウドデータの利用などなど

ですので、特に上記２つについてのウェブサイトの紹介は参考になると思います。