IBM的JavaScript全栈web应用
日期：2018-10-16
来源：程序思维浏览：2214次
第1步：想法
第一步是弄清楚我们要构建什么。当我在IBM担任顾问时，我带领团队领导的想法工作组。从那以后，我一直建议团队使用经典的头脑风暴策略，在这个策略中我们可以提出尽可能多的想法。——甚至“愚蠢的想法”——所以每个人的大脑都在思考，没有人担心敢于表达你的意见。
当我们提出关于应用程序的几个想法时，我们记录了这些想法，以便更好地理解我们感兴趣的主题。在我们的小组中，我们看到了实现想法和需要自我改进的明确趋势。设定目标、的感受，以及个人发展。我们最终决定了具体的想法：制作一个用于设置和管理长期目标的控制面板，有节省内存的元素，您可以根据时间可视化数据。
从那时起，我们创建了一系列用户故事（从最终用户的角度描述了我们想要拥有的内容），并阐明了我们想要对应用程序做些什么。
第2步：UX / UI原理图
接下来，在白板上，我们绘制了虚构应用程序的基本视图。结合用户故事，了解这些视图在应用程序的基本框架中的工作方式。
这些骷髅确保我们的意见统一并提供可预测的蓝图，使我们能够朝着计划的方向努力。
第3步：选择数据结构和数据库类型
在设计数据结构时。根据我们的图表和用户故事，我们在Google文档中创建了一个列表，其中包含我们需要的模型以及每个模型应包含的属性。我们知道我们需要“目标”模型、“用户”模型、“里程碑”模型、“签到”模型和最后一个“资源”模型和“上传”）“模型。
初始数据模型结构
在形式化这些模型之后，我们需要选择一种类型的数据库：“关系”或“非关系”（即“SQL”或“NoSQL”）。由于基于表的SQL数据库需要预定义格式，因此基于文档的NoSQL数据库可以动态格式描述非结构化数据。对于我们的情况，SQL类型或No-SQL类型数据库没有太大影响。基于以下原因，我们最终选择了Google的NoSQL云数据库Firebase：
它可以将用户上传的图像保存在云中并存储它们
它包括WebSocket功能，可以实时更新。
它处理用户身份验证并提供简单的OAuth功能。
一旦我们确定了数据库，我们就需要了解数据模型之间的关系。由于Firebase是NoSQL类型，因此我们无法创建联合表或设置“Checkins are Goals”等附属关系。所以我们需要弄清楚JSON树是什么样的，对象是如何嵌套的（或者不是嵌套的）。最后，我们构建了一个这样的模型：
我们最终确定了Goal对象的Firebase数据格式。请注意，里程碑和Checkins对象嵌套在目标中。
（注意：出于性能原因，Firebase更喜欢简单的、常规数据结构，但对于我们的情况，我们需要嵌套数据，因为我们没有从数据库（目标）获取目标但是没有得到相应的子对象里程碑（里程碑）和记录（签到）。
第4步：设置Github和敏捷开发工作流程
我们知道，从开始执行敏捷开发的、开始整理有条不紊的事情对我们来说是非常有益的。我们在Github上设置了存储库，我们无法将代码直接合并到主分支中，迫使我们相互审查代码。
我们还在Waffle.io网站上创建了一个敏捷开发小组，该小组可以免费轻松地集成到Github中。我们列出了我们需要在Waffle面板上修复的所有用户故事和错误。然后，当我们开始编码时，我们每个人都将为我们正在处理的每个用户故事创建一个git分支，并在我们完成工作后合并本文的分支。
我们也开始养成上午会议的习惯，讨论前一天的工作以及每个人遇到的障碍。会议通常决定当天的进程——谁将要编程配对，谁将单独处理问题。
我认为这种工作流程非常好，因为它可以让我们清楚地找到自己的位置并完成工作，而不必担心人际冲突。步骤5：选择、下载模板文件。
由于JavaScript生态系统过于复杂，我们不会从底层构建应用程序。没有必要花费宝贵的时间来连接Webpack构建脚本和加载器，将符号链接指向项目项目。我的团队选择了Firebones框架，因为它恰好适合我们，当然还有很多开源框架可供选择。
第6步：编写后端API路由（或Firebase侦听器）
如果我们不使用基于云的数据库，我们应该开始编写执行数据库查询的后端高速路由。但是由于我们使用的是Firebase，它本身就在云中，我们可以通过不同的方式与代码进行交互，因此我们只需要设置一个可用的数据库监听器。
为确保侦听器正常工作，我们使用代码制作基本用户表单以创建目标（目标）。实际上，当我们完成表单时，我们看到数据库执行是可更新的。数据库已成功连接！
第7步：构建“概念证明”
下一步是为应用程序创建“概念证明”，或者实现最复杂基本功能的原型，证明我们的应用程序可以实现。对我们而言，这意味着找到一个前端库来渲染时间轴，成功连接到Firebase，并在数据库中显示一些种子数据。
由Victory.JS绘制的简单时间线
我们找到了Victory.JS，一个基于D3的响应式库，花了一天时间阅读文档并使用VictoryLine和VictoryScatter组件实现了一个非常基本的示例，以可视化方式显示数据库中的数据。实际上，这非常有用！我们可以开始建设。
第8步：在代码中实现功能
最后，是时候构建应用程序中预期的功能了。根据您正在构建的应用程序，这一重要步骤存在一些显着差异。我们编写不同的用户故事并将其保存在Waffle上，具体取决于所使用的框架。通常需要触摸前端和后端代码（例如，创建前端表并连接到数据库）。我们已经实现了这些大小的功能：
能够创建新目标、里程碑和记录
能够删除目标，里程碑和记录
能够更改时间线的名称，颜色和详细信息
能够缩放时间轴
能够添加资源链接
能够上传视频
在达到里程碑和相关目标记录时弹出资源和视频
集成的富文本编辑器用户注册、验证、OAuth验证
弹出视图时间轴选项
加载屏幕
有各种原因。这一步花了我们很多时间。——此阶段是生成最高质量代码的阶段。当我们实现一个函数时，会有更多的东西需要完善。
第9步：选择并实施设计
当我们使用MVP架构实现所需的功能时，我们能够开始清理和美化它。像表单，菜单和着陆栏等组件一样，我的团队使用Material-UI，它不需要很多深入的设计知识，它还确保每个组件看起来圆润流畅。
这是我最喜欢的功能之一。它美丽而清新。
我们花了一点时间选择配色方案和编写CSS，这让我们在编程中花了很多时间。在此期间，我们还设计了徽标图标并上传了网站图标。
第10步：识别并减少错误
我们应该从一开始就使用测试驱动的开发模型，但时间有限，而我们的时间只够实现该功能。这意味着在过去的两天里，我们花费了模拟我们可以想到的各种用户流并从应用程序中发现错误。
这个步骤是最不系统的，但是我们发现了一堆忙于我们的bug，其中一个是在某些情况下不会结束动画加载的bug，而且是一个资源组件将会出错的bug。完全停止工作。修复错误很烦人，但是当软件准备运行时它尤其令人满意。
第11步：在线申请
最后一步是上线，以便用户可以使用它！由于我们使用Firebase存储数据，因此我们使用Firebase Hosting，它直观而简单。如果要选择其他数据库，可以使用Heroku或DigitalOcean。通常，您可以在主机网站上查看说明。
我们还在Namecheap.com上购买了一个廉价的域名，这使我们的应用程序更加完整和易于查找。
好的，这是整个过程。——我们都是这个实用的全栈应用程序的共同开发人员。如果您想继续，那么第12步将测试用户A / B，以便我们更好地理解：实际用户如何与应用程序交互以及他们希望在V2版本中看到什么。但现在我们非常高兴，不仅因为成品，还因为我们从这个过程中获得了无法估量的知识和理解。点击此处查看Align应用程序！
第一步是弄清楚我们要构建什么。当我在IBM担任顾问时，我带领团队领导的想法工作组。从那以后，我一直建议团队使用经典的头脑风暴策略，在这个策略中我们可以提出尽可能多的想法。——甚至“愚蠢的想法”——所以每个人的大脑都在思考，没有人担心敢于表达你的意见。
当我们提出关于应用程序的几个想法时，我们记录了这些想法，以便更好地理解我们感兴趣的主题。在我们的小组中，我们看到了实现想法和需要自我改进的明确趋势。设定目标、的感受，以及个人发展。我们最终决定了具体的想法：制作一个用于设置和管理长期目标的控制面板，有节省内存的元素，您可以根据时间可视化数据。
从那时起，我们创建了一系列用户故事（从最终用户的角度描述了我们想要拥有的内容），并阐明了我们想要对应用程序做些什么。
第2步：UX / UI原理图
接下来，在白板上，我们绘制了虚构应用程序的基本视图。结合用户故事，了解这些视图在应用程序的基本框架中的工作方式。
这些骷髅确保我们的意见统一并提供可预测的蓝图，使我们能够朝着计划的方向努力。
第3步：选择数据结构和数据库类型
在设计数据结构时。根据我们的图表和用户故事，我们在Google文档中创建了一个列表，其中包含我们需要的模型以及每个模型应包含的属性。我们知道我们需要“目标”模型、“用户”模型、“里程碑”模型、“签到”模型和最后一个“资源”模型和“上传”）“模型。
初始数据模型结构
在形式化这些模型之后，我们需要选择一种类型的数据库：“关系”或“非关系”（即“SQL”或“NoSQL”）。由于基于表的SQL数据库需要预定义格式，因此基于文档的NoSQL数据库可以动态格式描述非结构化数据。对于我们的情况，SQL类型或No-SQL类型数据库没有太大影响。基于以下原因，我们最终选择了Google的NoSQL云数据库Firebase：
它可以将用户上传的图像保存在云中并存储它们
它包括WebSocket功能，可以实时更新。
它处理用户身份验证并提供简单的OAuth功能。
一旦我们确定了数据库，我们就需要了解数据模型之间的关系。由于Firebase是NoSQL类型，因此我们无法创建联合表或设置“Checkins are Goals”等附属关系。所以我们需要弄清楚JSON树是什么样的，对象是如何嵌套的（或者不是嵌套的）。最后，我们构建了一个这样的模型：
我们最终确定了Goal对象的Firebase数据格式。请注意，里程碑和Checkins对象嵌套在目标中。
（注意：出于性能原因，Firebase更喜欢简单的、常规数据结构，但对于我们的情况，我们需要嵌套数据，因为我们没有从数据库（目标）获取目标但是没有得到相应的子对象里程碑（里程碑）和记录（签到）。
第4步：设置Github和敏捷开发工作流程
我们知道，从开始执行敏捷开发的、开始整理有条不紊的事情对我们来说是非常有益的。我们在Github上设置了存储库，我们无法将代码直接合并到主分支中，迫使我们相互审查代码。
我们还在Waffle.io网站上创建了一个敏捷开发小组，该小组可以免费轻松地集成到Github中。我们列出了我们需要在Waffle面板上修复的所有用户故事和错误。然后，当我们开始编码时，我们每个人都将为我们正在处理的每个用户故事创建一个git分支，并在我们完成工作后合并本文的分支。
我们也开始养成上午会议的习惯，讨论前一天的工作以及每个人遇到的障碍。会议通常决定当天的进程——谁将要编程配对，谁将单独处理问题。
我认为这种工作流程非常好，因为它可以让我们清楚地找到自己的位置并完成工作，而不必担心人际冲突。步骤5：选择、下载模板文件。
由于JavaScript生态系统过于复杂，我们不会从底层构建应用程序。没有必要花费宝贵的时间来连接Webpack构建脚本和加载器，将符号链接指向项目项目。我的团队选择了Firebones框架，因为它恰好适合我们，当然还有很多开源框架可供选择。
第6步：编写后端API路由（或Firebase侦听器）
如果我们不使用基于云的数据库，我们应该开始编写执行数据库查询的后端高速路由。但是由于我们使用的是Firebase，它本身就在云中，我们可以通过不同的方式与代码进行交互，因此我们只需要设置一个可用的数据库监听器。
为确保侦听器正常工作，我们使用代码制作基本用户表单以创建目标（目标）。实际上，当我们完成表单时，我们看到数据库执行是可更新的。数据库已成功连接！
第7步：构建“概念证明”
下一步是为应用程序创建“概念证明”，或者实现最复杂基本功能的原型，证明我们的应用程序可以实现。对我们而言，这意味着找到一个前端库来渲染时间轴，成功连接到Firebase，并在数据库中显示一些种子数据。
由Victory.JS绘制的简单时间线
我们找到了Victory.JS，一个基于D3的响应式库，花了一天时间阅读文档并使用VictoryLine和VictoryScatter组件实现了一个非常基本的示例，以可视化方式显示数据库中的数据。实际上，这非常有用！我们可以开始建设。
第8步：在代码中实现功能
最后，是时候构建应用程序中预期的功能了。根据您正在构建的应用程序，这一重要步骤存在一些显着差异。我们编写不同的用户故事并将其保存在Waffle上，具体取决于所使用的框架。通常需要触摸前端和后端代码（例如，创建前端表并连接到数据库）。我们已经实现了这些大小的功能：
能够创建新目标、里程碑和记录
能够删除目标，里程碑和记录
能够更改时间线的名称，颜色和详细信息
能够缩放时间轴
能够添加资源链接
能够上传视频
在达到里程碑和相关目标记录时弹出资源和视频
集成的富文本编辑器用户注册、验证、OAuth验证
弹出视图时间轴选项
加载屏幕
有各种原因。这一步花了我们很多时间。——此阶段是生成最高质量代码的阶段。当我们实现一个函数时，会有更多的东西需要完善。
第9步：选择并实施设计
当我们使用MVP架构实现所需的功能时，我们能够开始清理和美化它。像表单，菜单和着陆栏等组件一样，我的团队使用Material-UI，它不需要很多深入的设计知识，它还确保每个组件看起来圆润流畅。
这是我最喜欢的功能之一。它美丽而清新。
我们花了一点时间选择配色方案和编写CSS，这让我们在编程中花了很多时间。在此期间，我们还设计了徽标图标并上传了网站图标。
第10步：识别并减少错误
我们应该从一开始就使用测试驱动的开发模型，但时间有限，而我们的时间只够实现该功能。这意味着在过去的两天里，我们花费了模拟我们可以想到的各种用户流并从应用程序中发现错误。
这个步骤是最不系统的，但是我们发现了一堆忙于我们的bug，其中一个是在某些情况下不会结束动画加载的bug，而且是一个资源组件将会出错的bug。完全停止工作。修复错误很烦人，但是当软件准备运行时它尤其令人满意。
第11步：在线申请
最后一步是上线，以便用户可以使用它！由于我们使用Firebase存储数据，因此我们使用Firebase Hosting，它直观而简单。如果要选择其他数据库，可以使用Heroku或DigitalOcean。通常，您可以在主机网站上查看说明。
我们还在Namecheap.com上购买了一个廉价的域名，这使我们的应用程序更加完整和易于查找。
好的，这是整个过程。——我们都是这个实用的全栈应用程序的共同开发人员。如果您想继续，那么第12步将测试用户A / B，以便我们更好地理解：实际用户如何与应用程序交互以及他们希望在V2版本中看到什么。但现在我们非常高兴，不仅因为成品，还因为我们从这个过程中获得了无法估量的知识和理解。点击此处查看Align应用程序！