User Interface Developer Guide

User Interface

Overview

The User Interface enables the interaction of the Online Bidding Process with a graphical interface. The UI provides the user with three basic actions

  • Create a new Agent or edit the existing one
  • Create a bidding and interact with ongoing biddigs
  • Create a default offer for a selected good or edit an existing offer

In order for the user to use the User Interface of Online Bidding Process he must log in through the EFPF Portal.


Design and Architecture

The front-end was implemented with the Angular framework in Typescript. For the graphical design Angular Material was used. The sign in functionality was implemented with the usage of JSON Web Token (JWT) in the back-end.

The front-end communicates with the rest API of the Agent Deployer when the user creates or edits an Agent. The Agent Deployer then invokes a Company creation at the Agent Makrketplace.

Figure 1. UI-Agent Deployer-Agent Marketplace communication

After an Agent has been created, a bidding can be created by a requester. The Matchmaker will respond with the available suppliers who can participate in this bidding. The bidding information will be send to the back-end and saved to a database. The back-end was impemented in Node.js and Express which communicate with a MongoDB instance. All the biddings, either ongoing or completed are saved to the database. In this way the users can see all the ongoing and past biddings. Not all biddings are visible to all users. The requesters can see only the biddings they created and the suppliers can see only the biddings which the matchmaker said can participate.

Figure 2. MEAN Stack Communication


Components

The table below contains the technology used for the development of each User Interface architecture component.

Component Technology
User Interface Angular
Graphical Design Angular Material
Sign in JSON Web Token
Server side APIs Node.js - Express
Database mongoDB

Previous