Update Artikelilmiah: 50620

MAOLANA IMAMUL KHAQ

NIM

Judul Artikel

Abstrak (Bhs. Indonesia)

Perkembangan platform e-commerce di PT ABC memerlukan sistem pelacakan (tracking system) yang kompleks untuk memahami perilaku pengguna dan mengukur performa platform. Tim Data Analytics yang mengelola sistem tracking menghadapi kendala dalam pengelolaan data karena masih menggunakan platform Confluence yang menyebabkan pencarian informasi yang tidak efisien. Penelitian ini bertujuan mengembangkan aplikasi dashboard berbasis web bernama Tracker Management System (TRMS) menggunakan framework Vue.js 3 untuk menyediakan sistem terpusat dalam pengelolaan data tracker. Pengembangan aplikasi dilakukan menggunakan metodologi Agile Scrum dengan empat Sprint berdurasi dua minggu. Aplikasi dibangun dengan teknologi modern meliputi Vue.js 3 dengan state management Pinia, TailwindCSS untuk styling dan Blu Design System sebagai library UI internal. Optimasi performa aplikasi dilakukan melalui implementasi code splitting menggunakan metode defineAsyncComponent() dan route-level lazy loading, yang berhasil mengurangi ukuran file utama dari 2.08 MB menjadi 978 KB dengan menghasilkan 37 file chunk terpisah. Pengujian performa menggunakan Puppeteer dan Lighthouse menunjukkan peningkatan signifikan dengan skor performa naik dari 48 menjadi 65, First Contentful Paint (FCP) turun dari 3.4 detik menjadi 2.5 detik, dan Total Blocking Time (TBT) berkurang dari 330 milidetik menjadi 60 milidetik. Integration testing dilakukan menggunakan Playwright yang terintegrasi dengan pipeline CI/CD untuk memastikan aplikasi memenuhi standar code coverage minimal 92%. Hasil pengembangan mencakup fitur-fitur utama seperti dashboard tracker, submission system, serta fitur filtering, pencarian, dan detail log yang komprehensif.

Abtrak (Bhs. Inggris)

The development of e-commerce platforms at PT ABC requires a complex tracking system to understand user behavior and measure platform performance. The Data Analytics team managing the tracking system faced challenges in data management due to reliance on Confluence platform, which caused inefficient information retrieval. This research aims to develop a web-based dashboard application named Tracker Management System (TRMS) using Vue.js 3 framework to provide a centralized system for tracker data management. Application development was conducted using Agile Scrum methodology with four two-week Sprints. The application was built with modern technologies including Vue.js 3 with Pinia state management, TailwindCSS for styling, and Blu Design System as internal UI library. Application performance optimization was implemented through code splitting using defineAsyncComponent() method and route-level lazy loading, successfully reducing the main file size from 2.08 MB to 978 KB by generating 37 separate chunk files. Performance testing using Puppeteer and Lighthouse showed significant improvements with performance score increasing from 48 to 65, First Contentful Paint (FCP) decreasing from 3.4 seconds to 2.5 seconds, and Total Blocking Time (TBT) reducing from 330 milliseconds to 60 milliseconds. Integration testing was conducted using Playwright integrated with CI/CD pipeline to ensure the application meets the minimum code coverage standard of 92%.

Kata kunci

Pembimbing 1

Pembimbing 2

Pembimbing 3

Tahun

Jumlah Halaman