Flutterzon – 使用Flutter克隆Amazon

Flutterzon

Flutterzon 致力于创建一个Amazon克隆应用，作为一个全栈电子商务应用程序。技术栈包括用于前端的Flutter，用于后端的Node.js，用于数据存储的MongoDB，用于高效状态管理的Bloc，以及用于无缝图片和媒体管理的Cloudinary。主要目标是忠实地镜像Amazon移动应用程序中的功能和用户体验。

Flutterzon 专注于提供无缝且响应式的用户界面，确保用户在平台上浏览时获得流畅直观的体验。它还配备了管理面板，经过战略性集成以增强控制并促进有效管理。这个附加组件满足了行政需求，提供了管理和优化应用程序各个方面的方式。

Flutterzon 是一项有目的的举措，其主要目标是创建一个Amazon克隆应用程序，忠实地重现Amazon移动应用程序著名的功能和用户体验。

技术栈

  • 客户端

    Flutter Badge NodeJS Express.js MongoDB MongoDB

功能

  • 认证与用户数据

    • 电子邮件和密码认证： 使用电子邮件和密码凭据登录和管理用户账户。

    • 持久化认证状态和用户类型重定向： 在启动应用程序和登录过程中，保持登录状态，并根据您的用户类型自动登陆正确的仪表板（用户或管理员）。

    • 使用 Hydrated Bloc 进行用户数据持久化： 使用 Hydrated Bloc 持久化存储用户数据，以实现无缝的用户体验。

  • 主屏幕

    • 动态主屏幕优惠： 主屏幕上有多个优惠，包括引人入胜的静态图片轮播，一个精选的交易水平列表（也是静态的），但四个动态图片优惠可以轻松从后端更新，以实现持续刷新体验。

  • 产品管理

    • 按类别划分的产品： 按类别组织产品，方便浏览和导航。

    • 产品搜索： 使用专门的搜索功能高效搜索产品。

    • 产品详情： 查看全面的产品详情，包括平均评分、评分次数以及基于产品类别的产品推荐。

    • 产品评分系统： 仅为您订购过的产品评分，可以通过产品详情或订单详情屏幕进行。

    • 每日特价： 发现评分最高的产品作为“每日特价”。

  • 账户功能

    • 订购产品： 无缝地订购产品。

    • 订单详情： 查看订单详情，包括状态，并根据订购的产品类别接收产品推荐。

    • 搜索订单： 轻松搜索特定订单。

    • 浏览历史： 维护最近访问过的产品历史，以便于访问。

    • 心愿单： 创建和管理心愿单，以跟踪您想要的产品。

  • 购物车管理

    • 购物车列表： 查看和管理添加到购物车中的产品。

    • 购物车操作

      • 向右滑动：从购物车中删除商品。
      • 向左滑动：将商品添加到“稍后保存”列表中。
      • 查看购物车商品的相似产品。

    • 稍后保存列表： 管理稍后保存的产品。

    • 稍后保存操作

      • 向右滑动：从“稍后保存”列表中删除商品。
      • 向左滑动：将商品添加到购物车。
      • 删除、比较和在购物车与稍后保存列表之间移动产品。

    • 产品推荐： 根据用户的浏览历史接收产品推荐，或在没有浏览历史的情况下接收随机推荐。

    • 结账选项

      • Google Pay 结账： 使用 Google Pay 进行结账，享受安全便捷的支付体验。

      • 立即购买结账： 付款后立即使用“立即购买”选项订购所选产品。

  • 管理面板： 使用全面的管理面板有效管理电子商务平台。

    • 管理面板功能

      • 产品管理： 按类别查看、添加和删除产品。

      • 收入分析： 使用可视化图表跟踪总收入和按类别划分的收入。

      • 四张图片优惠管理： 从管理部分查看、添加和删除四张图片优惠。

      • 订单管理： 查看订单详情并更改订单状态。

  • 登出： 轻松退出用户和管理员账户。

  • 使用的一些包

    • bloc： 利用 bloc 进行有效状态管理。

    • hydrated_bloc： 使用 hydrated_bloc 持久化用户数据，以实现无缝的用户体验。

    • equatable： 使用 equatable 高效比较对象，以提高性能。

    • syncfusion_flutter_charts 包： 使用 syncfusion_flutter_charts 包以全面的图表格式显示按类别划分的收入。

    • go_router： 采用 go_router 在应用程序中进行高效的页面导航。

屏幕截图

  • 首页

    Product

  • 产品

    Product

  • 订单

    Order

  • 购物车

    Cart

  • 管理员

    Admin

    Admin

本地运行

  • 克隆此仓库

    https://github.com/tejasbadone/flutterzon_bloc.git

  • 迁移到根目录并通过运行安装所有必需的依赖项

    flutter pub get

  • 创建 MongoDB 项目和集群

  • 使用 Drivers 连接到集群并获取连接字符串。

  • 我已在项目根目录创建了一个 config.env 文件，其中包含设置所需的基本详细信息，您也可以创建一个或直接更新必要的值，这完全取决于您。

  • 转到 server/index.js 并替换 userName、password 和 connection string。

  • 转到 lib/src/utils/constants/strings.dart 并用您的 IP 地址替换 uri。

  • 创建 Cloudinary 项目，并在设置中启用未签名的操作。

  • 转到 lib/src/data/repositories/admin_repository.dart，在 uploadImages() 方法中更新 cloudinaryCloudName 和 cloudinaryUploadPreset。

  • 现在，运行以下命令，迁移到服务器文件夹，安装必需的依赖项，并在本地运行服务器。

    cd server
npm install
npm run dev (to run index.js using nodemon)
OR
npm start (to run index.js)

下载

下载 apk – https://drive.google.com/file/d/1K1k8DbwHfyAnujwRAPgzXmcEUVABFB_p/view?usp=sharing

测试凭据

笔记

  • 如果您想在该应用程序中下订单，您可以注册 Google Pay API 测试卡白名单。这将为您提供模拟卡详细信息，使您能够在一个受控环境中安全地测试下单功能。

  • 对于上面提供的 Flutterzon apk 的 GitHub 版本，请注意，某些管理功能，例如删除产品和优惠的能力，已被故意禁用，以防止对实际数据库进行意外篡改。您可以访问的原始代码库包含完整的功能，包括删除产品。如果您想探索全部功能，请参阅提供的原始代码。

  • 请注意，由于服务器托管在业余计划上，应用程序或 API 在提供详细信息时可能会出现延迟。如果 15 分钟没有活动，服务器可能会休眠，导致第一个 API 请求处理延迟。我们非常感谢您在此过程中的耐心。

  • 如果您有兴趣，还有另一个使用 Provider 和 Flutter 的 setState 构建的版本。您可以在 此处 访问它。

免责声明

此应用程序是一个个人项目，出于教育和学习目的而构建。它与 Amazon 没有任何关联或认可。虽然该应用程序具有受 Amazon 启发的产品详情和图片，但这些仅用于演示目的，可能不代表实际产品。这些元素的所有权利属于其各自所有者。我们仅出于教育目的使用它们，无意进行商业开发。

此外，请注意，在此原型中尝试下单仅用于测试目的，不会导致实际产品交付或产生真实世界费用。此环境仅用于模拟和开发目的。

联系方式

  • Tejas Badone LinkedIn Gmail

    欢迎随时与我联系！

许可证

本项目根据 MIT 许可协议授权 – 详情请参阅 LICENSE.md 文件

GitHub

查看 Github