siroyanTech’s blog

電子工作/プログラミング/脳科学

「点棒オンライン」というWEBサービスを開発したよ(その2)

前回記事
siroyantech.hatenablog.com
の続きになります。AWSサイドとクライアントサイドをもう少し詳しく説明していきます。

API設計について

前回の記事を読まれた方はわかると思いますが、この点棒オンライン(というよりサーバーレスアーキテクチャ全般?)では、静的コンテンツをS3から配信し、その他動的コンテンツをAPIとして提供する形をとっています。
このあたりの設計は、RoRからWEBアプリ開発に入った自分としては驚きでした。
API Gatewayによって提供されるAPIは、その背後でLambdaを呼び出し、メインの処理をしています。表にまとめると下の様になります。
f:id:siroyanTech:20200810181249j:plain
では、次にこのAPIから呼び出されるLambda関数たちが何をやっているかを説明します。

Lambda関数

generateTaku()

こちらはその名の通り、卓の生成を担っています。
この関数が呼び出されると、卓のUUIDと4人分の点棒の情報をもつレコードをDynamoDBに登録します。

getTakuInfo()

これもその名の通り、卓の情報を返します。
この関数が呼び出されると、パスパラメータで渡ってきた卓のIDをもとに、DynamoDBから4人分の点棒の情報をクライアントに返します。

switchTaku()

こちらは点棒の受け渡しを担っています。
この関数が呼び出されると、クエリパラメータをもとに、誰が誰に点棒を渡すのか、渡す点棒な何点なのかを特定します。
そしてパスパラメータをもとに、どの卓の話をしているのかを特定し、DynamoDBのレコードを書き換えます。

4人のユーザーが同卓するには

つまるところ、4人のクライアント間で、generateTaku()されたときの卓IDを共有できればよいわけです。
これにはQRコードを用いました。QRコードに卓ID情報を埋め込み、generateTaku()を呼び出した人以外は、呼び出した人の画面に表示されているQRコードを読み取り、そこから卓IDを取得する、というわけです。

その他

見た目にはBootstrapを使いました。(見る人が見れば一発でわかりますが(笑))
Bootstrap、とっても便利で重宝してます。

終わりに

ここまでお読み頂きありがとうございます。
また何か作りましたら記事にしたいと思っていますので、よろしくお願いいたします。