Bagaimana Saya Membina Kompas Arah Kiblat

Apabila seseorang membuka alat arah kiblat, biasanya ada satu perkara yang ingin mereka tahu: ke arah mana perlu menghadap? Daripada keperluan yang sederhana itulah saya membangunkan Kompas Arah Kiblat untuk AkuIslam. Saya mahu alat ini mudah digunakan, dengan pengiraan yang jelas dan penerangan yang jujur tentang batas bacaannya.

Sebagai admin AkuIslam, perkara ini dekat dengan hati saya. Pembaca datang untuk mendapatkan panduan yang boleh membantu urusan ibadah mereka. Jadi, apabila menyediakan alat seperti ini, saya mahu memahami apa yang berlaku di sebalik paparannya—bagaimana arah dikira, bagaimana telefon membaca orientasi dan bila pengguna perlu menyemak semula bacaan.

Pada skrin, kita cuma melihat satu jarum dan beberapa angka. Di belakangnya, ada banyak keputusan kecil yang perlu dibuat. Dalam catatan ini, saya ingin membawa anda melihat proses tersebut: apa yang dipilih, mengapa ia dipilih dan perkara yang saya pelajari sepanjang membangunkannya.

Daripada Panduan Kepada Kemudahan Praktikal

Selama ini, AkuIslam menjadi tempat pembaca mencari panduan solat, doa dan perkara asas ibadah. Saya mula memikirkan bagaimana panduan itu boleh dilengkapi dengan kemudahan yang terus boleh digunakan apabila diperlukan.

Bayangkan anda berada di tempat yang kurang dikenali dan mahu menyemak arah kiblat. Anda boleh membuka halaman ini melalui pelayar, membenarkan akses lokasi atau memilih lokasi secara manual, kemudian melihat arah yang dikira. Tiada aplikasi tambahan yang perlu dipasang.

Alat arah kiblat memang sudah lama ada. Apa yang saya mahu usahakan ialah pengalaman yang sesuai untuk pembaca AkuIslam: arahan yang senang diikuti, fungsi utama yang mudah dicapai dan penjelasan apabila telefon mempunyai batas tertentu.

Dari situ, saya berpegang pada tiga perkara: pengiraan yang konsisten, petunjuk yang mudah difahami dan arahan yang membantu apabila sesuatu tidak berjalan seperti biasa. Tiga perkara inilah yang banyak membentuk keputusan sepanjang pembangunan.

Asas Pengiraan Arah Kiblat

Untuk mengetahui arah kiblat, kita perlu tahu kedudukan dua tempat dahulu: lokasi pengguna dan Kaabah. Kedua-duanya dinyatakan sebagai latitud dan longitud. Dalam alat ini, koordinat Kaabah ditetapkan pada 21.422487° utara dan 39.826206° timur.

Daripada dua koordinat tersebut, sistem mengira initial great-circle bearing^[1]. Ini ialah sudut permulaan laluan bulatan agung menuju ke Kaabah pada model bumi sfera, diukur mengikut arah jam dari utara benar.

Di sinilah peta boleh mengelirukan mata. Kita melihat permukaan yang rata, sedangkan bumi mempunyai kelengkungan. Rupa garisan pada peta juga bergantung pada unjurannya. Sebab itu, pengiraan arah perlu kembali kepada koordinat dan model bumi yang digunakan.

Di sebalik angka arah yang dipaparkan, pengiraan melibatkan latitud dalam radian, perbezaan longitud serta fungsi sine, cosine dan atan2^[2]. Hasilnya diselaraskan kepada julat 0° hingga kurang daripada 360°.

Jika anda melihat angka seperti 292°, itulah bearing dari utara benar bagi lokasi berkenaan. Angka itu boleh berbeza apabila lokasi berubah; ia bukan satu arah tetap untuk semua tempat di Malaysia.

Saya suka bahagian ini kerana hasilnya boleh disemak dengan jelas. Masukkan koordinat yang sama melalui kaedah yang sama, dan bearing yang terhasil mestilah sama. Itulah titik mula sebelum kita beralih kepada bacaan telefon yang lebih banyak berubah.

