Comics_app

展示漫画的应用

该应用向 ComicVine 漫画 api 发送一对请求 https://comicvine.gamespot.com/api/

此应用仅使用 Flutter Web(SDK 版本:3.0.1)

应用架构

该应用遵循 CLEAN 架构。我在设计项目时不仅考虑了当前功能,还考虑了未来应用扩展需要更多功能的可能性。

但是,它缺少一些我所知的最佳实践

  • 将字符串文字放在一个文件中以供未来语言使用
  • 设置自定义主题
  • 完全缺乏单元测试

对应用架构的简要解释

  • 数据:应用中所有数据源的层,在这种情况下,我们只有一个模块,即漫画数据源

  • 领域:所有业务逻辑的层,在这种情况下,我们只有一个模块,即获取漫画的业务逻辑

  • 表现:这里只有数据的表现及其状态,在这种情况下,我们有:漫画(漫画列表,基本上是主菜单)和 comics_list(显示所选漫画的详细信息)

重要提示:测试前

( 请务必也这样做,以使应用正常运行)。

A) 我在从 api 获取数据时遇到了 CORS 问题,所以我遇到的解决方法是这样做

- Go to your flutter\bin\cache and remove a file named: flutter_tools.stamp

- Go to flutter\packages\flutter_tools\lib\src\web and open the file chrome.dart

- Find '--disable-extensions'

- Add '--disable-web-security'

然后,应用程序应该正常进行请求。

B) 为了展示一些最佳实践,我将 api URL 放在一个 .env 文件中,所以请在 assets/ 中创建一个 .env 文件,并按此格式放置基本 URL

API_URL = https://comicvine.gamespot.com/api

然后,在运行项目时添加一个额外的运行参数,或在 Android Studio 中将其配置为额外的运行参数

  --dart-define=API_KEY=your_api_key

C) 该应用使用 Injectable 包来展示 DI 知识,所以请在启动应用前运行以下命令

flutter packages pub run build_runner build

GitHub

查看 Github