Magic Button merupakan sebuah platform berbasis website untuk mempermudah mahasiswa untuk bergabung kedalam video conference. Platform ini dibangun dengan stack teknologi MERN (MongoDB, Express.js, React, dan Node.js)
| Deskripsi Singkat | User Analysis | Lingkungan Pengembangan | Konsep OOP | Tipe Desain Pengembangan | Hasil dan Pembahasan | Hasil Implementasi | Developer dan Jobdesc | Saran | Link Pendukung |
|---|
Magic Button merupakan fitur untuk mempermudah mahasiswa untuk masuk kedalam video conference. Mahasiswa tidak perlu pusing untuk mencari link video conference yang ada di masing- masing grup kuliah atau praktikum dimana sering sekali tertimbun chat. Fitur ini menyesuaikan jadwal tiap mahasiswa dan dosen, sehingga apabila sudah waktunya kelas, mahasiswa dan dosen hanya perlu menekan satu tombol di halaman utama dan mereka akan langsung masuk ke dalam kelas online yang sudah disediakan oleh sistem. Tombol tersebut akan membawa pengguna ke dalam link video conference yang benar sesuai jadwal mereka saat itu. Fitur selanjutnya yaitu fitur history video conference yang sudah pernah dihadiri beserta link rekaman dari video conference tersebut sesuai dengan jadwal tiap mahasiswa. Terdapat pula fitur tambahan lain seperti notifikasi pengingat yang muncul setiap kelas virtual akan dimulai dan fitur presensi otomatis setiap mahasiswa mengklik tombol “Magic Button”.
- Saya sebagai mahasiswa, saya ingin bergabung dengan kelas virtual tanpa ribet sehingga saya dapat fokus memperhatikan materi kuliah.
- Saya sebagai mahasiswa, saya ingin melihat kembali rekaman ulang mata kuliah secara lebih mudah dan lengkap.
- Saya sebagai mahasiswa, saya ingin mendapat notifikasi pengingat setiap kelas virtual akan dimulai sehingga saya tidak melewatkan kelas karena lupa.
- Saya sebagai mahasiswa, saya ingin presensi dilakukan otomatis setiap menghadiri kelas virtual sehingga saya tidak melewatkan presensi karena lupa.
Aplikasi ini hanya digunakan oleh mahasiswa, dosen, dan pengurus. Digunakan untuk keperluan perkuliahan daring secara synchronous.
Software
- Visual Studio Code
- Postman
Hardware
- Processor : Intel core i5-8300
- RAM : 8GB
- VGA : NVIDIA GTX 1050
Tech Stack
- Next.js (Front-end)
- Express.js (Back-end)
- MongoDB (DBMS)
Abstraction
Abstraction adalah prinsip yang menyembunyikan detail implementasi fungsi ataupun prototype, sehingga saat pemanggilan fungsi, pengembang tidak perlu tahu cara kerja fungsi tersebut secara detail. Penerapan konsep abstraction pada aplikasi ini adalah pada fungsi middleware verifyRole(), pengembang hanya tinggal memasukkan role yg ingin diverifikasi pada parameter untuk memverifikasi apakah role tersebut sesuai dengan token auth user.
Inheritance
Inheritance adalah konsep OOP dimana kita dapat membentuk class baru yang “mewarisi” atau memiliki bagian-bagian dari class yang sudah ada sebelumnya. Konsep ini menggunakan sistem hirarki atau bertingkat. Pada aplikasi ini contohnya adalah kelas Link yang memiliki child class Vidcon & Record.
Polymorphism
Polymorphism adalah konsep dimana suatu objek yang berbeda-beda dapat diakses melalui interface yang sama. Sebuah objek yang polymorphic dapat beradaptasi dengan metode apapun yang diimplementasikan pada objek tersebut, dan setiap class memiliki interpretasinya tersendiri terhadap interfacenya. Pada aplikasi ini contohnya adalah kelas Vidcon yang memiliki method create Link yang diwariskan dari parent class Link tetapi dengan cara yang berbeda dari kelas Record.
MVC
Dalam mengembangkan aplikasi ini, kelompok kami menggunakan pattern MVC (Model View Controller) yang dimana sistem pengembangan aplikasi tersebut akan dipecah menjadi tiga bagian, yaitu model (database), view (tampilan/ui) dan yang terakhir controller (interaksi model dan view). Model digunakan untuk menginterpretasikan entitas dan atributnya ke dalam database. Controller digunakan sebagai metode dari model untuk memproses data, seperti menyimpan ke dalam database ataupun melakukan fetch terhadap API IPB. View digunakan untuk menampilkan data yang diperlukan
Factory Pattern
Pattern ini adalah salah satu creational design pattern yang menyediakan interface pembuatan objek pada superclass, tetapi juga membolehkan subclass untuk mengubah tipe pembuatan objek tersebut. Penerapannya dalam aplikasi ini terletak pada method createLink pada superclass Link yang diwariskan kepada subclass Record dan Vidcon, namun kedua subclass tersebut dapat memiliki pendekatan yang berbeda dalam method pembuatan objek Link tersebut.
Fungsi utama yang dikembangkan adalah tombol join untuk masuk kedalam video conference sesuai dengan jadwal yang dimiliki oleh mahasiswa sekaligus menambahkan presensi pada jadwal tersebut.
- CRUD Akun Admin
- CRUD Link Rekaman
- CRUD Link Meeting
Halaman Login
Halaman Utama
Halaman Jadwal Mahasiswa
Halaman Daftar Semua Rekaman Mata Kuliah
Halaman Daftar Semua Rekaman Per Paralel
Halaman Admin Insert Link Rekaman
Halaman Admin Insert Link Meeting
Front-end : http://frontend-magic-button.vercel.app/
Back-end : https://psbo-magic-button.herokuapp.com/
Sistem yang kami gunakan belum mendapat rincian tentang informasi pertemuan keberapa yang dihadiri oleh mahasiswa. Diharapkan untuk pengembangan lebih lanjut terdapat detail spesifik tentang pertemuan yang sedang dihadiri oleh mahasiswa. Selain itu, dapat juga ditambahkan fitur interface untuk pengguna asisten praktikum dan dosen. Implementasi dalam bentuk aplikasi mobile juga dapat menjadi domain pengembangan selanjutnya, dengan penambahan fitur notifikasi jadwal terdekat.
| Nama | NIM | Role |
|---|---|---|
| Indra Rizky Gunawan | G64180010 | UI/UX |
| M. Dwiki Ramdhani | G64180032 | Front-end |
| Ihsan Firdaus | G64180054 | Front-end |
| Sultan Fariz | G64180086 | Back-end |
| Fathi Annaufal Soblia | G64180094 | Back-end |
https://ipb.link/figma-psbo-kel-9
https://github.com/sultanfariz/backend-magic-button