Portal Belajar GT2 Unilever — E-Learning & SCORM 1.2 Simulation System

PeranE-Learning Systems Lead & Front-End Developer

Periode2025

Status RilisProduction Deployed

Peringkat DampakTop Tier #1

Demo Walkthrough Simulasi Modul GT2 UnileverInteractive Demo

Video simulasi interaktif alur pelatihan Direct Sales Representative (DSR) Unilever tanpa server LMS eksternal.

01. Ringkasan Eksekutif & Konteks

Portal Belajar GT2 Unilever adalah sistem pembelajaran mandiri responsif yang menyajikan materi Tugas dan Tanggung Jawab Direct Sales Representative (DSR) Unilever melalui modul interaktif Adobe Captivate dan video simulasi tanpa ketergantungan server LMS eksternal.

Tenaga penjual (sales force) Unilever lini General Trade memerlukan standarisasi pelatihan rutin mengenai prosedur kunjungan toko, penataan display produk (merchandising), dan pencapaian target penjualan langsung di berbagai daerah.

02. Masalah Operasional & Kendala Teknis

Akar Masalah yang Dihadapi:

Modul interaktif Adobe Captivate standar mensyaratkan infrastruktur LMS enterprise yang lambat diakses lewat jaringan seluler lapangan, dan sering memunculkan error fatal "unable to acquire LMS API" saat dibuka di luar server LMS berbayar.

Batasan & Hambatan Proyek:

⚠Wajib kompatibel penuh dengan panggilan fungsi runtime Adobe Captivate HTML5 (LMSInitialize, LMSGetValue, LMSSetValue, LMSCommit, LMSFinish).
⚠Pengguna lapangan mengakses materi menggunakan beragam varian browser ponsel dengan kondisi sinyal seluler fluktuatif.

03. Target & Sasaran Eksekusi

Target 01

Menghilangkan ketergantungan server LMS eksternal dengan mengimplementasikan SCORM 1.2 browser API shim mandiri langsung di browser client.

Target 02

Menyediakan antarmuka web modern yang ringan, cepat dimuat (< 1.5 detik), dan responsif penuh pada peramban smartphone salesman di lapangan.

Target 03

Mengintegrasikan 2 modul interaktif SCORM dan video walkthrough simulasi ke dalam satu portal terpadu berbasis hash routing.

04. Tanggung Jawab & Kolaborasi Tim

Tanggung Jawab Utama PM:

→Merancang dan mengimplementasikan client-side SCORM 1.2 API shim (window.API) in-memory untuk memfasilitasi handshake modul Captivate.
→Membangun shell antarmuka portal responsif bergaya Shadcn UI dengan drawer navigasi mobile dan penjejak breadcrumb.
→Mengonfigurasi deployment edge Cloudflare untuk memastikan latensi akses aset modul interaktif di bawah 50ms di seluruh Indonesia.

Stakeholder & Tim Terkait:

•1 E-Learning Systems Lead & Front-End Developer (Rizal)
•1 Instructional Designer & Content Specialist
•Unilever Field Training Managers & Direct Sales Representatives

05. Keputusan Arsitektur & Trade-Offs

Keputusan #1:Menerapkan in-memory SCORM 1.2 shim pada obyek window.API di parent window.

Rasionalisasi: Mengeliminasi pesan dialog kegagalan LMS dari Adobe Captivate sekaligus meniadakan biaya server LMS enterprise bulanan.

Trade-off: Data interaksi dan nilai kuis tersimpan secara lokal selama sesi browser aktif dan tidak direkap ke database HR terpusat.

Keputusan #2:Mendistribusikan seluruh aset statis dan media video melalui jaringan CDN Cloudflare.

Rasionalisasi: Memastikan kecepatan buka slide tetap responsif dan lancar bahkan saat diakses melalui koneksi seluler 3G/4G di pelosok.

Trade-off: Pembaruan berkas materi memerlukan pembersihan (purge) cache CDN secara terprogram saat rilis konten baru.

06. Roadmap Eksekusi & Hasil per Fase

FaseFase 1: Rekayasa SCORM Shim & Pengujian Runtime

DeliverableSpesifikasi SCORM 1.2 Shim & Validasi Captivate API Handshake

HasilModul Captivate berhasil dibuka dan berinteraksi mulus tanpa dialog error LMS.

FaseFase 2: UI Portal & Integrasi Media Interaktif

DeliverablePortal responsif mobile, drawer navigation, dan modul video player

HasilNavigasi materi terstruktur dengan tampilan bersih dan ramah layar sentuh.

FaseFase 3: Optimasi Edge CDN & Live Production

DeliverablePenyebaran domain unilever.riizalhp.web.id dengan konfigurasi Cloudflare

HasilPortal beroperasi secara stabil dengan waktu respons super cepat di lingkungan live.

07. Hasil Terverifikasi & Dampak Nyata

✓

Berhasil meniadakan ketergantungan pada server LMS enterprise berbiaya lisensi tinggi untuk pelatihan mandiri DSR.

✓

Mempercepat pemuatan materi ajar menjadi di bawah 1.5 detik dengan navigasi yang sangat praktis di smartphone.

✓

Menjadi blueprint arsitektur mandiri bagi penyajian modul SCORM interaktif korporasi modern.

08. Retrospektif & Pembelajaran

💡Memahami spesifikasi teknis format standar industri (seperti SCORM) membuka peluang inovasi rekayasa browser shim yang menghemat biaya server secara signifikan.