Building the resource booking system for the organization

INTRODUCTION

The Urgency of the project

In today's digital age, utilizing software for work and schedule management has become essential for everyone For employees frequently booking meetings and utilizing organizational resources, tracking work hours and coordinating meetings is crucial As technology advances, the methods for managing employee bookings and resources are becoming more diverse, highlighting the growing need for a centralized website that streamlines schedule management and resource booking.

Realizing that this need is more important than ever, the team decided to choose the topic "Building A Organization’s Resource Scheduling System" for organizations The main purpose:

Building a website which supports the need of booking the resources of organization and scheduling meeting events.

Problem Definition

From the current situation, we can define some major problems that we need to solve:

 The customer needs to be able to book any resource of the organization and use for personal or team event

 The customer needs to be able to book any resource of the organization and use for organization’s event

 The customer needs to be able to book any resource to support for having meetings with public user (user outside of the organization).

Proposed Solution

We need to have a system that can serve the user to interact with the calendar, book events with other partners using the resources of the organization Also, when a

2 business user have an event or meeting with user from outside the organization, booking resources needs to be provided

To book an event, partners only need the details of the user's sharing slot Our system facilitates seamless interaction with the user's sharing slot, enabling event bookings without direct contact between parties.

Objective

Building the system that connects the end user with user’s partner to book meetings with each other using the resources of the organization

Three main objectives to achieve the purpose:

- A user can book the resources of the organization to support for hosting personal meeting, team meeting, organization events

- A user can book the resources of the organization and send their invitation to other people in order to let them book the meeting events.

Technology

Requirements

- The website provides for user options to book the resources of the organization for personal event, team event, organization event

- The website provides for user options to forward sharing slots to other people and people can book the events

APPLICATION REVIEW AND CURRENT SURVEY

Application Review

Our team will assess the website using a comprehensive set of criteria and insights gained from previous evaluations, providing a clear overview of the current survey process and its relevance to the topic.

Link Website Calendly: https://calendly.com/

We chose Calendly for our surveys due to its extensive history in creating and scheduling job appointments, its specialization in this field, and its ability to attract a large user base.

Calendly streamlines the scheduling process by integrating with both personal and business calendars, allowing users to efficiently coordinate meetings with external contacts By connecting with invitees, users can easily determine the most suitable time to meet and finalize their appointments seamlessly.

To serve the project’s topic, we have summarized some important lessons that we learnt while using this website:

Survey Criteria Lessons learned for the topic

User Interface - Eye – catching layout, simple but suitable for users User Service - Link multiple third-party service platforms

User Experience - Completely convenient experience, very scientific and methodical content

Support for the project’s topic

- Support Using third-party platform for meetings

Table 2-1 Website Calendly review table

Home page interface after logging into Calendly's system

Link to Google Calendar: https://calendar.google.com/calendar/u/0/r

Google Calendar was chosen for the survey due to its reputation as a leading technology platform, offering a scientifically organized system for effective calendar management.

To serve the project’s topic, we have summarized some important lessons that we learnt while using Google Calendar:

User Interface - Eye – catching layout, simple but suitable for users

User Service - Link multiple third-party service platforms

- Manage both Events and Working schedule

- Working Schedule Different View Options

Table 2-2 Google Calendar review table

Google Calendar's work schedule creation interface

Google Calendar’s History view and calendar and meeting information

The reason for choosing Facebook's event system for the survey: is a very good event storage system of one of the most developed social networking platforms today

To serve the project’s topic, we have summarized some important lessons that we learnt while using Google Calendar:

Table 2-3 Facebook Events Center review table

SimplyBook is an excellent choice for online appointment booking and reservation services, showcasing a user-friendly interface and reliable customer support For efficient interview scheduling and administrative services, SimplyBook.me stands out as a top solution, providing seamless experiences for both service providers and clients Explore the benefits of SimplyBook for your appointment management needs today.

To serve the project’s topic, we have summarized some important lessons that we learnt while using this website:

- Support Custom Booking Page for Reservations

- Support Waiting List and Email contacts

Table 2-4 Website SimplyBook review table

Overview of survey

Following a comprehensive status survey, the team gained valuable insights to enhance the design and implementation of an interface that effectively supports users in managing their work schedules and appointments.

2.2.1 What is the conclusion after reviewing these websites?

In conclusion, the website content highlights the necessity of the project's requirements, showcasing its extensive experience in scheduling and event management By integrating key features from each website, we can create a highly effective resource booking system that enhances user experience and meets diverse needs.

To enhance efficiency in booking events, organizations require a streamlined system that enables quick reservations for users and their partners This system should facilitate simultaneous bookings for multiple partners while addressing the user's need to avoid scheduling conflicts within an organization that has various users and resources.

Technologies

- The Angular is an open-source and helps us build dynamic & single-page applications (SPAs)

- Angular is a development Platform and framework for building single-page client applications using HTML and TypeScript

