kosukesaigusa / mottai-flutter-app Goto Github PK

json (jsonc) ファイルを Dart の CLI プログラムで読み込めるようにする。

概要

user.linkWithCredential() メソッドで複数のソーシャルログインを結びつける

登録済みのソーシャルログインの種類を画面に表示する

期日

2022-mm-dd

概要

pull requestが作成されたときに「flutter analyze」のgithub actionsが実行されるプルリクエストを作成する。
また、フォーマットがやりやすいように「.vscode/setting.json」に自動フォーマットする設定を導入する。

方針・要件・詳細・完了の定義など

プルリクエストのプッシュ時とプルリクエストへのコミット時に「flutter analyze」が実行されること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

Firebase Auth で Google/Apple でのサインインができるようにする。

packages/mottai_flutter_app/lib/auth/auth.dart の AuthService に実装すると良さそう。

後で LINE のメソッドも追加する。SignInMethod みたいな enum にapple, google, line を定義して中で処理を分岐するのが良いかも（他に良い提案があればもちろん受け付けます）。

基本的に公式ページに従う、必要なパッケージは追加して良い。

https://firebase.flutter.dev/docs/auth/social/

はじめてサインインする場合には、得られた情報で worker ドキュメントを作成できるようにする。

UI はとりあえず Apple, Google の審査に通るようなボタンが実装できていれば OK。

https://pub.dev/packages/sign_in_button パッケージを使用すると良いかも。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• 仕様の確認として、同じメールアドレスの Google アカウントと Appple ID アカウントでサインイン・サインアウトすると Firebase Auth のユーザーはどのような扱いになるかを確認してほしい（別アカウント扱いになるのか、自動的に同じアカウント扱いになるのか）

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

auto_route を使って、BottomNavigationBar が常に維持されたナビゲーションを実装する。iOS の Twitter アプリなどのイメージ（最近追加された勝手に BottomNavigationBar が消える仕様は真似しないでほしい）。つまり、画面を push しても BottomNavigationBar は残るように。

この記事：

https://zenn.dev/flutteruniv_dev/articles/20230427-095829-flutter-auto-route

を参考にしてできないだろうか。

と思ったけど、単に CupertinoTabScaffold を使うだけでよかったりするかな。ここだけ iOS っぽいウィジェットを使うのはどうなんだという気持ちもあるけど、見た目が変じゃないならいい気もする（そもそも BottomNavigationBar を残したまま画面遷移するのが iOS っぽい挙動だし）

BottomNavigationBar で並べるページは Figma に従う。BottomNavigationBar が存在している親的なページは RootPage とでも名前をつけると良さそうか。いまは DevelopmentItems ページが '/' になっているが、この実装を機に RootPage に差し替える。

RootPage の DevelopmentItems ページはまるごと Drawer の中に押し込めると良さそうかな。

その対応をした結果、きちんと appScaffoldMessengerController によるスナックバー表示やダイアログ表示が働いているかも確認してほしい。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

仕事の詳細画面に必要な Work? モデルの定義と、その詳細画面からホストとのチャットを始められるようにする

ホストアカウントを 10 個くらい作ったほうが良さそう

期日

2022-mm-dd

概要

選択中の Marker の z-index を上にする

期日

2022-03-04

概要

dev, prod で環境を分けられるようにする。

基本的にこれ：

https://zenn.dev/altiveinc/articles/separating-environments-in-flutter

に従う。

アプリ名、バンドル ID、Firebase のプロジェクトが分けられるようにする。flutterfire_configure の生成物も分ける必要があると思う。

加えて、この記事：

https://zenn.dev/flutteruniv_dev/articles/20220401-060335-flutter-launcher-icons

に従って、アプリアイコンも dev, prod で分けられるようにする。

それぞれの画像は適切なサイズや色の仕様に準拠して仮で用意する（真ん中に「Dev」or「Prod」と書いてある丸画像くらいの仮のもおので OK です）。また、そのサイズや色の仕様について軽くまとめる。

prod 環境の Firebase プロジェクトについては @kosukesaigusa に頼んで権限をもらう。

方針・要件・詳細・完了の定義など

方針・要件・詳細・完了の定義など

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

チャットで画像の送信・表示を可能にする。

画像の選択には wechat asset picker を使う？

画像の詳細を表示するために photo view も Playground でまず思い通りに動くようにする。

