PHP 模块化网店 App 需求说明详解

从头开始构建软件应用程序需要不同的技能，因为它不仅仅涉及编写代码。写下功能需求和画出线框通常是流程中的第一步，尤其是当我们正在处理客户项目时。这些步骤通常由开发人员以外的人完成，因为它们需要对客户的业务案例、用户行为等有一定的了解。作为大型开发团队的一部分，意味着我们作为开发人员，通常会获得需求、设计和线框，然后开始针对它们进行编码。独自交付项目，这使得我们很容易跳过这些步骤，而仅仅从代码开始着手。通常情况下，这是一种徒劳无益的方法。制定功能需求和一些线框是一项值得了解和遵循的技能，即使只是一名开发人员。

在本章后面，我们将讨论一个高级应用程序需求，以及一个粗略的线框。

在本章中，我们将介绍以下主题：

我们需要构建一个简单但响应迅速的网络商店应用程序。为此，我们需要提出一些基本要求。我们目前感兴趣的需求类型是那些涉及用户和系统之间交互的需求。指定与用户使用相关的需求的两种最常见的技术是用例和用户故事。用户故事是一种不太正式但足够描述这些需求的方式。使用用户故事，我们封装了此处提到的客户和门店经理操作。

客户应该能够做到以下几点：

• 浏览静态信息页面（关于我们，客户服务）
• 通过联系方式联系店主
• 浏览店铺类别
• 请参阅产品详细信息（价格、说明）
• 以大视图查看产品图像（缩放）
• 见出售商品
• 看畅销书
• 将产品添加到购物车
• 创建客户帐户
• 更新客户帐户信息
• 找回丢失的密码
• 退房
• 请参阅订单总成本
• 从几种付款方式中进行选择
• 从几种装运方式中进行选择
• 下单后收到电子邮件通知
• 检查订单状态
• 取消订单
• 请参阅订单历史记录

门店经理应能做到以下几点：

• 创建产品（至少具有以下属性：title、price、sku、url-key、description、qty、category和image）
• 上传产品的图片
• 更新和删除产品
• 创建一个类别（至少具有以下属性：title、url-key、description和image）
• 将图片上载到类别
• 更新和删除类别
• 如果已创建新的销售订单，将收到通知
• 如果新的销售订单已取消，将收到通知
• 按状态查看现有销售订单
• 更新订单的状态
• 禁用客户帐户
• 删除客户帐户

用户故事是记录应用程序需求的一种方便的高级方式。作为一种敏捷的开发模式特别有用。

随着用户故事的展开，让我们将重点转移到实际的线框。由于我们将在后面讨论的原因，我们的线框工作将围绕客户的角度进行。

有很多线框工具，免费的和商业的。一些商业工具，如https://ninjamock.com 我们将使用作为示例，它仍然提供免费计划。这对于个人项目来说非常方便，因为它节省了我们很多时间。

每个 web 应用程序的起点都是它的主页。以下线框显示了我们的网上商店应用程序的主页：

在这里我们可以看到决定页面结构的几个部分。标题由徽标、类别菜单和用户菜单组成。这些要求没有说明任何类别结构，我们正在构建一个简单的网店应用程序，因此我们将坚持一个扁平的类别结构，没有任何子类别。用户菜单最初将显示注册和登录链接，直到用户实际登录，在这种情况下，菜单将更改，如以下线框所示。内容区域充满了畅销书和在售商品，每个商品都定义了图像、标题、价格和添加到购物车按钮。页脚区域包含指向大部分静态内容页面的链接，以及一个联系我们页面。

以下线框显示了我们的网店应用程序的分类页面：

整个站点的页眉和页脚区域在概念上保持相同。内容区域现在已更改为列出任何给定类别内的产品。各个产品区域的呈现方式与主页上的呈现方式相同。类别名称和图像呈现在产品列表上方。类别图像的宽度为我们准备并上传到类别中的图像类型提供了一些提示。

以下线框显示了我们的网上商店应用程序的产品页面：

此处的内容区域现在更改为列出单个产品信息。我们可以看到一个大的图像占位符、标题、sku、库存状态、价格、数量字段、添加到购物车按钮以及正在呈现的产品描述。当商品可供购买时，将显示库存消息；当商品不再可用时，将显示缺货消息。这将与“产品数量”属性相关。我们还需要记住“用大视图（缩放）查看产品图像”的要求，点击图像可以将其放大。

