第5章の実装

[okaryo]

概要

• 第5章、チャレンジ企画の内容であるFirestoreを使ったリアルタイム対戦機能を実装しました

詳細

• Firestoreのドキュメントのキーを${playerA}_${playerB}として、盤上の状態をStreamを使って購読しています
• 第5章においてPlayersというクラスを新たに作成し、対戦相手同士の名前を保持するようにしています
• ProviderはStateNotifierProviderからStateProviderを使うように変更しています

UI

Screen.Recording.2023-09-23.at.14.44.16.mov

対戦までの流れ

• ハンズオン当日のGitHubDiscussions内で対戦相手を決める
• それぞれのGitHubのIDをtic_tac_toe_provider.dartの指定の箇所に記入する。
• 対戦開始

相談内容

• 第5章においても入れるか悩んだ機能
  • 相手の手番のときに自分がタップできないようにする
• XとOだとどれが誰の駒か分かりにくく思ったので、盤上にはそれぞれのIDを表示するようにしましたがどうでしょうか？
• いろんなProviderに触れて欲しいという思いから、StateNotifierProviderからStateProviderを使うように変更しましたがどうでしょうか？
  • 元々のStateNotifierの中でStreamを購読して状態を書き換えることもできるため
• プレイヤー管理にPlayersというクラスを作成し、playerX, playerOというフィールドで手番を扱うようにしましたが他に良いアイデアあればくださいmm
• 今回追加したPlayersクラスは第4章時点で実装しておいても良さそうに思いましたがいかがでしょうか？

備考

• 一旦、僕個人のFirebaseプロジェクト内のfirestoreを利用しています。今後パブリックにするリポジトリにサービスファイル(google_services.json等)をコミットするのは流石に躊躇われたため、ハンズオン当日は参加者のみにサービスファイルを渡して各自のディレクトリに配置してもらう感じになりそうです
• firestoreのセキュリティルールは全開放しています。ハンズオンが終わったらプロジェクトを削除する予定です。

[okaryo]

@FlutterKaigi/conference-handson-2023
第5章チャレンジ企画のリアルタイム機能を実装しました。
ハンズオン内でどこまでカバーすべきなのか、どこまで妥協すべきなのかよく分からなくなってきたので、お手隙の際で構いませんので第三者視点からレビューいただけますと幸いですmm

[chippy-ao]

@okaryo
マジで制作ありがとうございます & PRなかなか時間取れなくてすみません。

相手の手番のときに自分がタップできないようにする

あるとGoodですね

盤上にはそれぞれのIDを表示するようにしましたがどうでしょうか？

文字切れの対応をどうするか考えると、上の文言だけIDでもいいかもっす。（このままでもGood）
あとは、Player名をSetできるようにUI変えるくらいですかね？

いろんなProviderに触れて欲しいという思いから、StateNotifierProviderからStateProviderを使うように変更しましたがどうでしょうか？
元々のStateNotifierの中でStreamを購読して状態を書き換えることもできるため

StreamProviderでいいと思います。

プレイヤー管理にPlayersというクラスを作成し、playerX, playerOというフィールドで手番を扱うようにしましたが他に良いアイデアあればくださいmm
今回追加したPlayersクラスは第4章時点で実装しておいても良さそうに思いましたがいかがでしょうか？

Playersは４章にもあっていいかなと思いますよ！

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	69445f2
Status:	✅  Deploy successful!
Preview URL:	https://b6d60f4f.tic-tac-toe-handson.pages.dev
Branch Preview URL:	https://chapter5.tic-tac-toe-handson.pages.dev

View logs

[jiyuujin]

僕個人のFirebaseプロジェクト内のfirestoreを利用

FlutterKaigi からプロジェクトを新しく作ったので、ご確認いただけると🙏
@FlutterKaigi/conference-handson-2023

[okaryo]

盤上の印をO/Xで表現し、勝者をPlayerIDで表示するよう修正

[jiyuujin]

@okaryo cc: @FlutterKaigi/conference-handson-2023

諸々ご対応いただき、ありがとうございます mm

5章はマージとのことだったかと思いますが、まだ conflict あるようなので、こちらも解消いただけますと🙏
おそらく main ブランチで SingleChildScrollView を差し込んだためかと思いますが