关于程序员:Flutter-离线数据方案-FlutterData-包

1次阅读

共计 5444 个字符,预计需要花费 14 分钟才能阅读完成。

Flutter 离线数据计划 Flutter_Data 包

原文 https://levelup.gitconnected….

前言

通过离线优先来改善您的用户体验

Flutter Data 是一个让你的应用程序先离线的软件包。

离线时,它在设施上应用 Hive 存储,当到 API 的连贯可用时,更改将主动同步。

在本文中,咱们将增加 flutter_data 包并将其连接起来,以便在应用程序启动时检索 recipes。

注释

我花了一段时间才弄清楚本人想要什么,并勾画出设计草图:

High level design

过后产生了很多事件,要想做好是很简单的。

我用粗体文本突出显示了一些须要编码或配置的操作,并用它们制作了一个工作列表:

  • 步骤 1: 在启动时从 app_config.json 加载环境值。
  • 步骤 2: 增加新包。
  • 步骤 3: 正文 recipes 模型。
  • 步骤 4: 配置 Flutter 数据。
  • 步骤 5: 笼罩 Http 客户端应用 Dio。
  • 步骤 6: 为开发和测试配置 Mock Adapter。

您能够在 XP 局部中找到实现细节。

这篇文章有很多细节,我的倡议是浏览足够多的内容来了解正在产生的事件,如果您决定或须要实现它,能够将其作为参考。

请反馈,如果你有更好的办法或倡议的改良。咱们欢送任何有助于改良这一要害倒退工作的帮忙。

Ta Da 哒哒

GlobalEnvironmentValues.instance
   .loadValues(await rootBundle.loadString("app_config.json"));

启动时从 app_config.json 加载环境值。

对申请应用模仿 API 客户端

Flutter 数据触发 FindAll 办法

显示返回的 recipes

显示 Flutter Data 返回的 recipes

感觉有点头重脚轻,因为咱们刚刚配置了离线拜访,但仍在应用模仿数据进行开发和测试。

然而,这是咱们当初能够反对新实体的离线数据的一大步,咱们曾经为要害的开发工作 (增加或批改个性) 筹备了弱小的编码模式。

一旦我进行了身份验证,我就会回来,使 Flutter Data 可能应用基于环境的云 API 服务,我心愿设置 dev_online 和 dev_local 模式,并应用部署构建来配置 UAT 和 Live 版本。

施行细节

  • 步骤 1 ー在启动时加载环境值

从 app_config.json 文件加载环境值

“GlobalEnvironmentValues”服务应用“EnvConfigReader”加载 app_config.json 值:

import 'dart:convert';


// Access to enviromental values that are loaded from a config file.

// The CI/CD injects the per environment files on deployment.

class EnvConfigReader {

  late Map<String, dynamic> _config;


  EnvConfigReader(String configFileJson) {_config = json.decode(configFileJson) as Map<String, dynamic>;

  }


  String value(String key) {return _config[key];

  }

}
  • 步骤 2 ーー增加新的软件包
# Offline-first data framework with a customizable REST client and powerful model relationships.

flutter_data: ^1.4.7


# A reactive state caching and data-binding framework

# Recommend replacement for provider: that is mentioned by flutter

# https://docs.flutter.dev/development/data-and-backend/state-mgmt/options

hooks_riverpod: ^1.0.3+1


# Annotations used by code gen to create code for JSON serialization and deserialization

json_annotation: ^4.7.0


# Generate to/from JSON code for a class

json_serializable: ^6.5.4

步骤 3 ーー正文 recipes 模型

import 'package:flutter_data/flutter_data.dart';

import 'package:json_annotation/json_annotation.dart';

import 'package:simbucore/app/mixin/flutter_data_dev_api_server_adapter.dart';


part 'recipe.g.dart';


@JsonSerializable()

@DataRepository([FlutterDataApiServerAdapter])

class Recipe extends DataModel<Recipe> {

  @override

  final int? id;

  final String title;

  final String link;

  final String source;

  final String totalTime;

  final HasMany<Ingredient> ingredients;

  final HasMany<Step> steps;

  final String thumbnail;

将整机援用增加到将要生成的文件的导入,在下一步运行构建器之前,您将看到一个谬误:

文件失落谬误

关系须要应用 HasMany 和 BelongsTo 查看更多信息的文档。

Mixin FlutterDataApiServerAdapter 应用咱们当初在启动时加载的环境值设置 API 基 URL。

  • 步骤 4 ー设定 Flutter 数据

生成配方库

flutter pub run build_runner build

咱们须要生成一个存储库,而后能力在启动时初始化它,因为代码生成会在它生成的文件中生成初始化办法:

由 Flutter 数据生成的文件(Hive)

当初咱们能够在应用程序启动时将其连接起来:

Wire up the local Hive storage

连贯本地的 Hive 仓库

  • 步骤 X ー模仿 API 回应

这个从新设计的步骤 X ーー Mock API Response,当初取代了打算中的两个步骤:

  • 步骤 5 ーー重写 Http 客户端以应用 Dio
  • 步骤 6 ー配置模仿适配器

在对 Flutter Data 代码进行了更深刻的钻研之后,很显著,尝试应用 Dio 将意味着与包反抗,很多益处都在于它应用的针对 watch One、Save、findAll 等办法的代码中。

通过钻研 Flutter Data 如何测试它领有的代码并决定重写 HttpClient,我找到了我须要的货色:

重写 HttpClient 提供程序以模仿 API 响应

Dio 还会带来其余一些益处,然而看起来 Flutter Data 能够通过自定义适配器轻松 extension,以解决身份验证令牌和重试之类的事件。在 Flutter Data 网站上有一些文章和代码示例。

为什么我抉择应用 Flutter_Data

应用包是简化和缩小我的项目代码的一种很好的办法,使其更容易保护。

咱们在引入微应用程序 DigestablePrologue 时看到了这一点,它容许我删除主我的项目 DigestableMe 中的横切代码。

这简化了 DigestableMe 中的代码,让它专一于应用程序的个性,而 DigestablePrologue 解决所有的启动操作,比方布局和主题抉择,以及连贯 Riverpod 的 state management 包。

然而没有什么是 free 的,软件包会限度你,它们可能会停滞不前,或者会导致破坏性的变动,有依赖性,把你绑定到旧的软件包,有 bug 或者漏洞百出的形象。

我的引爆风行是,Flutter_data 提供了大量我正在寻找的性能,与 Riverpod 十分符合:

