A high level of transparency across the supplier network enables faster intervention based on a recorded event in the supply chain. This saves costs by seamlessly tracking parts and creates trust through clearly defined and secure data access by the companies and persons involved in the process.
This application serves as a user entry point to the Catena-X network.
It's written in Typescript based on the Angular
framework.
We decided on using Angular because of two important aspects.
Firstly, Angular comes with strict guidelines
, which makes it harder to start working on for new developers, but for established developers it is easy to start working with
.
Secondly, Angular scales
perfectly in the long run. Because of the restricted possibilities and stricted guidelines it is hard to implement multiple solutions for the same problem. e.g. Storing data or routing.
With that in mind it made sense it chose Angular for an open source
project.
Source files are exposed statically through the NGINX web server.
"Visualisation of traceability" is one of our most important feature, but once was one of our biggest problems.
We wanted to achieve something that is visually pleasing
, is easy to use
and performs
very good in a browser application
.
Our first approach was to use HTML canvas. But it turned out it is hard to perform accurate actions inside a canvas. That is why we decided on using the D3 library.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
Because it uses SVGs, we knew it will perform great. And we are able to have pinpoint accuracy when it comes to user actions.
Clone the source locally:
$ git clone ${path}
$ cd product-traceability-foss-frontend
If you're using angular for the first time, run npm install -g @angular/cli
to install the angular command-line interface.
This project was generated with Angular CLI version 13.3.6.
Angular CLI is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configurations and building tools like TypeScript, Webpack, and so on.
After installing Angular CLI, you'll need to run one command to generate a project and another to serve it using a local development server to play with your application.
Find here documentation to support you during the development and configuration of the app.
Follow these instructions: GIT-CHGLOG
You can generate a changelog when running git-chglog -o CHANGELOG.md
Please find here some important information about the app authentication.
This architecture gives you a roadmap and best practices to follow when building an application so that you end up with a well-structured app.
These are the best practices recommended to avoid vulnerabilities in your application.
These guidelines are defined to maintain homogeneous code quality and style. It can be adapted as the need arises.
New and old developers should regularly review this guide to update it as new points emerge and to sync themselves with the latest changes.
A detailed explanation of how to use the application.
Attributes in Angular template should be properly ordered by groups:
*
- Structural Directives[]
- Attribute Directives or Input parameters()
- Event listeners- All other attributes
Some VSCode extensions that might improve your coding experience :)
- Angular files
- Angular language service
- Angular schematics
- Auto rename tag
- Color info
- Color picker
- CSS peek
- Code spell checker
- Debugger for firefox
- Document this
- ESlint
- HTML CSS support
- Import cost
- Indent-rainbow
- JavaScript code snippets
- Material icon theme
- npm
- Open browser preview
- Path intellisense
- Prettier
- Stylelint
- Tailwind CSS intellisense
- TODO highlight
- TODO tree
- Version lens
- Visual Studio IntelliCode
- Yaml
- Docker with docker-compose
Keycloak can be started through:
yarn env:mock
On the first Keycloak start it should be properly configured.
By default, it would be available at http://localhost:8080
To get to the configuration section please click on Administration Console.
Default user/password is admin
/admin
.
Now you can start the configuration.
Create a new Realm mock
and select one.
In Realm Settings
(from sidebar) -> Security Defenses
:
Clear X-Frame-Options
Set Content-Security-Policy
to frame-src 'self'; object-src 'none’;
In Clients
(from sidebar)
- Create a new client
catenax-portal
- Edit
catenax-portal
- Set
Valid Redirect URIs
to*
Web Origins
to*
- Set
In Roles
(from sidebar):
- Add next roles:
user
admin
supervisor
In Users (from sidebar):
- Create user
default-user
with email, first name and last name, then assign to ituser
role forcatenax-portal
client and set a password (disable temp password option) - Create user
default-admin
with email, first name and last name, then assign to itadmin
role forcatenax-portal
client and set a password (disable temp password option) - Create user
default-supervisor
with email, first name and last name, then assign to itsupervisor
role forcatenax-portal
client and set a password (disable temp password option)
All done!
TBD
For now, we are following the angular guidelines which can be found here: Angulars how to contribute
We are using the GitHub Flow for our branching system.
The general idea behind this approach is that you keep the main code in a constant deployable state.
You start off with the main branch, then a developer creates a feature branch directly from main.
After the feature is developed the code is reviewed and tested on the branch.
Only after the code is stable it can be merged to main.