期日

2022-mm-dd

概要

チャットルームで既読機能を追加

方針・要件・詳細・完了の定義など

1. chatRoomsコレクションのにreadStatusesサブコレクションに自分がチャットルームに入った最後の時間を記入
2. readStatusesサブコレクションのパートナーのlastReadAt時間がチャットメッセージのupdatedAt時間より後だったら既読を表示

概要

dart_flutter_common に感想などで用いるカードウィジェットの実装し、感想一覧ページの UI を実装する。

感想などで用いるカードウィジェットは Figma の通り、Material 3 の UI Kit に従っている。コンポーネント名は MaterialStackedCard で OK.（Stacked は Flutter の Stack ではなく、おそらく Horizontal（水平方向）に対して「縦方向」を意味するのだと思われる）

受け取るべきプロパティは、Figma の UI Kit の要素（Figma の下の方の Material UI Kit の Cards の部分）もよく見て決めること。

Figma の命名にそうならばおそらく

• headerImageUrl
• headerSubheadText
• メニューボタンを見せるかどうか
• メニューボタンを押したときのコールバック
• mediaImageUrl
• contentHeadlineText
• contentSupportingText
• actions（AppBar の Actions みたいに List<Widget> かなあ？他にいい案があればそれにしたい。AlertDialog などのアクション系のボタンの指定の仕方も参考にしてほしい）

という感じ？

それを使って、mottai_flutter_app の感想一覧ページ（ReviewsPage）に ListView.builder で表示する。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

方針・要件・詳細・完了の定義など

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

アカウント画面から表示名・名前を変更できるようにする。

将来的には他のいろいろなフィールドも編集する必要性が出てくるのを少し頭に入れておく。

期日

2022-mm-dd

概要

メッセージの通知をタップしてルーム画面に遷移できるようにする

期日

2022-mm-dd

概要

サインイン直後、ホストドキュメントが存在するなら UserMode を Host にするようにする。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

Google, Apple のログインの Issue:

#45

の兼ね合いもあるが、同様に LINE ログインもできるようにする。

Callable Functions の実装も必要。

次の記事とリポジトリを参考にする。

• https://zenn.dev/kosukesaigusa/articles/line-login-with-firebase-auth-by-custom-token
• https://github.com/KosukeSaigusa/firebase-auth-line-sign-in

LINE のチャネル ID などは @kosukesaigusa に聞いて dart_define (Flutter) や .env (Functions) などで適切に管理する。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

画像の詳細拡大画面を実装する。

Twitter アプリの

• アカウントのプロフィール画像
• ツイートに添付している画像

などをタップすると表示される画像だけを全画面表示するウィジェットを実装する。左上には戻るための x ボタンを表示する。

Hero を用いてできるならそれで、難しそうなら photo_view などの適切なパッケージを選定して実装する。

dart_flutter_common に実装すると良い。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• 上記の実装が確認できるサンプルが mottai_flutter_app/lib/development の適当な場所にディレクトリやファイルを作成して実装されていること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

外部リンクの URL 文字列を表示するウィジェットを実装する。

ホストが自分の農園の Web サイトや Twitter, Instagram などのアカウントのリンクを job ページなどに掲載する目的で使用する。

linkify とか flutter_linkify みたいなパッケージを使用するのが良さそうか？パッケージの比較をして選定してほしいです（それとも Material 3 でそれらしい表現があるならそれに従う）たとえば他の著名なアプリの例にならうなどして、それ以外の適切な方法があるならそれを提案して実装する。

そして（必要なら url_launcher パッケージなどを使用して）スマートフォンのブラウザでその外部リンクを開けるようにする。

URL 文字列として正しくない文字列が入力されている場合は考慮しなくてもいい（が、なんらかの体験がよくなる方法があるなら提案してほしい）。

実装は dart_flutter_commons にすると良さそうか（リンクが開けない場合にその旨を SnackBar で表示したいが、それを mottai_flutter_app 側でどうするべきかも考える。たぶん適切な例外を投げれば良さそう）。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• 実装の使用例が分かる UI が、mottai_flutter_app/lib/development に作成した適切なディレクトリ・ファイルで確認できること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

GitHub Actions 経由で AppStore Connect �の開発版アプリにビルドをアップロードするタスクをできるようにする

期日

2022-mm-dd

概要

基本的に Figma に従う。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

