VERSI 1.0
OKTOBER 2025

PEMROGRAMAN MOBILE

MODUL 3 - Materi

API Call & Async Handling

DISUSUN OLEH:
Ali Sofyan Kholimi, M.Kom.
Faizal Qadri Trianto
Muhammad Hisyam Kamil

PENDAHULUAN

TUJUAN

1. Mengimplementasikan pemanggilan API (API Call) dan pengelolaan proses asinkron (Async Handling).
2. Menilai performa library HTTP serta kemudahan proses debugging pada operasi asinkron.

TARGET MODUL

1. Mahasiswa mampu membuat aplikasi sederhana yang memanfaatkan API menggunakan library http dan Dio.
2. Mahasiswa mampu membandingkan implementasi proses asinkron dengan pendekatan async-await dan callback chaining.

PERSIAPAN

1. Menggunakan API publik, seperti REST Countries atau OpenWeatherMap.
2. Menyiapkan Stopwatch atau DevTools Profiler untuk pencatatan waktu (logging) dan pelacakan kesalahan (error trace).

KEYWORDS

REST API, http, Dio, async-await, callback

TABLE OF CONTENTS

PENDAHULUAN

TUJUAN

TARGET MODUL

PERSIAPAN

KEYWORDS

TABLE OF CONTENTS

API CALL & ASYNC HANDLING

Pentingnya Desain Responsif pada Mobile

Implementasi API Call dengan http

Implementasi API Call dengan Dio

Dasar Asynchronous Programming

Simulasi Login (Async)

Rekap Materi

AKSES PROJECT & REFERENSI MODUL

CODELAB

Tugas

Instruksi

Catatan

KRITERIA & DETAIL PENILAIAN

API CALL & ASYNC HANDLING

Pentingnya Desain Responsif pada Mobile

Dalam dunia pengembangan modern, terdapat beberapa arsitektur komunikasi API seperti SOAP (Simple Object Access Protocol) dan GraphQL. Namun, yang paling banyak digunakan saat ini adalah REST (Representational State Transfer) dengan format data JSON (JavaScript Object Notation). REST memanfaatkan protokol HTTP standar untuk pertukaran data, sementara JSON dipilih karena formatnya ringan, mudah dibaca oleh manusia, dan mudah diproses oleh mesin.

1. Siklus Request–Response API

Tiga tahap utama:

1. Client mengirimkan request — menggunakan metode HTTP seperti GET, POST, PUT, DELETE.
2. Server memproses permintaan — menyiapkan hasil (umumnya JSON).
3. Client menerima response — melakukan decode, lalu menampilkan ke UI.

Contoh API publik (REST Countries):

curl -s https://restcountries.com/v3.1/all?fields=name

Contoh hasil response:

[
{ "name": { "common": "Indonesia", "official": "Republic of Indonesia" } },
{ "name": { "common": "Japan", "official": "Japan" } }
]

Setiap objek pada array berisi informasi nama negara (common/official) yang dapat kita tampilkan.

2. REST API dan Konsep Data JSON

• REST memanfaatkan HTTP standar; JSON dipilih karena ringan dan mudah dibaca.
• Ciri utama: endpoint data, metode HTTP, response JSON.
• Data JSON harus di-decode (dart:convert) agar dapat diakses sebagai map/objek di Dart/Flutter.

3. Perbandingan REST API dan GraphQL (sekilas)

• REST: endpoint tetap, sederhana, umum digunakan.
• GraphQL: query fleksibel, hanya data yang diminta, lebih kompleks (butuh server khusus).

Modul ini menggunakan REST API karena sederhana dan umum di Flutter.

Implementasi API Call dengan http

Langkah 1: Tambahkan dependency

dependencies:
  http: ^1.2.0

Lalu jalankan:

  "flutter pub get"

Langkah 2: Buat fungsi pengambil data

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<dynamic>> fetchCountries() async {
  final url = Uri.parse('https://restcountries.com/v3.1/all?fields=name');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Gagal memuat data negara. Kode: ${response.statusCode}');
  }
}

Langkah 3: Tampilkan hasil pada UI

class CountryListPage extends StatelessWidget {
  const CountryListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Daftar Negara')),
      body: FutureBuilder(
        future: fetchCountries(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else {
            final data = snapshot.data as List<dynamic>;
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                final name = data[index]['name'];
                return ListTile(
                  leading: const Icon(Icons.public),
                  title: Text(name['common']),
                  subtitle: Text(name['official']),
                );
              },
            );
          }
        },
      ),
    );
  }
}

Penjelasan Mekanisme

• FutureBuilder menunggu Future (fetchCountries()) dan membangun ulang UI saat hasil tersedia.
• Saat loading, tampilkan CircularProgressIndicator agar UI tetap responsif.
• snapshot.hasError menangani kondisi error (mis. koneksi gagal) dengan menampilkan pesan yang informatif.

Observasi

• Jaringan aktif: data tampil (Future sukses).
• Jaringan lambat: loading tetap responsif karena operasi async non-blocking.
• Error koneksi: tampil pesan error (handling bekerja).

Implementasi API Call dengan Dio

