Grocer.io?

Grocer.io 是一个旨在简化购物清单创建的个人项目。该应用程序正处于持续开发中,目标是为创建和管理购物清单提供高效、流畅的体验。本文档旨在提供有关该项目及其当前功能的​​基本信息。

 

项目结构概览

? src
├─ assets
│  ├─ animations
│  └─ fonts
└─ lib
   ├─ core  [Core features and configurations]
   │  ├─ app
   │  ├─ date_and_time
   │  ├─ design_system [Design system widgets and utils]
   │  ├─ local_storage
   │  ├─ navigation
   │  ├─ providers
   │  ├─ string
   │  └─ theme [Theme configuration based on Material 3]
   └─ features
      ├─ categories
      ├─ groceries 
      │  ├─ atoms [Atomic stores]
      │  ├─ models [Entities declarations]
      │  ├─ screens [Feature screens]
      │  └─ widgets [Feature widgets]
      └─ purchases

项目架构

Grocer.io 的架构基于功能驱动的架构。每个功能都有其自己的小部件、屏幕、实用程序、模型和唯一实例。

features

在 Grocer.io 中,应用程序主要围绕两个主要功能构建,每个功能都服务于不同的功能和用户体验。

杂货

“杂货”功能是应用程序的核心,它包含一组小部件、原子和小部件,这些共同代表了购物清单——即在市场上购买的商品的全面清单。

购买

“购买”功能通过管理与已完成购买相关的元素来补充核心购物清单功能。未来,它将扩展到包括购买摘要和财务统计数据。

核心文件夹

在我们的项目结构中,我们包含了一个专门的“core”文件夹,作为对应用程序无缝运行至关重要的基本功能的存储库。此文件夹包含主题系统、导航框架以及我们设计系统的基础元素等。

共享状态管理

在这里,我们还应用原子全局/共享状态的概念,其中所有共享商店(在小部件和屏幕之间)仅携带单个状态。原子状态的一个重要方面是它们能够与其他状态进行交互并响应其变化。

状态管理使用 Riverpod 库实现,这与原子状态的概念完美契合。在 Riverpod 库中,可以创建迷你商店,通常称为提供程序,它们封装了单个应用程序状态以及一系列可以修改该状态的方法。

具有业务规则的小部件

对于需要自己状态和特定业务规则的小部件,Grocer.io 的架构要求创建小部件控制器。这些控制器负责管理小部件的状态和业务逻辑,确保关注点分离。与原子小部件的使用方式类似,在应用程序中,小部件控制器是使用 Riverpod 提供程序创建和管理的。

此外,这种设计允许对小部件方法进行全面的单元测试,确保每个组件都能正常运行并且没有缺陷。

应用详细功能

  • 向购物清单添加新项目:用户可以轻松地将新项目添加到他们的购物清单,指定名称、数量和价格。

  • 从购物清单中删除项目:不再需要的项目可以通过简单的操作从列表中删除。

  • 编辑项目数量和价格:用户可以灵活地根据需要修改购物清单中项目的数量和价格。

  • 切换项目状态:Grocer.io 允许用户切换项目状态,指示项目是否已购买。这有助于跟踪购物进度。

  • 本地状态持久化:应用程序会持久存储所有产品信息,包括项目是否已购买,从而确保用户的数据在会话之间得到保留。

未来功能

  • 产品单位注册:用户将能够为产品指定计量单位,例如升、毫升或单个单位。

  • 产品类别注册:用户可以对其物品进行分类以获得更好的组织。

  • 列表排序:列表可以根据产品类别和通道号进行排序,使购物体验更加高效。

  • 过去的购物摘要:访问过去的购物行程摘要以了解购买历史。

  • 支出统计:深入了解每周和每月的支出,并跟踪产品价格的变化,以识别哪些商品随着时间的推移变得更贵或更便宜。

GitHub

查看 Github