idea构建web工程_如何使用系统工程来构建成功的Web应用程序

最新推荐文章于 2024-09-27 15:09:45 发布

cumian8165

最新推荐文章于 2024-09-27 15:09:45 发布

阅读量373

点赞数

文章标签：大数据编程语言 python 人工智能 java

原文链接：https://www.freecodecamp.org/news/how-to-use-systems-engineering-to-build-a-successful-web-app-6f8bda2f7fc4/

版权

idea构建web工程

如果您了解它的工作原理，则更容易构建它 (If you understand how it works, its easier to build it)

So you’ve finally completed your design in Adobe XD, Figma, Sketch or InVision, but still struggle with the idea of how to implement the functionality. Don’t worry, we’ve thought for a while that the only way to build web-apps is to begin with UI/UX design along with prototype sketches.

因此，您最终已经在Adobe XD，Figma，Sketch或InVision中完成了设计，但是仍然对如何实现功能的想法感到困惑。不用担心，我们已经思考了一段时间，构建Web应用程序的唯一方法是从UI / UX设计以及原型草图开始。

Luckily, it turns there are other, and better techniques we can use to describe web-apps without stressing about what positions, size, or spacing the elements on a page need.

幸运的是，事实证明，还有其他更好的技术可以用来描述Web应用程序，而无需强调页面上元素的位置，大小或间距。

Let me introduce you to something that has been used by companies in the aerospace, maritime, defense, automotive and telecommunication fields to gain a better understanding of how systems behave and interact. I’m not talking about X number of tips and tricks on how to improve UI/UX, but what techniques you can apply from the Systems Engineering (SE) arsenal to build successful web-apps.

让我向您介绍一些在航空航天，海事，国防，汽车和电信领域的公司所使用的东西，以便更好地了解系统的行为和交互方式。我不是在谈论有关如何改善UI / UX的X技巧和窍门，而是可以从系统工程 (SE)库中应用哪些技术来构建成功的Web应用程序。

These techniques have many benefits, but the most important one is how quickly one can express ideas and understand how things work.

这些技术有很多好处，但最重要的是一种能以多快的速度表达想法并理解事物的工作方式。

By the end of this article, you’ll be able to use some of these SE techniques to build better apps.

到本文结尾，您将能够使用其中一些SE技术来构建更好的应用程序。

Here are four practical and relevant SE techniques you can apply.

您可以应用以下四种实用且相关的SE技术。

If you want to become a better web developer, start your own business, teach others, or simply improve your development skills, I’ll be posting high-quality weekly tips and tricks on the latest web-languages out in the market.

如果您想成为一个更好的Web开发人员，开办自己的业务，教别人，或者只是提高您的开发技能，我将在市场上最新的每周一次的网络上发布高质量的每周提示和技巧。

一个实际的例子-在线学习平台 (A practical example — Online learning platform)

In order to make the examples intuitive and applicable, we’ll build a pretend online learning platform. A platform that allows people to publish content, the same concept as Medium, YouTube, Unsplash etc.

为了使示例更加直观和适用，我们将构建一个伪装的在线学习平台。一个允许人们发布内容的平台，其概念与Medium，YouTube，Unsplash等相同。

Note: the idea of using these techniques is to describe it enough so that developers can easily implement these features, which means we don’t need to go into details.

注意：使用这些技术的想法是对其进行足够的描述，以便开发人员可以轻松地实现这些功能，这意味着我们无需赘述。

Here are few nice tips to be aware of in the early stages of the app.

以下是在应用程序早期阶段需要注意的一些不错的技巧。

1.不要从详细的设计开始 (1. Don’t start with detailed design)

In early stages, most developers naturally begin with defining the solutions first, and thus get caught up with details that don’t really matter for the end-product. It leads us in the wrong direction, and we forget the true purpose of the app.

在早期阶段，大多数开发人员自然会首先定义解决方案，因此会陷入与最终产品无关紧要的细节。这会导致我们走错了方向，而我们忘记了该应用程序的真正目的。

Design is important, but not something we should focus on in early stages. It’s not fixed (and changes often) — for instance the color of a button, position of the elements, font-type and so on. What doesn’t change is the web-app’s underlying behavior, such as the way a person authenticates, the way they upload something on a page, the steps to process a payment, and so forth. The fundamental parts stay the same.

设计很重要，但不是我们早期应该关注的重点。它不是固定的(并且经常更改)，例如按钮的颜色，元素的位置，字体类型等。不会改变的是Web应用程序的基本行为，例如人员身份验证的方式，他们在页面上上传内容的方式，处理付款的步骤等等。基本部分保持不变。