- As a framework, Angular has clear advantages while also providing a standard structure for developers to work with It enables users to create large applications in a maintainable manner

- Custom Components: Angular allows users to build their own components and can encapsulate functionality and rendering logic into reusable parts It also works well with web components

- Data Binding: Angular allows users to easily move data from JavaScript code to views and respond to user events without having to write any code manually

- Dependency Injection: Angular allows users to write modular services and put them wherever they need to This improves the testability and reusability of the same services

- Testing: Easily Unit test every part of your application

Angular ensures robust cross-platform and cross-browser compatibility, allowing applications to function seamlessly across various browsers like Chrome and Firefox, as well as operating systems including Windows, macOS, and Linux.

Details of technology used in Front-end

- Angular Router is a routing concept that helps us manage navigation between components in a system

Authentication Guard is essential for restricting access to specific pages in a system for users who are not logged in In developing a Single Page Application (SPA) with Angular, we can implement route protection mechanisms through guards to effectively manage user access.

There are four different types of guards that we can use to protect our routes:

- CanActivate: Determines if a route can be activated

- CanActivateChild: Determines if child routes can be activated

- CanDeactivate: Determines if a route can be deactivated

- CanLoad: Determines if a module can be lazy-loaded

Custom route guards enable us to manage access based on conditions like user authentication status and roles By properly implementing and configuring these guards, we can enforce access restrictions and enhance the security of our application's routes.

An Interceptor plays a vital role in managing data prior to dispatching requests to the backend and following the receipt of responses A key function of an Interceptor is to append a token to API requests that necessitate user authentication.

In Angular, an Interceptor is a service that implements the HttpInterceptor interface, allowing developers to intercept and modify outgoing HTTP requests and incoming responses, as well as perform additional actions on them.

To effectively manage token inclusion in API requests, we can implement an interceptor that fetches the user's token from storage, such as local storage or a token service, and appends it to the request headers.

Angular enables two-way data binding, allowing seamless synchronization between HTML inputs and TypeScript variables When an HTML input changes, the corresponding variable in TypeScript is instantly updated, and any modifications in TypeScript are reflected in the HTML interface in real-time.

Components serve as the essential building blocks of our application, integrating HTML templates with TypeScript code Each component operates independently, allowing for easy installation or removal within the system Essentially, a component acts as a visual control, featuring an HTML interface paired with code logic to manage events Furthermore, components can range in scale from a single control to an entire screen, encompassing multiple controls or even a collection of screens.

This means that a component can contain and invoke many other components connected to it

In Angular components, managing events enables us to effectively capture and respond to user interactions and modifications in the component's HTML By utilizing event binding syntax, we can associate event handlers with specific events like (click), (change), and other pertinent events.

A module is the broadest concept in Angular A module can contain components, directives, pipes, and more

Modules can be compiled using two methods: Just-in-Time (JiT) and Ahead-of-Time (AoT) JiT compilation compiles and executes code in the user's browser at runtime, while AoT compilation transforms code into executable format beforehand, allowing for direct display in the browser without additional processing.

An Angular module can import and utilize other modules, enabling collaboration among them By effectively importing and exporting modules, you can organize and manage your application's functionality in a modular and reusable manner.

Modules play a crucial role in structuring and organizing an Angular application They help to encapsulate related functionality, promote reusability, and provide a clear separation of concerns

In Angular and TypeScript, a service is a class designed to encapsulate reusable functionality, enabling data sharing, business logic execution, and communication with external resources like APIs throughout the application.

- Springboot is an open source framework for the Java platform

This platform is ideal for Java developers looking to create standalone applications, allowing them to begin with a basic configuration Developers can progressively add necessary configurations throughout the development process without the need for an extensive initial setup.

- Springboot provides flexible configuration of Java Beans, XML and Database Transactons

- Springboot provides powerful batch processing and manages Restful API endpoints efficiently

- Springboot helps user easily manage dependencies between objects

- Springboot provides annotation-based application management

Details of technology used in Back-end

Spring Security is a vital feature of the Spring Framework, providing essential user authentication and authorization to safeguard resources Our team has tailored specific components of Spring Security to align with our unique authentication and authorization needs.

Swagger Icon Swagger 2 is an open-source software used to develop the design and create documents for Restful APIs

Our team uses Swagger to help the frontend developer easily know which APIs are available, what are the input and output format

JWT, or JSON Web Token, is an open standard (RFC 7519) that enables secure information transmission between system components using a JSON object It ensures that the information can be authenticated and trusted through its signature, which is encoded either with the HMAC algorithm or a public/private key pair using the RSA algorithm.

REQUIREMENT SPECIFICATION

Description

3.1.1 Description about types of booking resources

The resource booking system for the organization has three main booking resources’ type:

First, the resource is defined as any resource belong to the organization, including people, room, device

Authorized users within an organization can reserve resources for small-scale meetings or team events, facilitating effective collaboration among a limited number of participants.