Dio menawarkan fitur lebih lengkap: interceptor, logging, timeout, cancel request, dsb.

Langkah 1: Tambahkan dependency

dependencies:
  dio: ^5.3.0

Langkah 2: Buat fungsi pengambil data

dependencies:
  dio: ^5.3.0

Kelebihan Dio

• response.data langsung siap pakai (otomatis parsing JSON).
• Logging request/response mudah via interceptor.
• Error handling detail (timeout, status code, dsb).

Perbandingan Singkat

• Parsing: http (jsonDecode manual) vs Dio (response.data otomatis).
• Logging: http perlu solusi tambahan vs Dio built-in via interceptor.
• Error handling: http dasar vs Dio lebih kaya.
• Kompleksitas: http sederhana vs Dio fleksibel/powerful.

Dasar Asynchronous Programming

1. Konsep Dasar Future

Future mewakili nilai yang tersedia di masa depan. Fungsi async langsung mengembalikan Future, proses internal tetap berjalan di "belakang layar".

Future<String> fetchMessage() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Data berhasil diterima';
}

2. Event Loop: Jantung Asynchronous di Dart

• UI berjalan di main thread; tugas berat dimasukkan ke event queue.
• Sambil menunggu hasil, UI tetap menggambar dan merespons input pengguna.
• Saat Future selesai, event loop mengeksekusi callback yang terkait.

3. async-await vs Callback

a. async–await (lebih mudah dibaca, linear)

void main() async {
  print('Memulai...');
  final data = await fetchMessage();
  print(data);
}

b. callback chaining (.then/.catchError)

void main() {
  print('Memulai...');
  fetchMessage().then((data) {
    print(data);
  }).catchError((error) {
    print('Error: $error');
  });
}

Perbandingan

• Keterbacaan: async-await lebih linear dan bersih.
• Debugging: async-await lebih mudah dilacak.
• Performa: setara.
• Rekomendasi: gunakan async-await untuk alur menengah–kompleks.

Simulasi Login (Async)

Gunakan Future.delayed 2 detik untuk meniru panggilan API autentikasi.

Future<bool> login(String username, String password) async {
  await Future.delayed(Duration(seconds: 2)); // simulasi waktu respon server
  return username == 'admin' && password == '1234';
}

1. Versi async–await

void handleLogin() async {
  print('Memproses login...');
  bool success = await login('admin', '1234');
  print(success ? 'Login berhasil!' : 'Login gagal!');
}

2. Versi callback

void handleLoginCallback() {
  print('Memproses login...');
  login('admin', '1234').then((success) {
    print(success ? 'Login berhasil!' : 'Login gagal!');
  }).catchError((e) {
    print('Terjadi error: $e');
  });
}

Observasi

• async–await memberikan alur yang mudah diikuti dan di-debug.
• Callback cocok untuk kasus sederhana; hindari nested callback pada alur kompleks.

Rekap Materi

Pada bab ini Anda mempelajari:

1. Siklus request–response API dan pemanggilan data via http serta Dio.
2. Cara kerja asynchronous di Dart (Future, event loop).
3. Perbandingan async-await dengan callback chaining.
4. Simulasi login yang meniru proses async di dunia nyata.

Dengan bekal ini, Anda siap menerapkan API call dan async handling pada aplikasi Flutter.

AKSES PROJECT & REFERENSI MODUL

• Repository GitHub:
  GITHUB

• Website Modul (untuk memudahkan menyalin contoh kode):
  Website Modul

Catatan:

• Repositori memiliki branch per modul (modul1, modul2, modul3, ...).
• Website modul membantu membaca dan menyalin snippet kode secara langsung.

CODELAB

Tugas

Jalankan dan amati aplikasi Flutter yang memanggil data dari REST Countries API menggunakan dua library berbeda: http dan Dio. Codelab ini juga dapat dipadukan dengan state management seperti GetX agar perubahan data otomatis memperbarui UI.

Instruksi

1. Clone Project

• Lakukan cloning repository berikut pada branch modul3:
  Project Github

2. Jalankan Project

• Buka project di VS Code atau Android Studio, kemudian:
  • flutter pub get
  • flutter run

3. Verifikasi API Call

• Endpoint yang digunakan:
  • https://restcountries.com/v3.1/all?fields=name
• Pastikan project menyediakan dua implementasi: via http dan via Dio.
• Pastikan data negara muncul pada UI, menampilkan setidaknya name.common dan name.official.

4. (Opsional) Gunakan GetX

• Jika menggunakan GetX untuk state management:
  • Buat controller untuk memuat data negara (observable list).
  • Ikat UI ke state GetX (Obx/GetBuilder) agar UI auto-rebuild saat data berubah.
  • Bandingkan kemudahan dibanding setState().

Catatan

1. Fokus utama: project berjalan dan data negara termuat dari endpoint.
2. Sediakan dua versi pemanggilan (http dan Dio) agar bisa dibandingkan.
3. Jika menerapkan GetX, jaga struktur folder (controllers, views, services) rapi.
4. Untuk profiling, gunakan DevTools Network/CPU untuk mengamati waktu respons dan beban pemrosesan.

KRITERIA & DETAIL PENILAIAN