Mengapa Arah Dan Jarak Dikira Secara Berasingan

Selain arah, alat ini turut memaparkan jarak ke Kaabah. Kedua-duanya nampak seperti sebahagian daripada soalan yang sama, tetapi sebenarnya memerlukan pengiraan berasingan. Saya memilih untuk memisahkannya supaya kaedah bagi setiap angka mudah difahami dan disemak.

Arah kiblat menggunakan initial great-circle bearing berasaskan trigonometri sfera. Paparan jarak pula menggunakan formula Lambert^[3] pada model bumi elipsoid WGS84^[4]. WGS84 ialah sistem rujukan yang digunakan oleh GPS; model elipsoidnya mengambil kira bentuk bumi yang sedikit leper pada kutub.

Mengapa pilihan model ini diberi perhatian? Dalam perbandingan Kuala Lumpur ke Kaabah semasa pembangunan, model sfera memberikan kira-kira 6,974 km, manakala jarak geodesik WGS84 sekitar 6,979 km. Ada beza kira-kira lima kilometer. Perbezaan ini melibatkan angka jarak; formula arah kiblat masih menggunakan kaedah sfera yang diterangkan tadi.

Dalam ujian pembangunan, hasil Lambert dibandingkan dengan GeographicLib. Bagi kes ujian dengan jarak di bawah 15,000 km, ralat yang direkodkan kurang daripada 51 meter. Angka ini menerangkan hasil set ujian tersebut, bukan jaminan ralat maksimum untuk setiap pasangan koordinat di dunia.

Mungkin jarak ini bukan angka pertama yang anda perhatikan apabila membuka kompas. Namun, saya tetap mahu maklumat tambahan itu dijaga dengan teliti. Kalau sudah dipaparkan, biarlah ada asas yang boleh kita semak.

Bearing Statik Sebagai Rujukan Utama

Keputusan penting seterusnya ialah menjadikan bearing statik sebagai fungsi asas. Live compass, atau kompas yang bergerak mengikut telefon, disediakan sebagai progressive enhancement^[5]: ciri tambahan apabila peranti dan pelayar menyokongnya.

Untuk memahami pilihan ini, ada tiga perkara yang elok kita bezakan:

• Bearing kiblat: arah yang dikira daripada koordinat pengguna dan Kaabah, dengan utara benar sebagai rujukan.
• Heading telefon: arah orientasi telefon yang diperoleh melalui sensor dan maklumat yang disediakan oleh pelayar.
• Arah relatif: perbezaan sudut terpendek antara bearing kiblat dengan heading telefon yang digunakan oleh sistem.

Contohnya, komputer mungkin berjaya mengenal pasti lokasi tetapi tidak mempunyai magnetometer. Telefon pula mungkin mempunyai sensor, namun pelayar tidak membenarkan alat mengaksesnya. Jadi, berjaya mendapatkan lokasi tidak semestinya bermakna jarum kompas boleh bergerak mengikut telefon.

Dalam keadaan itu, anda masih boleh melihat bearing dan kompas statik. Cuma, paparan ini menunjukkan sudut dari utara benar; ia tidak mengesan ke mana telefon sedang dihalakan. Saya mahu perbezaan ini jelas supaya pengguna tahu fungsi yang sedang mereka gunakan.

Perbezaan Sokongan Sensor Pada iPhone Dan Android

Sampai ke bahagian sensor, satu perkara menjadi jelas: pengalaman pada iPhone dan Android tidak semestinya sama. Butang yang ditekan mungkin serupa, tetapi cara pelayar meminta kebenaran dan menyediakan bacaan boleh berbeza. Perbezaan inilah yang perlu ditangani di belakang paparan.

Pada pelaksanaan iOS yang memerlukannya, akses sensor orientasi diminta melalui DeviceOrientationEvent.requestPermission()^[6]. Permintaan perlu bermula daripada tindakan pengguna, seperti menekan butang. Jika permintaan ditangguhkan sehingga proses mendapatkan lokasi selesai, konteks tindakan pengguna boleh hilang dan permintaan sensor boleh ditolak.