Organizations can efficiently book resources for larger events by empowering authorized users to make reservations This allows for seamless participation from all members within the organization, ensuring that everyone has the opportunity to engage in the event.

- Booking resource for a meeting with public partner: User in organization with a permitted authority book resource to support for a meeting event with a public partner

The resource booking system for the organization has the main structure of roles below:

- The Primary User (non-business): is the person who doesn’t pay to use the system, they can use a trial version and has the limit of permissions

The Manager of the Organization is responsible for overseeing system usage, managing user accounts, assigning calendars, and granting specific roles or permissions to users for resource access.

The primary user within the organization is the individual whose account is imported into the system by the manager This user operates based on the specific role assigned by the manager, enabling them to effectively perform their designated tasks.

19 book resource for meeting events, or sharing time slots to people outside of the organization

The external user receives an invitation email from an authorized user within the organization, allowing them to book a time slot for an event This process ensures that only users with permission can share available slots outside the organization, facilitating seamless event scheduling.

Functional Requirements

An unauthorized user will have the permission to create a new account and choose between trial account (free version) or business account (pay to use)

 Unauthorized user can register a new account

 Unauthorized user can choose trial account to use with a limit of permissions Then, the unauthorized user’s request will need the approval of the administrator of the website

 Unauthorized user can pay a subscription with Paypal to use business account with full of permissions

The organization’s manager is tasked with importing user accounts and creating personalized schedules for each user With full permissions within the organization, the manager can assign various booking resource permissions, such as event hoster and public event hoster, as well as designate resource managers to specific users.

 Manager can import a list of accounts for users using excel and template file

 Manager can create different working schedules in organization

 Manager can create new resource

 Manager can assign different working schedules to any specific user and resources

 Manager can assign different permissions to any specific user Those permissions include: an event hoster, public event hoster, or device manager

Primary users within the organization can access and view all events they participate in, check their main calendar that includes events and schedules, and join any organizational events.

 Primary user can log in to the app

 Primary user can log out of the app

 Primary user can update user profile

 Primary user can view the main active calendar (including all events and working schedule)

 Primary user can view detail of any event which they participated in

 Primary user can join in any organization event

 Primary user can view a list notification based on the notification’s status

 Primary user can synchronized system’s calendar with Google Calendar

An event host can reserve various resources within the organization to facilitate personal, team, or organizational events Additionally, the host has the authority to reschedule the event as needed.

 An event hoster can view different slots to book a single or multiple resources These slots are calculated based on the time working of user and resource, without conflicting event

 An event hoster can book any resource of the organization The request of booking will be forwarded to the manager of that resource

 An event hoster can make a organization event for any organization user to join in

 An event hoster can reschedule the event which they already published

 An event hoster can view the detail of the organization event which they organized

 An event hoster can cancel an event

A public event host has the authority to share available slots with users outside their organization Additionally, when hosting an organizational event, they can invite the public to participate.

Public event hosts can create multiple groups of external slots, each representing the specific purpose of the event they wish to organize These groups of slots will be shared with partners, allowing public users to participate effectively.

 Public event hoster can share a group of external slots to specific partners through email account

 Public event hoster can also share a specific event in case that event is organized as organization event, or multiple events of organization in a date range

 Public event hoster can offer a time for public partner in case they need to reschedule the time in booking slot which the public partner has already participated in

A resource (device type) manager will have permissions to approve or reject the resource’s borrow request for any event

 A resource (device type) manager can approve/ reject resource’s borrow request for any event

A public partner can engage in various ways during an organization’s event For private events, the public user selects from available slots shared with them In contrast, for public events organized by the organization, participation may follow different protocols.

22 event, the public user can join in as long as they got shared, also has right to join multiple public organization events shared based on date range)

 A public partner can view all the external slots in the group of slots shared by the invitor (user in the organization) for booking

 A public partner can join in one of the external slots shared to them

 A public partner can view a single public organization event or multiple public organization events (based on date range) which they are shared

 A public partner can join in a single public organization event or multiple public organization events

A public partner can provide an alternative time for the host of a public event if they need to reschedule a previously booked time slot in which the public partner is involved.

An administrator is responsible for approving or rejecting accounts of the primary user whose account of free version

 Admin can view list of non-registered (requested) accounts

 Admin can approve account’s request

 Admin can reject account’s request

 Admin can view list of approved (legal) accounts

An unauthorized user: is the person will have the permission to create a new account and choose between trial account (free version) or business account (pay to use)

A manager is responsible for managing user accounts within an organization, including creating and assigning schedules With full permissions, the manager can also designate specific booking rights, such as event hoster and resource manager, to individual users.

A primary user has the ability to access and view all their participated events, manage their main calendar that includes both events and schedules, and join any events organized by their organization.

An event host is responsible for booking organizational resources to facilitate various types of events, including personal, team, or organizational gatherings Additionally, the event host has the authority to reschedule events as needed for any reason.

