More
Как использовать Flutter Completers с бэкендом на Back4app
11 мин
введение фьючерсы и потоки — это то, что нужно для любых асинхронных операций однако иногда этого недостаточно если вам нужен более продвинутый контроль над фьючерсами , то используйте completer это инструмент, с помощью которого вы можете программно завершить фьючерс таким образом, это обеспечивает лучший контроль над асинхронными операциями этот учебник поможет вам разобраться в использовании flutter completers в приложении, которое взаимодействует с бэкендом на back4app к концу этого учебника вы научитесь использовать completers в приложении flutter для управления асинхронными задачами и интеграции этих задач с предоставляемым сервисом бэкенда от back4app мы собираемся создать очень простое приложение, которое получает данные от back4app бэкенда, используя completer для управления потоком приложения предварительные требования чтобы завершить этот учебник, вам потребуется аккаунт на back4app зарегистрируйтесь для получения бесплатного аккаунта на back4app com https //www back4app com настроенная среда разработки flutter на вашем локальном компьютере следуйте руководству по установке flutter https //flutter dev/docs/get started/install , если вы еще не настроили её базовые знания dart и асинхронного программирования в flutter если вам нужно освежить знания, ознакомьтесь с руководством по асинхронному программированию flutter https //dart dev/codelabs/async await шаг 1 – настройка вашего back4app бэкенда сначала давайте настроим простой бэкенд на back4app, с которым будет взаимодействовать наше flutter приложение войдите в свою учетную запись back4app и создайте новый проект настройте новый класс parse с именем task , который будет хранить задачи, которые наше flutter приложение будет извлекать добавьте следующие столбцы в класс task name (string) имя задачи status (boolean) статус задачи (выполнена или нет) добавьте несколько тестовых задач в базу данных back4app для тестирования например задача 1 name = "завершить учебник по flutter", status = true задача 2 name = "начать новый проект", status = false ваш бэкенд back4app теперь готов к доступу из приложения flutter шаг 2 – создание проекта flutter далее мы создадим новый проект flutter откройте терминал или командную строку выполните следующую команду, чтобы создать новый проект flutter flutter create completer demo перейдите в каталог проекта cd completer demo 2\ откройте проект в вашем предпочтительном редакторе кода (например, vs code, android studio) шаг 3 – добавление parse sdk и настройка приложения теперь давайте добавим необходимые зависимости для взаимодействия с back4app откройте pubspec yaml и добавьте следующие зависимости dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ запустите flutter pub get для установки зависимостей 3\ в lib/main dart , импортируйте parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ инициализируйте parse в функции main 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()); } замените 'your app id' и 'your client key' на ваши реальные учетные данные back4app шаг 4 – использование completers для асинхронного получения данных теперь давайте используем completer для получения данных из бэкенда back4app и контроля, когда данные будут доступны для использования в пользовательском интерфейсе в lib/main dart , создайте новый класс, который будет получать задачи из back4app, используя 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'); } } } этот класс инициализирует completer , начинает извлечение данных и завершает completer , когда данные становятся доступными 2\ в виджете myapp , используйте taskmanager , чтобы извлечь и отобразить задачи 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\ запустите ваше приложение flutter вы должны увидеть список задач, извлеченных из вашего бэкенда back4app, с их именами и статусом завершения заключение в этом уроке вы узнали, как использовать flutter completers для управления асинхронными операциями и контроля потока извлечения данных в вашем приложении интегрировавшись с back4app, вы создали простой, но мощный бэкенд для вашего приложения flutter, позволяющий вам динамически извлекать и отображать данные этот подход можно расширить для обработки более сложных сценариев, таких как аутентификация пользователей, манипуляция данными и многое другое для получения дополнительной информации о том, как использовать flutter с back4app, ознакомьтесь с документацией back4app по flutter https //www back4app com/docs/flutter/overview удачного кодирования!