More
Wie man Isolate in Flutter mit Back4app verwendet, um umfangreiche Datenverarbeitung zu behandeln
13 min
einführung flutter ist ein leistungsstarkes framework zum erstellen plattformübergreifender anwendungen, aber wie viele mobile frameworks führt es standardmäßig gesamten code in einem einzigen thread aus dieser thread, bekannt als der ui thread, ist verantwortlich für das rendern der benutzeroberfläche ihrer app wenn schwere aufgaben wie datenverarbeitung oder dateiverwaltung im ui thread auftreten, kann dies dazu führen, dass die app verzögert oder "ruckelt", was zu einer schlechten benutzererfahrung führt um dies zu beheben, bietet dart eine funktion namens isolates isolates ermöglichen es ihnen, rechenintensive berechnungen in einem separaten thread auszuführen, wodurch ihre benutzeroberfläche reaktionsfähig bleibt in diesem tutorial werden wir erkunden, wie man isolates in einer flutter anwendung verwendet, um schwere datenverarbeitungsaufgaben zu bewältigen, wie das deserialisieren großer json dateien, die von einem back4app backend abgerufen werden voraussetzungen um dieses tutorial abzuschließen, benötigen sie ein back4app konto melden sie sich für ein kostenloses konto an unter back4app com https //www back4app com eine flutter entwicklungsumgebung, die auf ihrem lokalen computer eingerichtet ist folgen sie der flutter installationsanleitung https //flutter dev/docs/get started/install , wenn sie sie noch nicht eingerichtet haben grundkenntnisse in dart, flutter widgets und asynchroner programmierung schritt 1 – einrichten ihres back4app backends erstellen sie ein back4app projekt melden sie sich bei ihrem back4app konto https //www back4app com/ an und erstellen sie ein neues projekt erstellen sie parse klassen erstellen sie für dieses tutorial eine parse klasse mit dem namen record , die große datenmengen speichert titel (string) der titel des datensatzes beschreibung (string) eine beschreibung des datensatzes metadaten (json) große metadateninhalte, die mit dem datensatz verbunden sind füllen sie die klasse mit beispieldaten fügen sie mehrere datensätze zur record klasse mit großen json objekten im metadaten feld hinzu dies simuliert die art der datenverarbeitung, die in einer echten app zu ruckeln führen könnte holen sie sich ihre back4app anmeldeinformationen navigieren sie zu ihren projekteinstellungen, um ihre anwendungs id und ihren client schlüssel abzurufen, die sie benötigen, um ihre flutter app mit back4app zu verbinden schritt 2 – einrichten ihres flutter projekts erstellen sie ein neues flutter projekt öffnen sie ihr terminal oder die eingabeaufforderung und führen sie aus flutter create isolate example abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter parse server sdk flutter latest version führen sie flutter pub get aus, um diese abhängigkeiten zu installieren initialisieren sie parse in ihrer app in lib/main dart , importieren sie das parse sdk und initialisieren sie es in der main funktion 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(), ); } } ersetzen sie 'your back4app app id' und 'your back4app client key' durch ihre tatsächlichen back4app anmeldeinformationen schritt 3 – daten von back4app abrufen erstellen sie das recordscreen widget in lib/main dart , erstellen sie einen neuen bildschirm, der daten von back4app abruft 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'), ); }, ), ); } } dieser code ruft alle datensätze aus der record klasse in back4app ab und zeigt sie in einer liste an schritt 4 – verarbeitung großer datenmengen an ein isolate auslagern verwendung von isolate zur deserialisierung großer json daten angenommen, das metadata feld in jedem datensatz enthält ein großes json objekt, das deserialisiert werden muss um zu vermeiden, dass der ui thread blockiert wird, verwenden wir ein isolate, um diese aufgabe auszuführen 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')}'); } dieser code ruft alle datensätze aus der record klasse in back4app ab und zeigt sie in einer liste an integrieren sie die isolate verarbeitung in die app aktualisieren sie das recordscreen widget, um die metadaten jedes datensatzes mit dem isolate zu verarbeiten 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'), ); }, ), ); } } diese implementierung ruft datensätze von back4app ab, lagert die schwere json deseerialisierungsaufgabe an ein isolate aus und aktualisiert die benutzeroberfläche, sobald die verarbeitung abgeschlossen ist schritt 5 – testen und ausführen ihrer app führen sie ihre app aus mit flutter run sie sollten eine liste von datensätzen sehen, die von back4app abgerufen wurden die metadaten für jeden datensatz werden in einem separaten isolat verarbeitet, um sicherzustellen, dass die benutzeroberfläche reibungslos und reaktionsschnell bleibt überprüfen sie die leistung durch tests mit großen json dateien im metadatenfeld beobachten sie, wie die verwendung von isolaten ruckler verhindert und die benutzeroberfläche reaktionsschnell hält fazit in diesem tutorial haben sie gelernt, wie sie isolate in flutter verwenden, um schwere datenverarbeitungsaufgaben zu bewältigen, wie das deserialisieren großer json dateien indem sie diese aufgaben an ein isolat auslagern, halten sie den ui thread frei, um das rendering zu übernehmen, was zu einer reibungsloseren und reaktionsschnelleren app führt die integration von back4app als backend ermöglicht es ihnen, daten effizient zu verwalten und abzurufen, während das isolat modell von dart sicherstellt, dass ihre app auch bei der verarbeitung komplexer operationen leistungsfähig bleibt für weitere informationen zur verwendung von flutter mit back4app, schauen sie sich die back4app dokumentation https //www back4app com/docs und flutter dokumentation https //flutter dev/docs viel spaß beim programmieren!