Functional requirements
The goal of this system is to enable customers to easily view and purchase products, as well as manage their orders, regardless of whether they are logged in or not Additionally, the system provides essential administrative functions, allowing administrators to effectively manage all aspects of the platform.
Requirements of the customer user group:
- The interface is easy to use and has high aesthetics
- Allow customers to register for membership and ensure confidentiality of information
- View and change account information
- The form of payment must be accurate
- Product information is rich and diverse
Explore a diverse range of products that cater to various customer preferences, offering ample choices for every shopper Each item is accompanied by detailed information, ensuring that customers can make informed decisions about their selections This approach highlights popular products that attract significant interest, enhancing the shopping experience and satisfaction.
- Always update, introduce the latest generations of phones
- Product warranty information must be clear
- Allow customers to buy products in installments
- For customers to manage their orders, a notification will appear when there is an update of order information
- Customers can chat for product advice
- Allow customers to search quickly and accurately according to many criteria Requirements of the system administrator user group:
- General management: related to the information of customers, goods,
- Easily update and regularly change images, detailed price information of items you will do business with anywhere
- Manage, store and report information about orders and status of orders: delivered yet, multi-payment
- Detailed statistics specific, accurate and fast
- Statistics on which items are sold out, which are best-selling, which are in stock, which items need to be edited
- Summary of daily, weekly, monthly, quarterly, and annual revenue and expenditure
- Aggregate and store customer feedback to be able to answer
- Products: Can add, edit and delete information, categories
- Receive and respond to customer requests
Tools and techniques
Tools and techniques used for the project
Front-end ReactJS, React Native
Back-end NodeJS, Express, SocketIO
Modeling tool draw.io, Enterprise Architect, dataedo
Understand the knowledge of MERN Stack, React Native, Restful API Complete a website and a mobile application selling phones online with full basic features.
The MERN stack, which stands for MongoDB, Express JS, React JS, and Node JS, is a powerful open-source framework for full-stack development, utilizing JavaScript to create sophisticated web applications This technology combination offers comprehensive components for both front-end and back-end development.
MongoDB is an open-source, cross-platform, NoSQL DBMS
A document-oriented database stores data in collections and documents rather than traditional tables and rows found in relational databases, enabling easier and faster data integration within applications.
MongoDB stores the data in binary JSON format that allows the fast exchange of data between client and server [1]
MongoDB can be used for the storage of large volumes of data, which makes it highly scalable [1]
Express JS is a modular, lightweight framework of NodeJS, that helps in building web applications [1]
It is a server-side, back-end, JavaScript-based framework, that is designed to write simplified, fast, and secure applications [1]
It can be assumed that Express JS, runs on top of the Node JS, managing the server and its routes
React JS is an open-source JavaScript library used to build user interfaces, typically for single-page applications [1]
React JS enables developers to modify/edit and refresh the page to view the changes without having to restart or reload the page [1]
React JS offers the facility of code reusability on multiple platforms
It is fast and scalable
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android [2]
React Native applications, like React for the Web, utilize a combination of JavaScript and JSX, an XML-like markup language Behind the scenes, the React Native "bridge" connects to native rendering APIs, using Objective-C for iOS and Java for Android.
React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location [2]
Node JS is an open-source, cross-platform, JavaScript runtime environment
It is designed to run the JavaScript code outside the browser, on the server- side [1]
Node JS accesses the Node Package Manager (NPM), which hosts a large number of private and public packages, and is as well utilized for publishing Node JS projects [1]
It is based on the event-driven, non-blocking I/O model
The Advantages of MERN Stack
MERN, a powerful full-stack development suite, utilizes MongoDB for enhanced scalability, Express JS for improved speed, and JavaScript as its core language for seamless end-to-end development, making it a top choice alongside MEAN.
React JS excels in UI layer abstraction, offering top-notch tools that accelerate code development As a library, it grants developers the flexibility to construct applications and structure code according to their preferences, equipping them with essential resources Consequently, React outperforms Angular in UI rendering and performance.
Review the pros and cons of similar services
CellphoneS mobile phone retail system has nearly 10 years in the field of retailing technology products with 22 stores in Hanoi and Ho Chi Minh City
- Support to register for installment payment associated with major domestic banks and famous installment support channels such as FE Credit, Home Credit
- Websites with the pretty fast loading speed
- Customers can easily find the products they want to buy through the filter
- Very smart search, product suggestion support
- Support Flash sales and promotions, speeding up the user's purchasing decision
- It is not compatible with international customers because it only supports purchases in the Vietnamese language, with a face value of VND
- The interface is tangled, not optimized for the necessary functions
Product evaluations often lack credibility, as anyone can post a review without having made a purchase This leads to a rise in false evaluations, which can damage both the reputation of the store and the perceived quality of the product.
- Support through Zalo, receive messages and reply for a long time It is not possible to directly support the product the customer wants
- Customer account channel is not supported From there, customers cannot directly track their current order and installment information
- Product comparison function is not supported for all products, some errors are detected
- Does not support in-app purchases
Thegioididong.com is a trademark of Mobile World Joint Stock Company, is a retail corporation in Vietnam with the main business of electricity retailing mobile phones, digital devices, and consumer electronics
- The interface has the correct support functions
- Support to view order history
- Support to register for installment payment associated with major domestic banks and famous installment support channels such as FE Credit, Home Credit,
- Compare products with optimal design, users can easily see the difference between products
- Customers can easily find the products they want to buy through a very smart search filter, supporting product suggestions
- Support Flash sales and promotions, speeding up the user's purchasing decision
- Websites with very slow loading data speed, during loading the interface is a white background which is not user-friendly
- Not yet support chatbot or consultant on the purchase interface, forcing shoppers to call the call center if they have any questions
The current state of product evaluation is far from optimal, as anyone can leave a review, regardless of whether they've made a purchase or not, leading to a surge in fake reviews that can significantly damage the reputation of both the store and the product, ultimately undermining consumer trust.
Phong Vu is a reputable and established retailer in Vietnam, specializing in a wide range of products including information technology items, gaming equipment, office supplies, and high-tech devices The company offers products from renowned brands such as Dell, Asus, HP, MSI, and Lenovo, making it a trusted choice for consumers seeking quality technology solutions.
- The filter is optimized precisely, helping buyers quickly identify the products they want to buy according to their needs
- The website interface is a very good-looking, minimalistic design, in line with the general design trend, making it easy for new users to access
- Some product category pages return incorrect results
- Installment sales on the website interface are not supported yet
- The function of comparing products is not supported yet
- Does not support comments, inquiries about product information
- Product reviews are not supported yet
- Not yet support to suggest other related products when the buyer enters a page any product details
Products like the "iPhone X" are organized into multiple separate pages based on specific details such as color and storage capacity, for instance, "iPhone X 64GB Black" and "iPhone X 64GB White." This approach allows users to easily select from a variety of options, enhancing their shopping experience by providing clear distinctions between different product variants.
- The capacity must be searched again, not suggested
- The interface on the app is quite sketchy App rated below average.
Research roles and functions
After surveying the status quo by referring to websites selling mobile phones the group has gathered some information:
The admin holds the highest authority on the sales website, possessing the ability to view income data and monitor any changes All content published on the website is managed and posted by the admin, ensuring accurate and up-to-date information.
In an e-commerce setup, the admin role can be held by the store owner who has complete control over revenue and expenditure in trading and warehousing activities Alternatively, the admin can also be a management staff member responsible for monitoring and tracking daily and weekly orders, ensuring timely resolution and providing real-time reports to the store owner.
- Customers are divided into 2 groups: logged-in customers and not logged-in customers
Logged-in customers enjoy all the benefits available to non-logged-in users, along with additional features such as payment processing, personal information management, order tracking, and the ability to receive updates, leave comments, and write product reviews.
Issue of records, books, and transaction documents
- Buyer Information: Full name, the hometown where you live, date of birth, occupation, email, phone
- Product information: Product price, quantity, the warranty period
- Consignee information: Usually recipient's address, consignee's note
- Payment information: Payment method (COD/ E-wallet), delivery date, shipping fee, total payable.
Assess the current situation and solutions
Through the survey, we found that most of the online sales websites are:
- Meets the majority of web value requirements
- The order section has all the information of the order
- But we still see some limitations
Many websites lack support for third-party logins, such as Google or Facebook, requiring users to repeatedly enter their recipient information for each purchase This can result in errors, like incorrect phone numbers or addresses, complicating the order tracking process and leading to significant limitations in managing order information.
- Many websites do not yet support product recommendations for users: they have not taken full advantage of the ability to increase users' purchasing decisions
- The multi-page interface is a bit complicated for users, not giving a good feeling when using
System Requirements
- Building an online shopping website for the user group is Guest (visitor) and User (users who already have an account)
- Building an online management website for the group of users who are Admins (administrators of the system)
Build an online shopping application for the user groups Guest (visitors) and User (users who already have an account).
Functional and non-functional requirements
- Build a complete website and application with all the basic features of a basic e-commerce website
- Make sure to complete the stated functions of each user group
- Ensure good quality of user experience
List of actors
Overview of the actors in the system
1 Guest New customer or user who has not logged in to the system
2 User The user has an account in the system
System Overview Usecase
TP-GUEST-01 Sign up Sign up for an account
TP-GUEST-02 Login Log in to the system
TP-GUEST-03 View product details View product details
TP-GUEST-04 Manage shopping cart Manage shopping cart
TP-GUEST-05 Add to cart Add product to cart
TP-GUEST-06 Search product Search for products in the shopping cart
TP-GUEST-07 Filter product Filter the displayed products to the list
TP-GUEST-08 Sort products by price Display product list by ascending or descending TP-GUEST-09 Chat with support Chat with the system for support
TP-GUEST-10 Compare products Compare product information of the same type TP-USER-01 Payment Proceed to payment (COD or Paypal)
TP-USER-02 Review purchased products
TP-USER-03 Personal information management
Manage personal information (name, address, profile picture, phone number)
TP-USER-04 Order management Manage the status of your orders TP-USER-05 Manage notifications Manage individual notifications
Manage your installments TP-ADMIN-01 Product management Manage products in the system
TP-ADMIN-02 Color management Color management in the system TP-ADMIN-03 Brand management Brand management in the system
TP-ADMIN-04 Product type management
TP-ADMIN-05 Product group management
Manage product groups in the system
TP-ADMIN-06 Attribute management Manage properties in the system
Manage ads in the system
TP-ADMIN-08 Order management Manage orders in the system
TP-ADMIN-09 View Notifications View announcements
TP-ADMIN-10 Reviews management Manage reviews
TP-ADMIN-11 View stats View statistics in the system (year, day, month) TP-ADMIN-12 User management Manage users in the system
Manage installment orders in the system
Detailed Description of Usecase
Usecase specification: Guest sign up
Name TP-GUEST-01 Sign up
Brief description Allow visitors to register for an account of the system
1 Customers who are not logged in to access the system
2 Customers who are not logged in click on the "Register" button on the menu bar / Click on the "Personal" box at the bottom of the tab bar and click on the Login / Register box => select the Register box
3 Customers enter full personal information and email address then click
Internal server error The system displays the error message
The user has an email account or Facebook, Google account
Success Display a message of successful account registration and redirect the screen to the login page
Failed The system reports an error
Brief description Allow visitors to log in to the system
1 Customers who are not logged in to access the system
2 Customers who are not logged in click on the “Login” button on the menu bar/Click on the “Personal” box at the bottom of the tab bar and click on the Login/Register box
3 Customers enter their username and password and then press the “Login” button.
Internal server error The system displays the error message
“Login” scenario The user has previously registered an account in the system
Success Display a successful login message and go to the home screen Failed The system reports an error
Usecase specification: Guest view product details
Name TP-GUEST-03 View product details
Brief description Allows visitors to view product details
1 Customers who are not logged in to access the system
2 Customers click on a product they want to see in the product list
3 Customers can click on the "See more" button to see the full description of the product
4 Customers click on "Viewed products / Products you may like / Products of the same type" to see the corresponding product suggestions
5 Customers can click on the "Buy Now" button to add the product to the cart.
Internal server error The system displays the error message
Success The system moves to the product detail page and displays all the product information
Failed The system reports an error
Usecase specification: Guest manage shopping cart
Name TP-GUEST-04 Manage shopping cart
Brief description Allow visitors to add, remove or delete all products in the cart
1 Customers who are not logged in to access the system
2 Customers who are not logged in click on the “Cart” button on the screen
3 The customer selects the (+) or (-) button on the product that the customer wants to adjust
4 The customer chooses to delete all to clear the cart
Internal server error The system displays the error message
Success The number of products in the cart is updated successfully after each corresponding operation Failed The system reports an error
Usecase specification: Guest add to cart
Name TP-GUEST-05 Add to cart
Brief description Allow visitors to add products to the cart
1 Customers who are not logged in to access the system
2 Click to view product details
3 The customer chooses the color and clicks the "Buy now" button
Internal server error The system displays the error message
“Add to cart” scenario Customers can only add when they are on the product detail page
Success Successfully added product to cart
Failed The system reports an error
Usecase specification: Guest search product
Name TP-GUEST-06 Search product
Brief description Allow visitors to search for products they want to see
1 Customers who are not logged in to access the system
2 Customers click on the search bar, enter the keywords to find, and press the search button
Internal server error The system displays the error message
Success The system moves to the search page, displaying the searched products
Failed The system reports an error
Usecase specification: Guest filter products
Name TP-GUEST-07 Filter products
Brief description Allow visitors to filter the products they want to see according to their wishes
1 Customers who are not logged in to access the system
2 Customers select the desired filter on the website/swipe from the left to display the filter and select the desired filter
Internal server error The system displays the error message
Success The system filters out products on demand
Failed The system reports an error
Usecase specification: Guest chat with support
Name TP-GUEST-09 Chat with support
Brief description Allow visitors to chat with the system for support or advice
1 Customers who are not logged in to access the system
2 Customers click the chat icon/customer support box on mobile
3 Type what you need to support and press the enter/submit button
Internal server error The system displays the error message
Success The system responds to customer support requests
Failed The system reports an error
Usecase specification: Guest Compare products
Name TP-GUEST-10 Compare products
Brief description Allow visitors to chat to compare two products of the same type in the system
1 Customers who are not logged in to access the system
2 The customer clicks the compare button on the product listing page or the product detail page
3 Customers enter the name of the product they are looking for to select more products in the comparison box
4 Customers click on the product name on the comparison product box
Internal server error The system displays the error message
Success Successfully compare the information of two products Failed The system reports an error
Brief description Allow the User to pay a bill
1 Customers have logged in to access the system
2 The customer clicks on the cart
3 The customer clicks on the checkout button in the shopping cart
4 The user selects the delivery method
5 The user selects the payment method (COD and Paypal) and then clicks the pay button
Internal server error The system displays the error message
Success Display successful payment notification, a confirmation email is sent to customer email
Failed The system reports an error
Usecase specification: Review purchased products
Name TP-USER-02 Review purchased products
Brief description Allow users to give reviews, comment on purchased products
1 Customers have logged in to access the system
2 Customer clicks on order management item
3 The customer selects the delivery order item
4 The user chooses to view order details
5 The user selects the review button on the product bar that wants to leave a comment in the order
6 Customers proceed to choose the number of stars to rate and give comments
Internal server error The system displays the error message
The customer has successfully logged in and the customer has successfully received the goods for that product
Success User reviews of the product are saved
Failed The system reports an error
Usecase specification: Personal information management
Name TP-USER-03 Personal information management
Brief description Allow the user to manage the account (edit personal information)
1 Customers have logged in to access the system
2 Customers click on the account information/username on the personal page on the app
3 Customers change personal information in each input box
4 The user chooses to change the avatar image, the image is selected from the device
5 The user selects the "Change password" button to open the password change modal and proceed to enter the old password and then confirm
6 The user selects the "Save changes" button
Internal server error The system displays the error message
“Personal information management” scenario The customer has successfully logged in
Success Successfully updated personal information
Failed The system reports an error
Name TP-USER-04 Order management
Brief description Allows users to manage orders
1 Customers have logged in to access the system
2 Customers click on the ordered item on the website / click on the personal box and select order management on the app
3 Customers select the view details button to view order details
4 The user clicks on the Cancel Order button – for orders that have not been confirmed by the administrator
Internal server error The system displays the error message
Success Successfully manage your orders
Failed The system reports an error
Name TP-USER-05 Manage notifications
Brief description Allow users to manage notifications
1 Customers have logged in to access the system
2 Customers click on the notification box on the website screen / the message box at the bottom of the app
3 Customers click on the "Mark as viewed" button on any notice
4 Customer clicks on the "Delete" button
5 Customers select the box "Mark as read all"
6 Customer clicks on the “Clear All” button
Internal server error The system displays the error message
“Manage notifications” scenario The customer has successfully logged in
Success Successfully manage your notifications
Failed The system reports an error
Name TP-USER-06 Installment Management
Brief description Allow User to manage Installment Voucher
1 Customers have logged in to access the system
2 Customers click on the installment item on the website or click on the personal box and then choose to manage installments on the app
3 Customers select the view details button to view payment details
4 User clicks Cancel button - for installments not confirmed by the manager
Internal server error The system displays the error message
“Installment management” scenario The customer has successfully logged in
Success Customers successfully manage their installments
Failed The system reports an error
Name TP-ADMIN-01 Product management
Brief description Allow Admin to manage products in the system
1 Users access the system with admin rights
2 Admin click on the product management box and select the product list
3 Admin click on add product button
4 Admin adds images and other information of the product then click
5 Admin selects “Deactive” or “Active” to choose to show or hide the product to the user system screen
6 Admin press the "Edit" button to edit the product's information and click
7 Admin press the "Delete" button to delete the product you want to remove
Internal server error The system displays the error message
“Product Management” scenario The user is logged in as admin
Success Successful management of products in the system
Failed The system reports an error
Name TP-ADMIN-02 Color management
Brief description Allow Admin to manage colors in the system
1 Users access the system with admin rights
2 Admin click on the box "Manage products" and select "Color List"
3 Admin click on the “Add color” button
4 Admin adds color code and color name then click “Save”
5 Admin press the "Edit" button to edit the color information and click
6 Admin press the "Delete" button to delete the color you want to choose
7 Admin press the "List" button in the color code you want to see all the products with that color code
Internal server error The system displays the error message
“Color Management” scenario The user is logged in as admin
Success Successfully manage product colors in the system
Failed The system reports an error
Name TP-ADMIN-03 Brand management
Brief description Allow Admin to manage the brand in the system
1 Users access the system with admin rights
2 Admin click on the box "Manage products" and select "List of brands"
3 Admin click on the button “Add a brand”
4 Admin adds an image of the brand logo and brand name then click “Save”
5 Admin press the "Edit" button to edit the brand's information and click
6 Admin press the "Delete" button to delete the brand you want to select
7 Admin press the "List" button in the color code you want to see all the products under that brand
Internal server error The system displays the error message
“Brand management” scenario The user is logged in as admin
Success Successfully manage the brands of products in the system Failed The system reports an error
Usecase specification: Product Type Management
Name TP-ADMIN-04 Product type management
Brief description Allow Managers to manage product categories
1 Users access the system with admin rights
2 Admin click on the box "Manage products" and select "List of product types"
3 Admin click on the button “Add product type”
4 Admin adds product type logo image and name, price range, filter, attribute then click “Save”
5 Admin press the "Edit" button to edit the information of that product type and click "Save"
6 Admin press the "Delete" button to delete the product type you want to select
7 Admin press the "List" button in the color code you want to see all the products of that product type
Internal server error The system displays the error message
“Product type management” scenario The user is logged in as admin
Success Successfully manage all categories of products in the system Failed The system reports an error
Usecase specification: Product group management
Name TP-ADMIN-05 Product group management
Brief description Allow Managers to manage product groups
1 Users access the system with admin rights
2 Admin click on the box "Manage products" and select "List of product groups"
3 Admin click on the button “Add product group”
4 Admin adds the product group name then click "Save"
5 Admin press the "Edit" button to edit the information of that product group and click "Save"
6 Admin press the "Delete" button to delete the product group you want to select
Internal server error The system displays the error message
“Product group management” scenario The user is logged in as admin
Success Successfully manage product groups in the system
Failed The system reports an error
Name TP-ADMIN-06 Attribute management
Brief description Allow Manager to manage product attributes
1 Users access the system with admin rights
2 Admin click on the box "Manage products" and select "List of properties"
3 Admin click on the button “Add product attributes”
4 Admin adds the product attribute name then click “Save”
5 Admin press the "Edit" button to edit the information of that product attribute and click "Save"
6 Admin press the "Delete" button to delete the product attribute you want to select
Internal server error The system displays the error message
“Attribute management” scenario The user is logged in as admin
Success Successfully manage product attributes in the system Failed The system reports an error
Name TP-ADMIN-07 Advertising management
Brief description Allows the Manager to manage the ads in the system
1 Users access the system with admin rights
2 Admin click on the box “Manage products” and select “Ads list”
3 Admin click on the “Add ad” button
4 Admin adds name, ad image, start and end date then click “Save”
5 Admin press the "Edit" button to edit the information of that ad and click
6 Admin press the "Delete" button to delete the ad you want to select
Internal server error The system displays the error message
“Advertising management” scenario The user is logged in as admin
Success Successfully manage ads in the system
Failed The system reports an error
Name TP-ADMIN-08 Order management
Brief description Allow Managers to manage orders in the system
1 Users access the system with admin rights
2 Admin click on the box "Manage users" and select "List of orders"
3 Admin press the "Edit" button to confirm the order or update the order status and click "Save"
4 Admin press the "Cancel order" button to delete the selected order
Internal server error The system displays the error message
“Order management” scenario The user is logged in as admin
Success Successfully manage orders in the system
Failed The system reports an error
Name TP-ADMIN-10 Manage reviews
Brief description Allows the Manager to manage the reviews in the system
1 Users access the system with admin rights
2 Admin click on the box “Manage users” and select “List of reviews”
3 Admin presses the "Delete" button to delete negative product reviews
Internal server error The system displays the error message
“Manage reviews” scenario The user is logged in as admin
Success Successful management of reviews in the system
Failed The system reports an error
Name TP-ADMIN-12 User management
Brief description Allow Administrators to manage users
1 Users access the system with admin rights
2 Admin click on the user management button and select the list of users
3 Click on the “Purchase Orders” button to see a list of user orders
4 Click on the "Installment" button to view the list of users' installments
5 Click on the “Comment” button to see a list of user comments, management can delete user comments
6 Management can click “Upgrade/Downgrade” to change user permissions
Internal server error The system displays the error message
“User management” scenario The user is logged in as admin
Failed The system reports an error
Name TP-ADMIN-13 Installment management
Brief description Allow Administrators to manage installment
1 Users access the system with admin rights
2 Admin click on the user management button and select the list of installments
3 Click on the “Purchase Orders” button to see a list of user orders
4 Click on the “Create Installment Voucher” button to create a new installment voucher
5 Admin clicks on an installment coupon and clicks on the "Edit" button
6 Admin press the "Delete" button to delete the installment voucher
Internal server error The system displays the error message
“Installment management” scenario The user is logged in as admin
Failed The system reports an error
E-commerce modules
Add product to cart
Pay monthly due date installment
Pay monthly due date installment
Request an order for the COD payment method
Request an order for the COD payment method
Administration modules
Database diagram
1 ads Represent the object of banner ads, promotions
2 brands Represent a technology or electronic brand audience, such as Apple, Samsung,
3 categories Represent objects of product categories, such as smartphones, tablets, listening devices,
4 colors Represent the object the color of each product
5 groups Represent the object of products of the same type arranged in a group
6 installments Represent the object of installment applications
7 jwts Represent the object of expired jwt tokens
8 notifications Represent the object of the user's notifications as well as those of the admin
9 orders Represent the object of the orders that the user ordered
10 products Represent the object of products sold on the store system
11 reviews Represent the audience of user reviews who have purchased the respective product
12 selectors Represent the selection object for each specification
13 specifications Represents the specifications object for each category
14 users Represent users in the system, including customers and administrators
Database description
No Attribute Type Range Meaning
2 name String The display name of a product
3 pathseo String The slug string displayed in
URL path of each product detail page
4 bigimage Id The thumbnail image of a product
5 description String The description with the encrypted code generated from DraftJS
6 category Id The category of a product
7 brand Id The brand of a product
8 price_max Int32 The max price of a product generated from the color list
9 price_min Int32 The min price of a product generated from the color list
10 image ObjectId[] The array partial image of a product
11 specifications Document[] The array specification detail of a product
Id The unique id of each specification item
ObjectId[] The array of filter values of the specification
String The display name of the specification
String The display value of the specification
16 colors Document[] The array color detail of a product
Id The unique id of each color item
String The English name of the color item
19 colors.name_vn String The Vietnamese name of the color item
20 colors.amount Int32 The amount of color’s product
21 colors.price Int32 The temporary price of color’s product
Int32 The real price of color’s product
Id The image ID of each color’s product
String The link image of each color’s product
25 active Boolean Product’s active status
26 group Id The group id of a product
27 warrently String Warranty criteria of the product
28 reviewCount Int32 The number of review’s product
29 stars Double The rating of a product
30 desc_text String The description of a product, but an only string
31 height Double The height of a product
32 weight Double The weight of a product
33 width Double The width of a product
34 length Double The length of a product
35 real_price_max Double The real max price of a product
36 real_price_min Double The real min price of a product
37 circumstance String Product packaging status
38 included String Components in the box
No Attribute Type Range Meaning
2 name String The display name of a brand
3 image Id The image id of the brand
No Attribute Type Range Meaning
2 name String The Vietnamese name of a category
3 name_en String The English name of a category
4 pathseo String The slug string displayed in
URL path of each category page
5 image Id The thumbnail image of a category
6 specification ObjectId[] The array specification of a category
7 accessories Boolean This category is accessory or not?
8 description String The description with the encrypted code generated from DraftJS
9 filter Document[] The filter array of category
10 filter._id Id The specification id of each filter
11 filter.query String The query string to add to
12 price Document[] The price range array of each category
13 price.name String The price name of each price range
14 price.min Int32 The min price of each price range
15 price.max Int32 The max price of each price range
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a specification
2 name String The display name of a specification
3 selections Object[] The selection array of each specification
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a selector
2 name String The name of a selector
No Attribute Type Range Meaning
2 name String The common name of a group, suited for all products in a group
3 products Document[] The product array of each group
4 products._id Id The product id of each product in a group
5 products.name String The display name of each product in a group
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a color
2 name_vn String The Vietnamese name of a color
3 name_en String The English name of a color
4 code String The hex code of a color
No Attribute Type Range Meaning
2 auth_type String The authorization type of a user
3 confirmed Boolean User’s active status
4 role Int32 User’s role (admin, user)
5 firstname String User’s first name
6 lastname String User’s last name
7 image Id User’s avatar Id
9 auth_google_id String Google id user
10 auth_facebook_id String Facebook id user
11 token String The temporary token of a user
14 phonenumber Int32 User’s phone number
History of recently viewed products
No Attribute Type Range Meaning
2 like ObjectId [] The list of user id of those who like this review
3 content String The content of a review
4 user Id The owner of a review
5 product Id The product belongs to review
6 rating Int32 The rating range of a review
7 color Id The color’s product of a review
8 createdAt DateTime The time when a user creates a review
9 updatedAt DateTime The time when a user updates a review
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a notification
2 user id The owner of the notification
3 active Boolean The status of read or not read yet
4 content String The content of a notification
5 name String The name of a notification
6 type Int32 The type of notification (Ad,
7 image Id The thumbnail image of a notification
8 createdAt DateTime The time when the system creates a notification
9 updatedAt DateTime The time when the system updates a notification
10 link String The link of notification to redirect when clicking in
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a review
2 status Int32 The status of an installment
(pending, in process, finished, cancel)
3 paid Int32 The amount paid by the customer
4 active Boolean Installment’s active status
5 period Int32 The period of an installment
6 interest_rate Double The interest rate of an installment
7 prepay Int32 The prepayment amount of an installment
8 product Document The product belongs to an installment
9 product._id Id The id’s product belongs to an installment
10 product.color Id The color’s product belongs to an installment
Int32 The price’s product belongs to an installment
12 user Id The owner of an installment
13 detail Document[] The detailed payment history of an installment
14 detail.month Int32 The index month of the detail’s installment
15 detail.due_date DateTime The monthly installment due date
16 detail.payable Int32 The payable money of each month
17 detail.status Int32 The status of payment for each month (not due yet, finish, out of date)
18 createdAt DateTime The time when a user requests for installment
19 updatedAt DateTime The time when a user or an admin pay for an installment
20 debt Int32 The total amount the customer needs to pay
21 endedAt DateTime The time when installment ends
22 staff Id The staff in charge of making installment slips
23 startedAt DateTime The time when installment start
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for an order
2 total_price Int32 The total price of an order
3 total_quantity Int32 The total quantity of order’s products
4 paid Boolean Order’s payment status
5 payment_method String The payment method of an order
6 status Int32 The status of an order (not yet delivered, delivering, delivered)
7 confirmed Boolean Order’s confirmation status
8 active Boolean Order’s activate status
9 order_list Document[] The product list of an order
10 order_list.product Id The product id of each product in the product order list
11 order_list.name String The name’s product of each product in the product order list
12 order_list.price String The price’s product of each product in the product order list
13 order_list.image String The image’s product of each product in the product order list
14 order_list.quantity Int32 The quantity’s product of each product in the product order list
15 order_list.color Id The color’s product of each product in the product order list
String The color’s product of each product in the product order list
Int32 The phone number of the shipping
18 shipping_address String The address of the shipping
19 email String The email’s user who owns this order
20 user Id The owner of this order
21 createdAt DateTime The time when a user requests for this order
22 updatedAt DateTime The time when a staff change status for this order
23 note String The note of an order
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for an ad
2 active Boolean Ad’s activate status
3 name String The name of an ad
4 content String The content of an ad
5 link String The link of an ad
6 startedAt DateTime The time when the promotion’s ad will start
7 endedAt DateTime The time when the promotion’s ad will end
8 image Id The thumbnail image of an ads
No Attribute Type Range Meaning
1 _id Id Primary key Unique ID for a jwt
2 token String The token that expired
E-commerce Website
Screen Flow Diagram for e-commerce website Screen Flow description for an e-commerce website
B000 Header The header is displayed at the top of each page
The home page contains a list of ads, lists the best- selling products, the latest product list, a list of favorite products
B002 Cart Popover Cart button extension when a user hovers, only current cart info
The extension of the notification button when the user hovers, shows the latest notifications filtered by installment message, advertisement message, purchase message
The page introduces a list of products corresponding to each product type, with filters to help users find the optimal product
Describe the detailed information of each product, in addition to the list of related products, products purchased together
Users can submit installment requests for a product by installment standard
Users can enter other products to compare the detailed information and corresponding technical information for each product
The page introduces the list of products that are accessories and the list of accessories, with filters to help users find the optimal product
B010 Promotion Page The page introduces the list of promotions being applied at the store
B011 Cart Page Contains products that have been selected to buy but have not yet been checked out B012 Checkout Page
Include checkout information when ordering such as personal information, order information, shipping information, payment method
B013 Choose a shipping unit Modal Change delivery type
B014 User Info Page The page allows users to change personal information, change passwords mật
Modal Change to the new password
The page contains a list of the user's ordered orders
The corresponding detailed information description window for each order
B018 Review Modal Product review window when order is successfully shipped
The page contains the list of user's installment requests
The corresponding detailed information description window for each installment voucher
Page The page contains a list of user notifications
B022 Login Page Login page to the system with local login, facebook login, google login,
Forgot password window, the user confirms sending email to reset password
B024 Register Page New user account registration page
B025 Chatbot Modal The modal to send a Q&A message to the chatbot
Detailed specifications of each screen
1 Login Button Click to redirect to Login Page
2 Register Button Click to redirect to Register Page
3 Current Select Select denomination options to change denomination to all page
4 Language Select Select language options to change the language to all page
5 Menu items List item The menu item corresponding to each category
Home Page specification
1 Ad Slider List item Click to redirect to the ad’s link
Show Bestseller Products, Newest Products, Favorite Products
Cart Popover specification
1 Total quantity Label Display total cart’s quantity
2 Total money Label Show Bestseller Products, Newest Products,
3 Cart item’s image Image Image of each cart item
4 Cart item’s name Label Name of each cart item
5 Cart item’s color Label Color of each cart item
Notification Popover specification
1 User’s name Button Click to redirect to User’s Page
2 Notification Button - Hover to show Notification Popover
- Click to redirect to Notification’s User Page
3 Logout Button Click to logout
4 Notification’s banner Label Display notification groups, such as Purchase,
List item Display brief content of the notification
Search Recommended Popover
Search Recommended Popover specification
1 Search keyword Input Input the keyword of product you want to search
2 Search button Button Click to redirect to Search Page
List item Click to redirect to the Detail Page of the item
Products List Page
Products List Page specification
1 Category’s name Label Display category’s name
2 Brand list List item Click to filter by brand
3 Total data document List item Click to redirect to the Detail Page of the item
4 Compare Product Button Click to redirect to Compare Page
5 Price sort Select Click to sort by price
6 Product’s image Image Display product’s image
7 Product’s name Label Display product’s name
8 Product’s discount Label Display product’s discount
9 Product’s price Label Display product’s price
10 Product’s real price Label Display product’s real price
11 Product’s rating Icon Display product’s rating
12 Product’s review Label Display product’s review number
13 Filter banner Label Display filter name
14 Filter items Check list Display filter choices
15 Price from Input Input min price to filter
16 Price to Input Input max price to filter
17 Apply Button Click to filter by price
Detail Page specification
1 Category Label Display category’s name
2 Product’s name Label Display product’s name
3 Product’s price Label Display product’s discount
4 Product’s real price Label Display product’s price
5 Product’s discount Label Display product’s real price
6 Product’s rating Label Display product’s rating
7 Product’s review Label Display product’s review number
8 Group items List items Display group items
9 Color items List items Display color items
10 Status Label Display product’s status
11 Included Icon Display product’s included box
12 Warranty Label Display product’s warranty
13 Compare Button Click to redirect to Compare Page
14 Add to cart Button Click to add a product to the cart list
15 Request installment Button Click to redirect to Installment Page
16 Recently view Input Input max price to filter
17 You may also like Button Click to filter by price
18 Relative Products Menu item Display relative products
19 Description Menu item Display product’s description
20 Specifications Menu item Display product’s specification
21 Comments Menu item Display product’s comment
22 Reviews Menu item Display product’s review
23 Overall rating Label Display overall rating
24 Review number Label Display review number
25 Review filter List item Display review filter
26 Review item List item Display review item
27 Review like Button Click to like review
Installment Product Page
Installment Product Page specification
1 Product’s name Label Display category’s name
2 Page label Label Display product’s name
3 Product’s installment Label Display product’s discount
4 User information Label Display product’s price
5 Prepay percent Select Select prepay percent options
6 Period Select Select period options
7 Filter Button Click to generate more installment information
8 Prepay money Label Display prepay money
9 Total borrow Label Display total borrow
10 Detail installment List item Display detail installment
13 Request Button Click to request an installment
Compare Page specification
1 Product’s name Label Display product’s name
2 Discard Button Click to discard the product
3 View detail Button Click to redirect to the detail page
4 Search input Input Input keyword of product you want to compare
5 Dropdown recommend Select Recommended product options
6 Compare specification List item Compare information
Cart Page specification
1 Cart items Image Display ad’s image
2 Switch Switch Switch to add product item to checkout list
3 Minus quantity Button Click to minus item’s quantity
4 Quantity Label Display item’s quantity
5 Add quantity Button Click to add item’s quantity
6 Discard item Button Click to discard an item
7 Check out all Switch Switch to check all items
8 Checkout total price Label Display checkout total price
9 Checkout Button Click to redirect to Checkout Page
Checkout Page specification
1 Checkout items Label Display checkout items
2 Order’s note Input Input note for admin
3 Shipping company Label Display company shipping
4 Shipping method Label Display shipping method
5 User’s info Label Check user information
6 Total price Label Price information
7 Ship to a different place Switch Switch to show a form to enter different user info
8 First name Input Input first name
9 Last name Input Input last name
11 City Select Select city options
12 District Select Select district options
13 Ward Select Select ward options
14 Phone Input Input phone number
15 Payment method Radio button Select payment method choices
16 Submit Button Click to open Paypal SDK
User Info Page
User Info Page specification
1 User’s avatar Image Display User’s avatar
2 Change photo Button Click to choose a photo from the desktop
3 Change password Label Click to change the password
4 First name Input Display First name
5 Last name Input Display Last name
12 Save Button Click to save changes
Billing Information Modal
Billing Information Modal specification
1 Bill ID Label Bill’s ID
2 Close Button Click to close modal
3 Date of create Label Bill’s Date of create
4 Status of the bill Label Bill’s Status of the bill
5 Payment status Label Bill’s Payment status
6 Total of the bill Label Total of the bill
7 Payment method Label Bill’s Payment method
8 Reviews Button Click to open Review product Modal
9 Products list List item Bill’s Products list
13 Close Button Click to close modal
Installment information Modal
Installment information Modal specification
1 Installment ID Label Installment ID
2 Close Button Click to close modal
3 Installment products Label Display Installment products
4 Installment time Label Display Installment time
5 Installment status Label Display Installment status
6 Interest rate Label Display Interest rate
7 Staff in charge Label Display Staff in charge
8 Prepaid Label Display Prepaid money
9 Debt Label Display Debt money
10 Paid Label Display Paid money
11 Installment history List item Display Installment history
12 Money Input Input money you want to pay
13 Submit Button Click to close modal
14 Paypal Button Click to open Paypal SDK
Administration Website
Screen Flow Diagram for Administration Website Screen Flow description for Administration Website
A001 Dashboard Page Statistical management page for information about revenue, sales, and users
A002 Header Contains the main navigation commands for admin
The extension of the notification button when the user hovers, shows the latest notifications filtered by installment message, purchase message
A004 Login Page Login page for admin
List of new notifications sent by the system based on new order requests, new installment requests
A006 Side navigate menu Expanded menu area contains main management operations A007 Product management Page List of products in the system
A008 Product information Modal Detailed information for each product
Page List of categories in the system
Modal Detailed information for each category A011 Brand management Page List of brands in the system
A012 Brand information Modal Detailed information for each brand
A013 Color management Page List of colors in the system
A014 Color information Modal Detailed information for each color
A015 Group management Page List of groups in the system
A016 Group information Modal Detailed information for each group
Page List of specifications in the system
Modal Detailed information for each specification A019 Ad management Page List of ads in the system
A020 Ad information Modal Detailed information for each ad
A021 User Management Page List of users in the system
A022 Review management Page List of reviews in the system
Page List of purchases in the system
A024 Bill information Modal Detailed information for each purchase
Page List of installment requests in the system
Detailed information for each installment request
Detailed specifications of each screen
Dashboard Page specification
1 Overall revenue Label Display overall revenue
2 Successful orders Label Display successful orders
3 Successful installments Label Display successful installments
4 Session users Label Display session users
5 Year Input Input year to sort
6 Start date Input Input start date to sort
7 End date Input Input end date to sort
8 Filter Button Click to sort
9 Chart List item Display sort result
Product management Page
Product management Page specification
1 Search input Input Input keyword to search
2 Search button Button Click to get search results
3 Sort name Select Select options to sort by name
4 Sort price Select Select options to sort by price
5 Filter price from Input Input min price to filter
6 Filter price to Input Input max price to filter
7 Filter Button Click to filter by price
8 Filter status Select Select options to filter by status
9 Discard filter Button Click to discard filter or sort
10 Add product Button Click to add a new product
11 Product list List item Display product list
12 Review Button Click redirect to Review Page filter by this product
13 Deactivate Button Click to deactivate the product
14 Edit Button Click to edit product
15 Delete Button Click to delete the product
16 Activate Button Click to activate the product
Product information Modal
Product information Modal specification
4 Status of box Input Product’s Status of box
5 Included box Input Product’s Included box
10 Color detail list List item Product’s Color detail list
11 Delete partial images Button Click to delete partial images
12 Add partial images Button Click to add partial images
17 Specification list input Input Product’s Specification detail
Category information Modal
Category information Modal specification
2 English name Input Category’s English name
5 Change Photo Button Click to change the photo
7 Search specifications Input Input keyword of specification you want to add
8 Specification list List item Category’s Specification list
9 Delete specification item Button Click to delete specification item
10 Filter list List item Category’s Filter list
11 Price range list List item Category’s Price range list
Group information Modal
Group information Modal specification
2 Product item list List item Group’s Product item list
3 Add product Button Click to add a product item
4 Edit Button Click to edit product item
5 Delete Button Click to delete product item
6 Display name Input Group item’s Display name
7 Product Input Group item’s Product
8 Save Button Click to save changes
9 Cancel Button Click to discard changes
Specification information Modal
Specification information specification
2 Search for selector Input Input keyword of the selector to search
3 Add Button Click to add selector item
4 Selector list List item Specification’s Selector list
5 Delete Button Click to delete selector item
Ad information Modal
Ad information Modal specification
2 Change photo Button Click to change the ad’s photo
3 Name Input Click to add selector item
6 Start date Input Ad’s start date
7 End date Input Ad’s end date
User management Page
User management Page specification
1 Search phone Input Input phone number to search
2 Search button Button Click to get search results
3 Discard filter Button Click to discard filter
4 User list List item Display user list
5 Purchase Button Click redirect to Purchase Page filter by this user
6 Review Button Click redirect to Review Page filter by this user
7 Installment Button Click redirect to Installment Page filter by this user
8 Downgrade Button Click downgrade user from Admin to User
Installment information Modal
Installment information specification
1 Installment ID Input Display installment ID
2 Status Input Input to set installment’s staus
3 User Label Display the owner
4 Product Label Display the product
5 Period Input Display installment’s period
6 Interest Input Display installment’s interest
7 Prepaid Button Display installment’s prepaid
8 Staff in charge Input Display staff in charge
9 Start date Button Display installment’s start date
10 End date Input Display installment’s end date
11 History detail List item Display installment’s history
12 Debt Input Display installment’s debt
13 Money to pay Input Input the money user will pay
Order Information Modal
Order Information Modal specification
1 Created date Input Display order’s created date
2 Total bill Input Display order’s total bill
3 Order’s status Input Select to change order’s status
4 Payment method Input Display payment method
5 Payment’s status Input Display payment status
6 Receiver’s phone Input Display receiver’s phone
7 Receiver’s address Input Display receiver’s address
8 Receiver’s email Input Display receiver’s email
9 Order list List item Display order’s product list
E-commerce Mobile App
Screen Flow Diagram for Ecommerce Mobile App Screen Flow description for Ecommerce Mobile App
C001 Login Screen User login screen
C002 Register Screen Account registration screen
C003 Home Screen Application home screen
C004 Product Detail Screen The detail page screen of a product
C005 Cart Screen Screen User's shopping cart screen
C006 Checkout Screen User's checkout page screen
C007 Accessories Screen The display shows a list of accessories C008 Product Screen The screen displays a list of products
C009 Profile Screen Personal page screen
C010 User detail Screen Personal details page screen
Screen User order management screen
C012 Order detail Screen Order details screen
C013 Installment Screen Installment purchase screen
The page screen to manage the user's installment orders
C015 Installment detail Screen Installment details page screen
C016 Notification Screen Notification page screen
C017 Chatbot Screen Support chatbot page screen
C018 Compare Screen Product comparison page screen
C019 Advertising Screen The screen displays the ads
Detailed specifications of each screen
Home Screen Home screen specification table
1 Search bar Text input The user enters the content they want to search for and presses the "Search" button
2 Button cart Button Display the number of products in the cart, when clicked, it will go to the Cart screen
Tabview When pressed, it will move to the screen of your choice
Text input The password will be hidden when you enter it
Text Name of the respective product list
Flat list Show products corresponding to the category
7 Bottom tab Bottom tab navigation
When pressed, it will move to the screen of your choice
Product Detail Screen Product detail screen specification table
1 Info product Text, Image Display images of products along with information such as name, color, price
2 Group product Button Choose the option of the product that the customer wants to buy
3 Color product Button Choose the color of the product that the customer wants to buy
4 Buy now Button Add product to cart
Flat list Products are recommended just for you, which you might like
Text Display some other information about the product such as warranty, machine status
Text Detailed product description information in text form
Text Show the specifications of the product
Text, rating Presenting an overview of customer reviews for the product
10 Comment list Image, text Display username and comment content
Cart Screen Home screen specification table
Image Show a picture of the product
Text Show name, the color of the product
3 Price product Text Show the price of the product
Show the number of products, click the plus sign to add one product, and click the minus sign to remove one product
5 Total bill Text Display the total amount payable of the cart
Button If you are not logged in it will redirect you to the
Login screen Otherwise, you will be redirected to the Checkout screen
Checkout Screen Checkout screen specification table
2 Checkbox ship to a different address
Checkbox If you want to change the delivery address, please click the button, the new address input box will be displayed
Write what you want to note for the delivery
4 Shipping services Text Display the name, logo of the carrier, and the price
Checkbox If you want to change the delivery method, please click on the method you want to choose
6 Order detail Table Show details of your order
7 Payment method Checkbox Select the form of payment you want
8 Checkout button Button Click to proceed with the payment process
Product Screen
The brand buttons feature allows users to view all brands within a specific product category, displaying the number of products available for each brand When a brand is clicked, it reveals a corresponding list of products associated with that brand.
2 Sort button Picker Products will be sorted in the order you just selected
Button When you click it, you will be redirected to the comparison screen
4 List of products Flat list Show all products in category
5 Filter by price range options
Checkbox When selected, all products within the price range will be displayed
Enter the price you want, from lowest to highest
Button Click to filter out the products in the price you just entered
8 Filter by feature Check box
A list of products with the attribute you just selected will be displayed
User detail screen Profile screen specification table
2 Change avatar Button Clicking will open the photo store on your phone to select the photo you want to change
3 Info user Text, text input
Basic information of the user, you can click on it and edit the information
4 Change address Checkbox Click on it, the box to select a new address will appear, you will have to choose a new address
5 Change password Button When clicking on the password change modal will be displayed
6 Save change Button Save your changes
Re-enter the old password and confirm the new password
8 Confirm Button Confirm save the new password
4.4.3.2.7 C011 User order management screen (app)
User order management screen User order management screen specification table
You can enter the order you want to find here
2 Search Button Click to find the order you just entered
The product information in your order will be displayed
4 Detail Button Click the button to see product details
Order detail screen Order detail screen specification table
Show product information in the order
2 Review Button Click to open review modal
3 Info user Text Some information of the order
4 Close Button Click to disable modal
5 Close icon Icon Click to disable modal
6 Rating bar Rating Users can click to select the number of stars for the product
7 Comment Text input The user can enter his/her rating of the product
Button Users click to submit a review
Installment Screen Installment screen specification table
Display product information in installment form
2 Prepayment Picker Select the amount you want to prepay
3 Installment time Picker Choose the time you want to pay the installment
4 Filter button Button Click to display the installment details corresponding to the information you have just selected
5 Detail installment Table Show details of installment amount and time
6 Submit button Button Click to submit a payment request form
Display customer information registered for installment payment
8 Regulations Text Display the regulations in the installment payment
Text Displays frequently asked questions in installment payments
Installment management screen Installment management screen specification table
Show product information in the coupon installment
2 Debt Text Displays the amount owed
3 Prepay Text Show the amount paid
4 Detail Button Click to open installment coupon details
5 Cancel Button Click to cancel the installment coupon
Installment detail screen Installment detail screen specification table
Show product information in the coupon installment
Text Display payment coupon information
4 Money Input Enter the amount you want to pay
5 Confirm Button Click to pay the amount entered by Paypal
6 Close Button Click to close the modal
Notification Screen Notification screen specification table
Display notification name, content, and notification time
2 Options Button Click to open 2 more options
3 Viewed Button Click to mark read this notice and show details if it is an order or installment
4 Deleted Button Click to clear the notification
5 Viewed all Button Click to mark all notifications as read
6 Deleted all Button Click to clear all notifications
Text Displays the number of unread notifications
Compare screen Compare screen specification table
Text input Enter the name of the product to be compared
3 Product list Text List of selectable products for comparison
Button The product has been selected for comparison
Table Table comparing the parameters between the two products
In this tutorial, the team uses Visual Studio Code:
Run backend server
Clone or download the project from the Github link: https://github.com/ngotam1899/WebBanDienThoai.git
A folder named “WebBanDienThoai” will appear after cloning the project from Github or extracting the report attachment Proceed to the folder
Open the application running backend (be-phonestore folder)
After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `)
After the integrated Command Line window appears, run the command "npm install" to update the missing libraries and packages on the machine that the Project needs
Run the command line “npm run dev” to initialize the backend server with PORT of 3000
Run frontend server
Open the application running front-end Sales page (folder FE_WebBanDienThoi) and front-end Management page (folder CMD_WebBanDienThoai)
Do the same as steps 3, 4, 5 We get:
Run the command line “npm run dev” to initialize
Run chatbot server
Open the application running Chatbot (Chatbot folder)
After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `)
After opening the Command Line window, run the command “rasa run action” and `rasa run enable-api debug –cors “*”` in two different Command-Line windows to run the program.
Run mobile app
Open the application running Mobile App (mobileapp folder)
After opening the project with Visual Studio Code, select "Terminal" on the taskbar, select "New Terminal" (Or simply press Ctrl + `)
After the integrated Command Line window appears, run the command "npm install" to update the missing libraries and packages on the machine that the Project needs
After opening the Command Line window, run the command “npx react-native run-android” to run the app
Overview
This section mainly describes the method for planning, organizing, and managing the test process of the TellMe e-commerce system
System testing delivers essential insights throughout the testing phases, enabling a thorough assessment of the system against established criteria This process facilitates targeted improvements, ultimately enhancing the sales system's performance.
- Purpose: Test the main functions of the system (important)
Test scenarios
Currency change successful, scrolling between screens is still correct in currency
When accessing the installment page, clicking the filter plan button will not function properly due to an error that prevents the product price from being updated.
3 Guest The function to calculate the total amount in the cart
When adding or subtracting the quantity of a product or add another product type
4 User The function calculates the shipping fee when changing the delivery address
The user chooses another shipping address to check the system's shipping function
5 Guest Filter products by parameters and brands
The user performs product filtering in the product
Chapter 5: IMPLEMENTATION AND TESTING 111 listing page combined by brand and parameter