https://pub.dev/packages/geolocator パッケージを使って、許可ダイアログを出しつつ、ユーザーの現在位置を取得できるメソッドを適当なクラスに実装する。

packages/mottai_flutter_app/lib/map/geolocator.dart に実装すると良さそうか。

https://pub.dev/packages/geolocator パッケージを Android, iOS で使用できるようにするための設定もこの Issue で担当する。パッケージの README に従うこと。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• packages/mottai_flutter_app/lib/development の下に適当なフォルダ・ファイルを作成して、そこで実装内容の確認をすることができること（ごく簡単なもので OK）
• Android, iOS でどちらも正しく動作することが確認できていること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

PR 作成時に CI (GitHub Actions) で flutter test が走るようにする。

無料のパブリックリポジトリでできるなら、その CI が通らないと PR がマージできないように GitHub の設定をする（する方法を調べる）。

できれば & 興味があれば codecov でカバレッジも可視化できると面白いかも。

codecov のアカウントなどで必要があれば @kosukesaigusa に設定を依頼する。

方針・要件・詳細・完了の定義など

• 上記の内容が済んでいること、GitHub Actions がそのように動くこと

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

仕事詳細画面のURL欄が仮でTextウィジェットになっているため、#67 で実装したURLウィジェットに置き換える。

方針・要件・詳細・完了の定義など

それぞれを押下してブラウザでサイト閲覧ができるようになること。

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

Firebase Storage の指定した場所・指定した名前で画像をアップロード・ダウンロード URL を取得できるようにする。

packages/firebase_common/lib/src/firebase_storage/firebase_storage.dart

にそのようなサービスクラスを実装する。

入力として何を受け付けるべきかは担当者が考えて提案する（相談にはもちろん乗るので声かけてください！）。

書きを参照すると良さそう（File か Uint8List をアップロードできれば良さそうかな）

https://firebase.flutter.dev/docs/storage/upload-files

返り値はおそらく画像のダウンロード URL を返すための Future<String> にするべきだと思われる。

概要

方針・要件・詳細・完了の定義など

• 上記の機能の実装が済んでいること
• packages/mottai_flutter_app/lib/development の下に適当なフォルダ・ファイルを作成して、そこで動作確認ができること（image_picker や wechat_assets_picker などの端末から画像を選択する類の機能は未実装なので、それを使わなくてもできる確認方法があればそれで済ませる。そうでなければ、端末から画像を選択する類の機能の実装を待つ必要があるかもしれないので相談する）

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

cached_network_image を使って、packages/dart_flutter_common/lib/src/components/image.dart に

• 円 or 正方形、できれば長方形も（名前付きコンストラクタ、そのほうが良ければ「画像の形」みたいな意味合いの enum を定義する）
• サイズ（縦・横の大きさ）
• （正方形の場合は）角丸サイズ
• （任意引数で）画像をタップした場合のVoidCallback

をもつウィジェットを作成する。

サイズなどのデフォルト値は良い感じの数字にする（縦横 64px くらい？）。

空文字の場合は代わりのグレー色プレイスホルダーっぽい見た目にする。

その他、より良くなるための仕様追加・変更の提案は歓迎です。

方針・要件・詳細・完了の定義など

• 上述のウィジェットが定義されている
• packages/mottai_flutter_app/lib/development の下に適当なフォルダ・ファイルを作成して、そのウィジェットの使用例がかんたんに示されている

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

プッシュ通知を受信・表示できる（foreground, background, terminated) ようにする。

下記の実装を参考にする。

https://github.com/KosukeSaigusa/spajam-2022-final/blob/main/lib/utils/firebase_messaging.dart

もし上記の実装を Riverpod に依存する部分とそうでない部分に分けられるのなら、Riverpod に依存しない部分だけを firebase_common パッケージに実装して、それを mottai_flutter_app で Riverpod を使って使用できるようにするのが良さそうかも（packages/mottai_flutter_app/lib/firestore_repository.dart でも似たようなことをしている）。

どのパッケージは Riverpod や Flutter に依存していけないのかを吟味すること。

Apple で実際に通知を受信するにははおそらく Apple Developer での設定が必要なので @kosukesaigusa に言った上で、受信確認は Android で行っておくのが良いかも。

プッシュ通知をタップしてからの画面遷移などは未実装でも OK。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• （可能なら）Android での受信確認ができていること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

