building website selling electronic products with angular

TECHNOLOGY AND EDUCATIONMINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF LECTURER: Ho Chi Minh City, 2023 GRADUATION THESIS SOFTWARE ENGINEERING SKL012407 BUILDING WE

INTRODUCTION

About the Store

The rapid growth of e-commerce has created a huge demand for online shopping websites that are user-friendly, secure, and scalable Angular is a popular web application framework that offers many advantages for building such websites, such as modularity, reusability, performance, and testing However, developing an e-commerce website with Angular also poses some challenges, such as integrating with backend services, handling payment processing, and optimizing for SEO Therefore, this thesis aims to explore the best practices and solutions for building a website selling electronic products with Angular

The main objectives of this thesis are:

 To design and implement a responsive and attractive user interface for the website using Angular components, directives, pipes, and services

 To create a RESTful API to provide data and functionality for the website, such as product catalog, shopping cart, order management, and authentication

The expected outcomes of this thesis are:

 A fully functional e-commerce website that allows users to browse, search, and buy electronic products online

 A comprehensive documentation of the website's architecture, design, implementation, and testing

 A critical evaluation of the website's performance, usability, security, and SEO

 A discussion of the limitations and future work of the website.

Requirement analysis

- An online store must have the basics of a store

- Customers can buy items and view them

- Ensure security and speed in finding and buying for users

- The website has all the features of a regular website

+ To take notes: Notepad (Windows)

+ Language for making Shop: Angular

Project objectives

1) Building a website to meet the prevailing online store demands

2) Aspiring to develop a feature-rich, swiftly processing website

3) Enhancing programming proficiency, creativity, and problem-solving acumen.

Implementation steps

1) Conduct a survey of popular e-commerce websites based on criteria such as interface, features, and user experience

2) Create a website development roadmap based on the previously mentioned survey results

4) Design front-end and back-end

Functions

 Create an account, log in

 Managing website content and banners

CURRENT STATE ANALYSIS

Current Status

Nowadays, online stores are becoming an indispensable part of the digital economy Online stores are growing at breakneck speed and are changing the way consumers shop Strong development of web store: Web store has become an important platform for web application developers to provide their products and services The number of web applications provided on the web store is increasing, with a variety of application types, from utility applications, entertainment applications, learning applications, business applications,…

Competition is increasingly fierce: The strong development of web stores also leads to increasingly fierce competition among web application developers To attract users, web application developers must constantly improve the quality of their applications, as well as deploy effective marketing strategies

In short, web store is an important platform in web application development With the strong development of web stores, web application developers have many opportunities to provide their products and services to users

Target website: https://www.thegioididong.com/

Advantages

1) The website has an eye-catching, easy-to-use interface: Thegioididong's interface is designed with bright colors and a reasonable layout, helping users easily find information and shop

2) Diverse and rich products: Thegioididong provides a variety of electronic and technology products, from phones, tablets, laptops, to household appliances, office equipment, and more

3) Competitive prices: Thegioididong regularly has promotions and discounts, helping customers shop at the best prices

4) Good warranty and after-sales policy: Thegioididong has a clear and transparent warranty and return policy, helping customers feel secure when shopping.

Disadvantages

1) Incomplete product information: Some product information on Thegioididong.com is incomplete, such as technical specifications, customer reviews,

2) The ordering and payment process is not convenient: The ordering and payment process on Thegioididong is still quite complicated, causing customers to sometimes have difficulty, especially new user

3) Customer care program is not good: Thegioididong's customer care team has not been properly trained, sometimes unable to promptly answer customer questions.

Website

My online store website have the following features:

 Easy-to-use interface: The website needs to have a friendly interface, making it easy to search and shop

 Detailed product description: Clear, detailed product description with quality images so consumers can clearly understand the product before buying

 Product search and filtering features: The website needs to have easy-to-use product search and filtering features so that users can search and select products conveniently

DESIGN

Requirements Analysis

Step 1: Information Gathering: During this phase, I will analyze and gather information about the functional and non-functional requirements of the sales website system This includes determining the necessary features, performance, security, and availability requirements

 Product management: The system must allow users to create, edit, delete, and search for products

 Customer management: The system must allow users to create, edit and search for customers

 Order management: The system must allow users to create, edit and search orders

 Delivery: The system must support popular delivery methods such as door-to- door delivery, postal delivery, and third-party delivery

 Customer support: The system must provide customer support channels such as email and phone.

 Performance: The system must operate quickly and stably, meeting user needs

 Security: The system must protect customer and store data from unauthorized access or misuse

 Availability: The system must always be ready to operate, even during peak times

 Scalability: The system must be scalable to meet the store's growing needs in the future

 Compatibility: The system must be compatible with popular platforms and browsers

