所属しているバレーボールチーム用のアプリをReact/TypeScript, AWS Amplifyで作った。

JABです！
久しぶりにちゃんと開発して、身近な人たちに使ってもらえるようなWebアプリを作りました。

開発過程を記録していたわけではないので、本当にざっくり振り返ろうと思います。

React, Amplifyで開発

初めてまともにAWSのサービスを利用して作りました。Reactは使ったことかありますが、かじる程度にWebサイトを作ったり、簡単なToDoアプリを作ったくらいでした。

キッカケ

最初はAmplifyを使って、チャットアプリかSNSアプリのような「テキストコミュニケーションっぽい何か」を作っていました。

そのくらいの時にバレーボールを始めて、そこでチームの代表をしてくれている方の管理が大変そうだったので、何かできないかなぁと思い今回の開発になりました。

方向転換してチームマネジメントようのアプリへ

それまで作っていたSNSアプリの機能を「お知らせ」的な単なる掲示板として、機能の一部としつつ、練習やイベントのスケジュール管理や参加者の把握などができるようなアプリにしました。

スポーツ保険や体育館を借りるということに関連して、毎回参加者や参加人数の把握をしなければならない感じでした。

それを少しでも緩和できたらと思い、ひとまずイベント毎の出欠管理ができるような機能をつけました。

アプリ構成

フロントエンドはReact/TypeScript、バックエンドは知識がないのでAWS Amplifyに任せて作りました。

AWS活用したものは、
・Amplify
・AppSync
・DynanoDB
・Lambda
・Cognito
です。

途中で追加して

・LINEbot

フロントはReactをそのまま使っているんですが、ライブラリーはAWS関連で必要なものの他に以下のものを使っています。

・React Router Dom
・React icons
・Tailwind CSS
くらいかなと。
（その他にもちょいちょい使ってますが…）

DB

DB設計なんてしたことないし、そもそも今回はDynamoだし…ってことで、行き当たりばったりで、現状テーブルは以下のようになってます。

・Userテーブル
・Commentテーブル
・Likeテーブル
・Eventテーブル
・Participationテーブル

Cognito

クローズドなアプリ故に認証機能をつけたかったので、使ってみました。

サインアップ時にLambdaを利用してUserテーブルに自動的にレコードを追加するようにしました。

トリガーはPost confirmationで行いました。

LINEbotと連携

これは運用を始めてから追加した機能です。
そもそも通知機能などはなかったので、みんなが参加表明したときにアプリにアクセスしなければ確認できないというのが不便でしたので。

LINE developerをまともに利用するのは初めてでしたが、ちょっと前に運良くLINE botのハンズオンの記事をいただいたので、それを見ながら基本的な設定を行いました。

botをグループに参加させて、

• Eventテーブル

• Participationテーブル

にレコードが追加されたときLambda関数を実行して、botにコメントさせるようにしました。

使いながら改善していきます。
Nextjsで作ればよかったなぁと少し反省しています。