Saya Membangun Sistem Manajemen Akademik Full Stack
Kampus saya menggunakan buku absen kertas untuk kehadiran dan lembar Excel untuk nilai. Pengumuman hanya ditempel di papan fisik. Tim saya memutuskan untuk mendigitalisasi seluruh proses ini.
Kami membangun Student Sphere.
Sistem ini menggunakan tiga dashboard yang berbeda:
Dashboard Mahasiswa:
- Melihat kehadiran dan kelayakan
- Mengecek nilai
- Mengunduh catatan pelajaran
- Mengumpulkan tugas secara digital
- Melihat pengumuman semester
Dashboard Dosen:
- Memperbarui kehadiran dan nilai
- Mengunggah catatan dan laporan praktikum
- Menetapkan tenggat waktu tugas
- Mengunggah pengumuman ke semester tertentu
- Meninjau pengumpulan tugas mahasiswa
Dashboard Admin:
- Menyetujui pendaftaran baru
- Mengelola akun pengguna
- Menaikkan tingkat seluruh semester
- Melihat statistik sistem
- Mengelola semua pengumuman
Technical Stack:
Frontend:
- HTML5, CSS3, dan Vanilla JavaScript
- Tanpa framework seperti React atau Vue
- Satu file CSS untuk semua halaman
- Desain responsif dari perangkat seluler hingga layar 4K
Backend:
- Node.js dan Express.js v5
- Autentikasi JWT
- Hashing kata sandi Bcrypt
- REST API dengan 30+ endpoint
Database dan Deployment:
- MongoDB Atlas
- Frontend di-host di Netlify
- Backend di-host di Render
- Aplikasi Android dibangun dengan Java melalui WebView
Kami menghadapi dua kendala teknis utama.
Tantangan 1: Performa API
Dashboard dosen awalnya melakukan 46 panggilan API terpisah untuk memuat data mahasiswa. Hal ini menyebabkan penundaan selama 14 detik. Saya mengganti panggilan individual tersebut dengan satu query MongoDB $in. Ini secara signifikan mengurangi waktu pemuatan.
Tantangan 2: Single Page Application tanpa React Kami membangun SPA berbasis peran hanya dengan menggunakan vanilla JavaScript. Kami mengelola routing dan state secara manual. Kami menggunakan media query CSS untuk memastikan tidak ada scrolling horizontal pada perangkat seluler.
Pelajaran Penting:
- Membangun tanpa framework mengajarkan Anda bagaimana teknologi web bekerja di balik layar.
- Optimasi performa lebih penting daripada menambah fitur baru.
- Keputusan skema database di awal berdampak pada seluruh proyek.
- Deployment memerlukan pengelolaan CORS dan environment variables yang cermat.
Proyek ini dibangun oleh lima mahasiswa dari Ramgovind Institute of Technology, Koderma, di bawah bimbingan Bapak Ajay Kumar Dangi.
Situs Web Live: https://studentsphere0.netlify.app
GitHub Frontend: https://github.com/sumankumarsinghrajput/studentsphere-frontend
GitHub Backend: https://github.com/sumankumarsinghrajput/studentsphere-backend
- Saya membangun sistem manajemen akademik full-stack untuk kampus saya - inilah caranya
Menjadi mahasiswa itu sulit. Di antara tugas kuliah, ujian, dan kehidupan sosial, mengelola administrasi akademik bisa menjadi mimpi buruk. Itulah sebabnya saya memutuskan untuk membangun sesuatu yang berguna: sebuah Sistem Manajemen Akademik (AMS) full-stack untuk kampus saya.
Dalam artikel ini, saya akan membagikan perjalanan saya, teknologi yang saya gunakan, fitur-fitur yang saya implementasikan, dan pelajaran yang saya dapatkan.
Tech Stack yang Digunakan
Untuk membangun aplikasi ini, saya memilih stack MERN karena fleksibilitas dan skalabilitasnya:
- MongoDB: Database NoSQL untuk menyimpan data pengguna, kursus, dan nilai secara fleksibel.
- Express.js: Framework backend untuk menangani routing dan logika server.
- React.js: Library frontend untuk membangun antarmuka pengguna yang responsif dan dinamis.
- Node.js: Runtime lingkungan untuk menjalankan JavaScript di sisi server.
Selain itu, saya juga menggunakan:
- Tailwind CSS: Untuk styling yang cepat dan modern.
- JWT (JSON Web Tokens): Untuk autentikasi yang aman.
- Axios: Untuk melakukan permintaan HTTP dari frontend ke backend.
Fitur Utama
Sistem ini dirancang untuk memenuhi kebutuhan berbagai peran di kampus:
1. Autentikasi dan Otorisasi
Pengguna dapat mendaftar dan masuk dengan peran yang berbeda: Admin, Dosen, dan Mahasiswa. Setiap peran memiliki akses yang berbeda ke fitur-fitur tertentu.
2. Dashboard Berbasis Peran
- Admin: Dapat mengelola pengguna (mahasiswa/dosen), menambahkan mata kuliah, dan melihat statistik keseluruhan.
- Dosen: Dapat mengelola mata kuliah yang mereka ajar, memberikan nilai, dan mencatat absensi.
- Mahasiswa: Dapat melihat jadwal kuliah, nilai, dan riwayat absensi mereka.
3. Manajemen Mata Kuliah dan Kursus
Admin dapat melakukan operasi CRUD (Create, Read, Update, Delete) pada mata kuliah, serta menetapkan dosen ke mata kuliah tersebut.
4. Sistem Absensi dan Penilaian
Dosen dapat mencatat kehadiran mahasiswa secara real-time dan menginput nilai ujian atau tugas yang akan langsung terlihat di dashboard mahasiswa.
Arsitektur Sistem
Backend (API)
Saya membangun RESTful API menggunakan Node.js dan Express. Setiap endpoint dilindungi oleh middleware JWT untuk memastikan hanya pengguna yang terautentikasi yang dapat mengakses data sensitif.
Frontend (UI)
Frontend dibangun dengan React, menggunakan React Router untuk navigasi antar halaman. Saya menggunakan state management (seperti useState dan useEffect) untuk mengelola data yang diambil dari API.
Tantangan yang Dihadapi
Salah satu tantangan terbesar adalah menangani relasi data dalam database NoSQL. Karena MongoDB tidak memiliki relasi join seperti SQL, saya harus merancang skema dokumen dengan hati-hati agar data tetap konsisten namun tetap efisien saat diambil.
Selain itu, mengimplementasikan sistem otorisasi berbasis peran (RBAC) membutuhkan ketelitian agar mahasiswa tidak bisa mengakses fitur admin melalui manipulasi request.
Pelajaran yang Didapat
Proyek ini mengajarkan saya banyak hal:
- Pentingnya perencanaan skema database sebelum menulis kode.
- Bagaimana mengelola state yang kompleks di frontend.
- Keamanan API adalah prioritas utama.
Kesimpulan
Membangun sistem manajemen akademik ini bukan hanya tentang menulis kode, tetapi tentang memecahkan masalah nyata. Ini adalah proyek yang menantang namun sangat memuaskan.
Jika Anda tertarik untuk melihat kode sumbernya, silakan cek repositori GitHub saya!