フルスタック学務管理システムを構築しました

私の大学では、出席管理に紙の台帳を、成績管理にExcelシートを使用していました。お知らせは物理的な掲示板に貼られていました。私たちのチームは、このプロセス全体をデジタル化することに決めました。

私たちは Student Sphere を構築しました。

このシステムは、3つの異なるダッシュボードを使用しています：

学生用ダッシュボード:

  • 出席状況と資格の確認
  • 成績の確認
  • 学習ノートのダウンロード
  • 課題のデジタル提出
  • 学期の通知の閲覧

教職員用ダッシュボード:

  • 出席と成績の更新
  • ノートと実験レポートのアップロード
  • 課題の締め切りの設定
  • 特定の学期への通知の投稿
  • 学生の提出物の確認

管理者用ダッシュボード:

  • 新規登録の承認
  • ユーザーアカウントの管理
  • 学期全体の進級処理
  • システム統計の表示
  • すべての通知の管理

技術スタック:

フロントエンド:

  • HTML5, CSS3, および Vanilla JavaScript
  • React や Vue などのフレームワークは不使用
  • 全ページ共通の単一 CSS ファイル
  • モバイルから 4K スクリーンまで対応したレスポンシブデザイン

バックエンド:

  • Node.js および Express.js v5
  • JWT 認証
  • Bcrypt によるパスワードハッシュ化
  • 30 以上のエンドポイントを持つ REST API

データベースとデプロイ:

  • MongoDB Atlas
  • フロントエンドは Netlify でホスト
  • バックエンドは Render でホスト
  • WebView を介して Java で構築された Android アプリ

私たちは2つの大きな技術的課題に直面しました。

課題 1: API のパフォーマンス 教職員用ダッシュボードは、当初、学生データを読み込むために 46 回の個別の API コールを行っていました。これにより 14 秒の遅延が発生していました。私は個別のコールを単一の MongoDB $in クエリに置き換えました。これにより、ロード時間が大幅に短縮されました。

課題 2: React を使用しないシングルページアプリケーション (SPA) Vanilla JavaScript のみを使用して、ロールベースの SPA を構築しました。ルーティングと状態管理は手動で行いました。また、モバイルデバイスで横スクロールが発生しないよう、CSS メディアクエリを使用しました。

主な教訓:

  • フレームワークなしで構築することで、ウェブ技術が内部でどのように動作しているかを学ぶことができます。
  • 新機能を追加することよりも、パフォーマンスの最適化の方が重要です。
  • 初期のデータベーススキーマの決定がプロジェクト全体に影響を与えます。
  • デプロイには、CORS と環境変数の慎重な管理が必要です。

このプロジェクトは、Ajay Kumar Dangi 氏の指導のもと、Ramgovind Institute of Technology, Koderma の 5 人の学生によって構築されました。

ライブサイト: https://studentsphere0.netlify.app

フロントエンド GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend

バックエンド GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend

大学のためにフルスタックの学務管理システムを構築しました。その方法を解説します。

大学の運営は、非常に大規模で複雑な取り組みです。多くの大学では、依然として手動のプロセスや、断片化されたシステムに頼っています。これにより、データの不整合、情報の取得の遅れ、そして管理業務の非効率性といった問題が発生します。

そこで、私は自分の大学のために、すべての学務プロセスを中央集約化するフルスタックの学務管理システム（AMS）を構築することにしました。

使用した技術スタック

このプロジェクトでは、スケーラビリティと効率性を考慮して、MERNスタックを採用しました。

  • MongoDB: 柔軟なデータモデルを扱うためのNoSQLデータベース。
  • Express.js: Node.js用の最小限で柔軟なWebアプリケーションフレームワーク。
  • React: ユーザーインターフェースを構築するためのJavaScriptライブラリ。
  • Node.js: ChromeのV8エンジン上に構築されたJavaScriptランタイム。

主な機能

このシステムは、3つの主要なロール（役割）に基づいて設計されています。

1. 管理者 (Admin)

管理者は、システム全体のコントロール権を持ち、以下の操作が可能です。

  • 学生、教師、およびスタッフのユーザー管理。
  • コースおよび学科の作成と管理。

2. 教師 (Teacher)

教師は、自身の担当する業務に特化した機能を利用できます。

  • 出席の記録と管理。
  • 学生への成績入力。
  • 担当コースの管理。

3. 学生 (Student)

学生は、自身の学業に関する情報を閲覧できます。

  • プロフィール情報の確認。
  • 登録されているコースの閲覧。
  • 出席状況および成績の確認。

実装の詳細

バックエンド (Backend)

バックエンドは、Node.jsとExpress.jsを使用して構築されました。認証にはJSON Web Tokens (JWT)を使用し、パスワードのセキュリティを確保するためにbcryptによるハッシュ化を行っています。データベースとのやり取りにはMongooseを使用しています。

フロントエンド (Frontend)

フロントエンドは、Reactを使用して構築され、スタイリングにはTailwind CSSを採用しました。これにより、モダンでレスポンシブなUIを実現しています。APIとの通信にはAxiosを使用しています。

結論

このプロジェクトを通じて、フルスタック開発の全体的なフロー、特に認証、ロールベースのアクセス制御（RBAC）、およびデータベース設計について深く学ぶことができました。これは、単なる学習プロジェクトではなく、実際の課題を解決するための実用的なソリューションです。