REST API Flutter: Panduan HTTP, JSON, dan Pengolahan Data

Setelah memahami Navigation dan State Management pada Level 7, langkah berikutnya dalam roadmap belajar Flutter adalah mempelajari bagaimana aplikasi berkomunikasi dengan server.

Pada aplikasi sederhana, data mungkin cukup disimpan di dalam kode atau state lokal. Namun, aplikasi nyata seperti e-commerce, aplikasi berita, sistem akademik, aplikasi keuangan, hingga aplikasi HR membutuhkan data yang berasal dari server.

Di sinilah REST API menjadi bagian penting dari pengembangan aplikasi Flutter.

Dengan REST API, aplikasi Flutter dapat mengambil data dari server, mengirim data baru, memperbarui data, maupun menghapus data. Data tersebut umumnya dikirim dalam format JSON, kemudian diubah menjadi object Dart agar lebih mudah digunakan di dalam widget dan state management.

Flutter menyediakan cookbook networking resmi yang menggunakan package http untuk melakukan HTTP request, sementara dokumentasi JSON Flutter membahas proses encoding, decoding, dan serialization data.

Pada Level 8 ini, Anda akan belajar mulai dari konsep REST API Flutter sampai membuat alur sederhana:

Flutter → HTTP Request → REST API → JSON → Dart Model → State → UI

REST API Flutter merupakan materi pembelajaran Level 8 dari Roadmap Belajar Flutter dari Nol Sampai Siap Kerja yang dibahas pada situs Raja Putra Media.

Apa Itu REST API?

REST API adalah sebuah mekanisme yang memungkinkan aplikasi berkomunikasi dengan server melalui protokol HTTP. REST merupakan singkatan dari Representational State Transfer, sedangkan API adalah Application Programming Interface.

Sederhananya, REST API dapat dianggap sebagai jembatan antara aplikasi Flutter dan backend.

Misalnya Anda memiliki aplikasi toko online. Ketika pengguna membuka halaman daftar produk, aplikasi Flutter tidak harus menyimpan seluruh produk di dalam aplikasi.

Flutter dapat meminta data kepada server:

Flutter App
     ↓
GET /products
     ↓
Backend / REST API
     ↓
Database
     ↓
JSON Response
     ↓
Flutter App
     ↓
Product List

Dengan mekanisme tersebut, data produk dapat dikelola secara terpusat di server.

Ketika administrator menambahkan produk baru melalui dashboard, aplikasi Flutter dapat mengambil data terbaru dari API tanpa harus membuat versi aplikasi baru.

Mengapa Flutter Membutuhkan REST API?

Hampir semua aplikasi modern membutuhkan komunikasi dengan server.

Contohnya:

Aplikasi	Data yang membutuhkan API
E-commerce	Produk, kategori, pesanan
Aplikasi berita	Artikel, kategori, komentar
Aplikasi sekolah	Siswa, guru, jadwal, nilai
Aplikasi HR	Karyawan, kontrak, pembinaan
Aplikasi keuangan	Transaksi dan saldo
Social media	Post, komentar, profil
Booking	Jadwal, layanan, reservasi

Flutter sendiri menyediakan networking lintas platform, dan package:http merupakan salah satu cara sederhana yang direkomendasikan dokumentasi Flutter untuk melakukan HTTP request. Package tersebut mendukung Android, iOS, macOS, Windows, Linux, dan web.

Karena itu, memahami REST API merupakan kemampuan fundamental bagi Flutter Developer.

Konsep Dasar HTTP yang Perlu Dipahami

Sebelum membuat request dari Flutter, Anda perlu memahami beberapa istilah HTTP.

1. GET

GET digunakan untuk mengambil data.

Contohnya:

GET /products

atau:

GET /products/10

Request pertama dapat digunakan untuk mengambil seluruh produk, sedangkan request kedua dapat digunakan untuk mengambil produk dengan ID 10.

2. POST

POST digunakan untuk mengirim atau membuat data baru.

Contohnya:

POST /products

Dengan body:

{
  "name": "Laptop",
  "price": 12000000
}

3. PUT

PUT biasanya digunakan untuk memperbarui data secara keseluruhan.

