如何开始和完成任何 Web 应用项目

本文最初于 2016 年 11 月 7 日发布于：https://nickjanetakis.com/blog/how-to-start-and-finish-any-web-app-project

搭建桥梁

您知道金门大桥从构思到建成花了大约 65 年的时间吗？

1872 年，一位名叫查尔斯·克罗克 (Charles Crocker) 的家伙提议在旧金山和马林县（金门大桥连接的城镇）之间建造一座桥梁。

直到1917年，另一位名叫约瑟夫·施特劳斯（Joseph Strauss）的人（后来担任这座桥的总工程师）才提交了一份非正式的建桥提案。几年后的1921年，他又提交了一份造桥方案，预计造价为1700万美元。

这座桥于 1933 年开始建造，并在 4 年后，即 1937 年就竣工了（我知道，它的建造速度之快也让我感到惊讶）。

最终花费 2700 万美元，超出预算 60%，以今天的美元价值计算，相当于 15 亿美元。

我不是桥梁历史学家，但建造桥梁和开发网络应用程序或任何软件项目有很多共同之处。

为什么我们要使用软件来实现这一目标？

很多人，甚至包括我自己，都倾向于匆忙地投入软件相关的项目，好像编写代码是最重要的事情。

我从事代码编写和发布工作已有大约20年，也考察过几十个团队的几十个项目。我可以肯定地说，如果你花些时间提前规划，你的情况会更好。

在过去的几年中，您可能听说过“敏捷”或“快速交付”等术语，这些术语在正确的语境下非常有用，但这并不意味着您应该尝试开发复杂的 Web 应用程序而不花一些时间进行前期规划。

本指南的议程是什么？

本指南将向您展示如何将一个真实的 Web 应用创意转化为切实可行的计划。您可以将这些步骤应用到您自己的项目中，无论您使用哪种 Web 框架，因为我们无需编写任何代码。

无论这个想法是来自你自己的头脑，还是来自你刚刚进行的咨询中的潜在客户，都无关紧要。

我与客户进行咨询时，通常会记录对话内容，然后逐一进行分解。事实上，你可以将分解后的对话内容作为“项目发现”文档或演示文稿提供（甚至可以收费）。

它确实具有很大的价值，因为它可以完成相当多的棘手的规划工作，如果你不能或不愿意自己做，它甚至可以交给其他人来完成实际的编程工作。

这个计划是利用你的时间的好方法，因为如果需要改进，你可以不用更改任何代码就可以完成，因为你还没有编写任何代码。

另外，别被“计划”这个词吓到。我们不会坐下来花一年时间写一份500页的商业计划书，然后雇一个委员会。一旦你掌握了窍门，你就能在几个小时甚至更短的时间内规划出大多数项目。

回顾

回顾一下，您已经了解到：

• 建造桥梁和开发软件在某种程度上是可比的
• 从长远来看，计划可以节省你的时间
• 我们将把一个真正的网络应用程序转变为一个可行的计划

让我们制定一个计划

在我们开始制定一个出色的计划之前，我们需要首先定义我们正在构建什么类型的 Web 应用程序。

对于我自己的想法，我倾向于自然地对着麦克风说话，解释我希望网站实现什么功能。我觉得这是很好的做法，因为它模拟了客户在咨询过程中会对你做的事情。

能够将冗长的想法描述提炼为一个主要目标是一项重要的技能。

下面是我开始漫谈“使用 Flask 构建 SAAS 应用程序”课程的示例应用程序将做什么时记录的内容。

本指南详细介绍了我如何启动一个 4,000 多行 Flask 应用程序：

我想创建一个视频培训课程，向开发人员讲解 Flask。我看过的大多数教程都很零散，而且没有讲解如何创建可用于生产环境的应用程序。

我觉得这很遗憾，因为通常当你创建自己的项目时，你希望它们设计良好、易于维护，换句话说，为生产做好准备。

我最不想做的事情就是创建类似 TODO 列表应用程序的东西，而且我也不赞成在课程中创建 10 个不同的应用程序，因为最终会变成 30 个小时的视频，而这并不能真正教你任何“真正”的东西。

我的直觉告诉我，一个在各个点上连接的更大的单一应用程序可能对人们更有价值，因为它可以显示系统的不同部分是如何连接的。

我在教程中很少看到处理付款的内容，因此如果我能包含一种与 Stripe 等流行支付网关集成的方法，那就太酷了。

然后，系统用户可以注册特定的月度套餐，每月都会自动扣款。如果我能演示一下如何一次性付款就更好了。

绝对需要想出一些有趣的东西来构建，并且受到付费墙的保护，这样人们就不会太无聊，因为这个项目将会非常大。

