AHBesser (AHB-Tabellen) Web Application

ℹ️ Overview

Production

The service is not production-ready yet. We will provide a production version soon and add the link here.

Stage

You can access the stage version of the application on ahb-tabellen.stage.hochfrequenz.de.

This is our test environment where we deploy the latest changes to test them before deploying them to production.

🏛 Architecture

flowchart TD
    A("edi-energy-mirror:
    raw documents (PDF, docx)") -->|kohlrAHBi🥬| B("machine-readable-
    anwendungshandbücher")
    B -->|sync upload🔄| C("Azure Blob Storage")
    C <--> D("AHBesser
    (AHB tables)")

Loading

📂 Project Structure

.
├── azure-mock/
    ├── data/                     # contains AHB data stored in machine-readable_anwendungshandbuecher repository
    └── upload-documents.ts       # script to upload data/ directory to azure blob storage
├── src/
    ├── app/
        ├── core/
            └── api/              # API config files
        ├── environments/         # config files for dev/stage/prod
        ├── features/             # AHB and landingpage related views and components
        └── shared/               # global components (header, footer, logo, etc.)
    ├── assets/                   # logo, favicon, etc.
    ├── server/
        ├── controller/           # contains code to handle incoming http requests concerning AHB and FormatVersionen
        ├── infrastructure/       # contains code to manage routing of API endpoints and interact with azure blob storage
        └── repository/           # contains CRUD operations to register AHB/FormatVersionen related routers
    ├── index.html                # entry point for the angular web application
    ├── main.ts                   # bootstraps the angular web application
    ├── server.ts                 # sets up backend server
    └── styles.scss               # imports Tailwind base styles, component styles and utility classes
└── ⚙️ <several config files>

⚙️ Setup

Make sure you have the latest version of node.js installed (for instance via the node version manager nvm).

Download and install Angular CLI using the npm package manager (comes with node.js):

$ npm install -g @angular/cli

[Windows] Add node.js to your PATH environment variable:

• run $ npm config get prefix to retrieve the directory where npm will install global packages (e.g. C:\Program Files\nodejs)
• open "Edit the system environment variables" and navigate to "Environment Variables" -> "System Variables" -> "Path"
• edit "Path" and add the node.js directory path
• restart your PC and check if Angular CLI has been installed successfully by running $ ng --version

Note

Be sure to run $ npm ci during the initial setup to install all required dependencies.

Starting the app via Docker 🐋

Create an .env file in the root directory and paste the contents of the .example.env file.

While having Docker Desktop up and running, start the docker container using

$ docker compose up -d --build

and navigate to http://localhost:4000/.

Starting the app using Angular CLI

To start a dev server, run

$ ng serve

and navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

In order to start both the dev server as well as the server-side watch process to access the blob storage, run

$ npm run start

For further commands, refer to the scripts located in package.json.

🛠️ Build & Development

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

🔗 Links

• Generate machine-readable files from AHB documents with KohlrAHBi 🥬.
• Official edi@energy AHB documents are provided by BDEW at edi-energy.de.
• To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.