3d inventory

• 3d inventory
  • About project
  • Motivation
  • Technology stack
  • Demo
  • Data Model
    • Logical model
    • List devices
    • Models
    • Attributes
    • Attribute Dictionary
    • Connections
  • Run
  • Deploy
    • Google Cloud
  • Json server
  • APIs repos
  • Contributing
  • Next todo

About project

Project create ✨3d inventory✨— solution that allows you to build a spatial and database representation of yours datacenters

Project contain three repos:

• ⚓ https://github.com/karol-preiskorn/3d-inventory-angular-ui
• ⚓ https://github.com/karol-preiskorn/3d-inventory-mongo-api
• ⚓ https://github.com/karol-preiskorn/3d-inventory-oracle-api

Motivation

I'm programming to incorporate database systems. This project covers relevant topics and issues related to create simple and efficient platform for IT inventory.

Technology stack

• Angular 17+ - as a Corp framework.
• Bootstrap 5.3+ - logic for insert UI data
• tree.js 163+ - as best graph framework.
• MongoAtlas|Oracle - I want in this project try different solution and different data structure and storage datamodels relational and noSQL.
• REST - prepared API in use in Swagger.
• Podman --> Google Cloud as containers

Demo

Demo 3d inventory use Angular and three.js framework for graphics representation.

This project build from this example contain three.js in Angular Tutorial to render 3D Cube in Angular + Three.js.

Data Model

This is implementation parametric generic attribute class. All attributes for Devices, Models and Connections are stored in this model.

Parameters types are defined in Attribute Dictionary.

In Attributes are stored values defined in Attributes Dictionary for Devices, Model and Connections. Attributes Dictionary are defined for specyfice parameters this entities.

Logical model

List devices

Models

Attributes

Attribute Dictionary

Connections

Run

git clone https://github.com/karol-preiskorn/3d-inventory-angular-ui.git
cd 3d-inventory-angular-ui
npm install
npm run start

or run separately json-server and ui

npm run start:json-server
npm run start:ng

Goto in browser http://localhost:4200

Deploy

https://angular.io/guide/deployment

Build in first terminal: ng build --watch in npm alias:

npm run build

Google Cloud

tbc

Json server

For testing UI API run jsonserver.

In npm run script:

"jsonserver:devices": "json-server --watch devices.json"

Server url:

baseurl = 'http://localhost:3000';

Used by .env service this.environmentServiceClass.getSettings('BASEURL').

APIs repos

• Oracle 3d-inventory-oracle-api
• Mongo Atlas ✨ 3d-inventory-mongo-api

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. Not forget about code guide-lines.

Next todo

• connection between showing 3d and defined devices.
• build interfance to Mongo Atlas
• Set position and model in data ans show this data in 3d.
• Show attributes of DEVICES, MODELS and CONNECTIONS. Waiting for MongoDB|Oracle API.
• Generate FLOOR
• as array of square (x, y, h)
• Use Mongo to strore JSON data. (starting)
• Docker -> serve application in Github Pages --> AWS EC2
• Use Dev container in GitHub for development.
• Recognize Grunt/Glup to CI/DI use in this project.
• Add actual tasks form GitHub during build in README.md.
• Add light/dark theme switch in UI
• Use https://formly.dev/ ?
• Create blog on GitHub Pages or use https://ultimasolution.pl