也许我可以创建一个游戏。我不希望课程的重点放在游戏上，所以它不能太复杂，或者涉及大型第三方库。

游戏还需要足够通用，以便玩家无需过多思考就能理解。它还应该具备一些软实时特性，这样我就可以处理 Ajax 请求和 JSON 响应，这也是人们在其他学习资料中要求我演示的内容。

即使不知道具体是什么游戏，我仍然可以使用该应用。它肯定需要用户注册，还需要一个联系表单来演示电子邮件。

还应该包含几个静态页面，例如主页、服务条款和隐私政策。法律页面无需赘述，但最好能包含一个模板，因为自己查找这些页面总是很麻烦。

嗯，还有什么？需要确保包含一个 CLI 组件来帮助管理项目，比如设置种子数据和数据库迁移。

国际化也很重要，因为现在很多人用多种语言制作内容。

让我们用自定义管理仪表板来完成这一切。

我删除了很多“嗯”和措辞尴尬的句子只是为了让它更具可读性，但这大约占了我在思考课程内容时对着麦克风所说内容的 95%。

如何将上述内容转化为计划

现在说点有意思的事，你会如何将上面这些废话浓缩成一个主要目标？这个目标非常重要，因为它将成为你应用程序的基础。所有其他功能都将源于这个目标。

顺便提一下，你可能经常听到一个词叫“MVP”，即“最小可行产品”。这指的是你的产品在准备好向世界展示之前需要完成的最低限度的功能。

在 BSAWF（使用 Flask 构建 SAAS 应用程序）案例中，接受来自客户的定期付款。

我得出这个结论是因为从技术上讲，如果我所做的只是设置一切来支持这一点，并在付费墙后面放置一个虚拟的“将受保护的数据放在这里”页面，那么一切仍然有意义。

一旦确定了这个目标，坚持下去就很重要，因为如果您养成了添加一百万个“侧面”功能的习惯，那么您的应用程序就会失去焦点并且会被延迟。

这些附加功能甚至可能不是您的客户想要的。

现实情况是，当你发布 MVP 时，你会希望开始收集客户的反馈。现在，你可以根据这些反馈来构建你的应用程序，而不是靠猜测。

这实际上就是我在 BSAWF 课程中所做的，因为我发布了该课程的第一个版本，虽然它很成功，但我在应用程序中引入了一些很多人并不真正关心的东西。

因此，对于版本 2（本指南和视频课程所基于的版本），我听取了以前学生的客户反馈和博客文章评论。

熟能生巧

为了练习提取主要目标，我们来看看 GitHub 这样的网站。对我来说，GitHub 是一个允许我发布并与其他开发者共享代码的平台。

“专为开发者打造”是 G​​itHub 试图传达给初次接触其网站的用户的讯息。其主要目标正是其下方那句话，完美地概括了一切。

回顾

回顾一下，您已经了解到：

• 对着麦克风滔滔不绝地讲述你的项目是一种很好的方式
• 将几分钟的计划外的话语提炼成一个目标需要练习
• MVP 的主要目标应该是项目的核心
• 利用客户来获取附加功能，而不是猜测

从目标到步骤

有一个主要目标对于弄清楚需要做什么有极大的帮助。

从这里开始，我们会慢慢地但坚定地将目标分解成功能和可操作的步骤。这些步骤将集中体现你现在可以开始编写代码的理念。

当我们自上而下地工作时，最广泛的目标和特点最终会变成明确定义且易于推理的小步骤。

探索应用程序的功能

主要目标是接受客户的定期付款。仅使用自然语言，我们就成功定义了两个主要功能。

我们需要一种方法来处理：

• 付款
• 用户

这两件事都相当大，如果你告诉我“嘿尼克，给我建立一个支付系统”，如果我试图在不分解它的情况下解决这个问题，我会在我的代码编辑器中跌跌撞撞相当长一段时间。

不仅如此，我肯定会设计得很糟糕，当我看到所有部分最终如何组合在一起时，我最终会多次重写它。

那么我们来更详细地讨论一下付款问题好吗？

付款功能

当将功能分解为步骤或更小的功能时，没有真正的神奇公式或惯例来确定它是步骤还是子功能。

只要运用你最好的判断，不要纠结于这类事情。尽可能深入细节。你钻研得越深，问题就越小，推理起来也就越容易。

我还喜欢将事物嵌套在列表中，例如：

• 通过定价表查看多个订阅计划
  • 选择并订阅特定计划
    • 输入信用卡详细信息以订阅计划
      • 使用 Stripe 处理信用卡
• 升级或降级订阅
• 取消订阅
• 创建一次性购买（微交易）
• 将优惠券应用于订阅和一次性购买
• 保存所有交易的发票
  • 查看所有交易的账单历史记录
  • 确保本地发票与 Stripe 同步
