MOBILE DEV · BAB 9 · AI API INTEGRATION
Kelas 11 · Semester 2 · Flutter
AI
API
{ }
BAB 9

AI API INTEGRATION

Menghubungkan aplikasi Flutter dengan kecerdasan buatan modern: OpenAI, Gemini, Claude, & DeepSeek.

OpenAIGeminiClaudeDeepSeek

Tekan untuk mulai

Peta Materi

Roadmap BAB 9

Perjalanan kita dari konsep dasar AI API hingga membangun Mini Project AI Assistant.

01 · Fondasi
Apa itu AI API & cara kerjanya
02 · Provider
OpenAI · Gemini · Claude · DeepSeek
03 · Teknik
Prompt Engineering & Chat Completion
04 · Lanjut
Streaming · Chatbot · Summary · OCR
05 · Project
Mini Project AI Assistant App
06 · Evaluasi
Rangkuman & 3 Tugas Praktik
Yang Akan Kamu Kuasai
  • Memanggil 4 AI API populer dari Flutter
  • Membuat chatbot dengan respons real-time
  • Menerapkan streaming response (huruf per huruf)
  • Menggabungkan AI dengan MLKit (OCR pintar)
  • Membangun aplikasi AI Assistant utuh
  • Menulis prompt yang efektif & aman

📌 Prasyarat: BAB 1–8 (REST API, JSON, State Mgmt, Clean Arch, MLKit).

Konsep Dasar

Apa itu AI API?

API yang memberi aplikasimu akses ke "otak" kecerdasan buatan tanpa perlu melatih model sendiri.

Analogi: Pelayan Restoran Cerdas 🍽️
🍕

Kamu (aplikasi) tidak perlu tahu cara memasak. Kamu cukup memesan ke pelayan (API), dan dapur AI raksasa di belakang yang menyiapkan hasilnya.

Penjelasan Analogi
  • Kamu = Aplikasi Flutter — si pemesan
  • Pesanan = Prompt — permintaan yang kamu kirim
  • Pelayan = AI API — perantara request/response
  • Dapur = Model AI — GPT, Gemini, dll (super besar)
  • Hidangan = Response — jawaban AI dalam bentuk JSON

Intinya: kita berkomunikasi lewat HTTP request (POST) dan menerima JSON response — persis seperti REST API di BAB 1, tapi "isinya" cerdas.

Provider 1/4

OpenAI API (GPT)

Standar industri. Model GPT untuk chat, ringkasan, dan reasoning umum.

Analogi: Penerjemah Serbabisa 🌐

Seperti penerjemah jenius yang mengerti bahasa manusia & mengubahnya jadi jawaban tepat. Kamu cukup kirim teks, ia balas teks.

Demo Output
Apa itu Flutter?
Flutter adalah framework UI dari Google untuk membuat aplikasi multiplatform dari satu basis kode Dart. 🚀
openai_service.dart
import 'package:http/http.dart' as http;
import 'dart:convert';

class OpenAIService {
  final apiKey = "YOUR_API_KEY_HERE";
  final url = Uri.parse(
    "https://api.openai.com/v1/chat/completions");

  Future<String> ask(String prompt) async {
    final res = await http.post(url,
      headers: {
        "Authorization": "Bearer $apiKey",
        "Content-Type": "application/json",
      },
      body: jsonEncode({
        "model": "gpt-4o-mini",
        "messages": [
          {"role": "user", "content": prompt}
        ],
      }),
    );
    final data = jsonDecode(res.body);
    return data["choices"][0]
        ["message"]["content"];
  }
}
Provider 2/4

Gemini API (Google)

Multimodal — bisa memahami teks, gambar, dan punya package resmi Flutter.

Analogi: Detektif Multi-Indra 🔍

Bukan cuma membaca, Gemini bisa "melihat" gambar & mendengar konteks. Seperti detektif yang memakai semua indranya untuk menyimpulkan.

Demo Output
[🖼️ foto kucing] Hewan apa ini?
Itu seekor kucing oranye, kemungkinan ras tabby. 🐱
gemini_service.dart
// pubspec: google_generative_ai: ^0.4.0
import 'package:google_generative_ai/'
       'google_generative_ai.dart';

class GeminiService {
  final model = GenerativeModel(
    model: "gemini-1.5-flash",
    apiKey: "YOUR_API_KEY_HERE",
  );

  Future<String> ask(String prompt) async {
    final res = await model.generateContent(
      [Content.text(prompt)],
    );
    return res.text ?? "(kosong)";
  }
}
Provider 3/4

Claude API (Anthropic)

Unggul di teks panjang, penalaran hati-hati, dan jawaban yang aman serta terstruktur.

Analogi: Penasihat Bijak 🧙

