Cara Menggunakan Completers Flutter dengan Backend di Back4app

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 https //www back4app com lingkungan pengembangan flutter yang diatur di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install jika anda belum mengaturnya pengetahuan dasar tentang dart dan pemrograman asinkron di flutter jika anda perlu penyegaran, lihat panduan pemrograman asinkron flutter https //dart dev/codelabs/async await 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 flutter create completer demo navigasikan ke direktori proyek 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 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 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 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 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 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 https //www back4app com/docs/flutter/overview selamat coding!