TrailMap modal and endpoints to give points to user

hrk091 commented 2 years ago

UIはまだ全然作れてないですが、lambdaと連携してポイントを付与したりスタンプを押したりするところは一通りできたので、進捗共有も兼ねてPR作成しました。

ポイント取得のendpointは、以下の2つです。

https://event.cloudnativedays.jp/cndt2022/ui/get-session-point?key=<pointEventId>
https://event.cloudnativedays.jp/cndt2022/ui/get-point?key=<pointEventId>

前者は、セッション聴講後のQRコードでアクセスするもの、後者はそれ以外の任意のケースでQRコードを読んでポイントを付与するものです。イースターエッグのように、会場にQRコードを仕掛けておいてそれを読むことでポイントを付与するようなケースで使えます。別途払い出しているpointEventIdと組み合わせることで、QRコードが生成できます。

https://github.com/cloudnativedaysjp/dreamkast-functions/pull/56 で対応した、saltにも対応しています。 dk-uiコンテナに環境変数として渡すと、SPAの方にも展開されて使用できるような作りにしています。 reduxを使うとRedux devtoolsを使っている人に一発でバレてしまうので、contextにしつつ、contextを生成するcomponent内でclosureにすることで見えにくくしています。

github-actions[bot] commented 2 years ago

Review app

https://dreamkast-ui-337.dev.cloudnativedays.jp

hrk091 commented 2 years ago

これでも完全に隠蔽できてるわけではないですし、developer toolsでtrafficみたらeventIdわかるし共有されたらポイント奪取できますが、そこまでするならどうぞご自由にだと思っています。（Server sideでやったらもう少し堅牢にできますが、残り時間が厳しいことを考えて余計なリスクはとらないことにしました）

hrk091 commented 2 years ago

UIも作成し、コンテンツチームからの感触も良さそうだったので、commit積みました。画面のトランジションや上部のリンクなどイケてないところが満載なので、まだまだ対応していきますが、とりあえず必須のところはおさえた形になります。

UIはこんな感じです。

ポイント付与の動きを確認したい場合は、 https://dreamkast-ui-337.dev.cloudnativedays.jp//cndt2022/ui/get-point?key=94e7f9049b70fb867a80338af735fb1ea4ee64ba あたりにアクセスしてもらえると確認できます。セッション視聴のQRコードの動きがみたい場合は、reviewappsにアクセスして、 https://dreamkast-ui-337.dev.cloudnativedays.jp/cndt2022/ui/get-session-point?key=097de0f7d4b5ced77f1e7f1d9513b968468915a5 にアクセスすると確認できます。（tracks APIでonAirのsessionが返る必要があります）

cloudnativedaysjp / dreamkast-ui

TrailMap modal and endpoints to give points to user #337