ApparentlyAR: A Browser-Based Platform Integrating Block-Based Programming and Augmented Reality for Middle School Data Literacy Education

Tauran, Pascal Roger Junior (2026) ApparentlyAR: A Browser-Based Platform Integrating Block-Based Programming and Augmented Reality for Middle School Data Literacy Education. Other thesis, Institut Teknologi Sepuluh Nopember.

Text 5025211072-Undergraduate_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (9MB) | Request a copy

Abstract

Literasi data merupakan kompetensi yang penting, namun banyak siswa sekolah menengah menganggap analisis data bersifat abstrak dan kurang menarik. Proyek ini merancang dan membuat purwarupa ApparentlyAR, sebuah platform berbasis web yang memungkinkan siswa kelas delapan hingga sepuluh mengeksplorasi kumpulan data melalui antarmuka pemrograman berbasis blok yang dibangun di atas Google Blockly dan melihat hasilnya baik sebagai grafik dua dimensi (Chart.js) maupun adegan augmented reality tiga dimensi yang ditambatkan pada penanda fidusial (AR.js dan Three.js). Platform ini berjalan sepenuhnya di peramban, tidak memerlukan instalasi, dan dioptimalkan untuk perangkat keras sekolah kelas Chromebook. Arsitektur dua portal mendukung pengelolaan proyek oleh guru dan eksplorasi data oleh siswa. Evaluasi teknis mengonfirmasi kinerja yang dapat diterima pada perangkat keras target, dengan waktu muat halaman di bawah tiga detik dan laju bingkai augmented reality lima belas hingga dua puluh lima bingkai per detik. Tantangan utama yang diselesaikan selama pengembangan meliputi konflik aliran video antara AR.js dan MediaPipe, ketidakcocokan penyarangan blok Blockly, serta peralihan dari interaksi berbasis gestur ke interaksi berbasis penanda berdasarkan penelitian gorilla-arm. Purwarupa ini menunjukkan kelayakan penggabungan manipulasi data berbasis blok dengan visualisasi augmented reality spasial dalam alat pendidikan berbasis peramban yang mudah diakses. Implementasinya memasangkan back end Node.js dan Express.js dengan front end Google Blockly berisi lebih dari tiga puluh blok kustom dan adegan augmented reality A-Frame dan AR.js yang digerakkan oleh delapan penanda barcode cetak dan diterapkan melalui build Docker multi-tahap di Fly.io.
======================================================================================================================================
Data literacy is an essential competency, yet many middle schoolers find data analysis abstract and disengaging. This project designs and prototypes ApparentlyAR, a web-based platform that lets students in years 8 to 10 explore datasets through a block-based programming interface built on Google Blockly and view the results as both two-dimensional charts (Chart.js) and three-dimensional augmented reality scenes anchored to fiducial markers (AR.js and Three.js). The platform runs entirely in the browser with no installation, optimised for Chromebook-class school hardware. A dual-portal architecture supports teacher project management and student data exploration. Technical evaluation confirms acceptable performance on target hardware, with page loads under three seconds and augmented reality frame rates of fifteen to twenty-five frames per second. The main challenges resolved during development were a video stream conflict between AR.js and MediaPipe, Blockly block nesting incompatibilities, and a pivot from gesture-based to marker-based interaction informed by gorilla-arm research. The prototype demonstrates the feasibility of combining block-based data manipulation with spatial augmented reality visualisation in an accessible, browser-based educational tool. The implementation pairs a Node.js and Express.js back end with a Google Blockly front end of over thirty custom blocks. The augmented reality scene, built with A- Frame and AR.js, is driven by eight printed barcode markers, and the whole system deploys through a multi-stage Docker build on Fly.io.

Item Type:	Thesis (Other)
Uncontrolled Keywords:	Augmented Reality, Blockly, WebAR, Literasi Data, Pemrograman Berbasis Blok, Teknologi Pendidikan, Visualisasi Data, Block-Based Programming, Data Literacy, Data Visualisation, Educational Technology
Subjects:	L Education > LB Theory and practice of education > LB1044.87 Internet in education (e-learning). Virtual reality in education. L Education > LB Theory and practice of education > LB1603 Secondary Education. High schools L Education > LC Special aspects of education > LC156 Literacy Q Science > QA Mathematics > QA75 Electronic computers. Computer science. EDP
Divisions:	Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55201-(S1) Undergraduate Thesis
Depositing User:	Pascal Roger Junior Tauran
Date Deposited:	25 Jul 2026 09:10
Last Modified:	25 Jul 2026 09:10
URI:	http://repository.its.ac.id/id/eprint/138370

Actions (login required)

View Item