Sebab itulah satu tekanan pada butang “Mulakan” memulakan permintaan lokasi dan kebenaran sensor serentak. Selepas maklumat yang diperlukan tersedia, barulah kompas langsung diaktifkan. Bagi pengguna, langkahnya ringkas; susunan di belakangnya perlu tepat.

Bagi laluan WebKit^[7] pada iPhone, alat mengutamakan webkitCompassHeading. Bacaan ini merujuk kepada utara magnet. Sifat webkitCompassAccuracy pula boleh memberikan anggaran ketepatan bacaan.

Pada Android Chrome yang menyokongnya, alat menggunakan deviceorientationabsolute^[8] dengan nilai alpha, beta dan gamma. Data yang hanya menunjukkan orientasi relatif kepada kedudukan awal telefon ditolak kerana ia tidak menyediakan rujukan arah yang diperlukan.

Pada laluan Android tersebut, ukuran ketepatan yang setara dengan webkitCompassAccuracy tidak tersedia. Kita boleh menerima bacaan arah tanpa cukup maklumat tentang kualitinya. Inilah sebabnya pengguna turut diminta menentukur telefon sebelum meneruskan penggunaan.

Batas yang perlu dijelaskan: bearing kiblat merujuk utara benar, sedangkan bacaan WebKit tadi merujuk utara magnet. Versi yang diterangkan dalam catatan ini belum menyertakan pembetulan deklinasi menggunakan World Magnetic Model^[9]. Oleh itu, kompas langsung perlu dibaca sebagai anggaran berasaskan sensor, dengan bearing statik sebagai rujukan pengiraan.

Saya rasa penjelasan ini penting untuk anda tahu. Jarum yang bergerak lancar memang menyenangkan untuk dilihat, tetapi kelancaran animasi sahaja belum membuktikan ketepatan arah fizikal.

Kedudukan Telefon Dan Kestabilan Bacaan

Data orientasi peranti boleh diterangkan melalui tiga sudut Euler^[10]: alpha, beta dan gamma. Nilai-nilai ini membantu sistem memahami putaran serta kecondongan telefon.

Dalam postur yang disokong oleh alat ini, telefon perlu dipegang hampir mendatar dengan skrin menghadap ke atas. Bagi laluan data yang menggunakan alpha, pengiraan arah bahagian atas skrin menggunakan hubungan -alpha serta mengambil kira orientasi skrin.

Sistem juga mengambil kira apabila skrin diputar kepada paparan melintang. Jika kecondongan melebihi 40°, penilaian penjajaran dihentikan sementara dan anda diminta meratakan telefon. Jadi, apabila arahan itu muncul, ada sebabnya.

Dalam pendekatan awal, perubahan kedudukan telefon yang kecil boleh menyebabkan heading melompat sehingga 180° ketika pengiraan bertukar antara dua vektor rujukan. Bayangkan betapa mengelirukannya jika telefon hanya bergerak sedikit tetapi jarum tiba-tiba menunjukkan arah bertentangan.

Daripada masalah itu, saya memilih model orientasi yang lebih ringkas untuk satu postur yang jelas. Apabila syarat postur tidak dipenuhi, penilaian dihentikan dahulu. Pilihan ini memudahkan pengujian, dan pengguna juga mendapat arahan yang lebih jelas tentang cara memegang telefon.

Mengendalikan Perbezaan Sudut 359° Dan 1°

Cuba bayangkan jarum berada pada 359°, kemudian bergerak ke 1°. Pada bulatan kompas, ia cuma melintasi utara sebanyak 2°. Tetapi jika kita terus menolak dua angka itu seperti nombor biasa, hasilnya 358°. Perbezaan kecil ini rupanya penting dalam menentukan cara jarum bergerak.

