SPESIFIKASI TEKNIS
PA/ KPA : Badan Siber dan Sandi Negara
PPK : Unit Kerja Pusat Data dan Teknologi Informasi Komunikasi
PEKERJAAN : Perbaikan UI Kit serta Refractoring Platform DWS dan Platform
Layanan
LOKASI : Depok
TAHUN ANGGARAN : 2025
No UI Kit Lingkup Pekerjaan
1 UI Kit • Project Foundation – Inisialisasi Proyek Modul:
o Inisialisasi proyek modul, termasuk pengaturan dependensi dan
konfigurasi teknis yang diperlukan.
o Konektor Modul (Module Entry Point): Membangun entry point
(index.ts) untuk mengekspor konstanta, fungsi, rute, dan
komponen agar integrasi dengan proyek utama lebih lancar.
o Deklarasi Modul TypeScript (.d.ts): Penyediaan berkas deklarasi tipe
untuk mendukung kompatibilitas dan menjaga standar tipe data
TypeScript.
o Integrasi Proyek Modul: Menghubungkan dan menyesuaikan modul
agar dapat berfungsi dalam sistem terpadu proyek utama.
o Fungsi Bantu / Utility Functions: Fungsi TypeScript yang dapat
digunakan kembali, misalnya formatter, validator, dan converter.
o Tata Letak (Layouts): Struktur halaman untuk menjaga konsistensi
tampilan serta pengalaman pengguna.
o Komponen (Components): Komponen antarmuka berbasis Vue 3
dengan Tailwind, dilengkapi logika internal serta properti dan slot
yang fleksibel; tersedia 75 komponen yang dapat dikonfigurasi
sesuai kebutuhan.
o Rute (Routes): Konfigurasi rute dengan Vue Router, mencakup path,
guard, dan komponen halaman.
o Notifikasi Menu (Menu Badge Notification): Fitur notifikasi di menu
untuk menampilkan status proses atau aksi yang tertunda.
• Frontend Core Development:
o Models: Interfaces / types TypeScript untuk struktur data (misal:
UserData).
BADAN SIBER DAN SANDI NEGARA
Jln. Raya Muchtar Nomor 70, Bojong Sari Lama, Bojong Sari, Depok 16518
Telepon (021) 77973360, Faksimile (021) 78844104, 77973579
Website: https://www.bssn.go.id, E-mail: [email protected]
o Dummies / Mock Data: Data statis untuk keperluan demo dan
pengembangan lokal.
o Stores: Konfigurasi state management (Pinia) untuk data bersama
dan reaktivitas.
o Read Views: Halaman / tampilan untuk menampilkan data (daftar,
detail, dll.).
o Form Views: Form input dengan validasi dan logika submit untuk
memastikan data akurat dan proses berjalan dengan sukses.
• Project Support:
o Uji manual terhadap fungsionalitas sistem untuk memastikan modul
berjalan sesuai spesifikasi.
o Dokumentasi proyek sebagai panduan bagi pengembang.
Improvement & Enhancement: Melakukan pembaruan dan penyempurnaan
komponen UI Kit sesuai kebutuhan baru selama pengembangan DWS dan
Platform Layanan.
2 Platform DWS • Project Foundation – Inisialisasi Proyek Utama:
o Inisialisasi proyek utama yang menjadi fondasi integrasi modul,
termasuk autentikasi dan manajemen pengguna yang telah
tersedia.
o Integrasi Proyek Utama: Menyediakan konfigurasi dan infrastruktur
bersama agar setiap modul dapat terhubung dan beroperasi
secara terpadu.
o Fungsi Bantu / Utility Functions: Fungsi TypeScript yang dapat
digunakan kembali, seperti formatter, validator, dan converter.
o Tata Letak (Layouts): Struktur halaman dikonfigurasi untuk menjaga
konsistensi tampilan dan pengalaman pengguna.
o Rute (Routes): Konfigurasi rute dengan Vue Router, mencakup path,
guard, dan komponen halaman.
o Notifikasi Menu (Menu Badge Notification): Fitur notifikasi di menu
untuk menampilkan status proses atau aksi yang tertunda.
• Frontend Core Development:
o API Client Logic: Implementasi state management untuk mengelola
komunikasi dengan API secara terpusat.
BADAN SIBER DAN SANDI NEGARA
Jln. Raya Muchtar Nomor 70, Bojong Sari Lama, Bojong Sari, Depok 16518
Telepon (021) 77973360, Faksimile (021) 78844104, 77973579
Website: https://www.bssn.go.id, E-mail: [email protected]
o User Default Logic: Pengelolaan endpoint API, mock data, dan state
management untuk data dan status pengguna.
o Display Logic: State management untuk pengelolaan tampilan dan
interaksi pengguna.
o Notifikasi Menu Logic: State management untuk fitur notifikasi menu
agar status proses dapat ditampilkan secara real-time.
o Authentication: Endpoint API, mock data, dan state management
dengan 3 tampilan dan 5 formulir untuk mengelola autentikasi
pengguna.
o Default Page: Pengelolaan tampilan halaman default menggunakan
state management.
• Project Support:
o Uji Coba Fungsionalitas: Dilakukan uji manual terhadap
fungsionalitas sistem untuk memastikan setiap modul berjalan
sesuai spesifikasi.
• Dokumentasi Proyek sebagai acuan dalam pengelolaan dan
pengembangan proyek.
3 Platform • Project Foundation – Inisialisasi Proyek Utama:
Layanan o Inisialisasi proyek utama yang menjadi fondasi integrasi modul,
termasuk autentikasi dan manajemen pengguna yang telah
tersedia.
o Integrasi Proyek Utama: Menyediakan konfigurasi dan infrastruktur
bersama agar setiap modul dapat terhubung dan beroperasi
secara terpadu.
o Fungsi Bantu / Utility Functions: Mengembangkan fungsi TypeScript
yang dapat digunakan kembali, seperti formatter, validator, dan
converter.
o Tata Letak (Layouts): Menyusun struktur halaman untuk menjaga
konsistensi tampilan dan pengalaman pengguna.
o Rute (Routes): Mengonfigurasi rute menggunakan Vue Router,
mencakup path, guard, dan komponen halaman untuk navigasi
yang lancar.
• Core Development:
BADAN SIBER DAN SANDI NEGARA
Jln. Raya Muchtar Nomor 70, Bojong Sari Lama, Bojong Sari, Depok 16518
Telepon (021) 77973360, Faksimile (021) 78844104, 77973579
Website: https://www.bssn.go.id, E-mail: [email protected]
o API Client Logic: Mengimplementasikan state management untuk
mengelola komunikasi dengan API secara terpusat.
o User Default Logic: Mengelola endpoint API, mock data, dan state
management untuk data dan status pengguna.
o Authentication: Menyediakan endpoint API, mock data, dan state
management dengan 3 tampilan dan 5 formulir untuk pengelolaan
autentikasi pengguna.
o Default Page (Welcome, Not Found, Not Authorized Page):
Menyediakan 3 tampilan halaman default untuk navigasi dan
pengalaman pengguna.
• Project Support:
o Uji Coba Fungsionalitas: Dilakukan uji manual terhadap
fungsionalitas sistem untuk memastikan setiap modul berjalan
sesuai spesifikasi.
• Dokumentasi Proyek sebagai acuan dalam pengelolaan dan
pengembangan proyek.