creating a website to sell electronic motorcycles

INTRODUCTION - Do not support multi-languages - Do not have login feature - Do not have cart feature - Do not have coupon - Do not support order and payment on website, must proceed via

INTRODUCTION

Reason choosing the topic

Building an e-commerce website to sell electric motorcycles is a commitment to a sustainable and technologically sophisticated future Such a platform provides a portal to a cleaner and more fascinating method of transportation by embracing the confluence of innovation and environmental responsibility The growing popularity of electronic motorbikes has opened up a new and exciting opportunity for e-commerce businesses With their sleek designs, powerful motors, and eco-friendly credentials, electronic motorbikes are appealing to a wide range of consumers

In Vietnam, e-commerce has made remarkable progress in recent years E-commerce has brought many benefits to consumers, businesses and the economy For consumers, e-commerce brings convenience, saves time and costs For businesses, e-commerce helps expand markets, reach potential customers and increase sales For the economy, e-commerce contributes to promoting economic growth, creating jobs and income for people

This topic explores the inspiration and considerations behind building an e-commerce website dedicated to selling electronic motorbikes, delving into the realms of technology, sustainability, and the seamless fusion of commerce and environmental responsibility.

Software Survey

Thế Giới Xe Điện: https://thegioixedien.com.vn/

Figure 1 The Gioi Xe Dien website Table 1 The Gioi Xe Dien website survey table

Advantages and disadvantages of The Gioi Xe Dien

- Introduction, policy, cooperation-affiliation, and other content are all fully introduced on this webpage

- Main menu is complete and detailed

- There are many photos of customers checking in at the store on website

- Customer support service information is available via hotline

- The loading speed of the website is optimal

- Compatible with many device and operating system such as laptops, tablets, smartphones

- Footer has a certification mark Disadvantages - Some layouts are not suitable

- Do not have login feature

- There is no support service via online chatbox

Dibao: https://dibao.com.vn/

Figure 2 Dibao website Table 2 Dibao website survey table

Advantages - The user interface has a modern and fresh style

- Main menu is complete and detailed

- Product information is quite complete and detailed, easy to see

- The loading speed of the website is optimal

- Compatible with many device and operating system such as laptops, tablets, smartphones

- Footer has a certification mark Disadvantages - There is no support service via online chatbox

- Do not support multi-languages

- Do not have login feature

- Do not have cart feature

- Do not support order and payment on website, must proceed via hotline

Vinfast: https://shop.vinfastauto.com/vn_vi/xe-may-dien-vinfast.html

Figure 3 Vinfast website Table 3 Vinfast website survey table

Advantages - The website layout is simple but extremely beautiful and eye-catching, loading speed is optimal

- Product details are arranged creatively and appropriately

- Compatible with many devices and operating system such as laptops, tablets, smartphones

- The user interface has a modern and fresh style

- Footer has a certification mark Disadvantages - Do not support multi-languages

- Do not have cart feature

The objectives of the project

Create a website with a beautiful, user-friendly interface: The website interface is the first thing that catches the eye of users A beautiful, easy-to-use interface will help users easily search and purchase products

Create a website with full functionality: The website must have all the basic functions such as:

Create a website with high security: The website must be secure to prevent intrusion and theft of information

Create a website with stable operation: The website must be designed and built to operate stably, meeting the needs of large traffic.

Project mission

To provide the best user experience, our team agreed on the following goals:

- A smooth and user-friendly buying experience is a primary goal E-commerce websites must be simple to use, allowing users to easily browse items, make educated decisions, and complete transactions Positive user experiences not only increase client satisfaction but also stimulate return visits and purchases

- Effective product presentation is significant To offer items or services in an attractive and informative way, high-quality photos, extensive product descriptions, customer reviews, and videos are employed The goal is to foster trust and assist clients in making sound purchase choices

- Customer data must be secured, payment information must be protected, and transactions must be secure and confidential Secure payment methods and open privacy policies are all designed to create trust in consumers

- E-commerce websites try to be responsive and mobile-friendly in light of the rise of mobile devices This is critical for reaching clients who purchase on smartphones and tablets, offering a consistent experience for all users regardless of device

- Inventory management must be efficient To avoid concerns such as overselling or running out of supply, e-commerce companies must maintain accurate records of product availability and use inventory management systems The goal is to provide clients with a seamless and dependable buying experience

- Another important goal is to provide exceptional customer service Customer contact methods on e-commerce websites include live chat, email, and phone assistance Customer satisfaction and retention are enhanced by quick response times and efficient issue solutions

SYSTEM ARCHITECHTURE AND TECHNOLOGY

System architecture