A public event host is responsible for sharing event slots with users outside of their organization Additionally, when organizing an event, the public event host has the authority to invite public users to participate.

Resource (device) manager: is the person who will have permissions to approve or reject the resource’s borrow request for any event

User as a public partner: is the person who participates in event of organization user by booking slots The events’ slots are shared through email account

An administrator: is the person who is responsible for approving or rejecting accounts of the primary user whose account of free version

System Functions Main Use Cases Use Case #

An unauthorized user will have the permission to create a new account and choose between trial account (free version) or business account (pay to use)

Register as trial & free account UC 1.1 Register as business account, use

The organization's manager is tasked with importing user accounts and creating various schedules for users With full permissions within the organization, the manager also has the authority to assign different roles and responsibilities to users.

24 permission of booking resources (event hoster, public event hoster) or resource manager to a specific user in organization

Create different working schedules UC 1.4

Assign working schedules to user and resources UC 1.6

Assign permissions to user UC 1.7 Primary User

Every primary user within the organization can access and view all the events they participate in, check their main calendar that includes scheduled events, and join any organizational activities.

Login to the app UC 1.8

Logout of the app UC 1.9

View main active calendar UC 1.11 View detail of participating event UC 1.12 View detail of organization event UC 1.13

Primary user can view a list of notifications based on the notification’s status

An event host can reserve various organizational resources for personal, team, or corporate events Additionally, the event host has the authority to reschedule the event as needed.

View available resources’ slots for booking UC 1.17

Book organization’s resource UC 1.18 Make organization’s event UC 1.19

View detail of organization’s event UC 1.22 Public Event Hoster

A public event host has the authority to share a list of available slots with users outside of their organization Additionally, when hosting an event for the organization, they are also permitted to invite public users to participate in that event.

Create group of external slots UC 1.23 Share group of external slots to public partner UC 1.24

Share single/multiple organization events to public partner UC 1.25

Reschedule public sharing slot UC 1.26 Resource Manager

A resource (device type) manager will have permissions to approve or reject the resource’s borrow request for any event

Approve/ reject resource’s borrow request UC 1.27

A public partner can have different types of participating in the organization user’s event

SYSTEM DESIGN

System Architecture

The Angular framework architecture is fundamentally centered around Angular Components, which serve as the essential building blocks of every Angular application Each application consists of one or more Angular Components, which are essentially plain JavaScript or TypeScript classes paired with HTML templates and associated names.

The HTML template in Angular can retrieve data from its associated JavaScript or TypeScript class It can also incorporate other components by utilizing their selector names Additionally, an Angular component may have optional CSS styles, which the HTML template can access to enhance its presentation.

Here are some important concepts following the Angular Architecture:

Components: Each component defines a class containing the login in TypeScript format and view of the page in HTML template

Modules: A component or service within an Angular Module context is grouped together into a single component or service

Templates are an advanced version of HTML that encompass all standard HTML features while offering enhanced capabilities They allow for the dynamic generation of HTML DOM elements by integrating component data into the HTML structure.

Data Binding: Used to bind the data from the component to the template

Event Binding: Event binding is used to capture events on the user’s end on the app and respond to it in the target environment by updating the application data

Property Binding: Property binding is used to pass data from component class and facilitates interpolation of values that are computed from the application back into the HTML

Metadata: Angular uses metadata to inform the framework on how to handle a class

It is used to stipulate how a class should be used

Services offer specialized functionalities, excelling in their specific tasks By utilizing service composition, developers can minimize redundancy; rather than embedding utility functions within components, extracting them into services allows for broader application across multiple components.

Backend is a place to handle all request from the client then send a response back to the client, we use Spring boot to

Figure 4-3 Back-end project organization

Annotations: Is the place to custom simple validate API's input data

Configs: Is a place where the entire system configuration is stored

Constants: Is a place to store constant values in the system

Controllers: Is a place to receive the user's API request, process and respond to the user

Dtos: Is a place to store the system's DTO DTO (Data Transfer Object) defines part or all of data defined by the entity used to

Entities: is a place to mapping data with database, it also generates database when using code first

Enums: Is a place to store the system's enum An enum is a special class that represents a group of constants

Exceptions: Is a place to tweak the exception class and exception handler

Hubs: Is a place to handle complex business involving many different entities

Jobs: Is a place to store the system's job The job represents a 'job' to be performed

It will be executed automatically by trigger

Listeners: Is a place to tweak: Job listener, Trigger listener

Repositories: Is a place to query to the database A job needs to be executed It will be executed automatically by trigger

Securities: Is a place for security-related configuration: authentication and authorization

Services: Is a place to handle simple transactions such as: add, delete, edit, view details, of a single entity

Utils: Is a place to store common functions

Validators: Is a place to custom validate the API input data according to the information in the database

Entity Relation Diagram (ERD)

