Introduction
In the modern age of the 4 th technological revolution, electronic ecommerce has become an area that has an extremely important influence on the economic developments of the country The development of e-commerce does not only make a lot of benefits for business but also provides some new values for companies and individuals Therefore, the contents of this thesis will explore knowledges and technologies used to create an e-commerce website
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:
- Register/Login/Logout: Users who use our website can sign up for an account After that users can log in and log out of the system Users don’t need to log in to view the products, but if users want to purchase, they will need to log in to provide informations
- 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’s information, prices, product’s images, specific information, …
- 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.
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.
What is e-commerce platform?
At its simplest form, e-commerce software enables a business to sell products and services online Traditionally, businesses had to purchase on-premise, standalone ecommerce software that required extensive IT setup and in-house management with specialized development teams These solutions were generally costly, not scalable, challenging to work with, and time consuming to customize and integrate with other systems
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
Fortunately, a new breed of business software integrates all the needed commerce and business functionality into a single e-commerce platform via a software-as-a-service (SaaS) model With an infrastructure that unifies business applications and the data that feeds them, it is possible to create relevant, engaging and personalized online experiences
Key concepts of an e-commerce platform?
Run on a single, unified platform Eliminate integrations between separate systems with natively unified ecommerce, accounting, POS, inventory and order management, marketing, merchandising, customer service and financials on a cloud-based platform
Provide a 360° customer view Deliver consistent and personalized cross-channel experiences, targeted marketing and superior customer service with a single view of all customer interactions and transactions across all touch points and channels
Maximize profitability through centralized order management, providing a comprehensive view of inventory across all channels This enables the efficient fulfillment of orders, exceeding customer expectations for seamless purchases, fulfillments, and returns, both online and in stores.
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
Strapi
In the past, whenever people want to develop a simple web application they always think of Wordpress Nowadays, Wordpress is still a good choice to consider But for the one who love new technology we can choose an open source Strapi
Strapi is an open source, a Nodejs framework that helps developer manage CMS (content management system) easily and build RESTful API as well as the ability to customize API In order to help developers save a lot of time to develop an application
Strapi also integrates many JS frameworks that help develop the frontend much easier
In minutes, you have a working API and can concentrate on developing software without the hassle of CMS complexities All of your data is made available through a 100% customizable API to be a perfect fit for your needs We take care of the backend for you so you don't have to Companies of all sizes are already using Strapi in production
Content Management Software (CMS) Digital Asset Management Software Document Management Software Enterprise Content Management Software Records Software
Reactjs
Reactjs is a JavaScript library that help developers develop frontend, build user interface or UI components It gives excellent
18 response speed when user input using the new method of web page rendering
Reactjs is developed by Facebook It was launched as an open source JavaScript engine in 2013 React is really popular and it is used by many big companies all over the world: Netflix, Airbnb, American express, Facebook, eBay, Instagram, …
There are some reasons that We choose Reactjs in our web app:
As a JavaScript, you can easy to understand basic React You can start to build an application after few days learning it React is an open source JavaScript that focuses on one particular thing: Complete UI tasks efficiently
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 help developers write components easier because it use JSX JSX is great mix of Javascript and HTML It clarifies the process of writing website structure Additionally, the extension also makes rendering more options easier
- 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
- Store user’s information when user use the web application
- Store information of products, promotions, best sale items, recommended items,…
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 Actors Users, guests
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
Leveraging Strapi's CMS, ReactJS for the frontend, and SQLite for storage, we developed an e-commerce website Users can seamlessly navigate through product searches, add items to their wishlist and cart, consult product details, and effortlessly provide their shipping information to place orders This intuitive web application enables users to register, log in, and manage their account, enhancing the overall shopping experience.
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.