Step 2: Architectural and Technological Design: In this step, I will design the architecture of the sales website system, including its logical and physical structure Additionally, I will select the appropriate technologies for the system

 Presentation Layer: The user interface (UI) that customers interact with, typically built using HTML, CSS, and JavaScript

 Business Logic Layer: The back-end code that handles business rules, processes, and data interactions, written in languages like PHP, Python, Java, or Node.js

 Data Access Layer: The layer that interacts with the database to store and retrieve data, often using technologies like MySQL, SQL sever, or MongoDB Physical structure:

 Web Server: Host the web store's application code and static assets (images, CSS, JavaScript files)

 Database Server: Store product catalog, customer information, orders, and other data

 Load Balancer: Distribute traffic across multiple web servers to improve performance and availability

 Cache Server: Store frequently accessed data to reduce database load and improve response times

 File Server: Store media files like product images or videos

Step 3: Database Design :After identifying the functional and non-functional requirements, I will design a database to store information about products, customers, orders, and other relevant data

Step 4: User Interface Design Creating an appealing and user-friendly interface is crucial for providing customers with the best shopping experience In this step, I will design an intuitive and visually appealing user interface to optimize the user experience

Step 5: Development and Testing Following the system's design, I will proceed with the development and testing phases to ensure that the system functions properly and meets all requirements

Diagrams

Database design

Interface design

Objective: Friendly interface design, easy to use, intuitive and easy to navigate, helping users find information and shop easily

User: People who have basic knowledge of computer use and online shopping

Interest in purchasing electronic products

 The home page includes the latest products, best sellers, promotions, and more

 Product pages include detailed product information, such as images, descriptions, prices, etc Product pages should be designed to help customers clearly understand the product

 The shopping cart and Order are designed for ease of use and payments should be secure

 Overview: The overview page provides administrators with an overview of their store It typically includes information such as the number of products, the number of orders, and sales revenue

 Product Management: This feature allows administrators to add, edit, and delete products It usually includes information fields such as product name, price, description, and image

 Statistics: This feature provides admins with information about their store's performance It often includes information such as number of visitors, number of orders, and sales

IN USE

Database management system

Database management system (abbreviated DBMS) is a software system used to manage and organize databases It provides an interface between the database and users or applications to perform operations such as creating, modifying, querying, and deleting data

 Product: Name, description, price, image, category, attributes

 Customers: Name, address, email, phone number, purchase history, preferences

 Order: Code, order date, product, price, payment details, delivery status

 Add, edit, delete: Products, customers, orders, promotions

 Search & filter: By name, category, attribute, price, order date, order status

 Report: Revenue, number of orders, new customers, best-selling products Selection criteria : Performance requirements, security requirements, availability requirements, scalability, support capabilities

 MySQL: Easy to use, free, suitable for small web stores, Store unstructured data

 Microsoft SQL Server: Powerful, highly scalable, High security, Ability of extension, High cost

 MongoDB: Flexible, suitable for complex, unstructured data, Lack of commitment, Difficult to learn and use

Used technology: Microsoft SQL Server

Why choosing Microsoft SQL Server?

Microsoft SQL Server is a relational database management system (RDBMS) developed and sold by Microsoft

 Scalability: SQL Server can be scaled horizontally and vertically, making it a 5

 Stability: SQL Server is a stable and reliable database It has been used in many important commercial applications

 Performance: SQL Server is designed to provide high performance for read and write queries This makes it a good choice for applications that need to process large amounts of data

 Security: SQL Server provides many security features to protect your data

 High availability: SQL Server can be configured to provide high availability, ensuring that your data is always available

 Integration: SQL Server integrates with other Microsoft products, such as Microsoft Office and Microsoft Azure

In short, SQL Server is a good choice for applications that need security, high stability, performance, and integration with other Microsoft products.

Front-End: Angular 12

Front End (also known as client-side) is everything related to what users see every time they visit a website, including design aspects and languages like HTML or CSS

Angular 12 is a platform that provides developers with different tools to build a web application It is a free and open-source Javascript framework for creating online applications that include Javascript, HTML, CSS, and Typescript

1) Ivy Everywhere: Ivy Compiler delivers significantly faster compile speeds, faster application startup times, and smaller bundle sizes, resulting in a smoother and more efficient user experience Older versions don’t have it 2) Inline Critical CSS: Page loads faster because important CSS code is prioritized for rendering

3) RxJS 7 support: Integrates the latest RxJS 7 library with improved features and APIs, allowing for more efficient streamed data management

4) Scalability and flexibility: Easily scale the application to meet growing needs

5) Diverse libraries and tools: Supports many extended libraries and tools, meeting specialized needs

6) Clear MVC architecture: Makes it easy to organize and maintain code 7) The main reason: I learned about angular from the new technology subject After learning about it, I wanted to learn and use it

Back-End

Back-End is all the parts that support the operation of a website or application that the user cannot see It can be said that Back-End is like the human brain It processes requests and commands and selects the correct information to display on the screen Targets:

 Data storage and processing capabilities: store and process large amounts of data, including data about products, customers, orders, promotions, etc

 Scalability: meeting the growing needs of the web store in the future

 Security capabilities: protect customer and web store data

 Responsiveness: satisfy user access requirements, guaranteeing the stability Selection criteria:

 Do not choose technology that is too new: New technology is often unproven in terms of stability and security

 Do not choose technology that is too complex: Technology that is too complex will be difficult to deploy and maintain

 Do not choose technology without community support: The support community will help solve problems that arise during deployment and use Some Back-End technology

 PHP is an open-source programming language commonly used for web development PHP has rich resources and is easy to learn PHP can be vulnerable to security attacks if not used properly PHP can be slower than other programming languages when handling heavy tasks PHP has can be difficult to expand

 Node.js is an open-source JavaScript platform that runs on the server High performance, High scalability, High compatibility Node.js uses some new concepts that are event-driven so it is difficult to approach for newbies.Node.js is a new technology so there may be a lack of resources Used technology: ASP.NET

