🔹 Membuat halaman baru di SvelteKit

Cukup dengan menambah berkas +page.svelte baru di bawah src/routes/, pada kasus ini saya membuat path /jadwal-sholat, jadi menambahkan berkas baru dengan lokasi di src/routes/jadwal-sholat/+page.svelte.

Isinya bisa semudah Halo Dunia dulu aja, di contoh ini saya menambahkan judul halaman saja.

<div class="px-4 mb-4">
 <h1 class="text-3xl font-bold">⏰ Jadwal Sholat</h1>
</div>

Setelah berhasil membuat halaman awal, kita bisa mulai fokus membuat kode untuk fitur utamanya.

🔹 Akses dan menampilkan data lokasi

Salah satu syarat utama dari halaman ini adalah mengetahui lokasi terkini dari pengguna.

Kode dasarnya bisa begini:

let getGeolocation = async () => {
  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(async (position) => {
    console.log(`Ini dia si latitude: ${position.coords.latitude} dan longitude: ${position.coords.longitude}`)
   });
  }
};

Kode di atas mengambil lokasi terkini dengan memanggil method getCurrentPosition(). Perlu ditambahkan pengecekan dukungan terhadap API ini karena ada kemungkinan peramban si pengguna tidak mendukung API ini.

🔹 Mendapatkan nama kabupaten/kota

Bagian ini kita akan memanfaatkan API pihak ketiga nominatim. Kodenya semudah fetch dari publik API mereka saja, contohnya seperti berikut:

async function getDistrictByLatLong({
  latitude,
  longitude
}: {
  latitude: number;
  longitude: number;
}) {
  try {
    const resRaw = await fetch(
    `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`
    );
    const res = await resRaw.json();
    return res?.address?.city_district || '';
  } catch (error) {
    console.error(`Failed get distric for lat: ${latitude}, long: ${longitude}`);
    return '';
  }
}

Kode ini cukup lugas, memanggil API publik dengan melempar parameter lat dan lon untuk kemudian dikembalikan hasilnya dalam bentuk string. Ada kemungkinan terjadi galat dan di sini saya memilih mengembalikan string kosong saja.

🔹 Menyimpan data lokasi dan district ke Web Storage

Biar gak bolak-balik minta akses lokasi dan request ke nominatim.openstreetmap.org, maka simpan saja data-data ini ke web storage. Baca-Quran.id banyak menggunakan localStorage untuk menyimpan data, jadi gunakan hal yang sama saja.

let getGeolocation = async () => {
  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(async (position) => {
    // Mendapatkan kabupaten/kota
    const district = await getDistrictByLatLong({
     latitude: position.coords.latitude || 0,
     longitude: position.coords.longitude || 0
    });

    // Menyimpan ke storage
    localStorage.setItem(
     "dataLokasi",
     JSON.stringify({
      lt: position.coords.latitude || 0,
      lg: position.coords.longitude || 0,
      district
     })
    );

   });
  }
};

Kode di atas berusaha menyimpan data yang didapatkan dengan memanggil method localStorage.setItem(key, value) yang merupakan bawaan dari peramban.

🔹 Menyimpan data ke Svelte Store

Keunggulan Svelte Store, datanya bisa diakses dari mana saja. Saya punya rencana kalau data lokasi ini juga nantinya bisa diakses dari halaman setelan, jadi selain menyimpan ke web storage, datanya akan saya pass ke tengah di Svelte Store.

export type LocationParam = {
  lt: number
  lg: number
  district: string
}

export const settingLocation = writable<LocationParam | null>(null);

let getGeolocation = async () => {
  if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(async (position) => {
    // Mendapatkan kabupaten/kota
    const district = await getDistrictByLatLong({
     latitude: position.coords.latitude || 0,
     longitude: position.coords.longitude || 0
    });

    // Menyimpan ke storage
    localStorage.setItem(
     "dataLokasi",
     JSON.stringify({
      lt: position.coords.latitude || 0,
      lg: position.coords.longitude || 0,
      district
     })
    );

    // Memperbarui nilai store
    settingLocation.set({
     lt: position.coords.latitude || 0,
     lg: position.coords.longitude || 0,
     district
    });

   });
  }
};

onMount(() => {
  if (typeof window !== 'undefined') {
   if (typeof localStorage !== 'undefined') {
    const storageLocation = localStorage.getItem("dataLokasi");

    if (storageLocation) {
     const parsedValue = JSON.parse(storageLocation);

     settingLocation.set({
      lt: parsedValue?.lt || 0,
      lg: parsedValue?.lg || 0,
      district: parsedValue?.district || ''
     });
    } else {
     settingLocation.set(null);
    }
   }
  }
});