Figure 4-4 Figure Entity Relation Diagram with Crowfoot Style

Class diagram

Figure 4-5 Figure Class Diagram For All Entity In The System

Database Diagram

The organization table stores all relevant information about the organization, while the account_info table holds essential details pertaining to users Additionally, the account_auth table contains data related to user authentication, and the auth_device table tracks information regarding the devices used for authentication.

This is a table containing information related to the token used for validating the authenticity of the token

The article outlines key tables related to organizational data management: the "event" table contains comprehensive information about events and user external slots; the "device" table includes all resource information within the organization; the "schedule" table holds detailed scheduling information; the "time_working" table documents all working hours associated with the schedules; and the "public_share" table facilitates data sharing.

This is table containing all the information regarding the public sharing slots of the user notify

The user notifications table holds comprehensive information about notifications, while the email_queue table contains all emails associated with events scheduled for sending Additionally, the mapping_account_for_organization table organizes account information for each organization.

The article discusses the purpose of specific tables in an organization’s database The "users" table is designed to store user information and their associated permissions, while the "mapping_account_for_event" table contains details of users involved in specific events Additionally, the "mapping_device_for_event" table is utilized to track devices linked to these events.

This is a table containing the resources in an event and the status of each resource request email_host

This is table containing all the email settings used to send emails for the system

64 system_setting This is table containing the settings that the system uses email_template

This article presents a table of email templates utilized by the system for effective communication Additionally, it includes a comprehensive table detailing all roles within the system, along with their respective authorities.

The system includes a comprehensive table that details all authorities, each signifying the right to execute specific functions Additionally, the "mapping_role_for_account" table outlines user roles, while the "mapping_role_for_authority" table defines the authorities associated with each role.

Sequence Diagram

4.5.1 Sequence Diagram For Create Event Type 1, 2

Figure 4-9 Sequence Diagram For Get All Available Slot Of Partner(s), Resource(s)

Figure 4-10 Sequence Diagram Create Event Type 1, 2 Section 1: Create Basic Event

Figure 4-11 Sequence Diagram Create Event Type 1, 2 Section 2: Add host, partner(s), resource(s) for event

Figure 4-12 Sequence Diagram Create Event Type 1, 2 Section 3: Create email queue, event in google calendar and generate meeting link (if need)

4.5.2 Sequence Diagram For Create External Slot, Group Of

External Slots For Sharing And Get Group Of External Slot,

Figure 4-13 Sequence Diagram Create External Slot Section 1: Create basic external slot info

Figure 4-14 Sequence Diagram Create External Slot Section 2: Add host to external and add resource for external slot (if need)

Figure 4-15 Sequence Diagram Create Group Of External Slot

Figure 4-16 Sequence Diagram Get Group Of External Slot For Book Event 3

Figure 4-17 Sequence Diagram Get Group Of Public Event For Join Public Event

4.5.3 Sequence Diagram For Join Public Event And Make Event 3

Figure 4-18 Sequence Diagram For Join Event Section 1: Get Event Info And Add

Figure 4-19 Sequence Diagram For Join Event Section 2: Add Parter(s) To Event In

Google Calendar And Send Notify, Socket Message To Event Hoster

Figure 4-20 Sequence Diagram For Make Event 3 – Section 1: Validate Input

Figure 4-21 Sequence Diagram For Make Event 3 – Section 2: Create event and add host, partner to event

4.5.4 Sequence Diagram For Reschedule Event

Figure 4-22 Sequence Diagram Reschedule Event 1, 2 Section 1: Validate And Update

Event Time Of System Event

Figure 4-23 Sequence Diagram Reschedule Event 1, 2 Section 2: Send Borrow Request

Figure 4-24 Sequence Diagram Reschedule Event 1, 2 Section 3: Update Event In

Google Calendar And Create Email Queue

Figure 4-25 Sequence Diagram Reschedule Event 3 Section 1: Validate And Update

Event Time Of System Event

Figure 4-26 Sequence Diagram Reschedule Event 3 Section 2: Send Borrow Request To

Figure 4-27 Sequence Diagram Reschedule Event 3 Section 3: Update Event In Google

Calendar And Create Email Queue

Component Diagram

User Interfaces Design

This page performs the pricing option for the unauthorized user before registering account

2 Sign Up Google Screen This page requests the unauthorized user to provide a google account for signing up

This page collects the unauthorized user’s information to sign up

This page performs allows the unauthorized user to pay with Paypal for business account

Table 4-1 List of screens for unauthorized users

This page performs the function of approve/denying basic user account (non- business) of administrator

Table 4-2 List of screens for administrator

This page performs the function of importing list of organization user’s account, assigning different authority for user, assiging different time working schedule for user

This page performs an overview information of the organization

This page provides for manager the authority of adding a new resource, assigning chedule for a new resource

Table 4-3 List of screens for manager

Screens for primary organization user