Untuk mengendalikan keadaan ini, perbezaan sudut diselaraskan kepada julat -180° hingga 180°. Dalam panduan alat ini, nilai positif menunjukkan arah relatif ke kanan, manakala nilai negatif menunjukkan arah relatif ke kiri.

Pelicinan bacaan, atau circular smoothing^[11], juga perlu mengambil kira sifat bulatan. Purata aritmetik 359° dan 1° ialah 180°, yang akan menghasilkan arah bertentangan. Oleh itu, bacaan dilicinkan melalui komponen sine dan cosine dengan faktor 0.18 sebelum ditukar semula kepada sudut.

Animasi jarum turut menggunakan laluan putaran terpendek apabila melintasi utara. Jarum itu tidak perlu membuat satu pusingan tambahan hanya kerana nombor bertukar daripada 359 kepada 0.

Hasilnya, pergerakan jarum lebih mudah diikuti ketika anda memusingkan telefon. Walau bagaimanapun, pelicinan ini tetap bergantung pada kualiti bacaan asal; ia tidak membetulkan semua ralat sensor.

Maksud Warna Hijau Dan Pengesahan Alignment

Bayangkan anda sudah hampir menghadap arah yang ditunjukkan, tetapi warna dan mesej pada skrin asyik bertukar-tukar. Sukar juga hendak tahu bila perlu berhenti memusingkan telefon. Keadaan ini boleh berlaku jika satu ambang sahaja digunakan sedangkan bacaan sensor sentiasa turun naik sedikit.

Sistem menggunakan hysteresis^[12], iaitu ambang masuk dan keluar yang berbeza. Dalam reka bentuk yang diterangkan di sini:

• Dalam lingkungan 20°: pengguna diberitahu bahawa arah sedang dihampiri. Status ini dilepaskan apabila perbezaan melebihi 22°.
• Dalam lingkungan 10°: pengguna diminta memperlahankan pergerakan. Status ini dilepaskan apabila perbezaan melebihi 12°.
• Dalam lingkungan 5°: kompas menjadi hijau dan ikon Kaabah muncul. Status sejajar dilepaskan apabila perbezaan melebihi 8°.

Saya juga tidak mahu satu lintasan pantas melalui arah sasaran terus dianggap sebagai penjajaran yang stabil. Jadi, bacaan perlu kekal dalam lingkungan 5° selama satu saat penuh sebelum pengesahan diberikan. Pengguna diberi sedikit masa untuk benar-benar memegang telefon pada arah tersebut.

Ambang ini ialah aturan paparan dan interaksi alat. Ia tidak bermaksud sensor dijamin tepat dalam lingkungan 5°, dan tidak menetapkan had hukum penyimpangan arah kiblat. Mesej “Arah kiblat tepat” dalam versi yang diterangkan merujuk kepada syarat penjajaran sistem berdasarkan bacaan yang diterima, bukannya pengesahan bebas terhadap arah sebenar.

Warna hijau pada skrin nampak ringkas. Rupanya, ia pun memerlukan perbincangan yang panjang. Namun, perkara kecil begini wajar diberi perhatian kerana pengguna akan bergantung pada maksud yang kita berikan kepadanya.

Penentukuran Dan Gangguan Magnet

Magnetometer^[13] telefon boleh dipengaruhi oleh sarung bermagnet, pembesar suara, logam pada meja, kenderaan dan struktur bangunan. Oleh itu, alat perlu menangani keadaan bacaan yang kurang baik.

Pada laluan WebKit, nilai webkitCompassAccuracy yang negatif atau melebihi 20° menyebabkan bacaan ditandakan sebagai kurang baik. Dalam keadaan itu, sistem tidak memberikan isyarat kejayaan.

Jika sumber bacaan tidak melaporkan tahap ketepatan, anda akan diminta melakukan gerakan penentukuran angka lapan. Sistem melihat perubahan pada beberapa paksi, supaya memusing telefon secara mendatar sahaja tidak terus dianggap mencukupi.