{#if $settingLocation === null}
  <Button onClick={getGeolocation}>
    Beri akses lokasi?
  </Button>
{:else}
  <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
    <div class="flex flex-col gap-2">
      {#if $settingLocation.district}
        <span>{$settingLocation.district}</span>
      {/if}

      <small>{$settingLocation.lt}, {$settingLocation.lg}</small>
    </div>

    <Button onClick={getGeolocation}>
      Perbarui Lokasi
    </Button>
  </div>
{/if}

🔹 Mendapatkan data jadwal sholat

Bagian ini bertujuan mengambil data dari pihak ketiga, memprosesnya dan menyimpan di variabel lokal dan web storage.

let prayerTimes = []
async function refetchPrayerTime({
  latitude,
  longitude
}: {
  latitude: number;
  longitude: number;
}) {
  const year = new Date().getFullYear();
  const month = new Date().getMonth() + 1;

  const rawResponse = await fetch(
    `${BASE_URL}/${year}/${month}?method=15&shafaq=general&latitude=${latitude}&longitude=${longitude}`
  );

  const response = (await rawResponse.json()) as PrayerTimeResponse;
  prayerTimes = response?.data || [];
}

async function refetchPrayerTime({
  latitude,
  longitude
}: {
  latitude: number;
  longitude: number;
}) {
  // ...kode2 lainnya
  localStorage.setItem("dataJadwalSholat", JSON.stringify(response));
}

async function fetchPrayerTime({ latitude, longitude }: { latitude: number; longitude: number }) {
  const fromStorage = localStorage.getItem("dataJadwalSholat");
  if (fromStorage) {
    const parsedValue = JSON.parse(fromStorage);
    // check current month is still the same
    prayerTimes = parsedValue?.data || [];

    const firstRow = prayerTimes[0];
    if (firstRow) {
      const monthFromData = firstRow.date.gregorian.month.number;
      const currentMonth = new Date().getMonth() + 1;
      // Melakukan request ulang
      // karena data di storage berasal dari bulan yang berbeda
      if (monthFromData !== currentMonth) {
        await refetchPrayerTime({ latitude, longitude });
      }
    }
  } else {
    await refetchPrayerTime({ latitude, longitude });
  }
}

let getGeolocation = async () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
      // ...kode2 lainnya
      await fetchPrayerTime({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      });
    });
  }
};

🔹 Hanya mengambil data hari ini

Seperti saya sebutkan di atas, data dari API merupakan data sebulan. Kita perlu fungsi untuk mencocokkan agar cuma data hari ini saja yang ditampilkan. Untuk melakukan ini, saya menggunakan ilmu hitamnya Svelte soal reaktivitas, yakni dengan $ :. Ini semacam computed atau watch di Vue, atau useEffect nya React. Pada dasarnya, dia akan memantau perubahan dari suatu variable dan mengeksekusi atau mengembalikan nilai baru.

Berikut kodenya:

$: todayPrayerTime = prayerTimes.find((time) => {
  return (
    time.date.gregorian.date ===
    new Date()
      .toLocaleDateString('id-ID', { month: '2-digit', day: '2-digit', year: 'numeric' })
      .replace(new RegExp(/\//g), '-')
  );
});

🔹 Menampilkan data jadwal sholat

Tampilannya bisa disesuaikan sesuka hati, tapi minimal ada pengecekan ketersediaan data dan menampilkan kelima jadwal sholat.

{#if todayPrayerTime}
  <PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Fajr" />
  <PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Dhuhr" />
  <PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Asr" />
  <PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Maghrib" />
  <PrayerTimeCard timings={todayPrayerTime.timings} prayerKey="Isha" />
{/if}

Dengan PrayerTimeCard nya isinya sebenarnya cuma mapping data dengan UI sederhana berupa teks jenis sholat dan waktu/jam dari jadwal sholat yang didapatkan.

<script lang="ts">
  const TITLE_MAP = {
    Fajr: 'Subuh',
    Dhuhr: 'Dzuhur',
    Asr: 'Ashar',
    Maghrib: 'Maghrib',
    Isha: 'Isya'
  };

  export let timings: PrayerTimings | null = null;
  export let prayerKey: 'Fajr' | 'Dhuhr' | 'Asr' | 'Maghrib' | 'Isha' = 'Fajr';
</script>

{#if timings}
  <div class="flex justify-between items-center gap-2">
    <span>{TITLE_MAP[prayerKey]}</span>
    <span>{timings[prayerKey]}</span>
  </div>
{/if}