スキル調査アプリの作成
内部研修の課題の１つとして、スキル調査アプリを作成しました。
本記事ではスキル調査アプリの紹介をさせていただきます。
概要
スキル調査アプリのシステム概要図は以下の通りです。
React（Next.js）アプリをAWSに配置しました。
ログイン認証ではCognitoを使用し、CloudFrontを経由して、SSRやAPIハンドリングをLambdaで行い、データベースはDynamoDBを使用しています。
画面遷移図
機能説明
ログイン画面
ホーム画面
ここでは調査一覧が表示されます。
それぞれをクリックすると
上のページに遷移し、評価を送信することができます。
管理画面
Cognitoで登録されているユーザーの中でisAdmin==trueとなっているユーザーに対しては、横のサイドバーに管理画面に遷移できるボタンがあります。
管理画面では、以下のマスタ機能が実装されています：
- 調査マスタ
- スキルマスタ
- 調査結果
- ユーザーマスタ
調査マスタ
ここでは既存の調査一覧を見ることができ、必要に応じて新規作成、編集、削除ができます。
新規作成画面
編集画面
スキルマスタ
調査マスタ同様、スキル一覧、新規作成、編集、削除機能が実装されています。
新規作成画面
編集画面
調査結果
ここでは各ユーザーから送信された評価の一覧が確認できます。
ユーザーマスタ
ここでは登録されたユーザー一覧が確認できます。
データベース
DynamoDBでは３つのテーブルを作成しました。
テーブル１．アセスメントテーブル
目的：評価の管理
テーブル２．サーベイテーブル
目的：調査の管理
テーブル３．スキルテーブル
目的：スキルの管理
まとめ
こういったWEBアプリは初めて作成したので、調べ作業も多く、試行錯誤しながら進めていました。（特にAWS関係が難しかったです。）
もともとWEB系は詳しく学んだことがなかったので、この研修を通して理解を深めることができました。
個人的にタイピングができるサイトを探してよく練習をしていますが、これを機に自分で作ってみるのも楽しいかもと思いました(^^)
資料作成に使用したサイト：
