mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 11:52:40 +00:00
Code Issues Releases Wiki Activity

Review README with Zsuzsiii

Browse Source
This commit is contained in:
Kristóf Tóth 2018-05-11 11:33:50 +02:00
parent dbb50ad7b4
commit 93e892561e
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -5,9 +5,9 @@ This is the Angular frontend of TFW.
The main exposed features are our pre-implemented components based on the `src/app/services/websocket.service.ts` service. The main exposed features are our pre-implemented components based on the `src/app/services/websocket.service.ts` service.
This service provides an RxJS based communication API to the framework backend (TFW server and event handlers). This service provides an RxJS based communication API to the framework backend (TFW server and event handlers).
Another useful feature is a bunch of pre-designed layouts and dynamic switching between them. Another useful features are a bunch of pre-designed layouts and dynamic switching between them.
To learn more about the framework see the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repo. To learn more about the framework, see the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repo.
For more on creating, building and running TFW-based tutorials (not just the frontend) consult [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework). For more on creating, building and running TFW-based tutorials (not just the frontend) consult [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework).
## Components ## Components
@ -17,18 +17,18 @@ In this section we are going to explore the various pre-made components this pro
Generally these components connect to a TFW event handler running on the backend. Generally these components connect to a TFW event handler running on the backend.
Communication is handled via simpe APIs exposed by these event handlers – over TFW messages. Communication is handled via simpe APIs exposed by these event handlers – over TFW messages.
These APIs are documented in the `baseimage-tutorial-framework` repository as docstrings in the [lib/tfw/components](https://github.com/avatao-content/baseimage-tutorial-framework/tree/master/lib/tfw/components) directory (this is where the implementations of our pre-written event handlers live). These APIs are documented in the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repository as docstrings in the [lib/tfw/components](https://github.com/avatao-content/baseimage-tutorial-framework/tree/master/lib/tfw/components) directory (this is where the implementations of our pre-written event handlers live).
## Configuration ## Configuration
Most of the time it is not necessary to edit the source code of our components as you can easily customise their behaviour through the `src/app/config.ts` config file. Most of the time it is not necessary to edit the source code of our components as you can easily customise their behaviour through the `src/app/config.ts` config file.
The most notable setting available in this file is the enabling of different layouts the user and you can switch between. The most notable setting available in this file is the enabling of different layouts, which allows the user and you to switch between them.
Layouts describe which components are visible and where they are on the screen. Layouts describe which components are visible and where they are on the screen.
### Terminal (webshell) ### Terminal (webshell)
A full-fledged xterm terminal emulator based on xterm.js running right in your browser. This is a full-fledged xterm terminal emulator which runs right in your browser and is based on xterm.js.
The emulator is connected to a `TerminalEventHandler` instance on the backend over websockets. The emulator is connected to a `TerminalEventHandler` instance on the backend over websockets.
This event handler spawns a `bash` session and a `pty` (pseudoterminal). This event handler spawns a `bash` session and a `pty` (pseudoterminal).
@ -44,16 +44,16 @@ This enables you to pre-type or execute commands for the user and figure out wha
### IDE (webIde) ### IDE (webIde)
This component is a simple text editor based on ACE. This component is a simple text editor based on ACE.
It always shows all files in a given folder and allows you to switch between those files using the tabs on top. It always shows all files in a given folder and allows you to switch between them using the tabs on top.
The IDE automatically saves any changes made to the files (the interval is configurable). The IDE automatically saves any changes made to the files (the interval is configurable).
It connects to an `IdeEventHandler` instance on the backend which handles the reading/writing of files and the selection of directories as well. It connects to an `IdeEventHandler` instance on the backend which handles the reading/writing of files and the selection of directories as well.
It is also capable of dynamically displaying any changes made to these files from the terminal or any other process (this means that you always see a live view of the files). It is also capable of dynamically displaying any changes made to these files from the terminal or from another process (this means that you always see a live view of the files).
This component provides an optional 'Deploy' button, which can be configured to restart a process in supervisord. This component provides an optional 'Deploy' button, which can be configured to restart a process in supervisord.
You can enable this button by editig the `ide.showDeployButton` key of `config.ts`. You can enable this button by editig the `ide.showDeployButton` key of `config.ts`.
To configure which process should the button restart edit `ide.deployProcessName`. To configure which process the button should restart edit `ide.deployProcessName`.
### Messages ### Messages
@ -82,8 +82,8 @@ This allows you to embed your own website in the TFW frontend.
There are two ways to do this: There are two ways to do this:
If you'd like to avoid Angular you can run your own webserver on the backend and use our dashboard's `iframe`ing capabilities to include it. Should you prefer to avoid Angular you can run your own webserver on the backend and use our dashboard's `iframe`ing capabilities to include it.
To enable this feature you have to edit `src/app/config.ts` and set `config.dashboard.iframeUrl` to the route your server is listening on. To enable this feature you have to edit `src/app/config.ts` and to set `config.dashboard.iframeUrl` to the route your server is listening on.
Note that setting up a custom server is documented in the [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework) repo. Note that setting up a custom server is documented in the [test-tutorial-framework](https://github.com/avatao-content/test-tutorial-framework) repo.