Tujuan Pembelajaran

Memahami perbedaan streaming vs batch response UX
Mampu mengimplementasikan streaming text dengan animasi yang engaging
Mampu mendesain loading states yang informatif

Analogi

Diagram


      Batch Loading (Buruk): Pesan makanan -> pelayan hilang 30 menit -> semua makanan datang sekaligus. User: "Kok lama? Sudah benar?"

Streaming (Baik): 2 menit minuman -> 5 menit appetizer -> 15 menit main course. User: "Oke, progress terlihat, tidak cemas."

Streaming seperti restoran bagus — makanan datang bertahap. User tidak cemas karena ada progress. Batch loading seperti restoran buruk.

Penjelasan Konsep

Streaming UX: respons AI ditampilkan kata per kata secara real-time. Ini bukan hanya teknis, tapi psikologi.

Kenapa penting: perceived performance (user merasa lebih cepat), early consumption (bisa baca sebelum AI selesai), trust building (lihat AI ‘berpikir’), cancellation (bisa stop kalau arah salah).

Komponen: (1) Typing indicator — animasi titik berkedip, idealnya <500ms. (2) Progressive text — kata per kata dengan fade-in, bukan typewriter lambat. (3) Streaming cursor — kursor berkedip di akhir teks. (4) Skeleton vs Spinner — konten terstruktur: skeleton loader. Teks generative: streaming text. JANGAN full-page spinner blocking. (5) Abort & Regenerate controls — tombol Stop dan Regenerate. (6) Partial content — tampilkan segera setelah bagian pertama selesai.

Edge cases: error mid-stream (tampilkan teks sudah ada + error message), disconnect (reconnect + lanjutkan dari chunk terakhir), very long response (collapse bagian lama).

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan streaming vs batch response UX., mampu mengimplementasikan streaming text dengan animasi yang engaging., dan mampu mendesain loading states yang informatif. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

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

Cara Membayangkannya

Streaming seperti restoran bagus — makanan datang bertahap. User tidak cemas karena ada progress. Batch loading seperti restoran buruk. 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 typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Streaming text: fetch dengan ReadableStream reader, append chunk ke state, render real-time. Kursor berkedip menunjukkan teks masih berlanjut. Typing indicator muncul sebelum kata pertama.

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

typescript

// Streaming chat component dengan React
function StreamingChat() {
  const [text, setText] = useState('');
  const [streaming, setStreaming] = useState(false);

  async function handleSubmit(prompt: string) {
    setText('');
    setStreaming(true);
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ prompt }),
    });
    const reader = response.body!.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      setText(prev => prev + decoder.decode(value));
    }
    setStreaming(false);
  }

  return (
    <div>
      {text && <p>{text}{streaming && <span className="cursor-blink">|</span>}</p>}
      {streaming && !text && <TypingIndicator />}
    </div>
  );
}

Penjelasan Kode

Streaming text: fetch dengan ReadableStream reader, append chunk ke state, render real-time. Kursor berkedip menunjukkan teks masih berlanjut. Typing indicator muncul sebelum kata pertama.

Prompt AI

Implementasikan komponen chat dengan streaming: typing indicator, kata per kata fade-in, kursor berkedip, tombol Stop, error handling (teks yang sudah tampil tetap ada).

Pertanyaan Reflektif

Coba produk AI favoritmu. Bagaimana mereka tampilkan loading/streaming? Ada yang bikin frustrasi? Kenapa?