web漏洞演练
I love the number of awesome tutorials there are on how to make different web apps. As great as these are, though, I often felt stuck when it came to starting my own web apps.
我喜欢关于如何制作不同的Web应用程序的许多很棒的教程。 尽管功能如此强大，但在启动自己的Web应用程序时，我经常感到困惑。
So I wrote this article to walk you through my thought process. This is how I plan and develop my own projects.
因此，我写了这篇文章来引导您完成我的思考过程。 这就是我计划和开发自己的项目的方式。
A quick note before we start: this article is not a "silver bullet" guide on how to create ANY project. This is just how I personally approach my projects. It may work for you, it may not.
在我们开始之前有个简短的注释：本文不是有关如何创建任何项目的“灵丹妙药”指南。 这就是我个人处理项目的方式。 它可能对您有用，但可能不起作用。
There is no "right" way to create any app. Remember: there are many roads that will get you to the end of your journey. (Unless, you're taking a shiny ring to Mordor, in which case there is only 1 road, unfortunately).
没有创建任何应用程序的“正确”方法。 请记住：有很多路会带您走到旅途的尽头。 (除非您要带一条闪亮的戒指到Mordor，否则这种情况下只有1条路)。
I'm going to use React.js to code the example app. I've included a Code Sandbox with the finished app at the end of this article.
我将使用React.js编写示例应用程序。 在本文结尾，我在完成的应用程序中包含了一个Code Sandbox。
So you'll also need to have basic familiarity with setting up a React project. Don't worry though, the principles in this article still apply regardless of the language you use to code the app.
因此，您还需要对设置React项目有基本的了解。 不过请不要担心，无论您使用哪种语言编写应用程序，本文中的原则仍然适用。
OK let's get started. Today we're going to design a... TODO-LIST!
好，让我们开始吧。 今天我们要设计一个... TODO-LIST！
Only joking. We're going to make a simple calculator.
只是开个玩笑。 我们将创建一个简单的计算器。
“它有什么作用？” ("What does it do?")
This is the first question I ask myself before starting any side project. I want my calculator to be able to:
这是开始任何附带项目之前我问自己的第一个问题。 我希望我的计算器能够：
- Add, subtract, divide and multiply numbers 加，减，除和乘数
- Show the result of the calculation 显示计算结果
- Reset the display 重置显示
This should be plenty for now. Planning out the features in this way gives you an idea of your app will do, and starts putting you "in the zone" as it were.
现在应该足够了。 以这种方式规划功能可以使您对应用程序有一个了解，然后开始将您置于“区域中”。
This approach also gives you a solid goal to work towards. Once you have implemented all the features, you're finished, and you can start thinking about your next side project - Huzzah!
这种方法还为您提供了一个坚定的目标。 一旦实现了所有功能，就完成了，您可以开始考虑下一个副项目-Huzzah！
Otherwise, you risk ending up trying to add too many features, and seeing calculators in your sleep. Of course, you can keep adding features if you want. But make sure to have an end goal to work towards.
否则，您可能会冒险尝试添加太多功能，并在睡眠中看到计算器。 当然，您可以根据需要继续添加功能。 但是请确保有一个最终目标可以实现。
In the real world - depending on your role - there may be a client or product owner who defines the "what does it do" part for you. Your job as a the developer will be break up these requirements into more detailed tasks, which we'll get into later.
在现实世界中-根据您的角色-可能会有客户或产品所有者为您定义“它做什么”部分。 您作为开发人员的工作将把这些要求分解为更详细的任务，我们将在以后进行介绍。
“它是什么样子的？” ("What does it look like?")
Now that I have an idea of the features, I will start to think about what it's going to look like.
现在，我对这些功能有了一个了解，我将开始考虑它的外观。
If you're struggling to come up with designs, there are a number of ways you can do this:
如果您在努力设计，那么可以通过多种方法进行：
- look at examples of similar apps 看类似应用的例子
- browse CSS frameworks for elements you can use 浏览CSS框架以查找可以使用的元素
- or use your imagination. (Not every side project you do has to look "incredible.") 或发挥您的想象力。 (并非您所做的每个附属项目都必须看起来“令人难以置信”。)
I am feeling particularly artsy today so I am going to make a quick wireframe with how I want my calculator to look:
我今天感觉特别艺术，所以我要对计算器的外观做一个快速的线框：
Ah! Marvelous! I should become an artist.
啊! 奇妙！ 我应该成为一名艺术家。
So I have my features, and I have my sketch that Van Gogh himself would be proud of.
所以我有自己的特色，我有梵高本人会为之骄傲的草图。
In the real world, when you're working as part of a team, a designer may come up with something like this for you. Or, even better, you might be given a working prototype, which you can play with.
在现实世界中，当您作为团队的一员工作时，设计师可能会为您提出类似的建议。 或者，甚至更好的是，您可能会得到一个可以使用的原型。
“如何定位和设置元素样式？” ("How do I position and style the elements?")
I'm starting to get a good feel for what my app should do, and what it looks like. Now it's time to get a bit more technical.
我开始对我的应用程序应该做什么以及它的外观有了很好的了解。 现在是时候获取更多技术知识了。
At this point I'm thinking, "OK, I've got some buttons, and a big ole' display. How will I position everything?"
此时，我在想：“好，我有一些按钮和一个大的ole'显示屏。我将如何放置所有内容？”
I like to think that implementing a design is a bit like building a house. Lay the foundation (the layout), build the outer structure (buttons, inputs), and add the finishing touches later (colours, icons, styles).
我想认为实施设计有点像盖房子。 奠定基础( 布局 )，构建外部结构( 按钮，输入 )，并在以后添加装饰效果 ( 颜色，图标，样式 )。
When talking about layout, the first things that come to my mind are CSS Grid, Flexbox, or a framework (such as Bootstrap). I'm going to use Flexbox, since it is responsive, makes it super easy to arrange items within a row, and well, because I feel like it. This saves me having to install extra dependencies we don't need.
在谈论布局时，我想到的第一件事是CSS Grid，Flexbox或框架(例如Bootstrap )。 我将使用Flexbox，因为它具有响应能力，这使得在一行中排列项目变得非常容易，而且，因为我喜欢它。 这使我不必安装我们不需要的其他依赖项。
“它的表现如何？” ("How does it behave?")
Now it's time to think about how the app will behave. This is basically breaking down our features into more detail to help design the code.
现在是时候考虑应用程序的行为了。 这基本上是将我们的功能分解为更多细节，以帮助设计代码 。
When I ask myself this, I am thinking about things like:
当我问自己这个问题时，我正在考虑以下问题：
- What does the app look like when it loads? 该应用加载后会是什么样？
- What happens when a user clicks a button? Does the style change? 用户单击按钮会怎样？ 风格会改变吗？
- How does the UI react to various user actions? UI如何响应各种用户操作？
Another way to answer this question is to play with an existing example.
回答此问题的另一种方法是使用现有示例。
A small task for you: try to open up the calculator on your computer, and start doing some stuff. Adding, multiplying, whatever.
对您来说，一个小任务：尝试在计算机上打开计算器，然后开始做一些事情。 加，乘，随便什么。
When you perform an action, see if you can capture in as much detail as possible, what happens.
执行动作时，请查看是否可以捕获尽可能多的细节 ，会发生什么。
Here's what I found:
这是我发现的：
- When the app loads, the display is set to "0" and all the buttons are in an "inactive" state 应用加载后，显示设置为“ 0”，所有按钮均处于“非活动”状态
- When the user clicks a number, the display will update with the new value. The clicked button will change style to indicate to the user that the click was successful. 当用户单击数字时，显示将以新值更新。 单击的按钮将更改样式，以向用户指示单击成功。
- When the user clicks an operator, the selected operator will indicate in some way that it has been selected. 当用户单击一个运算符时，选定的运算符将以某种方式指示它已被选择。
- If an operator button has been clicked, and the user then clicks a number button, the display will firstly reset to zero before displaying the next numbers the user clicks. 如果单击了操作员按钮，然后用户单击了数字按钮，则在显示用户单击的下一个数字之前，显示将首先重置为零。
- When the equals button is clicked, a calculation is performed using the initial number, the selected operator, and the next number that was entered. 单击“等于”按钮时，将使用初始编号，选定的运算符和输入的下一个编号执行计算。
- When the user clicks the clear button, the display will reset to zero, and the app will reset. 当用户单击清除按钮时，显示将重置为零，并且应用程序将重置。
In the real world, we won't always have the luxury of an example or a prototype to play with. But as your experience grows, it becomes easier to do this based on a wireframe or mockup. This is why I like to suggest to beginners to replicate existing apps, as that gives you an example to practice this critical thinking and analysis with.
在现实世界中，我们将不会总是拥有丰富的示例或原型。 但是随着您的经验的增长，基于线框或模型进行此操作变得更加容易。 这就是为什么我建议初学者复制现有应用程序的原因 ，因为这为您提供了一个实践此批判性思维和分析的示例。
But why do we have to go into such nitty-gritty detail? Good question. And the answer is because computers are incredibly smart, but also incredibly dumb. (Don't believe me? Try removing a random curly brace from your code and watch all hell break loose.)
但是，为什么我们必须深入了解这些细节呢？ 好问题。 答案是因为计算机非常智能，但也非常笨。 (不相信我吗？尝试从代码中删除随机大括号，然后观察所有地狱松动。)
The instructions we give to computers have to be extremely specific. For example, looking back at our behaviours above, clicking a number will act differently depending on if an operator was clicked or not.
我们对计算机的说明必须非常具体。 例如，回头看我们上面的行为，单击数字的行为会有所不同，具体取决于是否单击了运算符。
We as humans know how a calculator works, but a computer doesn't until we tell it how.
作为人类，我们知道计算器是如何工作的，但是直到我们告诉计算机如何工作，计算机才知道。
“我的代码是什么样的？” ("What will my code look like?" )
Just like I spent some time designing the UI, I like to do the same with the code. There's many benefits to this:
就像我花了一些时间设计UI一样，我喜欢对代码进行相同的操作。 这有很多好处：
- Makes me think in detail about what components I need 让我详细考虑所需的组件
- Makes me think about the workflows 让我思考一下工作流程
- It means writing the code will be easier/faster, since I have a plan 这意味着编写代码将变得更加容易/快捷，因为我有一个计划
- Catches issues and problem areas early 尽早发现问题和问题领域
I mentioned earlier that for this project I'll aim to keep things simple, so I'll stick to this approach. In the beginning, I'll keep everything in one component. However I'll start to refactor and split into components when:
前面我提到过，对于这个项目，我将致力于使事情保持简单，因此我将坚持这种方法。 首先，我将所有内容都放在一个组件中。 但是，在以下情况下，我将开始重构并分解为组件：
- That the code grows to the point where it's hard to manage or reason about 代码增长到难以管理或推理的地步
- There is a lot of duplicated code 有很多重复的代码
- A single element on the page requires it's own functions and state 页面上的单个元素需要它自己的功能和状态
Have you ever got towards the end of a project and thought "sh*t! I forgot something now I have to redesign all this stuff?" By planning in advance, you'll avoid this trap. With that in mind, here's the stuff I think I'll need. Don't spend all day thinking about it, find a balance between planning and just getting started. Let's break our UI mockup into it's individual parts and think of what code will be needed.
您是否曾经在项目结束时想到“嘘！我现在忘记了一些东西，所以我不得不重新设计所有这些东西？” 通过提前计划，您将避免此陷阱。 考虑到这一点，这是我认为需要的东西。 不要整日思考，要在计划和入门之间找到平衡。 让我们将我们的UI模型分解为各个部分，并考虑将需要哪些代码。
显示器 (The Display)
My display shows the user the current number, so I'm going to need some sort of state value for this. Nothing happens when I click it, so I don't need anything there.
我的显示屏将向用户显示当前号码，因此我将需要某种状态值 。 当我单击它时，什么也没有发生，所以我在那不需要任何东西。
数字按钮 (The number buttons)
Since the number buttons affect the number shown in the display, I'm going to need a function that gets called by an onClick event to manage this. No need to store the selected number in state right now.
由于数字按钮会影响显示屏上显示的数字，因此我需要一个由onClick事件调用的函数来进行管理。 现在无需将所选号码存储在状态中。
操作员按钮 (The operator buttons)
The operator button is an interesting one - as different things happen (remember our, "how does it behave?" notes above?). Since I'll need to know the currently selected operator, I'll store that as a state value as well.
操作员按钮是一个有趣的按钮-由于发生了不同的事情(请记住上面的“我们的行为方式”？)。 由于我需要知道当前选择的运算符 ，因此我也将其存储为状态值 。
等于按钮 (The equals buttons)
The equal button should take the display value, the operator, the previously entered value and calculate the result. Easy!
等于按钮应显示值，操作员，先前输入的值并计算结果。 简单！
Not quite, we've hit our first problem! Let's look back to our behaviours
不完全是，我们遇到了第一个问题！ 让我们回头看看我们的行为
If an operator button has been clicked, and the user then clicks a number button, the display will firstly reset before display the numbers the user clicked
如果单击了操作员按钮，然后用户单击了数字按钮，则在显示用户单击的数字之前，将首先重置显示
The first number the user enters into the display gets reset when they click an operator and starts entering the next number - which means our app has no idea what the first number was when the user clicks equals (I told you computers were dumb)! Let's have a think about this:
用户单击操作员时输入的第一个数字将重置 ，然后开始输入下一个数字-这意味着我们的应用程序不知道用户单击时的第一个数字等于(我告诉过您计算机很笨)！ 让我们考虑一下：
When the operator button is clicked, this is the point where the display resets, and updates with the next number the user enters. Logically then, it makes sense to store the previous display value when an operator is clicked. For this to work, I'll need a function and a state value that stores the display value when an operator is clicked.
单击操作员按钮时，这是显示重置的点，并使用用户输入的下一个数字进行更新。 从逻辑上讲， 单击操作符时，可以存储先前的显示值。 为此，我需要一个函数和一个状态值 ，用于存储单击操作符时的显示值。
清除按钮 (The clear button)
This is an easy one - reset our state values to zero, allowing the user to start again. I'll need a simple onClick function attached to the button to handle this.
这很容易-将状态值重置为零 ，从而允许用户重新启动。 我需要在按钮上附加一个简单的onClick函数来处理此问题。
“我需要测试什么？什么地方可能出问题？” ("What do I need to test? And what can go wrong?")
Depending on who you talk to, there can be different ways to approach testing. Some like to do TDD (which is writing the tests first) and others write them at the end. I do both depending on the project. But the main thing is you write them at some point.
根据与您交谈的人的不同，可以采用不同的方法进行测试。 有些人喜欢做TDD(首先编写测试)，而其他人则在最后编写它们。 我都取决于项目。 但是最主要的是您在某个时候编写它们。
When I think about my tests, I look at the requirements. The first requirement (or feature) is:
当我考虑我的测试时，我会看需求。 第一个要求(或功能)是：
- Add, subtract, divide and multiply numbers 加，减，除和乘数
So I'll need to test that the app can do these things. I won't go into detail about how to write tests, but a good test suite should cover:
因此，我需要测试该应用程序是否可以执行这些操作。 我不会详细介绍如何编写测试，但是一个好的测试套件应涵盖：
- The requirements and common use cases 需求和常见用例
- The edge cases (e.g user enters 99999999999999999999 + 9999999999999999999999) 边缘情况(例如，用户输入99999999999999999999 + 9999999999999999999999)
- The error cases and where things can break (e.g user tries to divide by zero) 错误情况以及可能中断的地方(例如，用户尝试除以零)
"How many tests should I write?", is probably your next question. Unfortunately there is no hard and fast number for this. There are endless amount of inputs you can have. If you follow the points above, you'll have a solid test suite for any project.
“我应该写多少个测试？”，可能是您的下一个问题。 不幸的是，没有固定的数字。 您可以有无数的输入。 如果您遵循以上几点，则将为任何项目提供可靠的测试套件。
Thinking about your tests early will help you think about where errors can occur in your code, and allow you cater for it earlier in your designs.
尽早考虑测试，将有助于您考虑代码中可能出现错误的地方，并可以在设计中更早地解决问题。
让我们看一下代码 (Let's look at the code)
This isn't a coding tutorial as such, so I'm not going to go into the nitty gritty of each step in this article. See the code sandbox at the end to see a working example, including the code/walkthrough for each step outlined below. Feel free to fork the code and play, destroy and experiment to your hearts content!
这不是这样的编码教程，因此在本文的每一步中，我都不会涉及很多细节。 请参阅最后的代码沙箱以查看工作示例，其中包括下面概述的每个步骤的代码/演练。 随意散发代码，尽情发挥，破坏和尝试！
When writing code, we'll stick to the plan:
在编写代码时，我们将坚持计划：
- Focus on getting the UI layout and elements in place first, using our wireframe as reference 使用我们的线框作为参考，着重于首先放置UI布局和元素
- Implement the logic (JS, event handlers etc) 实施逻辑(JS，事件处理程序等)
- Final touchups 最终修饰
- Remember to do the simplest thing to get everything working - no need to worry about refactoring and performance at the start! 记住要做最简单的事情才能使一切正常工作-无需一开始就担心重构和性能！
第1步-布局和基本UI元素 (Step 1 - Layout and Basic UI elements)
(In the Code Sandbox linked below, click Step 1 button to see the working example, see app-step-1.js to view the code!)
(在下面链接的“代码沙箱”中，单击“ Step 1按钮以查看工作示例，请参阅app-step-1.js以查看代码！)
Remember, we are going to start with the layout, and get the "scaffolding" of our app together. This will include adding the HTML and using Flexbox, to position our display and buttons. They won't do anything yet, but they will look nice. Sort of.
记住，我们将从布局开始，并将我们应用程序的“脚手架”放在一起。 这将包括添加HTML并使用Flexbox来定位我们的显示和按钮。 他们什么都不会做，但是看起来会不错。 有点。
第2步-添加逻辑 (Step 2 - Adding the logic)
(In the Code Sandbox linked below, click Step 2 button to see the working example, see app-step-2.js to view the code!)
(在下面链接的“代码沙箱”中，单击“ Step 2按钮以查看工作示例，请参阅app-step-2.js来查看代码！)
We've done our planning for this part, so let's refer back to that. In our "What does my code look like" notes, we have to create a bunch of different state objects and functions to handle the events.
我们已经完成了这部分的计划，因此让我们再次参考。 在“我的代码看起来像什么”注释中，我们必须创建一堆不同的状态对象和函数来处理事件。
For this I take one item from our "What will my code look like?" list at a time, and reference back to the "How does it behave?" notes to piece everything together. I implement the functionality, and test that it's working (usually automated but manually will do). Example:
为此，我从“我的代码看起来像什么？”中选择一项。 一次列出，然后参考“它的行为如何？” 笔记将所有内容拼凑在一起。 我实现了该功能，并测试它是否正常工作(通常是自动执行，但手动执行即可)。 例：
The first element in the list is the display. So I will add the state variables and logic for that. Test that it's working, and move onto the number buttons, and repeat. This is where writing your tests early is helpful - you can run the suite every so often to make sure nothing has broken.
列表中的第一个元素是显示。 因此，我将为此添加状态变量和逻辑。 测试它是否正常工作，然后移至数字按钮 ，然后重复。 在这里尽早编写测试很有用-您可以经常运行套件以确保没有损坏。
第3步-添加钟声和口哨声 (Step 3 - Adding the bells and whistles)
(In the Code Sandbox linked below, click Step 3 button to see the working example, see app-step-3.js to view the code!)
(在下面链接的“代码沙箱”中，单击“ Step 3按钮以查看工作示例，请参阅app-step-3.js来查看代码！)
Awesome we're nearly done! Now that the logic is working, we will now go and add some of the finer touches (rounded buttons, borders, bigger display etc) to the app, and we're done! Our very basic calculator now does stuff!
太好了，我们快完成了！ 既然逻辑已在起作用，我们现在将添加一些更精细的触摸(圆形的按钮，边框，更大的显示等)到应用程序中，我们就完成了！ 我们非常基础的计算器现在可以完成工作！
步骤4-交给您！ (Step 4 - Over to you!)
I've purposely left some things out that you can go ahead and try if you feel like it. Use the approaches we learned so far - thinking about the behaviors, what function/state objects you'll need etc.
我故意遗漏了一些东西，您可以继续尝试，如果您愿意的话。 使用到目前为止所学的方法-考虑行为，所需的功能/状态对象等。
Our calculator doesn't quite match the wireframe - can you add some color to the buttons? What about changing the colour of a selected button when it's clicked?
我们的计算器与线框不太匹配-您可以为按钮添加一些颜色吗？ 如何在单击所选按钮时更改其颜色？
- No tests! Oh dear! See if you can add some 没有测试！ 噢亲爱的！ 看看是否可以添加一些
Some duplicate code exists - can you find a way to render the buttons so we don't need to hard code 16
buttonelements?存在一些重复的代码-您能找到一种呈现按钮的方法，这样我们就不必对16个
button元素进行硬编码了吗？- Error handling - there is none! This is bad. What happens if you try to divide by zero? Or if you have a number that is wider than the display? 错误处理-没有任何错误！ 这不好。 如果您尝试除以零会怎样？ 或者，如果您的数字大于显示的数字？
When the user starts to input numbers, any preceding zero's are added to the display, for example
000003this isn't good UX, can you fix it?当用户开始输入数字时，任何前面的零都会添加到显示中，例如
000003这不是一个好的UX，您能解决吗？
谢谢阅读！ 想要更多类似的文章吗？ (Thanks for reading! Want more articles like this?)
Hopefully this has given you an insight into one approach into coding apps. If you'd like to be updated when I release more articles like this, feel free to join the mailing list over at chrisblakely.dev! Or reach me over at Twitter if you fancy a chat :)
希望这可以让您深入了解一种编码应用程序的方法。 如果您想在我发布更多此类文章时进行更新，请随时通过chrisblakely.dev加入邮件列表！ 或者，如果您喜欢聊天，请通过Twitter与我联系:)
CodeSandbox-完成的示例 (CodeSandbox - Finished Example)
翻译自: https://www.freecodecamp.org/news/a-walk-through-the-developer-thought-process/
web漏洞演练
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
