3D files browser

1.

3D files browser
By: Mykola Golovach
Copyright
AMC
Bridge
©confidential.
2019, AMC Bridge
For internal
LLC use only
Copyright © 2020, AMC Bridge LLC

2.

3D files browser
3 months
Web-based 3D files browser, with authentication and admin tools where
admins can manage 3D files and users.
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

3.

Implemented Functions
Lab Work 1
Lab Work 2
Implementation of Files Storage
consists of server API and client part;
Server;
Ready Files Storage has ability to:
Creation of users management, which
The app has a web interface with the
upload;
ability to:
update;
• view users list;
get;
• create;
delete files.
• update;
• remove users.
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

4.

Implemented Functions
Lab Work 4
Lab Work 3
Creation of models management, that
consists of server API and client part;
authorization;
The app should has a web interface
with the ability to manipulate models
like creating, updating and deleting;
Implement authentication and
The app should has a web interface
with the ability to login user ;
Implement a permission to
create/update/delete users only for
Admin role;
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

5.

Technologies Used
Laboratory work 1
AMC Bridge confidential. For internal use only
Laboratory work 2
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

6.

Technologies Used
Laboratory work 3
AMC Bridge confidential. For internal use only
Laboratory work 4
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

7.

Deployment diagram
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

8.

App Architecture
Components
(user-authorization)
View
Templates
Components
(model,modeldialog)
Components
(user,user-dialog)
Service
(model-service)
Service
(user-service)
User
Controller
HTTP
Client
Models
Controller
Service
(UserService)
MS SQL
SERVER
Service
(ModelService)
Models
(user, model)
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

9.

Database relationships
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

10.

Sequence diagram (login page)
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

11.

Sequence diagram (user page)
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

12.

Sequence diagram (create model)
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

13.

Nodejs & express
1. Import URL of database server
2. Connect express, routers and сreate application object
3. Install routers to handle all requests along the route
(/file)
4. Setup connection through port(3000)
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

14.

mongoDB & mongoose
1. Connecting mongoose
4. Create connection with mongoDB
2. Creating Schema
5. Create file storage
3. Creating model and exporting it
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

15.

Angular (Implement operations with
files from service)
1. Implement adding file in database
2. Implement updating CAD file in database
3. Implement updating images in database
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

16.

Entity Framework Core (Create a
database context for MS SQL Server)
1. Creating a collection for entities that are mapped
3. Creating primary key of table.
to database tables.
4. Creating columns and adding Required
configuration.
2. Creating connection with database in Startup class.
AMC Bridge confidential. For internal use only
5. Creating relationships.
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

17.

ASP.NET Core (Implement Data
Transfer Object and AutoMapper )
1. Implement Data Transfer Objects to transfer data between application subsystems
2. Realize mapping from DTO to models
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

18.

ASP.NET Core ( Creating Generic
class Result<T> )
1. Creating generic class to return from service to controller
more advanced concept of the result
2. Example of using:
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

19.

ASP.NET Core (Creating interfaces
for services)
1. Creating IUsersService service
2. Creating IModelsService service
3. Calling method AddScoped to implement
independence
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

20.

ASP.NET Core ( Generating JSON Web
Token )
1. Creating generating JSON Web Token
2. Creating generating refresh token
3. Creating generating access token by refresh token
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

21.

Angular (Implement HttpInterceptor)
1. Creating AuthorizationService class to
2. Creating refreshToken function
implement HttpInterceptor
3. Creating addAuthHeader function
4. Implement
handleResponseError
function to handle the
errors
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

22.

Testing of project
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC

23.

Postman
1. Get the list of users
2. Create user by Admin
3. Delete user by Admin
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

24.

Postman
Authenticate user
Delete image from database
Save image in database
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

25.

Karma
Result
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

26.

XUnit
Example
Result
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

27.

Live Demo
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC

28.

Login page
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

29.

Models list page ( Unauthorized user )
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

30.

Users list page
Admin role
AMC Bridge confidential. For internal use only
Another role
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

31.

Create and update user dialog
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

32.

Create and update model dialog
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

33.

Input data validation
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

34.

Create new data
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

35.

Search and filter data
Search by tag ‘3D’
AMC Bridge confidential. For internal use only
Filter by the field ‘Name’
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

36.

Team Members
Oleksandr Ohorodnik - Team leader
Mykola Golovach - Developer
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC
|
www.amcbridge.com

37.

THANK YOU!
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC

38.

Questions
&
Answers
AMC Bridge confidential. For internal use only
Copyright © 2020, AMC Bridge LLC