1 Login Screen This page authenticates user and helps user log in the system

This page displays the main calendar of user including all the events

3 Events List Section This section displays all the participating event of the user

4 Event’s Detail Section This section displays all the information of the event that the user selects to view

5 User Profile Screen This section displays the user’s information

This page displays all the organization events for the user

Table 4-4 List of screens for primary organization user

This page is the main the page of any event hoster, it contains all the information that is necessary for booking resources

Table 4-5 List of screens for event hoster

Screens for public event hoster

This page performs the function of creating single/ multiple sharing slots

This page display all the sharing slots and its configuration User can view, update

3 Sharing slot detail Section This section displays all the sharing slot’s information User can view, reschedule

Table 4-6 List of screens for public event hoster

This page displays all the device borrow request and gives the user an option to approve/ reject request

Table 4-7 List of screens for resource approver

This page displays all the sharing slots for the public partner and allow partner to book slot

2 Sharing slot detail Section This section displays all the sharing slot’s information Partner can view, reschedule

Table 4-8 List of screens for public partner

No Name Type Description Action result

1 Logo website and title website

Display logo and name of website

2 Pricing page’s content text Text Display pricing page’s advertisement content

3 Account’s type card Card Display a card for each type of account’s type

4 Account’s type label Text Display label for each type of account’s type

5 Account’s type price label Text Display price for each type of account’s type

6 Select Button Button Select button for each type of account’s type

Navigate to provide information screen

7 Account’s type benefits Text Display benefit for each type of account’s type

Table 4-9 Table 4 9 Pricing Screen Description

Figure 4-31 Sign In Google Screen

2 Sign up title Text Display sign up title

3 Sign up policy and agreement Text Display sign up policy and agreement

Account button Button Sign up Google

Navigate to Provide Information Screen

5 Switch to login Text Switch to login

Cancel registering and back to login screen

Table 4-10 Sign In Google Screen Description

Display ‘Provide Information (For Signup)’s title

2 Description text Text Display provide information description

3 User name input Input Input user name for account

4 Full name input Input Input full name for account

5 Address input Input Input address for account

7 Password input Input Input password for account

8 Re-enter password input Input Re-input password for account

9 Confirm button Button Confirmation button

Navigate to Login Screen (free account), Payment Screen (business)

Table 4-11 Provide Information Screen Description

1 Signin Title Text Display the title of signin screen

2 Username Input Input Input user name for sign in

3 Password Input Input Input password for sign in

4 Sign In Button Button Confirm signing in button

5 Switch to Register Text Switch to Register Cancel Sign In and switch to Register

Path to Room and Devices Screen

Navigate to Room and Devices Screen

Path to Main Calendar Screen

Navigate to Main Calendar Screen

Path to Booking Dashboard Screen

Navigate to Booking Dashboard Screen

Path to Organization Events Screen

Navigate to Organization Events Screen

Path to Public Meeting Slots Screen

Navigate to Public Meeting Slots Screen

Display basic information of user in the bottom corner

10 User Image Image Display the image of the user

11 User full name Text Display the user’s full name

12 User account type Text Display user’s account type

13 User email Text Display user’s email

14 User address Text Display user’s address

15 User activate date Text Display user’s activate date

16 User expire date Text Display user’s expire date

1 Organization’s Name Text Display organization’s name

Display the total number of employees in organization

3 Organization’s Code Text Display the organization’s code

Display the organization’s business type

Display all the schedules of the organization

Display all of organization’s schedules

Table 4-13 Organization Dashboard Screen Description

1 Add Employee Button Button Add Employee Button

Toggle Add Employee Side Navigation

Toggle Assign Calendar Side Navigation

Toggle Assign Authority Side Navigation

Display All Users’ Full Name

Display All Users’ activate day

Display whether a user is the manager or not

Display whether a user is an event hoster or not

Display whether a user is a public event hoster or not

Display pagination for the employee table

Dropdown Dropdown Display different types of resource to filter

Display all the resources based on the resource’s type

2 Add Resource Button Button Add Resource Button

Toggle Add Resource side navigation

Display some basic information about the resource in a card

Click => toggle Resource information side navigation

Switch to Devices Request Approval Table

Navigate to Devices Request Approval Table

Figure 4-39 Devices Request Approval Screen

Text Switch back to Manage

Navigate to Manage Resource Screen

2 Device borrow request table Table

Display all the request sent from the user’s organization will full information about the event and the resource is pending

Display all the states of the request

Display button approve and button reject for each request

The request will change its value in status column

Table 4-16 Devices Request Approval Screen

Figure 4-40 Main Active Calendar Screen

Today, Next Button Button Previous,

Change the calendar to next (day/week/month view) or previous, today

2 Current selected day/ week/ month Text

Display the current selected day / week/ month

3 Button day / week/ month Button Button day / week/ month

Change the mode of the calendar to day / week/ month

