Quick Start

Learn how to create an application in 5 minutes

This is the quick start for System Designer v2.
If you have System Designer v1, you can read the quick start here.

In this quick start, we will:

  • create a system,
  • test it,
  • run it client side
  • and server side.

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

  • 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

  • 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

  • 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

  • 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

  • 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 an application in 5 minutes