Quan Thanh Tho.The main functions of the system focus on developing a fashion shopping application with anintegrated image search feature attached with text-based adjustments.. 99 Figure
Problem statement
In today’s world, technology is changing how we shop, especially with smart image searches using artificial intelligence People can now find things similar to what they like just by taking a picture From movies to local shops and voice searches, technology is helping customers find what they want.
Furthermore, when considering people like moms, housewives, and teenagers, who see some- thing cool in a picture, a movie, or on social media such as Facebook and TikTok They want to keep up with trends on the internet and often wonder, “How do I find something like this?” and
“It will suit me better if I adjust this point a little.” That’s where visual image search comes in It lets customers search, explore, and discover where to buy things with just a few clicks, making it easy to turn inspiration into reality.
However, finding the right clothes can be tricky Regular search systems don’t quite get what users mean when they want something that looks a certain way While applications like Zalora and Shopee let users search for fashion items with pictures, they don’t let users adjust their searches based on colors or styles, making it a bit tricky to find exactly what they’re looking for. This becomes especially challenging as fashion items often require a lot of adjustment based on personal interests, going a different way from the standard models or samples For example, there is only a small difference between collarless and collar shirts, but without the option to search for them specifically, users might miss out on finding items that match their unique style.
Many fashion websites lack a smart way for users to search using images and adjust details like color or pattern This makes it hard for people to find exactly what they want.
Figure 1.1.1: Illustration for the Zalora image searching feature’s flow
In conclusion, existing fashion shopping websites face challenges that make finding the perfect clothes tricky Limited search options can make it hard for users to discover items that match their unique style preferences Therefore, there is a clear need to develop a fashion e-commerce system that will let users search using images and easily customize their searches.
Goals
Building on the identified problems earlier, we aim to make online fashion shopping better We want to do this by adding a cool feature: a smart image search where customers can tweak their search Regular search systems struggle to get what users really want in fashion Our goal is to let users search and discover fashion items in a way that fits their unique style This way,shopping online for the perfect outfit becomes simpler and more enjoyable for everyone.
In this project, we’ll talk about other similar research, the usual methods for making a fashion shopping system, look into models for Image Retrieval, and compare the results to show the strengths and weaknesses of these methods To do all the things mentioned, we’ll go step by step and deal with these problems:
• Develop an online fashion shopping model with convenient features for an enjoyable user experience.
• Research Image Retrieval, with a specific focus on the fashion domain.
• Research Image Retrieval with text-based adjustment, with a specific focus on the fashion domain.
• Search for suitable datasets, emphasizing fashion images that range from well-posed prod- uct shots to real-world consumer photos.
• Implement an Image Retrieval engine model that easily customizes with text-based ad- justments.
• Integrate the Image Retrieval engine into the online fashion shopping model, ensuring efficient and logical operation.
• Compare and evaluate results against traditional and related image query methods.
• Explore alternative approaches to enhance image search capabilities.
Scope
The system will work on both the website and a mobile app, making it easy for users to shop without any trouble Furthermore, within the scope of a capstone project, the group limits the specific research content and dataset as follows:
• The mobile application:The mobile app will be the main tool for customers to browse and buy fashion items It’s designed to be easy to use on phones and tablets The app will show recommendations, a clear list of products, a chat service, and an image-based search Our system has different deals like vouchers, loyalty programs, and easy online payment to bring in more customers It aims to give mobile users a great shopping experience that suits their needs and likes.
• Website: Alongside the mobile app, we’ll create a website that adds to the mobile experi- ence The website lets users access the fashion shopping system on regular web browsers on computers and laptops It will have the same features as the mobile app The website is for users who like shopping on desktops and broadens the system’s reach to various devices Additionally, the web app is a tool for admins to manage the system It will offer clear diagrams for admins and a service to update the system’s banners and contents.
• We also integrate Artificial Intelligence in some functionalities to improve the shopping experience for our users with:
– An image search engine leveraging deep learning methods.
– A chat service to provide assistance in finding clothes for users with feedback or text-based adjustment.
• The datasets used for image retrieval is DeepFashion.
• The datasets used for image search with text feedback are FashionIQ and our datasetAdidasIQ.
Thesis structure
This project is structured into 9 chapters, corresponding to the sequence of the steps in our team’s process of carrying out the project:
• Chapter 1 provides an overview of the project, explains what the project is about, the reason for our idea, and how we plan to do it.
• Chapter 2 examines stakeholders in the project, followed by an evaluation and comparison of four related works This helps us develop the best approach for the project.
• Chapter 3 indicates the technological foundation of the project, explaining our choices in this aspect.
• Chapter 4 initiates the system design by applying software engineering techniques to design functional workflows, databases, and software architecture Moreover, we also present how we address the Image Retrieval, Composed Image Retrieval problem and provide a wireframe demonstration overview of this project.
• Chapter 5 shows the evaluation of our approach to the Image Retrieval and ComposedImage Retrieval problem.
• Chapter 6 examines the system performance and presents test cases for implemented fea- tures.
• Chapter 7 provides details about deployment of developed system and associated consid- erations.
• Chapter 8 indicates our plans for the potential enhancement of this project.
• Chapter 9 presents the breakdown of project timeline.
In Chapter 2, the authors will analyze how the fashion e-commerce system should operate.This chapter focuses on exploring other similar systems, making comparisons to identify their strengths and weaknesses Then, conclusions are drawn about what our system needs to do and how it should operate.
Related works
Shopee
Launched in 2015, Shopee is the leading e-commerce platform in Southeast Asia and Taiwan.Shopee provides consumers an easy, secure, fast, and enjoyable online shopping experience through website and mobile applications that is enjoyed by tens of millions of consumers daily.
It offers a wide product assortment, supported by integrated payments and seamless fulfillment. Shopee commits to helping brands and sellers succeed in e-commerce and is highly tailored for each market in which it operates.
Shopee has many outstanding features:
• Multiple searching methods: keywords, categories, images,
• Encourages buyers to leave feedback and rating by virtual coins
• Capture customers through various campaigns, for promotions from free shipping, and discounts, to flash sales all year round.
• Allow users to source products in large quantities at wholesale prices ( new features )
• Supports various payment methods: online payment systems (ShopeePay), bank transfers, Shopee Coins
• Trade Assurance by offering refund or arbitration options
• Provides features for managing transactions, including order tracking, payment process- ing, and dispute resolution mechanisms.
• Provide a user-oriented design that offers an end-to-end online shopping experience for both retailers and customers, providing a personalized and social experience for its users.
• Follow customer-first philosophy including unique features of culture, language, and mar- keting strategies
From our observation, Shopee approaches the market in a very different way, especially with the mobile version They follow customer-first philosophy and they have successfully provided a customized online experience for their users through a proficient and friendly buying and selling environment This has served as one of the competitive advantages of Shopee, which includes unique features of culture, language, and marketing strategies in their operations for each market Besides, they capture customers through various campaigns, for promotions from free shipping, and discounts, to flash sales all year round Shopee also implements an image- searching system to help customers buy what they want more easily Shopee gives us a lot of things to learn from how to attract customers to how to gain customer satisfaction.
Nike
Nike is a very well-known company that makes sports shoes and clothing Their top product is quality sneakers for athletes Millions worldwide wear Nike shoes for activities like running and sports Nike helps athletes play better through shoe design and technology Their shoes offer comfort, support, and durability The cool Nike "swoosh" logo is easily recognized Beyond shoes, Nike sells sports shirts, shorts, and socks With star athletes, ads, and gear for sports, Nike grew into a leading global sportswear brand For over 50 years, Nike has provided functional sports footwear and apparel to help people excel.
Nike sells products directly to customers online to make shopping more convenient Their web- site and apps allow browsing the latest gear from anywhere This avoids trips to busy stores. Delivery to your door also saves time Nike’s apps stand out by offering special features No- tifications tell you about new product launches and sales The product selection is wider than physical stores could display Easy access to more choices and new launches keeps customers engaged Overall, Nike enhances customer experience through digital platforms like their web- site and mobile apps This multi-channel strategy balances in-store and advanced online sales. Their online system feature:
• Image searching and name searching
• Browse and purchase shoes, clothes, equipment
• View latest collections and new releases
• Save favorite products to the wishlist
• Track order status and delivery progress
• Get notifications about sales, new arrivals
• Access training plans and running tracks
• Connect with friends for motivation and challenges
• Scan product barcodes when in stores to learn more
• Watch sports and training videos
• Loyalty program with a gift for member customers
From our observation, since Nike started from a traditional store for selling to an online plat- form, their distinctive feature focuses on helping to connect between offline and online shop- ping According to their website and mobile app, they provide scanning product barcodes when in-store They also focus not only on selling but also on motivating use to do sport and buy their products In short, Nike has an approach very special to the customer through their online platform with special features They give us a new concept to build our app as well as how to attract more customers.
Zalora
Zalora is a major online fashion and lifestyle store serving markets across Asia Pacific They sell clothing, shoes, accessories, and more from top brands.
Their mobile app and website allow customers to conveniently browse and purchase items across categories like women’s, men’s, kids, and beauty products.
Key features of Zalora’s app include:
• Browsing products with category and subcategory navigation
• Search function to find specific brands or products
• Product recommendations tailored to customers
• Sale and clearance sections with discounted pricing
• Cart to organize selected items and simplify the checkout
• Order tracking system after purchase
From our observation, Zalora’s online platform focuses on user experience, they create a smooth system as well as classify items since fashion is a special field with many categories Besides, Zalora also provides users with an image searching tool, which is very convenient when users do not know the name or type of their desired items Zalora also makes special features like cashback and wallet which help to refund more easily as well as attract more users They give us a big system with a lot of categories as well as specific features for a fashion system.
Uniqlo
Unicloth is an e-commerce store specializing in affordable and stylish women’s fashion Their product range focuses on everyday staples like dresses, tops, bottoms, and accessories.
The Uniqlo shopping app offers customers a seamless experience browsing and purchasing items right from their mobile devices Some key features include:
Key features of Uniqlo’s app include:
• Intuitive categories and menus to navigate the expansive product selection
• Search functionality to quickly find specific items
• Detailed product pages with pricing, descriptions, images and size charts
• A smooth checkout process with saved payment methods and shipping preference
• User profiles to view order history and manage purchases
• Personalized recommendations based on browsing behavior
• Regular sales, specials, and exclusive app-only promotional pricing
From our observations, the Uniqlo app aims to connect its style-conscious female audience with budget-friendly fashion essentials, through an easy-to-use mobile platform It focuses as much on affordability and value as it does on discoverability and convenience Female consumers turn to Uniqlo for a fun, streamlined way to elevate their wardrobe without breaking the bank from their smartphones However, Uniqlo does not provide users with image searching systems as many other systems as well as cashback numbers or virtual coins From researching the Uniqlo system, we learn more about user behavior analysis and consumer journey tracking.
Comparison table
Features Shopee Nike Zalora Uniqlo Our system
Image searching Yes Yes Yes No Yes
Image searching with chat service
No No No No Yes
Multi-language Yes Yes Yes Yes Yes
Report review Yes Yes Yes No Yes
Personalized for users Yes Yes Yes No Yes
Loyalty program Yes Yes Yes No Yes
Order tracking Yes Yes Yes Yes Yes
Promotion and event Yes Yes Yes Yes Yes
Favorite list Yes Yes Yes Yes Yes
Table 2.1.1: Feature comparison table between related systems
Stakeholders
The stakeholders in this project can be divided into two main types: those directly involved with or using the system and those who may be indirectly affected.
• Customers: They are the main users looking to buy clothes When they use a fashion shopping app, their main goal is to find clothes that match their style, what they like, or something they’ve seen before on celebrities, social media trends, and TV The system in this project can support this demand, helping customers save a lot of time and find exactly the products they want.
• Store Employees:Also users of the system, their job is to answer lots of customer ques- tions and suggest clothing styles Many of these questions are about advice on clothes, styles, and sometimes specific pictures of what customers want, along with personal adjustment With the system’s help, store employees won’t have to go through tons of messages and images, then identify features and search in the inventory to respond to customers about the products they desire.
• Store Owner:The store owner is also a key user of the system, responsible for managing the store, inventory, and sales performance Using the system provides access to basic tools for statistics and easy inventory management Additionally, utilizing the system al- lows for keeping up with current trends on social media through user image queries.
• Fashion Brands: Although not direct users of the system, hold a significant stake in its im- pact on the fashion industry The system’s unique feature of image-based search, coupled with user-adjustable specifications, can significantly impact how fashion brands strate- gize and market their products This feature opens up opportunities for collaboration with influencers, celebrities, or models associated with the identified trends
System requirement
Functional requirement
– The system shall display products with relevant information such as product images, descriptions, pricing, availability, and specifications.
– Customers shall be able to apply filters based on criteria such as price range, size, color, and other relevant attributes.
– Customers can apply multiple sorting methods, including price, popularity, rele- vance, and customer ratings.
– Customers can search for specific items by entering relevant keywords or applying advanced filters.
– Customers can search for products using uploaded images.
– Customers shall upload an image either from their device or through a URL.
• Simple chat service for Product Search:
– The system provides a chat service to assist customers in searching for items and providing product recommendations.
– The chat service shall be capable of responding with appropriate product sugges- tions or search results.
– The chat service may ask clarifying questions to enhance the customer’s search ex- perience.
– Customers can use a virtual shopping cart to easily gather and keep track of the products they want before buying.
– The shopping cart will calculate the subtotal, taxes, and any applicable discounts, showing customers a clear summary of the total cost.
– Customers can order by selecting items, specifying quantities, sizes, and attributes, and proceeding to checkout.
– Customers need to give the address, contact info, and any extra instructions to order.
– The system will let customers see where their orders are, from when they’re placed to when they arrive.
– The system supports different ways to pay, like cards, digital wallets, or other ac- cepted methods.
– Customers can collect points by doing certain things, and use those points to get rewards or benefits.
– The system will tell customers about loyalty program changes, how many points they have, and special deals through notifications.
– Customers can leave reviews and ratings for products they have purchased.
– Customers can report any inappropriate review.
– Admins can handle products by adding new ones, changing existing info, and re- moving products from the system.
– Admins can change product info such as descriptions, prices, availability, and im- ages.
– Admins can control inventory by keeping track of stock quantities, and updating what’s available.
– Admins can set up the lowest and highest stock thresholds and get notifications when inventory reaches thresholds.
– Admins can handle customer orders by viewing order details and updating order status.
– Admins can cancel or change orders following certain rules or if customers ask.
– The system will let admins make different reports, like sales and user activity re- ports.
– The system has features for managing content, so admins can make or change pages, add or update banners, and handle product categories or collections.
– Admins have capabilities to configure and set up a loyalty program.
– Admins can set up different loyalty levels, say how points get earned, and decide what rewards each level gets.
• The system has basic features such as login, logout, register, and reset password for both admin and customer.
• Users need to provide their email address and password to access their accounts.
• The system allows admins to directly add, delete, or edit customer and admin accounts.
• Both applications allow UI customizations for customers such as language, and theme.
• Users can also switch between light mode and dark mode for better visibility.
Non-functional requirement
• The system will make sure browsing is quick and smooth, and all product pages load in 3 seconds or less.
• The image search feature will show results within 1 second after uploading an image.
• The checkout process should take 3 minutes or less on average.
• The key information, such as product details, pricing, and add-to-cart buttons, should be easy to see on one screen.
• The system needs to be available for users almost all the time, at least 99.9% of it, ensuring customers can browse and shop without the system being down very often.
• The search service will be available all the time, day and night, helping with any questions or support customers might need.
• The system’s mobile interface shall adapt to various screen sizes and resolutions.
• The design for touch devices will have buttons that are at least 44x44 pixels in size, making them easy to tap.
• The system will use secure communication protocols like HTTPS to encrypt data trans- mitted between the user’s device and the server.
• The system will follow industry standards like PCI DSS to securely store and manage sensitive customer data, including credit card information.
• The system should be able to recognize specific types of clothing, such as shirts, pants, dresses, and accessories, with a minimum accuracy of 70%
• Precision evaluation will occur through routine assessments utilizing a dataset comprising a minimum of 1,000 images.
In Chapter 3, the author will explore the technology side of the project The author ex- amines the technologies behind the mobile app, web interface, server infrastructure, database,and artificial intelligence components This chapter clarifies the reasons for technology choices,their strengths, and potential limitations, providing a clear view of the project’s technological foundations.
Mobile application development
Mobile applications are designed for touch-enabled mobile devices, prioritizing simplicity and intuitive user interfaces Developing for mobile requires a strong focus on delivering an excep- tional user experience, considering users’ on-the-go nature and limited attention span.
In the context of our fashion e-commerce system, the mobile app plays a crucial role, providing a convenient platform for customers to browse and purchase fashion products It offers person- alized recommendations, easy product search, secure payments, order tracking, and seamless social media integration These features enhance the shopping experience, allowing customers to explore trends, make confident purchases, and stay connected with our brand.
Mobile app development also faces the challenge of achieving responsiveness across different screen sizes and resolutions Responsive design techniques are employed to ensure a seamless user experience.
By prioritizing our mobile app, we enable customers to access our platform, browse products,and make purchases wherever they are The app empowers them to stay connected with our brand and enjoy a tailored shopping experience on their mobile devices.
Flutter, an open-source framework developed by Google, offers a powerful solution for build- ing beautiful and performant multi-platform applications It utilizes the Dart programming lan- guage, specifically designed for creating user interfaces Unlike frameworks like React Native, Flutter does not rely on native components but instead provides its own set of customizable widgets for constructing UI elements.
• Development of multi-platform applications from a single codebase.
• Code reusability, modularity, and a declarative programming style.
• Access to native device features and APIs.
• Rich set of customizable UI components
• Requires to learn the Dart programming language and the Flutter framework.
• Higher memory usage compared to some other frameworks.
• Limited Native Look and Feel.
In conclusion, after careful evaluation, while Flutter offers benefits such as highly efficient cross-platform development and a rich UI component library, we have determined that Flutter is not suitable for our project Our decision is primarily driven by the advantages of utilizingReactJS for web development and Node.js for the back-end server We believe that our chosen technology stack centered around JavaScript aligns better with our project requirements, pro- viding greater flexibility, code reuse, and familiarity for our development team Besides, our application is too complex and does not require high performance Therefore, we have decided not to proceed with Flutter for the development of our system.
React Native is a JavaScript-based framework widely used for building native mobile applica- tions Its cross-platform nature allows developers to leverage their JavaScript skills to create apps that run on both iOS and Android platforms Pros:
• Framework for building native apps using JavaScript.
• Cross-platform compatibility for iOS and Android.
• Hot reload feature for fast development cycles.
• Excellent for building simple applications.
• Not ideal for complex and computation-intensive applications due to subpar memory management.
• Potential security vulnerabilities due to JavaScript execution.
• Not the native language, which can lead to device compatibility issues.
• Requires platform-specific code for certain functionalities.
• May need to identify the platform and load different components accordingly.
• Bridging JavaScript code with native platform components can introduce complexities.
In conclusion, utilizing React Native for mobile app development, alongside ReactJS for the website front-end and Node.js for the back-end server, offers several advantages By leverag- ing a shared JavaScript codebase, we can achieve a more consistent development experience and maximize code reuse across platforms This approach streamlines the development process,enhances developer productivity, and reduces maintenance efforts Additionally, React Native’s ability to create cross-platform mobile apps enables us to reach both iOS and Android users without the need for separate development efforts Overall, adopting React Native alongsideReactJS and Node.js allows us to maintain a unified technology stack, facilitating efficient de- velopment and delivering a seamless user experience across web and mobile platforms.
Front-end web development
The front end is the part of our system that serves as the bridge between users and the underlying business logic of a system Users spend a significant amount of time interacting with the front end, creating, manipulating, and receiving data An intuitive and user-friendly front end can enhance user engagement by providing a seamless and enjoyable experience It allows users to perform tasks efficiently, reduces friction, and encourages them to explore and interact with the system more extensively.
A well-designed front-end brings numerous benefits to businesses and users It enhances user satisfaction, increases engagement, improves conversion rates, builds trust and positive brand perception, provides a competitive advantage, enables scalability and maintenance, and pro- motes accessibility and inclusivity By focusing on usability, visual appeal, responsiveness, and seamless interactions, a well-designed front-end creates a positive user experience, fosters user engagement, and contributes to the success of an application or website.
With a fashion web store, the role of the front-end maybe even more important through shaping the user experience, showcasing the products, and reflecting the brand’s aesthetic, etc Taking into account our requirements for the front-end, we assessed some of the most popular front-end options.
Angular is an open-source web application framework maintained by Google It uses TypeScript to enable building complex client-side applications with a component-based structure Angu- lar handles most common web app functionality out of the box like routing, HTTP requests, and coordinating frontend/backend communication Its main goals are to simplify development while promoting reusable code through modularity.
• Provides a complete solution for building large-scale applications.
• Two-way data binding simplifies the synchronization of data between the model and the view.
• Developed and maintained by Google, which provides extensive documentation, regular updates, bug fixes, and security patches.
• Hard to learn with many complex concepts.
• Lower performance due to the framework’s complexity and overhead.
• Hard to create SEO support due to Client-side rendering.
Given the smaller scale and simplicity of our e-commerce system, adopting a full-featured framework like Angular may introduce unnecessary complexity Besides, our team is not fa- miliar with Angular which may take us a lot of time to research it While Angular simplifies certain complexities, its primary focus is application functionality over SEO optimization and initial loading performance These are crucial for an e-commerce site to drive organic traffic and conversion Therefore, we decided to not move forward with this class of technologies.
Vue is a JavaScript framework for building user interfaces It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model. Two core features of Vue:
• Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
• Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
• Easy to learn and work with.
• Provides a two-way data binding system.
• Lack of scalability for large-scale project
• Lack of plugins for third-party integrations
In the context of our e-commerce system, third-party integration like a payment gateway is inevitable, which Vuejs does not support enough for us Not to mention the fact that our team is not familiar with Vuejs, as well as its small community, may create a big challenge for us to learn and complete our project in time Therefore, we decided to not move forward with this class of technologies.
React is a popular open-source JavaScript library for building user interfaces (UIs) It was devel- oped by Facebook and released in 2013 React allows developers to create reusable UI compo- nents and efficiently update and render them in response to changes in data or user interactions.
Next.js is a React framework for building full-stack web applications We use React Components to build user interfaces, and Next.js for additional features and optimizations.
Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more This allows you to focus on building your application in- stead of spending time with configuration.
• Next.js has many built-in optimizations like image, font, and script optimizations for im- proved UX and core web vitals.
• Server-side rendering and static site generation ensure faster page loads and better SEO performance.
• Automatic Code Splitting reduces the initial payload and allows for faster page loads,resulting in a better user experience.
• Virtual DOM helps to optimize performance and improve the overall efficiency of UI updates.
• Has no built-in state manager and has to install libraries like Redux.js or MobX manually.
• Limited flexibility since customization options might not suit every project’s specific requirements.
• Overwhelming for beginners due to its opinionated nature and learning curve.
Next.js is sustainably familiar to us, not to mention the fact that Nextjs supports fast develop- ment, which can help us to complete our system on time Static Site Generator (SSG) of Nextjs helps us to reduce page load time which is very important to improve UX for a website Be- sides, it helps improve SEO due to server-side rendering (SSR) Nextjs also provides built-in optimization for images that may appear frequently in our fashion store app This is one of the most important points that makes us choose Nextjs for our system.
Server development
Back-end development refers to the server-side implementation of an application that handles data processing, storage, and business logic It acts as the bridge between the front-end user interface and the database, providing the necessary functionality to support client requests and deliver dynamic content The back-end is responsible for data validation, security, and commu- nication with external APIs.
To meet the specific needs of our fashion e-commerce system, it is essential to prioritize the implementation of a modular server architecture By breaking down the server into separate services, each responsible for a specific functionality, we can achieve better maintainability and flexibility This modular approach will facilitate the addition of new features, updates to existing ones, and seamless scalability without disrupting other components of the system.
In addition to a modular architecture, it is crucial to ensure that our server can handle significant traffic and scale dynamically Our server architecture should be designed to handle substantial loads throughout the day, accommodating peak traffic during busy shopping periods By lever- aging cloud-based technologies, load balancing, and horizontal scaling techniques, we can en- sure uninterrupted service and optimal performance even during high-demand situations Our server infrastructure should be able to dynamically adjust to varying levels of traffic, providing a smooth and responsive shopping experience for our customers.
Moreover, optimizing our back-end server to efficiently utilize resources during low-traffic pe- riods, such as at night, can help maximize operational efficiency and minimize costs By imple- menting intelligent resource allocation and task scheduling mechanisms, we can ensure that our server operates optimally at all times, delivering consistent performance and responsiveness to users.
In conclusion, implementing these strategies lays a solid foundation for our back-end develop- ment We will now delve deeper into the technical aspects of our chosen technologies to create a powerful back-end server for our fashion e-commerce system This exploration will enable us to build a scalable infrastructure that supports our platform effectively.
Ruby on Rails, often referred to as Rails, is a web application framework written in Ruby It follows the Model-View-Controller (MVC) architectural pattern and focuses on convention over configuration Rails promotes rapid development through its code simplicity and emphasizes convention-driven development.
• Not the right fit for a complex app.
In the context of our system, where we aim to build a fashion e-commerce platform with high scalability and performance, it has been determined that Ruby on Rails (Rails) may not be the optimal choice This decision is based on factors such as the limitations in scalability and performance offered by Rails, as well as the critical need for flexibility and customization in our platform To meet our specific requirements, we will explore alternative frameworks that better align with our goals, ensuring the successful development of a fashion e-commerce platform that can scale effectively and deliver optimal performance.
Django is a high-level Python web framework that follows the Model-View-Controller (MVC) architectural pattern It provides a robust set of tools and libraries for rapid development, em- phasizing code reusability and "batteries included" philosophy Django incorporates an object- relational mapping (ORM) layer for database interaction.
• High-level abstractions and pre-built components
• Less-than-ideal architecture, with tightly coupled code.
In conclusion, after evaluating the specific requirements of our fashion e-commerce platform with a chatbot, it has been determined that Django may not be the most suitable choice Factors such as the need for real-time communication, rapid development, and highly interactive front- end components suggest that a lightweight framework would better align with our project goals. Therefore, we have decided not to use Django and will explore alternative options that better meet our specific needs and priorities.
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine It utilizes an event- driven, non-blocking I/O model, which enables efficient handling of concurrent connections.
Node.js leverages a single-threaded event loop and asynchronous programming, making it suit- able for building scalable and high-performance network applications.
• Non-blocking, event-driven architecture
• Excellent for high-concurrency and real-time applications
• Vast selection of reusable libraries and modules available.
• Well-suited for building modular and scalable microservices architectures and RESTful APIs
• Utilizing clustering and load balancing techniques.
• Single-threaded, not suitable for CPU-intensive algorithms.
• Callback-based programming models can lead to complexity.
• Debugging and error handling complexities.
In the context of our system, Node.js is an ideal choice for implementing a fashion e-commerce system due to its suitability for real-time communication and scalability The event-driven ar- chitecture of Node.js enables seamless integration of chatbot functionalities, facilitating inter- active and responsive communication with users Additionally, Node.js’s ability to handle high- concurrency scenarios ensures efficient handling of significant traffic, making it well-suited for the demanding nature of fashion e-commerce platforms Using a single language throughout the tech stack, such as JavaScript for both front-end and back-end development, minimizes the tech stack and facilitates easier code and data sharing between the client and server This ap- proach reduces development time and mitigates potential compatibility issues Therefore, we chose Node.js as our server option.
Database development
The final - often overlooked - component of our system is the database A database is an orga- nized collection of structured information, or data, typically stored electronically in a computer system A database is usually controlled by a database management system (DBMS) Together, the data and the DBMS, along with the applications that are associated with them, are referred to as a database system, often shortened to just a database.
In any system, databases take an important role in improving efficiency and UX, especially for an online store like our system Aside from typical database needs like saving product info, shopping info, and user’s personal details, our database will act as a source for our image- searching system Existing data will be fed into our algorithm to find the most suitable image with real data of all available products in our system This forms the cycle of receiving real data - feeding it into the algorithm - comparing it with real data in the database - Ranking and Relevance - tuning the algorithm and repeating This cycle also requires the intimate connection between our server and our database to ensure, timely, seamless data transactions.
Taking into account our requirements for the database, we assessed some of the most popular database options.
MySQL is a popular SQL database management system It is powering tech giants’ infrastruc- ture such as Facebook, Twitter, and Netflix, and is also suitable for small applications Being a relational database, MySQL stores databases in separate tables, much like how OOP languages structure information into classes This makes MySQL an intuitive choice for developers, thus explaining the longevity of more than 25 years of the system.
• Easy to use - SQL is industry standard so no problems with adding, editing, and reading data stored in MySQL.
• Stable - it just runs, with minimal downtime or errors.
• Fast - well-structured data is quickly written and read.
• Secure - MySQL makes it easy to keep data secure from people and applications that shouldn’t see it.
• Doesn’t support very large DBs efficiently.
Seeing MySQL as a promising database solution, we also had to take SQL databases’ character- istics into consideration SQL databases generally provide full ACID transactions and optimize queries but in our systems, with simple logic, it only has small benefits It also does not support very large DBs for our big system in the future We decided not to proceed with this database.
MongoDB is a popular open-source, document-oriented NoSQL database management system.
It is designed to provide high-performance, scalable, and flexible data storage and retrieval solutions MongoDB stores data in a flexible, JSON-like format called BSON (Binary JSON), which allows for easy representation and manipulation of complex data structures
• Very simple with easy-to-learn and easy-to-understand syntax.
• Offers great flexibility as there is no predetermined schema.
• Scalable - handles all our data very effectively even as we scale up.
• Data duplication can be a problem.
• Database architecture does not favor relations.
• Requires a high amount of storage due to the lack of joins functionalities which lead to the duplication of data.
• Lack of full ACID (Atomicity, Consistency, Isolation, Durability) transaction support.
Seeing MongoDB as a promising database solution, we also had to take NoSQL databases’ characteristics into consideration NoSQL databases’ general bad querying capabilities concern us and duplication can occur and may affect the efficiency of our image-searching system We decided not to proceed with this database.
PostgreSQL is a powerful, open-source object-relational database system that uses and extends the SQL language combined with many features that safely store and scale the most complicated data workloads The origins of PostgreSQL date back to 1986 as part of the POSTGRES project at the University of California at Berkeley and has more than 35 years of active development on the core platform.
PostgreSQL has earned a strong reputation for its proven architecture, reliability, data integrity, robust feature set, extensibility, and the dedication of the open-source community behind the software to consistently deliver performant and innovative solutions PostgreSQL runs on all major operating systems, has been ACID-compliant since 2001, and has powerful add-ons such as the popular PostGIS geospatial database extender It is no surprise that PostgreSQL has be- come the open-source relational database of choice for many people and organizations.
• Good for complex queries and big business logic with full AICD transactions.
• Support for a variety of data types.
• Supports both vertical scaling and horizontal scaling.
• Increasing horizontal scaling is complex.
In short, Postgres supports vertical scaling which is very important for us to add more types of fashion in the future since there are more and more types of fashion products Besides, it also supports full AICD transactions which will be helpful for us to create more features like vouchers, loyalty programs, etc About complex queries which SQL we can easily improve by using ORM like Prisma.
Pros + Query language + Open source + Open source
+ Data processing + Easy to use + Data types
+ Easy to learn + Set up + Relational database
Cons - Learning curve -SQL server - Third party
- Data size - Big data - Data compression
- Complex queries -Stability issues - Hard to use
Table 3.4.1: Comparison of Database management system
Artificial intelligence development
In order to implement the image search feature in our e-commerce system, we will utilize an existing framework There are two most popular frameworks that support artificial intelligence development processes, which are TensorFlow and PyTorch.
TensorFlow [1] is an open-source artificial intelligence framework developed by Google that en- ables developers to build and train machine learning, and deep learning models It also provides an ecosystem of tools, libraries, and community support.
TensorFlow allows users to define neural networks, and data flows, which are then executed efficiently on CPUs, GPUs, or TPUs (Tensor Processing Units) Its flexibility and scalability make it popular for a wide range of applications: natural language processing, computer vision, reinforcement learning, etc.
• It is open source and has extensive documentation and community support.
• It enables graph creation and modification at low-level API At high-level API, Tensor- Flow has Keras to support building and training neural network models.
• TensorFlow has TensorBoard to support visualization, debugging, and optimizing Tensor- Flow programs.
• It has built-in libraries that support parallel data processing and product deployment.
• It is slower and more complex than PyTorch.
• It has inconsistent homonyms For example, the tf.nn.conv2d and tf.layers.Conv2d have the same name, but they have slightly different settings, which can cause confusion.
• It only supports NVIDIA and Python for GPU programming.
PyTorch [2] is an open-source machine learning library originally developed by Meta Many researchers use PyTorch for various domains such as computer vision, natural language pro- cessing, machine learning, and more.
• It is open source and has extensive documentation and community support.
• It enables greater flexibility in graph creation and modification at low-level API, which simplifies code editing and testing without recompilation while at high-level API It has dynamic graph computation, which enables building and modifying models on the fly so it is beneficial for complex architectures.
• It is user-friendly with Python-like syntax and simple API calls It also supports multi- ple languages including Python and C++ It has TorchScript, which serializes PyTorch models, allowing them to run in other environments like C++.
• It lacks a built-in tool for visualization and depends on an external library such as Mat- plotlib.
• It does not support product deployment and depends on an external API server such as Flask or Django.
Due to PyTorch´s ease of use and flexibility, we decided to choose PyTorch for implementing the image search feature.
In Chapter 4, the author will look closely at the essential parts of our system’s design, including how the app is structured, the databases, schemas, and prototypes It also suggests new and creative solutions based on existing theories to implement an image retrieval algorithm to display the most relevant fashion items based on visual similarity.
Use case design
Use case diagram
Before mentioning the individual use cases, let’s begin with a high-level overview Table 4.1.1 has listed the primary actors and Figure 4.1.1 illustrates their interactions within the system. This use case diagram serves as a visual guide to understanding the functionalities and user roles within our fashion e-commerce platform.
Table 4.1.1: List of the actors in the Use Case Diagram
Figure 4.1.1: Overview of Key Use Cases Diagram
In the context of our system, there are both primary and secondary actors in the use case di- agram Primary actors might include customers, administrators, or other entities directly en- gaging with the system On the other hand, Secondary actors include external systems, Momo payment gateway, postal services, or any supporting elements that don’t directly interact with the system’s core functionality Our system has 7 actors including both primary and secondary actors as follows:
• Client: This is the actor representing the user who has not logged in or has an account on the system, they can not make orders but are allowed to access features such as chatting with the assistant, viewing product catalog, and searching images.
• Customer: Represents users who have logged into the system Customers have additional features compared to clients, such as the ability to place orders and provide comments.
• Admin: Represents administrators who manage and control the system, including tasks like handling orders, managing product storage, and overseeing user interactions.
• Supervisor: Represents supervisors responsible for overseeing the overall operation of the system This rule provides a default account that has the highest authority and can create and delete Admin and Customer accounts Additionally, supervisors also have access to the same features as Admin.
• Image Search Engine: Represents the system’s integrated image search model because we build it externally Therefore, users can search for fashion items using images without impacting the overall application.
• Momo Service: Represents the external Momo payment gateway, facilitating secure and convenient online payment transactions.
• Postal Service: Represents the external postal services that contribute to the delivery and logistics aspect of the system.
Use case description
This use case is like a chat to get help or info about fashion stuff Users can have text-based conversations with the assistant to seek information related to fashion items Additionally, the use case integrates the functionality of image search with text adjustment.
• Users can submit images and refine their search queries through text adjustments in the chat.
• The assistant auto-responds by providing the most relevant suggestions.
• Staff members can also participate in these chat interactions to assist users effectively.
View product catalog and search imageWith the View product catalog use case, users can check out all fashion items in the storage This use case also allows users to view product details and filter the displayed items with traditional searching methods by using keywords and a filter tool.
Search image use case serves as a direct feature to discover similar items Users simply upload or take a photo of a desired clothing item, and the system finds similar products in the inventory.
Receive order, make order, and make payment
These are the processes that users need to do to complete a placing order action Therefore, from a customer perspective:
• Make Order: selecting products and placing an order initiates the process leading to the receipt of items.
• Receive order: Customers receive the physical delivery of their ordered items and send confirmation to the store.
• Make payment: The payment process is based on the order information received from
Make Order After making selections, customers proceed to make a payment to complete the purchase.
This use case allows admins to view and assess statistical data, including recent popular products in the image retrieval feature, and best-selling items Admins are also provided with user activity reports, including the number of registered and active users.
These use case includes many similar CRUD features:
• Manage products: Admins can add new products, update existing ones, or remove items that are no longer in storage.
• Manage accounts: Supervisors oversee all user accounts They can create new accounts for staff or customers, modify details, or delete accounts if needed.
• Manage orders: Admins handle the orders coming in They can track order status, update information, or even cancel orders if circumstances require.
• Manage banners: Admins modify the content of the homepage They can customize ban- ners, add new ones, or remove outdated promotions.
Use case scenario
Name Search Image with Adjustment
Actor(s) Client, Image Search Engine
Trigger User clicks on Chat UI Icon button
Description The client wants to find a fashion item by using a chat service that can recommend items based on an image and text descriptions of desired characteristics
Preconditions The Image Search Engine is accessible and operational
Postconditions The customer receives fashion item recommendations based on their in- put and preferences
Normal Flow 1 The customer initiates a chat session with the fashion chat service through the platform’s chat interface.
2 The customer uploads an image of a fashion item
3 The system’s chat service asks for extra details.
4 The customer responds to the clarifying question with additional de- tails.
5 The chat service adjusts the search parameters based on the refined criteria provided by the customer.
6 The chat service submits the request to the Image Search Engine.
7 The Image Search Engine identifies key characteristics and extracts relevant features from the provided image.
8 The Image Search Engine searches within the fashion product database.
9 The Image Search Engine returns fashion items.
Exceptions Exception 1: At step 6, in case of technical issues or errors during pro- cessing, the system issues an error message to the customer and suggests retrying the request.
Alternative flows Alternative 1: At step 3, If the user wants to process directly to result, then the flow becomes:
5.1 The customer clicks on “No extra requirement”.
5.2 The system’s chat service processes the customer’s input.
[The alternate flow rejoins the main flow at Step 6]
Table 4.1.2: Scenario table of Use Case Search Image with Adjustment
Trigger User clicks on Make payment button
Description Enable registered customers to complete their purchases on the system using their preferred payment method
Preconditions The customer is logged into their account on the fashion e-commerce platform Postconditions The customer’s payment is successfully made
Normal Flow 1 The customer accesses the payment section of the system
2 The system presents the customer with a summary of their order, in- cluding:
• A list of selected items with names, quantities, and prices.
3 The customer reviews the order summary for accuracy.
4 The customer selects the Digital Wallet payment method.
5 The customer provides the Digital Wallet account details or phone number.
6 The system initiates a payment request to the provided Digital Wallet Services.
7 The customer receives a payment confirmation on the platform, in- cluding:
• Details of the purchased items.
• Payment method used and Payment amount.
8 The system sends an email notification to the customer’s registered email address.
Exceptions Exception 1: At step 6, if the payment transaction fails due to issues such as insufficient savings or technical errors, the system notifies the cus- tomer of the unsuccessful payment and logs relevant details.
Alternative flows Alternative 1: At step 4, instead of selecting Digital Wallets, the customer chooses to pay in cash upon delivery Then the flow became:
5.1 The customer submits the delivery information.
5.2 The system saves the choice of cash payment and schedules the de- livery.[The alternate flow rejoins the main flow at Step 8]
Table 4.1.3: Scenario table of Use Case Make payment
Trigger User click on the buy button on the product details page
Description User create an order for what they want to buy from the system
Preconditions User logged into and at product details page
Postconditions User create order successfully
Normal Flow 1 User at the product details page
2 User clicks on the BUY NOW button
3 System redirects to user cart page
4 User checks on all products they want to buy from their cart
5 System shows general information (total prize, number of products, promotion)
6 User clicks on the MAKE ORDER button
7 System redirects to the ordering page, showing all necessary infor- mation total prize, shipping cost, delivery information, applying voucher site
Exceptions Exception 1: At step 6, the product that user wants is out of stock System redirects to the user cart page End of flow.
Table 4.1.4: Scenario table of Use Case Make order
Trigger Admin clicked on Statistics Tabbed Page
Description The admin wants to view shopping trends and analyze user activity and sales reports within the fashion e-commerce system Preconditions The admin is logged into the admin panel of the fashion e-commerce system Postconditions The actor has successfully reviewed the statistical data and reports and the system remains in the statistics view.
Normal Flow 1 The actor clicks on the "Statistics" or "Analytics" option.
2 The system navigates to the statistics view.
3 The system retrieves and displays statistical data, including:
• Product recent trends, featuring product sales and image retrieval performance.
• User activity reports, detailing the number of registered users and active users.
4 The actor reviews the presented statistical data and reports.
Exceptions Exception 1: At step 3, if there is a technical issue preventing data re- trieval, the system displays an error message Alternative flows Alternative 1: At step 3, if there is insufficient data available for analysis, the system displays a message to notify the missing data.
[Continue at step 4 in Normal Flow]
Table 4.1.5: Scenario table of Use Case View Statistic
Actor(s) Client, Image Search Engine
Trigger Client clicks image camera on searching bar
Description Client searches related products by importing or capturing the real prod- uct Preconditions Client on the web or mobile app of system
Postconditions Client gets the list of most related products to their desired product in the system
Normal Flow 1 User clicks on the camera icon on the search bar
2 System popups modal for user to choose how to import image
3 User clicks on importing an image from the device
4 System shows accessible images from user’s device
5 User clicks on the image he wants
6 System shows waiting for uploading image screen
7 User clicks on uploading the image
8 System shows a list of related products in the system
Exceptions Exception 1: At step 6, user failed to upload the image.
Alternative flows Alternative flow 1: At step 4, user clicks on capturing an image from the camera.
4.1 User allows the app to use the device’s camera 4.2 User capture the real product they want
4.3 System shows image user captured 4.4 User clicks on upload image
[Continue step 6 in Normal Flow]
Alternative flow 2: At step 7, user clicks on choose another image 7.1 User clicks on choosing another image.
[Continue step 4 in Normal Flow]
Table 4.1.6: Scenario table of Use Case Search Image
Activity Diagram
Make order
Figure 4.2.1: Illustration for Make order workflow
Workflow of activity diagram "Make order": When customers (including logged-in and not logged-in customers) access our system products catalog, they can view, scroll, and filter to find what they want After that, when users want to see more details about their desired product, they can click on the product image from the catalog Then, our system front-end server will send a query request to our server to get the corresponding product’s data This request will meet the API gateway before being forwarded to the Inventory service to get the results.
Then our front-end server will show the product details (including type, available sizes, descrip- tions, user comments, etc.) Now, users can view all the details of the product and choose the appropriate size Then, on the one hand, if users want to buy immediately they can click on the
"BUY NOW" button, on the other hand, if users just want to add to their cart to buy later, they can click on the "ADD TO CART" button, user cart will be updated immediately After the user clicks on the "BUY NOW" or "ADD TO CART" button, our system will check the user status since this function only allows for logged-in users In the case the user is not logged in, our system will redirect the user to the login page Here, users can log in or create an account to buy our product.
After logging in successfully, in the case, the user has clicked on the "ADD TO CART" button, users can go to our products catalog to view and choose more products or they can start the buying process by clicking on the "BUY NOW" button in the cart page After that, our system will create a shopping order including the chosen products of users Then our system will show the order information including the total price, the default user’s address, the default receiving people’s information, shipping cost, and available vouchers or promotions Here, the user can take a view of the order summary or change their shipping information Users can also apply vouchers or fill in a code to get a discount After checking the shopping order, the user can click on the "ORDER" button to start the payment process.
Search with image and text
Figure 4.2.2: Illustration for Search with image and text
Workflow of activity diagram "Search with image and text": When customers (including logged- in and not logged-in customers) access our system, they can see an assistant button float on the screen (default on the right bottom ) When the user clicks on this button, our system will set up a chatting session, however, our system still saves and shows the chatting history of the user in case they want to see a previously searched product.
Then, users can see a popup on the screen with text input as well as chat history Our system will show a default query for use to input searching content: "Please upload an image, I help you to find it!" When users click on the camera button, our system will show a notification to get user permission to access the user image library and the camera If the user allows, our system will access their image library, here user can choose their desired image or take a new picture of what they want to search Then, they can upload the image to the chat session After receiving the image, our system will show the button "NO EXTRA REQUIREMENT".
On the one hand, users can click on that button if they do not want to add any text for search- ing On the other hand, if users want to add some text to describe what they really want, they can type in the input message Then, our system will process all the input from the user (im- age and text if having) and respond user with a list of suitable products, ordering by the most appropriate percent The users can click on what they want and our systems will redirect to the corresponding product detail page.
Architecture design
Monolithic architecture
Monolithic architecture is considered to be a traditional way of building applications A mono- lithic application is built as a single and indivisible unit Usually, such a solution comprises a client-side user interface, a server application, and a database It is unified, and all the functions are managed and served in one place.
Figure 4.3.1: Illustration for monolithic architecture
The UI includes everything they see and interact with—the web pages, buttons, forms, and visual elements Just like a well-designed entrance, the UI should be welcoming, intuitive, and easy to navigate.
Business logic is the invisible force that governs how things work inside When a user submits a form, the business logic decides whether the input is valid, processes it, and takes appropriate actions For example, if we’re ordering food online, the business logic ensures that the right items are added to our cart, discounts are applied, and the total price is calculated accurately.
The data interface handles messages, requests, and data flow When the UI needs information(like fetching a user’s profile), it talks to the data interface The data interface, in turn, commu- nicates with the database, retrieves the relevant data, and serves it back to the UI It’s like the pipes and wires behind the walls—essential but often hidden from view.
The database holds all the stuff we accumulate over time—the user accounts, product details, transaction records, and more When we save a document, update our profile, or check our order history, the database stores and organizes that data Just like a well-organized storage room, a good database ensures quick access and efficient retrieval.
• Less cross-cutting concerns.Cross-cutting concerns are the concerns that affect the whole application such as logging, handling, caching, and performance monitoring In a mono- lithic application, this area of functionality concerns only one application, so it is easier to handle it.
• Seamless debugging and testing Comparing monolithic versus distributed architecture, single-tiered applications are much easier to debug and test Since a monolithic app oper- ates as one indivisible unit, we can run end-to-end testing much faster.
• Prompt and simple deployment.Another advantage of a unified architecture in the juxta- position of monolith versus distributed is fast and easy roll-out When it comes to mono- lithic applications, we do not have to handle many deployments – just one file or directory.
• Easier development.As long as the monolithic approach is a standard way of building ap- plications, most qualified engineers have the right knowledge and capabilities to develop a monolithic application.
• Code complexity When a monolithic application scales up, it becomes too complicated to understand and segregate the ownership of the pieces In addition, a large codebase within one application is harder to maintain.
• Highly interdependent components It might become a challenge to implement changes in such a large and complex application with high coupling Any code change affects the whole system, so it poses more tech challenges and has to be thoroughly coordinated.
• Limited scalability.Cannot be able to scale the software components independently, only the whole application.
• New technology barriers.It is extremely problematic to apply cutting-edge technology in a monolithic application because then the entire software has to be rewritten.
Distributed architecture
While a monolithic application is a single unified unit, a distributed architecture breaks it down into a collection of smaller independent units These units carry out every application process as a separate service So, all the services have their own logic and databases, as well as perform specific functions.
Figure 4.3.2: Illustration for distributed architecture
The UI includes everything they see and interact with—the web pages, buttons, forms, and visual elements Just like a well-designed entrance, the UI should be welcoming, intuitive, and easy to navigate.
In a distributed architecture, each independent unit acts as a separate system, they have their own business logic as well as the database They are almost independent of each other.
The database holds all the stuff we accumulate over time—the user accounts, product details, transaction records, and more When we save a document, update our profile, or check our order history, the database stores and organizes that data Just like a well-organized storage room, a good database ensures quick access and efficient retrieval.
• Independent components.Distributed systems allow for independent components that can be deployed and updated separately This provides more flexibility compared to mono- lithic architectures, where a bug or new feature impacts the entire application With a distributed system, each service is isolated and only influences that particular compo- nent.
• Easier maintenance Distributed systems are also easier to maintain given their simpler, more focused components centered on specific business capabilities You can concentrate on individual services rather than the entire complex application.
• Better scalability.Distributed systems enable better scalability since each service can be scaled independently as needed Monoliths have to scale the entire application even when only a portion requires more resources This makes distributed systems more cost- and time-effective to scale.
• Easier development Distributed systems also provide flexibility in choosing technolo- gies Teams are not restricted to the initial technology selection but can choose different frameworks or languages for different services.
• Isolation of services The isolation of services reduces risk and errors Issues with one distributed system only impact that component versus taking down the entire monolithic application This isolation also allows for easier and safer changes or experiments.
• Extra complexity.Distributed systems add substantial complexity since they are distributed systems that require carefully managing connections between independent services and databases Each self-contained service also needs to be deployed separately.
• System distribution.Relatedly, distributing components across a network of services and databases creates a complex system to configure and orchestrate Careful coordination is required to handle system distribution issues.
• Cross-cutting concerns.Distributed systems introduce cross-cutting concerns that must be managed, like externalized configuration, logging, health checks, and monitoring met- rics These present additional complexity.
• Difficulties with testing.Testing can also be more difficult with an independently deploy- able distributed system versus a monolithic application There are more moving parts to coordinate and test across services.
Service-based architecture
Service-based architecture can be viewed as a hybrid between monolithic and microservice architectures, aiming to provide architectural flexibility It is considered a pragmatic approach, offering a distributed architecture without the full complexity of microservices.
Compared to event-driven architectures or pure microservices, service-based architecture has lower distributed coordination costs and complexity However, it still enables modular services and more agility compared to monoliths By balancing architectural distribution with simplicity, service-based architecture has become a popular choice for many business applications needing more agility than monoliths but without the full overhead of microservices.
Figure 4.3.3: Illustration for service-based architecture
As with other distributed architecture, service-based also has three common elements: user interface, server, and database.
The user interface layer in a service-based sits separately from the backend services This sep- aration of concerns allows UIs to be developed and iterated independently UIs only utilize the necessary backend capabilities, abstracted behind an API facáade The APIs handle routing re- quests to the appropriate services Such abstraction decouples UIs for greater agility Different
UI frontends can reuse common APIs.
The modular services focus on specific business functions, scoped to domain boundaries This maintains clear responsibilities and minimizes intricate dependencies between services Each service behaves as an independent unit While complex inner workflows are possible within a service, the scope is narrowed at the architecture level Services emphasize external autonomy over internal intricacy through disciplined boundaries Cloud platforms readily scale out these domain-specific stateless components.
The database is service-based architecture is usually one big database instead of many small databases SQL databases are commonly used because they are good for situations where many services access and change the data at the same time SQL ensures transactions happen reli- ably Each service typically only touches a small part of the big database This avoids services conflicting with each other However, the database stays as one unit to make the information consistent across services.
Some teams might want to split up the database more This can allow services to change data without waiting for other services But then duplicate data and synchronization issues can hap- pen So one database with careful service access boundaries balances speed and reliability The services are separate but the data stays together This way services can scale out while keeping the data in harmony.
The reasons that we decided to choose service-based architecture are:
• A service-based approach makes sense for complex, scalable applications where it is eas- ier to add capabilities by developing new modular services service-based simplifies ex- tensive scaling and upgrades.
• Service-based architecture also enables faster MVP development and iteration in the short term, working well with agile processes New features can be added by creating separate services with limited dependencies.
• If multiple technologies are required within one application due to specialized compo- nents like search, service-based make this integration cleaner by isolating those unique services.
• Service-based architecture also increases fault tolerance and availability since individual services are isolated If one fails the other application functionality remains working, increasing resilience.
• Service-based architecture may fit applications where extremely low latency is not re- quired There is some added request coordination complexity inherent in distributed ser- vices Latency-sensitive systems may lean toward monoliths or tighter service coupling.
Figure 4.3.4: Illustration for our system architecture
Our system uses service-based architecture (which belongs to distributed architecture styles). Our architecture includes three main elements: user interface, services, and database.
In our applications, there are two main types of users: customer and admin users Thanks to the help of distributed architecture, we can divide them into two separate units, which can work independently This helps us assign the role as well as user access and create an appropriate interface for each type of user.
Services play a very important role in our system, all logic, returns responses for what the user requires, calling the database In the service-based architecture, we divide our server into many services, which work and can be deployed independently This helps us to easily maintain our system without affecting others Not to mention the fact that, when we scale up or have more users, we can deploy many units for each service So, we also need an API layer (gateway in our case) to handle which service will respond to user requests In this case, we apply a reverse proxy pattern by using an API gateway Currently, there are six services in our systems In each service, we include its functions and necessary database entity (repository pattern).
• Payment ServiceThis service will handle all logic about payment: customers make pay- ments, admins view customers’ payment transactions, and customers access payment methods Besides, this service also includes a payment method entity and payment trans- action entity to complete its task.
• Auth ServiceThis service will handle authentication and authorization for both customers and admins Provide and allow appropriate access for customers and admin according to their roles Whenever users log into our system, the auth service will receive the request and give them an access token to allow them to access our system In this service, we have two main entities: the user entity and the role entity.
• Inventory ServiceThis service will handle everything related to our product store This service allows appropriate users to manage or get products, product variants, and cate- gories It allows the admin to see and manage product inventory, and add new categories and variants In this service, we have three main entities: variants entities, category enti- ties, and product entities.
• Order ServiceThis service will allow customers to make orders, and modify their cart list items It also allows admin to view their orders check their state, and check error when customer has problems In this service, we have three main entities: orders entities, cart item entities and order items entities.