4 Description of different schedules Text Display different schedules’ icon

Display the information of the current selected day

Toggle list events group by day side navigation

Display all the schedules and events of one user with three different modes: day/ week/ month

Table 4-17 Main Active Calendar Screen

1 Resource’s type select Select Allows user to select the resource’s types

Display the value of selected resources’ types

Allow user to select single or multiple resources

Display the value of the selected resources

3 Radio group options for booking events

Allow user to select the type of event that user want to book the resources for

4 Group of tabs for different event’s type

Group of tabs for different event’s type

Switching between the type of events

5 Event’s detail card Card Displays basic information of an event

If the card is clicked, it will toggle a popup with full information of the event

Display the slots based on the day selected

7 Date selected Text Display the currently selected day

Event information such as event name input, event duration dropdown, event description input, event type dropdown, event location input

Input event name, select event duration dropdown, input event description, select event type, input event location

9 Group of cards for available slots

Toggle a confirm menu when a card is clicked

Table 4-18 Booking Dashboard Screen Description

SYSTEM IMPLEMENTATION AND TESTING

System Implementation

- Develop in Eclipse IDE, Spring tool suite 4

- Develop in Visual Code IDE and Web Browser

GitHub management tool is SourceTree and GitHub desktop

Link Backend (branch: feature/KLTN): https://github.com/NMD572/choice-your-calendar.git

Link Frontend (branch: main): https://github.com/anakin9472/choice-your-calendar.git

Deploy Web Client App With Angular

We had deployed our Web Application on AWS server as production

Firstly, we use some commands to build the Docker image for Angular app

There will be two versions of Docker images: one for the specific IP of AWS server and the other one for the host domain

Change baseUrl of api path in file src/app/_utils/utiils.ts to the IP or Domain of the Backend (AWS server)

Figure 5-1 Setting Api Base Url

Next, we will build this source code to an image with name timechoice2: docker build -t timechoice2

Use the ‘docker images’ command to check if the image is already built successfully

Figure 5-2 Build Front-end Image Successfully

Next, we will run this docker image in a docker container name timechoice: docker run -d -it -p 4200:80 name timechoice timechoice2:latest

Then we will use command ‘docker login’ to login with Docker ID, this will help to push image to Dockerhub repository

After, we use this command to commit our current source: docker commit timechoice thach9472/timechoice:v2

Finally, use this command to confirm pushing to Dockerhub repository: docker push thach9472/timechoice:v2

Check the Dockerhub repository as if the image is being pushed successfully:

Figure 5-3 Front End Docker Hub Repository

Deploy on AWS EC2: First, we pull the image from docker hub:

Figure 5-4 Pull Front End Image

Then we run this image with port 4200 and container name is timechoice.

Figure 5-5 Run Front End Image

Open port on AWS EC2 instance inbound/outbound rule for allow user to access web app

Figure 5-6 Open Port For Front End

Results of deploying web client app on AWS:

Figure 5-7 Results of deploying web client app on AWS

Deploy Web Server with Springboot

Firstly, pull backend repository from GitHub

