Digitalisasi Rumah Ibadah: Merilis Aplikasi "Masjid Digital" Secara Open Source

Misi Kami: Teknologi Modern untuk Kemaslahatan Umat

Di Radevanka Project, kami percaya bahwa inovasi rekayasa perangkat lunak tidak boleh hanya eksklusif untuk korporasi besar atau startup berdana raksasa. Teknologi modern yang cepat, aman, dan berestetika tinggi juga harus dapat diakses serta dimanfaatkan oleh tempat-tempat yang menjadi pusat peradaban komunitas—salah satunya adalah rumah ibadah.

Berangkat dari semangat "Membangun digitalisasi masjid untuk umat yang lebih baik", kami dengan bangga merilis Masjid Digital - Smart Live TV Display Management (v1.0.2) ke publik secara Open Source (Gratis). Anda dapat mempelajari dokumentasi arsitekturnya di halaman portofolio resmi kami atau langsung mengakses kode sumbernya melalui repositori GitHub Masjid Digital.

Apa Itu Masjid Digital & Masalah Apa yang Diselesaikan?

Selama ini, banyak pengurus masjid menghadapi kendala saat mengelola layar informasi di ruang utama sholat. Penggunaan jam digital LED konvensional sering kali terbatas hanya pada penunjuk angka waktu sholat, sementara penggunaan televisi berbasis flashdisk mengharuskan operator mencabut-pasang perangkat secara manual setiap kali ada pembaruan laporan kas, pergantian khatib Jumat, atau pengumuman kegiatan baru.

Masjid Digital hadir sebagai sistem informasi manajemen terpadu berbasis web yang dirancang khusus untuk mengelola seluruh konten pada layar TV Informasi (Smart Live Display) di masjid secara terpusat. Aplikasi ini memudahkan pengurus masjid (Takmir, Humas, dan Operator) untuk memperbarui jadwal sholat, laporan keuangan, petugas dakwah, poster kegiatan, hingga running text dari komputer atau laptop sekretariat—dan perubahannya akan langsung tayang secara real-time tanpa perlu me-refresh layar TV secara manual.

Dirancang dengan antarmuka Emerald Glassmorphism Theme serta perpaduan tipografi modern Work Sans dan font kaligrafi Arab Amiri (RTL), tampilan di layar TV masjid Anda akan terlihat sangat anggun, kontras, mudah dibaca oleh jamaah dari kejauhan, sekaligus menjaga keteduhan estetika islami.

Bedah 8 Modul & Fitur Unggulan Masjid Digital

Meskipun didistribusikan secara terbuka dan gratis, tim Radevanka Project tidak berkompromi dalam menyematkan rekayasa fitur berstandar produksi pada aplikasi ini:

