Tujuan Pembelajaran

Setelah pertemuan ini, mahasiswa mampu:

1. Menerangkan konsep integrasi model AI ke aplikasi mobile.
2. Merancang antarmuka chat dengan respons streaming.
3. Mengintegrasikan OCR, Speech-to-Text, dan pengertian gambar.
4. Menerapkan prompt design yang aman dan efektif.
5. Menangani privasi, biaya, penanganan kesalahan, dan desain fallback.

Mengapa Integrasi Fitur AI?

AI kini bukan lagi sekadar uji coba, melainkan menjadi bagian inti aplikasi modern:

• Chat asisten, tanya jawab dalam waktu nyata
• OCR, baca teks dari gambar atau dokumen
• Speech-to-Text, ubah input suara menjadi teks
• Image Understanding, deskripsi dan analisis gambar
• Rekomendasi, saran personalisasi berdasarkan data pengguna

Fitur AI harus aman, telah diuji, dan mempunyai cadangan saat layanan tidak tersedia.

Arsitektur Integrasi AI (Mobile)

+----------------+      HTTPS/wss      +----------------+
|   Flutter UI   | <-----------------> |  Layer API AI  |
|  (Chat, OCR,   |      (Dio/http)     |  (LLM, OCR,    |
|   STT, Gambar) |                     |   STT, Vision) |
+----------------+                     +----------------+
        |                                      |
        | Kunci API (penyimpanan aman)         | Respons
        v                                      v
+----------------+      Opsional      +----------------+
|  Cache Lokal   | <-----------------> |   Backend    |
|  (Hive/SQLite) |     (batch)        |  (autentikasi, |
|                |                     |  log)         |
+----------------+                     +----------------+

• Kunci API tidak boleh disimpan langsung di dalam kode sumber
• Gunakan flutter_secure_storage untuk menyimpan token dan kunci
• Pertimbangkan biaya per permintaan dan batas laju (rate limit)

Prompt Design untuk Mobile

Tips: buat prompt pendek dan spesifik, terjemahkan hasil jika perlu, dan validasi hasil sebelum ditampilkan kepada pengguna.

Antarmuka Chat dan UX

[Pengguna: Halo, ada kegiatan kampus besok?]
        |
        v
[AI mengetik...]  <-- respons streaming (animasi gelembung)
        |
        v
[AI: Besok ada mata kuliah Pemrograman Mobile pukul 08.00]

Pertimbangan UX:

• Respons streaming dengan StreamBuilder
• Indikator "mengetik" saat menunggu jawaban
• Gulir otomatis ke pesan terbaru
• Tombol ulang (regenerate) dan salin
• Kondisi kosong saat belum ada percakapan

OCR, Speech-to-Text, dan Pengertian Gambar

OCR (Optical Character Recognition):

• Ambil gambar dari kamera atau galeri
• Kirim ke AI API untuk ekstraksi teks
• Digunakan untuk: KTM, struk, dokumen, papan pengumuman

Speech-to-Text:

• Rekam suara pengguna
• Ubah ke teks melalui AI API
• Digunakan untuk: input cepat, aksesibilitas

Pengertian Gambar:

• Unggah gambar dan minta deskripsi
• Contoh: "Apa yang ada di gambar ini?"
• Respons: "Gambar menunjukkan mahasiswa di perpustakaan sambil memegang buku."
• Digunakan untuk: deskripsi produk, identifikasi objek, aksesibilitas bagi pengguna dengan disabilitas visual

final hasil = await aiService.ekstrakTeks(fileGambar);
final teks = await aiService.ucapkanSuara(fileAudio);

Privasi, Biaya, Penanganan Kesalahan, dan Fallback

Contoh fallback:

try {
  final respons = await aiService.tanya(pertanyaan);
} catch (e) {
  showDialog(
    konteks: konteks,
    pembuat: (_) => AlertDialog(
      judul: const Text('Layanan AI Sibuk'),
      isi: const Text('Coba lagi nanti atau gunakan mode offline.'),
    ),
  );
}

Minggu Depan

Minggu 11: Optimasi Performa

Fitur AI terintegrasi
       |
       v
Pemrosesan rebuild widget
       |
       v
Penyimpanan gambar + pemuatan malas
       |
       v
Aplikasi lebih cepat dan efisien

Sasaran

Optimalkan performa aplikasi setelah fitur AI ditambahkan.

Bangun -> Verifikasi -> Jelaskan

Prinsip Pembelajaran Mobile

1. AI mengusulkan jawaban
2. Pengembang memverifikasi
3. Uji coba untuk konfirmasi
4. Perbaiki jika belum akurat
5. Jelaskan alasan keputusan

Jangan hanya bisa memakai AI.

Jadilah pengembang yang mampu menjelaskan fitur AI yang dibangun.

• Terapkan cache lokal untuk mengurangi panggilan berulang ke AI API