MEMBUAT CRUD dan MockAPI

 📘 Materi CRUD Flutter + MockAPI

1. Apa itu CRUD?

CRUD adalah singkatan dari:

Create → Menambahkan data baru

Read → Menampilkan data

Update → Mengubah data

Delete → Menghapus data

Dalam aplikasi Flutter, CRUD biasanya terhubung dengan API agar data bisa disimpan di server.

2. Tools yang digunakan

Flutter → Framework untuk membuat aplikasi mobile multiplatform.

MockAPI → API palsu (fake API) untuk simulasi backend (mirip database online).

HTTP package (http) → Untuk komunikasi Flutter dengan API (GET, POST, PUT, DELETE).

3. Struktur Proyek

main.dart → Tempat logika UI dan pemanggilan API.

pubspec.yaml → Untuk menambahkan dependency seperti http.

4. Alur CRUD di Flutter

a) Create (Tambah Data)
Menggunakan POST request:

void createData(String name, String email) async {
  final response = await http.post(
    Uri.parse("https://yourapi.mockapi.io/users"),
    body: {"name": name, "email": email},
  );
}
b) Read (Tampilkan Data)
Menggunakan GET request:

Future<List> getData() async {
  final response = await http.get(Uri.parse("https://yourapi.mockapi.io/users"));
  return json.decode(response.body);
}
c) Update (Edit Data)
Menggunakan PUT request:

void updateData(String id, String name, String email) async {
  final response = await http.put(
    Uri.parse("https://yourapi.mockapi.io/users/$id"),
    body: {"name": name, "email": email},
  );
}
d) Delete (Hapus Data)
Menggunakan DELETE request:

void deleteData(String id) async {
  await http.delete(Uri.parse("https://yourapi.mockapi.io/users/$id"));
}

5. Tampilan Aplikasi

Dari gambar terlihat:

AppBar → Judul aplikasi CRUD Flutter + MockAPI

ListView → Menampilkan data pengguna dari API (nama + email).

Tombol edit (pensil) → Untuk update data.

Tombol hapus (tempat sampah) → Untuk delete data.

Tombol + (FloatingActionButton) → Untuk menambahkan data baru.

6. Flow Penggunaan

User buka aplikasi → Flutter memanggil GET untuk menampilkan data.

User klik + → Muncul form input → Flutter mengirim POST.

User klik ikon pensil → Ubah data → Flutter mengirim PUT.

User klik ikon tempat sampah → Data terhapus → Flutter mengirim DELETE.

7. Hasil Build

Pada log terlihat:

[13:34:56] Starting build...
[13:35:15] Build successful
Artinya aplikasi berhasil dijalankan tanpa error.

📌 Kesimpulan:
Dengan Flutter + MockAPI, kita bisa belajar implementasi CRUD dengan cara sederhana. Ini cocok sebagai latihan sebelum menggunakan backend asli seperti Laravel, Node.js, atau Firebase.