Practice: Build a website: ● For users: login/out,registration new account, view profile, edit profile, view products page, filter/sort products page,view product details page, manage p
INTRODUCTION
Reason to select this topic
E-commerce (electronic commerce or EC) is the buying and selling of goods and services, or the transmitting of funds or data, over an electronic network, primarily the internet These business transactions occur either as business-to-business, business-to consumer, consumer-to-consumer or consumer-to-business E-commerce shops have become part of our daily lives Technological advancement has made it possible for people to sit in the convenience of their homes and still shop online without going to a physical shop Viet Nam have also joined the trend of e-commerce business, so this project is meant to design an eCommerce online shop so that the people in Viet Nam will be able to purchase their goods and services online.
The goal of the project
- The store manager and the staff members operate as the administrators They can add, edit, update products or, delete products thus they able to change the names of products, change prices and, add or remove products
- The customer can search for products selection, update the cart, remove products from the cart and check out from the shop The customer is also able to update his information such as names, address and other data The User is only able to browse the online shop and add a product to the cart The user is limited to the use of the shop.
Scope
- Learn how to develop, plan out requirements, UI/UX for an ecommerce website by Jira Agile process Learn how to manage workload, breakdown tasks, tracking, testing and updating tasks status like in an Jira Agile project
- Learn about ReactJS, ExpressJS, MongoDB… , to build an E-commerce for selling shoes website
THEORY BASIS
MERN Stack
The technology we chose to develop this project is the MERN tech stack (MongoDB, Express, ReactJS, Typescript, Docker) Because it is one of the most modern web development technologies, it supports the development of a website both backend and frontend MERN stack makes it possible for developers to build a website in less time suitable for agile development projects Learning these technologies is also quite easy and does not take much time to apply.In addition, the support community and resources are very large, so the application of these technologies to understanding and developing web applications is completely reasonable and feasible
ReactJS is a JavaScript-based UI development library Facebook and an open- source developer community run it Although ReactJS is a library rather than a language, it is widely used in web development The library first appeared in May
2013 and is now one of the most commonly used frontend libraries for web development
ReactJS offers graceful solutions to some of front-end programming’s most persistent issues, allowing you to build dynamic and interactive web apps with ease It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing There’s never been a better time to learn React b Main concept
React is designed around the concept of reusable components You define small components and you put them together to form bigger components
All components small or big are reusable, even across different projects
Components in ReactJS play the same role as functions in javascript, but they work independently and are responsible for returning HTML components through the render function
There are 2 types of components: Function components and Class components
● Function Component: in ReactJS, the easiest way to define a component is to write a JavaScript function, which returns the HTML response:
● Class Component: we can also use ES6 Class to define a component, this is called the Class component in ReactJS c Outstanding features
You can completely use ReactJS to write apps directly in JavaScript Turn complex UI components into standalone components Pass customized data to a specific UI component Allows you to change the state for many child components and not affect the parent component even while in the Stateful state The ability to determine exactly when to re-render as well as when to remove the DOM element
● User-friendly interface: using ReactJS, users can create attractive, fast, and efficient web applications with minimal coding Users will feel the optimization of ReactJS in individual components Instead of having to work on the entire website application, when using ReactJS, developers can break down the UI structure into simpler components With the level of a JavaScript programmer, using ReactJS, you can easily develop web- based applications
● Support Reusable Component: not every developer can design effective components Reusable components allow developers to make extensive use of pre-optimized features Thanks to ReactJS, developers can completely reuse components that have been developed into other applications with the same functionality
● Write components more easily and faster: to write React components, users will use JSX This is a combination of JavaScript and HTML While
Page | 4 not the most popular syntax extension, JSX is appreciated by users when developing special components or large applications Using JSX, users can extend the syntax with a wide range of options easily The process of writing site structure is also clearer
● Better performance with Virtual DOM: web-based application projects are often prone to trouble in the DOM process With the advantage of using Virtual-DOM, ReactJS will help users avoid this problem Besides, ReactJS also allows users to build Virtual DOM and host them in memory This advantage will help virtual change as soon as the actual DOM changes Continuous updates help apps avoid interruptions Users use it continuously, and the website is stable, helping to maintain and increase revenue
● SEO Friendly: this is the wish of all businesses in today's exciting e- commerce era The more the user interface is accessible to different search engines, the higher the ability to reach customers This is one of the factors that directly affect the growth of sales through the website In fact, not all JavaScript frameworks are SEO-friendly Fortunately, ReactJS was born as a solution to this problem React allows you to create user interfaces that can be accessed on different search engines However, ReactJS is just a JavaScript library ReactJS cannot do everything by itself, replacing the entire SEO, SALE, or Developer team Users can combine ReactJS with additional libraries needed for management, routing, and interaction purposes
TypeScript is a statically typed superset of JavaScript that adds optional static typing to the language It enhances JavaScript by introducing features such as type annotations, interfaces, and classes TypeScript was developed and maintained by Microsoft and has gained popularity among developers for its ability to catch
Page | 5 potential errors at compile time and improve code maintainability TypeScript enables developers to write more robust and scalable applications while still leveraging the flexibility and power of JavaScript b Main concept
In TypeScript, developers can explicitly define types for variables, function parameters, and return values This allows for better understanding and documentation of the codebase TypeScript also supports features like interfaces, classes, and modules, making it easier to organize and structure code c Outstanding features
Enhanced Type Safety: TypeScript provides static type checking, allowing developers to catch potential errors during the development phase This helps improve code quality, reduce runtime errors, and enhance maintainability
Code Maintainability: TypeScript's features, such as interfaces and classes, promote code organization and modularity It enables developers to write cleaner and more structured code, making it easier to understand, maintain, and collaborate on projects
Tooling and IDE Support: TypeScript has excellent tooling support, including code editors and integrated development environments (IDEs) These tools provide features like code autocompletion, type inference, and error checking, enhancing developer productivity and reducing common mistakes
Seamless JavaScript Integration: TypeScript is a superset of JavaScript, which means that existing JavaScript code can be easily migrated to TypeScript This allows developers to leverage the vast JavaScript ecosystem while gradually introducing TypeScript features and benefits
Main functions
1 Add category group Allow adding a new category group
2 Edit category group Allow editing a category group
3 Delete category group Allow deleting category group
4 Add category Allow adding a new category
5 Edit category Allow editing a category
6 Delete category Allow deleting category
7 View user details Allow view user details
8 Edit user Allow editing an user information
9 Delete user Allow deleting user
10 Add product Allow adding a new product
11 Edit product Allow editing a product information
12 Delete product Allow deleting a product
13 Add promotion Allow adding a new promotion
14 Edit promotion Allow editing a promotion information
15 Delete promotion Allow deleting promotion
16 Verify order Allow editing an order status
17 View order details Allow viewing order details
18 Delete order Allow deleting order
19 View statistic Allow viewing revenue statistics, order statistics, sales statistics, product quantity statistic in real-time
20 Log in Enter username and password then log in to the system admin
21 Log out Log out of the system
1 Log in Enter username and password then log in
2 Log out Log out of the website
3 View main page Allow viewing main page of website
4 View list of products page Allow viewing list of products page
5 View product detail View detailed product information such as price, name, image, content, related product, description
6 View comments, rating Allow viewing comments, rating
7 Add comments, rating Allow adding comments, rating for ordered products
8 Add product to cart Allow adding product to cart
9 Edit item quantity Allow editing item quantity
10 Remove cart item Remove a item in cart
11 Clear cart Clear all products in cart
12 Add product to wishlist Allow adding product to wishlist
13 Remove product out of wishlist Allow removing product out of wishlist
14 Move products from wishlist to cart
Allow moving products from wishlist to cart
15 Move products from cart to wishlist Allow moving products from cart to wishlist
16 Perform payment Allow performing payment with multiple method (cash on delivery, PayPal)
17 Edit profile Allow editing profile
18 View order list Show all list of orders
19 View order detail Allow viewing detailed order information such as ( order id, order date, customer address, payment method, product name, product price, product quantity, total quantity, total cost)
20 Cancel order Allow canceling unverified orders
Table 2 – Functions of registered user
1 View main page Allow viewing main page of website
2 View list of products page Allow viewing list of products page
3 View product detail View detailed product information such as price, name, image, content, related product, description
4 View comments, rating Allow viewing comments, rating
Usecase diagram
Image 1 - Admin/Manger usecase diagram
3.2.2 Registered user/Guest usecase diagram
Image 2 - Registered user/Guest usecase diagram
Scenario
3.3.1 Use case “Log in (Admin)”
Table 4 – Use case “Log in (Admin)”
Brief Description Admin/Manager login to the management system
1 The admin/manager enters their username and password
2 The system verifies the account sent, ensuring that the account sent is a valid
3 The admin/manager has logged in and returned to the admin page
If the admin/manager entered an invalid username and/or password, the following occurs:
1 The system describes why admin/manager are not authenticated
2 The system prompts the admin/manager to re-enter the valid information
3 The Basic Flow continues where admin/manager enters new information
(none) Admin/manager have registered an account on the system
Success The admin/manager are authenticated
Failure User cannot log in for one or more reasons
3.3.2 Use case “Log in (Client)”
Table 5 – Use case “Log in (Client)”
Brief Description Registered user log in to website
1 The registered user enters their username and password
2 The system verifies the account sent, ensuring that the account sent is a valid
3 The admin/manager has logged in and returned to the home page
If the registered user entered an invalid username and/or password, the following occurs:
1 The system describes why user are not authenticated
2 The system prompts the user to re-enter the valid information
3 The Basic Flow continues where registered user enters new information
(none) Registered user has registered an account on the system
Success The registered user is authenticated
Failure User cannot log in for one or more reasons
Table 6– Use case “Register (Client)”
Brief Description A guest registers an account
1 The guest enters his/her account information
2 The system verifies the account sent, ensuring that the account sent is a valid
3 The system creates new account information
4 Redirect to Log in Page
If the user entered an invalid account information, the following occurs:
1 The system displays failed message
2 The system prompts the user to re-enter the valid information
3 The Basic Flow continues where user enters new information
(none) The account does not exist
Success The guest is authenticated and redirect to Log in Page
Failure Cannot register for one or more reasons
3.3.4 Use case “Log out (Client)”
Table 7 – Use case “Log out (Client)”
Brief Description Registered user log out of the website
1 The registered user log in to the website
2 The registered user clicks ‘LOG OUT ‘button
(none) The account does not exist
Success Log out the account then redirect to home page
3.3.5 Use case “Log out (Admin)”
Table 8 – Use case “Log out (Admin)”
Brief Description Admin log out of the website
5 The admin log in to the website
6 The admin clicks ‘LOG OUT ‘button
(none) The account does not exist
Success Log out admin then redirect to home
Table 9– Use case “Add category group”
Name Add category group (Admin)
Brief Description Allow adding new category group
1 The admin open category group management page
2 The admin clicks ‘Add’ button
3 The admin enters valid category information
5 The system adds category group information into database
6 The system displays success notification
Success Category group information added successfully
The system display success notification
Failure The system displays error notification
3.3.7 Use case “Edit category group”
Table 10– Use case “Edit category group”
Name Edit category group (Admin)
Brief Description Allow editing category group information
1 The admin open category group management page
2 The admin selects a category group
3 The admin clicks ‘Edit’ button
4 The admin enters valid category group information
6 The system update category group information into database
Success Category group updated successfully
The system display success notification
Failure The system displays error notification
3.3.8 Use case “Delete category group”
Table 11– Use case “Delete category group”
Name Delete category group (Admin)
Brief Description Allow deleting category group
1 The admin open category group management page
2 The admin selects category group
3 The admin clicks ‘Delete’ button
4 The system open confirm notification
6 The system removed category group
Success Category group removed successfully
The system display success notification
Failure The system displays error notification
Table 12– Use case “Add category”
Brief Description Allow adding new category
1 The actor open category management page
2 The actor clicks ‘Add’ button
3 The actor enters valid category information
5 The system adds category into database
6 The system displays success notification
The system display success notification
Failure The system displays error notification
Table 13– Use case “Edit category”
Brief Description Allow editing category information
1 The actor open category management page
3 The actor clicks ‘Edit’ button
4 The actor enters valid category information
6 The system update category information into database
The system display success notification
Failure The system displays error notification
Table 14– Use case “Delete category”
Brief Description Allow deleting category(s)
1 The actor open category management page
3 The actor clicks ‘Delete’ button
4 The system open confirm notification
6 The system changes the status of category(s)
Success Category(s) status updated successfully
The system display success notification
Failure The system displays error notification
Table 15 – Use case “Add product”
Brief Description Allow adding new product
1 The actor open product management page
2 The actor clicks ‘Add’ button
3 The actor enters valid product information
5 The system adds product into database
6 The system displays success notification
The system display success notification
Failure The system displays error notification
Table 16– Use case “Edit product”
Brief Description Allow editing product information
1 The actor open product management page
3 The actor clicks ‘Edit’ button
4 The actor enters valid product information
6 The system update product information into database
The system display success notification
Failure The system displays error notification
Table 17– Use case “Delete product”
Brief Description Allow deleting product (s)
1 The actor open product management page
3 The actor clicks ‘Delete’ button
4 The system open confirm notification
6 The system changes the status of product(s)
Success Product(s) status updated successfully
The system display success notification
Failure The system displays error notification
Table 18– Use case “Add promotion”
Brief Description Allow adding new promotion
1 The actor open promotion management page
2 The actor clicks ‘Add’ button
3 The actor enters valid promotion information
5 The system adds promotion into database
6 The system displays success notification
The system display success notification
Failure The system displays error notification
Table 19– Use case “Edit promotion”
Brief Description Allow editing promotion information
1 The actor open promotion management page
3 The actor clicks ‘Edit’ button
4 The actor enters valid promotion information
6 The system update promotion information into database
The system display success notification
Failure The system displays error notification
Table 20 – Use case “Delete promotion”
Brief Description Allow deleting promotion(s)
1 The actor open promotion management page
3 The actor clicks ‘Delete’ button
4 The system open confirm notification
6 The system changes the status of promotion(s)
Success Promotion(s) status updated successfully
The system display success notification
Failure The system displays error notification
Table 21– Use case “Edit order”
Brief Description Allow editing order information
1 The actor open order management page
2 The actor selects an order
3 The actor clicks ‘Edit’ button
4 The actor clicks ‘Verify’ or ‘Mark as paid’ button
5 The system update order status into database
The system display success notification
Failure The system displays error notification
3.3.19.Use case “View order detail”
Table 22– Use case “View order detail”
Brief Description Allow viewing order information
1 The actor open order management page
2 The actor selects an order
3 The actor clicks ‘Edit’ button
4 The system open order detail page
Success The system display order detail page
Failure The system displays error notification
Table 23– Use case “View statistics”
Brief Description Allow viewing statistics (users, sales, order, products) in real- time
1 The actor open statistic page
2 The system displays all type of statistics
Success The system displays all type of statistics
Failure The system displays error notification
3.3.21.Use case “View main page (Client)”
Table 24– Use case “View main page (Client)”
Name View main page (Client)
Brief Description Allow viewing main page of website
1 The actor navigate to the web
2 The actors view data on web
Success The system displays main page
Failure The system displays error notification
3.3.22.Use case “View list of products (Client)”
Table 25 – Use case “View list of products (Client)”
Name View list of products (Client)
Brief Description Allow viewing list of products
1 The actor clicks on any category group
2 The system opens list of product page
Success The system opens product detail page
Failure The system displays error notification
3.3.23.Use case “Filter list of products (Client)”
Table 26 – Use case “Filter list of products (Client)”
Name Filter list of products (Client)
Brief Description Allow filtering list of products
1 The actor clicks on any category group
2 The system opens list of product page
3 The actors filter list by size, category, sales
Success The system filter product detail page
Failure The system displays error notification
3.3.24.Use case “Sort list of products (Client)”
Table 27– Use case “Sort list of products (Client)”
Name Sort list of products (Client)
Brief Description Allow Sorting list of products
1 The actor clicks on any category group
2 The system opens list of product page
3 The actors sort list by price, date added
Success The system sort product detail page
Failure The system displays error notification
3.3.25.Use case “View product detail (Client)”
Table 28– Use case “View product detail (Client)”
Name View product detail (Client)
Brief Description Allow viewing product detail
5 The actor clicks on any product card
6 The system opens product detail page
Success The system opens product detail page
Failure The system displays error notification
3.3.26.Use case “Edit profile (Client)”
Table 29– Use case “Edit profile (Client)”
Brief Description Allow editing account information
1 The actor open profile page
2 The actor enters valid information
3 The actor clicks ‘Update’ button
4 The system save account information into database
Success Account information saved successfully
Failure The system displays error notification
3.3.27.Use case “Add product to cart (Client)”
Table 30 – Use case “Add product to cart (Client)”
Name Add product to cart
Brief Description Allow adding product to cart
1 The actor open product detail page
2 The actor clicks ‘Add to cart’ button
3 The actor clicks ‘Update’ button
4 The system adds a product to cart and update its quantity
5 The system shows success notification
Success Product added to cart successfully
The system show success notification
Failure The system displays error notification
3.3.28.Use case “Modify cart (Client)”
Table 31– Use case “Modify cart (Client)”
Brief Description Allow adjusting product quantity in cart
1 The actor open cart page
3 The system adjust product quantity depends on the quantity entered
Failure The system displays error notification
3.3.29.Use case “Remove product from cart (Client)”
Table 32– Use case “Remove product from cart (Client)”
Name Remove product from cart
Brief Description Allow removing product from cart
1 The actor open cart page
2 The actor clicks ‘Delete’ icon on any item
3 The system removes that item from cart
Failure The system displays error notification
3.3.30.Use case “Clear cart (Client)”
Table 33 – Use case “Clear cart (Client)”
Brief Description Allow delete all product in cart
1 The actor open cart page
2 The actor clicks ‘Clear cart’ button
3 The system deletes all products in cart
Success Delete all products in cart
Failure The system displays error notification
3.3.31.Usecase “Payment with cash (Client)”
Table 34 – Usecase “Payment with cash (Client)”
Brief Description Allow paying with cash
1 The actor open cart page
2 The actor clicks ‘Check out’ button
3 The actor enters valid information
4 The actor selects ‘ShipCOD’ as payment method
6 The system creates and save new order in to database
Success The system creates and save new order in to database
Failure The system displays error notification
3.3.32.Usecase “Payment with PayPal account (Client)”
Table 35– Usecase “Payment via PayPal (Client)”
Brief Description Allow paying with PayPal
1 The actor open cart page
2 The actor clicks ‘Check out’ button
3 The actor enters valid information
4 The actor selects ‘PayPal’ as payment method
7 The system creates and save new order in to database
8 The system redirect to PayPal payment page
9 The actor enters PayPal account
10.Redirect to Order success page
Success The system creates and save new order in to database
Redirect to Order success page
Non-functional requirement
Password is hashed when save to database
When user perform online payment, system does not save credit/debit card information
The system must ensure 24/7 operation
SYSTEM DESIGN
Database Design
ID Attribute Type Range Meaning Notes
4 info varchar Info of users
6 carts varchar Items in cart of users
7 wishs varchar Items in wishlist of users
ID Attribute Type Range Meaning Notes
3 products varchar Product in sale
8 isEndDate boolean Product in sale or not
ID Attribute Type Range Meaning Notes
3 group array Group of products
4 category array Category of products
5 brand varchar Brand of product
6 price number Price of product
7 available boolean Product is available or not
8 stocks array Stock of product
9 size array Size of products
10 detailImages array Image of product in product detail
11 bannerImage varchar Banner image product
12 description varchar Descriptio n of product
14 saleInfo object Sale informatio n of product
ID Attribute Type Range Meaning Notes
4 content varchar Communiti es content
5 rating number Communiti es rating
6 images array Communiti es images
ID Attribute Type Range Meaning Notes
1 CategoryGrou pId varchar CategoryG roup Id
2 name varchar Name of category group
4 imageUrl varchar Image of category group
ID Attribute Type Range Meaning
ID Attribute Type Range Meaning Notes
3 createDate date Date when products added to cart
5 products array Products added to cart
6 status varchar Status of products added to cart
7 isWhole boolean Check whether user is wholesale or not
ID Attribute Type Range Meaning Notes
7 isWhole boolean Check whether user is wholesale or not
UI Design
1.2.1 List of screens and conversion diagrams
Figure 1- List of screens diagram
1.2.1 Detailed description of the screens
❖ Meaning: The screen designed to provide some main information of website
❖ Meaning: Able users to log in by their accounts or create a new one
Figure 3: Sign in form design
1 textInput Input username or email
Figure 4: Sign up form design
❖ Meaning: Able user can change information or password or avatar
Figure 5: Design personal information page 1.2.1.5 Product detail page
❖ Meaning: Show some main information
2 Button Click to add product to cart
3 Button Click to add product to wishlist
❖ Meaning: Able user can see all information of product in cart page
2 Button Remove products from cart
3 TextInput Input quantities of products
4 Button Click to proceed to checkout
❖ Meaning: User can see order information before confirm
1 options Choose whether user is wholesale or not
2 Button Click button to add to cart
3 Button Remove products from wishlist
2 Link Click to see user details
1 Link Click to see orders details
2 Button Save all changes information
Sequence diagram
Figure 7: Login(admin) sequence diagram
Figure 8: Login(website) sequence diagram
Figure 10: Add user sequence diagram
Figure 11: Edit user sequence diagram
Figure 12: Delete user sequence diagram
Figure 13: Add category sequence diagram
Figure 14: Edit category sequence diagram
Figure 15: Delete user sequence diagram
Figure 16: Add product sequence diagram
Figure 17: Edit product sequence diagram
Figure 18: Delete product sequence diagram
Figure 19: Verify order sequence diagram
Figure 20: Delete order sequence diagram
Figure 21: View product detail sequence diagram
Figure 22: Add product to cart sequence diagram
Figure 23: Edit item quantity sequence diagram
Figure 24: Remove product from cart sequence diagram
Figure 25: Clear cart sequence diagram
Figure 26: Edit profile sequence diagram
IMPLEMENTATION AND TESTING
Implementation
React was designed from the ground up to be gradual, and you can use as little or as much React as you want Perhaps you just want to add some "touchpoints" to an existing page React components are a great way to do that
The vast majority of websites are not and need not be single-page applications With a few lines of code and no builder, try React in a small section of your site You can then gradually expand its presence or keep it in a few dynamic widgets
And since it's a SPA application, we use the HTTP client for the frontend to communicate with the backend through Rest API
For example, how our project applies architectures:
Figure 2: Structure ReactJS in project
We use NodeJS for the backend and Express is the most accessible framework when using NodeJS, so learning and applying Express to the NodeJS project is a simple and effective way for our team
Applying the MVC pattern to backend development is the simplest approach so we use the MVC pattern for the backend
Figure 3: MVC pattern in NodeJS
And writing and using Rest API to communicate with the frontend is necessary for a SPA application
Testing
The objective of the test is to verify that the functionality of Student Attendance Website VERSION 1.0 – Student Attendance Website works according to the specifications The test will execute and verify the test scripts, identify, fix and retest all high and medium severity defects per the entrance criteria, prioritize lower severity defects for future fixing
Testing will be focused on meeting the business objectives, cost efficiency, and quality There will be common, consistent procedures for all teams supporting testing activities
Testing processes will be well defined, yet flexible, with the ability to change as needed Testing activities will build upon previous stages to avoid redundancy or duplication of effort
Testing environment and data will emulate a production environment as much as possible Testing will be a repeatable, quantifiable, and measurable activity
There will be entrance and exit criteria
5.2.1.3 Scope and Levels of Testing
PURPOSE: Functional testing will be performed to check the functions of the application The functional testing is carried out by feeding the input and validating the output from the application
SCOPE: The below excel sheet details the scope of the Functional test Note: The scope is high level due to changes in the requirement
METHOD: The test case will be performed in Excel manually
● Approved Functional Specification document, usecase documents must be available before the start of the Test design phase
● Test cases approved and signed-off before starting of Test execution
● Development completed, unit tested with pass status and results shared to Testing team to avoid duplicate defects
● Test environment with the application installed, configured, and ready to use state
No Deliverable Name Author Reviewer
1 Test Plan Our Team Supervisor
2 Functional Test Cases Our Team Supervisor
3 Test Cases Our Team Supervisor
4 Daily/weekly status report Our Team Supervisor
5 Test Closure report Our Team Supervisor
Student Attendance Website version 1.0 will be hosted at the free hosting site Student Attendance Website version 1.0 will be hosted on three servers: One to host the backend server, one to host the frontend site, and the other to host the (database name) database
❖ Theory: This is a type of software testing where individual units or components of the software are tested The purpose is to validate that each unit of the software code performs as expected A unit may be an individual function, method, procedure, module, or object
❖ Classification Unit Testing Unit Testing is of two types
❖ Theory: INTEGRATION TESTING is defined as a type of testing where software modules are integrated logically and tested as a group A typical software project consists of multiple software modules, coded by different programmers
❖ Types of system testing strategies
● Big Bang Testing: Big Bang Testing is an Integration testing approach in which all the components or modules are integrated at once and then tested as a unit This combined set of components is considered as an entity while testing
● Bottom-up Integration Testing: Bottom-up Integration Testing is a strategy in which the lower-level modules are tested first These tested modules are then further used to facilitate the testing of higher-level
Page | 95 modules The process continues until all modules at the top level are tested
● Top-down Integration Testing: Top-down integration testing is a method in which integration testing takes place from top to bottom following the control flow of the software system
● Sandwich Approach – Combination of Top-Down and Bottom-Up
Sandwich Testing is a strategy in which top-level modules are tested with lower-level modules at the same time lower modules are integrated with top modules and tested as a system
❖ Theory: System testing is the testing of a complete and fully integrated product After Integration test and Unit test
❖ Theory: Acceptance Testing is a test to determine whether the software system meets the specifications or not
Black Box Testing is a part of user acceptance testing This testing method helps to analyze the functionality without allowing the tester to see the internal code structure
⇨ Conclusion: Acceptance Testing is one of the very important testing stages that help you evaluate the functionality of the software application to meet the specified requirements or not Therefore, understanding what Acceptance Testing is and the types of Acceptance Testing will help you do a better job of software testing
5.2.4 Black box testing and bug report
In this project, we use black box testing method to test main functions of the application The biggest advantage of black box testing is that it is quite
Page | 96 suitable for testing a large part of code or main functions of the system, which is very convenient for rapid software development
Name Space character check in 'Password' field in the Register page
The users create their information (password in this case) with an invalid value ‘123 456 78’ in any field
Users try to create their account with an invalid value ‘123 89 1 ‘the system don’t let them to accomplish their progress There will be a form validation, also a message informs to users
Not allow users to create with invalid value
Test the value in Password field with the different six special symbol
The users create their information (password in this case) with an invalid value ‘;;;;;;’ in any field
Users try to create their account with an invalid value ‘;;;;;; ‘ the system don’t allows them to accomplish their progress
Page | 99 System shows error message
CONCLUSION
Achievements
In the short time since starting to receive the topic, when going through the analysis and finding solutions to implement the topic In general, the group has completed the goals as well as the initial expectations Through self-study and looking for information online to do the project, my team knew and understood more about the process of building an application about ReactJS and NodeJS, database analysis, problem-solving, and teamwork Thereby helping the group improve their skills and gain more experience
My group with knowledge about:
▪ How it works and use ReactJS, NodeJS
▪ How to write and use the API, MongoDB
Almost all requirements are met
Clean code and reusable components
Simple UI and easy to use
Not have consistance structure and design for UI, UX of the website
Only support PayPal and ShipCOD as payment gateway, need to integrate additional payment options
Need more features for customers to reviews, ratings or social sharing
Continuous development and deployment: easy to update new features and smoothly implemented without breaking the application
Admin page provide extensive control over the shop operations
Client have not much, but enough features to process an order
Manage the project process well with Notion tool
Add additional payment method for the shop like Momo, VNpay…
Develop applications on other platform like Android, iOS
Continue improve UI and system maintenance
Improve authentication, upgrade other features of the web
Continue on integrate GHN shipping method
[1] M Satheesh, BJ D'mello, J Krol, Web Development with MongoDB and
[2] Jakob Ricardo Clausen , Using useMemo and useCallback in React, April 18 th
[3] Ron Fybish , Implementing Microservices in NodeJS, May 20 th , 2021
[4] Frank Joseph, Building microservices with Node.js, February 1st, 2022
[5] Clara Ekekenta, Build React reusable components faster with Aspect, March
[6] Blake Yeboah, Developing MERN Stack Applications, January 23 rd , 2022
[7] Puneet Singh, OAuth implementation with Node.js and Github, March 22 nd ,
[8] Ashish Sharma, NodeJS and MongoDB application authentication by JWT, March 20 th , 2020
[9] Hridayesh Sharma, Password hashing in NodeJS using Bcrypt, November
[10] Andy Yeung, Using PGP Encryption with NodeJS, November 10 th , 2020
[11] The Good and the Bad of ReactJS Retrieved from AltexSoft website: https://reactjs.org/tutorial/tutorial.html
[12] Redux - Overview - Tutorialspoint (n.d.) Retrieved from website: https://redux.js.org/tutorials/essentials/part-1-overview-concepts
[13] Store data with Mongodb Retrieved from website: https://www.mongodb.com/docs/