Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Perancangan Aplikasi SARAMA Untuk Siswa Yayasan Al-Bayyinah Muhammad Nasser Akbar1.
Narti2*.
Rangga Pebrianto3 1 ,2,3Sistem Informasi.
Universitas Bina Sarana Informatika Indonesia * Corresponding Author.
E-mail: narti.
nrx@bsi.
Abstract - Learning technology provides new opportunities to improve the effectiveness of learning, especially in early childhood Islamic religious education.
In practice, the Al-Bayyinah Foundation still faces limitations in interactive learning media that are able to attract children's interest in the process of learning religious materials, including memorizing ablution and prayer recitations, so that learning still tends to be carried out conventionally.
This study aims to create an innovation, namely designing and developing interactive learning media as a supporting medium for memorizing ablution and prayer recitations for children.
The research methods used include the design stage, application development, and testing system functionality.
The results of the study are in the form of the SARAMA application for interactive learning equipped with features for memorizing ablution materials, memorizing prayers, quizzes, as well as interesting visual and audio elements.
Keywords: SARAMA.
Application.
Interactive Learning Media Abstrak Ae Teknologi pembelajaran memberikan peluang baru dalam meningkatkan efektivitas pembelajaran, khususnya pada pendidikan agama Islam anak usia dini.
Pada Yayasan AlBayyinah dalam praktiknya masih menghadapi keterbatasan media pembelajaran interaktif yang mampu menarik minat anak dalam proses pembelajaran materi agama, di antaranya hafalan wudhu dan bacaan sholat, sehingga pembelajaran masih cenderung dilakukan secara Penelitian ini bertujuan untuk menciptakan sebuah inovasi yaitu merancang dan mengembangkan media pembelajaran interaktif sebagai media pendukung untuk hafalan wudhu dan hafalan bacaan sholat untuk anak.
Metode penelitian yang digunakan meliputi tahap perancangan, pengembangan aplikasi, serta pengujian fungsionalitas sistem.
Hasil dari penelitian berupa aplikasi SARAMA untuk pembelajaran interaktif yang dilengkapi dengan fitur materi hafalan wudhu, hafalan sholat, kuis, serta elemen visual dan audio yang menarik.
Kata Kunci: SARAMA.
Aplikasi.
Media Belajar Interaktif Introduction Yayasan Bayyinah Jakarta merupakan salah satu lembaga pendidikan yang berfokus pada pembelajaran agama Islam bagi anak-anak.
Berdasarkan hasil observasi awal, metode pembelajaran yang diterapkan konvensional, khususnya dalam proses penghafalan bacaan wudhu dan sholat.
Proses pembelajaran yang bertumpu pada metode ceramah dan pengulangan teks secara monoton
menyebabkan sebagian anak mengalami kejenuhan, sehingga minat belajar dan daya
serap terhadap materi keagamaan cenderung Berdasarkan permasalahan tersebut, pengembangan aplikasi media pembelajaran interaktif SARAMA (Sahabat Ramah Muslim
Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Ana.
Aplikasi ini dirancang untuk membantu anak-anak dalam menghafal bacaan wudhu dan bacaan sholat melalui tampilan animasi, ilustrasi visual, serta audio narasi yang mudah Selain itu, aplikasi SARAMA dilengkapi dengan fitur kuis yang terdiri dari tiga tingkat kesulitan untuk mengevaluasi pemahaman dan hafalan anak secara bertahap.
Dalam proses pengembangan aplikasi SARAMA, digunakan model pengembangan sistem Waterfall.
Model ini dipilih karena memiliki tahapan yang sistematis dan pengembangan aplikasi pembelajaran.
Tahapan Waterfall perancangan sistem, implementasi, pengujian, dan pemeliharaan.
Pada tahap analisis, dilakukan identifikasi kebutuhan pengguna dan materi pembelajaran.
Tahap perancangan mencakup pembuatan storyboard, flowchart, serta desain antarmuka aplikasi.
Tahap mengembangkan aplikasi menggunakan Adobe Animate.
Selanjutnya, tahap pengujian dilakukan melalui metode Black Box dan White Box untuk memastikan fungsi aplikasi berjalan dengan baik.
Tahap terakhir adalah pemeliharaan, yang bertujuan untuk melakukan perbaikan bug serta pengembangan konten di masa mendatang.
Secara etimologis multimedia tersusun dari dua kata, yaitu multi dan media.
Multi yang berarti banyak atau jamak, sedangkan media berarti sarana sebagai bentuk penyampaian pesan atau informasi seperti teks, gambar, suara, maupun video.
Multimedia secara istilah Bahasa adalah kombinasi beberapa media seperti teks, gambar, suara, maupun video yang digunakan sebagai sarana Vol 14 No.
1 Maret 2026 (Surjono, 2.
AuAplikasi multimedia pembelajaran interaktif meliputi aktivitas atau interaksi siswa dengan mengklik tombol navigasi seperti next, back, atau home.
Ay(Surjono, 2.
Dengan pembelajaran interaktif menciptakan interaksi yang efektif dua arah antara guru dan siswa.
Dengan adanya sumber daya seperti video, permainan edukatif, simulasi computer, dan penyedia layanan daring yang memungkinkan siswa belajar secara aktif dan terlibat dalam proses pembelajaran.
(Faturrokhman, 2.
Materials and Methods Pengembangan media interaktif dapat dilandasi dengan pemikiran bahwa aktivitas belajar akan berlangsung dengan efektif, baik dan menyenangkan, serta dapat menarik Penggunaan perangkat komputer atau android cenderung lebih digemarik oleh anak-anak melalui metode pembelajaran interaktif (Fikri & Madona, 2.
Menurut Farastuti .
mendefinisikan AuAnimasi adalah karya seni yang menghidupkan objek atau karakter melalui gambar terurut yang disajikan dengan kecepatan tinggiAy(Alkodri et al.
, 2.
Media animasi adalah gambar ataupun grafik bergerak yang hasilkan dengan cara merekam beberapa gambar, dan diputar ulang secara berurut sehingga tidak terlihat seperti gambar yang terpisah, melainkan sebagai kesatuan yang menghasilkan pergerakan yang tidak terputus.
(Daniati et al.
, 2.
Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Melalui metode kreatif dan interaktif, beberapa fitur seperti penanaman suara dan membuat anak lebih bisa bereksplorasi, video, grafik raster, teks, dan Action menemukan, serta memanfaatkan objek-objek Script.
(Murthado & Suharsono, 2.
terdekat sebagai pembelajaran yang bermakna.
Black Box testing adalah pengujian Dan melalui metode ini orang tua maupun guru funsionalitas pada perangkat lunak yang dapat berkontribusi dalam membangun dilakukan oleh penguji yang berinteraksi generasi muda yang memiliki pemahaman dengan antarmuka sistem dengan memberikan dan input serta memeriksa output tanpa mengetahui mengaplikasikannya dalam kehidupan sehari- cara kerja dan di mana input dikerjakan (Putri (Ariyanti & Rahmawati, 2.
et al.
, 2.
Menurut Joo .
AuUser Interface Perancangan storyboard dilakukan adalah interaksi antara system dengan sebagai langkah awal untuk memvisualisasikan seperti alur dan tampilan setiap scene dalam animasi menggunakan konten dan memasukan data.
interaktif SARAMA.
Storyboard berfungsi User Experience disebut sebagai pengalaman sebagai panduan produksi yang memuat urutan pengguna terkait dengan, perilaku, reaksi, gambar, deskripsi adegan, interaksi pengguna, emosi dan pikiran saat menggunakan systemAy.
serta transisi antarhalaman.
Melalui storyboard (Hartawan, 2.
ini, penulis dapat memastikan bahwa setiap Actionscript bahasa materi seperti hafalan wudhu, hafalan sholat, pemrograman yang terdapat pada perangkat serta fitur kuis tersusun secara sistematis dan lunak Adobe flash player dan Adobe AIR.
mudah dipahami.
Selain itu, storyboard Bahasa pemrograman actionscript sangat membantu mengidentifikasi kebutuhan visual interaktif dalam menangani data, dan banyak dan navigasi sebelum proses animasi dimulai, digunakan pada Flash.
Flex dan AIR baik sehingga pengerjaan menjadi lebih terarah, dalam bentuk konten ataupun aplikasi.
konsisten, dan sesuai dengan tujuan Actionscript dieksekusi pembelajaran yang telah ditetapkan.
Berikut menggunakan Actionscript Virtual Machine beberapa story board yang telah dirancang:
(AVM), yang merupakan bagian dari Flash dan 1.
Storyboard Opening AIR.
Bahasa pemrograman ini sangat familiar Berikut adalah storyboard opening dengan para developer karena kemampuannya dalam aplikasi SARAMA:
Tabel 1.
Storyboard Opening yang minim terhadap Object Oriented Visual Sketsa Audio Programming (OOP) (Prahasti et al.
, 2.
Nacreativestudios Ketika aplikasi dijalankan.
Adobe Animate merupakan sebuah akan muncul scene bumper perangkat lunak yang berfungsi sebagai berupa logo AuNA Creative StudioAy, yang merupakan logo Adobe Animate watermark dari pengembang.
merupakan versi terbaru dari Adobe Flash.
Fungsi utama dari Adobe Animate ini adalah Storyboard Menu Opening membuat gambar yang bergerak secara Berikut adalah Storyboard Menu berurutan hingga membentuk sebuah animasi.
Opening dalam aplikasi SARAMA:
Selain itu software ini juga mendukung Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Tabel 2.
Storyboard Menu Opening Visual Sketsa Audio Backsound.
Setelah opening bumper dijalankan selama 3 detik, scene akan berpindah ke menu opening aplikasi.
Buttonclick.
Wudhu dalam aplikasi SARAMA:
Tabel 3.
Storyboard Main Hafalan Wudhu Visual Sketsa Setelah user memilih tombol Hafalan Wudhu, scene akan beralih ke Hafalan Wudhu.
Audio Buttoncli User bisa menekan tombol play untuk memutar audio narrator yang menjelaskan bacaan doa wudhu, beserta terjemahannya.
Audio Backsound.
Terdapat 3 level dengan kesulitan yang berbeda Setelah user memilih level makauser akan disuguhkan 20 soal acak dan 4 jawaban dengan durasi waktu 1 menit persoal.
Dan tombol bisukan untuk membisukan music jika user merasa terganggu dengan musik.
Backsoundqu Jika user menjawab soal dengan jawaban yang benar, maka akan muncul pop up animasi jawaban benar beserta suara narator, lalu akan dialihkan ke soal Backsoundqu Jika user menjawab soal dengan jawaban yang benar, maka akan muncul pop up animasi jawaban salah beserta suara narator, lalu akan dialihkan ke soal User juga apat mengklik tombol next atau prev untuk melanjutkan hafalan atau kembali ke hafalan sebelumnya.
Storyboard Scene Halaman awal kuis.
Berikut adalah Storyboard Scene Halaman Awal Kuis dalam aplikasi SARAMA:
Tabel 4.
Storyboard Scene Halaman Awal Kuis User akan disuguhkan animasi untuk persiapan sebelum mulai kuis.
Setelah user menekan tombol Mulai Kuis, scene akan beralih ke Pilih Level.
Sketsa Hafalan Setelah user memilih tombol Kuis Pintar, scene akan beralih ke Halaman Awal Kuis.
Tabel 5.
Storyboard Scene Kuis Visual Storyboard Scene Hafalan Wudhu Berikut adalah Storyboard Main Hafalan Visual Storyboard Scene Kuis Berikut adalah Storyboard Scene Kuis dalam aplikasi SARAMA:
Sketsa Audio Buttonclick.
Backsound.
Jika user telat menjawab soal yang diberikan waktu selama 1 menit, maka akan muncul pop up animasi waktu habis, dan user tidak mendapatkan nilai dari soal tersebut, setelah itu akan dialihkan ke soal Jawabanbena Backsoundqu Jawabansalah Backsoundqu Waktuhabis.
Selain mendesain story board, peneliti juga merancang user interface.
Berikut rancangan user interface yang sudah dibuat:
Vokuis.
User Interface Hafalan Doa Wudhu Berikut user interface Hafalan Doa Wudhu dalam aplikasi SARAMA yang sudah telah dirancang:
Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Gambar 4.
User Interface Menu Panduan Ibadah Gambar 1.
User Interface Hafalan Doa Wudhu User Interface Pop up keluar Hafalan Doa Wudhu Berikut user interface Pop up keluar Hafalan Doa Wudhu dalam aplikasi SARAMA yang sudah telah dirancang:
User Interface Panduan Gerakan Wudhu Berikut user interface Panduan Gerakan Wudhu dalam aplikasi SARAMA yang sudah telah dirancang:
Gambar 5.
User Interface Panduan Gerakan Wudhu Gambar 2.
User Interface Pop up keluar Hafalan Doa Wudhu User Interface Pop Up Gerakan Wudhu Berikut user interface Pop Up Gerakan Wudhu dalam aplikasi SARAMA yang sudah telah dirancang:
User Interface Hafalan Bacaan Sholat Berikut user interface Hafalan Bacaan Sholat dalam aplikasi SARAMA yang sudah telah dirancang:
Gambar 6.
User Interface Pop Up Gerakan Wudhu User Interface Panduan Gerakan Sholat Berikut user interface Panduan Gerakan Sholat dalam aplikasi SARAMA yang sudah telah dirancang:
Gambar 3.
User Interface Scene Hafalan Sholat User Interface Menu Panduan Ibadah Berikut user interface Menu Panduan Ibadah dalam aplikasi SARAMA yang sudah telah dirancang:
Gambar 7.
User Interface Panduan Gerakan Sholat
Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Implementasi visual animasi interaktif perancangan storyboard dan user interface ke dalam bentuk tampilan animasi, pengaturan timeline, serta transisi antar scene sesuai alur pembelajaran yang telah dirancang.
Gambar 8.
Proses Implementasi saat pembuatan aplikasi Selain dirancangnya story board dan user interface penulis juga melakukan Berikut adalah salah satu pengujian aplikasi menggunakan metode Black Box Tabel 6.
Hasil Pengujian Black Box Menu Utama INPUT
PROSES
OUTPUT
Tombol Ayo Hafalan AyoHafalan.
addEven tListener(MouseEven CLICK, startHafala.
AyoKuis.
addEventLi stener(MouseEvent.
CLICK, startKui.
Profile.
addEventList ener(MouseEvent.
ICK.
De.
Masuk ke menu materi Hafalan Tombol Kuis Pintar Tombol Info Tombol Keluar Musik Latar Exit.
addEventListene r(MouseEvent.
CLIC
K, exitAp.
Sound.
SoundCh SoundTr playMainBGM().
Selanjutnya adalah tahap pemeliharaan.
Tahap memastikan aplikasi tetap dapat digunakan dengan baik setelah diimplementasikan.
Pemeliharaan meliputi perbaikan kesalahan minor, pembaruan konten pembelajaran, serta penyesuaian aplikasi terhadap perkembangan perangkat dan sistem operasi.
Results and Discussion Dalam proses perancangan animasi interaktif ini, penulis telah melakukan survei berupa wawancara di lingkungan Yayasan AlBayyinah yang bertujuan untuk memperoleh usulan terkait tentang seberapa efektif animasi media interaktif ini digunakan sebagai perantara media bantu pembelajaran setelah aplikasi dijalankan.
Kuesioner ini terdiri dari 10 pertanyaan, dan dibagikan kepada anakanak santri, serta pengajar di Yayasan AlBayyinah Jakarta.
Berikut adalah bagian perhitungan dari kuesioner Animasi Interaktif Sarama :
HASIL
PENGUJIAN
Sesuai Masuk ke menu Kuis Pintar Masuk ke profil biodata Keluar Aplikasi Sesuai Memainkan musik latar Sesuai Sesuai Sesuai Gambar 9.
Diagram Batang Kuesioner Berdasarkan hasil kuesioner, dapat disumplkan bahwa sebagian besar responden memberikan tanggapan positif terhadap aplikasi yang dikembangkan.
Dari total
jawaban yang terkumpul, sebesar 98,86% AusetujuAy, sedangkan 1,14% responden memilih jawaban Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
Vol 14 No.
1 Maret 2026 Autidak setujuAy.
Dengan perhitungannya sebagai berikut:
Tabel 7.
Pertanyaan Kuesioner Pertanyaan Menurut adik-adik, aplikasi ini mudah digunakan? Apakah STS Sementara itu, jumlah jawaban Autidak setujuAy sebanyak 4, sehingga presentasenya adalah :
menarik dan tidak membosankan? Apakah aplikasi ini membantu adik-adik hafalan doa wudhu dan bacaan Berdasarkan hasil tersebut, dapat disimpulkan bahwa aplikasi animasi interaktif yang dikembangkan mudah digunakan oleh pengguna yang mayoritas adalah anak-anak, serta mampu berfungsi secara efektif sebagai media pendukung pembelajaran.
Selain itu, aplikasi ini dapat meningkatkan ketertarikan dalam mempelajari ilmu agama Islam bagi anak,sehingga proses pembelajaran menjadi lebih menarik dan interaktif.
Apakah menu dan tombol pada aplikasi mudah dipahami? Apakah fitur kuis pada aplikasi ini membuat adik-adik lebih semangat Apakah soal-soal pada kuis sesuai dengan materi yang dipelajari? Apakah aplikasi ini membantu adik-adik belajar secara mandiri? yang terkumpul adalah sebesar 350 jawaban.
Jumlah jawaban AusetujuAy sebanyak 346, sehingga persentase jawaban AusetujuAy adalah :
Apakah Apakah adik-adik tertarik untuk Apakah pembelajaran di TPA Yayasan Al Bayyinah? Tabel 8.
Nilai Skala Likert
STS
Perhitungan dengan menggunakan rumus sebagai berikut:
dengan keterangan:
f = jumlah jawaban tertentu .
isalnya AusetujuAy atau Autidak setujuA.
n = jumlah total jawaban yang diperoleh.
Pada perancangan ini, jumlah total jawaban diperoleh dari 35 responden dengan 10 soal pertanyaan, sehingga total jawaban Conclusions Berdasarkan hasil perancangan, dan penelitian yang telah dilakukan, dapat pembelajaran interaktif SARAMA (Sahabat Ramah Muslim Ana.
berhasil dirancang sebagai sebuah media pembelajaran yang mendukung proses pengenalan hafalan doa wudhu serta bacaan sholat pada anak usia dini, terutama di lingkungan Yayasan Al-Bayyinah Jakarta.
Media ini dirancang dengan tampilan visual yang menarik dengan navigasi yang sederhana, serta dilengkapi fitur hafalan, kuis ,dan ilustrasi animasi interaktif sehingga dapat meningkatkan daya tarik belajar pada anak.
Penggunaan animasi interaktif terbukti dapat membantu anak dalam membantu memahami materi pembelajaran agama Islam
dengan cara lebih menyenangkan dan tidak Selain itu, aplikasi ini juga Evolusi: Jurnal Sains dan Manajemen
ISSN:2338-8161 E-ISSN: 2657-0793
dapat media pendukung bagi guru dan orang tua dalam menyampaikan materi keagamaan secara lebih efektif dan fleksibel.
Berdasarkan data hasil kuesioner yang melibatkan 35 orang responden dapat disimpulkan bahwa aplikasi SARAMA yang telah dikembangkan mendapatkan respon positif dari pengguna berdasarkan presentase 98,86%, 1,14% memberikan penilaian negatif.
Sehingga aplikasi dinilai layak dan efektif digunakan sebagai media pendukung pembelajaran.
References