To connect to PostgreSQL, add the connection details in the application-test.yml file If PostgreSQL is not installed on your system, you can easily set up a free instance by visiting [ElephantSQL](https://www.elephantsql.com/) and choosing the 'tiny turtle' plan.

Figure 5-8 Setting PostgreSql Connection For Backend

Build source to jar package with command: mvn clean install -e -Dmaven.javadoc.skip=true

Design a Dockerfile with the following content and name the file Dockerfile:

ARG JAR_FILE=target/*.jar

COPY ${JAR_FILE} app.jar

ENTRYPOINT exec java -jar app.jar

Build Docker Image First we need to point cmd to the correct directory containing the Dockerfile file then run the command line: docker build -t tlcnbackendimage

Build into a container and push to docker hub Run the following commands: docker run -it -d -p 8000:8000 name backendapi tlcnbackendimage docker login docker commit backendapi 19110188:tlcnbackendimage:v1 docker push 19110188:tlcnbackendimage:v1

Deploy on AWS EC2: First, we pull the image from docker hub:

Then we run this image with port 8000 and container name is backendapi.

To handle web client requests and send emails from an AWS EC2 instance, it's essential to configure the inbound and outbound rules to open the necessary ports Specifically, if PostgreSQL is installed on the server, you must ensure that port 5432 is open to facilitate database connections.

Figure 5-11 Open Port For Backend

Results of deploying backend api on AWS:

Figure 5-12 Results of deploying backend api on AWS

If you have a domain, you will need to map it to the IP address of your server

Figure 5-13 Mapping the domain to the IP addresses of the server

Testing

 Schedule management: create, activate, edit, delete schedules, share calendars with partners, track free time schedules between you and your partner

 Event management: create and track your own events

Outside the scope of testing

 In addition to the functions listed above

 Test the performance of the system

 Test the load capacity of the system

- Find bugs created by devs when coding

- Gain confidence and provide information on quality levels

- Ensure that the end result meets business and user requirements

- To gain the trust of customers by providing them with a quality product

TC_01: Booking resource for personal event successfully

Description Expected Result Actual Result Pass/ Fail

Book resources for a private/ team meeting event with a successful result

- The system pops up a success message

- Upcoming Events tab updates with a new event

- User logs in as an event hoster

- User goes to ‘Booking Dashboard’ screen

- User chooses resource’s type and resouce’s option

- User selects the booking resource’s type as Booking for personal or team event

- User clicks on ‘Schedule’ button

- User selects day, fills in necessary information for the event

- User selects one of the available slots between the resources

- User clicks on ‘Confirm’ button in confirmation menu

Table 5-1 TC_01: Booking resource for personal event successfully

TC_02: Booking resource for personal event unsuccessfully

Book resources for a private/ team meeting event with a conflict time error

- The system pops up an error message indicates that the error related to conflict between the time of the event and timeworking of the participant

- User selects the booking resource’s type as Booking for personal or team event

Table 5-2 TC_02 Booking resource for personal event unsuccessfully

TC_03: Booking resource for an organization event successfully

Book resources for an organization event with a successful result

- New organization event is updated in the Organization Events screen

- User selects the booking resource’s type as Booking for organization event

Table 5-3 TC_03: Booking resource for an organization event successfully

TC_04 Booking resource for an organization event unsuccessfully

Book resources for an organization event with a conflict time error

- The system pops up an error message indicates that the error related to conflict between the time of the event and timeworking of the event hoster

- User selects the booking resource’s type as Booking for organization team event

Table 5-4 TC_04 Booking resource for an organization event unsuccessfully

TC_05 Join in organization event successfully

Join in an organization event with a successful result

- New event will be schedule in the main active calendar

- User logs in as any primary user

- User goes to ‘Organization Event’ screen

- User chooses one of the organization events to book

- User clicks on ‘Join’ button

Table 5-5 TC_05 Join in organization event successfully

TC_06 Join in organization event unsuccessfully

Join in an organization event with a conflict time error

- The system pops up an error message indicates that the error related to conflict between the time of the event and timeworking of the primary user

- User logs in as any primary user

- User goes to ‘Organization Event’ screen

- User chooses one of the organization events to book

- User clicks on ‘Join’ button

Table 5-6 TC_06 Join in organization event unsuccessfully

TC_07 Create group of external slots successfully

Create group of external slots successfully

- New group of external slots will be updated in Sharing Slots Dashboard

- User logs in as public event hoster

- User enters the ‘Public Sharing Slots Dashboard’

- User clicks on the ‘Create external slots’ option button

- User selects some of the resources which support for the event

- User selects single or multiple slots

- User clicks on ‘Schedule slots’ button

- User clicks on ‘Confirm’ button

Table 5-7 TC_07.Create group of external slots successfully

TC_08 Share group of external slots successfully

Share group of external slots successfully

- Public parner can check the mail with all the slots shared by user

- User logs in as public event hoster

- User enters the ‘Public Sharing Slots Dashboard’

- User selects single or multiple slots in the public sharing slots to share for public parner

- User provides necessary information for sharing such as the public partner’s email

- User clicks on ‘Share public slot for booking’ button

Table 5-8 TC_08 Share group of external slots successfully

CONCLUSION

Result achieved

Build a calendar management website with Angular and Spring technology

• Learn more about the knowledge of testing a website to become complete

• Learn about Test Case writing and design process

• Practice skills to learn, survey, and analyze application problems

• Practice teamwork, self-study and time management skills.

Advantages

• The site does a good job of completing some simple tasks such as sending calendars and email notifications.

Disadvantages

• The site is not yet complete in terms of users

• Code is still not optimized

Direction of development

• Improve and upgrade the website

• Optimize the code to make the application smoother and reduce the size better

• Develop more features for the web

• Deploy the site so people can go and use it

• Add messaging with product owners

[1] Introduction to the Angular docs, [online] available at: https://angular.io/docs [Accessed 02 August 2023]

[2] Spring Framework Documentation, [online] available at: https://docs.spring.io/spring-framework/reference/ [Accessed 25 January 2023]

[3] Alexei Ledenev (2019), Crafting the perfect Java Docker build flow, [online] available at: https://codefresh.io/blog/java_docker_pipeline/ [Accessed 27 March

[4] Radhika Krishnan (2021), How To Dockerize an Angular Application with

Nginx, [online] available at: https://www.indellient.com/blog/how-to-dockerize-an- angular-application-with-nginx/ [Accessed 27 March 2023]

Tiêu đề	Building The Resource Booking System For The Organization
Tác giả	Nguyen Phuoc Dang, Nguyen Minh Dang
Người hướng dẫn	Nguyen Duc Khoan, M.Sc.IT
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	132
Dung lượng	6,93 MB