Lewati ke isi

Pengenalan API & HTTP Request

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, siswa mampu: 1. Memahami konsep dasar API (Application Programming Interface) 2. Membedakan peran Client (Front End) dan Server (Back End) 3. Membaca dan menulis format data JSON dengan benar 4. Menggunakan tools seperti Thunder Client / Postman untuk testing API 5. Memahami HTTP Methods dasar: GET, POST, PUT, DELETE

Pertanyaan Pemantik

Pernahkah kalian berpikir, bagaimana aplikasi Gojek bisa tahu posisi driver secara real-time?

Atau, bagaimana Instagram di HP kalian bisa menampilkan foto yang baru saja di-upload teman kalian dari laptopnya?

Diskusikan singkat (3–5 menit) dengan teman sebangku.

1. Analogi API: Restoran

Untuk memahami API, bayangkan sebuah Restoran:

  1. Pelanggan (Client / Aplikasi Flutter): Kalian duduk di meja dan ingin memesan makanan. Kalian tidak boleh masuk ke dapur sembarangan.

  2. Dapur (Server / Database): Tempat bahan makanan disimpan dan dimasak. Koki di sini yang punya akses penuh ke bahan-bahan.

  3. Pelayan (API): Jembatan antara Pelanggan dan Dapur.

    • Pelayan mencatat pesanan dari Pelanggan (Request).
    • Pelayan membawa pesanan ke Dapur.
    • Pelayan membawa makanan jadi dari Dapur ke Pelanggan (Response).

Kesimpulan: Aplikasi Flutter kita (Client) tidak bisa langsung mengotak-atik database. Kita butuh API untuk meminta data atau mengirim data ke server.

2. Bahasa Komunikasi: JSON

Agar Client dan Server nyambung, mereka harus pakai "bahasa" yang sama. Bahasa yang paling umum dipakai saat ini adalah JSON (JavaScript Object Notation).

Bentuknya mirip Map di Dart (Key-Value pair).

Contoh Data Siswa dalam JSON: 

{
  "id": 1,
  "nama": "Budi Santoso",
  "kelas": "XI PPLG 1",
  "aktif": true,
  "hobi": ["Coding", "Futsal", "Tidur"]
}

Aturan Penting JSON: 1. Data dibungkus kurung kurawal { } (untuk object) atau kurung siku [ ] (untuk list/array). 2. Key (seperti "nama") wajib pakai kutip dua "". 3. Value bisa berupa string, number, boolean (true/false), array, atau object lain. 4. Tidak boleh ada koma di item terakhir.

3. Jenis-Jenis Request (HTTP Methods)

Kalau di restoran kita bisa "Pesan Makanan", "Komplain", atau "Batalkan Pesanan", di API kita punya istilah khusus yang disebut HTTP Methods:

Method Fungsi Analogi Database
GET Mengambil data Read (SELECT)
POST Mengirim data baru Create (INSERT)
PUT / PATCH Mengupdate data Update (UPDATE)
DELETE Menghapus data Delete (DELETE)

4. Persiapan Tools

Kita belum akan coding Flutter hari ini. Kita akan fokus memastikan API berjalan dengan baik menggunakan tools.

Pilih salah satu tools: 1. Thunder Client (Extension di VS Code - Direkomendasikan karena ringan). 2. Postman (Aplikasi terpisah - Lebih lengkap tapi berat).

Instalasi Thunder Client

  1. Buka VS Code.
  2. Masuk menu Extensions.
  3. Cari "Thunder Client".
  4. Install.

5. Latihan: Testing Public API

Kita akan menggunakan ReqRest (https://reqres.in), sebuah website API gratis untuk latihan.

A. Mengambil Data User (GET)

  1. Buka Thunder Client -> New Request.
  2. Ganti method jadi GET.
  3. Masukkan URL: https://reqres.in/api/users?page=1
  4. Klik Send.

Lihat di panel kanan (Response). Kalian akan mendapatkan data JSON berisi list user: 

{
  "page": 1,
  "data": [
    {
      "id": 1,
      "email": "george.bluth@reqres.in",
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://reqres.in/img/faces/1-image.jpg"
    }
    ...
  ]
}

B. Membuat User Baru (POST)

  1. Buat New Request lagi.
  2. Ganti method jadi POST.
  3. Masukkan URL: https://reqres.in/api/users
  4. Klik tab Body -> pilih Json.
  5. Masukkan data user yang mau dibuat: 
    {
  "name": "Siswa SMK",
  "job": "Flutter Developer"
}
  6. Klik Send.
  7. Lihat response. Status code harusnya 201 Created, dan kalian dapat balasan ID baru.

Tugas Praktik

  1. Install Thunder Client / Postman.
  2. Coba lakukan GET Single User (https://reqres.in/api/users/2).
  3. Coba lakukan DELETE User (https://reqres.in/api/users/2). Perhatikan status code yang muncul (biasanya 204 No Content).
  4. Screenshot hasil response point 2 dan 3, lalu simpan sebagai bukti praktik.

Refleksi Pembelajaran

Tulis jawaban singkat: 1. Apa jadinya jika Client dan Server menggunakan format data yang berbeda (bukan JSON)? 2. Mengapa kita perlu tools seperti Thunder Client sebelum mulai coding di Flutter?

Penutup

Hari ini kita sudah belajar cara "berbicara" dengan Server.

Pada pertemuan berikutnya, kita akan membawa kemampuan ini ke dalam kode Dart dan menghubungkannya dengan aplikasi Flutter yang sudah kita buat sebelumnya.