Source code for WebGME components; to be used in conjunction with WebGME Seminar tutorials.

To follow the tutorial the following dependencies need to be installed:

To host a webgme server:

• https://nodejs.org/en/ (LTS is preferred)
• https://www.mongodb.org/downloads#production (>=2.6.0)
• https://git-scm.com/downloads

After mongodb has been installed, start mongod (mongo deamon) at the default port 27017 and leave it running throughout the tutorial:

%Path\to\mongod.exe% --dbpath %Path\to\database\root\directory%

webgme-cli (v2.0.0), the tool for creating new webgme components (plugins, decorators, visualizers), needs to be installed globally as a node-module. Use the following command:

npm install -g webgme-cli

After installation check the version by entering webgme --version

The debug tools used during the tutorials:

• nodemon npm install -g nodemon
• livereload npm install -g livereload

N.B. livereload requires python 2.7 to be installed and available in path.

During the live tutorial we will use the IDE webstorm (30 days trial version is available), an open source alternative is atom.

The repository is broken down into different sessions. Each session contains a README.md with an outline of what the session will cover. The folders _session*/FSM contain the files in the repository after the session has been completed.

When following the tutorial, it is recommended to start from the root of the repository, i.e. where this README.md file resides, and work from the generated FSM folder.

The goal of these tutorials is (1) to become familiar with using the webme-cli tool for creating components, and more importantly, (2) how to implement these components.

• The first tutorial covers how to initialize a repository and get the server running. During the live session a small meta-model for finite-state machines will be built up, as well as an example instance model.

• In the second tutorial, a model transformer - a WebGME plugin - will be written. It will use the model api (core-API) together with the FSM meta-model to gather the needed data to create a simulator class in javascript. This simulator will be saved back to the model and used in later sessions.

• In the third tutorial, a decorator will be written, which defines how the model nodes are displayed for the user. Our decorator will inherit from the default ModelDecorator, and we will extend it to display a) the node's 'result' object, and b) if the result object is up-to-date. It will also provide a button for invoking the plugin from the previous tutorial.

• In the fourth tutorial, a visualizer will be written, allowing users to access properties and artifacts of the models, and dynamically visualize the state of the model.

• In the fifth tutorial video, we see how an existing model (and meta-model) can be attached to a new WebGME project as a library, allowing users to extend a modeling paradigm and build upon the instance models, without modifying the original model/meta-model.