More
Как использовать изоляты в Flutter с Back4app для обработки объемных данных
13 мин
введение flutter — это мощный фреймворк для создания кроссплатформенных приложений, но, как и многие мобильные фреймворки, он по умолчанию выполняет весь код в одном потоке этот поток, известный как поток пользовательского интерфейса, отвечает за отображение пользовательского интерфейса вашего приложения когда тяжелые задачи, такие как обработка данных или работа с файлами, происходят в потоке пользовательского интерфейса, это может привести к задержкам или "подтормаживанию" приложения, что негативно сказывается на пользовательском опыте чтобы решить эту проблему, dart предоставляет функцию под названием isolates isolates позволяют выполнять ресурсоемкие вычисления в отдельном потоке, сохраняя отзывчивость вашего пользовательского интерфейса в этом учебном пособии мы рассмотрим, как использовать isolates в приложении flutter для обработки тяжелых задач по обработке данных, таких как десериализация больших json файлов, полученных из бэкенда back4app предварительные требования чтобы завершить этот учебник, вам потребуется учетная запись 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 для этого учебника создайте класс parse с именем record для хранения больших объемов данных title (string) заголовок записи description (string) описание записи metadata (json) большое содержимое метаданных, связанное с записью заполните класс образцовыми данными добавьте несколько записей в класс record с большими json объектами в поле metadata это смоделирует обработку данных, которая может вызвать задержки в реальном приложении получите свои учетные данные back4app перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения flutter к back4app шаг 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 , импортируйте sdk parse и инициализируйте его в функции 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'), ); }, ), ); } } этот код получает все записи из класса record в back4app и отображает их в списке шаг 4 – перенос тяжелой обработки данных в изолят использование изолята для десериализации большого json предположим, что поле metadata в каждой записи содержит большой объект json, который необходимо десериализовать чтобы избежать блокировки потока пользовательского интерфейса, мы будем использовать изолят для выполнения этой задачи 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 в изолят и обновляет пользовательский интерфейс после завершения обработки шаг 5 – тестирование и запуск вашего приложения запустите ваше приложение с помощью flutter run вы должны увидеть список записей, полученных из back4app метаданные для каждой записи обрабатываются в отдельном изоляте, что обеспечивает плавность и отзывчивость интерфейса проверьте производительность с помощью тестирования больших json файлов в поле метаданных наблюдайте, как использование изолятов предотвращает заикания и сохраняет отзывчивость интерфейса заключение в этом учебном пособии вы узнали, как использовать изоляторы в flutter для обработки тяжелых задач по обработке данных, таких как десериализация больших json файлов перенос этих задач в изолят позволяет вам оставить поток интерфейса свободным для обработки рендеринга, что приводит к более плавному и отзывчивому приложению интеграция back4app в качестве бэкенда позволяет эффективно управлять и извлекать данные, в то время как модель изолятов dart гарантирует, что ваше приложение остается производительным даже при выполнении сложных операций для получения дополнительной информации о использовании flutter с back4app, ознакомьтесь с документацией back4app https //www back4app com/docs и документацией flutter https //flutter dev/docs удачного кодирования!