Dalam pelaksanaan ini, syarat gerakan melibatkan jumlah putaran heading sekurang-kurangnya 540° serta perubahan julat beta dan gamma masing-masing sekurang-kurangnya 25°. Ini ialah petunjuk bahawa gerakan yang dikehendaki telah dilakukan, bukan ukuran langsung ketepatan magnetometer selepas penentukuran.

Pengguna turut diberikan pilihan pengesahan manual selepas menentukur. Pengesahan itu merekodkan tindakan pengguna; ia tidak menghapuskan kemungkinan gangguan magnet di persekitaran.

Bagi saya, pengguna tidak patut dibiarkan meneka apabila bacaan kurang meyakinkan. Alat perlu memberi arahan yang boleh diikuti dan menerangkan apa yang masih belum dapat dipastikan. Itu juga sebahagian daripada pengalaman penggunaan yang baik.

Pilihan Lokasi Apabila GPS Tidak Tersedia

Ada kalanya cabaran bermula lebih awal, sebelum kompas sempat bergerak: lokasi belum berjaya dikenal pasti. Dalam alat ini, permintaan lokasi hanya bermula selepas anda menekan butang. Ia meminta ketepatan tinggi, memberi masa sehingga 15 saat dan memaparkan amaran jika anggaran ketepatan lokasi yang dilaporkan lebih buruk daripada 500 meter.

Anda mungkin memilih untuk tidak memberikan kebenaran lokasi, atau pencarian lokasi mengambil masa terlalu lama. Saya mahu anda masih mempunyai pilihan untuk meneruskan. Sebab itu, alat ini menyediakan 532 lokasi manual: 354 di Malaysia, satu di Singapura, lapan di Brunei dan 169 di Indonesia.

Apabila anda memilih bandar, sistem mengambil koordinatnya dan menggunakan fungsi pengiraan arah yang sama seperti lokasi daripada peranti. Set data manual hanya menyimpan koordinat, bukan bearing yang siap dikira. Dengan cara ini, kedua-dua pilihan berkongsi asas pengiraan yang sama.

Anda juga akan perasan bahawa tiada bandar dipilih secara automatik. Saya sengaja membiarkannya kosong supaya arah hanya dipaparkan selepas anda menentukan lokasi yang sesuai. Koordinat bandar itu ialah rujukan bagi kawasan tersebut, bukannya kedudukan tepat telefon anda.

Bagi carian lokasi terdekat, anggaran equirectangular^[14] digunakan untuk menyusun calon dengan pengiraan yang lebih ringan. Calon terbaik kemudian dinilai menggunakan formula geodesik penuh. Susunan ini mengurangkan kerja pengiraan pada peranti.

Pengiraan Pada Peranti Dan Privasi Lokasi

Saya memilih pendekatan local-first^[15] untuk fungsi kompas ini. Pengiraan arah dan jarak berlaku di dalam pelayar pengguna. Koordinat yang digunakan oleh fungsi ini tidak dihantar ke pelayan AkuIslam, disimpan dalam pangkalan data AkuIslam atau digunakan untuk membina profil lokasi.

Set data lokasi, formula pengiraan dan logik kompas disertakan bersama alat. Jadi, pengiraan arah boleh dibuat pada peranti tanpa perlu memuatkan peta luar.

Pilihan ini mengurangkan kebergantungan pengiraan pada permintaan ke pelayan dan mengehadkan data yang perlu dikendalikan oleh AkuIslam. Penjelasan ini khusus kepada fungsi kompas; mendapatkan lokasi melalui peranti masih tertakluk pada kebenaran serta perkhidmatan lokasi pelayar dan sistem operasi.

Saya selesa dengan prinsip ini: apabila koordinat sudah boleh digunakan pada peranti untuk membantu anda mendapatkan arah, tidak perlu pula ia dihantar kepada pelayan kita.

Proses Semakan Dan Pengujian

Selepas fungsi-fungsi utama disusun, kerja seterusnya ialah memeriksa bagaimana semuanya berkelakuan bersama. Saya meneliti pengiraan arah dan jarak, penerimaan bacaan sensor, perubahan paparan serta apa yang berlaku apabila proses terganggu.

