New technologies in software engineering online bookstore

+ Add many products to the shopping cart and is able to view the cart + Delete products from the cart + Modify the quantity of products inside the cart + View older orders+ Checkout proc

MINISTRY OF EDUCATION AND TRAINING

HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATIONFACULTY FOR HIGH QUALITY TRAINING

HO CHI MINH CITY - 2021

HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – T do – Hạnh phúc

Ho Chi Minh City, 25 October, 2021

PROJECT CONTRIBUTION

Full name: Đinh Văn Trường ID:18110060 Class: 18110CLA3 Full name: Nguyễn Đình Long ID:18110027 Class: 18110CLA3 Full name: Dương Võ Nhật Duy ID:18110006 Class: 18110CLA1 Full name: Đỗ Kim Hoàng Tuấn ID:171100 Class:

Major: Information Technology Instructor: Nguyen Thien Bao, PhD

Date of getting topic: 11/09/2021 Submit date: xx/xx/2021 1 Topic: A movie ticket booking system with multi-theater support 2 Original data and documents:

3 Contents:

4 Product:

DIRECTOR/DEPUTY DIRECTOR OF FACULTY INSTRUCTOR

Nguyen Thien Bao

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAMĐộc lập – TM do – Hạnh phúc

INSTRUCTOR’S EVALUATION

Full name: Đinh Văn Trường ID:18110060 Class: 18110CLA3 Full name: Nguyễn Đình Long ID:18110027 Class: 18110CLA3 Full name: Dương Võ Nhật Duy ID:18110006 Class: 18110CLA1 Full name: Đỗ Kim Hoàng Tuấn ID:171100 Class:

Major: Information technology

Topic: A movie ticket booking system with multi-theater support Instructor’s full name: Nguyen Thien Bao, PhD.

1 About content & workload:

2 Advantages:

The success of a student more or less always accompanies a lecturer We would like to express our sincere thanks to Mr Nguyen Thien Bao, who directly supported the group, give us suggestions, comments and suggestions as well as provide tips to help us make the best project Thanks to his instructions, helped our team understand the knowledge to do the presentation as well as the implementation of the project so we have completed the schedule with a lot of experience that we learn Again, our team would like to thank the lecturer Projects are made around two months, just enough to complete it However, due to some unexpected problems the project will have many errors, that is inevitable We are looking forward to receiving all the comments from our tearcher to help our project better Sincerely thanks.

Ho Chi Minh city, 25 October, 2021

Đinh Văn Trường Nguyễn Đình Long Dương Võ Nhật Duy Đỗ Kim Hoàng Tuấn

Online Book Shop Buying books over the web at an online book shop is an interesting and informative buying experience It allows you to buy books suited to your interests and that too while relaxing at home at any time of the day or night Online book browsing and buying is indeed transforming the way readers and an author come together, and is already creating a huge effect on the publishing and book retail industries Our Online Book Store is a B2C online web store, it is also the easiest way for us to show what we have learned new technologies and apply it to our store

1.1.Use Case Diagram: 16

1.2.Use Case Specifications: 19

CHAPTER I: INTRODUCTION

1.Introduction about the project subject:

Nowadays, technology is growing incredibly fast The rapid innovation of hardware devices makes software technologies to advance as well, automatically take place of old technologies Because of the significant expanding in the number of electronic devices that use Internet and real-time feature, performance is key By tradition, web development has been carried out by technologies such as JAVA servlets, ASP.NET or PHP While those technologies are quite widespread and have good features with many years of development and are supported by a large community, they still have some limitations concerning about today’s need which is performance The MERN stack (MongoDB, Express, React and Node) with their simplicity and uniformity, has been recently developed to become a better solution for this performance issue.

2.Project objectives:

The idea of this web application was toward a startup running by the author’s parents as they decided to open a book retail store By researching, the author realized how ecommerce – an enormous platform is emerging at an extraordinary speed over the last decades all over the world and providing more advantages and conveniences as compared to physical stores Ecommerce has changed permanently the way business and consumer interact, which allows users to connect with their favorite shops and brands whenever and wherever they want and also helps stores to more actively approach consumers It is believed that the growth of e-commerce for the next incoming years is increasing beyond measure rate with the release of modern technologies Understanding this need, the author’s solution was to create an e-commerce web application as an online bookstore in order for the startup to develop its business strategy