REST, or REpresentational State Transfer, is a software architectural style that provides standards for interactions between computer systems on the web, facilitating easier communication between them RESTful systems are characterized by their statelessness and the separation of client and server concerns This means that the client and server can be developed and modified independently, as long as they adhere to the agreed-upon message format This separation improves the flexibility of the interface across platforms and enhances scalability by simplifying the server components

REST is resource-based, meaning interactions are based on constructs familiar to those accustomed to using the internet It uses existing HTTP methodologies, such as GET for retrieving a resource, PUT for changing the state of or updating a resource, and DELETE for removing a resource RESTful APIs, which adhere to these REST architectural constraints, communicate their status through numerical HTTP status codes, aiding in error detection and API monitoring

The REST model is designed for network-based applications, particularly client-server applications, and is intended for Internet-scale usage It emphasizes loose coupling between the user agent (client) and the origin server to promote scalability and independent evolution of components

CHAPTER 2 SYSTEM ARCHITECHTURE AND TECHNOLOGY

Technologies description

TypeScript is a powerful tool that can help developers to write better, more maintainable, and more scalable code Typescript is a good choice for building a large-scale application with prioritize code quality There are some advantages of Typescript in project:

- Enhanced error detection: TypeScript identifies potential errors early in the development phase, preventing the introduction of bugs into the final code

- Enhanced code legibility: Compared to JavaScript, TypeScript offers clearer readability by explicitly defining data types for variables, functions, and other elements

- Simplified restructuring: TypeScript facilitates easier code restructuring as its type system aids in ensuring modifications don’t disrupt other code segments

- Enhanced tool support: TypeScript boasts a range of tools, including IDE plugins and code linters, enhancing code quality and development efficiency

Our group decided to apply Typescript in both back-end and front-end Because its type system acts as a preventive measure against errors, concurrently aiding comprehension and facilitating code alterations

TypeScript detects errors at the initial stages of development, thereby averting the introduction of bugs into the final code deployed for production This practice not only conserves our time and effort in debugging but also contributes to enhancing the overall application quality

Next.js is a React framework that provides a number of benefits for web development, including:

- Improved performance: Next.js uses a number of techniques to improve performance, such as static site generation (SSG) and server-side rendering (SSR) Because SSG creates HTML pages at build time, customers don't need to undergo any further processing after seeing them React components rendered with SSR load more quickly than those rendered client-side since they are rendered on the server

- Better SEO: Next.js is well-suited for SEO because it generates HTML pages that are crawlable by search engines This means that Next.js applications can rank higher in search results

- Faster development: Some of the capabilities that Next.js offers, including automated code splitting and hot reloading, can help developers create apps more quickly Code is automatically divided into smaller bundles that may be loaded as needed Developers no longer need to refresh the page to see changes to their code reflected in the browser thanks to hot reloading

- Easier scaling: Apps built using Next.js are readily scaled to accommodate growing traffic using several methods, including load balancing and horizontal pod autoscaling Traffic is split across several servers via load balancing, and servers are added or removed automatically using horizontal pod autoscaling in response to demand

- More security: Next.js is equipped with built-in security measures, including Content Security Policy (CSP) and HTTP Strict Transport Security (HSTS) CSP safeguards against cross-site scripting (XSS) attacks, while HSTS shields against man-in-the-middle (MITM) attacks

- Richer user experience: Next.js offers several functionalities that contribute to enhancing the user experience It includes features like server-side data fetching and routing, where server-side data fetching enables retrieving data before page rendering, enhancing the application's perceived speed Routing enables developers to craft intricate navigation systems within their applications

Apply Next.js to project

CHAPTER 2 SYSTEM ARCHITECHTURE AND TECHNOLOGY

Recognizing the numerous advantages offered by the Next.js framework, we opted to employ it as the user interface for the entirety of the project

By applying Next.js, we created an e-commerce website with fast, responsive, and secure shopping experience It also generates static HTML pages for blog posts and articles, which can improve SEO

We choose Vercel to deploy our project because Vercel is a cloud platform for deploying and hosting Next.js applications and Vercel is made by the creators of Next.js and has first-class support for Next.js

Express.js stands out as a favored option in web development for several reasons:

- Simplicity and Adaptability: Express offers a powerful yet uncomplicated framework, simplifying the creation of web applications and APIs Its adaptable nature allows developers to tailor applications to specific project needs, ensuring flexibility in design

- Comprehensive Functionality: It provides an extensive range of tools for managing HTTP requests, defining pathways, handling middleware, and managing responses These tools streamline development tasks, offering solutions to common challenges encountered in web development

- Support for Middleware: Express's middleware structure facilitates the integration of diverse functionalities and external modules This feature empowers developers to effortlessly enhance the framework's capabilities

