総合暗記補助アプリunfo(アンフォ) 制作メモ

目次

1. 概要
2. 使用技術
3. 機能一覧
4. デモンストレーション
5. 解説
   1. デザイン面
   2. コード面
6. 反省

概要

Githubリポジトリ : https://github.com/ogaoga08/unfo_local
大学2年生に授業で作成したWebアプリケーションです。(ローカル環境にて作成)
大学受験での経験から欲しかった、忘却曲線ベースの単語帳アプリを作成しました。
既存のアプリよりも視覚的見やすさ、多機能さを実装することを意識しました。
　(名前はunforgettableから。ロゴを考えるのが好きなので授業課題外でロゴタイプも作成しました)

後述しますが、このアプリケーションは授業開始時に配布された簡単なブログアプリの雛形から作成したものです。インフラ部分は全て配布されたものです。

使用技術

機能一覧

• ユーザー登録、ログイン機能(授業にて雛形配布)
• ヘッダー、ナビゲーションバー、その他UIデザイン(Bootstrap)
• ホーム画面
  • 単語カードのOK,NG機能
  • 単語カードのフリップ機能(JavaScript)
  • クイズカードの正解判定(JavaScript)
  • タグ検索機能(MySQL)
• カード登録画面
  • クイズの選択肢数選択(JavaScript)

デモンストレーション

解説

デザイン面

既存のアプリケーションよりも視覚的に見やすくするため、ライトモードの背景にした。また基本的にアプリ操作部分に緑、カード(単語帳)部分に赤を描画することで操作タスクを視覚的にわかりやすく工夫した。
そしてカード下部には進捗を表すプログレスバーを設置することによりあと何回で学習が終了するのかを視覚的にわかりやすく設計した。

　コード面

ログイン機能やディレクトリの構成は授業のTAさんが作成してくれたため、ある程度の雛形は用意されている状態(REST APIを利用した簡単なブログ投稿アプリ)から作成した。モデルとコントローラーをpythonで書いているため、初心者でも作りやすかった。
FastAPIでのテンプレートエンジンの記法を理解することが難しく、エラーになることが多かったため、chatGPTにコードを投げて修正していった。

反省点

初めてということもあり非常に可読性が低いコードばかりになってしまった。
画面に表示する単語カードの条件を全てSQL文で指定しているため、今ならもっとフロント側で処理できる気がする。
現在(2024/6/3)はReactで開発をしているので、コンポーネント化して再利用できる機能が多いと感じた。
今後モバイルアプリに移行する予定なので、そのときにリファクタリングしたいと思う。