Introduction
In the era of the Fourth Industrial Revolution, e-commerce has emerged as a crucial driver of economic growth, significantly impacting both businesses and individuals This thesis will delve into the knowledge and technologies essential for developing an effective e-commerce website, highlighting the numerous benefits and new values it brings to the marketplace.
In order to approach and contribute to promoting the popularity
Objective and scope
The objective of this topic is developing an e-commerce website with following features:
Users can easily register for an account on our website, allowing them to log in and log out at their convenience To access and purchase products, users must be logged in to provide the necessary information.
- View profile: Users/ Admins can view the information of themselves
- Search for products: Users can search for products names, sort by categories, brands, prices
- View products: Users can view productÓu information, prices, rtqfwevÓu"kocigu."urgekhke"kphqtocvkqp."È
- Add products to cart, wishlist: Users who already log in can add products to carts, wishlist
- Check out: Users can provide shipping address to receive the products
Nowadays, e-commerce is a wide topic So, I would limit the subject is creating an e-commerce website that users focus on 1 or 2 types of product only.
What is e-commerce?
ÐEqoogtekcn" vtcpucevkqpu" eqpfwevgf" gngevtqpkecnn{" qp" vjg"Kpvgtpgvẹ"]Qzhqtf"fkevkqpct{̲
Key concepts of an e-commerce?
2.4 Key concepts of an e-commerce platform ÈÈÈÈÈÈÈÈ 13 2.5 Some example of an e-eqoogteg"rncvhqtoÈÈÈÈÈÈÈÈ0036
2.1 What is e-commerce? ÐEqoogtekcn" vtcpucevkqpu" eqpfwevgf" gngevtqpkecnn{" qp" vjg"Kpvgtpgvẹ"]Qzhqtf"fkevkqpct{̲
What is e-commerce platform?
2.4 Key concepts of an e-commerce platform ÈÈÈÈÈÈÈÈ 13 2.5 Some example of an e-eqoogteg"rncvhqtoÈÈÈÈÈÈÈÈ0036
2.1 What is e-commerce? ÐEqoogtekcn" vtcpucevkqpu" eqpfwevgf" gngevtqpkecnn{" qp" vjg"Kpvgtpgvẹ"]Qzhqtf"fkevkqpct{̲ e-commerce is a business model that lets firms and individuals buy and sell things over the internet e-commerce operates in all four of the following major market segments:
Business to business Consumer to consumer
Business to consumer Business to government
Figure 2.1 Types of e-commerce operates
2.2 Key concepts of an e-commerce?
Transaction: an exchange of value, such as a purchase, a sale, or the conversion of raw materials into a finished product
Business process: The group of logical, related, and sequential activities and transactions in which businesses engage
Telecommuting or telework: the employee logs in to the company network through the Internet instead of traveling to an office
E-commerce software simplifies online sales for businesses by providing the necessary tools to sell products and services over the internet Historically, companies relied on expensive, standalone on-premise solutions that demanded significant IT resources, extensive setup, and specialized development teams for management These traditional systems were often costly, difficult to scale, cumbersome to use, and time-consuming to customize and integrate with other platforms.
E-commerce software provides the customer facing front end component of an online business Online businesses, like all other businesses, need additional software to manage back end functions such as accounting, order management, inventory management, and customer service Piecing together different software solutions to create a complete ecommerce business platform is complicated, requires frequent maintenance and rarely functions efficiently
A new generation of business software offers a comprehensive e-commerce platform that combines essential commerce and business functionalities through a software-as-a-service (SaaS) model This integrated infrastructure streamlines business applications and their data, enabling the creation of relevant, engaging, and personalized online experiences.
Key concepts of an e-commerce platform?
Streamline your business operations by utilizing a single, unified cloud-based platform that integrates ecommerce, accounting, POS, inventory, order management, marketing, merchandising, customer service, and financials Eliminate the need for separate systems and integrations to enhance efficiency and simplify management.
Achieve a comprehensive 360° view of your customers by integrating all interactions and transactions across various touchpoints and channels This unified perspective enables you to deliver personalized and consistent experiences, enhance targeted marketing efforts, and provide exceptional customer service.
Effectively managing orders is essential for surpassing customer expectations in the buying, fulfilling, and returning processes, whether online or in-store By centralizing order management and achieving a comprehensive view of inventory across all channels and supply chain units, businesses can maximize profitability and enhance overall efficiency.
Deliver innovative customer experiences Rapidly create unique, personalized and compelling mobile, web and in-store experiences to differentiate your brand and exceed customer expectations
Support unlimited expansion Quickly deploy sites for multiple business models, channels, brands, countries, currencies and languages all on the same platform.
Some example of an e-commerce platform
Figure 2.5.1 Ebay ẻ an e-commerce platform
Figure 2.5.2 Amazon ẻ an e-commerce platform
Reactjs
In the past, WordPress was the go-to option for developing simple web applications While it remains a solid choice today, those who are passionate about new technology may prefer the open-source platform Strapi.
Strapi is an open-source Node.js framework that simplifies content management system (CMS) management for developers It enables the easy creation of RESTful APIs and offers extensive customization options, significantly reducing application development time.
Strapi also integrates many JS frameworks that help develop the frontend much easier
In just a few minutes, you can set up a fully functional API, allowing you to focus on software development without the complexities of a CMS Our completely customizable API ensures that all your data is tailored to meet your specific requirements We handle the backend, so you can concentrate on what matters most Strapi is already being utilized in production by companies of all sizes.
Content Management Software (CMS) Digital Asset Management Software Document Management Software Enterprise Content Management Software Records Software
ReactJS is a powerful JavaScript library designed for developers to create dynamic front-end applications and user interface (UI) components It enhances user experience by providing exceptional response times through an innovative approach to web page rendering.
ReactJS, developed by Facebook and launched as an open-source JavaScript library in 2013, has gained immense popularity among major companies globally, including Netflix, Airbnb, American Express, Facebook, eBay, and Instagram.
There are some reasons that We choose Reactjs in our web app:
If you have a basic understanding of JavaScript, learning React is straightforward, allowing you to start building applications within just a few days React is an open-source JavaScript library designed specifically to efficiently handle UI tasks.
React allows you to reuse components that have been developed into other applications with the same functionality Component reuse is an advantage for developers
React simplifies component creation for developers by utilizing JSX, a powerful combination of JavaScript and HTML This approach enhances the clarity of website structure development and facilitates a wider range of rendering options.
- Better performance with Virtual DOM
React allow you to build virtual DOMs and host them in memory So whenever there is a change in the actual DOM, virtual will change immediately
SQLite DB
SQLite is a compact, complete, relational database system that can be installed inside other applications SQLite was written by Richard Hipp as a library in the C programming language
- Operation (transfer) within the database are performed completely, without causing errors when a hardware problem occurs
- Perform simple operations faster than other client/server database systems
System architecture
There are 3 main parts of our web application, that is frontend, backend and database We use Strapi for backend, Reactjs for frontend and SQLite for database
Detail description for above architecture
- Authenticate users by email and password
- The application will be deployed on web platform
- Powered by a Strapi content management system
- There will be a RESTful API of Strapi that the React client side can access via Ajax calls
- Uvqtg"wugtÓu"kpformation when user use the web application
- Store information of products, promotions, best sale items, tgeqoogpfgf"kvgou.È
Usecase design
Description Allow users to register for an account
Trigger User choose register function
Post conditions User create accounts successfully
Normal Flows 1 The system display the register screen
2 User input email and password
3 User click on the register button
4 The system notify that user register successful
Use Case Name Log in
Description Allow users log in to the system
Trigger User choose register function
Preconditions User must have account before
Post conditions User login successfully
Normal Flows 1 The system display log in screen
2 User input email and password
3 The system will notify successful log in if email and password are correct
Use Case Name Log out
Description Allow users to log out of the system
Preconditions User must have an account before and user are logging in to the system Post conditions User log out successfully
Normal Flows 1 User click on log out button
Description Allow users to search for products
Preconditions User access into the website
Post conditions Search results are shown
Normal Flows 1 User click on the search box
2 User input a name of a product
3 The system displays the searched result
Use Case Name Add to cart
Description Allow users to add a product to their cart
Trigger User choose add to cart function
Post conditions Product already add to cart
Normal Flows 1 User click on the button add to cart
2 The system notify user that the product is added to the cart
Use Case Name Add to wishlist
Description Allow users to add a product to their wishlist
Trigger User choose add to wishlist function
Preconditions User access into the website
Post conditions Product already add to wishlist
Normal Flows 1 User click on the button add to wishlist
2 The system notify user that the product is added to the wishlist
Use Case Name View product information
Description Allow users to view product information
Trigger User click on a product name or image
Preconditions User access into the website
Post conditions Product information is displayed
Normal Flows 1 User click on product name or image
2 The system display the product information
Use Case Name Check out
Description Allow users to give their addess for shipping and place an order
Trigger Users choose the check out function
Preconditions Cart is not empty
Post conditions The order is placed
Normal Flows 1 User click on the button check out
2 The system display the detail of the order and text box for shipping address and personal information
3 User input their information and shipping address
4 The system display the detail of the order and payment methods
5 User choose the payment method
6 The system redirect the user to the payment website
8 The system notify the payment result
UI design
Figure 4.3.9 Admin page manage users
Figure 4.3.10 Admin page manage products
Achievements
- Understood the evolving e-commerce world in the age of the fourth technological revolution and the need for a website that can meet the demands of the market place
- Explored knowledges and technologies used to create an e- commerce website
We developed an e-commerce website utilizing Strapi as the content management system and SQLite as the database This platform enables users to log in, log out, and register seamlessly Customers can search for products, add items to their cart or wishlist, view detailed product information, provide their shipping address, and place orders efficiently.
Future work of the thesis
- Expand the products that sell on our website
- Develop an mobile application for users easier to purchase their favourite items.