3. UI specifications - ntlm-technologies/ntlm.TinyMessages.doc GitHub Wiki

Greater picture

TinyMessages is a very simple project meant to be one application but part of a broader solution : a new intranet. The backend of this intranet will be composed of serveral microservices. TinyMessages is just one of them. But the UI must be unique. So we expect its infrastructure and design to handle the rapid addition of other services. These services will be exposed thru APIs just like TinyMessages and rely on the same Authentication and Authorization services.

Once this project is completed another project will be offered to implement the monitoring and statistics of the very messages that are configured here :

  • Requests sent by services,
  • Logs,
  • Errors,
  • Entities, etc.

Technologies

  • HTML5,
  • CSS3 Responsive (boostrap) mobile & browser,
  • Angular 4,
  • Angular recommended design patterns and best practices (components, services, dependency injection, etc.),
  • High configurability,
  • Logical routes corresponding to entities and their relations.
  • Ajax calls to the API thru observables.
  • Recommended IDE : Visual Studio Code. But not paramount.

Versioning

Post your code in this github repository.

Documentation

We expect clear documented code : lots of other services will be added to the system and we need to be sure other developpers can take over if needed.

Design

It's an internal UI so we do not expect any thing but sobriety and a clear user experience. Creativity & straightforwardness appriciated though the latter most likely rewarded.

Maintainability

Code must be well commented, readable, ready for new features and integration of new applications than ntlm.TinyMessage.

Pages of TinyMessages

Authentication

Route : /auth/...

These pages will perform authentication requests for the benefit of the TinyMessages microservice and in the futur for the benefits of upcoming microservices : the entire intranet solution.

We expect the development of pages correponding to the authentication APIs in the most standard fashion.

Home page

When authentication is complete a navigation displays the available services. For now only TinyMessages. This "main" navigation is available all the time.

TinyMessages pages

The navigation of TinyMessages displays a navigcation made of two links :

  • Solutions,
  • Services. The default page is the Solutions page

Solutions

Route : /apps/tinymessages/solutions/

A simple text input to search solutions on keyup and links to individual solutions. A form to add a solution.

Services

Route : /apps/tinymessages/services/

A simple text input to search services on keyup and links to individual services. A form to add a service.

Solution

Route : /apps/tinymessages/solutions/123

  • Displays the solution form. Edit and Remove (confirm removal).
  • Lists the collections of the solution. Add, modify, remove these collections. Links to individual collections.
  • Displays the registrations of the solution. Add, modify, remove these registrations. A tab component might be appropriate.

Service

Route : /apps/tinymessages/services/123

  • Displays the service form. Edit and Remove (confirm removal).
  • Lists the registrations of the service. Add, modify, remove these registrations.
  • Lists the subscriptions of the service. Add, modify, remove these subscriptions.

Collection

Route : /apps/tinymessages/solutions/123/collections/123

  • Displays the collection form. Edit and Remove (confirm removal).
  • Lists the subscriptions of the collection. Add, modify, remove these subscriptions.