画像詳細View(dart_flutter_common/lib/src/image_detail_view.dart)を使用して、画像を表示し
最大まで拡大するとiOSの場合縮小ができなくなり、Androidの場合縮小はできるがスワイプを横方向に行わないと
縮小ができない。
おそらく原因はFlutterのInteractiveViewerにあり、画像を動かす処理のほうが、縮小の処理より優先されている可能性がある。

方針・要件・詳細・完了の定義など

iOSで縮小ができ、Androidでいかなる方向からスワイプしても縮小できること
photo_viewなどの別パッケージを使用して対応できるかも確認が必要。

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

mottai_flutter_app の Flutter Web を有効化して GitHub の Issue ops 的にビルドしプレビュー用のビルドをデプロイする。

• mottai_flutter_app の Flutter Web を有効化する（気をつけているつもりだが、Web 非対応のパッケージを使用してしないことを確かめる。使用していたら工夫が必要）
• Firebase Hosting にデプロイしてみる
• GitHub の Issue ops（← ということばは正しい？）的に、たとえば PR のコメント欄で決められた文言を書くと、プレビュー用の URL が Firebase Hosting に発行されて、そこに Flutter Web でビルドした内容がデプロイされるようにする）
• Firebase Hosting や GitHub Actions 周りで設定や権限が必要な場合は @kosukesaigusa に相談する

方針・要件・詳細・完了の定義など

• 上記の内容が済んでいること

方針・要件・詳細・完了の定義など

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

チャットルーム一覧ページの実装を行う。

UI は packages/mottai_flutter_app/lib/chat/ui/chat_rooms.dart に実装すると良い。

チャットルーム一覧ページの各アイテムには

• メッセージの相手の名前
• メッセージの相手の画像
• 最後のメッセージ（参考：limit(1) のクエリで latestMessageStreamProvider 的なのを作ると良さそう）
• 最後のメッセージの日時
• 実装できそうなら、未読メッセージの数のバッジ（できないなら、ランダムで 1 〜 10+ のを表示しておくと良さそう）

を表示する。

ワーカーとしてもホストとしても正しく動作・表示されることを確認する。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

マップ画面の状態管理を rx_dart から Riverpod に書き換える。

Playground でまずやるのが良さそう。

期日

2022-mm-dd

概要

技術調査もかねて Twitter ログインも実装する

期日

2022-mm-dd

概要

ホスト情報入力画面（ホストデータ作成・更新画面）の実装をする。

基本的に Figma に従う。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること。

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

FlutterFire の公式ドキュメントに従い、複数のソーシャルログイン (Google, LINE, Apple) をリンクできるようにする。

この Issue 作成時点ですごく十分な調査ができているわけでもないので担当者が実現方法の調査からしてほしい。方針が決まったり、方針に悩んだりすることがあれば相談して欲しい。

基本的には、Firebase Auth でログイン後、その状態から異なるソーシャルプロバイダで Firebase Auth の credential を link するようなメソッドをコールすればいいはず。

仕様としては、userSocialLogins というコレクションに、ユーザー ID と一致するドキュメントを作成し、

• isGoogleEnabled
• isLINEEnabled
• isAppleEnabled

というフィールドを定義する（firebase_common に定義する）。他のドキュメントの bool のフィールドを参考にしたら行けるはず、分からなかったら聞いてください！

つまり、はじめてのログインが済んだ時点で、上記のいずれか 1 つのフィールドが ON になったドキュメントが作成されているべき。

それを作成する機能もクライアントに実装する（set で SetOptions の merge: true にするといい気がする）。

そうしたら、Figma を参考に userSocialLogin 一覧を表示する UI コンポーネントも定義する。user_social_login/ui に作るといい。（後でアカウントページなどで使用する）

別 Issue でも OK だが、リンクを解除する機能も考慮できているとなお良い。できていなくても OK. たぶん「transaction で該当 userSocialLogin ドキュメントを read して ON かつ、それが唯一のソーシャルログインでなければ解除する」みたいな実装になるのでは？（実際に着手してみて調査して欲しい、困ったら相談してください！）

方針・要件・詳細・完了の定義など

• 上記の必須要件が最低限済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

仕事詳細ページの UI を実装する。

どのホスト（ホストロケーション）なのかはパスパラメータから後で取れるようにするので、現段階ではハードコードな固定値で良い。