以下线框显示了我们的网上商店应用程序的注册页面：

此处的内容区域现在更改为呈现注册表。我们可以通过多种方式实施注册制度。通常情况下，注册屏幕上会显示最少数量的信息，因为我们希望让用户尽快进入。然而，让我们继续，就好像我们正试图在注册屏幕上获得更完整的用户信息一样。我们不仅需要电子邮件和密码，还需要完整的地址信息。

以下线框显示了我们的网店应用程序的登录页面：

此处的内容区域现在更改为呈现客户登录和忘记密码表单。我们为用户提供登录时的电子邮件和密码字段，或密码重置操作时的电子邮件字段。

以下线框显示了我们的网店应用程序的客户帐户页面：

此处的内容区域现在更改为显示客户帐户区域，仅对登录的客户可见。在这里，我们看到一个包含两条主要信息的屏幕。客户信息是一个，订单历史记录是另一个。客户可以从此屏幕更改其电子邮件、密码和其他地址信息。此外，客户可以查看、取消和打印其以前的所有订单。我的订单表从上到下列出订单，从最新到最旧。虽然用户情景没有指定，但订单取消应该只对挂起的订单有效。这是我们稍后将更详细地讨论的问题。

这也是用户登录时显示用户菜单状态的第一个屏幕。我们可以看到一个下拉列表，显示用户的全名、我的账户和注销链接。在它旁边，我们有购物车（%s）链接，它列出购物车中的确切数量。

以下线框显示了我们的网店应用程序的结帐购物车页面：

此处的内容区域现在更改为使购物车处于当前状态。如果客户已将任何产品添加到购物车中，将在此处列出这些产品。每个项目应列出产品名称、个别价格、添加数量和小计。客户应能够更改数量，并按下更新购物车按钮更新购物车的状态。如果提供0作为数量，点击更新购物车按钮将从购物车中删除该项目。购物车数量应始终反映标题菜单购物车（%s）链接的状态。屏幕右侧显示当前订单总值的快速摘要，旁边是一个大而清晰的转到结帐按钮。

以下线框显示了我们的网上商店应用程序的结帐购物车发货页面：

这里的内容区域现在更改为呈现签出过程的第一步，即装运信息收集。未登录的客户不应访问此屏幕。客户可以在此处向我们提供他们的地址详细信息，以及装运方式选择。“装运方法”区域列出了几种装运方法。右侧显示可折叠订单摘要部分，列出购物车中的当前项目。下面是购物车小计值和一个大的清除下一步按钮。下一步按钮应仅在提供所有所需信息时触发，在这种情况下，它应将我们带到结帐车付款页面上的付款信息。

以下线框显示了我们的网店应用程序的结帐车付款页面：

此处的内容区域现在更改为呈现结账过程的第二步，即支付信息收集。未登录的客户不应访问此屏幕。向客户提供可用付款方式的列表。为了应用程序的简单性，我们将只关注固定/固定支付，而不是像 PayPal 或 Stripe 这样强大的支付。在屏幕右侧，我们可以看到一个可折叠的订单摘要部分，列出购物车中的当前项目。下面是订单总计部分，分别列出了购物车小计、标准配送、订单总计和一个大的清晰下订单按钮。下订单按钮应仅在提供所有所需信息时触发，在这种情况下，它应将我们带到结帐成功页面。

以下线框显示了我们的网上商店应用程序的结帐成功页面：

此处的内容区域现在更改为输出签出成功消息。显然，此页面仅对刚刚完成结账过程的登录客户可见。订单号可点击并链接到我的账户区域，重点关注确切的订单。到达此屏幕后，客户和门店经理都会收到一封通知电子邮件，根据下订单后收到电子邮件通知和如果新的销售订单已创建要求，则会收到通知。

据此，我们总结出面向客户的线框。

关于 store manager 用户故事需求，我们现在只需定义一个登录管理界面，如以下屏幕截图所示：

稍后使用该框架，我们将为多个添加新和列表&管理链接获得一个完整的自动生成 CRUD 接口。对该接口及其链接的访问将由框架的安全组件控制，因为该用户本身不是客户或数据库中的任何用户。

此外，在接下来的章节中，我们将把应用程序分为几个模块。在这样的设置中，每个模块将拥有单独的功能，照顾客户、目录、结帐和其他需求。