Antara soalan yang perlu dijawab: apa berlaku apabila jarum melintasi utara? Bagaimana jika telefon terlalu condong? Jika kebenaran sensor ditolak, adakah pengguna masih mendapat panduan yang berguna? Soalan seperti ini membantu semakan kekal dekat dengan keadaan yang mungkin dialami oleh pengguna.

Setiap dapatan semakan juga perlu diperiksa sebelum perubahan dibuat. Ada masalah yang memerlukan pembetulan, dan ada andaian yang perlu dinilai semula. Saya mahu setiap perubahan menyelesaikan sesuatu yang jelas, supaya alat ini tidak semakin rumit tanpa manfaat kepada pengguna.

Dalam pembangunan yang direkodkan untuk alat ini, lebih 900 kes ujian automatik dijalankan, di samping percubaan pada telefon sebenar. Ujian fizikal melibatkan iPhone 14 dengan Safari dan sebuah telefon Xiaomi dengan Chrome. Skop tersebut tidak mewakili semua kombinasi telefon, sistem operasi dan pelayar.

Ujian automatik membantu mengesan jika pembetulan baharu menjejaskan fungsi yang sudah berjalan. Percubaan pada telefon pula membantu melihat pengalaman sebenar pada peranti yang diuji. Kedua-duanya saling melengkapi, walaupun masih ada keadaan penggunaan yang belum diliputi.

Proses ini banyak mengingatkan saya supaya kembali kepada soalan asas: adakah keputusan yang dibuat benar-benar membantu pengguna, dan apakah bukti yang menyokongnya? Jawapan kepada soalan itulah yang saya gunakan untuk menilai penambahbaikan seterusnya.

Di Sebalik Paparan Yang Ringkas

Ada kepuasan tersendiri apabila melihat sesuatu yang bermula sebagai idea akhirnya boleh digunakan pada telefon. Lebih-lebih lagi apabila saya membayangkan ia dapat membantu pembaca yang sedang memerlukannya.

Di belakang paparan kompas ada pengiraan koordinat, bacaan sensor, pelicinan sudut dan penentukuran. Tetapi apabila anda membukanya, saya mahu langkahnya terasa mudah: tentukan lokasi, lihat bearing dan ikuti panduan kompas jika sensor telefon menyokongnya.

Anda tidak perlu memahami setiap formula untuk menggunakan alat ini. Tugas saya ialah menguruskan bahagian tersebut sebaik mungkin, sambil memastikan panduan dan batas bacaannya mudah difahami.

Itulah arah yang ingin saya bawa melalui AkuIslam Tools. Saya mahu artikel dan panduan yang selama ini menemani pembaca dilengkapi dengan kemudahan kecil yang berguna dalam kehidupan seharian.

Jika anda mahu mencubanya, Kompas Arah Kiblat AkuIslam boleh diakses bersama panduan penggunaannya. Catatan ini berkongsi asas dan keputusan bagi versi yang diterangkan, supaya anda juga dapat memahami pertimbangan di sebalik alat tersebut.

Saya berharap perkongsian ini memberi gambaran yang lebih dekat tentang proses pembangunannya. Kepercayaan pembaca penting bagi saya, dan saya mahu menjaganya melalui kerja yang teliti serta penerangan yang terbuka.

Pembangunan kompas ini juga masih berjalan. Dari masa ke masa, saya akan terus membuat penambahbaikan dan iterasi berdasarkan hasil pengujian, perubahan sokongan peranti serta maklum balas anda. Jika ada bahagian yang mengelirukan atau pengalaman penggunaan yang kurang lancar, anda dialu-alukan berkongsi di ruangan komen.

Harapan saya, setiap pusingan penambahbaikan membawa alat ini selangkah lebih matang, lebih mudah digunakan dan semakin sempurna fungsinya. Masih ada ruang untuk diperbaiki, dan saya mahu terus mengusahakannya supaya kompas ini semakin berguna kepada pembaca AkuIslam.