2.从问题开始 (2. Start with the problem)

Identify the problem first: the surroundings, who are the stakeholders, the behavior, and the context of the app (the scope).

首先确定问题：环境，利益相关者，行为和应用程序上下文(范围)。

We don’t build apps based on solutions, we build them because there is a problem, issue, or a challenge that needs to be resolved. In most cases, the client doesn’t care about the solution, except that it works. The solution shall be identified when the developers understand how the app behaves and interact.

我们不会基于解决方案来构建应用程序，而是因为存在需要解决的问题，问题或挑战而构建它们。在大多数情况下，客户只关心解决方案，除了可以使用。当开发人员了解应用程序的行为和交互方式时，应确定解决方案。

The problem for example may be that the current communication platform is too slow which influences the workflow. Another problem may be that the manager does not have a clear overview of what tasks the employee work with and so on.

例如，问题可能是当前的通信平台太慢而影响工作流程。另一个问题可能是经理对员工从事的任务等没有清晰的了解。

Keep in mind that the problem tells us that there is a need, but doesn’t provide any solutions. The problem is what triggers the development process. So begin with the problem first before starting with the solutions.

请记住，该问题告诉我们有需要，但没有提供任何解决方案。问题是什么触发了开发过程。因此，在开始解决方案之前，首先要解决问题。

Let’s see what techniques we can use to describe our online learning platform.

让我们看看可以用来描述我们的在线学习平台的技术。

1.上下文图 (1. Context Diagram)

定义边界 (Define the boundaries)

The purpose of the context diagram is to define the boundaries within the app, or parts of the app, and provide a clear understanding of what entities it interacts with.

上下文图的目的是定义应用程序内或应用程序各部分的边界，并清楚地了解与之交互的实体。

As shown, we can see what types of stakeholders (users) interact with the app, and the interaction types between them. Note, the names of the stakeholders are not mentioned, nor what type of database we are dealing with. We don’t want to get caught up with details which may change in the future.

如图所示，我们可以看到哪些类型的涉众(用户)与应用程序进行交互，以及它们之间的交互类型。注意，没有提及利益相关者的姓名，也没有提及我们正在处理的数据库类型。我们不想赶上将来可能会改变的细节。

澄清复杂的应用程序 (Clarify complex apps)

If you are dealing with a fairly complex app that consist of many parts, then a context diagram is a good alternative that allows you to simplify things. It’s also a good way to remind ourselves of what the purpose of the app is, and eliminate things that provide little value for the app. It’s a way to step back, and focus on what’s important.

如果您要处理一个由许多部分组成的相当复杂的应用程序，那么上下文图是一个很好的选择，它可以使您简化事情。这也是提醒自己该应用程序的目的，并消除对该应用程序几乎没有价值的东西的一种好方法。这是一种退后一步，专注于重要事项的方法。

2.用例图 (2. Use Case Diagram)

Note, we don’t mention anything about the layout, size or position of the elements. In SE it’s important that things are modular, meaning that we can change things without affecting the app — we don’t want things to be fixed and immutable.

注意，我们没有提及元素的布局，大小或位置。在SE中，将事物模块化是很重要的，这意味着我们可以在不影响应用程序的情况下更改事物-我们不希望事物是固定不变的。

A developer who needs to build working software should be able to read a use case and get a good sense of what the software needs to do. Source.

需要构建可运行软件的开发人员应该能够阅读用例，并很好地了解该软件需要做什么。来源。

描述互动 (Describe the interactions)

The purpose of the use case diagram is to describe how the user interacts with the web-app in a verbal way. This is a great tool for understanding what the customer needs and also what features the developer has to implement.

用例图的目的是描述用户如何以口头方式与Web应用程序进行交互。这是了解客户需求以及开发人员必须实现哪些功能的绝佳工具。

详细说明用例(操作) (Elaborate a use case (action))

As shown above, the user is the content-producer and performs four actions. An action is a feature that needs to be implemented. The use case diagram does not describe the behavior of the app, except the interaction between the user and the app, or parts of it.

如上所示，用户是内容生产者，并执行四个动作。动作是需要实现的功能。用例图不描述应用程序的行为，除了用户与应用程序或其部分之间的交互。

In order to describe the behavior, we can take one action, and elaborate it through diagrams such as activity, state-machine, sequence-diagrams and so forth.

为了描述行为，我们可以采取一个动作，并通过活动，状态机，序列图等图表对其进行详细说明。

For instance, we can create an activity diagram to describe the steps needed to fulfill the “upload content” action. There is an example of this in sections 3 and 4.

