从零开始创建 Web 应用 – 第 1 部分共 8 部分：基本理念和设计

👋 您好！ 我们想提醒您，本系列附带的源代码已不再提供下载。 我们仍然认为该系列包含有价值的信息，但鉴于我们已经走过了 10 多年，我们也认为值得考虑使用现代的 PHP 框架（如 Laravel）甚至 JavaScript 框架（如 React 或 Vue）来创建一个渐进式 Web 应用。

今天，我们开始了一个 8 部分系列的第 1 部分，该系列将介绍如何从绝对零基础构建一个 Web 应用，直至成为一个完整的产品。 我将首先介绍这个想法，然后处理设计、UI 和一般的前端内容。 我们将从这里来回切换到我的朋友 Jason Lengstorf 的网站 Copter Labs。 Jason 将负责后端内容，例如应用规划和数据库方面的内容。 在本周末，我们将向您发布实际可运行的应用。 以下是计划

这很简单，对吧？

我们将要创建一个“列表应用”。 其理念重点在于简洁性和实用性。 注册一个帐户，只需几秒钟即可开始创建列表。听起来很简单，对吧？ 即使是那些涉猎过 PHP 的人，也可能很快就能拼凑出这样的东西，对吧？ 事实上，并非如此，这并不容易。

首先，它需要正常工作，并且需要良好地工作。 这意味着良好的后端代码能够按照预期执行并运行良好。 这意味着良好的 UI 必须直观、实用且易于使用。 这意味着要确保应用安全并保护用户数据隐私。 这些都不是微不足道的事情。

在本系列的整个 8 部分中，我们将创建一个希望能够很好地完成所有这些事情的应用。 我们并不是要告诉您这是有史以来最棒的应用，而是要将此应用用作应用创建过程的逐步指南，并希望在此过程中尽可能地做出明智的选择。

核心想法

这个“列表应用”将被称为 彩色列表。 列表（现实生活中的）可以用于任何目的：待办事项列表、购物清单、露营物品清单…… 当您完成某些事项时，您可以将其划掉。 列表中的事项也可能具有不同的相对重要性。 这使得纸质列表可能变得杂乱且效率低下。 使用计算机上的列表，我们可以通过单击来划掉项目，并且可以通过拖放来重新排列项目。 对于处理相对重要性，我们可以使用颜色，也可以用于分组等目的。 计算机和网络是列表的理想场所。

草图

无需立即变得花哨。 以下是对应用可能外观的非常基本的草图

对我来说，这看起来像一个列表。 每个列表项都是一个长方形，因为这里的主要想法是为每个列表项着色，因此将它们放在一个彩色框内是有意义的。 每个列表项的左侧和右侧都有一些交互式元素。 这些将用于实现我们希望人们能够使用其彩色列表执行的基本操作。 让我们仔细看看。

早期 UI 规划

在这一点上，我们不一定要讨论具体的技术，但我们应该考虑 UI 将如何操作，以便我们可以做出关于能够满足我们 UI 需求的技术的选择。

• 点击编辑
• 拖放
• 双击删除
• 自动保存（任何操作后）

所有这些基本上都加起来变成了大量的 AJAX。 我们不希望加载特殊的屏幕来执行诸如删除列表项之类的相对简单的任务。 这些操作应该以无缝、流畅的方式进行，并在鼠标点击后响应适当的反馈，而无需刷新页面。 从某种意义上说，我们正在创建一个单页面应用，此应用的大部分交互都发生在单个页面上。 这当然是有意为之，而不是试图遵循任何特定的潮流。 列表简单快捷，这就是它们实用的原因。 如果此应用过于复杂，其实用性就会降低，没有人会使用它。

屏幕

仅对迄今为止的想法进行一些快速的头脑风暴，我们就可以想出相当多的“屏幕”或应用可能处于的状态。

• 主页
  • 未登录 = 简介/销售页面
  • 已登录 = 您的列表
• 登录页面
• 设置页面
• 忘记密码页面
• 帐户激活页面
• 电子邮件

是的，即使电子邮件也应被视为“屏幕”的一部分，因为它们是应用流程和交互的重要组成部分。

“功能”

人们喜欢“功能”。 您的应用具有的其他应用没有的功能，或者您的应用做得更好的功能。 这既是为了营销，也是为了您的实际产品。 此应用将具有的所有花哨的 AJAX 当然是一个功能，但如今，这些功能越来越被期望，而不是一个功能。 我们将在此应用中重点关注的一个功能是“公开共享”。 每个列表都将拥有一个可以公开共享的唯一 URL。 访问此 URL 的访问者可以查看列表的当前精确状态，但不能进行编辑/添加/删除等交互。

继续

既然我们已经确定了要构建的目标，在下一部分中，我们将深入探讨从服务器端技术方面需要做些什么。

系列作者

Jason Lengstorf 是一位居住在蒙大拿州米苏拉市的软件开发人员。 他是 《PHP 初学者指南》 的作者，并定期撰写关于编程的博客文章。 当不粘在键盘上的时候，他可能正在排队买咖啡、自己酿造啤酒，或者在幻想成为一名《流言终结者》节目成员。

Chris Coyier 是一位目前居住在伊利诺伊州芝加哥市的网页设计师。 他是《深入 WordPress》的合著者，同时也是一位在设计领域撰写博客文章和发表演讲的博主和演讲者。 远离电脑时，他可能会被发现对着电视上的足球教练大喊大叫或弹奏班卓琴。