Báo Cáo
Báo Cáo
COMMUNICATION TECHNOLOGY
Faculty of Computer Science
BASIC PROJECT 4
Building an E-commerce website-MixiShop
1
ACKNOWLEDGEMENT
We express our heartfelt gratitude to all those who have contributed to this project,
with special thanks to Ph.D. Nguyen Huu Nhat Minh. Your support and guidance have
been invaluable in making this project a reality
Students,
Dinh Minh Khoa,
Dang Cong Gia Han
2
INSTRUCTOR’S COMMENTS
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
…………………………………………………………………………………………...
……………………………………………………
Instructor
3
TABLE OF CONTENTS
4
LIST OF ACRONYMS
ACRONYMS CONTENT
JS JavaScript
BE Backend
Laravel Laravel
LIST OF PICTURES
5
INTRODUCTION
1. Introduction
In recent years, e-commerce has become a widespread trend, but traditional platforms
often lack a special connection with fan communities. Recognizing this potential,
Mixishop was created with the aim of targeting users who are fans of a ấy. Mixishop is
not just an ordinary shopping platform—it is a dedicated space where fans can
discover exclusive products, themed merchandise, and personalized services tailored
to their interests. With a user-friendly interface and specially curated content,
Mixishop offers a unique shopping experience that fosters deeper connections within
the fan community.
2. Project goal
Project Goal: The goal of the project is to develop and launch a fan-centric e-
commerce platform inspired by Mixishop, tailored for the specific community of fans.
As students, we aim to leverage modern web development technologies to create an
affordable and accessible platform where fans can easily find exclusive merchandise,
customized items, and other products related to their interests.
The project seeks to provide a personalized and engaging shopping experience,
fostering a stronger connection between the fans and their shared interests.
Furthermore, this project aims to enhance our practical skills in web development, user
interface design, and customer interaction, while also showcasing the potential of
combining e-commerce with community-driven platforms. Ultimately, we hope this
initiative will contribute to the growth of niche markets and demonstrate the
importance of understanding target audiences in online business ventures. 3.
Implementation plan
- Define project scope and objectives: Clearly outline the goals and objectives
of the project.
- Conduct a feasibility study: Analyze the feasibility of the project.
- Develop a project schedule: Create a project schedule that outlines all of the
tasks, dependencies, and milestones needed to complete the project.
- Assemble a team: Assemble a team of individuals with the necessary skills and
experience to carry out the project.
- Begin work: Start work on the project, following the project plan and adhering
to the chosen project management methodology.
1
- Monitor progress: Regularly monitor the project's progress to ensure it is on
track and make any necessary adjustments.
- Handle issues and risks: Identify and address any issues or risks that arise
during the project.
- Complete the project: Complete the project and deliver the final product or
service.
- Evaluate the project: Evaluate the project's success by comparing its results to
the project scope and goals. Use this information to identify opportunities for
improvement in future projects.
- Close out the project: Close out the project by completing any remaining
administrative tasks and documenting the project's results and lessons learned.
2
Chapter 1. OVERVIEW
1. PROGRAMMING LANGUAGES
1.1. HTML
The HyperText Markup Language or HTML is the standard markup language
for documents designed to be displayed in a web browser. It is frequently assisted by
technologies such as Cascading Style Sheets and scripting languages such as
JavaScript.
1.2. CSS
Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML or XML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.
3
Picture 1.1.3: Javascript
1.4. PHP
Hypertext Preprocessor (PHP) [4] is an open-source, free server-side scripting
language widely used in web development. According to Web Technology Surveys,
PHP is used by 78.1% of all websites, including high-traffic websites like Facebook
and Wikipedia.
4
2.2.Bootstrap
Bootstrap is a free, open sources front-end development framework for
the creation of websites and web apps. Designed to enable responsive development of
mobile-first websites, Bootstrap provides a collection of syntax for template
designs.As a framework, Bootstrap includes the basics for responsive web
development, so developers only need to insert the code into a pre-defined grid
system. The Bootstrap framework is built on Hypertext Markup Language (HTML),
cascading style sheets (CSS) and JavaScript. Web developers using Bootstrap can
build websites much faster without spending time worrying about basic commands and
functions.
3. OTHER TECHNOLOGIES:
5
3.4. Git
Git is a distributed version control system that helps developers track changes
in their source code over time. Created by Linus Torvalds in 2005, Git is designed to
handle everything from small to very large projects with speed and efficiency. It is
widely used in software development for version control, enabling teams to collaborate
on projects, maintain a history of changes, and manage multiple versions of their code.
6
3.6.MySQL
MySQL is an open-source relational database management system developed
by Oracle Corporation.It uses Structed Query Language (SQL) for database
management and is known for its reliability, speed and ease of use.MySQL is widely
used for various applications, from small websites to large-scale enterprise systems.
7
Chapter 2. SYSTEM ANALYSIS AND DESIGN
1. Requirement modeling
1.1. Functional requirements
Actors list: The system needs to provide the following functionalities:
1) Customer:
● Give feedbacks: provide feedback about products or shopping experience
● Create an account: login or register to use the website
● View products: Allows customers to browse available products by prices or
category
● Place order: order items available on website
● Confirm order: Confirms the customer's order details before payment.
● Cancel order: cancel ordered items in case you don’t want or any problems
● View order status: Customers can track the status of their order
2)
Use case diagram
8
Figure 11. User’s Use Case Diagram
User’s Use case specification:
Actors: Customer
9
Basic Flow:
Alternative Flow:
Actors: Customer
Basic Flow:
10
Alternative Flow:
Actors: Customer
Basic Flow:
Basic Flow:
Preconditions:
Basic Flow:
Postconditions:
Basic Flow:
12
Postconditions: customer's placed order is cancelled if confirmed.
Basic Flow:
Postconditions:
2. Behavior modeling
Activity diagram
Register Account
13
Figure 13. Register Account
Login
14
Figure 13. Login
Create Profile
15
Figure 14. Create Profile
Lookup Profile
16
Figure 15. Lookup Profile
Write Tag
17
Figure 16. Write Tag
State diagram
18
2. Structure modeling
2.1. Classes
User class:
3 Username Text
4 Name Text
5 Password Text
BusinessCard class:
1 ID Number Identifier
2 Name String
3 Slogan String
Contact class:
20
Chapter 3. INFRASTRUCTURE DESIGN
2.1. Microservices
infrastructure design
2.1.1. Deployment Diagram
21
● MongoDB container: A container running the MongoDB database, storing
data for the application. It is connected to the application container via a Docker
network.
Network (mongo_network)
Volume:
Client Browser
● This represents the end-user who is accessing the system via a web browser.
● The client browser connects to the Application Server through HTTP on port
8001 to retrieve HTML, JavaScript, or JSON responses from the application.
These responses are typically the rendered UI or data needed for the app.
● The client also connects to the Image Server through HTTP on port 8002 to
request or upload images, such as profile pictures, product images, etc.
Developer pushes code: The developer commits changes to the code repository
(GitLab).
CI/CD runner executes the CI/CD pipeline: The CI/CD runner, which is
responsible for automating the workflow, triggers the Continuous
22
Integration/Continuous Deployment (CI/CD) pipeline as soon as code is
pushed. A CI/CD system could be GitLab CI, Jenkins, CircleCI, etc.
CI/CD runner builds a Docker image from the code and pushes it to a
container registry: The runner builds a Docker image from the updated
codebase. This Docker image contains the application, its dependencies, and
environment settings. The image is then pushed to a container registry, where it
can be accessed for deployment.
CI/CD runner SSHs into the AWS instance to run commands: Once the
Docker image is pushed to the registry, the runner connects to an AWS EC2
instance via SSH and runs necessary commands. This is the automation part
where no manual intervention is required.
AWS pulls code from sigconn-tap-compose: The EC2 instance pulls the
Docker Compose configuration or any other code needed for deployment from
the repository (Sigconn-tap-compose). This repository likely contains the
Docker Compose files and related configurations.
AWS runs the Docker Compose file to deploy: Finally, the EC2 instance uses
Docker Compose to start the containers based on the latest Docker images. This
file orchestrates the setup of the backend, frontend, database, and other services.
23
Figure 3.1.2.2 Sigconn Pipeline for Compose
2.2.2. CI implementation
- CI implementation on be-main:
24
Figure 3.2.2.1 Be-main Implementation
- CI implementation on be-img:
- Define networks:
25
Figure 3.2.3.1 Network-defining Code
- Define database service and set environment variables, and volumes:
26
Figure 3.2.3.5 Be-shared-card Setup
2.2.4. CD implementation
- CD implementation on every repositories(except sigconn-tap-mobile):
27
2.2.5. Proxy configuration with Nginx
To ensure our ReactJS application, which runs on port 3000, is accessible via a
standard HTTP port (80) and to leverage Nginx’s capabilities for load balancing and
security, we configured Nginx [12] as a reverse proxy.
28
Chapter 4. RESULT
- Response Time:
● With 100 concurrent requests, the average response time was
250ms.
● As the number of requests increased to 500, the response time
rose to 450ms, still meeting the group’s goal of staying under
500ms.
- Throughput:
29
● When tested with 100 concurrent requests, the system achieved a
throughput of 200 requests/second.
● As the load increased to 500 concurrent requests, throughput
slightly decreased to 150 requests/second, but the system
remained stable and avoided bottlenecks.
- Resource Usage: Throughout testing, CPU and memory usage remained
within safe limits, with CPU peaking at 75% and memory at 60%. This
demonstrates that the system can handle demand efficiently without
exhausting hardware resources.
- Reliability and Stability: With integrated monitoring and logging tools, the
development team was able to quickly detect and resolve issues, ensuring
high system reliability.
31
CONCLUSION
1. Result
In the journey of developing and promoting SigConn Tap, we have gained
valuable insights and experiences that have shaped our understanding of NFC
technology and its potential applications in everyday life. The core lesson learned from
this project is the transformative power of affordable solutions in making advanced
technologies accessible to a broader audience.
Through SigConn Tap, we have successfully demonstrated that the integration
of NFC technology into everyday tools, such as business cards, can be not only cost-
effective but also user-friendly. The ability to create personal profiles effortlessly on a
single platform opens up new possibilities for individuals to enhance their connectivity
and networking opportunities.
Furthermore, our project has highlighted the significance of addressing the cost
barrier associated with NFC-enabled business cards. By providing a budget-friendly
alternative, SigConn Tap has positioned itself as a catalyst for widespread adoption of
NFC technology, breaking down financial barriers and encouraging more individuals
to embrace the convenience it offers.
As we reflect on the project goals, it is evident that we have not only developed
a practical solution in SigConn Tap but also contributed to the broader narrative of
advancing digital connectivity in society. The promotion of NFC technology extends
beyond business cards, with potential applications in diverse fields such as payment
systems and parking card solutions.
2. Development
The development and launch of SigConn Tap have yielded significant
achievements and insightful experiences. Through this project, we have
demonstrated that advanced NFC technology can be made both accessible and
affordable to a broader audience. By leveraging this technology, SigConn Tap
has transformed traditional business cards into dynamic and user-friendly
digital tools, facilitating greater connectivity and networking opportunities.
32
Our focus on delivering a cost-effective solution has proven critical in
overcoming financial barriers, making NFC-enabled business cards an
attractive option for individuals and businesses alike. SigConn Tap has not
only fulfilled its role as a practical application but also emerged as a catalyst
for encouraging the widespread adoption of NFC technology [4] in everyday
life. Beyond business cards, the potential applications span across sectors,
including payment systems, parking solutions, and access control, highlighting
the versatile nature of the technology.
Looking ahead, there are ample opportunities for further development and
expansion, from enhanced profile customization and integration with existing
platforms to broader use cases like NFC-based payments and access control
systems [4]. The potential to collaborate globally, integrate cutting-edge
technologies like blockchain and AI, and expand into new markets positions
SigConn Tap for future growth and continued success.
33
REFERENCE DOCUMENTS
[1] S, A. (2023, August 25). What is HTML? Hypertext Markup Language Basics explained.
Hostinger Tutorials. https://www.hostinger.com/tutorials/what-is-html
[2] What is CSS? - Learn web development | MDN. (2024, July 25). MDN Web Docs.
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS
[3] What is JavaScript? - Learn web development | MDN. (2024, August 3). MDN Web Docs.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript
[4] Wankhede, C. (2024, May 13). What is NFC and how does it work? Everything you need to
know. Android Authority. https://www.androidauthority.com/what-is-nfc-270730/
[5] Toal, R. (2023, October 23). What is PHP? Uses & Introduction - Code Institute IE. Code
Institute IE. https://codeinstitute.net/global/blog/what-is-php-programming/
[9] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. (n.d.).
Tailwind CSS. https://tailwindcss.com/
[11] Simplilearn. (2024, July 24). What is FastAPI: The future of Modern Web development.
Simplilearn.com. https://www.simplilearn.com/what-is-fastapi-article
[12] What is Nginx: Everything You Need to Know - Papertrail. (2022, August 29). Papertrail.
https://www.papertrail.com/solution/guides/nginx/
1
[16] What is Amazon EC2? - Amazon Elastic Compute Cloud. (n.d.).
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html
[17] Gillis, A. S., Loshin, P., & Cobb, M. (2024, July 29). What is SSH (Secure Shell) and How
Does It Work? Security. https://www.techtarget.com/searchsecurity/definition/Secure-Shell