- Thriving Community: With a vibrant and engaged user base, Express receives continual support and boasts an array of available add-ons and middleware This active community ensures varied solutions for different needs, sparing developers from creating solutions from scratch

- Efficiency in Performance: Its lean design and lightweight nature contribute to swift performance, enabling quicker development and execution of applications

- API-Friendly Nature: Express excels in constructing RESTful APIs, providing a systematic approach to managing HTTP requests and responses This attribute positions it as the preferred choice for crafting APIs within the Node.js environment

Apply Express.js to project

In our project, we apply Express in manage servers and routes:

- Routing: Handling HTTP requests with a simple and powerful routing system by Express

- Middleware: Build middleware, which are functions that can be used to process requests and responses before they are sent to the client

- Data Parsing: Express.js can automatically parse JSON and URL-encoded form data

There are some of the benefits that we choose PostgreSQL:

- Reliability: PostgreSQL is a very reliable database, and it has a long history of stability

- Performance: PostgreSQL is a very performant database, and it can handle high traffic loads

- Feature richness: PostgreSQL is a very feature-rich database, and it supports a wide range of features

- Open source: PostgreSQL is an open-source database, which means that it is free to use and modify

- Large community: PostgreSQL has a large and active community of developers, which means that there is a wealth of resources available to help you

In our project, PostgreSQL use for store user data, product data, invoice, transactions, customer service interaction…

CHAPTER 4 SYSTEM IMPLEMENTATION AND TESTING

SYSTEM ANALYSIS AND DESIGN

System functional and non-functional requirements

No Work Work type Note

Store Allow clients to create, update, and manage their accounts, including personal information, shipping addresses, and payment methods

Store Enable clients to place, track, and manage their orders, including order history and order status

Search Provide a comprehensive and organized product catalog, including product images, descriptions, prices, and availability

Search Offer a search function and filters to help clients find and compare products based on various attributes, such as category, price, and brand

5 Shopping cart Store Implement a shopping cart that allows clients to add, remove, and update items before proceeding to checkout

Store Design a simple and secure checkout process, including payment processing, shipping options, and order confirmation

Store Enable clients to leave reviews and ratings for products, helping other customers make informed decisions

Store Implement a system for managing promotions, discounts, and coupon codes to incentivize purchases

Store Provide customer support features, such as live chat, email support, and FAQ sections

Store Ensure the website is secure and protects clients' personal and financial information, adhering to data privacy regulations

1 Usability Convenience - The website should be easy to use and navigate, with a user-friendly interface and intuitive design

- The function buttons are not overly sophisticated and are easy to notice

- The functional screens interact effectively with one another, making it easier for users

Evolution - The website should be able to handle growth in users and data without a loss in performance

- The website should be easy to update and maintain, allowing for the addition of new features and the fixing of bugs

3 Compatibility Compatibility - The website should be compatible across different devices, browsers, and operating systems

Effectiveness - The website should load quickly and perform efficiently, even under heavy traffic

- The website should ensure the security of user data and transactions, adhering to data privacy regulations

5 Reusability Reusability - Components of the website should be designed in a way that they can be reused in different parts of the system or in different projects

List of Actors and Use Cases

3.2.1 Identify Actors and Use Cases in Use Case diagram

- Import product from google sheet

- Update product from google sheet

- Export product list to google sheet

- Import product from google sheet

- Update product from google sheet

- Export product list to google sheet

Use Case diagram

Figure 5 General Use Case diagram

Figure 6 Customer Use Case diagram

Figure 7 Admin Use Case diagram

3.3.4 Master Admin Use Case diagram

Figure 8 Master Admin Use Case diagram

Use Case specifications

3.4.1 Description of Login Use Case

Table 7 Login Use Case description

Description Actor login into the system

Actors Admin, Master Admin, Customer

Precondition When actor want to login into the system to do something

Steps (1) Actor access the website

(2) Click on the “Login/Register” button (3) Enter email and password

(4) Confirm “I’m not a robot” captcha (5) Click on “Login” button

(6) If email and password are correct, actor will be redirected to homepage if role is customer and redirected to admin page if role is admin or master admin

3.4.2 Description of Register Use Case

Table 8 Register Use Case description

Description Actor registers new account

Precondition When actor want to create new account to access the system

Steps (1) Actor acess the website

(2) Click on the “Login/Register” button (3) Enter email

(4) Click on “Get OTP” button (5) Check email to get OTP code and enter OTP code (6) Click on “Confirm” button

(7) Enter information and password (8) Click “Create account” button (9) When create account success, actor will be redirect to login page to login

