自动售货机编程_Rosmaro中基于视觉自动机的编程简介

自动售货机编程

by Łukasz Makuch

通过ŁukaszMakuch

Rosmaro中基于视觉自动机的编程简介 (An introduction to visual automata-based programming in Rosmaro)

To do automata-based programming is to program with states and transitions. States correspond to different behaviors. Transitions are named after events and describe how those behaviors change.

执行基于自动机的编程就是使用状态和转换进行编程。 状态对应于不同的行为。 过渡以事件命名，并描述这些行为如何变化。

The easiest way to think about this is a directed graph. Here’s an example of a cursed prince:

考虑这一点的最简单方法是有向图。 这是一个被诅咒的王子的例子：

It may be either a Prince or a Frog. The Prince eating a pizza is an event which causes a transition from the Prince state to the Frog state.

它可能是王子或青蛙 。 王子吃披萨是一个事件，导致了从王子州到青蛙州的过渡。

I’m going to show you how to do (visual) automata-based programming in Rosmaro.

我将向您展示如何在Rosmaro中进行(可视化)基于自动机的编程。

Rosmaro is a JavaScript library which allows you to build stateful objects.

Rosmaro是一个JavaScript库，允许您构建有状态的对象。

An object is stateful when two identical method calls may produce different results.

当两个相同的方法调用可能产生不同的结果时，对象是有状态的。

Here’s an example:

这是一个例子：

> model.introduceYourself(); 'I am The Prince of Rosmaro!'

> model.eat({dish: 'yakisoba'}); undefined

> model.introduceYourself();'I am The Prince of Rosmaro!'

> model.eat({dish: 'pizza'});undefined

> model.introduceYourself();'Ribbit! Ribbit!'

Another great example of stateful objects is a Graphical User Interface. Think of an ATM. You can look twice at its screen and see different messages and fields. Your eyes are the same. The way you look at the screen hasn’t changed. It’s the state of the ATM that changed. Maybe you selected some option by clicking a button, or maybe some timer kicked in. Something caused a transition from one state to another.

有状态对象的另一个很好的例子是图形用户界面。 想想一个自动取款机。 您可以在其屏幕上查看两次，并查看不同的消息和字段。 你的眼睛是一样的。 您看屏幕的方式没有改变。 正是ATM的状态发生了变化。 也许您通过单击按钮选择了某些选项，或者启动了一些计时器。某项导致从一种状态过渡到另一种状态。

Below are few examples of front-end applications built using visual automata-based programming.

以下是使用基于视觉自动机的编程构建的前端应用程序的一些示例。

The Rosmaro way of building stateful objects is to combine a drawn graph with some written code.

Rosmaro构造有状态对象的方法是将绘制的图形与一些书面代码结合起来 。

The graph shows all the possible behaviors and what makes them change. The fact that it’s drawn using a visual editor makes it a visual programming tool.

该图显示了所有可能的行为以及使它们发生变化的原因。 使用可视化编辑器绘制的事实使其成为可视化编程工具。

Each behavior is expressed as a bunch of pure functions. A function may return some result as well as a request to follow an arrow.

每个行为都表示为一堆纯函数。 函数可能会返回一些结果以及跟随箭头的请求。

Rosmaro stores the whole state of a model in a pluggable storage mechanism. It may be everything from a plain-old JavaScript object to a NoSQL database. It also uses pessimistic locking to prevent going into an inconsistent state.

Rosmaro将模型的整个状态存储在可插拔存储机制中。 从普通JavaScript对象到NoSQL数据库，所有内容都可能包含在内。 它还使用悲观锁定来防止进入不一致状态。

The example I want to show you concerns a prince who turns into a frog when he eats a pizza.

我想向您展示的示例涉及一位王子，他在吃披萨时变成了青蛙。

First, open the Rosmaro editor. Then, click the LOAD button to start a new project.

首先，打开Rosmaro编辑器 。 然后，单击“ 加载”按钮开始一个新项目。

Add the main graph.

添加主图。

Click NEW NODE.

单击新节点 。

Add a local node called Prince.

添加一个名为Prince的本地节点。

Then, add a local node called Frog.

然后，添加一个名为Frog的本地节点。

Put your mouse cursor over the start entry point and draw an arrow to the Prince node. Then, draw an arrow from the Prince to the Frog and call it ate pizza. Finally, click ADD NODE.

将鼠标光标放在开始入口点上，并向Prince节点绘制一个箭头。 然后，从王子到青蛙画一根箭，并称其为“ 吃披萨” 。 最后，点击添加节点 。

Add a leaf called Prince.

添加一个名为Prince的叶子。

Then, add a leaf called Frog.

然后，添加一个名为Frog的叶子。

To complete the main graph, associate local nodes with the recently added leaves.

要完成主图，请将本地节点与最近添加的叶子相关联。

The graph is ready. Click the button called GENERATE CODE.

该图已准备就绪。 单击名为GENERATE CODE的按钮。

It’s time to write some JavaScript. First, you need to get all the dependencies.

现在该写一些JavaScript了。 首先，您需要获取所有依赖项。

npm i rosmaro rosmaro-in-memory-storage rosmaro-process-wide-lock --save

Then, you need to import and call them.

然后，您需要导入并调用它们。

The generated graph may be either imported as a JSON file, or pasted directly into the code. To keep this example as simple as possible, I suggest pasting it into the code.

生成的图形可以作为JSON文件导入，也可以直接粘贴到代码中。 为了使该示例尽可能简单，我建议将其粘贴到代码中。

A frog is certainly a simpler creature than a prince. Implementing its behavior is easy. Every time we ask the frog to introduce itself, it says “Ribbit! Ribbit!”

青蛙无疑是比王子更简单的生物。 实现其行为很容易。 每当我们要求青蛙自我介绍时，它都会说“兔子！ Ribbit！”

The prince not only introduces himself, but also pays attention to the things he eats. He may eat a yakisoba and everything is fine. But as soon as he eats a pizza, he follows the arrow called ate pizza.

王子不仅自我介绍，而且还注意自己吃的东西。 他可能吃了炒面，一切都很好。 但是，一旦他吃了披萨，他就跟随着箭头吃了披萨 。

It’s time to put the handlers all together.

是时候将这些处理程序放在一起了。

The model is ready. Here’s the complete code:

模型已准备就绪。 这是完整的代码：

Identical calls to the introduceYourself method return different values. The returned value depends on events which occurred in the past. It proves that the model object is stateful.

到introduceYourself方法相同的调用返回不同的值。 返回的值取决于过去发生的事件。 证明模型对象是有状态的。

The code of The Cursed Prince is on GitHub. It makes use of only basic Rosmaro features. When working on real apps, you’ll want to use more advanced techniques. Some of them include subgraphs, dynamic orthogonal regions, and the context object.

The Cursed Prince的代码在GitHub上。 它仅使用Rosmaro的基本功能。 在实际应用上工作时，您将需要使用更高级的技术。 其中一些包括子图，动态正交区域和上下文对象。

You can learn more about Rosmaro from its official documentation.

您可以从Rosmaro的官方文档中了解更多信息。

翻译自: https://www.freecodecamp.org/news/an-introduction-to-visual-automata-based-programming-in-rosmaro-100dae8eb969/

自动售货机编程