How to use the CAE

If you want to use the Community Application Editor to create your own applications based on las2peer using a near real-time collaborative modelling approach, with live preview features and one-click deployment, here is how:

CAE spaces

The CAE frontend consists of widgets in a collaborative environment. Three separate spaces exist, one for modelling backend services, one for modelling frontend components (aka widgets), and one for combining these components to applications. The spaces are of similar structure, they always contain a canvas were your modelling will take place on, together with a palette of tools, a window for editing properties and widgets for storing/loading models. Additionally there is a collaborative code editor in both the front- and backend spaces and a live preview of your evolving frontend in the respective space.

Microservice Space

The backend space can be found here. Using this space, you can model and generate the code for a microservice consisting of a database schema, multiple http methods, calls to other services and more. The basic modelling workflow consists of selecting a tool in the palette and clicking into the canvas to create a node. Nodes can then be connected by selecting a tool for creating edges and dragging a line between appropriate nodes, for example connecting a table node and a column node with the "Table to Column" tool.

Use the property browser to fill in the properties different nodes have, most of them are mandatory. If all necessary connections have been made and all required properties are set you can store your model by using the persistence widget. By doing so, the code for your service is being generated and stored in a GitHub repository at this organization.

Frontend Space

The frontend space can be found here. It is basically the same as the microservice space, with the addition of a live preview widget, that will display the frontend widget you are developing as you do so. For this to work, the model has to have been stored at least once.

Application Space

The application space can be found here. It consists of a canvas and a list of stored front- and backends. They can be added to the canvas like adding regular nodes. After storing your application you can use the "deploy" button. This will build all your components and create a docker image with them, starting it in a test environment. Watch the console output displayed in the persistence widgets for errors.

If everything goes fine, the frontend of your freshly deployed service can be found here.

Note that with the current configuration of our CAE deployment only one application can be deployed at a time for testing purposes. If you deploy another application, the old one will be replaced by it.