3.4.3 Description of Manage cart Use Case

Table 9 Manage cart Use Case description

Description Actor manage his/her cart

Precondition When actor want to see his/her cart

(2) Click on cart icon (3) Click on “View cart” button (4) When actor is redirected to cart page, actor can modify cart

3.4.4 Description of Review Use Case

Table 10 Review Use Case description

Description Actor review about product

Precondition Actor review product the first time

(2) Click on product tab (3) Choose product to review and click on that product (4) Scroll down to comment tab

(5) Choose rating star and comment

3.4.5 Description of Search/filter product Use Case

Table 11 Search/filter product Use Case description

Use Case Search/filter product

Description Actor search or filter product

Precondition Actor want to search product or filter product by category, price or rating Steps (1) Actor access the website

(2) Click on Product tab (3) Customer find product that they want by name, category, price or rating

3.4.6 Description of Checkout Use Case

Table 12 Checkout Use Case description

Description Actor checkout when complete product selection

Precondition Actor have at least 1 product in cart

(2) Click “Proceed To Checkout” button (3) Fill all necessary information

(4) Click “Pay” button (5) When checkout success, order will be saved in orders history

3.4.7 Description of View orders history Use Case

Table 13 View orders history Use Case description

Use Case View orders history

Description Actor view their order history

Precondition Login with customer account

Steps (1) Click on icon Account with account name

(2) Click on View Transaction (3) Select order you want to view detail (4) Click on order item to view detail

3.4.8 Description of Manage admin accounts Use Case

Table 14 Manage admin account Use Case description

Use Case Manage admin accounts

Description Actor manage account of admin website

Precondition Actor role must be Master Admin

Steps (1) Actor access the admin page

(2) Click on “Managed Account” button (3) Modify user account follow decision of Master Admin

3.4.9 Description of Manage customer accounts Use Case

Table 15 Manage customer account Use Case description

Use Case Manage customer acccounts

Description Actor manage account of customer website

Precondition Actor role must be Admin or Master Admin

(2) Click on “Managed Account” button (3) Modify user account follow decision of Admin or Master

3.4.10 Description of Manage products Use Case

Table 16 Manage products Use Case description

Description Actor manage product of website

(2) Click on “Managed Product” button (3) Modify product follow decision of Admin or Master Admin

3.4.11 Description of Manage orders Use Case

Table 17 Manage orders Use Case description

Description Actor manage order of customer

(2) Click on “Invoice Balances” to view order list (3) Modify product in “Inbound” and “Outbound” tab

3.4.12 Description of Manage discount Use Case

Table 18 Manage promotion Use Case description

Description Actor manage product of website

(2) Click on “Managed Product” button (3) Click on “Apply Event” button (Gift icon) (4) Input event code

Database design

Database table detail

Ord Attribute Type Domain Meaning Note

1 id varchar Primary key id of user account

2 email varchar email/account of user

3 password varchar password to login into user account

4 role user_role role of each account in the system

6 created_at timestamp the time account is created

7 updated_at timestamp the time account is updated

1 email varchar Primary key email of user

2 otp varchar activation code account

Ord Attribute Type Domain Meaning

1 id int Primary key id of review post

2 user_id varchar id of user who write review

3 product_id int id of product is reviewed

4 rating int rating of user for product

5 comment text comment of user about product

6 created at timestamp the time review is created

1 id int Primary key product id

3 quantity int quantity in storage

5 description text description about product

6 on_sales_id varchar id on sale

7 status status_type status of product

8 storage_id varchar storage id of product

11 thumbnail text[] thumbnail of product

12 images text[] all image about product

14 sold int number of product sold

16 created_at timestamp the time product is created

17 updated_at timestamp the time product is updated

18 stripe_id varchar stripe id of product

19 default_price varchar original price of product

Table 23 products_order_temp table

1 id int Primary key id of products order temp

3 checkout_id int checkout id

4 color varchar color of product

5 product_id int product id

6 checkout_stripe_id varchar checkout stripe id

1 id int Primary key orders id

2 user_id varchar id of user, the owner of order

3 stripe_id varchar stripe id of order

4 customer_stripe_id varchar stripe id of customer

5 payment_intent varchar payment intent of customer

6 shipping_method varchar shipping method of order

7 email varchar email of customer

9 phone varchar phone number of customer

10 address json address of customer

11 currency varchar money currency payment

12 amount_subtotal int subtotal price of order

13 amount_total int total price of order

14 invoice_id varchar invoice id of order

15 shipping_cost int shipping fee of order

16 payment_status varchar status of payment

17 created_at timestamp the time order is created

18 paid_at bigint the time customer paid orders

19 outbound boolean orders status is outbound or not

