Quick Start

Learn how to create a system in 5 minutes

In this quick start, we will create a system, test it and run it client and server side.

What is a system ?

With System Designer you create in fact a system and not an application. But what is a system ?

A system:

  • is defined by a model,
  • is composed by components and
  • reacts to events with behaviors.

What is the system that we will create ?

We want to create a system that will show the name of the father of Luke Skywalker.

Now let's define a bit our system with the informations we know about the system (if you have watched Star Wars):

  • Luke Skywalker is a Jedi,
  • Luke Skywalker father is Dark Vador and
  • Dark Vador is also a Jedi.

From that we see that:

  • we have one model: Jedi,
  • a Jedi has a least for properties firstName and lastName,
  • a Jedi has a link father to another Jedi,
  • we have 2 Jedis: Luke Skywalker and Dark Vador and
  • Luke Skywalker has for father Dark Vador.

Now let's create this system.

Create a system

  • click on the + button on the left toolbar,
  • set StarWars as name,
  • click on Create button,
  • a new system is now created and appears in the Systems list.

Create a schema

What is a schema ?

A schema helps you to define your model. A schema generates a model based on very simple informations. You can then edit the generated model.

  • click on the Schemas tab,
  • click on the + button on the left toolbar,
  • set Jedi as name,
  • click on Create button,
  • a new schema is now created and appears in the Schemas list,
  • click on it,
  • update the MSON with this:
{
   "_id": "1e378193da16eef",
   "_name": "Jedi",
   "_inherit": [
     "_Component"
   ],
   "firstName": "property",
   "lastName": "property",
   "father": "link",
   "fullName": "method"
 }
  • save (by clicking on the icon with the arrow).

What can be defined in a schema ?

  • Use property for defining a property.
  • Use link for defining a link between models.
  • Use collection for defining a collection of components.
  • Use method for defining a method.
  • Use event for defining an event.

What happens when you save a schema ?

A model will be automatically generated based on the informations you set in the schema.

Edit a model

What is a model ?

A model is the UML representation of the class that you will use in your system. You can edit these models and update many informations (type, default value, ...).

  • click on the Models tab,

What are the values set by default ?

  • all properties have type any: they can have all kind of type,
  • all links have _Component type: they can be linked to any kind of object and
  • all methods have one parameter param of type any and they return a value of type any.
  • click on the Jedi model,
  • update the MSON with this:
{
  "_id": "1a3a2150b31c099",
  "_name": "Jedi",
  "firstName": {
    "type": "string",
    "readOnly": false,
    "mandatory": true,
    "default": ""
  },
  "lastName": {
    "type": "string",
    "readOnly": false,
    "mandatory": true,
    "default": ""
  },
  "father": {
    "type": "Jedi",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "fullName": {
    "result": "string"
  }
}
  • save.

What has be done ?

In this example, we have:

  • set the type of firstName to string,
  • set the type of lastName to string,
  • set the type of father link to Jedi (the father of a Jedi is a Jedi) and
  • remove all the parameter definition of the fullName method.

Add a behavior

What is a behavior ?

A behavior is a method that is executed when we change the state of a component or invoke one of its method.

  • click on the Models tab,
  • click on fullName method,
  • you navigate to the Behaviors tab,
  • click on the fullName element,
  • update the code with this:
function fullName() {
  let result = this.firstName() + ' ' + this.lastName();
  return result;
}
  • save.

Create components

What is a component ?

A component is the instance of one class of your model. You can define them graphically but you can of course create them with code.

  • click on the Components tab,
  • click on the + button on the left toolbar,
  • a new component is now created and appears in the Components list,

What are the informations set by default ?

All the value of the attributes, links or collections are set with the default property value of the model.

  • click on it,
  • update the JSON with this:
{
  "_id": "vador",
  "father": "",
  "firstName": "Dark",
  "lastName": "Vador"
}
  • save,
  • click again on the + button on the left toolbar,
  • a new component is now created and appears in the Components list,
  • click on it,
  • update the JSON with this:
{
  "_id": "luke",
  "father": "vador",
  "firstName": "Luke",
  "lastName": "Skywalker"
}
  • save.

Add code on the start method of the system

The start method of your system is the entry point of your system. It is there that you put the business logic of your system.

  • click on the Behaviors tab,
  • click on StarWars on the right,
  • click on the element who has got a start method,
  • update the code with this:
function start() {
  let luke = null,
      logger = null;

  // get logger component
  logger = this.require('logger');
  
  // get luke component
  luke = this.require('luke');
  
  // get the name of the father of Luke
  logger.info(luke.father().fullName());
}
  • save.

Test the system

  • click on the run button on the left and
  • click on the Logs tab and you will see the result.

Use your system client side

Version compatibility

This feature is only available on the Windows 10, macOS and HTML5 versions of System Designer.

  • click on the export button,
  • select HTML,
  • your system will be exported in a HTML file,
  • load the page and
  • open the console of your browser to see the result.

Use your system server side

Version compatibility

This feature is only available on the Windows 10, macOS and HTML5 versions of System Designer.

  • click on the export button,
  • select Node.js,
  • your system will be exported in a JavaScript file,
  • save the file on your server project,
  • in your project, install this package to run your system:
npm install system-runtime --save
  • run your system:
node StarWars.js

Quick Start

Learn how to create a system in 5 minutes