من یک سیستم مدیریت آکادمیک فولاستک ساختم
کالج من برای حضور و غیاب از دفترچههای کاغذی و برای نمرات از صفحات اکسل استفاده میکرد. اطلاعیهها روی تابلوهای فیزیکی نصب میشدند. تیم من تصمیم گرفت کل این فرآیند را دیجیتالی کند.
ما Student Sphere را ساختیم.
این سیستم از سه داشبورد مجزا استفاده میکند:
داشبورد دانشجو:
- مشاهده حضور و غیاب و وضعیت واجد شرایط بودن
- بررسی نمرات
- دانلود جزوات درسی
- ارسال دیجیتالی تکالیف
- مشاهده اطلاعیههای ترم
داشبورد اساتید:
- بهروزرسانی حضور و غیاب و نمرات
- آپلود جزوات و گزارشهای آزمایشگاه
- تعیین مهلت ارسال تکالیف
- انتشار اطلاعیهها برای ترمهای خاص
- بررسی تکالیف ارسالی دانشجویان
داشبورد مدیریت:
- تأیید ثبتنامهای جدید
- مدیریت حسابهای کاربری
- ارتقای کل ترمها
- مشاهده آمار سیستم
- مدیریت تمامی اطلاعیهها
پشته تکنولوژی (Technical Stack):
فرانتاند (Frontend):
- HTML5، CSS3 و Vanilla JavaScript
- بدون استفاده از فریمورکهایی مانند React یا Vue
- یک فایل CSS واحد برای تمام صفحات
- طراحی واکنشگرا (Responsive) از موبایل تا صفحهنمایشهای 4K
بکاند (Backend):
- Node.js و Express.js v5
- احراز هویت JWT
- هش کردن رمز عبور با Bcrypt
- REST API با بیش از ۳۰ نقطه اتصال (endpoint)
پایگاه داده و استقرار (Deployment):
- MongoDB Atlas
- میزبانی فرانتاند روی Netlify
- میزبانی بکاند روی Render
- اپلیکیشن اندروید ساخته شده با Java از طریق WebView
ما با دو چالش فنی بزرگ روبرو شدیم.
چالش ۱: عملکرد API
داشبورد اساتید در ابتدا برای بارگذاری دادههای دانشجویان، ۴۶ فراخوانی API مجزا انجام میداد. این امر باعث تأخیر ۱۴ ثانیهای میشد. من فراخوانیهای مجزا را با یک کوئری واحد $in در MongoDB جایگزین کردم. این کار زمان بارگذاری را به میزان قابل توجهی کاهش داد.
چالش ۲: اپلیکیشن تکصفحهای (SPA) بدون React ما یک SPA مبتنی بر نقش (role-based) را تنها با استفاده از Vanilla JavaScript ساختیم. ما مسیریابی (routing) و مدیریت وضعیت (state) را به صورت دستی مدیریت کردیم. همچنین از Media Queryهای CSS استفاده کردیم تا از اسکرول افقی در دستگاههای موبایل جلوگیری کنیم.
درسهای کلیدی:
- ساختن پروژه بدون فریمورک به شما میآموزد که فناوری وب در لایههای زیرین چگونه کار میکند.
- بهینهسازی عملکرد مهمتر از اضافه کردن ویژگیهای جدید است.
- تصمیمات اولیه در مورد طرحواره (schema) پایگاه داده بر کل پروژه تأثیر میگذارد.
- استقرار (Deployment) نیازمند مدیریت دقیق CORS و متغیرهای محیطی (environment variables) است.
این پروژه توسط پنج دانشجو از موسسه فناوری Ramgovind در Koderma، تحت هدایت آقای Ajay Kumar Dangi ساخته شده است.
وبسایت زنده: https://studentsphere0.netlify.app
گیتهاب فرانتاند: https://github.com/sumankumarsinghrajput/studentsphere-frontend
گیتهاب بکاند: https://github.com/sumankumarsinghrajput/studentsphere-backend
من یک سیستم مدیریت آکادمیک فولاستک برای کالجم ساختم - در اینجا نحوه انجام آن را میبینید
مدیریت یک کالج کار پیچیدهای است. از ثبتنام دانشجویان گرفته تا مدیریت نمرات و حضور و غیاب، همه چیز نیاز به دقت و سازماندهی دارد. در کالج من، بسیاری از این فرآیندها هنوز به صورت دستی یا با استفاده از سیستمهای قدیمی انجام میشد که باعث بروز خطا و اتلاف وقت میشد.
بنابراین، تصمیم گرفتم یک سیستم مدیریت آکادمیک (AMS) جامع بسازم که فرآیندهای اداری را خودکار و دیجیتالی کند.
چالشها و مشکلات
قبل از شروع، چند مشکل اصلی را شناسایی کردم:
- خطاهای انسانی: ثبت دستی نمرات و اطلاعات دانشجویان همیشه با ریسک خطا همراه است.
- دسترسی دشوار به دادهها: پیدا کردن سوابق یک دانشجو یا گزارش عملکرد یک استاد زمان زیادی میبرد.
- عدم شفافیت: دانشجویان و اساتید همیشه از آخرین وضعیت (مانند نمرات یا تغییرات برنامه) مطلع نبودند.
راه حل: سیستم مدیریت آکادمیک (AMS)
هدف من ساخت پلتفرمی بود که سه نقش اصلی داشته باشد: مدیر (Admin)، استاد (Teacher) و دانشجو (Student). هر نقش دسترسیهای خاص خود را خواهد داشت تا امنیت و سازماندهی دادهها حفظ شود.
تکنولوژیهای مورد استفاده (Tech Stack)
برای ساخت این پروژه، از مجموعه MERN استفاده کردم:
- MongoDB: به عنوان پایگاه داده NoSQL برای ذخیرهسازی منعطف دادههای دانشجویان، دورهها و نمرات.
- Express.js: برای مدیریت مسیرها (Routes) و منطق سمت سرور.
- React.js: برای ساخت یک رابط کاربری (UI) سریع، پویا و واکنشگرا.
- Node.js: به عنوان محیط اجرای سمت سرور.
علاوه بر این، از موارد زیر نیز استفاده کردم:
- JWT (JSON Web Tokens): برای احراز هویت امن.
- Redux/Context API: برای مدیریت وضعیت (State Management) در سمت کلاینت.
- Axios: برای برقراری ارتباط بین فرانتاند و بکاند.
ویژگیهای کلیدی
۱. پنل مدیریت (Admin Dashboard)
مدیر میتواند:
- کاربران جدید (اساتید و دانشجویان) ایجاد کند.
- دورهها و کلاسها را مدیریت کند.
- گزارشهای کلی از عملکرد سیستم دریافت کند.
۲. پنل استاد (Teacher Dashboard)
اساتید میتوانند:
- نمرات دانشجویان را وارد و ویرایش کنند.
- لیست حضور و غیاب را مدیریت کنند.
- منابع آموزشی و فایلها را آپلود کنند.
۳. پنل دانشجو (Student Dashboard)
دانشجویان میتوانند:
- نمرات و وضعیت تحصیلی خود را مشاهده کنند.
- در دورههای مختلف ثبتنام کنند.
- به منابع آموزشی دسترسی داشته باشند.
معماری سیستم
سیستم از معماری Client-Server پیروی میکند. فرانتاند با React به APIهایی که توسط Node.js و Express ساخته شدهاند درخواست میفرستد. دادهها در MongoDB ذخیره میشوند و برای امنیت، هر درخواست باید دارای یک توکن JWT معتبر باشد.
چالشها و یادگیریها
ساخت این پروژه چالشهای زیادی داشت، از جمله:
- طراحی مدلهای داده: طراحی ساختاری در MongoDB که هم منعطف باشد و هم روابط بین دانشجو، استاد و درس را به درستی حفظ کند.
- مدیریت وضعیت: هماهنگ کردن دادهها در تمام بخشهای اپلیکیشن با استفاده از React.
- امنیت: اطمینان از اینکه هر کاربر فقط به بخشهای مجاز خود دسترسی دارد.
نتیجهگیری
ساخت این سیستم مدیریت آکادمیک تجربهای فوقالعاده برای من بود. این پروژه نه تنها مهارتهای فنی من در زمینه MERN stack را تقویت کرد، بلکه به من آموخت که چگونه یک مشکل واقعی را با استفاده از کدنویسی حل کنم.
اگر سوالی دارید یا میخواهید در مورد بخش خاصی از پروژه صحبت کنیم، در کامنتها بپرسید!