Figma を参考に実装する。

最上部の画像は、ユーザーがアップロードする画像サイズはアスペクト比もバラバラなので、いっぱんてきなアスペクト比で見切れていいと思う。

URL のリンク化は、#67 この Issue でやる予定なのでここでは対応しなくてもいいし、同時に対応しても OK.

体験者の感想の UI も考え中なのでいったん保留で OK.

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• 単なる FutureProvider だとは思うのでどちらでも良いですが、興味があればウィジェットテストをするのも良いです！

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

#87

上記のPRで実装されたFirebaseStorageServiceクラスを用いてアプリ上で画像に関する動作確認を行えるUIを作成すること

概要

方針・要件・詳細・完了の定義など

• packages/mottai_flutter_app/lib/development の下に適当なフォルダ・ファイルを作成して、そこで動作確認ができること（image_picker や wechat_assets_picker などの端末から画像を選択する類の機能が実装された段階でタスクに着手する。）

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

当アプリでは画像を端末から 1 つ選択（たとえばユーザーのプロフィール画像を選択するときなど）または複数選択（たとえばチャットで複数画像を送るときなど）することができるようにしたい。

• https://pub.dev/packages/image_picker
• https://pub.dev/packages/wechat_assets_picker

などのパッケージを調査して（他に有望なものがあれば提案してください）、要件を満たせるパッケージを選定する。

その上で、dart_flutter_common はそのパッケージに依存させていいので、適当なファイル名・クラス・メソッド名で、画像を選ばせる実装をする。1 つ選ぶときと複数選ぶときで返り値が変わるはずなので、メソッドは分けたほうが良さそうか。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• packages/mottai_flutter_app/lib/development の下に適当なフォルダ・ファイルを作成して、そこで実装内容の確認をすることができること（ごく簡単なもので OK）
• 使用するパッケージの README を読んで、Android, iOS に必要な設定が済んでいること

発展的には、（画像を 1 つ選択するケースでは）将来的に端末から写真を選ぶだけではなく、カメラを起動して写真を撮って選択する可能性もあるので、それを意識できているとなお良い。

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

実際のホスト対ワーカーのメッセージ出なくて良いので、一対一で相手を選んでメッセージのやり取りができるようドラフトの実装を行う。

メッセージはできれば無駄な読み込みを減らして、汎用的な無限スクロールで実装したい。

期日

2022-mm-dd

概要

/Users/kosukesaigusa/dev_private/mottai_flutter_app/packages/dart_flutter_common/lib/src/date_time.dart に、与えられた DateTime と現在時刻を比較して

• 同じ日付 →「今日」
• 1 日前の日付 →「昨日」
• N (2 <= N <= Nmax) 日前の日付 →「N 日前」（Nmax は 7 にしておく）
• それより昔の日付 →「yyyy年MM月dd日」

という文字列を返すメソッドを定義する。DateTime の externsion に定義するのが良さそうか？（DateTime? も受け付けるべきかどうかは担当者が考えて判断する）。

メソッド名は人間に読みやすい (human readable) みたいな意味合いだと良さそう。

網羅的なユニットテストを書く。

方針・要件・詳細・完了の定義など

• 上記の仕様の実装が済んでいる
• 網羅的なユニットテストができている

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

レビュー中かどうか機能の実装を行う。

configurations/inReviewConfig（ドキュメント ID は inReviewConfig で固定）に設定用ドキュメントを保存する。

強制アップデートに少し似ているが、iOS or Android のプラットフォームごとに、いまそのアプリのどのバージョンかが審査中かどうか、審査中モードを ON/OFF にするフラグを持っている。

packages/mottai_flutter_app/lib/package_info.dart から現在のアプリバージョンを取得して、

「当該アプリ (iOS or Android) のバージョンと一致し」かつ「審査中モード enable」の場合に true（そうでないとき false）を返す Provider or StreamProvider を定義する。

その Provider を ref.watch して、審査中の場合には特定の機能やボタンを隠すなどの（ずるをする）機能を一応使えるようにする目的のため。

その実装の確認をするために packages/mottai_flutter_app/lib/development の下に適切なディレクトリ・ファイルを追加して、ごくかんたんな UI も構築する。

方針・要件・詳細・完了の定義など

• 上記の実装・動作確認が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

Google サインインの Firebase Auth アカウントの作成をトリガーに、users コレクションにドキュメントを作成する