20 delivered_at bigint the time order is delivered

Table 25 order_product_lists table

1 id int Primary key order product list id

2 stripe_id varchar stripe id of order product list

3 checkout_stripe_id varchar checkout stripe id order product list

4 product_id int product id of product in order product list

5 quantity int quantity of product in order product list

6 amount_discount int discount money of order product list

7 amount_subtotal int subtotal price of order product list

8 amount_tax int tax of order product list

9 amount_total int total price of order product list

10 color varchar color of each product in order product list

11 order_id int order id of order in order product list

12 price_id varchar price id

1 id int Primary key id of temp order

2 user_id varchar id of customer, the owner of temp order

3 checkout_id varchar checkout id of temp order

4 checkout_link text checkout link of temp order

5 created bigint the time temp order is created

6 expires_at bigint the time temp order is expired

7 total int total price of temp order

1 id int Primary key id of promotion

2 stripe_id varchar id of stripe use promotion

4 description text description of promotion

5 active boolean status of promotion is active or not

6 coupon_id varchar id of coupon

7 percent_off int discount percent of promotion

8 amount_off int discount money of promotion

9 currency varchar currency of promotion

10 created_at timestamp the time promotion is created

11 expires_at timestamp the time promotion is expired

12 coupon_expiration timestamp the time coupon is expired

13 first_time_transaction boolean check if the user has used this promotion before

14 times_redeemed int the time customer redeemed promotion

15 max_redemptions int maximum number of redemption promotions

16 promotion type varchar type of promotion

Table 28 on_sale_events table

1 code varchar Primary key on sale event code

2 name varchar on sale event name

3 description text description of on sale event

4 percent_off real discount percent of on sale event

5 amount_off integer discount money of on sale event

6 start_at date the time on sale event start

7 end_at date the time on sale event end

8 created_at timestamp the time on sale event is created

9 updated_at timestamp the time on sale event is updated

10 type varchar type of on sale event

11 currency varchar money currency of on sale event

Class diagram

SYSTEM IMPLEMENTATION AND TESTING

Implementation

During the entire process of developing and implementing the project, our team used the following supporting software:

- Use Visual Studio Code to write code build server and design UI

- Use PostgreSQL to build database

- Use Vercel Platform for deploying frond-end

- Use Neon Platform for deploying database

- Use Render Platform for deploying back-end

- Use Enterprise Architect to draw UML diagrams

1 Login Screen Login page for registered users

2 Register Step 1 Screen The first register page the first step that user input email

3 Register Step 2 Screen The second register page is confirm OTP is sent to user’s email

4 Register Step 3 Screen The third register page is the final step to save information of user

5 Home Screen The home page is the main overview of the website

6 Home Screen 2 This part of home page display best seller and sale off product

7 Brand Screen Brand page is display product by brand

8 Product Screen Product page show all product of website

9 Product Detail Screen Product detail page show detail information of each product

10 Cart Screen Cart is a virtual basket that customer use for collect or store items that they intend to purchase

11 Checkout Screen Checkout page is the place that customer pay for items they buy

12 Order History Screen Order history store all orders that customer pay recently

13 Contact Screen Contact page display contact information of website owner

14 About Us Screen About us page is display owner information and website information

15 Dashboard Screen Dashboard is the main place that Admin and

16 Managed Account Screen Managed account tab is the place that Admin and Master Admin manage account

17 Managed Product Screen Managed account tab is the place that Admin and Master Admin manage product

18 Managed Invoices Screen Managed account tab is the place that Admin and Master Admin manage order

Figure 22 Login Screen Table 29 Login Screen Object

1 Email Address Text Box Email account of user

2 Password Text Box Password of the account

3 Create An Cccount Link Link for create new account

4 Forgot Password Link Link for password retrieval

5 Captcha Check Box Confirm that user is not a robot

6 Login Button After fill email, password and confirm captcha, click Login button to access the web site

Figure 23 Register Screen Step 1 Table 30 Register Screen Step 1 Object

1 Email Text Box Input email user use for register new account

2 Next Button After input email, click next button to move to next step

Figure 24 Register Step 2 Screen Table 31 Register Step 2 Object

1 OTP Text Box After user input email, OTP will be sent to user’s email, check email and type OTP in this box to confirm email

2 Next Button After input OTP, click next button to move to next step

Figure 25 Register Step 3 Table 32 Register Step 3 Object

1 Name Text Box User input User name

2 Password Text Box User input password to secure account

3 Confirm Password Text Box User input password again to confirm

4 Sign Up Button After fill full information necessary, click Sign Up button to finish create new account

Figure 26 Home Screen 1 Table 33 Home Screen 1 Object

