BX-bot UI

Note: This project is very much work in progress and not safe for production.

What is BX-bot UI?

BX-bot UI is an Angular app (and learning journey!) for administering BX-bot.

Although being developed as a 'real-world' app, the code tries to showcase different features of Angular and TypeScript. It's not meant to be an Angular 101 tutorial - the Angular Documentation does a far better job!

Installation Guide

The Docker way

If you want to just play around with the UI, Docker is the way to go.

1. Install Docker on the machine you want to run the app.
2. Fetch the BX-bot image from Docker Hub: docker pull gazbert/bxbot-ui:0.0.1
3. Run the Docker container: docker run --name bxbot-ui-0.0.1 -it --rm -p 4200:4200 gazbert/bxbot-ui:0.0.1
4. Open a browser and go to: http://localhost:4200
5. You can stop the container using CTRL-c

The current Docker image is not a release, but rather a rolling development version of the UI...

The manual way

You'll need node.js installed to build and run the app - it's being developed on 12.22.x.

1. Install the Angular CLI globally: sudo npm install -g @angular/cli
2. Clone this repo locally.
3. Change directory to the root of the project.
4. Run npm install to install the dependencies - you'll only need to do this once, unless the versions are updated in the package.json
5. To start the app: npm start
6. Open a browser and go to: http://localhost:4200
7. To stop the app, CTRL-c from the command line.

Build Guide

Follow the instructions in the The manual way section if you've not already done so.

The project uses Angular CLI commands to build, test, and run the app.

Building the App

1. Run npm run build to compile the application into the dist output directory.

Jasmine Unit Tests

The app has behaviour-driven unit tests written using the excellent Jasmine framework.

1. To run the tests once: npm run test:once
2. To continuously run the tests in the background using Karma: npm test - Karma will monitor code changes and trigger re-running of the tests.
3. To stop Karma, CTRL-c from the command line.

Protractor End-to-End Tests

The app has e2e tests written using Protractor.

1. To run the tests once: npm run e2e. It's usually best not to have the app running at the same time.

TSLint

The build has a TSLint script that checks for code readability, maintainability, and functionality errors. The tslint.json file contains the linting rules.

1. To run the linter: npm run lint

Configuration

The app uses Angular's In Memory Web API as a replacement backend for development and local testing. The API config configuration options are set in app.module.ts.

The application config is in JSON format and lives in the in-memory-data.service.ts file.

Contributing

Issues and new features are managed using the project Issue Tracker - submit bugs here.

You are welcome to take on new features or fix bugs! See here for how to get involved.

Coming Soon

• Integration with BX-bot.
• A new 'Runtime' screen tab for displaying the bot's status, stopping/restarting, and viewing/downloading the latest log file.

Credits

This app started life as the Angular 4 QuickStart app and was later migrated to use the Angular CLI. It took (a lot of) inspiration from the following:

• The official Angular Tutorial and Angular Style Guide.
• Scotch tutorials by Jecelyn Yeen.
• Lots of insightful articles by (former) Angular dev Victor Savkin.
• Juri Strumpflohner's Angular blogs.
• Blog posts by Thoughtram.
• A great tutorial for adding JWT authentication to your Angular app by Rich Freedman.