期日

2022-mm-dd

概要

マップページのベースを実装する。

packages/mottai_flutter_app/lib/map/ui/map.dart にホストを地図上で探すマップの UI を実装する。

必要があれば packages/mottai_flutter_app/lib/map/map.dart にモデルの実装をする。

map_page.dart の実装は geoflutterfire_plus の withConverter のサンプルを参考にすると良い。基本は rxdart を使ってほぼ同様の実装で良さそう。

https://github.com/KosukeSaigusa/geoflutterfire_plus/blob/main/example/lib/advanced/with_converter.dart

カメラの初期位置は最終的には geolocator パッケージの現在地にするが、現段階では東京駅などの適当な場所で OK。

使うウィジェットは主に GoogleMap, PageView で、それらを Stack で重ねて、PageView は画面下部に置く。

実際に適当な位置情報を含む hostLocation ドキュメントを複数 Cloud Firestore に保存して、取得された List データはマップ上にピンを立てる。そしてそれらを PageView に表示する。

Figma がまだなくて恐縮ですが、なおきくんの記事のこの GIF のようなイメージ：

https://zenn.dev/flutteruniv_dev/articles/028a2e4ab5f71b#%E3%83%9E%E3%83%83%E3%83%97%E7%94%BB%E9%9D%A2

geohash の値は、たとえば東京駅なら下記のようにして取れる：

// Define GeoFirePoint by instantiating GeoFirePoint with latitude and longitude.
final GeoFirePoint geoFirePoint = GeoFirePoint(GeoPoint(35.681236, 139.767125));

// Gets GeoPoint instance and Geohash string as Map<String, dynamic>.
final Map<String, dynamic> data = geoFirePoint.data;

// {geopoint: Instance of 'GeoPoint', geohash: xn76urx66}
print(data);

いずれにせよ、

https://github.com/KosukeSaigusa/geoflutterfire_plus

の README もよく読むこと（不明点があれば聞いてください！！）。

現段階では PageView に表示する中身は適当でも OK。HostLocation ドキュメントの内容がなんとなく表示できていればそれで良さそう。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

概要

方針・要件・詳細・完了の定義など

方針・要件・詳細・完了の定義など

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

FCM トークンの追加・確認ができるようにする

ここ：

に userFcmToken というドキュメントモデルの定義をしているので、それを追加・確認できるようにする。

• ログイン済みの場合のみ、RootPage の initState で userFcmToken ドキュメントを set する
• AuthService のログイン処理の最後に、userFcmToken ドキュメントを set する
• 開発用ページの適当な場所に、自分の userFcmToken 一覧を表示する UI を作る。開発用なので ListView と ListTile のような簡易な内容で OK. ログイン済みの人しか表示できないはずなので、AuthDependentBuilder を使うと良さそう。token, deviceInfo, createdAt あたりを表示すると良さそう
• String deviceInfo には、device_info_plus パッケージから得られる端末情報文字列を保存する。OS, OS バージョン、端末あたりが特定できそうだと嬉しい

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

一般（ワーカーユーザー）がホストユーザーになるための流れや要件を確認して要件を決める

たぶん何らかの申請が必要

申請を確認して、OK を出すということはアドミン画面が必要になったりする？？

アドミン画面といっても、詳細の編集などがない機能については Web のアドミンではなくモバイルアプリの方が Mottai の運営者には楽だと思う。Firebase Auth のカスタムクレイムを使用することを検討する。

期日

2022-mm-dd

概要

packages/mottai_flutter_app/lib/force_update の下に強制アップデートの実装を行う。

configurations/forceUpdateConfig（ドキュメント ID は forceUpdateConfig で固定）に相当する。

Firestore のドキュメント定義にある通り、そのフィールドに 1.0.0 のような形式（文字列）で最低限必要なバージョンを保存する予定。

packages/mottai_flutter_app/lib/package_info.dart から現在のアプリバージョンを取得すると良い。

@visibleForTesting アノテーションを使うことも検討して、Firestore に保存されたバージョンと package_info_plus パッケージを用いて得られたバージョンとを比較して、強制アップデートすべきかを判定するメソッドは、十分にテストする。

Firestore に保存されたバージョンの形式に誤りがあった場合でも、できればそこで発生する例外やエラーは握り潰して、とりあえず強制アップデートしないで良いという判定になるよう実装できると安心できそう。

