Sesi#2 Pemrograman Perangkat Mobile I – Siklus Hidup Aplikasi Mobile

1. Tujuan Pembelajaran

Mahasiswa mampu:

• Menjelaskan konsep siklus hidup aplikasi mobile.
• Menghubungkan Android lifecycle dengan lifecycle di React Native (component-based).
• Membuat project sederhana Expo untuk mengamati perubahan state/lifecycle.

2. Konsep Lifecycle

• Android Native (Java/Kotlin) → Activity lifecycle (onCreate, onStart, onResume, dll).
• React Native/Expo (JavaScript) → tidak ada Activity langsung, tapi ada Component Lifecycle.

🔑 Komponen utama di React (class-based):

• componentDidMount() → seperti onCreate, dipanggil saat komponen selesai di-render pertama kali.
• componentDidUpdate() → dipanggil saat ada perubahan state/props.
• componentWillUnmount() → dipanggil sebelum komponen dihapus (mirip onDestroy).

🔑 Hooks (functional component):

• useEffect(() => {...}, []) → seperti componentDidMount.
• useEffect(() => {...}, [state]) → seperti componentDidUpdate.
• Return cleanup di useEffect → seperti componentWillUnmount.

3. Praktikum dengan Expo

Step setup (sekali saja):

1. Install Node.js LTS.
2. Install Expo CLI: npm install -g expo-cli
3. Buat project baru: expo init lifecycle-demo cd lifecycle-demo expo start
4. Jalankan di Expo Go (mobile app Android/iOS) atau emulator jika ada.

4. Contoh kode lifecycle (React Native dengan Hooks)

// App.js
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  // mirip componentDidMount
  useEffect(() => {
    console.log("App mounted (mirip onCreate)");
    return () => {
      console.log("App unmounted (mirip onDestroy)");
    };
  }, []);

  // mirip componentDidUpdate
  useEffect(() => {
    console.log("Count berubah:", count);
  }, [count]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Lifecycle Demo</Text>
      <Text>Count: {count}</Text>
      <Button title="Tambah" onPress={() => setCount(count + 1)} />
    </View>
  );
}

👉 Output di console Expo menunjukkan kapan app mount, update, dan unmount.

5. Aktivitas Praktikum

1. Buat project baru dengan Expo.
2. Tambahkan kode lifecycle di atas.
3. Amati console:
   • Saat app pertama dijalankan → muncul “App mounted”.
   • Saat tekan tombol → muncul “Count berubah: X”.
   • Saat app ditutup → muncul “App unmounted”.
4. Diskusikan: bagaimana konsep ini mirip dengan Android lifecycle?

6. Manfaat

• Pemahaman cross-platform: meski pakai Expo, konsep lifecycle management tetap berlaku.
• Praktis: mahasiswa bisa mencoba di HP sendiri via Expo Go tanpa emulator berat.
• Dasar untuk project lebih lanjut: manajemen state & efek pada aplikasi nyata.

7. Tugas

• Buat app sederhana dengan dua state (misalnya: counter & status login).
• Tambahkan useEffect untuk memonitor perubahan keduanya.
• Kumpulkan screenshot console log + penjelasan perbedaan lifecycle Android vs React Native.

📌 Indikator OBE:

• Knowledge: Mahasiswa bisa menjelaskan persamaan & perbedaan lifecycle Android native vs React Native.
• Skill: Membuat app Expo dengan log lifecycle.
• Attitude: Menganalisis dan menyimpulkan praktik terbaik.