1 Logo Image Display logo of the website

2 Search Box Text Box User find product at here

3 Search Button Button After input product name need to find, click Seach to display result

4 Change Language Option Change language to Vietnamese or

5 Login/Register Button Redirect to Login/Register page

6 Order Button Display order of customer

7 Cart Button Display item in cart

8 Home Navigation Menu Redirect to Home Page

9 Brand Navigation Menu Redirect to Brand Page

10 Product Navigation Menu Redirect to Product Page

11 Pages Navigation Menu Redirect to the other pages

12 Banner Slider Display banner ads

Figure 27 Home Page 2 Table 34 Home Page 2 Object

1 Banner Image Display banner ads

2 Best Seller Text Display best seller part

3 Sale Off Badge Percentage sale off

4 Product Image Image Display image of product

5 Rating Badge Rating of product

6 Product Name Text Display product name

7 Discount Price Text Display discount price of product

8 Default Price Text Display default price of product

9 Item Sold Text Display the number of sold item

10 View Detail Button Redirect to product detail page

Figure 28 Product Screen Table 35 Product Screen Object

1 Categories Button Divide products by category

2 Banner Image Display product ads

3 Price Text Display filter product by price

4 Showing Text Show total result by filter

Table 36 Product Detail Screen Object

1 Product Image Image Display images of product

2 Event Badge Display discount event of product

3 Status Badge Display product is in stock or out of stock

4 Product Name Text Display product name

5 Review Text Display review of product

6 Average Star Text Display average star of product

7 Description Text Display description of product

8 Discount Price Text Display discount price of product

9 Default Price Text Display default price of product

10 Color Radio Button Display available color of product for customer choose

11 Decrease Button Decrease the number of items by 1

12 Quantity Text Display quantity of product that customer select

13 Increase Button Increase the number of items by 1

14 Add To Cart Button After select color and quantity, click add to cart to add item to cart

15 Brand Text Display brand of product

1 Remove Button Remove item out of cart

2 Product image Image Display image of product

3 Product name Text Display product name

4 Color Text Display color of product

5 Price Text Display price of product

6 Decrease Button Decrease the number of items by 1

7 Quantity Text Display quantity of product that customer select

8 Increase Button Increase the number of items by 1

9 Item Subtotal Text Display subtotal of item

10 Cart Subtotal Text Display subtotal of cart

11 Total Text Display total of cart

Button Redirect to checkout page

Figure 31 Checkout Screen Table 38 Checkout Screen Object

1 Total Text Display total price

2 Product image Image Display image of product

3 Product name Text Display product name

5 Subtotal Text Display subtotal of cart

6 Add Promotion Text Box Let user input promotion code

7 Shipping Cost Text Display shipping cost of order

8 Tax Text Display tax of product

9 Email Text Display order email

10 Name Text Box Full name of customer order

11 Country Option The country delivery order

12 Address 1 Text Box Delivery address 1

13 Address 2 Text Box Delivery address 2

14 City Text Box The city delivery order

15 Province Option The province delivery order

16 Postal Code Text Box Local postal code

17 Phone Number Text Box Phone number of customer

18 Payment Method Option Select payment method

19 Cart Information Text Box Cart information to pay

20 Pay Button After fill full information, click pay button to finish checkout

Figure 32 Order History Screen Table 39 Order History Screen Object

1 View type Option Display all order by status

2 Order Date Text The date create order

4 Email Text Email of customer

5 Phone Number Text Phone number of customer

6 Address Text Address delivery order

7 Postal Code Text Local postal code

8 Paid date Text Customer payment time

9 Subtotal Text Subtotal price of order

10 Shipping Cost Text Order shipping cost

11 Total Text Total price of order

12 Export Invoice Button Export invoice to pdf

13 View Invoice Link Button View detail invoice with payment

14 Product Image Image Image of product in order

15 Product Name Text Product name in order

16 Quantity Text Quantity of product in order

17 Color Text Color of product in order

Figure 33 Feedback Screen Table 40 Feedback Screen Object

1 Cusomter Name Text Display customer name

2 Feedback Date Text Display the date customer send feedback

3 Feedback content Text Content of feedback

Figure 34 Dashboard Screen Table 41 Dashboard Screen Object

1 Admin Name Text Display full name of admin

2 Admin Role Text Display role of admin

3 Dashboard Navigation Menu Redirect to Dashboard tab

4 Managed Account Navigation Menu Redirect to Managed Account tab

5 Managed Product Navigation Menu Redirect to Managed Product tab

6 Invoice Balences Navigation Menu Redirect to Invoice Balences tab

7 Managed Coupons Navigation Menu Redirect to Managed Coupons tab

