三周内构建 JavaScript 全栈 web 应用
|
副标题[/!--empirenews.page--]
【51CTO技术沙龙】10月27日，让我们共同探索AI场景化应用实现之道
应用 Align 中，用户主页的控制面板 从构思到部署应用程序的简单分步指南我在 Grace Hopper Program 为期三个月的编码训练营即将结束，实际上这篇文章的标题有些纰漏 —— 现在我已经构建了 三个 全栈应用： 从零开始的电子商店 、我个人的 私人黑客马拉松项目 ，还有这个“三周的结业项目”。这个项目是迄今为止强度最大的 —— 我和另外两名队友共同花费三周的时光 —— 而它也是我在训练营中最引以为豪的成就。这是我目前所构建和涉及的第一款稳定且复杂的应用。 如大多数开发者所知，即使你“知道怎么编写代码”，但真正要制作第一款全栈的应用却是非常困难的。JavaScript 生态系统出奇的大：有包管理器、模块、构建工具、转译器、数据库、库文件，还要对上述所有东西进行选择，难怪如此多的编程新手除了 Codecademy 的教程外，做不了任何东西。这就是为什么我想让你体验这个决策的分布教程，跟着我们队伍的脚印，构建可用的应用。 首先，简单的说两句。Align 是一个 web 应用，它使用直观的时间线界面帮助用户管理时间、设定长期目标。我们的技术栈有：用于后端服务的 Firebase 和用于前端的 React。我和我的队友在这个 短视频 中解释的更详细。 从第 1 天（我们组建团队的那天）开始，直到最终应用的完成，我们是如何做的？这里是我们采取的步骤纲要： 第 1 步：构思第一步是弄清楚我们到底要构建什么东西。过去我在 IBM 中当咨询师的时候，我和合作组长一同带领着构思工作组。从那之后，我一直建议小组使用经典的头脑风暴策略，在会议中我们能够提出尽可能多的想法 —— 即使是 “愚蠢的想法” —— 这样每个人的大脑都在思考，没有人因顾虑而不敢发表意见。 
在产生了好几个关于应用的想法时，我们把这些想法分类记录下来，以便更好的理解我们大家都感兴趣的主题。在我们这个小组中，我们看到实现想法的清晰趋势，需要自我改进、设定目标、情怀，还有个人发展。我们最后从中决定了具体的想法：做一个用于设置和管理长期目标的控制面板，有保存记忆的元素，可以根据时间将数据可视化。 从此，我们创作出了一系列用户故事（从一个终端用户的视角，对我们想要拥有的功能进行描述），阐明我们到底想要应用实现什么功能。 第 2 步：UX/UI 示意图接下来，在一块白板上，我们画出了想象中应用的基本视图。结合了用户故事，以便理解在应用基本框架中这些视图将会如何工作。 
这些骨架确保我们意见统一，提供了可预见的蓝图，让我们向着计划的方向努力。 第 3 步：选好数据结构和数据库类型到了设计数据结构的时候。基于我们的示意图和用户故事，我们在 Google doc 中制作了一个清单，它包含我们将会需要的模型和每个模型应该包含的属性。我们知道需要 “目标（goal）” 模型、“用户（user）”模型、“里程碑（milestone）”模型、“记录（checkin）”模型还有最后的“资源（resource）”模型和“上传（upload）”模型， 
最初的数据模型结构 在正式确定好这些模型后，我们需要选择某种 类型 的数据库：“关系型的”还是“非关系型的”（也就是“SQL”还是“NoSQL”）。由于基于表的 SQL 数据库需要预定义的格式，而基于文档的 NoSQL 数据库却可以用动态格式描述非结构化数据。 对于我们这个情况，用 SQL 型还是 No-SQL 型的数据库没多大影响，由于下列原因，我们最终选择了 Google 的 NoSQL 云数据库 Firebase：
我们确定了数据库后，就要理解数据模型之间的关系了。由于 Firebase 是 NoSQL 类型，我们无法创建联合表或者设置像 “记录 （Checkins）属于目标（Goals）” 的从属关系。因此我们需要弄清楚 JSON 树是什么样的，对象是怎样嵌套的（或者不是嵌套的关系）。最终，我们构建了像这样的模型： 
我们最终为目标（Goal）对象确定的 Firebase 数据格式。注意里程碑（Milestones）和记录（Checkins）对象嵌套在 Goals 中。 （注意: 出于性能考虑，Firebase 更倾向于简单、常规的数据结构, 但对于我们这种情况，需要在数据中进行嵌套，因为我们不会从数据库中获取目标（Goal）却不获取相应的子对象里程碑（Milestones）和记录（Checkins）。） 第 4 步：设置好 Github 和敏捷开发工作流（编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
