Perancangan Pengalaman Pengguna, Arsitektur dan Implementasi Frontend-Backend Sistem Manager Berbasis SCORM untuk Mendukung Penyusunan Konten E-Learning

Ketika pandemi Covid-19 berada di skala tertinggi, mendorong kebutuhan penggunaan e-learning menjadi meningkat dari sebelumnya bahkan menjadi hal yang semakin signifikan untuk dilakukan. Dalam pembuatan konten e-learning ini sifatnya tidak terstandar dan memiliki struktur yang berbeda – beda juga. Capstone yang dikembangkan ini diharapkan dapat memberikan solusi pembuatan konten e-learning yang terstandar dengan Scrom Lite yang dikembangkan menjadi sebuah sistem yang dapat membuat paket modul kuliah daring secara terstruktur, terpaket dan dapat distribusikan dalam Learning Management System (LMS) yang berbeda. Pengembangan ini dilakukan dengan framework ReactJS untuk frontend dengan peran utamanya dari sistem ini adalah pengajar. Sedangkan backend nya menggunakan metode pengujian white-box atau berbasis path. Sistem Scorm Lite juga sudah teruji dengan menggunakan User Acceptance Testing dan menunjukkan bahwa sistem sudah baik dari segi fungsionalitas dan tidak terdapat galat.

Alur pengalaman pengguna untuk berbagai mata pelajaran oleh pengajar yaitu:

  1. Penyusunan rencana pembelajaran yang dilakukan oleh pengajar agar masing – masing pembelajaran memiliki acuan pembelajaran yang terstruktur dan dapat dikelola secara terus menerus. Permasalahan terkait sistem manajemen untuk arsip semua rencana pembelajaran tersebut dapat menjadi potensi pertama yang diselesaikan sistem Scorm Lite.
  2. Pembuatan konten pembelajaran menggunakan media teks, gambar, video, penampilan berkas materi yang sudah dibuat sebelumnya dan pertanyaan formatif. Permasalahan ini menjadi potensi bagi pembuatan sistem yang bisa membantu penyusunan materi hanya dengan satu editor.
  3. Penyimpanan materi pembelajaran yang telah dibuat, hal tersebut dilakukan agar pengajar memiliki arsip pembelajaran yang akan digunakan untuk kegiatan belajar mengajar. Permasalahannya adalah ketika pengajar tidak yakin dengan format konten pembelajaran yang dibuat dapat kompatibel dengan LMS yang dituju. Sehingga permasalahan tersebut menjadi potensi Scorm Lite untuk membantu standarisasi format konten e-learning yang dibuat untuk berbagai LMS.
  4. Menyusun dan mengunggah konten LMS yang dituju. Permasalahannya adalah pengajar harus mengunggah berulang kali untuk semua rencana pembelajaran sehingga Scorm Lite digunakan untuk mempercepat proses pengunggahan hanya dengan satu paket SCORM.

Oleh karena itu, standar SCORM digunakan untuk memungkinkan konten e-learning dikemas dalam suatu paket yang kemudian dapat diunggah di berbagai jenis LMS maupun diunggah kembali di kelas baru dengan mempertahankan struktur bahar ajaran yang dibuat di awal tanpa perlu menyusun ulang. Adapaun dasar teori yang menjadi pendukung dalam pengembangan perancangan yang dibuat yaitu Sharable Content Object (SCO) yang digunakan sebagai blok membuat paket dan tidak dapat dipecah menjadi unit yang lebih kecil. Selain itu, SCO juga akan berisi dependensi atau aturan pengurutan yang dapat dilihat atau diputar di SCORM Run Time Environment (RTE). Dasar teori lainnya berupa beberapa bahasa pemrograman seperti HTML, CSS, juga Javascript. Secara khusus dari sisi frontend menangani logika dari presentasi aplikasi yang digunakan sesuai kebutuhan menggunakan bahasa – bahasa tersebut dan memastikan bahwa seluruh isi yang ada di dalam situs web atau aplikasinya tidak mengganggu kenyamanan para pengguna. Penggunaan Framework JavaScript digunakan juga sebagai fondasi dari pembuatan sebuah website ataupun software aplikasi sehingga prosesnya dapat terbangun dengan baik dan terstruktur. Sedangkan dari sisi backend menggunakan framework Express untuk membangun aplikasi web dan Application Programming Interface (API) yang berjalan di lingkungan runtime Node.js yang fungsinya untuk meminimalis dan unopinionated. Express tidak memiliki aturan standar dalam pembuatan file dan kode sehingga pengembang dapat menyesuaikannya dengan pola yang dipreferensikan. Tetapi sifat yang fleksibel juga dapat memunculkan tantangan yang tidak terdapat satu cara yang benar dalam menyusun aplikasi.