• 检测并追踪即将到期的信用卡
  • 当用户的卡即将过期时发出警告
• 更新信用卡信息

突然间，我们的支付系统不再那么复杂了。它变得越来越清晰，我相信你一定在琢磨着如何在你最喜欢的 Web 框架中实现这些功能。

即使你不知道具体该怎么做，你也可以通过谷歌搜索找到解决方案。你可以直接输入“如何取消 Stripe 订阅”，就能找到一些答案。

用户功能

现在我们来谈谈用户功能。我们将采用与支付功能相同的方法来细分：

• 通过提供电子邮件地址和密码创建帐户
• 登录和注销
  • 跟踪所有登录活动（IP 地址、时间戳等）
• 在需要时能够收集更多信息
  • 用户名（网站的公共身份）
• 重置密码
  • 提供身份以发起密码重置请求
  • 点击电子邮件中的链接后提交新密码
• 帐户管理
  • 编辑登录凭据
  • 编辑个人资料信息（用户名等）
  • 更改订阅状态
  • 查看账单历史记录

一旦我们开始讨论每个步骤，就不再那么可怕了。我们还可以看到，在账户管理下，可以调整付款设置。

通过这种方式进行规划，我们可以开始考虑“屏幕”，它可能是网站上的实际页面，但我们稍后会讨论这个问题。

现在，让我们继续前进并制定游戏计划。

游戏特色

看到这里，你可能开始明白了。在我之前的项目记录里，我推迟了确定我们要玩什么类型的游戏，因为从总体上看，这并非那么重要。

最终，我决定创建一个名为“蛇眼”的骰子游戏。游戏很简单，每个用户账户都会免费获得一定数量的金币，然后用户可以通过微交易购买额外的金币，或者成为月度订阅用户来获得额外的金币。

然后，用户可以在猜测掷骰子结果的同时下注这些硬币，如果他们赢了，他们将根据赔率获得更多硬币。

我设想在点击“下注”按钮后，服务器端会进行掷骰子操作，然后客户端会通过 Ajax 请求部分更新页面。这很好地演示了页面的部分刷新。

以下是游戏的详细内容：

• 用户可以通过投注硬币进行投注
  • 只有当他们有硬币可以下注时
  • 仅当他们事先没有进行垃圾投注（速率限制）
• 创建投注历史记录以显示终身投注历史记录

这里确实没有太多内容，但值得一提的是，我们的用户功能最终会发生变化，因为帐户管理功能需要一种方式让用户查看他们的投注历史并购买更多硬币。

由于我们还没有编写任何代码，所以更改计划非常容易。我不会在这里这样做，但你只需要在列表中添加更多步骤即可。

管理功能

我不会在这里规划管理功能，因为我希望您尝试根据我们设置的其他功能来做这件事。

您的功能和步骤列表是否与项目的实际内容相符并不重要，但这里的目标是让您思考如何亲自管理这个 Web 应用程序。

更重要的是，这项练习是关于采取行动并有所作为的。计划和其他任何事情一样，都是一门技能，你需要练习，而不是只是坐在这里被动地读着。

以下是一些有趣的问题，可以帮助大家开始讨论：

• 您是否希望能够通过管理仪表板或命令行创建订阅计划？
• 您将如何处理优惠券创建？它应该支持哪些类型的功能？
• 管理员是否应该能够取消用户订阅？
• 如果客户给您打电话，您能多快在系统中找到有关该用户的所有详细信息？

您可以打开文本文档或记在纸上。我很想听听您的想法，请发送电子邮件至nick.janetakis@gmail.com。

CLI 功能

与管理功能类似，我不会为您规划一切，但这次是出于不同的原因。

我从来没有费心去计划这些，对于某些事情，我认为这是可以的。

首先让我解释一下 CLI（命令行界面）功能的含义。

在开发 Web 应用程序期间，您倾向于执行一些任务，例如播种数据库、数据库迁移、运行测试等。

有些命令运行起来可能很繁琐，尤其是在使用 Flask 的情况下。在 BSAWF 案例中，我创建了 10 个 CLI 命令来提升您的使用体验。

它们是：

• add它允许您为每个模型使用虚假数据来填充数据库
• babel用于处理国际化（i18n）管理
• cov用于针对代码库运行测试覆盖率工具
• db用于包装 Alembic 的数据库迁移
• flake8用于对代码库进行静态分析
• loc用于计算代码行数（Python、HTML、CSS 和 JS）
• routes获取所有路线、端点和方法的 ASCII 列表
• secret用于生成唯一的秘密令牌
• stripe用于管理订阅计划
• test运行 py.test 驱动的测试套件

能够运行snakeeyes add all并重置数据库并填充数千个虚假但相关的用户、发票和投注对于开发来说非常有用。

