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.

 

Read More

 MODUL PRAKTIKUM

Basis Data Perangkat Bergerak

Sumber : https://media.geeksforgeeks.org/wp-content/uploads/20240312175335/Databases-for-Mobile-App-Development.png 

Pendahuluan

Dalam pengembangan aplikasi mobile, basis data lokal memainkan peran penting dalam menyimpan dan mengelola data tanpa memerlukan koneksi internet. Beberapa teknologi yang umum digunakan dalam penyimpanan data lokal adalah SQLite, Room, dan Hive.

Modul ini akan membahas konsep dasar basis data dalam aplikasi mobile serta implementasi local storage menggunakan SQLite, Room (Android), dan Hive (Flutter). Setiap bagian akan dilengkapi dengan langkah-langkah praktikum serta lembar kerja peserta didik.

---

1. Konsep Basis Data dalam Aplikasi Mobile

1.1 Pengertian Basis Data dalam Aplikasi Mobile

Basis data dalam aplikasi mobile digunakan untuk menyimpan data secara lokal pada perangkat pengguna. Hal ini memungkinkan aplikasi tetap berfungsi tanpa koneksi internet.

1.2 Jenis Penyimpanan Data dalam Aplikasi Mobile

1. Shared Preferences – Untuk menyimpan data dalam bentuk key-value.
2. File Storage – Menyimpan data dalam bentuk file.
3. Local Database – Menyimpan data dalam bentuk tabel, seperti SQLite, Room, dan Hive.

1.3 Keunggulan Local Database

• Data tetap tersedia meskipun aplikasi ditutup.
• Performa lebih cepat dibandingkan dengan basis data berbasis cloud.
• Tidak memerlukan koneksi internet untuk mengakses data.

---

2. Praktikum Local Storage dengan SQLite

2.1 Instalasi SQLite di Flutter

1. Tambahkan dependensi di pubspec.yaml:

   dependencies:
     sqflite: ^latest_version
     path_provider: ^latest_version
   

2. Buat model database di database_helper.dart:

   import 'package:sqflite/sqflite.dart';
   import 'package:path/path.dart';
   
   class DatabaseHelper {
     static Database? _database;
     
     Future<Database> get database async {
       if (_database != null) return _database!;
       _database = await _initDatabase();
       return _database!;
     }
     
     Future<Database> _initDatabase() async {
       String path = join(await getDatabasesPath(), 'my_database.db');
       return await openDatabase(path, version: 1, onCreate: (db, version) {
         return db.execute(
           "CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)"
         );
       });
     }
   }
   

2.2 Lembar Kerja Peserta Didik

1. Apa fungsi openDatabase dalam SQLite?
2. Jelaskan peran Future<Database> pada kode di atas.
3. Modifikasi tabel di atas agar memiliki kolom email.

---

3. Praktikum Local Storage dengan Room (Android)

3.1 Instalasi Room di Android (Kotlin)

1. Tambahkan dependensi di build.gradle:

   dependencies {
       implementation "androidx.room:room-runtime:latest_version"
       kapt "androidx.room:room-compiler:latest_version"
   }
   

2. Buat entity User.kt:

   @Entity(tableName = "users")
   data class User(
       @PrimaryKey(autoGenerate = true) val id: Int,
       val name: String,
       val age: Int
   )
   

3. Buat DAO:

   @Dao
   interface UserDao {
       @Insert
       suspend fun insert(user: User)
       
       @Query("SELECT * FROM users")
       fun getAllUsers(): List<User>
   }
   

3.2 Lembar Kerja Peserta Didik

1. Apa perbedaan antara @Entity dan @Dao dalam Room?
2. Ubah kode di atas agar mendukung update data pengguna.

---

4. Praktikum Local Storage dengan Hive (Flutter)

4.1 Instalasi Hive

1. Tambahkan dependensi di pubspec.yaml:

   dependencies:
     hive: ^latest_version
     hive_flutter: ^latest_version
   

2. Buat model Hive di user.dart:

   import 'package:hive/hive.dart';
   
   @HiveType(typeId: 0)
   class User extends HiveObject {
     @HiveField(0)
     String name;
     
     @HiveField(1)
     int age;
   }
   

3. Simpan dan ambil data di main.dart:

   void saveUser() {
     var box = Hive.box('myBox');
     box.put('user', User(name: 'John', age: 25));
   }
   
   User? getUser() {
     var box = Hive.box('myBox');
     return box.get('user');
   }
   

4.2 Lembar Kerja Peserta Didik

1. Apa keunggulan Hive dibandingkan SQLite?
2. Modifikasi kode di atas agar dapat menyimpan lebih dari satu pengguna.

---

Kesimpulan

Setelah menyelesaikan modul ini, peserta didik diharapkan dapat:

1. Memahami konsep dasar basis data dalam aplikasi mobile.
2. Mengimplementasikan penyimpanan data lokal menggunakan SQLite, Room, dan Hive.
3. Mengembangkan aplikasi sederhana dengan fitur penyimpanan data lokal.

---

Evaluasi

1. Buat aplikasi Flutter yang menggunakan SQLite untuk menyimpan daftar tugas harian.
2. Implementasikan fitur pencarian data di aplikasi berbasis Room.
3. Buat aplikasi Flutter menggunakan Hive untuk menyimpan daftar kontak.

Selamat belajar dan semoga sukses!

Read More