Seperti penasihat senior yang membaca dokumen tebal lalu memberi ringkasan teliti & pertimbangan matang — fokus pada keamanan jawaban.

Demo Output
Ringkas artikel 5 halaman ini.
Tentu. Tiga poin utamanya: (1) ... (2) ... (3) ... ✍️
claude_service.dart
import 'package:http/http.dart' as http;
import 'dart:convert';

class ClaudeService {
  final key = "YOUR_API_KEY_HERE";
  final url = Uri.parse(
    "https://api.anthropic.com/v1/messages");

  Future<String> ask(String prompt) async {
    final res = await http.post(url,
      headers: {
        "x-api-key": key,
        "anthropic-version": "2023-06-01",
        "content-type": "application/json",
      },
      body: jsonEncode({
        "model": "claude-3-5-sonnet-20241022",
        "max_tokens": 1024,
        "messages": [
          {"role": "user", "content": prompt}
        ],
      }),
    );
    final d = jsonDecode(res.body);
    return d["content"][0]["text"];
  }
}
Provider 4/4

DeepSeek API

Hemat biaya & kuat untuk coding/reasoning. Formatnya kompatibel dengan OpenAI.

Analogi: Insinyur Efisien ⚙️

Seperti insinyur yang menyelesaikan masalah teknis dengan biaya rendah. Karena formatnya = OpenAI, kamu cukup ganti URL & model.

Demo Output
Buatkan fungsi Dart untuk cek bilangan prima.
bool isPrime(int n){...} ✅ Berikut implementasinya:
deepseek_service.dart
import 'package:http/http.dart' as http;
import 'dart:convert';

class DeepSeekService {
  final key = "YOUR_API_KEY_HERE";
  // Endpoint mirip OpenAI
  final url = Uri.parse(
    "https://api.deepseek.com/chat/completions");

  Future<String> ask(String prompt) async {
    final res = await http.post(url,
      headers: {
        "Authorization": "Bearer $key",
        "Content-Type": "application/json",
      },
      body: jsonEncode({
        "model": "deepseek-chat",
        "messages": [
          {"role": "user", "content": prompt}
        ],
      }),
    );
    final d = jsonDecode(res.body);
    return d["choices"][0]["message"]["content"];
  }
}
Perbandingan

Memilih AI API yang Tepat

Setiap provider punya kekuatan berbeda. Pilih sesuai kebutuhan project-mu.

ProviderKeunggulanPackage/CaraCocok Untuk
OpenAISerbaguna, ekosistem besarhttp (REST)Chatbot umum, asisten
GeminiMultimodal (teks+gambar)google_generative_aiAnalisis gambar + teks
ClaudeTeks panjang, aman, telitihttp (REST)Ringkasan dokumen
DeepSeekMurah, kuat di codinghttp (OpenAI-compatible)Asisten coding hemat

💡 Tips: Buat abstract class AIService agar bisa ganti provider tanpa ubah UI (lihat Mini Project).

Teknik Inti

Prompt Engineering

Seni menyusun perintah agar AI memberi jawaban yang tepat & konsisten.

Analogi: Chef & Resep 👨‍🍳
👨‍🍳

Resep detail → masakan konsisten. Resep asal → hasil acak. Prompt = resep untuk AI.

Anatomi Prompt yang Baik
  • Peran: "Kamu adalah guru Bahasa Indonesia."
  • Tugas: "Perbaiki ejaan kalimat berikut."
  • Konteks: "Untuk siswa SMK kelas 11."
  • Format: "Jawab dalam poin bullet."
  • Batasan: "Maksimal 100 kata."
// System prompt menetapkan "peran" AI
"messages": [
  {"role":"system",
   "content":"Kamu tutor Flutter yang ramah."},
  {"role":"user",
   "content":"Jelaskan StatelessWidget."},
]
Alur Data

Chat Completion

Pola dasar: kirim daftar pesan → AI melengkapi pesan berikutnya.

Flowchart Alur Request → Response
📱User Input
📦Build JSON
(messages)
🌐POST ke
AI API
🧠Model
Proses
📥JSON
Response
💬Tampil
di UI
chat_completion.dart
// "messages" menyimpan SELURUH riwayat percakapan
List<Map> history = [];

Future<String> chat(String userMsg) async {
  history.add({"role":"user", "content": userMsg});   // 1. simpan input
  final reply = await service.askWithHistory(history); // 2. kirim semua
  history.add({"role":"assistant", "content": reply}); // 3. simpan balasan
  return reply;  // AI "ingat" konteks karena history dikirim ulang
}
Respons Real-time

Streaming Response

Jawaban muncul sepotong demi sepotong (token), bukan menunggu selesai semua.