一旦设置了需求和线框，我们就可以将注意力集中到技术堆栈的选择上。在第 1 章生态系统概述中，我们介绍了几种最流行的 PHP 框架，指出了它们的优势。在这种情况下，选择正确的框架更多的是一个偏好问题，因为这些框架中的任何一个都可以轻松满足大部分应用程序需求。然而，我们的选择落在了西蒙尼身上。除了 PHP 框架之外，我们还需要一个 CSS 框架来在客户端的浏览器中提供一些结构、样式和响应能力。因为这本书的重点是 PHP 技术，我们就说我们为这个任务选择了基础 CSS 框架。

Symfony 框架

Symfony 框架是我们应用程序的一个不错的选择。它是一个企业级的框架，已经存在多年，并且有非常好的文档记录和支持。可从官方下载 http://symfony.com 页面如所示：

使用 Symfony 作为我们的技术堆栈的一部分有很多好处。该框架提供了强大且记录良好的：

• 控制器
• 路由
• ORM（通过条令）
• 形式
• 验证
• 安全

这些是我们的应用程序所需的基本特性。特别是 ORM，在快速应用程序开发中起着重要作用。不必太担心编码，CRUD 的每个方面都可以将开发速度提高一两倍。Symfony 在这方面的优点在于，它允许通过执行以下两个简单命令自动生成实体和周围的 CRUD 操作：

php bin/console doctrine:generate:entity
php app/console generate:doctrine:crud

通过这样做，Symfony 生成实体模型和必要的控制器，使我们能够执行以下操作：

• 列出所有记录
• 显示一条由主键标识的给定记录
• 创建新记录
• 编辑现有记录
• 删除现有记录

基本上，我们可以免费获得一个最小的商店经理界面。仅此一项就涵盖了为 store manager 角色设置的大多数 CRUD 相关需求。然后，我们可以轻松地修改生成的模板，以进一步集成其余的功能。

除此之外，安全组件还提供了身份验证和授权，我们可以使用它们来满足客户和门店经理的登录需求。因此，商店经理将是一个固定的、预先创建的、连接到 Symfony 防火墙的用户，唯一一个可以访问 CRUD 控制器操作的用户。

基础框架

在 Zurb 公司的支持下，FoundT0.Foundation 框架为现代响应的 Web 应用做出了巨大的选择。我们可以说它是一个企业级框架，提供了一个 HTML、CSS 和 JavaScript 的集合，我们可以在此基础上进行构建。可从官方下载 http://foundation.zurb.com 页面如图所示：

基金会有三种口味：

• 遗址基金会
• 电子邮件基础
• 应用程序基金会

我们对网站版本感兴趣。除了一般样式之外，网站的基础还提供了大量的控件、导航元素、容器、媒体元素和插件。这些在我们的应用程序中特别有用，例如标题菜单、类别产品列表、响应购物车表等等。

基金会是作为一个移动第一个框架构建的，我们首先为小屏幕编码，然后更大的屏幕继承这些样式。其默认的 12 列网格系统使我们能够快速轻松地创建功能强大的多设备布局。

我们将简单地使用基础来提供结构，一些基本样式，以及对我们的应用的响应，而不用自己编写一行 CSS。仅此一点就可以使我们的应用程序在视觉上足够令人愉悦，可以在移动和桌面屏幕上使用，同时仍然将我们的大部分编码技能集中在后端。

除了提供强大的功能，基金会背后的公司也提供优质的技术支持。虽然我们不需要将其作为本书的一部分，但在选择应用程序框架时，这些东西可以建立信心。

创建 web 应用程序可能是一项繁琐而耗时的任务，web 商店可能是最健壮、最密集的应用程序类型之一，因为它们包含大量的功能。交付最终产品涉及许多组件；从数据库、服务器端（PHP）代码到客户端（HTML、CSS 和 JavaScript）代码。在本章中，我们首先定义了一些基本的用户情景，这些情景反过来又定义了我们小型网络商店的高级应用程序需求。向组合中添加线框有助于我们可视化面向客户的界面，而 store manager 界面将由框架提供。

我们进一步介绍了支持模块化应用程序设计的两个最流行的框架。我们把注意力转移到作为服务器端技术的 SCOFRONY 和作为客户端响应框架的基础上。

接下来，在下一章中，我们将更深入地研究 Symfony。Symfony 是一组可重用组件，也是最健壮和最流行的全栈 PHP 框架之一。因此，对于快速的 web 应用程序开发来说，这是一个有趣的选择。