  • 应用代码生成从带正文的类创立 CRUD 存储库。
  • 建设本地数据库。
  • 离线检测。
  • 反应式数据绑定。
  • 失败和重试解决。
  • 在线时与 RestAPI 主动同步。
  • 可替换的关系。
  • 和 Riverpod 一起工作。
  • 反对我想应用的 JSON: API。
  • JSON 序列化被退出进来。
  • 选项用于实现不可变性。

这是咱们能够形象进去的很多货色,咱们能够创立一个新的规程来展现如何通过代码生成将新条目引入到应用程序中。

回心转意能够成为团队中真正的力量,如何达成共识是艰难的一点,它通常波及到更亲密的单干。

多年来,我发现结对编程在组建团队和开始我的项目时的确很有帮忙。

Going in the same direction

朝着同一个方向

每个环境的 API’s

将文件增加到我的项目 app_config 的根目录。Json 来保留开发 api 端点地址,这将被 CodeMagic 构建来反对其余环境所吞噬,详情请参阅他们的文章《带有 CodeMagic CD 的 Flutter 环境》。

而后拦挡这个虚构的端点,指向咱们的模仿开发数据。

开发环境配置值

这些值能够通过提供程序拜访,提供程序在利用程序运行时读取这些值。

灵便的学习和试验

在上一篇文章中,我增加了一个个性来检测客户机设施何时脱机,目标是应用它来同步脱机数据。

当我在本文中介绍 Flutter_Data 时,我意识到它能够解决检测,并且能够节俭一些工夫。然而:

你不能把将来的点点滴滴分割起来,你只能把它们回顾地分割起来 … ..。

史蒂夫 · 乔布斯

它只是揭示我去尝试,但不要太珍惜扔掉我花工夫在下面的工作,当一个更好的抉择呈现的时候。

Flutter Data ーー 关系

构建器强制要求图表中的所有相干模型都要正文:

生成器谬误ーー短少相干成分模型

Flutter Data ーー IsOfflineError 标记

Flutter Data 如何决定设施是否脱机。

Hive 本地数据库文件

Hive 在这里编写本地数据库文件:

/Users/<user>/Library/Developer/CoreSimulator/Devices
/060DB285-2820-411B-B5F7-76F9739DA934/data/Containers/Data/Application
/A72C3081-43DD-4E03-82D0-DC49A3AF1317/Documents/flutter_data

根本目录是通过门路提供程序包中的 getApplicationDocumentsDirectory 函数取得的,您能够在生成的 main.data.dart 文件中找到代码。

...
if (!kIsWeb) {baseDirFn ??= () => getApplicationDocumentsDirectory()
    .then((dir) => dir.path
      );
  } else {baseDirFn ??= () => '';
  }
...

如果在 configureRepositoryLocalStorage 初始化办法中重写 baseDirFn 参数,则能够设置本人的基目录。

进入 external 包代码

为了找到 Hive 没有写入权限的目录门路,我必须关上调试包代码的能力

Code.Preferences.Settings 菜单项

我重新启动了 VisualStudio 代码以使其失常工作,但您可能只须要重新启动应用程序。

Flutter Data 数据诊断

我心愿可能关上诊断日志记录,输入 Flutter Data 正在采取的要害操作,比方从 Hive 检索,因为离线并输入任何异样的信息,特地是从 / 到 json 的映射。

Discipline & Scaffold 脚手架

一旦我曾经验证和应用 Flutter 数据的口头几次,我将创立一个新的纪律,围绕它和改善脚手架。

这将是大多数新个性的外围局部,值得致力使过程简略并且代码可保护。

Latency and Chat 提早和聊天

如果咱们遇到了响应问题,咱们可能须要思考缩小对 API 的调用(少聊天),我狐疑这只是通过一个更大的图表或批处理调用,咱们须要找出最好的形式,这将适宜 flutter_data 包。

包和依赖项

在介绍了 Flutter_data 软件包之后,我试图将 Riverpod 降级到 2.1.1 版本,失去了以下后果:

依赖抵触同时降级 Riverpod

随着增加更多的软件包和微应用程序软件包,您的依赖关系将变得更难解决和降级。

这是一个候选的一些额定的报告或工具,以帮忙咱们的规模。

在这种状况下,Flutter_Data 须要 Riverpod 的 1.x 版本。

我在 pubspec.yaml 中为 Riverpod 指定了一些更高的版本号,在 simbucore 包中指定了 Flutter_Data,这简化了谬误音讯,从而解决了这个问题。

Clearer message

运行命令:

flutter pub outdated

显示能够解析的版本:

命令输入,显示能够解析的版本

Packages

  • Flutter_data
  • json_annotation
  • json_serializable

结束语

如果本文对你有帮忙,请转发让更多的敌人浏览。

兴许这个操作只有你 3 秒钟,对我来说是一个激励,感激。

祝你有一个美妙的一天~


© 猫哥

  • 微信 ducafecat
  • https://wiki.ducafecat.tech
  • https://video.ducafecat.tech

本文由 mdnice 多平台公布

正文完
 0