Project: Aplikasi Pertama — Todo List

Bangun aplikasi mobile pertama dari nol dengan semua konsep yang sudah dipelajari

Tujuan Pembelajaran

Mampu mengintegrasikan semua core concepts ke satu aplikasi lengkap
Memahami struktur proyek, state management, dan component composition
Mengerti alur build dan test di device

Analogi

Diagram


      Todo List = Aplikasi Pertama yang Sempurna:
- State management: useState untuk tasks
- User input: TextInput + Pressable
- List render: FlatList (belum perlu ScrollView?)
- Styling: StyleSheet + Flexbox
- Persistence: Alert (belum perlu AsyncStorage, itu nanti)

Ini bukan cuma todo list — ini adalah test integrasi dari semua konsep Module 42.

Todo list adalah proyek minimal yang menguji semua core concept — state, input, list, style, event handling. Perfect first project.

Penjelasan Konsep

Sekarang saatnya mengintegrasikan semua yang sudah dipelajari ke satu aplikasi. Todo list adalah proyek klasik karena: (1) state management sederhana (array of tasks), (2) user interaction lengkap (input, add, complete, delete), (3) list rendering, (4) styling dan layout.

Arsitektur: App.tsx sebagai root → TodoApp sebagai feature container → TodoInput (TextInput + add button) + TodoList (scrollable list) + TodoItem (individual task dengan checkbox + delete).

State: useState<Task[]>([]) — array of { id: string, text: string, completed: boolean }. Function: addTask(text), toggleTask(id), deleteTask(id).

Component composition: props drilling sederhana (pass handlers ke child). Tidak perlu state management library untuk skala ini.

Testing: build development build (eas build --platform all --profile development), install di device via QR code, test semua interaksi. Catat apa yang smooth dan apa yang broken.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu mengintegrasikan semua core concepts ke satu aplikasi lengkap., memahami struktur proyek, state management, dan component composition., dan mengerti alur build dan test di device. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Project, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Todo list adalah proyek minimal yang menguji semua core concept — state, input, list, style, event handling. Perfect first project. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. FlatList untuk list panjang (lazy render). useCallback untuk handler agar tidak re-create setiap render. UUID untuk task id (bukan Date.now di production).

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { useState } from "react";
import { View, Text, TextInput, Pressable, FlatList, StyleSheet } from "react-native";

type Task = { id: string; text: string; completed: boolean };

export default function TodoApp() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [text, setText] = useState("");

  const addTask = () => {
    if (!text.trim()) return;
    setTasks((prev) => [...prev, { id: Date.now().toString(), text, completed: false }]);
    setText("");
  };

  const toggleTask = (id: string) => {
    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Todo List</Text>
      <View style={styles.inputRow}>
        <TextInput value={text} onChangeText={setText} placeholder="Tambah task..." style={styles.input} />
        <Pressable onPress={addTask} style={styles.addBtn}>
          <Text style={styles.addText}>+</Text>
        </Pressable>
      </View>
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Pressable onPress={() => toggleTask(item.id)} style={styles.task}>
            <Text style={{ fontSize: 20, marginRight: 12 }}>{item.completed ? "✅" : "⬜"}</Text>
            <Text style={[styles.taskText, item.completed && styles.completed]}>{item.text}</Text>
          </Pressable>
        )}
      />
    </View>
  );
}

Penjelasan Kode

FlatList untuk list panjang (lazy render). useCallback untuk handler agar tidak re-create setiap render. UUID untuk task id (bukan Date.now di production).

Prompt AI

Review TodoApp code. Suggest improvements: (a) bagaimana menambahkan persistence ke AsyncStorage, (b) bagaimana menambahkan filter (all/active/completed), (c) bagaimana menambahkan swipe-to-delete gesture.

Pertanyaan Reflektif

Setelah selesai, tanya diri sendiri: bagaimana pengalaman membangun app mobile pertama dibandingkan web app pertama? Apa yang paling mengejutkan?