HelloC_Student

概要

HelloC の学習者側のフロントエンドシステムです。

開発者向け

ディレクトリ構成

src
├── components （コンポーネントを定義したファイル群）
├── pages （各ページを定義したディレクトリ）
│   
├── stories （コンポーネントのstoriesファイル群）
└── styles
    └── globals.css （グローバルスタイル定義）

本リポジトリの運用

• タスクの起票（新規コンポーネント開発、発覚したバグなど）には「issues」を使ってください。
• （余裕があればでいいですが）作成したissueには、優先度などを表すラベルを記載してください。

• 実装の際には、mainブランチに直接コミットするのではなく、開発用にブランチを作成してください。
• ブランチ名については、特に指定しないものとしますが、基本的にはmainブランチを起点にしてください。

ブランチの作成

git checkout -b ブランチ名

ブランチをpush

git push origin ブランチ名

ブランチをpull（レビューの際に使ってください）

git pull origin ブランチ名

コーディングルール

• 変数名にはローワーキャメルケースを使ってください。

const camelCase = 0

• 関数名・タイプ名にはアッパーキャメルケースを使ってください。

type CamelCase

const CamenCaseFunc = () => {}

• グローバルに利用するような定数には、コンスタントケースを使ってください。

const CAMEL_CASE = 0

開発環境の導入

• リポジトリのクローン

git clone https://github.com/HIT-matsumotolab/HelloC_Student.git

• パッケージのインストール（本リポジトリはyarnを利用します）

yarn install

• 環境変数の設定（.env-sampleをコピーして、.envファイルを作成し、その中に記述してください。）

# バックエンド側に合わせて記述してください
API_URL="localhost:3000"

• Next.jsの実行

yarn dev

とりあえず読んどいたらいいよのサイト群

• Storybook公式
• Next.js公式　日本語版はこちら
• styled-components公式
• Chakra UI公式

要件整理

• HelloCの問題解答やログ確認などを生徒側が行うことができるWebアプリを作成すること

欲しい機能

• クラス管理（クラス参加・削除）

  • クラスの一覧を表示できること
  • クラスの詳細を表示できること
  • クラス一覧から選択してクラスに参加できること
    • 複数クラス参加できるのはOK?
  • 参加しているクラス一覧を表示できること
  • 参加しているクラスから選択して削除できる（クラスから抜けられる）こと

• 問題集管理（クラスの中に問題集がある．問題集の登録・削除）

  • 所属しているクラスに存在する問題集一覧を閲覧できる
  • 問題集の詳細を閲覧できる
  • 一覧から問題集の登録ができる
  • 登録している問題集一覧から削除できる
  • 登録している問題集に回答できる
  • Web上でコードを書き、実際に実行できる（既存のデスクトップアプリの場合、インストールして起動する段階でGraalvmから必要なコンパイラが入り、コード実行時にはそれを使ってコンパイルエラー検出や実行結果の出力を行なっている？）
    • 新規で正誤判定を行うようなAPIが欲しい。もしくはそのサービスを利用するか。（参考：Judge0）
    • Web上で実行できるようなオンラインコードエディターを参考にしたい
    • このため、実際に実行することが必要となればデスクトップアプリでの実装が必要かも。Electronの検討？
  • 進捗把握（問題集のどの問題がどういう状況か（未着手，不正解，正解のどれかと，時刻を把握できる）
    • 問題集のステータスを確認できる
    • 解答の時刻を把握できる（？）

• 演習ログ閲覧

  • 自分の演習ログを確認できること

• ユーザ情報管理（個人情報やパスワードの変更）

  • 自分の個人情報を確認できる パスワードを変更できる