1. Sinkronisasi Jadwal Sholat Otomatis (API Kemenag & Hijriah): Tidak perlu lagi menginput jadwal waktu sholat secara manual. Sistem terintegrasi langsung dengan API Kemenag / MyQuran serta API Kalender Hijriah. Dilengkapi fitur Batch Sync satu bulan penuh dengan indikator Progress Bar Loading dan status per tanggal, serta fitur Inline Edit untuk menyesuaikan tanggal Hijriah secara instan apabila terdapat ketetapan rukyatul hilal pada hari raya.
2. Manajemen Jadwal Dakwah Terpadu (4 Kategori Agenda): Sistem tabulasi terstruktur yang mengakomodasi seluruh siklus kegiatan ibadah di masjid:
Petugas Jumat: Mengatur daftar Khatib, Imam, Muadzin, dan Bilal.
Agenda Ramadhan: Mengatur Penceramah Tarawih/Kultum dan Imam berdasarkan urutan "Malam Ke-" yang otomatis terfilter dari kalender jadwal sholat.
Sholat Ied: Pengaturan petugas dan pelaksanaan Sholat Idul Fitri maupun Idul Adha.
Pengajian Rutin: Informasi jadwal ustadz penceramah beserta tema materi kajian pekanan/bulanan.
3. Smart Image Compression (Client-Side Canvas Alpine.js): Pengurus masjid sering mengunggah foto kegiatan atau poster banner beresolusi mentah (5 MB–15 MB) yang dapat membebani ruang penyimpanan server. Kami mengimplementasikan algoritma kompresi gambar berbasis HTML5 Canvas dan Alpine.js langsung di sisi browser. Setiap gambar yang diunggah otomatis di-resize ke batas optimal Full HD (1920px) dan dikompresi hingga 50% lebih ringan sebelum dikirim ke server, lengkap dengan deteksi tanggal kedaluwarsa (auto-expire) banner.
4. Transparansi Laporan Keuangan & Data Pengurus: Memudahkan bendahara dan takmir dalam menyajikan ringkasan pemasukan, pengeluaran, serta saldo kas masjid secara transparan kepada jamaah, lengkap dengan daftar struktur kepengurusan masjid yang tampil rapi di layar informasi.
5. Modul Doa, Hadist & Galeri Dokumentasi TV: Sajikan konten edukasi islami di sela-sela waktu menunggu iqomah. Modul ini mendukung penulisan teks Arab dengan perataan kanan-ke-kiri (Right-to-Left / RTL) menggunakan font Amiri beserta terjemahannya, pengaturan durasi tampil per slide, serta galeri foto dokumentasi aktivitas sosial masjid.
6. Running Text (Marquee) Kustom dengan Live Preview: Pengurus dapat mengelola teks berjalan di bagian bawah layar TV dengan kode warna indikator sesuai kategori (Informasi, Ayat Al-Qur'an, Hadits, atau Ucapan). Kecepatan jalan teks dapat diatur secara menyeluruh (Global Speed) maupun spesifik per item (Individual Speed), lengkap dengan pratinjau langsung (Live Preview) di halaman admin sebelum ditayangkan.
7. Dynamic Theme Color Manager: Setiap masjid memiliki warna identitas arsitektur yang unik. Melalui menu Theme Color Manager, pengurus bebas menyesuaikan kode palet warna utama (Main, Dark, dan Light) pada tampilan TV Display secara presisi tanpa perlu menyentuh kode CSS.
8. Role-Based Access Control (RBAC) yang Ketat: Mengadopsi prinsip "Secure with discipline", aplikasi ini memisahkan hak akses secara tegas. Hanya peran Superadmin, Operator, dan Humas yang memiliki otoritas manipulasi data (Tambah, Ubah, Hapus), sementara akun peninjau atau tamu secara otomatis dikunci pada mode Read-Only (Lihat Saja).

Kekuatan Arsitektur TALL Stack di Balik Layar

Agar aplikasi mampu berjalan stabil selama 24 jam penuh di perangkat Smart TV maupun Mini PC masjid, Masjid Digital dibangun di atas fondasi ekosistem TALL Stack (Tailwind CSS, Alpine.js, Laravel, dan Livewire):

Laravel & MySQL/PostgreSQL: Menjamin keandalan struktur basis data, keamanan autentikasi, serta komunikasi API eksternal yang tangguh.
Laravel Livewire (Full-Page Reactive Components): Menghadirkan sinkronisasi data dua arah secara instan antara panel operator dan layar TV tanpa membebani memori browser.
Alpine.js & Tailwind CSS: Mengelola transisi slide, hitung mundur waktu sholat/iqomah detik demi detik secara mulus di sisi klien, serta tata letak glassmorphism yang responsif di berbagai ukuran layar televisi.

Panduan Instalasi Cepat (Quick Start untuk Developer & IT Masjid)

Bagi rekan-rekan developer, mahasiswa IT, maupun relawan remaja masjid yang ingin memasang aplikasi ini di server lokal (Mini PC / Raspberry Pi) atau cloud hosting masjid, Anda dapat menyalin urutan perintah terminal berikut:

# 1. Clone repositori resmi dari GitHub Radevanka Project
  git clone https://github.com/radevankaproject/masjid-digital.git
  cd masjid-digital
  
  # 2. Instal dependensi PHP & Frontend
  composer install
  npm install --force
  npm run build
  
  # 3. Salin konfigurasi environment & generate App Key
  cp .env.example .env
  php artisan key:generate
  
  # 4. Jalankan migrasi tabel, data awal (seeder), dan symlink storage
  php artisan migrate --seed
  php artisan storage:link
  
  # 5. Jalankan server aplikasi
  php artisan serve

Tips Troubleshooting Lintas OS (Windows ke Linux): Penggunaan flag npm install --force sangat disarankan apabila Anda men-deploy aplikasi ini ke server berbasis Linux untuk menghindari pesan kendala EBADPLATFORM (lightningcss) akibat perbedaan lingkungan kompilasi paket.

Coba Live Demo & Mari Berkolaborasi!

Sebelum menginstalnya di server Anda, silakan jelajahi langsung antarmuka Live TV Display dan Dashboard Admin (disarankan menggunakan perangkat Desktop/Laptop untuk pengalaman pengelolaan terbaik) melalui tautan resmi berikut:

Web Live Demo: https://demo-masjid.radevankaproject.web.id (Login Demo: tamu [at] masjid.com / Password: masjid123)
Video Demo (YouTube): Tonton Preview Antarmuka Masjid Digital di YouTube
Source Code (GitHub): https://github.com/radevankaproject/masjid-digital

Aplikasi ini didistribusikan di bawah lisensi MIT License (dengan ketentuan atribusi kepemilikan Radevanka Project). Kami mengundang rekan-rekan developer di seluruh penjuru Nusantara untuk melakukan Fork, menambahkan fitur baru, melaporkan bug, dan mengirimkan Pull Request di GitHub.

Bantu kami menyebarluaskan inisiatif Tech for Good ini. Jika Anda menyukai proyek Masjid Digital dan menganggapnya bermanfaat bagi kemakmuran masjid di lingkungan Anda, dukung kami dengan membagikan artikel ini, memberikan bintang (Star) pada repositori GitHub kami, atau mentraktir segelas kopi kepada developer utama kami di Trakteer. Bersama Radevanka Project, mari kita majukan ekosistem digital rumah ibadah di Indonesia!