Cara Mengoptimalkan Operasi Async di Flutter dengan Future.wait dan Back4app

7min
Pendahuluan
Pemrograman asinkron sangat penting dalam pengembangan aplikasi modern, terutama saat menangani tugas seperti mengambil data dari beberapa sumber atau melakukan beberapa permintaan jaringan. Namun, menangani beberapa panggilan asinkron secara efisien bisa menjadi tantangan. Di Flutter, metode Future.wait menyediakan cara yang kuat untuk mengelola beberapa Futures, memungkinkan aplikasi Anda untuk menunggu beberapa operasi asinkron secara bersamaan dan efisien.
Dalam tutorial ini, Anda akan belajar bagaimana menggunakan Future.wait di Flutter untuk mengoptimalkan kinerja aplikasi Anda saat menangani beberapa tugas asinkron. Kami akan mengintegrasikan teknik ini dengan Back4app, di mana Anda dapat melakukan pengambilan data secara bersamaan dari backend Anda, menyimpan hasilnya, dan secara signifikan mengurangi waktu tunggu bagi pengguna Anda.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Akun Back4app. Daftar untuk akun gratis di Back4app.com.
Lingkungan pengembangan Flutter yang sudah disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter jika Anda belum menyiapkannya.
Pengetahuan dasar tentang pemrograman asinkron di Flutter dan cara menggunakan Back4app sebagai layanan backend. Jika Anda baru mengenal Back4app, lihat panduan Memulai dengan Back4app.
Langkah 1 – Menyiapkan Backend Back4app
Buat Proyek Back4app: Masuk ke akun Back4app Anda dan buat proyek baru.
Buat Kelas Parse: Di proyek Back4app Anda, buat dua Kelas Parse baru bernama Task dan Project.
Kelas Task harus memiliki field: name (String) dan completed (Boolean).
Kelas Project harus memiliki field: title (String) dan description (String).
Tambahkan Data Contoh: Isi kelas-kelas ini dengan data contoh yang akan kita ambil secara bersamaan menggunakan Future.wait di aplikasi Flutter kita.
Dapatkan Kredensial Back4app Anda: Arahkan ke pengaturan proyek Anda untuk mengambil Application ID dan Client Key Anda, yang akan Anda perlukan untuk menghubungkan aplikasi Flutter Anda ke Back4app.
Langkah 2 – Menyiapkan Proyek Flutter Anda
Buat Proyek Flutter Baru: Buka terminal atau command prompt Anda dan jalankan:
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
Inisialisasi Parse di Aplikasi Anda: Di lib/main.dart, impor SDK Parse dan inisialisasi di fungsi main Anda:
Text
Text
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
﻿
Ganti 'YOUR_BACK4APP_APP_ID' dan 'YOUR_BACK4APP_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3 – Mengambil Data Secara Bersamaan dengan Future.wait
Buat Widget TaskProjectScreen: Di lib/main.dart, tambahkan widget baru yang akan mengambil data dari kedua Task dan Project secara bersamaan:
Dart
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
﻿
Widget ini mengambil tugas dan proyek secara bersamaan menggunakan Future.wait, mengurangi total waktu tunggu dengan menangani kedua permintaan secara bersamaan.
Langkah 4 – Menguji dan Menjalankan Aplikasi Anda
Jalankan aplikasi Anda menggunakan flutter run.
Anda seharusnya melihat daftar tugas dan proyek yang ditampilkan di layar. Kedua dataset diambil secara bersamaan, membuat proses pengambilan data lebih cepat dan efisien.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana menggunakan Future.wait untuk mengoptimalkan operasi asinkron dalam aplikasi Flutter Anda. Dengan mengambil data dari beberapa sumber secara bersamaan dan mengintegrasikan dengan Back4app, Anda membuat aplikasi Anda lebih responsif dan mengurangi waktu tunggu keseluruhan bagi pengguna Anda.
Menggunakan Future.wait dalam kombinasi dengan backend yang kuat seperti Back4app memungkinkan Anda untuk mengelola beberapa tugas asinkron secara efisien dan meningkatkan kinerja aplikasi Flutter Anda. Untuk lebih jelasnya tentang menggunakan Back4app dengan Flutter, lihat dokumentasi Back4app Flutter. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Menggunakan Completers Flutter dengan Backend di Back4app
BERIKUTNYA
Mengembangkan Aplikasi Javascript Waktu Nyata