実際に強制アップデート画面を表示するような処理は未実装で OK だが、

packages/mottai_flutter_app/lib/force_update/ui/force_update.dart

に、強制アップデート ON 時に表示するウィジェットをかんたんに作成しておく。

• 最新バージョンを App Store または Google Play Store でダウンロードしてください
• それぞれのストアページ（いまは仮で https://google.com とかで OK）に飛ぶ ElevatedButton を表示する

くらいで OK．

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること
• 上記の書くべきテストが書けていること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

UI はここ：packages/mottai_flutter_app/lib/chat/ui/chat_room.dart

モデルはここ：packages/mottai_flutter_app/lib/chat/chat_room.dart

に実装する。

UI は主に

• 左側：相手の画像、名前、メッセージ、送信日時
• 右側：自分のメッセージ、送信日時、既読 or 未読

を表示する。

この記事とサンプルリポジトリも一部参考にして、チャット機能を実装する（さらに改善してほしい）。

• https://zenn.dev/kosukesaigusa/articles/flutterfire-infinite-scroll-chat
• https://github.com/KosukeSaigusa/flutter-infinite-scroll-chat

要件と改善してほしいポイントとしては

• 上記の記事・サンプルリポジトリと同様に、チャットルームを開いたあとのチャットはリアルタイム取得、過去のメッセージは無限スクロールで 10 件ずつ順次取得できるようにする
• AsyncNotifier と build メソッドをうまく使って初期表示をもっとうまくやる
• 10 件ずつ取得する処理で最後に読んだ QueryDocumentSnapshot を渡しているところを改善してほしい。アプリは Cloud Firestore のことを知りたくないので、最後に読んだ ドキュメント ID などを渡せば良いようにしてほしい （参考：https://github.com/KosukeSaigusa/flutter-infinite-scroll-chat/blob/204c6909b546cd3023fcd083de4e7f30881a5578/lib/repositories/chat.dart#L62）

一応ドキュメントモデルには、「システム」からのメッセージの余地も入れているがいまは無視して OK。

余裕があれば

• 相手の最後に読んだ日時を取得する StreamProvider
• 自分の最後に読んだ日時を更新するメソッド

も実装すると未既読管理機能まで完成するので取り組む。できなれば「既読」or「未読」は固定値で表示しておく。

方針・要件・詳細・完了の定義など

• 上記の実装が済んで、パフォーマンスの問題なくチャットが行えること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。

概要

Google, Apple サインインの実装

期日

2022-mm-dd

概要

チャットにメッセージの削除、長押ししてコピー、リンクの有効化の機能を追加する

期日

2022-mm-dd

概要

Flutter SDK 10.0.3 にアップデート

期日

2022-mm-dd

概要

アカウントページの UI の実装をする。Figma に従う。

ログイン中のユーザーがワーカーのみであると場合と、ホストでもある場合とで UI が異なる。

必要ならば（それかすでにあるならば）、ログイン中のユーザーがワーカーのみなのか、ホストでもあるのかを返す StreamProvider を定義すると良さそうか（他のブランチで Stream<ReadHost> 型の hostStreamProvider のようなものが定義されている。が、それらが main にマージされるタイミングが読めていないので、この Issue のブランチで作ってしまっても良い。タイミングが良ければ、その機能が入った main ブランチから派生しても良い）。

Section ウィジェットというのがあるので活用する。各項目はすべてそれで並べる。

「投稿した感想」・「掲載中の仕事」については、dart_flutter_common の widgets に UI を定義すると良さそう。要するに「タイトルと、その下の追加情報と、その右側に画像を指定できる角丸カード状のウィジェット」という意味合い。Figma の Material 3 のコンポーネントキットの名前に合わせて MaterialHorizontalCard みたいな命名？

「ソーシャル連携」については、まだドキュメントモデルを作っていないので、いったんハードコートの見た目で OK。

方針・要件・詳細・完了の定義など

• 上記の実装が済んでいること

補足

着手時には、#mottai-app-issues チャンネルにこの Issue を貼り付ける。

また、そうしたければ、要件の整理や進捗のつぶやきのようなことをそのスレッドに書く。Issue の内容や仕様に関する説明や認識合わせが必要な場合や、ペアプロを希望する場合はそのスレッド内で、然るべき人にメンションして話を進める。