3.About our group 3:

Front-end developer: Responsible for a website’s user-facing code and the

architecture of its immersive user experiences In all, a front-end dev is responsible for the interior design of a house that’s been built by a back-end dev The taste and style of the decor is dictated by the homeowner.

Back-end developer: In order to make the server, application, and database

communicate with each other, back-end dev use server-side languages, tools to create or contribute to web applications with clean, portable, well-documented code But before writing that code, they need to collaborate with business stakeholders to understand their particular needs, then translate those into technical requirements and come up with the most effective and efficient solution for architecting the technology.

Leader: Responsible for division each member work, group leader will monitor

group project and find materials, resources for member in each task,…

Designer: Designing web template, decide where the item should be place on the

web page for a prettier user interface, …

4.Project Scope:

4.1 Application requirements:

Typically, a (business to customer) B2C e-commerce web application has two types of users, which are admin and user Admins are responsible for some specific management tasks such as creating, updating and removing the products from the database as well as managing user orders A user is able to browse and read product’s information displayed in the application He can also add the product to the shopping cart and perform the payment for that product While some resources and web routes are public, the others can only be accessed by an admin or a signed in user

By interviewing and researching some normal customers and business owners, the author figured out what different type of user want from the application, what features they think are necessary for an e-commerce web application Based on that, a list of user stories is shown below to illustrate some of the required functionalities for this application:

As a user, user want:

+ To create an account for himself + To update his profile

+ To surf through all the products

+ To see product information such as category, price, name, review, picture, etc + To add many products to the shopping cart and is able to view the cart

+ Manage user orders

4.2 Application development:

This section is dedicated to demonstrate the functionalities development process from back-end to front-end of the e-commerce application Due to the limited scope of this thesis, it is not able to mention all the files or describe every step in the project into details, but it aims to discuss precisely about all fundamental and important parts that needed to implement the MERN application Basic concepts of any third-party libraries or module are also explained along the way The project structure is divided into 2 folder, ecommerce and ecommerce-front which contain the source code of back-end and front-end respectively.

Week Works and tasks for that week

1 Group dividing, discuss about what topic should we following for our final project

2 Do research about topic that we choose, find materials and what we should, shouldn’t have, apply to that topic

3 Do research about those new technologies that we are going to learn in this course and decide which one we should use, apply to our final project

4 Project setup, download application need for project

5 Sign up, sign in and authentication

6 Product and categories

7 Design web homepage, navbar

8 Products search, filter and related products

9 Orders and payment method

10 User profile

11 Manage orders, products by admin

12 Web testing, find errors and bugs on that web

13 Group meeting, fixing previous bugs, errors

14 Do final project report

15 Prepare for final project presentation

We typically communication through Facebook messenger, whenever we need to discuss about our project We also have a group meeting every 9.am, Tuesday on Discord to discuss about what we have done for our project so far and plan on next week tasks in order to stick to our very first project developing plan We all have each other Facebook account and student email so the communication is always in contact If something went wrong, we might use other contact options like ask lecturers for family phone number in order to contact him.

7.Risks:

Every project might also have some risks or issues, with our project, we are facing some of this risks:

- Due to the Covid 19, it’s hard for us sometimes (member need to have vaccination, Covid testing while we are on a meeting for our project) - Because we using new technologies so it was a bit difficult at first to get

acquainted to the technologies

- There were some difficult for us because some of us are staying at home this semester Some need to help parent with housework, or something else like bad connection, electric is power-off, … these was some small issues that affect our group project.

CHAPTER II: WEBSITE PRODUCT REQUIREMENTS

1.Product requirements:1.1 Target user:

- Books lover.

- People who want to buying books but busy and cant go to the store - People who lover buying things online

1.2 Functionalities:User have these function:

+ Create an account for themself + Update their profile + Surf through all the products

+ See product information such as category, price, name, review, picture, etc + Add many products to the shopping cart and is able to view the cart + Delete products from the cart

+ Modify the quantity of products inside the cart + View older orders

+ Checkout process (shipping, payment method,…) + PayPal, credit card integration

Admin must have these function:

+ Add book to the database + Add book name, description, price + Remove book from the database + Update book info

+ Manage users + View user orders + Cancel order

CHAPTER III: PRODUCT DESIGN AND IMPLEMENTATION

1.Product Design:1.1.Use Case Diagram:1.1.1.Admin Site:

1.1.2.Account:

1.1.4.Orders:

1.1.5.User site:

1.2.Use Case Specifications:1.2.1.Admin Site:

Brief Description The way admin login to web

Actor(s) Actors have admin account

Flow of EventsBasic Flow

This use case starts when the admin wants to access the system: 1 Admin select “SIGN IN” function on the web.

2 The web displays the “SIGN IN” form.

3 Admin enter correct username and password then click "SIGN IN" 4 The web will return user to home page.

Alternate Flows

Enter the wrong

login information The system will show “invalid email or password”The system will wait till admin enter a new valid email

Success Log in successful, admin accesses the web Failure Log in failed, admin cannot log in.

Extension Points

None

Log out

Name Logout system

Brief Description The way admin logout of web

Actor(s) Signed in actors

Flow of EventsBasic Flow

This use case starts when admin click in ADMIN USER in the top right corner of the web and click Logout button:

System redirect to Sign In screen.

This use case starts when admin clicks in ADMIN USER in the top right corner of the web and click Profile button:

Admin will be redirect into User Profile menu Admin info will display on the left side of the page.

Admin can change info directly on their current info and click UPDATE to save.

Success Edit personal info successfully

Failure The page will show a notification to admin when they enter a wrong name or invalid email address.

Extension Points

Change password

Name Change password

Brief Description Admin can change their password

Actor(s) Actor have Admin account

Flow of EventsBasic Flow

This use case starts when admin clicks in ADMIN USER in the top right corner of the web and click Profile button:

Admin will be redirect into User Profile menu.

Admin can change password directly on their current info and click UPDATE to save.

Success Change password successfully

Failure The page will show “Password do not match”.

Extension Points

Edit user’s account

Name Edit Account

Brief Description Allow admin to edit account

Success Edit user’s info successfully Failure Edit fail throw error notification

Extension Points

Delete user’s account

Name Delete user’s account

Brief Description Allow Admin to delete user’s account

Admin go into Users page

Click remove button to remove account

The page will show a message “Are you sure” to Admin

Success Delete user’s account successfully Failure Delete fail will throw error notification

Extension Points

Add product

Name Add product

Brief Description Allow admin to add product

Admin go into PRODUCTS page

Admin click +ADD PRODUCT to add new product Admin enter product info and click ADD The system will add new product to Products page

Alternate Flows

TitleDescriptionPre-Conditions

Edit product

Name Edit product

Brief Description Allow admin to edit product

Admin go into PRODUCTS page Admin can enter new product info Click UPDATE to edit product

The system will update that product and back to PRODUCTS page

Success Edit product successfully Failure Edit fail throw error notification

Extension Points

Delete products

Name Delete products

Brief Description Allow Admin to delete products

Admin go into PRODUCTS page Click remove button to remove product

The page will show a message “Are you sure” to Admin

Success Delete product successfully

Failure Delete fail will throw error notification

Extension Points

This use case starts when admin click ADMIN in the top right corner of the web and click Orders:

Admin go into ORDERS page Admin can view list of orders

Admin can click in DETAILS to view that order info

Change orders status

Name Change orders status

Brief Description Allow admin to change orders status

Admin go into ORDERS page Admin click in DETAILS Admin click “Mark as deliveried”

Success Change order status successfully Failure Change fail throw error notification

Brief Description The way user login to web

Actor(s) Actors have account

Flow of EventsBasic Flow