Modul Praktikum - Membuat Aplikasi Jadwal Ibadah dengan Flutter dan Firebase

MODUL PRAKTIKUM

Membuat Aplikasi Jadwal Ibadah dengan Flutter dan Firebase

1. Pendahuluan

Aplikasi jadwal ibadah ini akan menampilkan jadwal sholat harian berdasarkan data dari Firebase dan memberikan notifikasi pengingat. Aplikasi juga akan memiliki tampilan kalender agar pengguna dapat melihat jadwal ibadah untuk hari-hari berikutnya.

2. Tujuan Pembelajaran

Setelah mengikuti modul ini, peserta didik diharapkan mampu:

1. Menghubungkan aplikasi Flutter dengan Firebase.
2. Menyimpan dan mengambil data jadwal ibadah dari Firebase Firestore.
3. Mengimplementasikan notifikasi pengingat menggunakan flutter_local_notifications.
4. Menampilkan jadwal dalam tampilan daftar dan kalender.

---

3. Persiapan Praktikum

Perangkat Lunak yang Dibutuhkan:

• Flutter SDK
• Android Studio atau VS Code
• Emulator atau perangkat fisik
• Firebase Firestore dan Firebase Authentication

Dependensi yang Diperlukan:

Tambahkan dependensi berikut dalam pubspec.yaml:

  dependencies:
    flutter:
      sdk: flutter
    firebase_core: latest_version
    cloud_firestore: latest_version
    flutter_local_notifications: latest_version
    table_calendar: latest_version

---

4. Langkah-Langkah Praktikum

Langkah 1: Konfigurasi Firebase di Flutter

1. Buat proyek di Firebase Console.
2. Tambahkan aplikasi Android dan iOS ke Firebase.
3. Download google-services.json untuk Android dan letakkan di folder android/app.
4. Tambahkan Firebase SDK ke proyek Flutter.
5. Inisialisasi Firebase di aplikasi dengan menambahkan kode berikut di main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Langkah 2: Menyimpan Jadwal Ibadah ke Firestore

1. Buat koleksi jadwal_ibadah di Firestore.
2. Tambahkan dokumen dengan format:

{
  "tanggal": "2025-03-03",
  "subuh": "04:30",
  "dzuhur": "12:00",
  "ashar": "15:30",
  "maghrib": "18:00",
  "isya": "19:30"
}

3. Tambahkan fungsi untuk mengambil data dari Firestore:

Stream<QuerySnapshot> getJadwal() {
  return FirebaseFirestore.instance.collection('jadwal_ibadah').snapshots();
}

Langkah 3: Menampilkan Data dalam Flutter

Tambahkan kode berikut untuk menampilkan jadwal ibadah dalam daftar:

StreamBuilder<QuerySnapshot>(
  stream: getJadwal(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    final docs = snapshot.data!.docs;
    return ListView.builder(
      itemCount: docs.length,
      itemBuilder: (context, index) {
        var data = docs[index];
        return ListTile(
          title: Text("Tanggal: ${data['tanggal']}"),
          subtitle: Text("Subuh: ${data['subuh']} - Dzuhur: ${data['dzuhur']}"),
        );
      },
    );
  },
)

Langkah 4: Menambahkan Notifikasi Pengingat

1. Inisialisasi flutter_local_notifications.
2. Tambahkan fungsi untuk menjadwalkan notifikasi:

Future<void> scheduleNotification(String waktu, String sholat) async {
  var scheduledTime = Time(int.parse(waktu.split(":")[0]), int.parse(waktu.split(":")[1]));
  await flutterLocalNotificationsPlugin.zonedSchedule(
    0,
    "Waktunya Sholat $sholat",
    "Segera laksanakan sholat $sholat.",
    scheduledTime,
    NotificationDetails(...),
    androidAllowWhileIdle: true,
  );
}

Langkah 5: Menampilkan Kalender

Tambahkan widget TableCalendar untuk menampilkan jadwal:

TableCalendar(
  focusedDay: DateTime.now(),
  firstDay: DateTime(2025, 1, 1),
  lastDay: DateTime(2025, 12, 31),
  calendarFormat: CalendarFormat.week,
  onDaySelected: (selectedDay, focusedDay) {
    // Filter jadwal berdasarkan tanggal
  },
)

---

5. Lembar Kerja Peserta Didik

Petunjuk Pengerjaan:

1. Ikuti langkah-langkah yang diberikan untuk membangun aplikasi.
2. Jawab pertanyaan berikut:
   • Apa fungsi Firebase dalam aplikasi ini?
   • Bagaimana cara menampilkan data Firestore dalam ListView?
   • Bagaimana cara mengaktifkan notifikasi pengingat?
3. Tambahkan fitur tambahan seperti dark mode atau custom alarm suara.

---

6. Kesimpulan

Peserta didik telah berhasil membangun aplikasi jadwal ibadah dengan Firebase, menampilkan data dalam ListView, menambahkan kalender, dan mengimplementasikan notifikasi pengingat.

Modul ini bisa dikembangkan lebih lanjut dengan menambahkan fitur seperti lokasi masjid terdekat atau integrasi API jadwal sholat.