自动售货机编程_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 --saveThen, 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/
自动售货机编程
相关文章：
JAVA设计模式之命令模式
将请求封装成一个对象，从而使你可以用不同的请求对客户进行参数化；对起那个请求进行排队或记录请求日志。 命令模式告诉我们可以为一个操作生成一个对象并给出它的一个execute(执行)方法。Command模式为系统架构带来效果： 实现请求一方&#…
vb.net与matlab的混合编程
首先,使用deploytool工具或者命令行将matlab的m文件编译成类,结果产生动态链接库.dll文件和一些c#代码的类. 第二步,将这些dll文件导入进去,并使用一些win32api函数,因为此m文件会产生figure窗口,这些api函数将此figure窗口嵌入到vb程序窗体里面. 代码: Imports SystemImports …
java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学This post was originally published on Coder-Coder.com.该帖子最初发布在Coder-Coder.com上 。 If you’re a beginner coder, this guide is for you!如果您是初学者，那么本指南适合您！ Here is what this guide covers:本指南涵盖…
PC机安装android apk | adb install -r
PC 下载 *****.apk 通过adb直接安装到android系统 转载于:https://www.cnblogs.com/galoishelley/p/4353423.html
微信小程序之apply和call ( 附示例代码和注释讲解） apply call bind
微信小程序开发交流qq群 173683895 相同点：作用是一样的，它们能劫持另外一个对象的方法，继承另外一个对象的属性； js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文&#…
(转)@ContextConfiguration注解说明
场景：学习spring实战中相关的单元测试 1 正常使用 ContextConfiguration Spring整合JUnit4测试时，使用注解引入多个配置文件 1.1 单个文件 ContextConfiguration(locations"../applicationContext.xml") ContextConfiguration(classes Simple…
ios pusher使用_如何使用JavaScript和Pusher构建实时评论功能
ios pusher使用by Rahat Khanna通过拉哈特汉娜 如何使用JavaScript和Pusher构建实时评论功能 (How to build a Live Comment feature using JavaScript and Pusher) These days “Social” has become the buzzword and we all want our apps to be the center of these amazi…
OpenDigg前端开源项目月报201704
由OpenDigg 出品的前端开源项目月报第一期来啦。我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目，方便前端开发人员便捷的找到自己需要的项目工具。 reactide React web应用开发的第一个专用IDE redux-offline 持久性Redux存储 react-loadable 用…
ubuntu 14.04 使用apt-get出现如下问题解决办法
Some packages could not be installed. This may mean that you haverequested an impossible situation or if you are using the unstabledistribution that some required packages have not yet been createdor been moved out of Incoming. 使用aptitude这个代替apt-get …
java通用象棋游戏_在通用国际象棋界面周围模拟GraphQL包装器
java通用象棋游戏The Universal Chess Interface (UCI) has been around a long time and used by many chess engines. What does GraphQL bring to the mix?通用国际象棋界面(UCI)已经存在了很长时间，并且被许多国际象棋引擎使用。 GraphQL带来了什么？…
表单高级应用和语义化
type"hidde" 隐藏域 disable 禁用 什么是表单语义化 符合W3C规范 语义化的标签 结构合理、代码简洁 分组<fieldset><legend>标题</legend> </fieldsrt> 关联<lable for"id"></lable>转载于:https://www.cnblogs.com/G…
modelsim中一个神奇又容易忽视的问题
最近在用modelsim对设计进行仿真的过程中发现了一个非常有趣的问题。接下来，让我们跟随着一个设计的仿真来发现问题的原因所在。首先，以调用基于IP核的加法器为例。加法器IP核的参数设置如下： 设计代码如下： /*******************…
html页面引入另一个html页面
微信小程序开发交流qq群 173683895 正文： 上源码： <!DOCTYPE html> <html><head><meta charset"utf-8" /><script src"js/jquery.js" type"text/javascript" charset"utf-8">…
javascript晚绑定_JavaScript的应用，调用和绑定通过托管野餐来解释
javascript晚绑定by Kevin Kononenko凯文科诺年科(Kevin Kononenko) JavaScript的应用，调用和绑定通过托管野餐来解释 (JavaScript’s apply, call, and bind explained by hosting a cookout) If you have ever been in charge of operating the grill at a famil…
13.angular时间
<!DOCTYPE html><html ng-app"myApp" ng-controller"myCtrl"><head lang"en"> <meta charset"UTF-8"> <title>T38-angular时间</title> <script src"js/angular.js" type&…
【SICP练习】110 练习3.23
练习3-23 原文 Exercise 3.23. A deque (“double-ended queue”) is a sequence in which items can be inserted and deleted at either the front or the rear. Operations on deques are the constructor make-deque, the predicate empty-deque?, selectors front-deque …
js页面跳转或重定向
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 页面重定向推荐的4种方式： <!DOCTYPE html> <html><head><script type"text/javascript">window.location.href"https://blog.c…
javascript组件_是的，JavaScript运行Swift。 无论如何都要构建您的组件库。
javascript组件Here’s a question I’ve heard a few times recently:这是我最近几次听到的一个问题： “What if we create a component library in React/Vue/Angular/whatever and a new component technology replaces it?”“如果我们在React / Vue / Angula…
结对开发--求二维数组的最大子数组
小组成员：信1201-1班 黄亚萍 信1201-1班 袁亚姣 一、题目要求 程序要使用的数组放在一个叫 input.txt 的文件中, 文件格式是: 数组的行数, 数组的列数, 每一行的元素, (用逗号分开) 每一个数字都是有符号32位整数, 当然, 行数和列数都是正整数。 二、设计思路 在…
实验二 164 张增进
一、实验目的 掌握基于覆盖理论与基本路径的基本白盒测试方法和实践 二、实验要求 运用逻辑覆盖测试的覆盖准则设计被测程序的测试用例，并运行测试用例检查程序的正确与否，给出程序缺陷小结。 三、实验内容 根据各位同学自己的被测程序，分别作…
微信小程序之录音与播放功能（完整示例demo）
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 源码简介： 点击按钮实现相应效果 ↓↓↓↓↓↓↓↓ //test.wxml <button bindtapstart>开始录音</button> <button bindtapplay>播放录音</butt…
为什么您不需要精通数学就可以学习编程
by Pau Pavn通过保罗帕文(PauPavn) 为什么您不需要精通数学就可以学习编程 (Why you don’t need to excel at math to learn how to program) This is probably one of the greatest misconceptions I’ve ever heard.这可能是我听过的最大的误解之一。 If you want to prog…
Android动态加载jar/dex
http://www.cnblogs.com/over140/archive/2011/11/23/2259367.html 加载jar boolean bool new File("/sdcard/test.jar").exists();DexClassLoader cl new DexClassLoader("/sdcard/test.jar", this.getCacheDir().getAbsolutePath(), null, this.getCla…
使用μJava进行变异体测试
一、环境配置mujava运行的是Java程序，Java的环境配置见EclipseJDK配置那点事。 将下载的mujava相关文件放到一个文件夹，文件夹放到C:\muJava 添加mujava环境变量CLASSPATH： C:\mujava\mujava.jar;C:\mujava\openjava.jar;C:\mujava\junit.jar…
【微信小程序之画布】一：canvas组件
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。 我们先了解一下canvas组件： wxml: <canvas classmyCanvas canvas-id"myCanvas…
JavaScript的“ this”通过成立一个高中乐队来解释
by Kevin Kononenko凯文科诺年科(Kevin Kononenko) JavaScript的“ this”通过成立一个高中乐队来解释 (JavaScript’s “this” Explained By Starting A High School Band) If you have ever been in a band, had a friend that started a band, or seen a corny 80s movie …
Ubuntu 16.04 安装Django
> pip install django1.10.3......或者:> pip3 install django1.10.3（我采用）......或者:>python3 -m pip install django1.10.3......或者:pip install -i https://pypi.douban.com/simple/ django1.10.3......如果你只安装一个版本的 Python,…
【微信小程序之画布】三：手指触摸绘画椭圆
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 功能：根据手指触摸绘画一个椭圆路径--> 起点为手指开始触摸时的坐标，终点为手指触摸结束时的坐标 效果图： 组件属性的描述在上一节中描述过了&…
ACdream 1099——瑶瑶的第K大——————【快排舍半，输入外挂】
瑶瑶的第K大Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status Practice ACdream 1099Description 一天，萌萌的妹子--瑶瑶(tsyao)很无聊，就来找你玩。可是你们都不知道玩什么。。。尴尬了一阵子ÿ…
开源贡献 计算_如何克服恐惧并为开源做贡献
开源贡献 计算Are you a new developer? Or maybe even just an old-timer who has been in a company for ten years, working on an in-house project, and now you’re thinking, “Hey, I’ve been in my box a long time. What’s new out there?” I have been like th…