Contohnya:

PUT /products/10

4. PATCH

PATCH digunakan untuk memperbarui sebagian data.

Misalnya hanya ingin mengubah harga:

PATCH /products/10

dengan:

{
  "price": 11000000
}

5. DELETE

DELETE digunakan untuk menghapus data.

DELETE /products/10

Jadi secara sederhana:

GET     → mengambil
POST    → membuat
PUT     → memperbarui
PATCH   → memperbarui sebagian
DELETE  → menghapus

Tidak semua API harus menggunakan seluruh metode tersebut, tetapi konsep ini penting untuk dipahami.

Memahami Endpoint API

Endpoint adalah alamat yang digunakan aplikasi untuk mengakses resource tertentu.

Misalnya:

https://api.example.com/products

Endpoint tersebut dapat mewakili resource produk.

Beberapa endpoint lain:

GET    /products
GET    /products/10
POST   /products
PUT    /products/10
DELETE /products/10

Dalam aplikasi Flutter, endpoint biasanya disimpan dalam service atau repository agar tidak tersebar di banyak widget.

Pendekatan ini akan menjadi semakin penting ketika project mulai berkembang.

Apa Itu JSON?

REST API sering menggunakan JSON sebagai format pertukaran data. JSON merupakan singkatan dari JavaScript Object Notation.

Contoh response:

{
  "id": 1,
  "title": "Belajar Flutter",
  "price": 150000
}

JSON juga dapat berisi array.

[
  {
    "id": 1,
    "title": "Produk A"
  },
  {
    "id": 2,
    "title": "Produk B"
  }
]

Flutter menyediakan mekanisme JSON encoding dan decoding untuk mengubah data antara representasi JSON dan object atau struktur data Dart.

Secara sederhana:

JSON String
    ↓
jsonDecode()
    ↓
Map / List Dart
    ↓
Dart Model
    ↓
Flutter UI

Menambahkan Package HTTP ke Flutter

Untuk mengikuti contoh pada artikel ini, gunakan package http.

Jalankan:

flutter pub add http

Dokumentasi Flutter menggunakan perintah tersebut untuk menambahkan package HTTP ke project.

Kemudian import package:

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

Package http merupakan library berbasis Future untuk melakukan HTTP request dan menyediakan fungsi seperti get(), post(), serta berbagai class untuk menangani request dan response.

Membuat HTTP GET Request

Contoh paling sederhana:

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

Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse(
      'https://jsonplaceholder.typicode.com/albums/1',
    ),
  );

  print(response.statusCode);
  print(response.body);
}

Di sini terdapat beberapa bagian penting.

Uri.parse()

Digunakan untuk mengubah string URL menjadi object Uri.

Uri.parse(
  'https://jsonplaceholder.typicode.com/albums/1',
)

http.get()

Mengirim HTTP GET request.

http.get(...)

await

Karena komunikasi jaringan membutuhkan waktu, proses tersebut bersifat asynchronous.

final response = await http.get(...);

response.statusCode

Digunakan untuk mengetahui status response dari server.

response.body

Berisi data response dalam bentuk string.

Dokumentasi resmi Flutter juga menggunakan http.get() dan Future<http.Response> dalam contoh networking.

Memahami Future dan Async/Await

REST API tidak langsung mengembalikan data seperti function biasa.

Bayangkan:

final result = fetchData();

Data belum tentu tersedia saat function dipanggil. Karena itu Dart menggunakan Future.

Contohnya:

Future<String> getData() async {
  final response = await http.get(
    Uri.parse('https://example.com'),
  );

  return response.body;
}

Kemudian:

final data = await getData();

Konsep sederhananya:

Request dikirim
      ↓
Menunggu server
      ↓
Response diterima
      ↓
Data diproses

Pemahaman terhadap asynchronous programming akan sangat penting ketika aplikasi mulai menggunakan API, database, authentication, dan Firebase.

Mengecek HTTP Status Code

Jangan langsung menganggap request berhasil hanya karena response diterima. Periksa status code.

Contohnya:

final response = await http.get(
  Uri.parse(
    'https://jsonplaceholder.typicode.com/albums/1',
  ),
);