Analogi: Teks Keluar Satu Per Satu ⌨️

Seperti orang mengetik di depanmu — kamu baca sambil ia menulis. Terasa cepat & hidup, tak perlu menunggu paragraf utuh.

Demo Streaming
 
streaming.dart
// Gunakan Stream + StreamBuilder di UI
Stream<String> askStream(String prompt) async* {
  final req = http.Request("POST", url)
    ..headers.addAll(headers)
    ..body = jsonEncode({
      "model": "gpt-4o-mini",
      "stream": true,   // kunci streaming!
      "messages": [{"role":"user","content":prompt}],
    });
  final res = await req.send();
  await for (final chunk in
      res.stream.transform(utf8.decoder)) {
    yield chunk;   // kirim potongan ke UI
  }
}

// Di widget:
StreamBuilder<String>(
  stream: askStream(prompt),
  builder: (ctx, snap) => Text(snap.data ?? ""),
);
Aplikasi 1

AI Chatbot

Arsitektur chatbot: UI ↔ State ↔ Service ↔ AI API.

Arsitektur (Flowchart)
🖥️ChatScreen
(UI)
🔄ChatProvider
(State)
🔌AIService
☁️AI API
chat_screen.dart
class ChatScreen extends StatelessWidget {
  Widget build(ctx) {
    final p = ctx.watch<ChatProvider>();
    return Scaffold(
      appBar: AppBar(title: Text("AI Chat")),
      body: ListView.builder(
        itemCount: p.messages.length,
        itemBuilder: (_, i) => ChatBubble(p.messages[i]),
      ),
      bottomNavigationBar: MessageInput(
        onSend: (text) => p.send(text),  // panggil provider
      ),
    );
  }
}
Aplikasi 2

AI Assistant

Chatbot + "kemampuan khusus": jadwal, catatan, ringkasan — diarahkan lewat system prompt.

Konsep

Assistant = chatbot dengan persona & tugas spesifik. Kita "kunci" perannya lewat system prompt sehingga jawabannya fokus.

Ingatkan rapat besok jam 9.
📅 Baik! Pengingat "Rapat" diset besok 09:00.
assistant.dart
const systemPrompt = """
Kamu asisten pribadi siswa SMK.
Tugas: bantu jadwal, catatan, & belajar.
Jawab singkat, ramah, Bahasa Indonesia.
""";

Future<String> assist(String q) {
  return service.askWithHistory([
    {"role":"system","content": systemPrompt},
    {"role":"user",  "content": q},
  ]);
}
Aplikasi 3

AI Summary

Mengubah teks panjang menjadi ringkasan padat — ideal untuk berita & artikel.

Cara Kerja
  • Ambil teks panjang (artikel/berita)
  • Bungkus dengan instruksi "ringkas jadi N poin"
  • Kirim ke AI API
  • Tampilkan ringkasan ke pengguna
[artikel 800 kata]
📝 Ringkasan 3 poin: 1)… 2)… 3)…
summary.dart
Future<String> summarize(String article) {
  final prompt = """
Ringkas teks berikut menjadi 3 poin utama
dalam Bahasa Indonesia yang jelas:

$article
""";
  return service.ask(prompt);
}

// Tips: batasi panjang input agar hemat token
if (article.length > 6000) {
  article = article.substring(0, 6000);
}
Integrasi BAB 8

AI OCR Enhancement

Gabungkan MLKit (baca teks dari gambar) dengan AI (rapikan & pahami hasilnya).

Alur: Foto → Teks Mentah → Teks Rapi
📷Ambil Foto
🔤MLKit OCR
(teks mentah)
🧠AI Perbaiki
& Strukturkan
Teks Bersih
+ Ringkasan
ocr_enhance.dart
// 1. MLKit (BAB 8) baca teks dari gambar
final recognizer = TextRecognizer();
final result = await recognizer.processImage(inputImage);
String rawText = result.text;   // sering berantakan

// 2. AI merapikan & menstrukturkan
final prompt = """
Perbaiki typo & rapikan hasil OCR berikut,
lalu buat poin ringkas:

$rawText
""";
String clean = await aiService.ask(prompt);
Mini Project

AI Assistant App

Proyek puncak BAB 9: aplikasi asisten cerdas yang menggabungkan semua yang dipelajari.

🎯 Tujuan

Aplikasi chat AI dengan riwayat, streaming, & fitur ringkasan.

🧩 Fitur
  • Chat real-time
  • Ganti provider AI
  • Ringkas teks
  • Riwayat tersimpan
🛠️ Stack
  • Provider (state)
  • http / packages AI
  • Clean Architecture
📦 Struktur

data / domain / presentation — sesuai BAB 6.

