【.com速译】我是一名前端开发人员，我的公司：物联网连接和云厂商，坐标：美国。总结：1.Stack:1.前端：React,Redux,Webpack等2.后端：Apache,PHPandSQL（所有前端内容都是静态提供的，但是API来自PHP）。3、后端（云系统）：PHP、Python、C等。2、主要工具：IntelliJ、Slack、Phabricator（类似于JIRA和GitHub的结合）、Sketch（用于设计）。3.需要解决的问题：先介绍一下背景，我们提供了一个长期运行的功能，允许用户免费直接向物联网设备发送短信。许多用户喜欢这个功能，不幸的是，有些人找不到他们原来的短信收件箱，因为它隐藏在一组下拉框中。为了解决这个问题，我需要创建几个选项卡，让人们在“云”或“短信”之间进行选择。如果用户看不到，功能就毫无意义。第一步是构建设计。我们的团队使用Sketch。初稿完成后，我将其交给UX主管Kevin审阅。他让我调整颜色和边距，这是非常微不足道的-只是对样式和标记的微小调整。经过一个小时的调整ReactJSX和.scss文件，加上无意中的浏览器无限循环问题，我终于完成了任务。这个结果会在下个版本中推送，但我需要确保它通过e2e测试。解决任务的第一天：进行了e2eSelenium测试，但由于某些原因不得不推迟（因为我必须构建一套Chrome扩展用于测试记录）。因此，让我们今天完成这些任务。前端开发的挑战之一是我们经常需要仔细考虑我们的优先事项。理想情况下，这应该由项目经理在计划会议上解决，但我们是一家初创公司，没有多余的资源。因此，我决定考虑以下问题：哪项任务将为客户创造最大价值？下一步是选择其中最简单的任务。所以我选择了一个有意义且简单的任务：第1步：我们提供一个组织功能，用于创建可以在IoT设备上与其他人协作的新“用户”类型（类似于GitHub组织形式）。在组织的上下文中（通过用户切换到该组织），需要访问许多重要的帐户数据——特别是“访问令牌”或用于调用服务器API的个人API密钥。我需要让这些键对用户可见。我所做的只是在设置页面的侧边栏中添加一个列表。由于目标页面已经存在，所以进度很快。结束！花费的时间比预期的要长一些……我被迫合并两个Submenu组件并将结果提交到更高的“公共组件”文件夹。它看起来是这样的：解决任务的第2天：我们将在硬件/云方面做出重大举措。我目前正在从事“团队百叶窗”项目，该项目使用短信来打开和关闭办公室百叶窗。之前我们也用过同样的原理来控制台灯，但是这次我们需要引入大扭矩电机。不管怎样，这样的事件只是为了证明一个前端开发者的生活是丰富多彩的！我今天的贡献还包括构建一个小型Web应用程序，让人们可以跟踪“百叶窗”项目的进度。这实际上是一组可以调用我们公共API的小型节点服务器。这给了我一个继续修改公共全息图节点npm包的借口。本质上，这是一组基于我上周构建的原始HTTP端点的“小甜饼”。此之前：//必须自己构建url很烦人……您还必须跟踪apikey和orgid，这是调用成功所必需的。request('https://dashboard.hologram.io/api/1/devices?limit=50&orgid=XXX&apikey=XXX',function(error,response){if(!error&&response.statusCode==200){cb()}else{cb(error,null);}});此后:(非最终版)varHologramAPI=require('hologram-node')("APIKEY",{orgid:123});returnHologramAPI.getDevices({limit:1000}).then((devices)=>{returnres.json(devices);}).catch((e)=>{returnres.json(e);});不错吧？再来看看内部结构：HoloClient.prototype.getDevices=function(options={}){returnnewPromise(function(resolve,reject){options=_.pick(options,'limit','startafter');varpath=`/devices`;varquerystring=this.getQueryString(_.extend({},options));if(this.config.showDebug)console.log(`GET${this.getBaseUrl()}${path}${querystring}`);针。get(`${this.getBaseUrl()}${path}${querystring}`,this.responseHandler(resolve,reject));}.bind(this));};以下是我们在测试过程中发现的mocha测试集成错误：给大家的小问题：1、我们在什么环境下测试？2.我们如何轻松地对SQLServer进行预测试和后测试？3.这一切都值得吗（就人力而言）？任务解决第3天：继续HologramNPM昨天，我发现代码中有很多模式，我决定尝试另一种架构策略，希望这能增加API功能并帮助维护。今天的新策略是配置源代码以支持内省。我首先创建了一组包含所有API方法及其HTTP属性的JSON数组。然后我编写了一个“引导”方法，使用这个JSON来构建实际代码。示例：从这里：{名称：“getAll”，定义：“获取您帐户中的所有设备。”，示例：“https://hologram.io/api/i/devices?orgid=123&apikey=123123”，路径：“/devices”，类别：“设备”，方法：“get”，参数：[{name：“limit”，type：“string”，required：false，location：“querystring”}，{name：“startafter”,type:"string",required:false,location:"querystring"}]}...then:buildAPIWithConfig(json)...实现以下功能：HologramAPI.Device.getAll({limit:0}).then((devices)=>{assert(devices.length===0,"Nodevicesreturned");done();})此JSON可用于生成文档、方法参数类型反馈、测试和测试模拟。例如，我可以运行：generateDocs(json)并获得结果：METHODHologram.Device.getAll({options}):获取您帐户中的所有设备并返回一个Promise。向/devices发出原始GET请求示例：https://hologram.io/api/i/devices?orgid=123&apikey=123123Why？构建好README.md然后配置！面向用户的功能：1.用户可以获得所有API文档2.用户可以获得***API文档3.维护人员不需要更新JSDoc等标签4.维护人员可以根据JSON生成测试和模拟数据缺点：牺牲灵活性Resilience...因为代码已经生成，当API返回不符合标准模式的东西时很难自定义。Day4tasksolving：回顾一下选路过程感觉不错，至少比写代码和文档要好很多。一天的大部分时间都花在添加JSON条目、为它们编写Mocha测试、构建README.md生成模板、编写端点描述以及将README文档链接到官方文档页面上。节奏不错，过一两天就正式开张了。显示评论结果！接下来，编写文档……运行测试……解决任务。第5天：我要快点做点什么。第一步-在路由部分添加一些文档链接。我已经在其他地方找到了文档的链接，所以只需粘贴它即可。有些人称这种风格为优先级，我们应该在uikit/kitchen-sink项目中记录我们的实现。第2步-将图标的源URL配置为来自数据库而不是硬编码。后端团队承诺在API调用响应中提供url字符串，因此我需要将其合并到现有配置中。结束！出乎意料的是，这真是一件令人头疼的事……我花了2个小时才弄好。起初，基础变化没有奏效。我开始比较理论和实际显示的区别，很快修好了。另外，我们的CSS代码形式非常灵活，这让我很头疼——也许我们以后需要重写它。暂时将此添加到待办事项列表中，还有更多重要的功能等待完成。终于能够将一些项目添加到Phabricator的完成列中。然后，在这里我检查代码差异并提交。好了，这就是我一周的工作安排，希望对大家有所帮助~