if (response.statusCode == 200) {
  print('Request berhasil');
  print(response.body);
} else {
  print('Request gagal');
}

Beberapa status code yang umum:

Status	Arti
200	OK
201	Created
204	No Content
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not Found
500	Internal Server Error

Dalam aplikasi nyata, penanganan status code sebaiknya dibuat lebih terstruktur.

Mengubah JSON Menjadi Data Dart

Misalnya server mengembalikan:

{
  "id": 1,
  "title": "Flutter"
}

Response dari HTTP masih berupa string:

response.body

Untuk mengubah JSON menjadi struktur Dart, gunakan:

import 'dart:convert';

Kemudian:

final data = jsonDecode(response.body);

Sekarang data dapat berupa Map<String, dynamic>.

Contoh:

final data =
    jsonDecode(response.body) as Map<String, dynamic>;

print(data['id']);
print(data['title']);

Mengapa Sebaiknya Menggunakan Model Dart?

Untuk project kecil, Anda mungkin tergoda menulis:

Text(data['title'])

secara langsung.

Namun, ketika project semakin besar, pendekatan tersebut dapat membuat kode sulit dirawat. Lebih baik membuat model.

Contoh:

class Album {
  final int id;
  final String title;

  Album({
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

Sekarang JSON dapat diubah menjadi object:

final album = Album.fromJson(
  jsonDecode(response.body) as Map<String, dynamic>,
);

Kemudian:

print(album.id);
print(album.title);

Pendekatan ini jauh lebih mudah dipahami ketika project berkembang.

Membuat Service untuk API

Jangan menempatkan seluruh kode API langsung di dalam widget.

Misalnya jangan membangun seluruh request di dalam:

FutureBuilder

atau:

StatefulWidget

untuk project yang mulai kompleks.

Lebih baik pisahkan tanggung jawab. Contohnya:

lib/
├── models/
│   └── album.dart
├── services/
│   └── album_service.dart
├── screens/
│   └── album_page.dart
└── main.dart

Model menangani representasi data. Service menangani komunikasi dengan API. Screen menangani UI.

Membuat API Service Sederhana

Contohnya:

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

class AlbumService {
  final String baseUrl =
      'https://jsonplaceholder.typicode.com';

  Future<Album> fetchAlbum() async {
    final response = await http.get(
      Uri.parse('$baseUrl/albums/1'),
    );

    if (response.statusCode == 200) {
      final data =
          jsonDecode(response.body) as Map<String, dynamic>;

      return Album.fromJson(data);
    }

    throw Exception('Gagal mengambil data album');
  }
}

Dengan pola seperti ini, UI tidak perlu mengetahui detail URL atau bagaimana HTTP request dilakukan.

Mengambil Data Berupa List

API biasanya tidak hanya mengembalikan satu object.

Contohnya:

[
  {
    "id": 1,
    "title": "Produk A"
  },
  {
    "id": 2,
    "title": "Produk B"
  },
  {
    "id": 3,
    "title": "Produk C"
  }
]

JSON tersebut dapat diubah menjadi:

final data = jsonDecode(response.body) as List;

final albums = data
    .map(
      (item) => Album.fromJson(
        item as Map<String, dynamic>,
      ),
    )
    .toList();

Sekarang:

List<Album>

dapat digunakan untuk menampilkan data di Flutter.

Menampilkan Data API dengan FutureBuilder

Untuk kasus sederhana, FutureBuilder dapat digunakan untuk menghubungkan Future dengan UI.

Contoh:

FutureBuilder<Album>(
  future: AlbumService().fetchAlbum(),
  builder: (context, snapshot) {
    if (snapshot.connectionState ==
        ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }

    if (snapshot.hasError) {
      return Text(
        'Terjadi kesalahan: ${snapshot.error}',
      );
    }

    if (!snapshot.hasData) {
      return const Text('Data tidak tersedia');
    }

    final album = snapshot.data!;

    return Text(album.title);
  },
)

Di sini kita menangani tiga kondisi penting:

Loading
   ↓
Success / Error

Ini merupakan pola yang sangat umum ketika membuat UI berbasis API.

Loading State

Jangan membuat aplikasi terlihat seperti tidak merespons ketika request sedang berjalan. Tampilkan indikator loading.

Contohnya:

if (snapshot.connectionState ==
    ConnectionState.waiting) {
  return const CircularProgressIndicator();
}

Dalam aplikasi yang lebih kompleks, loading state dapat berupa:

• progress indicator
• skeleton loading
• shimmer
• placeholder
• disabled button

Pengalaman pengguna sangat dipengaruhi oleh bagaimana aplikasi menangani proses asynchronous.

Error Handling

Koneksi internet tidak selalu berhasil. Beberapa masalah yang mungkin terjadi:

• internet pengguna mati
• server sedang down
• endpoint salah
• request timeout
• response tidak valid
• authentication gagal
• server mengembalikan error
• API mengalami perubahan struktur

Karena itu, jangan hanya membuat:

try {
  // request
} catch (e) {
  print(e);
}

untuk aplikasi production.

Buat penanganan error yang lebih jelas. Contoh sederhana:

try {
  final response = await http.get(
    Uri.parse(
      'https://example.com/products',
    ),
  );

  if (response.statusCode != 200) {
    throw Exception(
      'Server mengembalikan status '
      '${response.statusCode}',
    );
  }
} catch (e) {
  print('Request error: $e');
}

Pada aplikasi nyata, error tersebut kemudian dapat diterjemahkan menjadi pesan yang lebih ramah untuk pengguna.

Mengirim Data dengan POST

REST API bukan hanya digunakan untuk membaca data. Flutter juga dapat mengirim data ke server.

Contoh:

final response = await http.post(
  Uri.parse(
    'https://example.com/products',
  ),
  headers: {
    'Content-Type': 'application/json',
  },
  body: jsonEncode({
    'name': 'Laptop',
    'price': 12000000,
  }),
);

Perhatikan:

jsonEncode(...)

digunakan untuk mengubah Map Dart menjadi JSON string.

Flutter menyediakan contoh resmi penggunaan http untuk mengirim data ke server melalui POST.

PUT dan PATCH

Untuk memperbarui data:

final response = await http.put(
  Uri.parse(
    'https://example.com/products/1',
  ),
  headers: {
    'Content-Type': 'application/json',
  },
  body: jsonEncode({
    'name': 'Laptop Baru',
    'price': 11000000,
  }),
);

Sedangkan API tertentu dapat menyediakan PATCH:

final response = await http.patch(
  Uri.parse(
    'https://example.com/products/1',
  ),
  headers: {
    'Content-Type': 'application/json',
  },
  body: jsonEncode({
    'price': 11000000,
  }),
);

Perlu diingat bahwa implementasi endpoint sangat bergantung pada backend yang digunakan.

DELETE Data

Untuk menghapus data:

final response = await http.delete(
  Uri.parse(
    'https://example.com/products/1',
  ),
);

Kemudian periksa hasilnya:

if (response.statusCode == 200 ||
    response.statusCode == 204) {
  print('Data berhasil dihapus');
}

Header dalam REST API

Selain URL dan method, request juga dapat memiliki header.

Contohnya:

headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
}

Header digunakan untuk memberikan informasi tambahan kepada server.

Misalnya:

Accept
Content-Type
Authorization

Untuk API yang membutuhkan authentication, Anda sering menemukan:

headers: {
  'Authorization': 'Bearer $token',
}

Materi authentication dan backend akan dibahas lebih mendalam pada Level 11. Untuk Level 8, yang paling penting adalah memahami konsep bahwa request API dapat memiliki header dan data tambahan.

Query Parameter

API juga sering menggunakan query parameter.

Contohnya:

/products?page=1&limit=20

Di Dart, Anda dapat membuat URI dengan parameter.

final uri = Uri.https(
  'example.com',
  '/products',
  {
    'page': '1',
    'limit': '20',
  },
);

Kemudian:

final response = await http.get(uri);

Query parameter biasanya digunakan untuk:

• pagination
• search
• filtering
• sorting
• category
• date range

Contohnya:

/products?search=laptop

atau:

/products?category=electronics

REST API dan State Management

Pada Level 7 Anda sudah mempelajari state management. Sekarang konsep tersebut mulai digunakan bersama API.

Misalnya:

API Request
     ↓
Loading
     ↓
Response
     ↓
Update State
     ↓
UI Rebuild

Contoh state:

Loading
Success
Empty
Error

Inilah alasan state management penting dalam aplikasi yang menggunakan REST API.

Misalnya:

enum RequestState {
  initial,
  loading,
  success,
  empty,
  error,
}

Dengan pendekatan tersebut, UI dapat menampilkan kondisi berbeda berdasarkan state.

Jangan Menaruh Semua Logic API di Widget

Salah satu kesalahan umum pemula adalah membuat struktur seperti:

class ProductPage extends StatefulWidget {
  // ...
}

class _ProductPageState extends State<ProductPage> {

  Future<void> loadProducts() async {
    // HTTP request
    // JSON parsing
    // error handling
    // business logic
  }

  // UI
}

Untuk latihan kecil hal tersebut masih dapat diterima. Namun, jika project berkembang, kode akan menjadi sulit dipelihara.

Lebih baik mulai mengenal pemisahan:

UI
 ↓
State / Controller
 ↓
Repository / Service
 ↓
API

Pada Level 12 nanti, konsep architecture akan dibahas lebih mendalam.

Repository dan Service

Untuk project yang semakin besar, Anda dapat memisahkan service dan repository.

Contohnya:

lib/
├── models/
│   └── product.dart
│
├── services/
│   └── api_service.dart
│
├── repositories/
│   └── product_repository.dart
│
├── screens/
│   └── product_page.dart
│
└── main.dart

Service berkomunikasi dengan API.

Repository mengatur bagaimana data tersebut digunakan oleh aplikasi. UI tidak perlu mengetahui detail HTTP. Dengan demikian, kode menjadi lebih mudah dikembangkan dan diuji.

Menggunakan http.Client

Untuk request sederhana, Anda dapat menggunakan:

http.get(...)

Namun package http juga menyediakan Client.

Contohnya:

final client = http.Client();

final response = await client.get(
  Uri.parse('https://example.com/products'),
);

Client berguna ketika aplikasi melakukan banyak request ke server yang sama dan juga membantu membuat kode lebih mudah diuji. Dokumentasi package http menjelaskan bahwa Client dapat digunakan untuk mempertahankan koneksi pada banyak request dan dapat diberikan secara eksplisit ke fungsi yang membutuhkan HTTP client.

Untuk aplikasi pemula, Anda belum harus membuat sistem networking yang kompleks. Yang terpenting adalah memahami konsep pemisahan HTTP client dari UI.

Parsing JSON dalam Jumlah Besar

Jika API mengembalikan data dalam jumlah sangat besar, proses parsing JSON dapat menjadi pekerjaan yang cukup berat.

Flutter menyediakan contoh untuk memindahkan proses parsing JSON ke isolate menggunakan compute() atau mekanisme isolate lainnya. Cookbook Flutter bahkan menyediakan contoh parsing response berisi ribuan object secara background agar pekerjaan tersebut tidak membebani UI isolate.

Untuk aplikasi sederhana:

Response kecil
→ parse langsung

Untuk data besar:

Response besar
→ background isolate
→ parsing
→ hasil kembali ke UI

Ini merupakan materi lanjutan, tetapi penting untuk diketahui sejak awal.

Contoh Mini Project: Product List

Sekarang kita gabungkan konsep yang telah dipelajari.

Target aplikasi:

Product List
      ↓
GET /products
      ↓
JSON
      ↓
Product Model
      ↓
State
      ↓
ListView

Model:

class Product {
  final int id;
  final String title;

  Product({
    required this.id,
    required this.title,
  });

  factory Product.fromJson(
    Map<String, dynamic> json,
  ) {
    return Product(
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

Service:

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

class ProductService {
  Future<List<Product>> fetchProducts() async {
    final response = await http.get(
      Uri.parse(
        'https://example.com/products',
      ),
    );

    if (response.statusCode != 200) {
      throw Exception('Gagal mengambil produk');
    }

    final List<dynamic> data =
        jsonDecode(response.body) as List<dynamic>;

    return data
        .map(
          (item) => Product.fromJson(
            item as Map<String, dynamic>,
          ),
        )
        .toList();
  }
}

Kemudian UI dapat menampilkan:

FutureBuilder<List<Product>>(
  future: ProductService().fetchProducts(),
  builder: (context, snapshot) {
    if (snapshot.connectionState ==
        ConnectionState.waiting) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }

    if (snapshot.hasError) {
      return Center(
        child: Text(
          'Gagal memuat data',
        ),
      );
    }

    final products = snapshot.data ?? [];

    if (products.isEmpty) {
      return const Center(
        child: Text('Belum ada produk'),
      );
    }

    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        final product = products[index];

        return ListTile(
          title: Text(product.title),
          subtitle: Text(
            'ID: ${product.id}',
          ),
        );
      },
    );
  },
)

Struktur tersebut sudah menunjukkan pola dasar aplikasi Flutter yang berkomunikasi dengan REST API.

Alur Lengkap Pengolahan Data

Setelah mempelajari Level 8, Anda seharusnya mulai memahami alur berikut:

                 FLUTTER APP
                     │
                     ▼
               User Action
                     │
                     ▼
              State / Controller
                     │
                     ▼
               API Service
                     │
                     ▼
                HTTP Request
                     │
                     ▼
                 REST API
                     │
                     ▼
                  Backend
                     │
                     ▼
                 Database
                     │
                     ▼
                JSON Response
                     │
                     ▼
                JSON Parsing
                     │
                     ▼
                 Dart Model
                     │
                     ▼
                 Update State
                     │
                     ▼
                     UI

Ini merupakan salah satu pola fundamental yang akan terus digunakan ketika Anda membangun aplikasi Flutter nyata.

Kesalahan Umum Saat Belajar REST API Flutter

1. Menaruh URL API di Banyak File

Hindari:

http.get(
  Uri.parse('https://example.com/products'),
);

di banyak widget.

Lebih baik gunakan service atau repository.

2. Tidak Mengecek Status Code

Jangan menganggap request selalu berhasil.

Gunakan:

if (response.statusCode == 200) {
  // success
} else {
  // error
}

3. Tidak Menangani Loading

Request membutuhkan waktu. Jangan membuat pengguna melihat halaman kosong tanpa informasi.

4. Tidak Menangani Error

Aplikasi harus mampu menghadapi:

No Internet
Server Error
Unauthorized
Not Found
Timeout
Invalid JSON

5. Menggunakan dynamic di Semua Tempat

Kode seperti:

dynamic data;

memang fleksibel, tetapi terlalu banyak penggunaan dynamic dapat membuat project sulit dipahami.

Gunakan model Dart ketika struktur data sudah jelas.

6. Menggabungkan UI dan Networking

Hindari membuat widget bertanggung jawab terhadap:

• HTTP
• parsing JSON
• business logic
• state
• UI

sekaligus.

Pisahkan tanggung jawab secara bertahap.

Tools yang Bisa Digunakan untuk Belajar REST API

Untuk latihan, Anda tidak selalu membutuhkan backend sendiri. Anda dapat menggunakan API publik atau membuat mock API.

Beberapa konsep yang sebaiknya dilatih:

GET
POST
PUT
PATCH
DELETE
JSON
Headers
Query Parameters
Status Codes
Error Handling
Authentication
Pagination

Flutter sendiri menyediakan networking cookbook yang mencakup berbagai kebutuhan seperti fetch data, send data, update data, delete data, authenticated request, WebSocket, dan background JSON parsing.

Latihan Level 8

Sebelum melanjutkan ke Level 9, coba buat mini project berikut.

Latihan 1 — Menampilkan Data

Buat aplikasi yang mengambil data dari REST API dan menampilkannya dalam:

ListView

Pastikan memiliki:

• loading state
• success state
• error state
• empty state

Latihan 2 — Detail Data

Gabungkan dengan navigation yang dipelajari pada Level 7.

Alurnya:

Product List
     ↓
Tap Product
     ↓
Product Detail

Data produk dikirim ke halaman detail.

Latihan 3 — POST Data

Buat form:

Nama Produk
Harga
Deskripsi
[ Simpan ]

Ketika tombol ditekan:

Form
 ↓
POST
 ↓
API
 ↓
Response
 ↓
Update UI

Latihan 4 — CRUD Sederhana

Coba buat mini aplikasi CRUD:

Create
Read
Update
Delete

Misalnya aplikasi: Todo List

dengan fitur:

• menampilkan todo
• menambahkan todo
• mengubah todo
• menghapus todo

Ini merupakan latihan yang sangat baik sebelum masuk ke database.

Checklist Level 8

Sebelum melanjutkan ke Level 9, pastikan Anda sudah memahami:

REST API

• Memahami konsep REST API
• Memahami endpoint
• Memahami HTTP method
• Memahami GET
• Memahami POST
• Memahami PUT
• Memahami PATCH
• Memahami DELETE

JSON

• Memahami struktur JSON
• Memahami jsonDecode()
• Memahami jsonEncode()
• Memahami Map dan List
• Dapat membuat Dart Model
• Dapat menggunakan fromJson()

Flutter Networking

• Dapat menambahkan package http
• Dapat melakukan GET request
• Dapat melakukan POST request
• Dapat mengirim headers
• Dapat menggunakan query parameter
• Dapat membaca status code
• Dapat menangani error
• Memahami Future dan async/await

UI

• Dapat menampilkan loading state
• Dapat menampilkan error state
• Dapat menampilkan empty state
• Dapat menampilkan data API
• Dapat menghubungkan API dengan state management

Struktur Project

• Memahami pemisahan model
• Memahami service
• Memahami konsep repository
• Tidak menaruh seluruh networking logic di widget

Setelah mampu mengambil dan mengirim data melalui REST API, pertanyaan berikutnya adalah: Di mana data tersebut disimpan?

Pada Level 8, sebagian besar data berasal dari server. Namun, aplikasi juga sering membutuhkan penyimpanan lokal.

Misalnya:

• data login
• preferensi pengguna
• cache
• draft form
• daftar favorit
• data offline
• database lokal

Karena itu, Level berikutnya akan membahas: Level 9 — Database Flutter, pembelajaran akan bergerak dari networking menuju data persistence.

Anda akan mulai mengenal konsep:

Flutter
   ↓
Database
   ↓
Insert
Read
Update
Delete

Kemudian memahami perbedaan antara:

REST API
     vs
Local Database

dan kapan masing-masing digunakan.

Setelah menyelesaikan Level 9, Anda akan memiliki pemahaman yang jauh lebih lengkap mengenai bagaimana aplikasi Flutter mengambil, mengolah, mengirim, dan menyimpan data.

Kesimpulan

REST API dan pengolahan data merupakan salah satu kemampuan paling penting dalam perjalanan menjadi Flutter Developer.

Pada tahap ini, Anda tidak lagi hanya membuat UI statis. Anda mulai membangun aplikasi yang mampu:

Request
   ↓
Receive Response
   ↓
Parse JSON
   ↓
Create Model
   ↓
Update State
   ↓
Display UI

Anda juga sudah memahami HTTP method seperti GET, POST, PUT, PATCH, dan DELETE, serta konsep endpoint, status code, headers, query parameter, asynchronous programming, error handling, dan pemisahan service dari UI.

Flutter menyediakan package:http sebagai salah satu solusi networking sederhana, sedangkan dokumentasi resminya juga menyediakan berbagai contoh untuk fetching, sending, updating, deleting data, authenticated request, dan pemrosesan JSON.

Yang paling penting, jangan hanya berhenti pada teori.

Cobalah membuat mini project CRUD menggunakan REST API. Dengan latihan tersebut, konsep Level 7 tentang Navigation dan State Management Flutter mulai terhubung dengan Level 8 tentang Networking dan Data Processing.

Setelah itu, Anda siap melanjutkan perjalanan ke Level 9 — Database Flutter: SQLite, Local Storage, dan CRUD. Tempat Anda mulai memahami bagaimana aplikasi menyimpan data secara persisten.