Authoring tool sebagai perangkat lunak yang memungkinkan pembuatan dan memanipulasi objek multimedia dan membantu dalam proses pembuatan konten digital. Sehingga tugas utamanya adalah membuat pengembangan konten lebih efisien. Dasar lainnya juga adalah MongoDB sebagai sistem manajemen basis data non relasional yang susunan data di dalamnya menggunakan dokumen berformat JSON sebagai alih – alih penggunaan tabel relasi dan memungkinkan penyusunan data yang tidak terperinci seperti mendefinisikan relasi antar dokumen.

Dalam memilih metode yang digunakan maka dilakukanlah analisis terhadap studi pustaka terutama untuk menganalisis format standar konten e-learning yang terdiri dari berbagai standar spesifikasi masing – masing. Sehingga untuk mengatasi permasalahan tersebut dilakukanlah konversi konten menjadi materi digital yang berisi materi pembelajaran, media visual dan pertanyaan. Studi pustaka pada bagian ini akan berfokus pada standar – standar konten e-learning yang sudah banyak digunakan seperti AICC(Aviation Industry Computer-Based Training Commitee) untuk mendorong atau mempromosikan pembelajaran online sekaligus mengurangi pelatihan digital dengan pengklasifikasian secara umum yaitu komunikasi server course dan definisi struktur course, SCORM (Sharable Content Object Reference Model) sebagai tempat kumpulan standar – standar teknis dari konten e-learning yang selanjutnya menggunakan API AICC, dan xAPI sebagai kontrol yang lebih terhadap konten dan independent dari JavaScript.

Dari segi analisis SCORM perlu memperhatikan komponen paket yang digunakan seperti manifest dari sebuah paket SCORM yang mendefinisikan deskripsi dan struktur konten dalam format XML yang terdiri dari beberapa bagian seperti resources, organizations juga metadata. Juga komponen lainnya seperti physical files yang berisi file – file yang direferensikan di dalam komponen resources. Serta komponen Package Interchange File (PIF) yang merupakan sebuah paket SCORM dalam format ZIP dan berada di root PIF. Untuk pengemasannya dalam dua mekanisme yaitu pengemasan konten dan komunikasi runtime.

Ketika menganalisis metode pengembangan aplikasi dapat menggunakan metode Waterfall sebagai perencanaan dan pembagian tugas yang jelas untuk masing – masing anggota tim. Tetapi metode ini kurang efektif dan seringkali hanya dipakai dalam pengembangan perangkat lunak atau sistem berskala besar. Metode scrum digunakan sebagai pengembangan produk yang bersifat agile yang meliputi perencanaan, desain arsitektur (high level), pengembangan (sprint), dan penutup. Kerangka kerja ini cocok apabila diterapkan pada tim berskala kecil dengan durasi proyek yang singkat. Penggunaan metode lain seperti lean startup merupakan metode pengembangan produk yang bertujuan untuk menghasilkan produk dalam waktu yang singkat dengan perilisan produk seperti iterative berupa Minimum Viable Product yang memenuhi syarat fungsional, dapat diandalkan, dapat digunakan, dan desain yang baik. Learn startup berorientasi pada pengguna dengan mempertimbangkan secara cepat dan memungkinkan pemilihan apabila terjadi kesalahan.

Perlu juga menganalisis dari sisi arsitektur perangkat lunak yang ingin dikembangkan dalam konten ini dipilihlah arsitektur monolitik. Kesederhanaan dalam proses pengembangannya dan deployment-nya tidak serumit persyaratan aplikasi Scorm Lite yang membuat arsitektur monolitik cocok untuk digunakan pada proyek ini. Apabila menggunakan arsitektur microservices, aplikasi akan cukup sulit untuk dikelola oleh dua orang atau lebih. Konflik yang dapat terjadi ketika proses pengembangan antar pengembang dapat ditanggulangi dengan penggunaan git dan version control. Sedangkan untuk pola arsitektur perangkat lunak terdapat client-server, master-slave, dan peer-to-peer. Secara khusus, pola arsitektur perangkat lunak yang digunakan untuk proyek ini adalah client-server untuk memudahkan pengembang agar hanya perlu membuat satu server khusus untuk penyediaan data dan layanan yang dibutuhkan oleh klien aplikasi. Kerangka kerja JavaScript yang dipilih untuk implementasi frontend dari sistem Scorm Lite adalah kerangka kerja React. Metode tersebut dipilih dengan mempertimbangkan komunitas dan kurva pembelajaran. Komunitas React menjadi komunitas yang paling banyak dari semua kerangka kerja JavaScript yang memungkinkan untuk mencari sumber pembelajaran lebih mudah karena variasi proyek yang lebih banyak. Penggunaan komponen di React yang juga intuitif sangat diperlukan untuk pengunaan komponen – komponen sistem Scorm Lite nantinya.

