FlutterでIsolatesを使ってBack4appと連携し、重いデータ処理を行う方法

はじめに flutterはクロスプラットフォームアプリケーションを構築するための強力なフレームワークですが、多くのモバイルフレームワークと同様に、デフォルトではすべてのコードを単一のスレッドで実行します。このスレッドはuiスレッドとして知られ、アプリのuiをレンダリングする責任があります。データ処理やファイル処理のような重いタスクがuiスレッドで発生すると、アプリが遅延したり「ジャンク」したりし、ユーザーエクスペリエンスが悪化する可能性があります。 これに対処するために、dartは isolates という機能を提供します。isolatesを使用すると、高価な計算を別のスレッドで実行できるため、uiを応答性のある状態に保つことができます。このチュートリアルでは、flutterアプリケーションでisolatesを使用して、back4appバックエンドから取得した大きなjsonファイルのデシリアライズなどの重いデータ処理タスクを処理する方法を探ります。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント。 back4app com https //www back4app com で無料アカウントにサインアップしてください。 ローカルマシンにflutter開発環境をセットアップしてください。まだセットアップしていない場合は、 flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 dart、flutterウィジェット、および非同期プログラミングの基本的な知識。 ステップ1 – back4appバックエンドの設定 back4appプロジェクトを作成する back4appアカウント https //www back4app com/ にログインし、新しいプロジェクトを作成します。 parseクラスを作成する このチュートリアルでは、 record という名前のparseクラスを作成し、大量のデータを保存します title (string) レコードのタイトル。 description (string) レコードの説明。 metadata (json) レコードに関連付けられた大きなメタデータコンテンツ。 サンプルデータでクラスを埋める record クラスに大きなjsonオブジェクトを含むいくつかのレコードを追加します。これは、実際のアプリでジャンクを引き起こす可能性のあるデータ処理のシミュレーションになります。 back4appの資格情報を取得する プロジェクト設定に移動して、flutterアプリをback4appに接続するために必要なアプリケーションidとクライアントキーを取得します。 ステップ 2 – flutter プロジェクトの設定 新しい flutter プロジェクトを作成 ターミナルまたはコマンドプロンプトを開き、次を実行します flutter create isolate example 依存関係を追加 pubspec yaml を開き、次の依存関係を追加します dependencies flutter sdk flutter parse server sdk flutter latest version 次のコマンドを実行します flutter pub get これらの依存関係をインストールします。 アプリで parse を初期化 lib/main dart , parse sdk をインポートし、次の main 関数内で初期化します 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(), ); } } 「 'your back4app app id' 」と「 'your back4app client key' 」を実際のback4appの資格情報に置き換えてください。 ステップ3 – back4appからデータを取得する recordscreenウィジェットを作成する 「 lib/main dart 」で、back4appからデータを取得する新しい画面を作成します 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'), ); }, ), ); } } このコードは、back4appの「 record 」クラスからすべてのレコードを取得し、リストに表示します。 ステップ4 – 重いデータ処理をアイソレートにオフロードする 大きなjsonをデシリアライズするためにアイソレートを使用する 各レコードの「 metadata 」フィールドにデシリアライズする必要がある大きなjsonオブジェクトが含まれていると仮定します。uiスレッドをブロックしないように、アイソレートを使用してこのタスクを実行します。 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')}'); } アプリにアイソレート処理を統合する recordscreen ウィジェットを更新して、各レコードのメタデータをアイソレートを使用して処理します 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'), ); }, ), ); } } この実装は、back4appからレコードを取得し、重いjsonデシリアライズタスクをアイソレートにオフロードし、処理が完了したらuiを更新します。 ステップ5 – アプリのテストと実行 アプリを実行する using flutter run back4appから取得したレコードのリストが表示されるはずです。各レコードのメタデータは別のアイソレートで処理され、uiがスムーズで応答性を保つことが保証されます。 パフォーマンスを確認する メタデータフィールドに大きなjsonファイルを使用してテストすることで。アイソレートの使用がジャンクを防ぎ、uiを応答性のあるものに保つ様子を観察してください。 結論 このチュートリアルでは、flutterでアイソレートを使用して、大きなjsonファイルのデシリアライズなどの重いデータ処理タスクを処理する方法を学びました。これらのタスクをアイソレートにオフロードすることで、uiスレッドをレンダリング処理に自由に保ち、よりスムーズで応答性のあるアプリを実現します。back4appをバックエンドとして統合することで、データを効率的に管理および取得でき、dartのアイソレートモデルにより、複雑な操作を処理しているときでもアプリのパフォーマンスが維持されます。 flutterをback4appと一緒に使用するための詳細情報については、次を確認してください。 back4appのドキュメント https //www back4app com/docs と flutterのドキュメント https //flutter dev/docs コーディングを楽しんでください！