8 Revenue Text Display revenue of website

9 Day Date Time Picker Pick time to view statistic

10 Status Option Select option to view statistic

11 Chart Chart Display revenue chart by time

12 Order ID Text Display order id

13 Customer Name Text Display customer’s name

14 Order Date Text Display create order date

15 Total Price Text Display total price of order

Figure 35 Managed Account Screen Table 42 Managed Account Screen Object

1 All Button View all user account list

2 Admin Button View admin account list

3 Customer Button View customer account list

4 Send coupon Button Send coupon to user’s email

5 Select Check Box Select user account

6 ID Text Display user’s id

7 Name Text Display user’s name

8 Email Text Display user’s email

9 Role Badge Display user’s role

10 Change Role Button Update user role

Figure 36 Manage Product Screen Table 43 Managed Product Screen Object

1 Apply Event Button Apply new event for product

2 Import Product Button Import new products from google sheet to inventory

3 Update Product Button Update new products from google sheet to inventory

4 ID Text Display ID of product

5 Name Text Display product name

6 Quantity Text Display quantity of product

8 Brand Text Display brand of product

9 Achieved Boolean Condition to delete product

10 Delete Button Delete product from inventory

Figure 37 Invoice Balences Screen Table 44 Invoice Balences Screen Object

1 View All Button View all invoices

2 View Inbound Button View inbound order

3 View Outbound Button View Outbound order

5 Select Check Box Select order to modify

6 ID Text Id of order

11 Total Text Total price of order

12 Status Badge Status of order

Figure 38 Managed Coupons Screen Table 45 Managed Coupons Screen Object

1 ID Text Display ID of coupon

2 Name Text Display name of coupon

3 Percent Off Text Display coupon percent off

4 Amount Off Text Display coupon amount off

Text Display value first time transaction

6 Time Redeemed Text Display coupon time redeemed

Back-end structure

Testing

Unit Testing is a software testing method where individual units or components of a software application are tested in isolation These components, typically functions, methods, or classes, represent the smallest testable building blocks of the system

Unit Testing serves as a fundamental pillar of software development, safeguarding application reliability, robustness, and maintainability By meticulously examining individual components early in the development cycle, Unit Testing acts as a proactive

70 shield against lurking defects, ultimately guaranteeing the smooth and sustainable evolution of software systems

Integration Testing is a software testing methodology where individual units or components of an application are combined and tested as a group While Unit Testing focuses on the integrity of each thread in isolation, Integration Testing ascends to examine how these threads interconnect and collaborate once woven together Its primary focus lies in verifying the interactions and interfaces between integrated units, ensuring they harmonize as an orchestrated symphony

Integration Testing is crucial to verify that individual units, which might function correctly in isolation during Unit Testing, work together seamlessly when integrated into a larger system This phase acts as a crucial safeguard, significantly reducing the risk of discordant defects permeating the final product In essence, Integration Testing weaves the very fabric of functionality within software, ensuring a harmonious and captivating performance

System Testing is a comprehensive testing phase in the software development lifecycle where the entire system or application is tested as a whole It focuses on validating the complete and integrated software to ensure it meets the specified requirements and functions correctly in the intended environment

By meticulously validating the software's quality, functionality, and readiness for the real world, System Testing serves as the final act of preparation before deployment It guarantees that the software meets not only user expectations but also the aspirations of the entire development team, ensuring a triumphant premiere and sustained success

Acceptance Testing is the final phase of software testing, where the software is evaluated to determine if it satisfies the business requirements and is ready for delivery or deployment

Acceptance Testing ensures that the software meets the expectations of stakeholders, users, and business requirements before it's deployed It's a critical step to confirm that the software is ready for production and will add value to the users and the organization

White Box Testing is a testing technique in which software’s internal structure, design, and coding are tested to verify input-output flow and improve design, usability, and security In white box testing, code is visible to testers, so it is also called Clear box testing, Open box testing, Transparent box testing, Code-based testing, and Glass box testing

- Broken or poorly structured paths in the coding processes

- The flow of specific inputs through the code

- The functionality of conditional loops

- Testing of each statement, object, and function on an individual basis

Black Box Testing is a software testing method in which the functionalities of software applications are tested without having knowledge of internal code structure, implementation details and internal paths Black Box Testing mainly focuses on input and output of software applications and it is entirely based on software requirements and specifications It is also known as Behavioral Testing

- Equivalence Class Testing: It is used to minimize the number of possible test cases to an optimum level while maintains reasonable test coverage

- Boundary Value Testing: Boundary value testing is focused on the values at boundaries This technique determines whether a certain range of values are

