在我们的应用 Align 中，用户的主界面
如何在三周内构建我们的第一个全栈 javascript web 应用
一个简单的渐进式指南，从概念到应用部署
我在 Grace Hopper Program 三个月的编程训练营已经接近尾声，实际上这篇文章的标题并不是完全准确 —— 我现在已经开发出了三个全栈 应用程序：一个从零开始的电子商城、一个我选择的个人黑客马拉松项目，最后一个是三周的终极项目。这个终极项目是目前为止最复杂的 —— 经过和两个队友为期三个月的旅程 —— 这是我在训练营获得的最自豪的成就。这是我所设计的第一个健壮、复杂的应用程序。
像大部分开发者知道的那样，即使当你“知道如何编程”时，去着手创建你的第一个全栈应用程序也是让人无从下手的。JavaScript生态系统是非常巨大的：包括包管理、模块化、构建工具、转接器、数据库、库并且要对所有这些作出决策，难怪这么多崭露新角的程序员从来没有建立超越 Codecademy 的教程。这就是为什么我要带你一步一步的指导有关我们团队创建实时应用 Align 的决定和步骤。
首先,讲一些背景。Align 是一款使用直观的时间轴界面的网页应用，帮助用户设定长期目标，并随着时间的推移进行管理。我们的技术栈包括后端服务的 Firebase，前端的 React。在这段简短的视频中，我和我的队友们解释得更多:
Align 演示 @ Demo Day Live // July 10, 2017
那么，我们是如何从第一天开始的，当我们被分配到我们的团队，到最终的应用完成的时候？以下是我采取的步骤。
步骤1：思考
第一步是理解我们实际上需要构建什么。我过去在 IBM 担任顾问的生活中，领导了与企业领导者的思想研讨会。在这点上，我向我的小组提出了经典的“头脑风暴”策略，在策略中，我们把我们想象到的所有想法都写出来，即便是愚蠢的，这样人的大脑一直保持运动，没有一个人因为恐惧而避免提出自己的想法。
在产生了几十个应用程序的创意后，我将他们分类，以便更好的理解我们共同感兴趣的主题。在我的小组，我们看到了一个自我完善、目标设定、怀旧和个人发展的清晰趋势。从那以后，我们最终确认出了一个具体的想法:一个用于设置和管理长期目标的个人指示板，随着时间的推移，内存保存和数据可视化的元素。
从那里，我们创造了一组 “用户故事” —— 从终端用户的角度来描述我们想要拥有的功能 —— 来阐述我们想要我们的应用做什么。
步骤2： 用户体验和用户界面框架
接下来，在白板上，我们画出我们在应用程序中预想的视图，整合了我们的用户故事集，用来理解这些视图在应用程序框架中是如何工作的。
这些草图确保了我们都在同一个页面上，并提供了一个可视化的蓝图，来说明我们正朝着什么方向努力。
步骤3： 选择一个数据结构和数据库类型
现在是时候设计我们的数据结构了。基于我们的框架和用户故事，我们在 Google 文档中创建了一个我们需要的模型和每个应该包含的属性。我们知道我们需要一个“goal”模型、一个“user”模型、一个“milestone”模型、一个“checkin”模型，以及最终一个“resource”模型和一个“upload”模型。
我们最早的数据模型草图
在非正式地画出模型之后，我们需要选择一种类型的数据库:“关系”和“非关系”(也就是“SQL”和“NoSQL”)。 SQL数据库是基于表的，并且需要预定义的模式，NoSQL数据库是基于文档的，并且具有非结构化数据的动态模式。
对于我们的例子来说，使用SQL或无SQL数据库并不是很重要，因此我们最终选择了Google的云NoSQL数据库 Firebase，原因有很多:
- 它能够在云存储中保存用户上传的图片。
- 它包含WebSocket集成，用于实时更新。
- 它可以处理我们的用户身份验证并提供简单的 OAuth 集成。
一旦我们选择了一个数据库，就该理解我们的数据模型之间的关系了。因为Firebase是NoSQL，所以我们不能创建连接表，也不能建立正式的关系，比如“Checkins模型属于Goals模型”。相反，我们需要弄清楚 JSON 树的样子，以及对象是如何嵌套的(或者未嵌套)。最终，我们构建了这样的模型
我们为Goals模型对象的最终的Firebase数据方案。注意，Milestones模型和Checkins模型是在 Goals模型下嵌套的。
(注意:Firebase为了高效率更倾向于使用简单的、标准化的数据结构，但对于我们的用例来说，最合理的方法是嵌套它，因为在没有它的子Milestones模型和Checkins模型的情况下，我们永远不会从数据库中提取目标。）
步骤4： 创建 Github 和一个灵活的工作流
我们从一开始就知道，保持组织和实践灵活开发对我们很有帮助。我们建立了一个Github仓库，在这个仓库中，我们阻止了合并，以迫使我们自己检查彼此的代码。
我们也在 Waffle.io 创建了一个灵活的板块，它是免费的，与 Github的 整合很容易。在 Waffle 板块上，我们列出了用户故事，以及我们知道需要修复的 bug。后来，当我们开始编写代码时，我们会为我们正在开发的用户故事创建一个git分支，在我们取得进展的时候将它从一个版本转移到另一个版本。
我们也开始每天早晨举行“站立式”会议，讨论前一天的进展和我们每个人遇到的阻碍。这个会议通常决定了这一天的流程——谁将是结对编程，谁将独自处理一个问题。
我强烈推荐类似这样的结构化工作流，因为它允许我们清晰地定义我们的优先级，并在没有任何人际冲突的情况下取得有效的进展。
步骤5： 选择并下载一个模板文件
因为JavaScript生态系统非常复杂，所以我们选择不从零开始构建我们的应用。花费宝贵的时间来配置我们的 Webpack 的 scripts 和 loaders，以及指向我们的项目目录的 symlink，这是不必要的。我的团队选择了 Firebones框架，因为它符合我们的用例，但是有许多可供选择的开源框架。
步骤6：写后端 API 路由 （或者 Firebase 监听器）
如果我们没有使用基于云的数据库，那就应该开始写我们的后端Express 路由 来对数据库请求了。但是因为我们在使用 Firebase，它已经在云端了，并且与代码有不同的通信方式，所以我们只需要建立我们的第一个成功的数据库监听器。
为了确定我们的监听器是工作的，我们编写了一个基本的用户表单来创建一个Goal模型，并且看到，当我们填写表单时，我们的数据库是实时更新的。我们连接成功了!
步骤7： 建立一个概念验证
我们下一步为我们的应用去创建一个“概念验证”，或者一个实现最困难的基本特征的原型，证明我们的应用可能会存在的。对我们来说，这意味着找到一个前端库来圆满地呈现时间轴，并成功地将其连接到 Firebase，以便在我们的数据库中显示一些子数据。
基于 Victory.JS 时间轴
我们发现了Victory.JS,一个基于 D3 的 React 库，然后花费一天的时间阅读文档，并组合了一个非常基础的 VctoryLine 组件和 VictoryScatter 组件的例子来形象的展示数据库中的数据。事实上，它成功了！我们已经准备好了！
步骤8： 代码的功能
最后，是时候开发我们应用的所有激动人心的功能了，这是一个巨大的步骤，根据你亲自打造的应用，它将会有很大的不同。我们查看了我们的框架图，并开始在我们的 Waffle 上编码单个的“用户故事”。这通常包括前端和后端代码(例如，创建前端表单并将其连接到数据库)。我们的特点从大到小不等，包括:
-
能够创建新的 goals 模型、milestones 模型 和 checkins 模型
-
能够删除 goals 模型、milestones 模型 和 checkins 模型
-
能够改变一个时间轴的名称、颜色和细节
-
能够缩放时间轴
-
能够添加资源链接
-
能够上传媒体文件
-
能够将资源和媒体从 milestones 模型 和 checkins 模型 记录到他们的相关 goals 模型
-
富文本编辑集成器
-
用户注册 / 身份验证 / 授权
-
弹出窗口查看时间轴选项
-
载入画面
由于显而易见的原因，这一步骤占用了我们大量的时间——这一阶段大部分的代码都是在这里完成的，而且每次我们完成了一个特性，就会有更多的东西需要构建！
步骤9： 选择并编辑设计方案
一旦我们在应用中获得了我们想要的功能的最小化可实行产品，是时候把整理的漂亮些了。我的团队使用了Material-UI，用于表单字段、菜单和登录选项卡等组件，这些组件确保了所有东西看起来都井然有序、流畅、条理清晰，而没有深入的设计知识。
这是我最喜欢的功能之一，她的美是如此的让人满意！
我们花了一段时间，选择了一个配色方案，并编辑了CSS，这为我们快节奏的编码提供了一个很好的突破。我们还设计了一个logo，并上传了一个图标。
步骤10： 发现和解决 bugs
虽然我们应该从一开始就使用测试驱动的开发，但是时间限制留给我们除了功能以外只有很少的时间。这意味着我们花了最后两天的时间来模拟我们所能想到的每一个用户流，并搜索我们应用中的 bugs。
这个过程不是最有条理的，但是我们发现了大量的bug来让我们忙起来，包括在某些情况下，加载屏幕会无限期地持续下去，而资源组件已经完全停止工作了的一个错误。修复 bug 可能会很烦人，但当它最终奏效时，它会非常令人满意。
步骤11： 现场应用部署
最后一步是部署我们的应用程序，这样它就可以使用了！因为我们使用 Firebase 来存储数据，所以我们部署到 Firebase 主机，这是非常直观和简单的。如果你的后端使用不同的数据库，你可以使用Heroku 或 DigitalOcean。通常，部署方向可以在主机站点上随时可用。
我们还在Namecheap.com上买了一个便宜的域名，让我们的应用更精致、更容易找到。
就是这样——我们突然之间成为了一个真正的实时应用程序的共同开发者，有人可以使用它！如果我们有一个更长的时间，第12步将是对用户进行A/B测试，这样我们就能更好地了解实际用户与我们的应用的互动以及他们想在下一个版本中看到的内容。
然而，就目前而言，我们对最终产品很满意，而且我们在这一过程中获得了不可估量的知识和对技术的理解。查看 Align 这里!
Align 团队：Sara Kladky (左), Melanie Mohn (中间), 和 我.
— —
如果你喜欢这个作品，如果你点击这个绿色的心让更多的人看到这个作品我会开心的。请随意查看Align的源代码，并查看我的Github，以及我的团队成员 Sara Kladky and Melanie Mohn.
显示您的支持
鼓掌显示了你对Sophia Ciocca的故事有多么感激。
9.4K60* BlockedUnblockFollowFollowing
Sophia Ciocca
Thinker, coder, creator, and learner in perpetual beta. Interested in art, feminism, mindfulness, and creating a better world. sophiaciocca.com 思考者，编码者，创造者，和永久在beta测试中的学习者。对艺术、女权主义、佛教和创造一个更美好的世界感兴趣。sophiaciocca.com
* Follow
女性黑客马拉松风暴
一个由技术女性组成的社区，她们一起成长，一起冲击黑客马拉松
- 9.4K
当你报名参加媒体的时候，千万不要错过“女士风暴黑客马拉松”的故事。查看更多，千万不要错过“女士风暴黑客马拉松”的更新。
