【新产品上线啦】51CTO播客，随时随地，碎片化学习
编译自： https://medium.com/ladies-storm-hackathons/how-we-built-our-first-full-stack-javascript-web-app-in-three-weeks-8a4668dbd67c
作者： Sophia Ciocca
运用 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：
它可以把用户上传的图片保存在云端并存储起来
它包含 WebSocket 功用，可以实时更新
它可以处置用户验证，并且提供复杂的 OAuth 功用。
我们确定了数据库后，就要了解数据模型之间的关系了。由于 Firebase 是 NoSQL 类型，我们无法创立结合表或许设置像 “记载 （Checkins）属于目的（Goals）” 的附属关系。因此我们需求弄清楚 JSON 树是什么样的，对象是怎样嵌套的（或许不是嵌套的关系）。最终，我们构建了像这样的模型：
我们最终为目的（Goal）对象确定的 Firebase 数据格式。留意里程碑（Milestones）和记载（Checkins）对象嵌套在 Goals 中。
（留意: 出于功用思索，Firebase 更倾向于复杂、常规的数据结构, 但关于我们这种状况，需求在数据中停止嵌套，由于我们不会从数据库中获取目的（Goal）却不获取相应的子对象里程碑（Milestones）和记载（Checkins）。）
第 4 步：设置好 Github 和矫捷开发任务流我们知道，从一末尾就保持头头是道、执行矫捷开发对我们有极大益处。我们设置好 Github 上的仓库，我们无法直接将代码兼并到主（master）分支，这迫使我们相互审阅代码。