例如，我们可以创建一个活动图来描述完成“上传内容”操作所需的步骤。在第3节和第4节中有一个示例。

专注于不同的用例场景 (Focus on different use case scenarios)

The app will most likely be used by users with different roles such as an admin, content producer, editor, analyst and so forth. And each role has a set of unique needs with different use case (interactions). It is important that we cover these interactions or else we end up with a static app customized for a specific user role.

该应用程序最有可能由具有不同角色的用户使用，例如管理员，内容制作者，编辑者，分析师等。并且每个角色都有一组具有不同用例(交互)的独特需求。重要的是，我们必须涵盖这些交互，否则最终会为特定的用户角色定制一个静态应用程序。

3.活动图 (3. Activity Diagram)

描述行为 (Describe the behavior)

The purpose of an activity diagram is to describe the sequence of activities necessary to fulfill a use case. The use case selected is “upload content” from the use case diagram, as shown above.

活动图的目的是描述实现用例所需的活动顺序。如上所示，所选用例是用例图中的“上传内容”。

You are free to decide what use case you want to expand upon and elaborate — the point is not to make an activity diagram for every use case, but the ones that are difficult to understand or implement.

您可以自由决定要扩展和详细说明的用例，重点不是要为每个用例制作一个活动图，而是要创建一个难以理解或实现的活动图。

描述达到目标的步骤 (Describe the steps to reach the goal)

It’s difficult to predict what the user does, and in what order. For that reason, an activity diagram helps us to map what activities the user performs, and also covers decisions we might not be aware of. It can also be used to describe activities from a non-user, for instance a part of the app that waits for something before it can execute. The focus is to describe the workflow.

很难预测用户的操作和顺序。因此，活动图可以帮助我们映射用户执行的活动，并涵盖我们可能不知道的决策。它也可以用来描述非用户的活动，例如应用程序的一部分，它在执行之前会等待一些东西。重点是描述工作流程。

通过设计表达想法 (Express ideas through design)

When I was working in a team, a senior engineer handed me an activity diagram of a feature he wanted to be implemented. The whole development process became a lot easier because I didn’t have to guess how the app behaves, the behavior was already described through an activity diagram.

当我在团队中工作时，一位高级工程师递给我一张他想实现的功能的活动图。整个开发过程变得容易得多，因为我不必猜测应用程序的行为方式，该行为已通过活动图进行了描述。

In general, it’s a great tool for expressing ideas and thoughts to people rather than just relying on verbal communication.

通常，它是一个向人们表达想法和思想的好工具，而不仅仅是依靠口头交流。

4.状态机图 (4. State-machine Diagram)

定义状态 (Define the states)

The purpose of the state machine diagram is to describe a discrete behavior of the app. The difference between an activity diagram and a state-machine diagram is that the former describes the steps to achieve something (workflow), while the latter describes how the states of an object change over its lifetime.

状态机图的目的是描述应用程序的离散行为。活动图和状态机图之间的区别在于，前者描述了实现某些目标(工作流)的步骤，而后者描述了对象的状态在其生命周期中如何变化。

Both are useful techniques to describe the app’s behavior, and are helpful for clients and developers to gain common understanding of how things work.

两者都是描述应用程序行为的有用技术，并且有助于客户和开发人员获得对事物工作方式的共识。

最后的想法 (Final thoughts)

Design is in constant motion and evolves and changes throughout the development process. As mentioned above, tackling design issues such as UI/UX and prototype sketches is important, but doesn’t really describe how the underlying parts of the app work or communicate. It also requires having educated graphical designers, and a lot of resources.

设计在不断发展，并在整个开发过程中不断发展和变化。如上所述，解决UI / UX和原型草图之类的设计问题很重要，但并不能真正描述应用程序的基础部分如何工作或进行通信。它还需要受过良好教育的图形设计师和大量资源。

For that reason, we need something that is not design-dependent, something that doesn’t focus on minor details such as font-types, box-shadows, colors and so on.

因此，我们需要一些与设计无关的东西，而不是只关注次要细节的东西，例如字体类型，框阴影，颜色等。

We need Systems Engineering techniques to describe how the app behaves and interacts, to express ideas, simplify the development process, and help people with non-technical backgrounds grasp the apps behavior.

我们需要系统工程技术来描述应用程序的行为和交互方式，表达想法，简化开发过程，并帮助具有非技术背景的人们掌握应用程序的行为。

Note, there are set of rules that should be followed when creating such diagrams, however, most people I’ve worked with do not understand or actually care about these rules. So the best tip I can give is to make sure you follow the purpose of the diagram, but don’t draw yourself into the rules such as if the line should end with an arrow head, diamond and so forth.