ASP.NET is an open-source web framework developed by Microsoft ASP.NET has several advantages that make it a good choice for my website:

 Supports necessary features: ASP.NET fully supports the necessary features for web stores, including product management, customers, orders, payments, etc

 Scalability: ASP.NET is highly scalable, helping to meet the growing needs of web stores in the future

 Security: ASP.NET has high security capabilities, helping to protect customer and web store data

 Performance: ASP.NET has high performance, helping to ensure the web store operates quickly and stably

 Compatibility: ASP.NET is compatible with other technologies, making it easy to integrate with other system.

Database

1 Website List of information in website

2 User List of account information

3 Product List of product information

4 Product Image List of product image

5 Product Related List of product related

6 Product Attribute List of product attribute

7 Review List of review about product

9 Article List of article about product

11 Order detail List of Order detail

12 Customer List of customer information

API

The process of building an API for my webstore system includes the following functions:

 Product management: The API provides functions to add, edit, delete, and retrieve product information from the product database This allows the user interface to display product listings, product details, and updated product information

 Order processing: The API provides functions to create orders, update order status, and retrieve order details This allows customers to add products to their cart and track order status

 User account management: API can provide registration, login, account information update and logout management functions for user

Postman is an API platform for building and using APIs Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs— faster

System Interface

Login Page: This is the login page interface so customers can access to use all functions and services of the website

Homepage: The home page is the page where people will see an overview of all the functions of the website and at the same time, the home page will also display laptop products that suit the customer's needs

Product detail: Customers can view detailed product information such as price, description, details, status, reviews View products related to the selected product

Order, cart : Customers can view information about the selected product and place an order

User Profile: This is the interface of the customer information editing page Customers can also review past and current orders

Overview: When logged in as an administrator of the website, the administrator can see this interface

Product list : Administrators can perform operations: add, delete, edit products There is complete detailed information for each product

Order list: Administrators can perform operations: view and confirm Order There is complete detailed information for each Order

Customers: Administrators can view detail those accounts

Revenue: Administrators can View the revenue in a day or a month

Software testing

Software Testing is the process of evaluating and verifying a software product to ensure it meets its intended requirements, functions correctly, and delivers a seamless user experience It involves systematically identifying and addressing defects and potential risks before the software is released to the public

Functional testing is a type of software testing that focuses on determining whether the software functions as expected Functional testers use test cases to verify that the software meets functional requirements

Example : Login function: customers can access to use all functions and services of the website when login successfully

Case 1: Enter valid username and password, login successfully

Case 2: Enter an invalid username, display an error message

Case 3: Enter invalid password, display error message

Case 4: Leave the username blank, display an error message

Case 5: Leave the password blank, display an error message

Non-functional testing is a type of software testing that focuses on non-functional aspects of software, such as performance, reliability, usability, and security

Common types of non-functional testing include: Check performance, check reliability, test usability

Install and run the application

Step 1:Open folder DEcommerce-dnx

Step 2 : Open file ecommerce_20_08.sql

Step 3: open Ecommerce.sln in folder EcommerceService

Step 4: After open Ecommerce.sln, click on IIS Expess to start api

Step 5 : Open folder DEcommerce and use cmd in this folder

Using command Npm install, waiting for installing After that Using command Npm start to run the program

CONCLUSION

Result achieved

Build the basic functions of a website

 Create an account, log in

Managing website content and banners

Construct and design systems and interfaces

Check and test run : using Postman to check API, functional and non-functional testing

Advantage

Complete the schedule assigned:15 weeks (Starting from 11/9/2023 to 25/12/2023) Theory: Research and learn Angular and support libraries

1) Build an Electronics store with Angular:

 Conduct a survey of some popular e-commerce websites based on criteria such as interface, features, and user experience

 Create a website development roadmap based on the previously mentioned survey results

 Design front-end and back-end

2) Try to stick to the criteria set out

 Desire to build a website with many functions and fast processing

 Improve programming skills, creativity and problem-solving abilities

Disadvantage

The website only solves the basic problems, not solving many difficult problems

 Lack of images and animations

 Comment from customers is not clear.

Future direction of development

Perfect the management system, easier for the administrator

Add more options in website: more payment options

1 Beginning Angular with Typescript” (Greg Lim)

2 SQL Beginner’s Guide & 7-Day Crash Course (John Russel)

2 https://learn.microsoft.com/vi-vn/aspnet/core/tutorials/first-mvc-app/start- mvc?view=aspnetcore-8.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual- studio

5 https://bard.google.com/chat