72 acceptable by the system or not It is very useful in reducing the number of test cases It is most suitable for the systems where an input is within certain ranges

- Decision Table Testing: A decision table puts causes and their effects in a matrix There is a unique combination in each column

Table 46 Some main test cases

ID Description Test steps Test data Expected result

TC_01 Login with true email, password and confirm captcha

Email: dattien2911@gmail.com Password: 123456

TC_02 Login with true email and confirm captcha but wrong password

TC_03 Login with wrong email and confirm captcha

- Click login TC_04 Login without confirm captcha

- Click create an accountInput email

Email: dattan2911@gmail.com OTP: 123456

TC_07 Inscrease quantity of product in product detail page higher than count in stock

Disable increase button when quantity equal count in stock

TC_08 Inscrease quantity of product in cart higher than count in stock

- Add any product to cart

Disable increase button when quantity equal count in stock

TC_09 Checkout - Add product to cart

Name: Tien Dat Country: Vietnam Address: 142/6 Nguyen Thai Son

City: Ho Chi Minh Postal code: 300000 Phone: 0912345678 Payment method: Card Cart information:

TC_11 Review product without login

Notify user must login to review

TC_12 Review product without rating

Post Review button is disabled

TC_13 Review product without comment

TC_14 Review one product second time

Notify user have reviewed this product

TC_15 Import product from google sheet

- Click into Managed Product menu

Quantity: 5 Price: 73000 Description: Xmen New Dibao is an improved version and has many upgrades in 2021

Promising to become a best-selling, stylish and sporty electric car this year

Brand: xmen Status: new Storageid: TEST2023

TC_16 Update product from google sheet

Quantity: 10 Price: 75000 Description: Xmen New Dibao is an improved version and has many upgrades in 2021

Promising to become a best-selling, stylish and sporty electric car this year

Brand: xmen Status: best_seller Storageid: TEST2023 Currency: usd

- Select product need to delete

- Click into Invoice Balences menu

CONCLUSION

Achievements

The project "Creating a website to sell electronic motorcycles" was built with all the basic functions of an e-commerce website such as:

- Login, register, logout, forgot password

- User can search, filter product by price, brand, category…

- Each product has many colors for customers to choose

- Cart function include add to cart, edit item quantity, remove item in cart, clear cart

- User can review product by rating and comment

- User can see best seller and discount product

- The product management system always updates the quantity in stock

- User can receive event notification by email from website

- Website have many attractive promotion, coupon and discount

- The website supports English and Vietnamese language

- Admin could import can import products in large quantities quickly and easily with google sheet

- Manage account, manage product, manage order and statistic page is complete and detailed

Advantages

- The errors have been thoroughly tested Understand the procedures for finding errors and making corrections

- The website is design with smooth and user-friendly buying experience

- To offer items or services in an attractive and informative way, high-quality photos, extensive product descriptions, customer reviews are employed

- Customer data is secured, payment information must be protected, and transactions is secure and confidential.

Disadvantages

- Many domestic payment methods have not been integrated yet

Future work

- Build a mobile app for the website

(n.d.) Retrieved from Guru99: https://www.guru99.com/

Excel to PostgreSQL: 3 Easy Methods to Export Excel Data to PostgreSQL (n.d.) Retrieved from Hevo

Data: https://hevodata.com/learn/excel-to-postgresql/

Group, P G (n.d.) About PostgreSQL - The world's most advanced open-source relational database

Retrieved from PostgreSQL: https://www.postgresql.org/about/

Holland, A (n.d.) What is TypeScript? A Comprehensive Guide Retrieved from The New Stack: https://thenewstack.io/what-is-typescript/

PostgreSQL (n.d.) Retrieved from Wikipedia: https://en.wikipedia.org/wiki/PostgreSQL

TypeScript (n.d.) TypeScript: JavaScript that scales Retrieved from TypeScript: https://www.typescriptlang.org/

What is Express.js? - Introduction to Express.js Tutorial (n.d.) Retrieved from Simplilearn: https://www.simplilearn.com/tutorials/nodejs-tutorial/what-is-express-js

What is Next.js? - Learn (n.d.) Retrieved from Next.js: https://nextjs.org/learn-pages- router/foundations/about-nextjs/what-is-nextjs

Tiêu đề	Creating a Website to Sell Electronic Motorcycles
Tác giả	Pham Vo Hong Lam, Huynh Nguyen Khang, Tan Tien Dat
Người hướng dẫn	MSc. Mai Anh Tho
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Software Engineering
Thể loại	Capstone Project
Năm xuất bản	2023
Thành phố	Ho Chi Minh City

Định dạng
Số trang	97
Dung lượng	5,44 MB