Quickly Admin

Quickly全栈在线市场项目的管理员应用程序。该应用程序使用Flutter构建,并使用基于Node.js Express框架的REST-API作为后端服务器,该服务器又使用MongoDB作为数据库。

下载此应用的.apk : Quickly admin

此前端应用程序使用Flutter构建,遵循Bloc模式和Bloc状态管理,并考虑了清晰的架构。

另请参阅
用户应用程序 : Quickly

Rest-Api : Quickly Api

管理员应用的核心功能

  • 创建账户并接收欢迎电子邮件
  • 登录账户并使用通过电子邮件发送的OTP重置密码
  • 显示管理员产品列表
  • 创建、查看、更新和删除产品
  • 包含条形图和饼图的指标,代表类别
    • 库存成本分布
    • 收入和销售以及卖家里程碑
    • 通过独特用户查看次数来了解产品和类别的吸引力
  • 登出

应用屏幕

应用程序以启动屏幕开始,然后是开始页面,该页面指定了应用程序的外观和认证链接

Quickly-admin-start

认证页面

注册和登录
注册时,会为用户创建账户,用户会收到来自Quickly的欢迎电子邮件,用户可以使用凭据登录。

Sign up log-in

重置密码
用户需要输入电子邮件和OTP来更改密码,OTP将发送到他们的电子邮件地址。

reset reset-email reset-otp

主页

应用程序栏包含库存成本指标和管理员交易的常规详细信息。主体由产品列表组成。其他页面:销售、浏览量和个人资料。

Quickly-admin-homepage sales views profile

产品

查看产品、添加产品、更新产品、删除产品。

Quickly-admin-crud product add-product update-product delete-product

文件夹结构

本项目遵循使用BLoC模式的清晰架构,代码被分成了

|- Data Layer
|- Domain Layer
|- Presentation Layer

完整的文件夹结构如下

lib文件夹包含

lib
|- data
|- domain
|- presentation
|- config
|- main.dart

data子文件夹处理所有数据调用,无论是本地还是远程

data
  |- local
     |- local_data.dart
  |- remote
     |- remote_data.dart

domain子文件夹包含模型和存储库

domain
  |- models
    |- product.dart
    |- user.dart
  |- repositories
    |- auth_repository.dart
    |- metric_repository.dart
    |- product_repository.dart

presentation子文件夹包含所有UI部分和bloc;widgets包含重构的、可重用的widgets。

UI部分

presentaion
   |- pages
     |- authentication
        |- start.dart
        |- sign_up.dart
        |- sign_in.dart
        |- reset_password.dart
     |- metrics
         |- sales.dart
         |- views.dart
     |- product
         |- add_product.dart
         |- products.dart
         |- product.dart
     |- profile
         |- prodile.dart
     |- home_page.dart
   |- widgets
      |- metrics
         |- metrics_helper.dart
      |- order_steps
         |- address_step.dart
         |- order_placed.dart
         |- review_details.dart
      |- products
         |- product_helper.dart
         |- products_helper.dart
      |- input_field.dart

BLoC :

presentaion
 |- Bloc
   |- bloc
     |- auth_bloc.dart
     |- metric_bloc.dart
     |- product_bloc.dart
   |- events
     |- auth_events.dart
     |- metric_events.dart
     |- product_events.dart

GitHub

https://github.com/GauravMcode/Quick-Shop_admin