PROJECT TYPE
App Development

TECHNOLOGIES
HTML5, CSS3, JQuery, AngularJs

SERVICES PROVIDED
Layout design, Web development, Web application testing

Implementation: 

The platform is built using Microservice architecture for scalability and flexibility.

 

The Two Main Components:

  1. A front-end Service
  2. Backend Services: This is a collection of API router and API services to serve the platform

All services are containerized with an automated Cl/CD pipeline for deployments.

 

Infrastructure: 

The entire platform is hosted within Azure Cloud services and mostly utilized “Azure Container Apps”.

 

Software Development

Front-end:

The ISD front-end is built around a variety of technologies and frameworks in order to provide the needed functionalities for ease of use and design.

  • Canvas: The main and the biggest section of the front-end is the draggable canvas which Is built over Konva.js, konva Is a javascript framework that provides a 2D canvas library for draggable and resizable objects, we design the nodes to shin, blink and have shadows in some cases In respond to events.
  • Context-Menu: the platform also provides context event functionalities (i.e right-clicks), almost all objects created by the user support this. This allows us to provide an easy way for the clients to interact/modify/edit the objects.
  • Pop-Ups: The main purpose of the pop-ups is for acquiring user inputs, but they are also used to show notifications, warnings and errors.
  • Tooltip/PopOver: Almost every object in the design has a tooltip listener (Mouse over) functionality, once the user hovers using the mouse over a node, cable or HDN, a small tooltip will pop up showing extra information about that object.
  • A Side Panel: The side panel shows an overview and basic information about each sub-system; once a user hovers any node, cable or any object that belongs to a design, the panel that belongs to the design will shine (glow).

Backend:

The backend is an API cluster behind an API Router, the main APIs we provide are:

  • Processor: This is the main API that calculates the system metrics (Design needed power, cable lengths, overloads, …)
  • Inventory: This API provided the inventory needed to build a design (HDN, HAN and cable types)
  • BoM: This API generates Bill Of Material spreadsheet for the loaded design
  • User (Not Implemented): API to handle user Authz and Auths
  • Archive/Document (Not Implemented): This API provides functionality to save systems in an inventory database with version control instead of the Export/Import feature.