gazbert / Bxbot Ui Angular
Programming Languages
Labels
Projects that are alternatives of or similar to Bxbot Ui Angular
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.
- Install Docker on the machine you want to run the app.
- Fetch the BX-bot image from Docker Hub:
docker pull gazbert/bxbot-ui:0.0.1
- Run the Docker container:
docker run --name bxbot-ui-0.0.1 -it --rm -p 4200:4200 gazbert/bxbot-ui:0.0.1
- Open a browser and go to:
http://localhost:4200
- 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 (at least node 6.9.x) installed to build and run the app.
- Install the Angular CLI globally:
npm install -g @angular/cli
- Clone this repo locally.
- Change directory to the root of the project.
- Run
npm install
to install the dependencies - you'll only need to do this once, unless the versions are updated in thepackage.json
- To start the app:
npm start
- Open a browser and go to:
http://localhost:4200
- 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
- Run
npm run build
to compile the application into thedist
output directory.
Jasmine Unit Tests
The app has behaviour-driven unit tests written using the excellent Jasmine framework.
- To run the tests once:
npm run test:once
- To continuously run the tests in the background using Karma:
npm test
- Karma will monitor code changes and trigger re-running of the tests. - To stop Karma,
CTRL-c
from the command line.
Protractor End-to-End Tests
The app has e2e tests written using Protractor.
- 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.
- 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.
To communicate with the bots for real, the app will need configuring to use BX-bot UI Server - currently work in progress.
Coming Soon
- Integration with BX-bot UI Server.
- 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 awesomeness:
- 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.