Perpustakaan Digital ITB

Tugas akhir ini menghasilkan perangkat lunak untuk visualisasi pohon hierarki komponen web dari kode sumber Next.js page router. Terdapat dua opsi tampilan visualisasi, yaitu rute halaman saja atau rute halaman beserta hierarki komponen. Perangkat lunak ini ditargetkan untuk pengembang junior guna membantu memahami struktur perangkat lunak React/Next.js. React merupakan library pengembangan antarmuka web berbasis komponen. React saat ini banyak digunakan bersamaan dengan framework Next.js untuk mempermudah proses pengembangan. Karakteristik komponen React yang modular serta penentuan rute halaman berbasis file-system pada Next.js dapat menyebabkan kode sumber menjadi kompleks seiring dengan bertambah besarnya aplikasi web. Visualisasi perangkat lunak memiliki peran yang penting dalam membantu pengembang memahami struktur aplikasi web. Saat ini terdapat tiga library populer untuk melakukan visualisasi React/Next.js, yaitu React Developer Tools, Next Route Visualizer, dan React Bratus. Belum ada library yang mampu menampilkan visualisasi rute halaman beserta komponen dari kode sumber Next.js page router. Pengembangan dilakukan dengan tiga tahapan, yaitu data acquisition, analysis, dan visualization. Tahap data acquisition menggunakan Node File System untuk mengekstraksi kode sumber. Esktraksi dilakukan dengan mencari file React. Tahap analysis menggunakan Babel Parser. Pada tahap ini dilakukan parsing untuk mendapatkan hierarki komponen dan hierarki rute halaman. Tahap visualization menggunakan React Flow untuk menampilkan visualisasi. Pengujian dilakukan dengan membandingkan hasil visualisasi dengan kode sumber. Masukan pengujian berupa web reddit clone yang diambil dari repositori publik. Keluaran pengujian adalah hasil visualisasi rute halaman dan komponen di dalamnya. Hasil pengujian menunjukkan bahwa visualisasi yang dihasilkan sudah sesuai dengan kode sumber Next.js.