77 Figure 48: Product Detail Page mobile interface .... 78 Table 53: Product Detail Page mobile interface object .... 83 Table 56: User comment mobile interface object .... 86 Table 59:
INTRODUCTION
Reason for choosing the topic
In today's digital age, the online fashion industry has seen remarkable growth due to the expansion of digital channels, greater mobile access, and ongoing technological advancements This boom offers a significant opportunity for fashion-savvy entrepreneurs, providing a dynamic environment to establish their presence Whether you're starting a new venture or expanding an existing one, e-commerce offers a platform to launch and grow without the traditional costs of physical stores
Our capstone project goes beyond simply setting up an online fashion store We aim to create a seamless and user-friendly experience accessible on both web and mobile platforms Understanding the critical importance of personalized engagement, our project includes an advanced recommender system This feature is designed to not only increase user satisfaction but also to transform the fashion retail landscape by utilizing technological innovations Our venture is set to explore and lead within the ever- growing field of e-commerce and fashion.
Purpose of project
This project aims to develop a comprehensive fashion store accessible via web and mobile platforms, emphasizing user convenience, stability, and security By incorporating a robust recommender system that analyzes user preferences and product interests, we intend to elevate the overall user experience and satisfaction, distinguishing our fashion store in the digital marketplace.
Object & scope
- The primary goal of this project is to create a robust online fashion store that functions seamlessly on both web and mobile platforms We aim to develop a user-centric environment where customers can easily browse, purchase, comment on, and rate products from top brands Our objective is to enhance the online shopping experience through a user-friendly interface and personalized engagement, featuring a sophisticated recommender system By leveraging technological advancements, we strive to revolutionize the traditional fashion
2 retail landscape, focusing on stability, security, and efficiency
- This project's scope includes a comprehensive range of functionalities for users, shippers, and administrators Users will have access to a feature-rich interface for purchasing, viewing, searching, and interacting with fashion items Shippers will be provided with tools to accept orders, report delivery status, and access shipping history effortlessly Administrators will be able to efficiently manage products, user accounts, and invoices Additionally, the integration of a recommender system will analyze user preferences to offer tailored product recommendations Ultimately, this project aims to create a secure, stable, and interactive online fashion store, positioning itself as a reliable and user-friendly platform in the competitive e-commerce market
- Project scope: " Building a fashion store website/app" is the topic's project scope.
Expected results
- The anticipated outcomes include the development of a dynamic fashion marketplace where users enjoy seamless interactions, from browsing and purchasing to commenting and rating The integration of a reliable recommender system is expected to enhance engagement and satisfaction by providing personalized product suggestions based on user interests Streamlined functionalities for shippers and administrators will ensure efficient order management and administrative control, contributing to a successful, user-centric online fashion store accessible on both web and mobile platforms.
THEORETICAL BASIS
System Architecture
In our front-end development, we employ React JS and Flutter, along with Bootstrap to enhance the user experience For the back-end, we leverage Java and Spring Boot for API development Our database solution is powered by MySQL The overall system architecture follows the Client-Server Model, strategically taking advantage of the flexibility and performance benefits provided by these integrated technologies
Libraries
Library Version Description axios 1.5.1 A promise-based HTTP client for the browser and Node.js It simplifies making asynchronous HTTP requests customize-cra 1.0.0 A package for customizing Create React App configuration without ejecting js-cookie 3.0.5 A simple, lightweight JavaScript API for handling cookies react and react-dom 18.2.0 React is a JavaScript library for building user interfaces React DOM is the entry point for working with the DOM react-app-rewired 2.2.1 A package that allows you to customize
Create React App configuration without ejecting react-bootstrap- pagination-control
1.0.5 A pagination control component for React
Bootstrap react-router-dom 6.16.0 A collection of navigational components for
React applications that enables declarative routing react-scripts 5.0.1 Configuration and scripts for Create React
App web-vitals 2.1.4 A library for measuring key web vitals and sending the data to Google Analytics babel-plugin- module-resolver
5.0.0 A Babel plugin that allows you to specify custom module directories
Library Version Description l 3.0.1 Starter for building web, including
RESTful, applications using Spring MVC Uses Tomcat as the default embedded container mysql 8.0.33 This driver supports auto-registration with the Driver Manager, standardized validity checks, categorized SQLExceptions, support for large update counts org.springframework.security 6.2.0 Spring Security is a powerful and highly customizable authentication and access-control framework It provides protection against attacks like session fixation, clickjacking, cross site request forgery, com.google.oauth-client 1.34.1 Google OAuth Client Library for
Java Functionality that works on all supported Java platforms com.google.apis v1-rev171-
Cloud Storage JSON API V1 com.fasterxml.jackson.core 2.16.0 General data-binding functionality for Jackson: works on core streaming API com.google.code.gson 2.10.1 Used to convert Java Objects into their JSON representation It can also be used to convert a JSON string to an equivalent Java object
6 io.jsonwebtoken 0.12.3 realize the jwt for java web application base on io.jsonwebtoken jjwt com.google.firebase 9.2.0 Firebase Messaging mysql 0.0.3 mysql is a Python package that provides tools for working with MySQL databases mysql-connector-python 8.2.0 mysql-connector-python is a Python interface for the MySQL client library, facilitating the connection and interaction with MySQL databases mysqlclient 2.2.0 mysqlclient is a Python interface for the MySQL client library, supporting connection and interaction with MySQL databases
Technology
React.js is an open-source JavaScript library developed by Facebook for building user interfaces It is popular for creating dynamic web applications using a component- based architecture, allowing for reusable and modular components React.js uses a virtual DOM to enhance performance and supports a unidirectional data flow for easier state management Its declarative syntax simplifies complex UIs, improving code readability and maintainability React.js is efficient in handling real-time updates and rendering large datasets, and it is often used alongside other libraries or frameworks
- Component-Based Architecture: React.js promotes code reusability and maintainability by building UIs as collections of modular components
- Virtual DOM Efficiency: React's virtual DOM minimizes actual DOM manipulations, ensuring efficient updates and optimizing performance
- Declarative Syntax: React's declarative nature simplifies complex UI development, making the code more readable and easier to understand
- Unidirectional Data Flow: React's unidirectional data flow facilitates state management and enhances application predictability
- Community and Ecosystem: A strong community and extensive ecosystem provide ample support, libraries, and tools, contributing to React's robustness
- Popularity and Adoption: Widespread adoption by major companies ensures React's long-term viability and continuous improvement, making it a reliable choice for web development
How apply Reactjs to build our project?
In our project, ReactJS is fundamental for front-end development, enabling a dynamic user interface
- Front-end Construction: React's component-based architecture streamlines code organization, ensuring a maintainable codebase
- Event Handling: React facilitates seamless responses to user interactions through functions responding to events like clicks or input changes
- Route Management: Incorporating React Router enhances navigation, ensuring intuitive updates based on URL changes
- API Interaction: React facilitates efficient data communication with the backend through technologies like Fetch API or Axios
In conclusion, our strategy maximizes ReactJS, empowering the creation of a robust, interactive web application with a responsive UI, effective event handling, streamlined navigation, and seamless API interactions
- Open-Source Framework: Bootstrap is a widely-used, open-source front-end framework for web development
- Pre-Designed Components: It offers a collection of pre-designed components, styles, and tools, simplifying the creation of responsive and visually appealing websites
- Responsive Grid System: Bootstrap's responsive grid system allows developers to design interfaces that adapt seamlessly to different screen sizes
- Comprehensive Documentation: Extensive documentation and active community support make Bootstrap a go-to choice for developers
- Efficiency and Consistency: Bootstrap enhances efficiency and consistency in building modern, mobile-friendly web applications
- Responsive Design: Bootstrap's responsive grid system and components ensure
9 your website looks good and functions well on various devices and screen sizes
- Time Efficiency: Using pre-designed components and styles, Bootstrap accelerates development, saving time and effort in creating a visually appealing and consistent UI
- Consistency: Bootstrap provides a uniform design across different browsers, maintaining a cohesive look and feel for your website
- Cross-browser Compatibility: Bootstrap handles cross-browser issues, reducing the need for extensive testing and adjustments
- Customizable: Bootstrap is customizable, allowing developers to tailor it to specific project requirements
- Mobile-First Approach: Bootstrap follows a mobile-first approach, prioritizing mobile responsiveness for a positive user experience on smartphones and tablets
- Extensive Component Library: It includes a rich set of UI components, like navigation bars and modals, which save development time and ensure a polished appearance
- CSS and JavaScript Functionality: Bootstrap offers predefined styles and JavaScript plugins that enhance functionality without extensive coding
- Open Source: As an open-source framework, Bootstrap is freely available, promoting accessibility and collaboration within the development community
How apply Bootstrap to build our project?
Bootstrap streamlines the process of building user interfaces with its pre-designed components and responsive grid system It simplifies creating visually appealing, user- friendly front ends, allowing efficient structuring and styling of web pages and reducing the complexity of interface development
Developed by Google, Flutter is an open-source UI toolkit for building cross- platform applications using the Dart language It provides a comprehensive set of pre- designed widgets for creating visually appealing and responsive UIs Flutter compiles natively for mobile, web, and desktop from a single codebase, ensuring high performance across platforms Its "hot reload" feature allows quick iteration during development, making Flutter a popular choice for building versatile and dynamic applications
- Cross-Platform Development: Write code once, deploy on iOS, Android, web, and desktop
- Consistent UI: Pre-designed widgets for a uniform user interface
- Hot Reload: Instantly see and test code changes for efficient development
- Performance: Native ARM code compilation ensures high performance
- Expressive UI: Allows easy implementation of complex designs and interactions
How apply Flutter to build our project?
Implementing Flutter for Our Project:
Android Application Development: Use Flutter to develop an Android app, ensuring compatibility with both Android and iOS devices through its cross-platform capabilities
Event Handling: Utilize Flutter's event handling mechanisms to respond seamlessly to user interactions, such as button clicks and gestures
Mobile UI Development: Leverage Flutter's rich set of widgets and UI components to build a visually appealing and responsive mobile interface with a declarative approach
Conclusion: Our strategy involves harnessing Flutter's cross-platform capabilities to build an Android app, prioritizing smooth event handling and creating an attractive, responsive mobile UI
Spring Boot: An open-source Java-based framework developed by Pivotal, designed to simplify building robust, production-ready applications It follows a convention-over-configuration approach for quick setup and deployment with minimal configuration Built on the Spring framework, it offers opinionated defaults for faster
12 development Spring Boot includes an embedded web server, facilitating the creation of standalone, deployable microservices or applications
- Rapid Development: Spring Boot minimizes configuration, enabling quick application development
- Micro-services: Ideal for micro-services architecture, offering easy deployment
- Spring Ecosystem Integration: Seamlessly integrates with the broader Spring ecosystem
- Embedded Server: Includes an embedded web server, simplifying deployment
- Community Support: Benefits from a large community for resources and solutions
- Production-Ready Defaults: Built-in features ensure applications are production- ready with minimal effort
- Wide Adoption: Industry-wide acceptance ensures ongoing support and updates
How apply spring boot to build our project?
To implement Spring Boot for our project with a focus on building APIs, connecting to a database, ensuring security with JWT, configuring Google Drive for image storage, utilizing Firebase for notifications, and integrating Google Translate for bilingual search, follow these key steps:
- Building APIs with Spring Boot: Develop robust APIs using Spring Boot, leveraging annotations and conventions for efficient backend development
- Database Connectivity: Connect Spring Boot to your chosen database (e.g., MySQL, PostgreSQL) using Spring Data JPA for seamless data interaction and management
- Security with JWT: Implement JSON Web Token (JWT) authentication using Spring Security to secure APIs Configure authentication and authorization using JWT tokens
- Google Drive Integration: Configure Spring Boot to interact with the Google Drive API for storing and retrieving images Utilize Google Drive service
13 integration for efficient image resource management
- Firebase for Notifications: Integrate Firebase Cloud Messaging (FCM) with Spring Boot to send push notifications Set up Firebase to enable real-time communication and delivery of notifications
- Google Translate Integration: Utilize the Google Translate API to enable bilingual search functionality Configure Spring Boot to interact with Google Translate for content translation and language support
In conclusion, our approach involves leveraging Spring Boot's capabilities to build a comprehensive project, including API development, database connectivity, JWT security implementation, Google Drive and Firebase integration, and bilingual search functionality with Google Translate
What is Client-Server model?
The client-server model is a computing architecture where tasks or processes are divided between clients and servers Clients, typically end-user devices, initiate requests, and servers, powerful computers or systems, respond by providing services or resources This model facilitates distributed computing, allowing efficient resource utilization and scalability
Why use Client-Server model?
- Resource Sharing: Enables centralized management of resources, facilitating
- Scalability: Allows for easy scaling by adding or upgrading servers to meet increased demand
- Centralized Control: Simplifies system management and maintenance through centralized control of resources and data
- Security: Provides a centralized point for implementing security measures, safeguarding data and resources
- Concurrency: Supports simultaneous access by multiple clients, promoting parallel processing and task execution
- Efficiency: Optimizes resource usage, as powerful servers can handle complex processing tasks, leaving lightweight clients for user interactions
- Easy Maintenance: Centralized updates and maintenance streamline system management
- Client Specialization: Clients can be tailored for specific purposes, optimizing their functionality and user experience
How apply Client-Server model to build our project?
- Implementing the Client-Server model for a fashion store project involves separating the code into distinct client and server components:
- Client: Built with web technologies (HTML, CSS, JavaScript) or mobile frameworks It interacts with the server via HTTP requests for tasks like fetching product details, processing transactions, and managing user authentication
- Server: Utilizes a backend framework like Django to manage data, business logic, and handle client requests It communicates with a MySQL database for storing and retrieving information on products, orders, and customers
- This architecture supports scalability across different machines and enhances maintainability by separating frontend and backend concerns, ensuring a structured and reliable system for the fashion store project
Many large and small businesses use MySQL, a fast and simple relational database management system MySQL AB, a Swedish company, is responsible for MySQL's development, marketing, and support MySQL, the most popular open source SQL database management system, is developed, distributed, and supported by Oracle Corporation:
- MySQL is a database management system
- MySQL software is Open Source
- The MySQL Database Server is very fast, reliable, scalable, and easy to use
- MySQL Server works in client/server or embedded systems
- A large amount of contributed MySQL software is available
There are good reasons for its popularity:
- MySQL is distributed under a license that is open-source Therefore, using it is free of charge
- MySQL is a powerful application on its own It handles a significant portion of the features of the most powerful and expensive database packages
- A standard version of the well-known SQL data language is used by MySQL
- PHP, PERL, C, C++, Java, and other programming languages are all supported by MySQL
- MySQL operates efficiently and quickly, even when dealing with large data sets
- PHP, the most widely used programming language for web development, is very compatible with MySQL
- MySQL can handle large databases with tables with 50 million or more rows
A table's file size limit is 4 GB by default, but you can theoretically go up to
8 million terabytes (TB) if your operating system can handle it
- MySQL can be changed The MySQL software can be customized by programmers to fit their particular environments thanks to the open-source GPL license
How apply MySQL to build our project?
Implementing MySQL for a fashion store project involves designing a relational database schema for product details, inventory, customers, and orders MySQL tables for products, categories, customers, orders, and transactions facilitate efficient data retrieval and updates, ensuring smooth store operations The database tracks product availability, customer orders, and transaction history, supported by MySQL's ACID compliance for data integrity and scalability to accommodate store growth Integrating MySQL provides a robust backend solution for effectively managing and organizing fashion store data
Flask is a lightweight and open-source web framework for Python It is designed to be simple, flexible, and easy to use, making it an excellent choice for building web applications and APIs Flask provides the essentials for web development without imposing a rigid structure, allowing developers to choose the tools and libraries they prefer It follows the WSGI (Web Server Gateway Interface) standard and comes with built-in support for unit testing
- Simplicity: Minimalistic design for easy understanding and quick development
- Flexibility: Allows freedom in choosing components and libraries
- Ease of Learning: Straightforward structure facilitates quick learning
- Micro-services/APIs: Ideal for lightweight micro-services and API development
- Extensibility: Easily integrates with third-party libraries and extensions
- Community Support: Active community provides resources and support
- Scalability: Scales effectively for larger applications while maintaining simplicity
- Pythonic: Follows Python principles, appealing to Python developers for clean and readable code
How apply Flask to build our project?
- Create API Endpoints: Develop tailored API endpoints in Flask for a recommender system, covering user preferences, authentication, and personalized recommendations delivery
- Design Routes: Structure Flask routes to manage user preferences, authentication flows, and generation of personalized recommendations within the recommender system
- Utilize Flask's Simplicity and Flexibility: Leverage Flask's simplicity and flexibility to efficiently handle HTTP requests, making it well-suited for building the backend of the recommender system
- Integrate with Backend Services: Seamlessly integrate Flask with backend services to communicate with the recommendation engine, ensuring effective
18 processing of user data and personalized recommendation delivery
- Ensure Efficient Data Flow: Capitalize on Flask's lightweight nature to ensure smooth data flow within the recommender system, crucial for swift information processing and optimizing overall performance
- Enable Easy Deployment: Deploy the recommender system with ease using Flask's deployment simplicity, enhancing scalability and responsiveness for delivering personalized content recommendations
TensorFlow is an open-source machine learning framework developed by the Google Brain team It facilitates the development and training of machine learning models, especially deep neural networks, for various applications like image and speech recognition, natural language processing, and more
- Versatility: TensorFlow supports a wide range of machine learning tasks, from simple linear regression to complex deep learning models
- Scalability: It can scale from running on a single device to distributed computing across multiple GPUs and TPUs, allowing for efficient handling of large datasets
- Community and Ecosystem: TensorFlow has a robust community and a rich ecosystem of tools, libraries, and resources for machine learning development
- TensorBoard: Integrated visualization tool (TensorBoard) for model performance analysis and debugging
- Deployment Options: TensorFlow models can be deployed across various platforms, including mobile devices and the web, ensuring versatility in deployment
- Google Integration: Developed by Google, TensorFlow integrates seamlessly with other Google services and technologies
- Flexibility: TensorFlow offers flexibility in terms of model design, enabling researchers and developers to experiment with different architectures
- High Performance: Optimized for performance, TensorFlow leverages hardware acceleration for faster training and inference
How apply TensorFlow to build our project?
Leveraging TensorFlow for our project involves:
- Utilizing pre-trained models like ResNet, Inception, and MobileNet for feature extraction from products
- TensorFlow's extensive library of pre-built models simplifies image recognition and enhances our recommendation system's efficiency
- Fine-tuning or retraining these models with our dataset personalizes recommendations based on user preferences
- TensorFlow's scalability ensures optimal performance, even with large datasets
- TensorFlow's deployment options enable seamless integration, providing a robust solution for leveraging deep learning capabilities in our recommendation system.
What is Client-Server model?
The client-server model is a computing architecture where tasks or processes are divided between clients and servers Clients, typically end-user devices, initiate requests, and servers, powerful computers or systems, respond by providing services or resources This model facilitates distributed computing, allowing efficient resource utilization and scalability
Why use Client-Server model?
- Resource Sharing: Enables centralized management of resources, facilitating efficient sharing and utilization
- Scalability: Allows for easy scaling by adding or upgrading servers to meet increased demand
- Centralized Control: Simplifies system management and maintenance through centralized control of resources and data
- Security: Provides a centralized point for implementing security measures, safeguarding data and resources
- Concurrency: Supports simultaneous access by multiple clients, promoting parallel processing and task execution
- Efficiency: Optimizes resource usage, as powerful servers can handle complex processing tasks, leaving lightweight clients for user interactions
- Easy Maintenance: Centralized updates and maintenance streamline system
- Client Specialization: Clients can be tailored for specific purposes, optimizing their functionality and user experience
How apply Client-Server model to build our project?
Applying the Client-Server model to a fashion store project involves:
- Structuring code into client and server components
- The client, built with web technologies or mobile frameworks, interacts via HTTP requests for product details, transactions, and user authentication
- The server, powered by frameworks like Flask or Django, manages data, business logic, and client requests
- Communication with a MySQL database facilitates storing and retrieving product, order, and customer information
- Separation supports scalability across different machines and enhances maintainability by isolating frontend and backend concerns
- This architecture ensures a structured codebase, fostering collaboration and system reliability for the fashion store project
Machine Learning (ML) is a field of artificial intelligence (AI) that focuses on the development of algorithms and statistical models enabling computers to perform tasks without explicit programming It involves the use of data to train models, allowing systems to learn patterns, make predictions, and improve performance over time
- Neural Networks (NNs): ML, particularly Neural Networks, excels in learning complex patterns and structures within data, making it valuable for tasks like image recognition and natural language processing
- Recommender Systems: ML powers recommender systems, providing personalized suggestions based on user behavior and preferences, enhancing user experience and engagement
- Automation: ML automates decision-making processes, saving time and resources in tasks ranging from data analysis to system optimization
- Adaptability: ML models, including NNs, adapt to evolving data, ensuring continuous improvement in performance and accuracy
- Efficiency: ML-driven recommender systems optimize content delivery, enhancing user satisfaction and boosting business revenue
Apply Machine learning to build our project?
SYSTEM REQUIREMENTS CAPTURING AND MODELLING 3.1 Surveys
Surveys on consumer demand
- A recent survey by Milieu Insight on Lazada's online consumer behavior in Southeast Asia indicates a substantial shift, with 73% of users considering online shopping an integral part of their daily lives—a significant increase from around 60% two years ago Vietnam's digital economy leads Southeast Asia in growth, expecting a 28% GMV surge from USD 18 billion in 2021 to USD 23 billion, primarily fueled by a 26% e-commerce uptick
- Despite a slight dip in average spending per customer, 80% of consumers persist in online shopping, prioritizing comfort and convenience Key search terms include men's clothing, women's handbags, skincare, and electronics The Tet gift season is anticipated to further boost online shopping Khôi Lê from Meta observes a continued trend of online "checkout" for various categories, with rising order values, reaching an average of USD 50 in 2022, up from USD 45 in 2021
Figure 16: Vietnam B2C e-commerce revenue in 2017-2022
Surveys on e-commerce websites
Advantages and Disadvantages of Shopee and Lazada
✔ Ensures swift access for user-friendly operation
✔ Presents an aesthetically pleasing interface for effortless visibility
✔ Facilitates online support through a seamlessly integrated chat box connecting buyers with sellers
✔ Features intuitively located functions for ease of use and implementation
✔ Offers logical navigation during the product information examination process
✔ Comprehensively outlines website content, covering introductions, policies, and collaboration-affiliation details
✔ Demonstrates compatibility across various screen types, including laptops, tablets, and smartphones
Table 3: Advantages and Disadvantages of Shopee and Lazada
Advantages and Disadvantages of Amazon
✔ Enables multilingual support for a diverse user base
✔ Boasts a straightforward yet fitting and comfortable interface
✔ Ensures easy access and implementation of functions through well-placed locations
✔ Provides logical navigation when clicking to explore product details
✔ Presents comprehensive information about the website, covering introductions, policies, and collaboration-affiliation details
✔ Demonstrates compatibility across a variety of screens, including laptops, tablets, and smartphones
- Only accept Paypal and master card as payment method
Table 4: Advantages and Disadvantages of Amazon
Advantages and Disadvantages of Amazon
✔ Enables multilingual support for a diverse user base
✔ Boasts a straightforward yet fitting and comfortable interface
✔ Ensures easy access and implementation of functions through well-placed locations
✔ Provides logical navigation when clicking to explore product details
✔ Presents comprehensive information about the website, covering introductions, policies, and collaboration-affiliation details
Disadvantages - There are many unnecessary ads
- Can only be used on mobile.
Functional requirements
1 Guest Users do not have any account
2 Customer Users have already had a customer account on this application
3 Admin Users have already had an admin account on this application
1 Register/Login Customer creates a new account/ login to website and application
2 Forgot Password Customer forgots password and want to get password again
Admin can add, update, delete the user information
4 Manage accounts Admin can view and ban accounts
5 Call customer for order confirmation
Admin can call customers to ask them for order confirm
6 Manage products Admin can add, update, remove product information
7 View all products Admin, guest and customer can see the product list
8 View all invoices Admin can see all invoices and filter them customer can only see his/her invoice history
9 View all users Admin can see the users list
Customer can choose a payment method
11 Rate products Customer can rate products
Customer can comment about products
13 Manage cart Customer can add, update, delete products from cart
14 Order acceptance Admin can accept or refuse COD orders, shipper can accept invoice to delivery
15 Notification Notify to admin when there is some customer do online payment and notify to customer when admin has some actions with their orders
16 Cancel order Customer can cancel order and get refund conditionally
17 Proceed payment Customer can pay for their order in two main ways which are COD and online
18 Refund Admin can refund customers when an order is canceled under some specific conditions
Non-Functional requirements
- User-friendly interface for easy navigation
- Swift data processing to ensure efficient system performance
- Strong security measures to protect customer's personal information
- Easy updates and future expansions through a user-friendly system
- Maintain data integrity to ensure customer trust and satisfaction.
Modeling requirements
- Edit product in cart list
Figure 21: Fashion Store System Usecase Diagram
Brief Description The way user website logins
Actor(s) All user login into system
This use case starts when the user wants to access the system
1 User select “Login” function on the system
2 The system displays the Login page
3 User enter the correct username and password then click "Log in"
4 The system will return the user to Home page
Enter the wrong login information
1 If the user enters an invalid password, the system will announce the username or password is invalid and ask the user to re-enter the password.
The user already has an account on the system
Success Log in successfully, the user accesses the system.
Failure Login failed, the user cannot log in.
Brief Description The way customer creates personal account
This use case starts when the user chooses the function to register
1 User chooses the "Register" function in the system
2 The system displays a Register page with information about username, password, phone number, email, address, …
3 Customer fills out the above information and presses the "Register" button
4 The notification system has successfully registered.
Fill out the information missing
1 The system requires re-fill and full information in the "Register" page.
Failed Account has already existed in the system
Success Register successfully, user create account successfully.
Failure Register failed, user created account failure.
This use case starts when the user selects a cart item to edit
Logged in Must be logged in
Table 10: Filter cart item usecase specification
Brief Description Process for user to checkout
This use case starts when the user checkout
1 Select products in the cart
2 Select location at the map page
4 Leave some note for shipper if the customer wants
Logged in Must be logged in
Select shipping location Select location for shipper to deliver the order’s package
Success Create a new order successfully
Failure Cannot create a new order
Table 11: Choose from cart to buy usecase specification
Brief Description Customer search for product
This use case starts when the user cancels an order
1 Move to Shop products page
Forget clicking Update cart before clicking
Check out render information of cart before clicking Update cart
Data cannot be empty Must have data in filter or searching text box
Table 12: Search product usecase specification
Brief Description The way user comment in product reviews
Actor(s) All customer login into system
This use case starts when the user wants to comment product
1 User select product from shop page
Fill out information missing User click Post button with empty comment textbox
The user already has an account on the system
Table 13: Comment product usecase specification
Name Add or edit product
Brief Description The way admin adds new product to shop
Actor(s) Just admin into system
This use case starts when the admin wants to add new product
1 Admin click in “Add new product” in Product Management
2 Admin fill in all information textbox of product
Fill out information missing Admin click add button with empty information textbox
The admin already has an account on the system
Success Add new product successfully.
Failure Add new product failed.
Table 14: Add product usecase specification
The way admin processes product from shop
This use case starts when the admin wants to process an order
2 Select action you want to update on this order status
Must be logged in The admin already has an account on the system
Table 15: Accept/Decline order (admin) usecase specification
The way admin manages customer accounts
This use case starts when the admin wants to manage accounts
2 View information or allow or ban this account
Must be logged in The admin already has an account on the system
Table 16: Manage customer account usecase specification
3.4.3.10 Add third-party delivery order (GHN)
Name Create new shipping order
The way admin create shipping order of a third-party shipping service (GHN)
This use case starts when the admin wants to manage accounts
2 Click on ‘Create delivery order’
Must be logged in The admin already has an account on the system
Success Create shipping order successfully.
Failure Create shipping order failed.
Table 17: Create new shipping order specification
SYSTEM DESIGN
Sequence diagrams
Figure 28: Checkout sequence diagrams Figure 27: Filter cart items sequence
Figure 31: Add or edit product
Figure 32: Accept/Decline order (admin) sequence
4.1.9 Add third-party delivery order (GHN)
Figure 33: Add third-party delivery order (GHN) sequence diagram
Figure 34: Manage customer account sequence diagram
Database design
Ord Attribute Type Domain Meaning Note
2 user_name varchar Username of account
3 password text Password of account
4 role varchar Role of account
5 status varchar Allowance status of account user
6 current_jwt text Current JWT of account
Use for avoid parallel login of account
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of staff
2 name varchar Name of staff
3 hometown varchar Home town of staff
4 position varchar Position of staff
5 birth_date date Birth date of staff
6 email varchar Email of staff
7 phone_number varchar Phone number of staff
8 account_id bigint Foreign Key Account ID of staff
9 avatar varchar Avatar URL of staff
Ord Attribute Type Domain Meaning Note
2 type varchar Type of notification
3 content text Content of notification
4 additional_data text Data attached to notification
5 receiver_login_account_id bigint Foreign
6 notification_date datetime Sent date of notification
Ord Attribute Type Domain Meaning Note
3 phone_fcm_token text Phone fcm token
Used for sending firebase notification
Table 21: device_fcm_token table
Ord Attribute Type Domain Meaning Note
2 product_management_id varchar Foreign
Product detail id of product importation
3 import_date datetime Date of importation
4 import_quantity bigint Product quantity of product importation
5 out_of_stock_date datetime Date that a product runs out
Table 22: product_import_manager table
Ord Attribute Type Domain Meaning Note
1 id varchar Primary Key Id of product detail
2 product_id varchar Foreign Key Id of product
5 available_quantity bigint product available quatity
6 sold_quantity bigint product sold quantity
7 one_star_quantity bigint product one-star rating
8 two_star_quantity bigint product two-star rating
9 three_star_quantity bigint product three-star rating
10 four_star_quantity bigint product four-star rating
11 five_star_quantity bigint product five-star rating
12 overall_rating int product overall rating
Ord Attribute Type Domain Meaning Note
3 product_management_id bigint Product detail ID
4 quantity int Quantity of cart item
5 buying_status varchar Buying status of cart item
Flag to determine cart item has been bought or not
6 select_status tinyint Select status of cart item
Flag to determine cart item that customer chooses to checkout
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of customer
2 name varchar Name of customer
5 account_id bigint Foreign Key Account ID of customer
6 country text Country of customer
7 address text Address of customer
8 city text City of customer
9 avatar varchar Avatar URL of customer
Ord Attribute Type Domain Meaning Note
3 Invoice_Date date Created date of invoice
4 payment_status varchar Payment status of invoice
5 order_status varchar Status of invoice
6 admin_acceptance varchar Admin acceptance status of invoice
7 Payment_method varchar Payment method of invoice
8 Reason text Failed reason of invoice
9 Refund_Percentage double Refund percentage of canceled order
10 Currency varchar Currency of invoice
11 Description text Description of invoice
12 total_price double Total price of invoice
13 online_payment_account text Online payment accounts that customer used to pay the order
14 admin_in_charge_id bigint Foreign key
Admin ID who in charge to solve the order
15 note text Note that customer want to leaves
19 Delivery_fee double Shipping fee of order
Ord Attribute Type Domain Meaning Note
3 shipping_order_code varchar Foreign
Code of GHN delivery order
4 ship_date datetime Date of finishing delivery
Ord Attribute Type Domain Meaning Note
Id of online payment account
2 receiver_account varchar Receiver account number of online payment account
3 receiver_name varchar Receiver name of online payment account
4 additional_info varchar Additional information of online payment account
5 type varchar Payment method of online payment account
Table 28: online_payment_accounts table
Ord Attribute Type Domain Meaning Note
1 Invoice-ID bigint Primary Key,
2 Product_Management_ID bigint Primary Key,
3 Quantity int Quantity of product
Table 29: invoice_with_product table
Ord Attribute Type Domain Meaning Note
3 product_color varchar Product color
5 comment_content text Comment content
6 comment_date datetime Created date of comment
7 like_quantity int Like quantity of comment
8 reply_quantity int Reply quantity of comment
9 reply_on bigint Id of the comment this comment replies on
If this is original comment, the value will be 0
Ord Attribute Type Domain Meaning Note
1 customer_id bigint Primary Key, Foreign Key Id of customer
2 comment_id bigint Primary Key, Foreign Key Id of comment
Ord Attribute Type Domain Meaning Note
2 name varchar Name of product
3 selling_price double Selling price of product
4 original_price double Original price of product
5 brand varchar Brand of product
6 discount double Current discount percentage %
7 description text Description of product
8 height double Height of product centimeter
9 length double Length of product centimeter
10 weight double Weight of product gam
11 width double Width of product centimeter
Ord Attribute Type Domain Meaning Note
1 product_id bigint Primary Key, Foreign key Id of product
2 color varchar Primary key Color of product
Table 33: product_images_management table
Ord Attribute Type Domain Meaning Note
1 catalog_id bigint Primary Key, Foreign key Id of category
2 product_id bigint Primary Key, Foreign key Id of product
Table 34: catalogs_with_products table
Ord Attribute Type Domain Meaning Note
1 id bigint Primary Key Id of category
2 name varchar Name of category
3 image varchar Image URL of category
User interface design
1 Home Button For customer to return to home page
2 Username Text For customers to input username
3 Password Text For customers to input password
4 Customer name Text For customers to input customer name
5 Email Text For customers to input email
6 Phone number Text For customers to input phone number
7 Register Button Register account to system
8 Login Button For customer to return to login page
1 Customer name Text For customers to input username
2 Email Text For customers to input email
3 Phone number Text For customers to input phone number
4 Username Text For customers to input customer name
5 Password Text For customers to input password
6 Show password Button Allows users to see the passwords they input
7 Confirm password Text For customers to input confirm password
8 Login Button For customer to return to login page
9 Register Button Register account to system
Table 37: Register mobile interface object
1 Home Button For customer to return to home page
2 User name Text For customers to input username of the account which want to reset
3 Email Text For customers to input email of the account which want to reset
4 Reset password Button Reset password request to the system
5 Login Button For customer to return to login page
Table 38: Reset password page object
1 Home Button For customer to return to home page
2 Username Text For customers to input username
3 Password Text For customers to input password
4 Forgot password Button For customer to reset password page
5 Sign in Button For customer to send login request to the system
6 Create account Button For customer to go to the register page
1 Username Text For customers to input username
2 Password Text For customers to input password
3 Show password Button Allows users to see the passwords they input
Button Stores usernames and passwords for subsequent use
6 Login Button For customer to send login request to the system
7 Register Button For customer to go to the register page
Table 40: Login mobile interface object
1 Translation Button For customer to open translation popup
2 Customer avatar Image Display customer avatar image
3 Customer name Text Display customer avatar name
4 Profile Button For customer to view the customer profile
5 Logout Button For customers to send a logout request to the system
6 Shop logo Image Display shop logo
7 Search Text For customer to input anything for search product
8 Search Button For customer to send search request to the system
9 Invoice Button For customer to go to the customer invoice page
10 Cart Button For customer to go to the customer cart page
11 Shop Button For customer to go to the customer shop page
12 Categories Button Display all category of product
13 Banner Image Display shop banner
Figure 44: Customer’s homepage mobile interface
1 Customer avatar Image Display customer avatar image
2 Side bar Button For customer to open side bar
3 Search bar Button Allows users to search for products
4 Categories Text Displays some categories of the shop
5 View categories Button Allows users to view all categories
6 Arrival part Text Show some new products
7 Product Image Display product’s image
8 Product information Text Shows the information of the product
9 Home Button Allows users to return directly to the home page
10 Notification Button Allows users to return directly to the notification page
11 Clothing Button Allows users to return directly to the clothing page
12 Shopping cart Button For users to go to the customer cart page
Table 42: Customer’s homepage mobile interface object
1 Hot discount Image Display hot discount background’s image
2 Product Image Display product’s image
3 Add to cart Button For customer to add that product to their shopping cart
4 View product Button For customer to view the product detail page
Table 43: Product homepage interface object
1 Translate text Text Allow users to enter what they want translated
2 Translate language Button Allows users to select the language they want translated to
3 Language list Text Shows all languages that can be translated
4 Translate result Test Displays translation results from the selected language
5 Translate Button Allows customers to send translation requests to the system
Table 44: Translate language interface object
1 Product large image Image Display the image of the product
Image Customers can select this image to display on large image
3 Zoom Button Customers can click here to zoom and see product details
4 Product’s brand Text Display the product’s brand
5 Product’s name Text Display the product’s name
6 Product’s rate Text Display the product’s rate
Text Display the product’s description
Text Display the product’s discount price
Text Display the product’s selling price
10 Product’s color Text Display all product's color
11 Product’s size Text Display all product's size
12 Product’s value Button Let customer increase or decrease the number of products they want to add to the cart
13 Add to cart Button Let customers send requests to add to cart to the system
Table 45: Product Detail Page Object
Figure 48: Product Detail Page mobile interface
1 Product image Image Display the image of the product
4 Product’s rate Text Display the product’s rate
5 Product’s status Text Display the product’s status
6 Product’s name Text Display the product’s name
Text Display the product’s discount price
Text Display the product’s discount price
Text Display the product’s selling price
10 Product’s color Text Display all product's color
11 Return Button Allows users to return to the previous page
12 Product’s value Button Allows users to enter the number of products they want to add to the cart
13 Add to cart Button Let customers send requests to add to cart to the system
Table 46: Product Detail Page mobile interface object
1 Shop description Button Display the shop description section
Button Display the product specification section
3 Customer review Button Display the customer review section
4 Customer rating Button Let customers vote on the product's rating
5 Rating Button Let customers to submit product reviews to the system
6 Comment Text Let customer to input a comment about the product
7 Comment Button Let customer to send a comment about the product
8 Cancel Button Let customer to cancel a comment about the product
Table 47: Rating product interface object
1 User avatar Image Shows the image that people have left comments on
2 User name Text Shows name that people have left comments on
3 Time Text Shows time that people have left comments on
4 Comment content Text Shows content that has received comments from users
5 Like Button Let customer to reaction any comment they want
6 Comment Button Customers can click on it to display the reply to the selected comment
7 Reply comment Text Customers can enter content to reply to comments
8 Reply comment Button Let customer to send a reply comment
9 Cancel Button Allow customers to cancel to send a reply comment
10 Reply comment Text Displays the content of reply comments
11 Close comment Button Allow customers to hide all reply comments
12 Another comment Button Allow customers to show more reply comments
Table 48: User comment interface object
1 Product’s size Button Allows users to choose product size
Text Display the product’s description
3 Previous comment Button Allows customers to view previous comments
Text Display the user comment name
5 Comment date Text Displays the date that user commented
6 Comment content Text Display user comment content
7 Reaction count Text Displays the number of people who have reacted to this comment
8 Reply Button Allows users to reply to selected comments
9 Reaction Button Allow users to react to selected comments
10 Show replies Button Displays comments that have replied to the selected comment
Table 49: User comment mobile interface object
Image Shows the image of the related product
Text Shows the information of the related product
3 Add to cart Button For customer to add that product to their shopping cart
4 Quick view Button For customer to view the product detail page
Table 50: Related products interface object
1 Search product Text For customer to input anything for search product
2 Categories Button For customer to input anything for search product
3 Brands Button Users can choose any brand to filter
4 Price Text Displays the price range that the user wants to filter
5 Price slider Button Users can click and drag and drop to adjust the price
6 Filter Button Users can click to send a filter request to the system
7 Return default Button Return all filter values to default
8 Sort product Button Customers can choose to sort by desired product name
9 Show Button Customers can see the number of products displayed on each page
10 Number of products Text Displays the total number of products available
11 Product’s image Image Display images of the product
12 Add to cart Button For customer to add that product to their shopping cart
13 Quick view Button For customer to view the product detail page
14 Product’s detail Text Display details of the product
15 Page Button Users can use it to navigate between product pages
Figure 53: Clothing page mobile interface
1 Product filter Button Allows users to filter products by category
2 Sale Text Show users products that are currently on sale
3 Product’s image Image Display images of the product
4 Product’s rate Text Displays the product's rating rate
5 Product’s detail Text Display details of the product
Table 52: Clothing page mobile interface object
1 Brands Button Users can choose any brand to filter
2 Price Text Displays the price range that the user wants to filter
3 Price slider Button Users can click and drag and drop to adjust the price
4 Filter Button Users can click to send a filter request to the system
5 Return default Button Return all filter values to default
6 Page Button Users can use it to navigate between product pages
1 Product’s image Image Display the product’s image
2 Product’s details Text Display the product’s details
3 Change Button Display a popup window for users to change product information
4 Product’s price Text Display the product’s price
5 Product’s quantity Text Display the product’s quantity
6 Product’s discount Text Display the product’s discount
7 Product’s total Text Display the product’s total price
8 Delete product Button Allow users to remove products from their cart
9 Continue Button Return to clothing page
10 Update Button The user sends a request to the system about the product he wants to pay for
11 Cart price Text Displays the total price of the shopping cart
12 Check out Button The customer sends a payment request to the system
Figure 56: Cart page mobile interface
1 Filter product Button Allows users to filter products in the shopping cart
2 Cart price Text Displays the total price of the shopping cart
3 Check out product Button Allows users to select products to check out
4 Product’s image Image Displays images of the product
5 Product’s detail Text Displays some product information
6 Product’s price Text Display the product’s price
7 Product’s quantity Text Display the product’s quantity
8 Delete product Button Allow users to remove products from their cart
9 Check out Button The customer sends a payment request to the system
Table 55: Cart page mobile interface object
1 Address Text Shows the address that was located
2 Search Text Allows users to enter the address they want to search
3 Search Button Allows users to send search request to the system
4 User location Button Obtain the user's address based on the device that is in use
5 Confirm Button Allows users to confirm location for delivery
6 Map Image Display the map to the user
7 User map location Text Displays the exact value of the user's location on the map
Table 56: Location selects interface object
Figure 58: Location selects mobile interface
1 Return Button Help users return to the shopping cart page
2 Search Text Allows users to enter the address they want to search
3 Clear Button Help users delete content they've entered
4 Map Image Display the map to the user
5 User map location Text Displays the exact value of the user's location on the map
6 User location Button Obtain the user's address based on the device that is in use
7 Confirm Button Allows users to confirm location for delivery
Table 57: Location selects mobile interface object
Text Display information of the checkout product
2 Product’s price Text Displays the price of the checkout product
3 Subtotal Text Displays the subtotal price of the order
4 Shipping fee Text Displays shipping fees based on the user's selected location
5 Total Text Displays the total price of the order
6 Payment method Button Allow users to choose payment methods of their choice
7 Confirm order Text The user sends an order confirmation request to the system
Table 58: Place order interface object
Figure 60: Place order mobile interface
1 Payment method Button Allow users to choose payment methods of their choice
2 Subtotal Text Displays the subtotal price of the order
3 Shipping fee Text Displays shipping fees based on the user's selected location
4 Total Text Displays the total price of the order
5 Confirm order Text The user sends an order confirmation request to the system
Table 59: Place order mobile interface object
Text Display information of the checkout product
2 Product’s price Text Displays the price of the checkout product
3 Account number Text Display account number for users when transferring money
4 Account name Text Display account name for users when transferring money
5 Payment content Text Display content for users to enter when transferring money
6 Payment price Text Shows the entire amount that the user needs to transfer
7 Confirm payment Button Verify your payment and get straight to the home page
Table 60: Confirm payment interface object
1 Return Button Help users return to the shopping cart page
5 Payment method Text Show payment method
3 Account number Text Display account number for users when transferring money
4 Copy Button Helps users quickly copy selected content
4 Account name Text Display account name for users when transferring money
5 Payment content Text Display content for users to enter when transferring money
6 Payment price Text Shows the entire amount that the user needs to transfer
7 Confirm payment Button Verify your payment and get straight to the home page
Table 61: Confirm payment mobile interface object
1 Profile image Image Show the user's profile image
2 Profile name Text Show the user's profile name
3 Profile email Text Show the user's profile email
4 Profile number Text Show the user's profile phone number
5 Profile address Text Show the user's profile address
6 Profile city Text Show the user's profile city
7 Profile country Text Show the user's profile country
8 Edit Button Allows users to send edit requests to the system
Table 62: Profile details page object
1 Profile image Image Show the user's profile image
2 Upload image Button Let’s users choose a picture from their personal computer
3 Save image Button Allows users to send image change requests to the system
4 Edit name Text Allows users to enter the name they want to edit
5 Edit email Text Allows users to enter the email they want to edit
6 Edit number Text Allows users to enter the phone number they want to edit
7 Edit address Text Allows users to enter the address they want to edit
8 Edit city Text Allows users to enter the city they want to edit
9 Edit country Text Allows users to enter the country they want to edit
10 Save Button Allows users to send requests to change information to the system
Table 63: Edit profile page object
1 Admin acceptance Button Users can filter invoices according to admin acceptance
2 Payment status Button Users can filter invoices according to payment status
3 Order status Button Users can filter invoices according to order status
4 Payment method Button Users can filter invoices according to payment method
5 Invoice information Text Shows the user the amount and origination date of the invoice
6 Invoice acceptance Text Displays the admin acceptance status of the invoice
Text Displays the admin payment status of the invoice
8 Invoice order status Text Displays the order status of the invoice
Text Displays the payment method of the invoice
10 Detail Button Take users to the page to view product information in the invoice
11 Page Button Allows users to move between invoice pages
Table 64: Purchase history page object
Figure 64: Purchase history mobile interface
1 Filter Invoice Button Display a popup page for users to filter invoices
2 Date Button Helps users filter invoices by date
3 Invoice id Text Displays invoice id information
4 Invoice information Text Displays some other information of the invoice
5 View detail Button Helps users navigate to the page to view detailed invoice information
6 Cancel Button Allows users to send requests to cancel invoices to the system
Table 65: Purchase history mobile interface object
Text Display information of the checkout product
2 Product’s price Text Displays the price of the checkout product
3 Account number Text Display account number for users when transferring money
4 Account name Text Display account name for users when transferring money
5 Payment content Text Display content for users to enter when transferring money
6 Payment price Text Shows the entire amount that the user needs to transfer
7 Return Button Takes the user to the Purchase history page
8 Cancel Invoice Button Allows users to send a request to cancel this invoice to the system
Table 66: Purchase detail interface object
Figure 66: Purchase detail mobile interface
1 Invoice id Text Displays information about the product's invoice id
2 Product’s image Image Show images of products in the invoice
Text Show information of products in the invoice
4 Product’s price Text Show price of products in the invoice
5 Product’s quantity Text Show quantity of products in the invoice
6 Invoice date Text Displays the date of establishment of the invoice
7 Payment method Text Displays the payment method of the invoice
8 Payment status Text Displays the payment status of the invoice
9 Total item price Text Total original price of the products
10 Total invoice price Text Total price of the invoice
Table 67: Purchase detail mobile interface object
1 Home Button Let the admin return to the client's home page
2 Username Text For admin to input username
3 Password Text For admin to input password
4 Login Button Allows admin to send a request for login to the system
Table 68: Admin login page object
1 Logo Image Displays the page's logo image
2 Home Button Direct admin to the exact admin home page
3 User Button Direct admin to the exact admin user page
4 Product Button Direct admin to the exact admin product page
5 Invoice Button Direct admin to the exact admin invoice page
6 Refund history Button Direct admin to the exact admin refund history page
7 Logout Button Allows admin to send a request for logout to the system
8 User Button Allows admins to filter users by status
9 User’s id Text Displays information about the user's id
10 User’s name Text Displays information about the user's name and their profile image
11 User’s email Text Displays information about the user's email
12 User’s level Text Displays information about the user's level
13 User’s status Text Displays information about the user's status
14 User’s detail Button Take the admin to the page to view user information
Table 69: Customer management page object
1 User’s image Image Displays information about the user profile's image
2 User’s name Text Displays information about the user profile's name
3 User’s email Text Displays information about the user profile's email
Text Displays information about the user profile's phone number
5 User’s address Text Displays information about the user profile's address
6 User’s city Text Displays information about the user profile's city
7 User’s country Text Displays information about the user profile's country
8 User’s status Button Allow admin to manage user account status: allow or ban
9 Cancel Button Admin returns to the invoice page
10 Save Button Admin sends request to change user status to the system
Table 70: Information detail page object
1 Create Button Allows admins to add a new product
2 Product’s id Text Displays information about the product’s id
3 Product’s name Text Displays information about the product’s name and image
4 Product’s brand Text Displays information about the product’s brand
5 Product’s price Text Displays information about the product’s price
6 Product’s discount Text Displays information about the product’s discount
7 Product’s quantity Text Displays information about the product’s quantity
8 Product’s detail Button Take the admin to the page to view product’s information
Table 71: Customer product page object
1 Invoice name Text For admin to input product’s name
2 Product’s brand Text For admin to input product’s name
Text For admin to input product’s selling price
4 Product’s discount Text For admin to input product’s discount
5 Product’s length Text For admin to input product’s length
6 Product’s weight Text For admin to input product’s weight
7 Product’s height Text For admin to input product’s height
8 Product’s width Text For admin to input product’s width
Text For admin to input product’s description
10 Product’s color Text For admin to input product’s color
11 Product’s image url Text For admin to input product image url
12 Product’s size Text For admin to input product’s size
13 Product’s quantity Text For admin to input product’s quantity
14 Cancel Button Admin returns to the product page
15 Save Button Admin sends request to add new product to the system
Table 72: Add product page object
1 Product’s image Image Displays images of the product
2 Product’s name Text Displays name of the product
3 Product’s brand Text Displays brand of the product
3 Product’s color Text Displays color of the product
4 Product’s quantity Text Displays quantity of the product
5 Product’s original price Text Displays original price of the product
6 Product’s selling price Text Displays selling price of the product
9 Product’s description Text Displays description of the product
14 Cancel Button Admin returns to the product page
14 Edit Button Admin go to the edit product page
15 Add color Button An additional interface appears for the admin to add other colors of the product
Table 73: Product detail page object
1 Start invoice date Text Allows admins to filter invoices by start date
2 End Invoice Date Text Allows admins to filter invoices by end date
3 Admin acceptance Button Admin can filter invoices according to acceptance
4 Payment status Button Admin can filter invoices according to payment status
5 Order status Button Admin can filter invoices according to order status
6 Payment method Button Admin can filter invoices according to payment method
7 Return default Button Allows admin to return to original filter status
8 Invoice id Text Displays the invoice id
9 Invoice date Text Displays the invoice date
Text Displays the payment method of the invoice
Text Displays the admin payment status of the invoice
12 Invoice acceptance Text Displays the admin acceptance status of the invoice
13 Invoice order status Text Displays the order status of the invoice
14 Invoice price Button Displays the total price of the invoice
15 Detail Button Allows users to invoice detail page
1 Invoice title Text Display the id and payment method of the invoice
Text Display information of the checkout product
3 Product’s price Text Displays the price of the product
4 Invoice price Text Displays the price of the invoice
5 Invoice status Button Allows admin to update invoice status
6 Return Button Bring admin back to invoice page
7 Confirm Button Admin can send request to update invoice status to the system
Table 75: Invoice detail page objec
IMPLEMENTATION AND TESTING
Implementation
First, our backend is development by mySQL database, we use mySQL to store data from customer and seller
After selecting the database for our project we choose VSCode is an extremely popular and very positive IDE for developers to create projects because VSCode can add extensions of the programming language to help them run on IDE easily and VSCode has the extension visual studio live share extension can let we join the project together on the host IDE and we can code or debug together, we can log in that extension via GitHub
First, the base technology we use to code around our project is ReactJS, that base on JavaScript programming language using Functional Component to create function for our project instead of Class Component
About Back-end development, we use Sping Boot framework of JAVA to write API, access to database and run handle events interacting with Google and Firebase
To make a mobile application for customers, we use Flutter – a framework of Dart language to build and handle events, API response and enhance UX of customers This can make our application more popular and user-friendly
- This is our Back-end file structure
Figure 80: Back-end file structure
- This is our mobile file structure
- This is our recommendation system file structure
Figure 82: Recommendation system file structure
- This is our Front-end file structure
Figure 83: Front-end file structure
Deployment
We deploy Front-end, Back-end and Recommender System on Vietnix
Link website and account information:
Link website Username Password admin 123 user 123
Testing
Figure 85: Add to cart successful
Figure 87: Product detail and add to cart
Figure 88: Cart page and choose product for checkout
Figure 90: Product detail and add to cart
Figure 91: Check out and choose method
CONCLUSION
Achievements
- We gained a lot of insight into React JS, Java spring boot, Flutter, mySQL, python and learned how to build front-end websites, back-end websites, write API, build databases and connect them We could also understand and apply other practical features into our projects such as translator, deployment Moreover, we could also improve our ability to develop and maintain a basic system, create and enhance business logic to complete the application
- Teamwork skills had a big leap of improvement Additionally, time and assignment management had a strong raise after doing this project because we had to balance the time of working on this project and the time at work or at school
- Making an online clothes-booking website, mobile app and recommendation system helped us a lot to practice our knowledge in real cases, gain more experience and also create a solution for our society
- We also archived knowledge about third-party services like Google translate, Google Drive, Firebase Messaging usage and implemented them in our application to solve difficult problems
- In the realm of e-commerce, our product focuses on a dual-platform solution— an integrated website and mobile app equipped with a recommender system Key functionalities include:
- Administrative Control: o Empower website administrators to manage user accounts seamlessly o Provide CRUD capabilities for administrators to handle crucial information related to products and categories
126 o Enable administrators to review orders and adjust order statuses in response to new orders
- Customer-Centric Features: o Facilitate product search and detailed viewing for customers o Allow customers to engage through comments and ratings o Provide a personalized shopping experience by allowing customers to select products based on color, size, and quantity, managing their cart accordingly o Streamline the checkout process with two payment methods—pay later and online payment—and enable customers to track their orders
- Enhanced User Interaction: o Enable customers to select shipping locations conveniently using an interactive map o Support user account functionalities, including login, account creation, password management, and information editing o Implement real-time push notifications for both customers and administrators
- Role-Based Authorization: Incorporate distinct roles for customers and administrators, fostering seamless interaction and bolstering data management and security
- User-Friendly Interface: Deliver a user-friendly interface across both the mobile app and website, prioritizing client comfort during service usage
- Flexible Payment Methods: Offer a variety of payment methods, providing clients with diverse options for purchasing goods within our system
- Client Support and Experience Enhancement: Integrate features such as a translator for searching, a product recommendation system, and leverage the Giao Hang Nhanh API to streamline delivery order management
This comprehensive approach ensures a robust and user-centric e-commerce experience, emphasizing versatility, security, and customer satisfaction.
Strengths and drawbacks
- User-friendly and easy-to-see interface, simple operations and functions make users feel comfortable while using the website and app
- A recommendation system is integrated into both the website and mobile app, aiming to enhance the overall user experience The presence of this system across both platforms ensures that users can enjoy personalized suggestions, contributing to a more engaging and user-friendly interaction, whether accessed through the website or mobile app
- Third-party variety makes this project become more convenient and easier for clients to use and for admin to manage data Moreover, developers also gain some benefits from it, which reduce effort and time to store and manage data, making it prone to maintain and develop this system in the future
- Having a product recommendation system that customers may like, helps increase store revenue and customer experience,
- Inability to track revenue: Currently, the system lacks the capability to automatically track and monitor revenue This limitation can pose challenges in evaluating business performance, managing finances, and making strategic decisions
- Inability to integrate direct online payment APIs due to bank API fees: The system faces constraints in directly embedding online payment APIs from banks due to transaction fees associated with the bank's API This limitation may complicate the payment system, impacting user experience and increasing operational costs.
Future improvements
With the aforementioned restriction, the topic "Building a fashion store" must have the following development guidelines in order to maximize customer happiness in the future:
- Enhance the user interface more
- Add reporting functions, statistics of items by time period, statistics of best- selling items More flexibility in administrative tasks
- Include more user payment options,
With the aforementioned development guidelines, the team is confident that the application's features will improve users' attempts to find themselves in the future when it enters the user market
1 Vov B Đ T (2023, January 7) Người Việt “chốt đơn” online đứng đầu khu vực
VOV.VN https://vov.vn/kinh-te/nguoi-viet-chot-don-online-dung-dau-khu-vuc- post995013.vov
2 Tutorial: Intro to React – React (n.d.) Legacy.reactjs.org https://legacy.reactjs.org/tutorial/tutorial.html
3 Spring Boot (n.d.) Spring.io https://spring.io/projects/spring-boot/
4 Flutter documentation (n.d.) Docs.flutter.dev https://docs.flutter.dev/
5 Chaurasia, Sonu (2023, March 16) Fashion Recommender system GitHub https://github.com/sonu275981/Fashion-Recommender-system
6 MySQL (2019) MySQL: MySQL Documentation Mysql.com https://dev.mysql.com/doc/
7 (2023) Vietnix.vn https://vietnix.vn/upload-website-len-hosting/
8 Bootstrap 5 Tutorial (n.d.) Www.w3schools.com https://www.w3schools.com/bootstrap5/
9 Sarwar, B., Karypis, G., Konstan, J., & Reidl, J (2001) Item-based collaborative filtering recommendation algorithms Proceedings of the Tenth International Conference on World Wide Web - WWW ’01 https://doi.org/10.1145/371920.372071
10 Fashion Product Images (Small) (n.d.) Www.kaggle.com https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-small