LoginSignup
3
12

More than 1 year has passed since last update.

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

Posted at

はじめに

今回リリースしたアプリは以下のフレームワークやサービスを利用しました。

  • Flutter
  • さけのわデータのWebAPI
  • Firebase Authentication
  • Cloud Firestore
  • Firebase Storage
  • Firebase Crashlytics

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

アプリ紹介

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

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

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

Flutterの利用

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

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

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

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

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

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

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

さけのわデータのWebAPI

そもそも、さけのわってのはこちら。

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

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

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

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

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

Firebase Authentication

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

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

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

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

Cloud Firestore

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

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

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

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

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

Firebase Storage

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

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

Firebase Crashlytics

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

さいごに

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

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

3
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
12