Cara Menggunakan Isolates di Flutter dengan Back4app untuk Menangani Pemrosesan Data Berat

13min
Pendahuluan
Flutter adalah framework yang kuat untuk membangun aplikasi lintas platform, tetapi seperti banyak framework mobile, ia menjalankan semua kode pada satu thread secara default. Thread ini, yang dikenal sebagai thread UI, bertanggung jawab untuk merender UI aplikasi Anda. Ketika tugas berat seperti pemrosesan data atau penanganan file terjadi di thread UI, mereka dapat menyebabkan aplikasi lag atau "jank," yang mengarah pada pengalaman pengguna yang buruk.
Untuk mengatasi ini, Dart menyediakan fitur yang disebut Isolates. Isolates memungkinkan Anda menjalankan perhitungan mahal di thread terpisah, menjaga UI Anda tetap responsif. Dalam tutorial ini, kita akan menjelajahi cara menggunakan isolates dalam aplikasi Flutter untuk menangani tugas pemrosesan data berat, seperti mendeserialisasi file JSON besar yang diambil dari backend Back4app.
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, widget Flutter, dan pemrograman asinkron.
Langkah 1 – Menyiapkan Backend Back4app Anda
Buat Proyek Back4app: Masuk ke akun Back4app Anda dan buat proyek baru.
Buat Kelas Parse: Untuk tutorial ini, buat Kelas Parse bernama Record yang menyimpan sejumlah besar data:
judul (String): Judul dari catatan.
deskripsi (String): Deskripsi dari catatan.
metadata (JSON): Konten metadata besar yang terkait dengan catatan.
Isi Kelas dengan Data Contoh: Tambahkan beberapa catatan ke kelas Record dengan objek JSON besar di bidang metadata. Ini akan mensimulasikan jenis pemrosesan data yang dapat menyebabkan gangguan dalam aplikasi nyata.
Dapatkan Kredensial Back4app Anda: Arahkan ke pengaturan proyek Anda untuk mengambil ID Aplikasi dan Kunci Klien Anda, yang 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:
Bash
flutter create isolate_example
flutter create isolate_example
﻿
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Jalankan flutter pub get untuk menginstal dependensi ini.
Inisialisasi Parse di Aplikasi Anda: Di lib/main.dart, impor SDK Parse dan inisialisasi di fungsi main:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
﻿
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
﻿
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  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());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RecordScreen(),
    );
  }
}
﻿
Ganti 'YOUR_BACK4APP_APP_ID' dan 'YOUR_BACK4APP_CLIENT_KEY' dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3 – Mengambil Data dari Back4app
Buat Widget RecordScreen: Di lib/main.dart, buat layar baru yang mengambil data dari Back4app:
Dart
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class RecordScreen extends StatefulWidget {
  @override
  _RecordScreenState createState() => _RecordScreenState();
}

class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

  Future<void> fetchRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        records = response.results as List<ParseObject>;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Kode ini mengambil semua catatan dari Record kelas di Back4app dan menampilkannya dalam sebuah daftar.
Langkah 4 – Memindahkan Pemrosesan Data Berat ke Isolate
Menggunakan Isolate untuk Mende-serialisasi JSON Besar: Misalkan metadata field di setiap catatan berisi objek JSON besar yang perlu dide-serialisasi. Untuk menghindari pemblokiran thread UI, kita akan menggunakan isolate untuk melakukan tugas ini.
Dart
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
import 'dart:isolate';
import 'dart:convert';

Future<Map<String, dynamic>> deserializeJsonInIsolate(String jsonString) async {
  // Spawning an isolate to perform JSON decoding
  final result = await Isolate.run(() {
    return jsonDecode(jsonString) as Map<String, dynamic>;
  });
  return result;
}

Future<void> processRecord(ParseObject record) async {
  String metadata = record.get<String>('metadata') ?? '{}';

  // Offload JSON deserialization to an isolate
  Map<String, dynamic> decodedData = await deserializeJsonInIsolate(metadata);

  // Do something with the decoded data
  print('Processed metadata for ${record.get<String>('title')}');
}
﻿
Integrasikan Pemrosesan Isolate ke dalam Aplikasi: Perbarui RecordScreen widget untuk memproses metadata setiap catatan menggunakan isolate:
Dart
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
class _RecordScreenState extends State<RecordScreen> {
  List<ParseObject>? records;
  bool isLoading = true;

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

  Future<void> fetchAndProcessRecords() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Record'));
    final response = await query.query();

    if (response.success && response.results != null) {
      List<ParseObject> fetchedRecords = response.results as List<ParseObject>;

      // Process each record's metadata using an isolate
      for (var record in fetchedRecords) {
        await processRecord(record);
      }

      setState(() {
        records = fetchedRecords;
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Records')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: records!.length,
              itemBuilder: (context, index) {
                final record = records![index];
                return ListTile(
                  title: Text(record.get<String>('title') ?? 'No Title'),
                  subtitle: Text(record.get<String>('description') ?? 'No Description'),
                );
              },
            ),
    );
  }
}
﻿
Implementasi ini mengambil catatan dari Back4app, memindahkan tugas deserialisasi JSON yang berat ke dalam isolate, dan memperbarui UI setelah pemrosesan selesai.
Langkah 5 – Menguji dan Menjalankan Aplikasi Anda
Jalankan aplikasi Anda menggunakan flutter run. Anda seharusnya melihat daftar catatan yang diambil dari Back4app. Metadata untuk setiap catatan diproses di isolate terpisah, memastikan UI tetap halus dan responsif.
Verifikasi kinerja dengan menguji file JSON besar di bidang metadata. Amati bagaimana penggunaan isolate mencegah jank dan menjaga UI tetap responsif.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana menggunakan isolate di Flutter untuk menangani tugas pemrosesan data berat, seperti mendeserialisasi file JSON besar. Dengan memindahkan tugas-tugas ini ke isolate, Anda menjaga thread UI tetap bebas untuk menangani rendering, yang menghasilkan aplikasi yang lebih halus dan responsif. Mengintegrasikan Back4app sebagai backend memungkinkan Anda untuk mengelola dan mengambil data dengan efisien, sementara model isolate Dart memastikan bahwa aplikasi Anda tetap berkinerja baik bahkan saat menangani operasi yang kompleks.
Untuk informasi lebih lanjut tentang menggunakan Flutter dengan Back4app, lihat dokumentasi Back4app dan dokumentasi Flutter. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Mengembangkan Aplikasi Javascript Waktu Nyata
BERIKUTNYA
Membangun dan Menggunakan Ekstensi DevTools Flutter dengan Back4app