Spesifikasi aplikasi web Scorm Lite yang dikembangkan mencakup spesifikasi perangkat lunak dan spesifikasi fungsional aplikasi sebagai berikut.

  1. Frontend menggunakan Node.js, React, dan Create React APP sebagai antarmuka aplikasi web.
  2. Backend menggunakan Node.js dan Express yang berguna sebagai API untuk mengolah masukan atau memproses permintaan klien kemudian mengirimkan kembali hasilnya.
  3. Basis Data menggunakan MongoDB karena sistem manajemen basis data sifatnya non relasional.
  4. Pemutar Scorm menggunakan JavaScript karena pemutar paket SCORM digunakan untuk pratinjau konten pembelajaran daring sebelum diunduh.

Detail implementasi frontend terlihat setelah menyelesaikan rancangan user interface sistem dan menerima saran dari pengujian UI, penulis mengimplementasikan rancangan desain menjadi frontend web dari Scorm Lite yang ditampilkan dengan HTML untuk struktur kontennya, CSS untuk aspek desain, Javascript untuk logika aplikasinya, ReactJS sebagai kerangka kerja siis klien, dan Redux untuk manajemen state atau objek-objek tampilan yang dipakai. Komunikasi sisi frontend Scorm Lite sebagai client dengan server digunakan permintaan HTTP POST, GET, PUT, dan DELETE ke endpoint API layanan backend. Klien dapat memanggil permintaan – permintaan tersebut dan server akan menjalankan kueri data ke sistem basis data yang selanjutnya dikirim kembali ke klien. Pada proses permintaan dan penerimaan akan menggunakan library klien HTTP bernama Axios sebagai pengiriman ke endpoint dan menjalankan operasi Create, Read, Update dan Delete data. Frontend nantinya akan dapat diakses oleh pengguna dengan membuka tautan di peramban yang dimiliki perangkat. Sedangkan implementasi backend meliputi pembuatan logical database design yang terbagi atas empat entitas yaitu user, role, refresh token, dan course. Hubungan antara user dan role adalah many-to-many, di mana satu user bisa memiliki nol atau banyak role dan satu role bisa dimiliki oleh nol atau banyak user. Hubungan antara user dan refresh token adalah one-to-one, di mana satu user memiliki satu dan hanya satu refresh token dalam satu waktu, dan satu refresh token dimiliki oleh satu dan hanya satu user. Hubungan antara user dan course adalah one-to-many, di mana satu user bisa memiliki nol atau banyak course, tetapi satu course berada di dalam satu dan hanya satu user. Agar aplikasi yang dikembangkan dapat diakses secara public, sistem harus disebarkan melalui kegiatan deployment. Proses ini dilakukan dengan pengaturan library Webpack dan layanan Heroku. Pengaturan Webpack tersebut berkaitan dengan perubahan dari tiap proses pembuatan atau development ke tipe produksi atau production. Tipe konfigurasi untuk development dan production berbeda karena pada pembuatan aplikasi di perangkat penulis hanya menggunakan server local sedangkan pada fase produksi digunakan server di web lain. Pada proses pembuatan, kode aplikasi dibungkus dengan Webpack dan dijalankan dengan Webpack Dev Server yang selanjutnya dapat diakses pada peramban melalui localhost:8080. Maka proses deployment, dilakukan penaruhan kode di Heroku sebagai platform web hosting berbasis cloud. Pada Heroku nantinya dilakukan pengunduhan modul Node.js yang diperlukan dan pemanggilan server layanan backend.

Kesesuaian Scorm merupakan prasyarat untuk menjual produk di ruang e-learning karena dapat meningkatkan jumlah potensi penjualan secara ekonomi. Konten yang dapat diputar di mana saja jauh lebih bermanfaat dan lebih menarik bagi pelanggan. Ada ekosistem besar produk e-learning yang semuanya bekerja bersama karena SCORM. Menyusun konten e-learning dengan basis SCORM juga mampu mengurangi biaya pengintegrasian konten ke dalam LMS. Sequencing sebagai sebuah aspek yang cukup rumit untuk diterapkan oleh LMS dan dapat menjadi pekerjaan yang berlebihan bagi pembuat konten e-learning untuk diterapkan dalam situasi yang tidak perlu. Namun, bila diterapkan dengan tepat maka SCORM umumnya menghasilkan penghematan biaya yang besar. Walaupun masih terdapat banyak ruang untuk perbaikan dan peningkatan, aplikasi Scorm Lite dapat memudahkan pekerjaan pengajar dalam mengunggah konten e-learning dengan membantu pembuatan konten yang mematuhi Scorm.

 

Penulis:

  1.   Victoria Trinita Pardede – 18/425325/TK/47020
  2.   Virginia Putri Mori – 18/431410/TK/48003