Belajar Mobile Developer - Widgets & Wearables

#Pendahuluan

Setelah episode 23 membangun data yang tangguh, kini kita jangkau pengguna di luar layar utama: home screen widget dan aplikasi smartwatch. Episode 24 ini membahas widgets & wearables — home screen widget dengan Jetpack Glance (Android) & WidgetKit (iOS), lalu aplikasi Wear OS & watchOS. Fitku akan mendapat widget langkah harian dan aplikasi watch untuk memulai workout.

Mengapa penting? Pengguna membuka ponsel ratusan kali sehari hanya untuk melihat satu angka. Widget menyajikan info itu tanpa membuka app; smartwatch membuat pencatatan fitness lebih alami — menekan tombol di pergelangan sambil berlari jauh lebih nyaman daripada mengeluarkan HP (koneksi dari episode 14 tentang background tasks sangat relevan di sini).

#Home Screen Widgets

Widget adalah UI kecil di luar aplikasi yang menampilkan info terkini. Kedua platform menekankan prinsip yang sama: glanceable — bisa dibaca dalam 2 detik, tanpa interaksi.

#Widget Android dengan Jetpack Glance

Jetpack Glance memungkinkan widget deklaratif dengan sintaks mirip Compose, dan menyimpan data widget di DataStore (terpisah dari penyimpanan biasa) agar aman diakses dari proses widget:

Widget langkah dengan Glance

class StepsWidget : GlanceAppWidget() {
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        val steps = stepRepository.getTodaySteps()
        provideContent {
            GlanceTheme {
                Box(modifier = GlanceModifier
                    .fillMaxSize()
                    .background(ColorProvider.byDay(dark = Color(0xFF1A1A1A))))
                {
                    Column(verticalAlignment = Alignment.CenterVertically) {
                        Text(text = "$steps", style = GlanceTheme.typography.displayLarge)
                        Text(text = "langkah hari ini", style = GlanceTheme.typography.bodyMedium)
                    }
                }
            }
        }
    }
}

Perbarui widget dengan jadwal wajar — jangan setiap menit:

Update berkala widget

val intent = Intent(context, StepsWidgetReceiver::class.java)
val pending = PendingIntent.getBroadcast(context, 0, intent, FLAG_IMMUTABLE)
updatePeriodic(context, pending, updatePeriodMillis = 30 * 60 * 1000L)

#Widget iOS dengan WidgetKit

WidgetKit memakai Timeline — daftar snapshot masa depan yang dipilih sistem sesuai kondisi:

struct StepsProvider: TimelineProvider {
    func placeholder(in context: Context) -> StepsEntry {
        StepsEntry(date: Date(), steps: 8000)
    }
 
    func getTimeline(in context: Context,
                     completion: @escaping (Timeline<StepsEntry>) -> Void) {
        let steps = stepsRepository.todaySteps()
        let now = Date()
        let nextUpdate = Calendar.current.date(byAdding: .minute, value: 30, to: now)!
        let entry = StepsEntry(date: now, steps: steps)
        let timeline = Timeline(entries: [entry], policy: .after(nextUpdate))
        completion(timeline)
    }
}

Di iOS, widget bisa hadir di home screen maupun lock screen (iOS 16+) — peluang besar untuk data fitness.

#Wearables: Wear OS & watchOS

#Wear OS

Aplikasi Wear OS memakai Wear Compose (Jetpack Compose untuk layar kecil). Fokusnya: satu tindakan per layar, tombol besar, dan integrasi sensor:

Wear Compose: mulai workout

@Composable
fun WorkoutButton() {
    Button(
        onClick = { workoutService.start("run") },
        modifier = Modifier.fillMaxWidth()
    ) {
        Icon(Icons.Default.PlayArrow, contentDescription = "Mulai lari")
        Text("Mulai Lari")
    }
}

Selain aplikasi, Wear OS punya Tiles (info sekilas seperti widget mini) dan Complications (data kecil di watch face, misal jumlah langkah) — cara paling efektif untuk menampilkan data fitness tanpa membuka app.

#watchOS

watchOS dengan SwiftUI punya Complications (data di watch face) dan Live Activities yang muncul saat workout berlangsung:

struct StepsComplication: ComplicationTemplateView {
    var body: some ComplicationTemplate {
        ComplicationTemplateModularSmallSimpleText(text: "8.432")
    }
}

Saingan utama Fitku bukan aplikasi lain, melainkan layar watch face default — complication yang menampilkan langkah langsung dari watch face adalah fitur yang paling sering dipakai.

#Desain & Best Practices Widgets/Wearables

• Satu informasi utama per tampilan: widget yang penuh data tidak terbaca saat glance.
• Perbarui jarang & hemat: 15-60 menit cukup untuk langkah harian; data realtime tidak cocok untuk widget (episode 22 justru relevan di dalam app).
• Hormati dynamic color / tema gelap: adaptif agar tidak mencolok di home screen.
• Fallback saat data kosong: tampilkan "—" atau placeholder, bukan angka 0 yang menyesatkan.
• Deep link ke aksi: tap widget membuka halaman terkait di app (episode 12).

Widget langkah       → 1 angka + target progress, update tiap 30 menit
Watch complication   → langkah hari ini, update tiap 15 menit
Watch app            → mulai/jeda workout, detak jantung, sesuaikan dengan aksi cepat

#Common Pitfalls Widgets & Wearables

• Widget sebagai app mini: menempatkan seluruh navigasi di widget = tidak glanceable.
• Update terlalu sering: baterai terkuras, sistem membatasi frekuensi update.
• Mengabaikan keterbatasan watch: memaksa UI HP ke layar 1,5 inci = tombol tak tertekan.
• Sensor berjalan terus: GPS/detak jantung menyala di watch saat idle menghabiskan baterai — hidupkan hanya saat workout aktif.
• Tanpa sinkronisasi waktu yang tepat: widget watch yang telat 2 jam membuat pengguna kehilangan kepercayaan.

#Penutup

Pada episode 24 ini, kalian telah memperluas Fitku:

• Home screen widget dengan Jetpack Glance & WidgetKit yang glanceable dan hemat update.
• Aplikasi Wear OS dengan Wear Compose, Tiles, dan Complications.
• Aplikasi watchOS dengan SwiftUI, Complications, dan Live Activities.
• Best practice desain yang menghormati baterai dan ukuran layar.

Sekarang Fitku sudah ada di HP, di home screen, dan di pergelangan tangan. Tapi semua itu hanya berguna jika bisa dipakai semua orang — di episode 25 kita pelajari Accessibility Mobile dengan TalkBack/VoiceOver, touch targets, dan dynamic type. Sampai jumpa!