Quickstarters
Cara Membangun Aplikasi CRUD dengan Flutter?

29min
Ikhtisar
Dalam panduan ini, Anda akan mengembangkan aplikasi Flutter yang menangani operasi CRUD penting—membuat, membaca, memperbarui, dan menghapus—dengan memanfaatkan Back4app sebagai layanan backend Anda.
Kami akan memandu Anda melalui pengaturan proyek Back4app, merancang skema data yang fleksibel, dan mengintegrasikan aplikasi Flutter Anda dengan backend menggunakan Parse SDK untuk Flutter.
Pertama, Anda akan membuat proyek Back4app baru bernama Basic-CRUD-App-Flutter. Proyek ini menyediakan solusi penyimpanan data yang andal untuk aplikasi seluler Anda. Anda kemudian akan mendefinisikan model data Anda dengan membuat koleksi dan bidang baik secara manual atau dengan bantuan AI Agent Back4app.
Selanjutnya, Anda akan menggunakan Aplikasi Admin Back4app yang intuitif untuk mengelola data Anda dengan lancar. Akhirnya, Anda akan menghubungkan aplikasi Flutter Anda ke Back4app dengan menggunakan parse_server_sdk_flutter paket, memungkinkan operasi CRUD yang aman dan efisien.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Flutter yang siap produksi yang mampu melakukan fungsi CRUD dasar bersama dengan otentikasi pengguna yang aman dan manajemen data.
Wawasan Utama
Bangun aplikasi Flutter yang berinteraksi dengan backend yang kuat.
Pelajari cara merancang skema backend yang dapat diskalakan di Back4app.
Manfaatkan Aplikasi Admin Back4app untuk manajemen data yang mudah.
Terapkan langkah-langkah keamanan yang kuat termasuk ACL dan otentikasi pengguna.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek aktif.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan Flutter.
Instal Flutter dan pilih IDE seperti Visual Studio Code atau Android Studio.
Pemahaman dasar tentang Flutter, Dart, dan REST API.
Lihat dokumentasi Flutter jika diperlukan.
﻿
Langkah 1 – Inisialisasi Proyek
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Flutter dan ikuti petunjuk untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah proyek Anda dibuat, itu akan muncul di dasbor Anda, siap untuk konfigurasi backend.
﻿
Langkah 2 – Membuat Model Data
Mengatur Struktur Data Anda
Untuk aplikasi Flutter ini, Anda akan membangun beberapa koleksi dalam proyek Back4app Anda. Di bawah ini adalah contoh koleksi dan bidang kunci yang diperlukan untuk mendukung fungsionalitas CRUD.
1. Koleksi Produk
Koleksi ini menyimpan rincian tentang produk individual.
Bidang
Tipe
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang ditetapkan secara otomatis.
nama
String
Nama produk.
rincian
String
Deskripsi singkat tentang produk.
dibuatPada
Tanggal
Stempel waktu ketika produk ditambahkan.
diperbaruiPada
Tanggal
Timestamp ketika produk terakhir diperbarui.
2. Koleksi Pengguna
Koleksi ini mengelola kredensial pengguna dan detail otentikasi.
Bidang
Tipe
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email unik pengguna.
hashKataSandi
String
Kata sandi terenkripsi untuk otentikasi yang aman.
dibuatPada
Tanggal
Stempel waktu ketika akun dibuat.
diperbaruiPada
Tanggal
Timestamp ketika akun terakhir diperbarui.
Anda dapat membuat koleksi ini secara manual di dasbor Back4app.
Buat Kelas Baru
﻿
Untuk menambahkan field, cukup pilih tipe data, tentukan nama field, atur nilai default jika perlu, dan tandai sebagai wajib.
Buat Kolom
﻿
Menggunakan AI Agent Back4app untuk Pembuatan Skema
AI Agent terintegrasi di Back4app dapat secara otomatis menghasilkan skema data Anda berdasarkan deskripsi Anda, menyederhanakan proses pengaturan.
Cara Menggunakan AI Agent:
Akses AI Agent:
Buka dasbor Back4app Anda dan temukan AI Agent di pengaturan proyek Anda.
Deskripsikan Skema Anda:
Berikan prompt yang rinci yang menjelaskan koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Setelah AI Agent memproses input Anda, tinjau skema yang diusulkan dan konfirmasi untuk menerapkannya.
Contoh Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Pendekatan ini menghemat waktu dan memastikan bahwa skema data Anda konsisten dan dioptimalkan.
﻿
Langkah 3 – Mengaktifkan Aplikasi Admin & Mengelola Operasi CRUD
Pengantar Aplikasi Admin
Aplikasi Admin Back4app menawarkan antarmuka tanpa kode untuk mengelola data backend Anda. Fungsionalitas drag-and-drop memungkinkan Anda untuk melakukan operasi CRUD seperti membuat, membaca, memperbarui, dan menghapus catatan dengan mudah.
Mengaktifkan Aplikasi Admin
Navigasikan ke menu “More” di dasbor Back4app Anda.
Pilih “Admin App” dan kemudian klik “Enable Admin App.”
Atur kredensial admin Anda dengan membuat akun administrator awal, yang juga akan mengonfigurasi peran seperti B4aAdminUser.
Aktifkan Admin App
﻿
Setelah mengaktifkan, masuk ke Admin App untuk mengelola data aplikasi Anda.
Dasbor Admin App
﻿
Mengelola Operasi CRUD
Di dalam Admin App, Anda dapat:
Buat Entri: Gunakan opsi “Add Record” dalam koleksi (misalnya, Produk) untuk memasukkan data baru.
Lihat dan Edit Entri: Klik pada sebuah catatan untuk memeriksa detail atau memperbarui bidang.
Hapus Entri: Hapus catatan yang tidak lagi diperlukan.
Antarmuka yang ramah pengguna ini menyederhanakan proses pengelolaan data backend Anda.
﻿
Langkah 4 – Menghubungkan Aplikasi Flutter Anda dengan Back4app
Dengan backend Anda yang telah dikonfigurasi, saatnya untuk mengintegrasikan aplikasi Flutter Anda dengan Back4app.
Menggunakan Parse SDK untuk Flutter
Tambahkan Dependensi:
Buka pubspec.yaml Anda dan sertakan parse_server_sdk_flutter paket:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
﻿
Inisialisasi Parse di Aplikasi Anda:
Di main.dart, inisialisasi Parse dengan kredensial Back4app Anda:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
﻿
Mengimplementasikan Operasi CRUD:
Buat file Dart (misalnya, product_service.dart) untuk menangani aksi CRUD Anda:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
﻿
File layanan ini memungkinkan UI Flutter Anda untuk berinteraksi dengan lancar dengan backend Back4app Anda.
Alternatif: Menggunakan REST/GraphQL di Flutter
Jika Anda memilih untuk tidak menggunakan Parse SDK, Anda dapat melakukan panggilan REST menggunakan paket seperti http. Namun, Parse SDK disarankan untuk pengalaman yang lebih terintegrasi.
﻿
Langkah 5 – Mengamankan Backend Anda
Daftar Kontrol Akses (ACL)
Untuk melindungi data Anda, konfigurasikan ACL untuk objek Anda. Misalnya, buat produk yang hanya terlihat oleh penciptanya:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

  final acl = ParseACL(owner)
    ..setPublicReadAccess(false)
    ..setPublicWriteAccess(false);

  product.setACL(acl);

  final response = await product.save();
  if (response.success) {
    print('Private product created.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

  final acl = ParseACL(owner)
    ..setPublicReadAccess(false)
    ..setPublicWriteAccess(false);

  product.setACL(acl);

  final response = await product.save();
  if (response.success) {
    print('Private product created.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
﻿
Izin Tingkat Kelas (CLP)
Di dasbor Back4app Anda, konfigurasikan CLP untuk menegakkan aturan keamanan default, memastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses atau memodifikasi koleksi tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengatur Pendaftaran dan Masuk Pengguna
Back4app memanfaatkan kelas Pengguna Parse untuk menangani autentikasi. Di aplikasi Flutter Anda, terapkan pendaftaran dan masuk pengguna sebagai berikut:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

  Future<void> loginUser(String username, String password) async {
    final user = await ParseUser.login(username, password);
    if (user.success) {
      print('Logged in as: ${user.result?.username}');
    } else {
      print('Login error: ${user.error?.message}');
    }
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

  Future<void> loginUser(String username, String password) async {
    final user = await ParseUser.login(username, password);
    if (user.success) {
      print('Logged in as: ${user.result?.username}');
    } else {
      print('Login error: ${user.error?.message}');
    }
  }
}
﻿
Pengaturan ini mencakup pendaftaran pengguna, login, dan manajemen autentikasi tambahan untuk aplikasi Flutter Anda.
﻿
Langkah 7 – Kesimpulan dan Peningkatan Masa Depan
Selamat! Anda telah berhasil membangun aplikasi CRUD berbasis Flutter yang terintegrasi dengan Back4app. 
Dalam tutorial ini, Anda membuat proyek bernama Basic-CRUD-App-Flutter, mendefinisikan koleksi untuk Produk dan Pengguna, dan mengelola backend Anda menggunakan Admin App. 
Selain itu, Anda menghubungkan aplikasi Flutter Anda dengan Back4app menggunakan parse_server_sdk_flutter paket sambil menerapkan keamanan yang kuat dan autentikasi pengguna.
Langkah Selanjutnya:
Kembangkan Aplikasi Anda:
Tambahkan fitur seperti pencarian lanjutan, tampilan detail, atau pembaruan waktu nyata.
Tingkatkan Fungsionalitas Backend:
Jelajahi fungsi cloud, integrasi API pihak ketiga, atau kontrol akses berbasis peran yang lebih terperinci.
Terus Belajar:
Tinjau dokumentasi Back4app dan tutorial tambahan untuk lebih mengoptimalkan aplikasi Anda.
Selamat coding dan semoga sukses dalam perjalanan pengembangan Flutter Anda!
Bidang	Tipe	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang ditetapkan secara otomatis.
nama	String	Nama produk.
rincian	String	Deskripsi singkat tentang produk.
dibuatPada	Tanggal	Stempel waktu ketika produk ditambahkan.
diperbaruiPada	Tanggal	Timestamp ketika produk terakhir diperbarui.
Bidang	Tipe	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email unik pengguna.
hashKataSandi	String	Kata sandi terenkripsi untuk otentikasi yang aman.
dibuatPada	Tanggal	Stempel waktu ketika akun dibuat.
diperbaruiPada	Tanggal	Timestamp ketika akun terakhir diperbarui.
Diperbarui 20 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Tutorial Back4app
BERIKUTNYA
Cara Membangun Aplikasi CRUD dengan React Native?