我之所以没有计划好这些，是因为其中有一半都是在我因为不得不一直输入某些东西而感到厌烦时才出现的。

在这种情况下，你可以说 CLI 的功能是基于用户反馈而非猜测的，很多事情都是这样做的。尤其是当它针对的是不一定是项目核心的“次要”功能时。

回顾

回顾一下，您已经了解到：

• 主要目标很重要，它有助于指导功能和可操作的步骤
• 你可能会在没有计划的情况下编写和重写大量代码
• 您的计划可以是一个简单的功能列表
• 规划是一种技能，你应该尽可能多地练习它
• 有时，无需制定计划（例如 CLI 功能）也可以继续进行

超越计划

该计划旨在将“接受付款”或“发布并与其他开发人员共享代码”等模糊的想法分解为可管理的、明确的步骤，以便您开始编码。

在您的项目发布之后，您最终会根据真实的反馈添加或删除功能，但我个人认为不值得让您的计划保持同步。

如果您仍处于规划阶段，并且在编写代码之前添加了新内容，那么请务必返回并编辑计划的其他组成部分。

但我认为最初的计划只是达到目的的一种手段。你写它是为了实现最初的目标，然后你采取行动，继续生活。

回顾旧计划并看看产品发生了多大的变化也很有趣。

但等等，还有更多

我发现这些计划对于那些不理解你收费标准为何的咨询客户来说也很有用。他们带着这个想法来找你，然后却感到困惑，你给他们报价300小时，而你三言两语解释不清原因，这简直是徒劳。

在这里，您可以与他们一起审查计划/项目发现文件。

大多数时候，他们都会目光呆滞，并给你老一套的“好吧好吧，现在我明白为什么了。继续努力，我很高兴雇用了你！”

如果您有几分钟时间，我强烈建议您阅读《门的问题》。

这是我读过的最好的文章之一，它将一些看似简单的事情（例如“让我们在视频游戏中添加一扇门”）分解成一个史诗般的列表。

从步骤到屏幕

这不仅仅是规划一个项目，而且一旦你有了完整的计划，我喜欢研究所有的功能和步骤，并开始将它们映射到网站屏幕上。

这些将是您网站上的真实页面，例如忘记密码的屏幕或输入您的信用卡详细信息进行付款。

我并没有在这个步骤上花费太多时间，也没有使用任何花哨的线框图软件。我甚至没有画出这些屏幕的草图，只是把它们列在思维导图中。

思维导图只是一个用来描述列出“事物”的策略的花哨词。

一张图片最能描述这一点，请看一看：

数据建模

此时我将开始考虑项目中的数据模型。

我也没有为此打开任何软件。只需要一张纸和一支笔。这里的目标是开始思考你将如何使用书面形式的数据。

例如：

• 用户应该能够看到他们的投注历史列表

我们马上就知道投注历史需要存储在数据库中，也许是以bets表格的形式，但确切的名称现在并不重要。

我们还知道用户也需要存储。

如果用户能够看到自己的投注历史，那么我们立即开始意识到我们之间存在一对多的关系。

我们可以更进一步说，a user has many bets并且a bet belongs to a user。如果你是一名 Rails 开发人员has_many，belongs_to应该对此有所了解。

这是描述此类关系的非常自然的方式。

现在是编写代码的时候了吗？

嗯，其实不然。现在你应该把所有计划都落实到位，开始研究各种技术栈，看看哪个框架和数据存储最适合当前的问题。

您拥有做出明智决定所需的所有信息，而不是仅仅猜测，然后在 6 个月后才发现，如果您使用 xyz Web 框架，事情会变得容易 100 倍，即使您必须从头开始学习语言和 Web 框架。

但选择技术堆栈又是另一回事了……

练习练习练习

如果你还没有项目想法，别担心，你仍然可以实践。只需访问你最喜欢的网站，思考它们的主要目标是什么，然后以此为基础开始设计功能和可操作的步骤。

如果您喜欢冒险，您可以录下您的朋友和家人向您解释如果他们知道如何编程，他们会想要构建什么类型的应用程序。

然后把这段录音（它可能会很搞笑，甚至可能成为史上十大最烂点子之一）转化成一个计划。你懂的！

下一步去哪里？

这就是我如何开始和完成任何 Web 应用程序项目。

您已经学习了如何规划项目、梳理功能、创建具体的网站界面、建模数据，并运用这些知识来选择合适的工具。您已经掌握了构建真实应用程序所需的一切。

我希望本指南至少能为您提供一条信息，让您可以立即将其应用到自己的项目中。

附言：

如果您想要通过截屏视频指导如何构建 BSAWF 以及所有经过实践检验的源代码，请查看使用 Flask 构建 SAAS 应用程序课程。