Go to file
2018-05-10 16:20:58 +02:00
docs Rename webide -> ide 2018-04-20 17:33:06 +02:00
lib Add setup.py to allow local pip installs of tfw 2018-05-10 16:20:58 +02:00
nginx Fix nginx redirecting to port 8888 on platform on /webservice (no trailing slash) 2018-05-09 17:01:29 +02:00
supervisor Remove tfw server init from baseimage (part of child contract now) 2018-04-04 17:48:49 +02:00
.drone.yml Add .drone.yml 2018-04-16 17:10:28 +02:00
.gitignore Implement frontend dependency management 2017-12-11 17:37:21 +01:00
.gitmodules Add submodule with remote tracking 2018-03-09 17:41:23 +01:00
.pylintrc Add .pylintrc 2018-04-13 16:28:30 +02:00
bashrc Force bash history to be flushed before executing commands 2018-04-18 13:19:51 +02:00
Dockerfile Add setup.py to allow local pip installs of tfw 2018-05-10 16:20:58 +02:00
LICENSE Add LICENSE file and include copyright notice in source files 2018-04-03 14:49:14 +02:00
README.md Review README with Zsuuuuuzsi 2018-04-25 16:10:12 +02:00
requirements.txt Upgrade python packages 2018-03-15 16:11:35 +01:00
setup.py Add setup.py to allow local pip installs of tfw 2018-05-10 16:20:58 +02:00
VERSION Add VERSION file. First official TFW release 2018-03-27 13:36:25 +02:00

baseimage-tutorial-framework

This is the beating heart of TFW the Docker baseimage containing the internals of the framework.

Every tutorial-framework based challenge has a solvable Docker image based on this one: their Dockerfiles begin with FROM eu.gcr.io/avatao-challengestore/tutorial-framework. Note that TFW is not avaliable on Docker Hub due to legal reasons and is only accessible through local builds (don't worry, we've got you covered with build scripts in the test-tutorial-framework repo).

This document explains the general concepts of TFW and should be the first thing you read before getting started with development.

For more on building and running you should check the test-tutorial-framework repo.

The framework

The goal of the tutorial-framework is to help content developers in creating interactive tutorials for the Avatao platform.

To make this possible TFW implements a robust messaging system and provides several pre-written components built upon it, such as a file editor and a terminal (both running in your browser).

The foundation of the whole framework is the messaging system connecting the frontend with the backend. Frontend components use websockets to connect to the TFW server, to which you can hook several event handlers defining how to handle specific messages.

TFW architecture

Event handlers

Imagine event handlers as callbacks that are invoked when TFW receives a specific type of message. For instance, you could send a message to the framework when the user does something of note.

Event handler allow you to define actions triggered on the backend when the user presses a button on the frontend or moves the cursor to a specific area, etc.

Event handlers use ZeroMQ to connect to the framework. Due to this they are as loosely-coupled as possible: usually they are running in separate processes and only communicate with TFW through ZMQ.

Our pre-made event handlers are written in Python3, but you can write event handlers in any language that has ZeroMQ bindings (this means virtually any language).

This makes the framework really flexible: you can demonstrate the concepts you want to in any language while using the same set of tools provided by TFW. Inside Avatao this means that any of the content teams can use the framework with ease.

FSM

Another unique feature of the framework is the FSM finite state machine representing the state of your challenge. This allows you to track users progressing with the tasks you've defined for them to complete.

For instance, you could represent whether the user managed to create a malicious user with a state called user_registered and subscribe callbacks to events regarding that state (like entering or leaving).

You could create challenges that can be completed in several different ways: imagine a state called challenge_complete, which indicates if the challenge is completed. Several series of actions (triggers) could lead to this state.

This enables you to guide your users through the experience you've envisioned with your tutorial. We can provide a whole new level of interactivity in our challenges because we know what the user is doing. This includes context-dependent hints and the automatic typing of commands to a terminal.

Frontend

Note that our frontend implementation is written in Angular. It is maintained and documented in the frontend-tutorial-framework repository.

Messaging format

The framework uses JSON messages internally and in exposed APIs as well. These messages must comply with some rules. Don't worry, we are not too fond of rules around these parts.

The TFW message format:

{
    "key: "some identifier used for addressing",
    "data":
    {
        ...
        JSON object carrying anything, preferably cats
        ...
    },
    "trigger": "FSM action"
}
  • The key field is used by TFW for addressing and every message must have one (it can be an empty string though)
  • The data object can contain anything you might want to send
  • The trigger key is an optional field that triggers an FSM action with that name from the current state (whatever that might be)

Where to go next

Most of the components you need have docstrings included (hang on tight, this is work in progress) refer to them for usage info.

To get started you should take a look at the test-tutorial-framework repository, which serves as an example project as well.