ステゴカップ

あなたを知る魔法(Dich zu Kennen )

https://github.com/scla-sagauniv/hazimetenoosa_back

Next.js

Go

TypeScript

AWS

MySQL

人の顔と名前をクイズ形式で覚えよう!

中嶋心

tokito

推しアイデア

交換したプロフィールをもとにクイズを作成! 名前はもちろん、年齢や趣味、使う言語なども出題されます。 問題はグループごとに出題され、プロフィールを交換した友人を任意のグループに追加して、サークルや職場などに分けて覚えることができます。

作った背景

チーム名"顔と名前が一致しない"の通り、自己紹介済みの相手でも名前が出てこない、なんてことはよくあること......。 何度も名前を聞くのは忍びない、でも一発では覚えられない、クイズにもなるような名刺交換がしたい!そんな背景で作られています。

推し技術

フロントはNext.js、バックエンドはecho。docker環境でdbとgoを動かしたり、airでホットリロードできるように等、開発がスムーズになるように環境構築をしました。 また、認証をcognito、画像の保存をs3で実装したりなど、デプロイまで意識して構成しています。

プロジェクト詳細

推し技術

バックエンド

コードとしての使用技術は、エンドポイントの実装を行うためのechoとdbの操作を行うgormによって構成されたAPI、およびdbとして機能するMySQLがdocker compose 環境で動くように構成している。echoはAirを導入することでホットリロードを行い、スムーズな開発を行えるようにした。

ディレクトリ構成

kaotonamae_back ├── README.md ├── docker-compose.yml └── golang ├── Dockerfile ├── db │   └── db.go // dbへの接続 ├── go.mod ├── go.sum ├── main.go ├── migrate │   └── migare.go // AutoMigrate ├── models // データを取り扱うための構造体の定義とその操作 │   ├── auth.go │   ├── friend.go │   ├── group.go │   ├── groupMember.go │   ├── quiz.go │   ├── user.go │   └── userInfo.go ├── routes // ルーティング及びapiのレスポンス │   ├── auth.go │   ├── friend.go │   ├── group.go │   ├── groupMember.go │   ├── quiz.go │   ├── routes.go │   ├── user.go │   └── userInfo.go └── tmp // Airによるホットリロード時にビルドされる一時ファイル ├── build-errors.log └── main

クイズ出題の仕様とロジック

仕様としては、

  • クイズの出題問題は名前から行われ、次に名前の問題が出るまでは同じ人物の名前以外の要素を問題として出題する。
  • 最大15問。問題に重複がないように出力する。
  • 一度のリクエストで生成した問題をすべて格納したレスポンスボディを返す。 というものである。
    最終的な目標に出題時に正答率の低い、よく覚えていない人物の問題がより長くなるように重みづけを実装する予定だったため、名前以外の要素が出題された後の、別の人物の名前の問題に切り替わるかどうかは、乱数で決めている。
    一つの問題につきヒントを三つまで生成するようにしているのだが、これも現状均等なランダムである(重みづけの実装を考えていた。)

余談

バックエンドの担当は今回が初めてのgoでの開発であったのだが、ターミナルにairとechoの文字がアスキーアートとして表示されるのに感動し、自分も何かしてやろうと、エンドポイントのメソッドとパスを起動時に出力する機能の実装を行っていた。 (なお、ご丁寧に色分けまでしたにも関わらず、三つほどコミットが進んだあたりでエラーを引き起こし、泣く泣くrevertされている。) image

フロントエンド

Next.js,TypeSriptを使用して実装した。認証、認可にAWSのCognito,Amplifyを使用しており、middlewareを使用して認証時のリダイレクトの管理をしました画像はS3にアップロードする仕組みにしました。

こだわりポイント

  • AWSを使った
  • Next.jsの特性を活かした。(middleware,apiディレクトリなど)

GitHub

https://github.com/scla-sagauniv/kaotonamae_front

中嶋心

@00bd50f42b7a5b4d