MBE Nodes. The Mongo Backend Nodes

This is an extensible, angular-based web frontend that leverages the server side JSON schemas and tree structure of MBE to be used on the client side.

Development-wise the project features:

• a Python CherryPy-driven and MBE-enabled web server
• a full Angular implementation of a tree-based interface to MBE.
• completely written in Typescript (development typings managed by tsd)
• ES 6 style modules import "angular-schema-form-dynamic-select"
• module management: the excellent SystemJS/JSPM (RequireJS is no longer used)
• development dependencies are met using npm (Bower no longer used)
• build framework is gulp1
• test framework is karma (and mocha)
• example in TypeScript that uses client-side transpiling with traceur and SystemJS module loading

1 The build just adds the template cache, not UMD wrapping or minification. The framework is, even though it is can be used in any way, primarily thought of as a TypeScript library, see the example.

In this document, "sudo" is included only when run on linux hosts.

DEMO

There is a running demo at: https://demo.optimalbpm.se:8080/

Prerequisites

• A local MongoDB installation
• MBE and its prerequisites installed
• GIT
• npm (to install Bower)

Installation

Either clone or fork the entire repository, and do your own implementation upon that or just pick the parts of the application you need and copy them where you want them.

Either way, to use the entire thing:

To install MBE on ubuntu(windows user, look att the MBE instructions :

sudo apt-get install mbe

To install the npm:

• on windows, go here: https://nodejs.org/download/
• on linux, do: sudo apt-get install npm

Clone the repository:

git clone https://github.com/OptimalBPM/mbefe.git

In the newly created mbe-nodes-directory, to install the npm-packages:

sudo npm install

To install the web client dependencies:

jspm install

To install TypeScript typings(useful when developing TypeScript):

tsd install

Running the example

If you haven't already, install Python 3.

sudo apt-get install python3

Satisfy the python pip requirements,

sudo pip3.4 install -r example/requirements.txt

Finally, run the example server:

python3 example/cherrypy_server.py 

It should then be possible to run the example/cherrypy_server.py and browse into https://127.0.0.1:8080.

MBE nodes explained

The web server

MBE is supposed to be the a back end of a Python 3 web server application. So if you need a standalone server serving you application(like if you were to develop a BPM system), all the boring parts are now done. You can immediately start building your highly advanced web site.

To start it, see to it that the prerequisites are satisfied. Then simply run the example/cherrypy_server.py and browse into to https://127.0.0.1:8080.

The example/cherrypy_server.py automatically initiates the database on when run by invoking init database(). This is great for initial testing, as everything is reset every start.

When started, just surf to https://127.0.0.1:8080 and click "Administration" and the tree will appear.

The web client

The client is using:

• AngularJS framework
• Angular-ui-tree as a tree component.
• The angular-schema-form for editing and validation
• angular-schema-form-dynamic-select to populate drop downs.
• Some custom code in example/static/views/nodesnodes.js to connect to the backend.

SchemaTree

This is a directive in MBE nodes, schema-tree, that can be used to generate visual trees with CRUD-functionality from outside MBE nodes, without the nodes directive. This can be used against any data source, just include the .ts-file and add the schematree.html to the template cache. See the build process.