Mini Project · Arsitektur

Clean Architecture + AI Layer

Lapisan yang rapi membuat AI mudah diganti tanpa menyentuh UI.

🎨Presentation
(UI + Provider)
🧠Domain
(UseCase)
🗄️Data
(Repository)
☁️AI Layer
(Service)
ai_service.dart (abstraksi)
// Abstract: UI tak peduli provider apa di belakang
abstract class AIService {
  Future<String> ask(String prompt);
  Stream<String> askStream(String prompt);
}

// Tinggal pilih implementasi:
AIService service = OpenAIService();   // atau GeminiService(), dst
Mini Project · Implementasi

Step-by-Step Code

Inti logic: Provider yang mengelola pesan & memanggil AIService.

chat_provider.dart
class ChatProvider extends ChangeNotifier {
  final AIService ai;
  ChatProvider(this.ai);

  final List<Message> messages = [];
  bool loading = false;

  Future<void> send(String text) async {
    messages.add(Message.user(text));
    loading = true; notifyListeners();

    final reply = await ai.ask(text);
    messages.add(Message.ai(reply));

    loading = false; notifyListeners();
  }
}
message.dart
class Message {
  final String text;
  final bool isUser;
  Message(this.text, this.isUser);
  factory Message.user(t)=>Message(t,true);
  factory Message.ai(t)=>Message(t,false);
}
main.dart
ChangeNotifierProvider(
  create: (_) => ChatProvider(OpenAIService()),
  child: ChatScreen(),
);
Mini Project · Hasil

Demo UI Akhir

Tampilan aplikasi AI Assistant yang sudah jadi.

🤖 AI Assistant
Halo! Aku asisten AI-mu. Ada yang bisa dibantu? 👋
Ringkas berita teknologi hari ini.
Tentu! 3 berita utama: 1) Rilis Flutter 4 … 2) AI on-device makin cepat … 3) …
Ketik pesan…
Checklist Fitur ✔
  • Chat dengan AI (OpenAI/Gemini/Claude/DeepSeek)
  • Riwayat percakapan tersimpan di state
  • Loading indicator saat menunggu balasan
  • Provider mudah diganti (abstraksi AIService)
  • Fitur ringkasan teks terintegrasi
  • UI bersih bertema gelap

🎉 Selamat! Kamu telah membangun aplikasi AI utuh dari nol.

Rangkuman

Mind Map BAB 9

Semua konsep penting dalam satu pandangan.

AI API
BAB 9
🔌 4 Provider (OpenAI/Gemini/Claude/DeepSeek)
✍️ Prompt Engineering
💬 Chat Completion
⌨️ Streaming Response
🤖 Chatbot & Assistant
📝 Summary
🔤 OCR + AI
🏗️ Clean Architecture + AI Layer
Evaluasi · Tugas 1 dari 3
01

AI Chatbot Sederhana

Buat aplikasi Flutter berisi satu layar chat yang terhubung ke OpenAI API. Pengguna mengetik pertanyaan, AI menjawab di bubble chat.

Ketentuan
  • Gunakan http package & chat completion
  • Tampilkan pesan user & AI dengan bubble berbeda
  • Ada loading indicator saat menunggu
  • API key disimpan sebagai konstanta (placeholder)
Fungsi chat: 40%UI bubble: 25%Loading state: 15%Kerapian kode: 20%
Evaluasi · Tugas 2 dari 3
02

Implementasi Streaming

Kembangkan chatbot Tugas 1 agar jawaban AI muncul secara streaming (huruf per huruf) menggunakan Stream & StreamBuilder.

Ketentuan
  • Set "stream": true pada request body
  • Gunakan http.Request().send() untuk membaca stream
  • Tampilkan teks bertambah real-time di UI
  • Bandingkan UX-nya vs respons biasa (tulis di laporan)
Stream berfungsi: 45%StreamBuilder: 25%UX real-time: 15%Laporan: 15%
Evaluasi · Tugas 3 dari 3
03

Mini Project: AI Summary App

Bangun aplikasi yang menerima teks berita (paste/input), lalu menampilkan ringkasan 3 poin dari AI. Terapkan struktur Clean Architecture sederhana.

Ketentuan
  • Input: TextField untuk menempel artikel
  • Proses: kirim prompt ringkasan ke AI API
  • Output: tampilkan 3 poin ringkasan rapi
  • Pisahkan layer: data / domain / presentation
  • Gunakan abstraksi AIService (bebas pilih provider)
Fungsi summary: 35%Arsitektur: 30%UI/UX: 20%Dokumentasi: 15%

🏁 Selesai BAB 9 — kamu kini mampu mengintegrasikan AI ke aplikasi Flutter nyata!

01
SLIDE / 23