Aggie Dish – 移动端软件开发

该项目为开发IOS端外卖订餐软件,着重设计了前端UI交互与后端数据库管理

项目简介

介绍

该项目为本科毕业设计项目,目的是为大学打造一款移动端校内餐饮外卖软件。导师Naji Dmeiri要求我们在IOS平台开发软件,包括重新设计前端与完善后端数据结构与传输

角色

  • 用户体验研究
    了解用户的使用习惯,并对用户的反馈进行分析整理
  • 用户界面设计
    对产品原型进行多次迭代,并通过多轮用户测试不断完善

开发语言

  • 前端开发
    SwiftUI (XCode)
  • 后端开发
    JavaScript (MongoDB)

功能介绍

登录界面

首先来到用户登录的初始视图(界面)。当用户登录时,请点击“开始”按钮,然后下一个界面将允许用户选择他们的对应的学校。在选择学校(目前仅支持UC Davis)后,点击底部的“登录”按钮,使用您的校园邮件账号登录。登录后,用户将即可看到校园的餐厅详情。

餐厅界面

这个视图界面显示了校园上可用的餐厅列表,包括所有食堂、餐馆和咖啡厅。每个餐厅都将显示为一张包含名称、营业时间和地点的卡片。

如果用户已保存了喜爱的餐厅,它们将显示在界面顶部,并可横向滚动。添加和删除喜爱的餐厅等功能将在稍后展示。

该界面同样加入了内容过滤器,只需要点击屏幕上的不同过滤器, 即可过滤出需要的内容。

餐厅详情界面

当用户点击某个餐厅,将会进入到这个界面。该界面显示了特定餐厅的信息和菜单,包括:

  • 餐厅的当前状态(开/关)
  • 餐厅的营业时间、地点和介绍
  • 特定日期的菜单

如果用户想在餐厅当前关闭或查看未来菜单时查看菜单,只需轻触“Change”按钮,然后选择他们想要的日期。

右上角有两个按钮,专门用于:

  • 添加/移除至喜爱的餐厅
  • 转到购物车

菜品界面

当用户点击进入某个菜品,将会展示了该菜品的基本信息和可定制选项,包括:

  • 食物的详情
  • 食材 (潜在过敏源)
  • 菜品可选的配菜(必选或可选)
  • 自定义数量
  • 添加购物车按钮

食物描述,食材信息,菜单定制由餐厅网站提供。价格将随着可定制项自动更新。

购物车界面

当用户点击购物车按钮,将会进入此界面,显示了当前餐厅购物车中的信息,包括:

  • 购物车中的菜品信息,包括价格、定制项、数量和总价
  • 增加(+)和减少(-)按钮,用于修改菜品数量
  • 删除按钮,用于删除不想要的菜品
  • 清空购物车按钮,用于删除所有菜品
  • 购物车摘要信息,包括小计、税额和总价

要进行支付,请点击底部的“前往结账”按钮。进入付款界面。

结账界面

付款界面将显示用户保存的支付方式,包括信用卡或学生卡余额。

如果没有提前保存支付方式,用户可以点击“添加支付方式”按钮输入支付详细信息。

订单界面

订单界面显示用户订单状态。它包括:

  • 订单完成状态
  •  订单菜品详细信息
    • 菜品名称
    • 菜品定制项
    • 菜品价格
    • 菜品数量
  • 联系售后
  • 订单条形码(包含订单ID和其他信息)

用户界面

该界面为用户账户的详细资料,包括:

  • 用户个人照片
  • 用户名
  • 退出登录按钮

可选功能包括:

  • 订单历史
  • 喜爱的餐厅
  • 保存的支付方式