Cara Menggunakan Completers Flutter dengan Backend di Back4app

11min
Pendahuluan
Futures dan Streams adalah cara yang tepat dalam setiap jenis operasi asinkron. Namun, terkadang keduanya tidak cukup. Jika Anda menginginkan kontrol yang lebih canggih atas Futures, maka gunakan Completer. Ini adalah alat melalui mana Anda dapat menyelesaikan Future secara programatis. Dengan cara ini, ini memberikan kontrol yang lebih baik atas operasi asinkron. Tutorial ini akan membantu Anda bekerja melalui penggunaan Flutter Completers dalam aplikasi yang berinteraksi dengan backend di Back4app.

Pada akhir tutorial ini, Anda akan belajar bagaimana menggunakan Completers dalam aplikasi Flutter untuk mengelola tugas asinkron dan mengintegrasikan tugas-tugas ini dengan layanan backend yang disediakan dari Back4app. Kami akan membuat aplikasi yang sangat sederhana yang mendapatkan data kembali dari backend Back4app menggunakan Completer untuk mengontrol alur aplikasi.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
Akun Back4app. Daftar untuk akun gratis di Back4app.com.
Lingkungan pengembangan Flutter yang diatur di mesin lokal Anda. Ikuti panduan instalasi Flutter jika Anda belum mengaturnya.
Pengetahuan dasar tentang Dart dan pemrograman asinkron di Flutter. Jika Anda perlu penyegaran, lihat Panduan Pemrograman Asinkron Flutter.
Langkah 1 – Menyiapkan Backend Back4app Anda
Pertama, mari kita siapkan backend sederhana di Back4app yang akan berinteraksi dengan aplikasi Flutter kita.
Masuk ke akun Back4app Anda dan buat proyek baru.
Siapkan Kelas Parse baru bernama Task, yang akan menyimpan tugas yang akan diambil oleh aplikasi Flutter kita. Tambahkan kolom berikut ke kelas Task :
nama (String): Nama tugas.
status (Boolean): Status tugas (selesai atau tidak).
Tambahkan beberapa tugas contoh di database Back4app untuk diuji. Misalnya:
Tugas 1: nama = "Selesaikan tutorial Flutter", status = true
Tugas 2: nama = "Mulai proyek baru", status = false
Backend Back4app Anda sekarang siap diakses oleh aplikasi Flutter.
Langkah 2 – Membuat Proyek Flutter
Selanjutnya, kita akan membuat proyek Flutter baru.
Buka terminal atau command prompt Anda.
Jalankan perintah berikut untuk membuat proyek Flutter baru:
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Navigasikan ke direktori proyek:
Bash
cd completer_demo
cd completer_demo
﻿
    2. Buka proyek di editor kode pilihan Anda (misalnya, VS Code, Android Studio).
Langkah 3 – Menambahkan Parse SDK dan Mengonfigurasi Aplikasi
Sekarang, mari kita tambahkan ketergantungan yang diperlukan untuk berinteraksi dengan Back4app.
Buka pubspec.yaml dan tambahkan ketergantungan berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
﻿
     2. Jalankan flutter pub get untuk menginstal dependensi.
     3. Di lib/main.dart, impor SDK Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
﻿
    4. Inisialisasi Parse di main fungsi:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}
﻿
Ganti 'YOUR_APP_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 4 – Menggunakan Completers untuk Mengambil Data Secara Asinkron
Sekarang, mari kita gunakan Completer untuk mengambil data dari backend Back4app dan mengontrol kapan data tersedia untuk digunakan di UI.
Di lib/main.dart, buat kelas baru yang akan mengambil tugas dari Back4app menggunakan Completer:
Dart
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
﻿
Kelas ini menginisialisasi sebuah Completer, mulai mengambil data, dan menyelesaikan Completer ketika data tersedia.
    2. Di widget MyApp, gunakan TaskManager untuk mengambil dan menampilkan tugas:
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
﻿
    3. Jalankan aplikasi Flutter Anda:
Anda seharusnya melihat daftar tugas yang diambil dari backend Back4app Anda, dengan nama dan status penyelesaiannya.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana menggunakan Flutter Completers untuk mengelola operasi asinkron dan mengontrol aliran pengambilan data dalam aplikasi Anda. Dengan mengintegrasikan dengan Back4app, Anda membuat backend yang sederhana namun kuat untuk aplikasi Flutter Anda, memungkinkan Anda untuk mengambil dan menampilkan data secara dinamis. Pendekatan ini dapat diperluas untuk menangani skenario yang lebih kompleks, seperti otentikasi pengguna, manipulasi data, dan lainnya.
Untuk informasi lebih lanjut tentang menggunakan Flutter dengan Back4app, lihat dokumentasi Flutter Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Mengintegrasikan AI Generatif di Aplikasi Flutter Anda Menggunakan Firebase Vertex AI
BERIKUTNYA
Cara Mengoptimalkan Operasi Async di Flutter dengan Future.wait dan Back4app