Belajar Mobile Developer - Navigation & Deep Linking

#Pendahuluan

Aplikasi Fitku sekarang punya data dan penyimpanan — tapi bagaimana pengguna berpindah antar layar dengan benar? Di episode 12 ini kita membangun navigasi: stack, tab, drawer, lalu deep linking — kemampuan membuka layar tertentu dari notifikasi atau URL. Navigasi yang buruk membuat pengguna tersesat; navigasi yang baik terasa alami tanpa disadari.

Mengapa deep linking penting? Karena ini jembatan antara aplikasi dan dunia luar: notifikasi "workout kamu dimulai" harus bisa langsung membuka layar workout yang tepat, bukan membuka ulang beranda.

#Pola Navigasi Dasar

#Stack (Navigasi hierarkis)

Layar ditumpuk: beranda → detail → edit. Tombol back mem-pop tumpukan. Ini pola paling umum:

Home ─▶ WorkoutDetail ─▶ EditWorkout
                          ▲
   └───────── back ───────┘

#Tab (Kategori sejajar)

Layar utama dalam tab: Beranda, Workout, Progres, Profil. Sudah kita terapkan di episode 3 (Android) dengan NavigationBar.

#Drawer (Menu samping)

Menu geser dari sisi layar — cocok untuk aksi jarang dipakai (Pengaturan, Bantuan, Logout).

Kombinasi ketiganya wajar dalam satu aplikasi: tab sebagai kerangka utama, stack di dalam tiap tab, drawer untuk menu tambahan.

#Navigasi per Platform

#Android: Navigation Compose

Navigasi stack + argumen

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(onOpenWorkout = { id ->
        navController.navigate("workout/$id")
    }) }
    composable(
        route = "workout/{workoutId}",
        arguments = listOf(navArgument("workoutId") { type = NavType.StringType })
    ) { WorkoutDetailScreen() }
}

#iOS: NavigationStack

NavigationStack {
    List(workouts) { workout in
        NavigationLink("\(workout.name)") {
            WorkoutDetailView(workout: workout)
        }
    }
    .navigationTitle("Workout")
}

#React Native: Expo Router

// app/_layout.tsx
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Beranda" }} />
      <Stack.Screen name="workout/[id]" options={{ title: "Detail Workout" }} />
    </Stack>
  );
}

Expo Router (2026) berbasis file — setiap file di folder app/ adalah route. Deep linking langsung terdukung otomatis.

#Flutter: go_router

final router = GoRouter(
  initialLocation: '/home',
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/workout/:id',
      builder: (context, state) => WorkoutDetailScreen(
          workoutId: state.pathParameters['id']!),
    ),
  ],
);

go_router juga mendukung redirect, guard, dan nested navigation.

#Deep Linking

Deep linking membuka layar spesifik saat aplikasi dibuka dari URL (custom scheme atau https) atau notifikasi.

#Android: intent-filter

<activity android:name=".WorkoutDetailActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:scheme="fitku" android:host="workout" />
    </intent-filter>
</activity>

#iOS: URL Scheme & Universal Links

Deklarasikan scheme di Info.plist, atau pakai Universal Links (https) untuk link yang terverifikasi. SwiftUI menerimanya via onOpenURL:

.onOpenURL { url in
    // fitku://workout/42
    if url.scheme == "fitku", let id = url.host == "workout" ? pathComponent(url) : nil {
        navigateTo(workoutId: id)
    }
}

#Navigasi Saat Notifikasi Datang

Pola umum: aplikasi di background menerima notifikasi → user tap → aplikasi harus tahu "buka layar X". Solusinya: notifikasi membawa payload route, dan navigator memprosesnya setelah aplikasi siap.

Notifikasi (payload: workout/42)
   │ tap
   ▼
Aplikasi dibuka / di-foreground
   │
   ▼
Parser payload → navController.navigate("workout/42")
   │
   ▼
Layar Detail Workout 42 tampil

Payload notifikasi di episode 14 akan memakai pola ini — penting disiapkan sejak sekarang.

#Common Pitfalls Navigasi

• Nested navigation yang salah: tab di dalam stack bisa memunculkan tombol back ganda — pahami hierarki.
• Argumen tidak divalidasi: workout/{id} dengan id invalid → crash. Validasi sebelum render.
• Back stack bocor: melakukan navigate berulang saat user memencet tombol cepat → tumpukan menumpuk. Gunakan popUpTo/launchMode.
• State hilang saat rotate/restore: kombinasikan navigation dengan state saving (episode 9).

#Penutup

Pada episode 12 ini, kalian telah membangun jalur pengguna:

• Stack untuk hierarki, tab untuk kategori, drawer untuk menu tambahan — dan kombinasinya.
• Implementasi di tiap stack: Navigation Compose, NavigationStack, Expo Router, go_router.
• Deep linking dari URL dan notifikasi, dengan payload route yang terpusat.

Di episode 13 selanjutnya kita mengamankan aplikasi: Security Mobile — secure storage (Keychain/Keystore), certificate pinning, dan obfuscation untuk mengeraskan Fitku. Sampai jumpa!