Essay report subject software engineering and testing topic quiz app website

Build a schedule working days Start date End date Market and customer research Define goals and audience 3 days 07/09/2024 10/09/2024 Website development and Nguyễn Minh Hiếu Leader Proj

THAI NGUYEN UNIVERSITY

INFORMATION TECHNOLOGY THAI NGUYEN

UNIVERSITY

ESSAY REPORT SUBJECT: SOFTWARE ENGINEERING

AND TESTING TOPIC: QUIZ APP WEBSITE

Lecturer: MA Nguyen Quang Hiep Class: KTPM KNU – K21

Thai Nguyen, 19/11/2024

DETAILED SCHEDULE

1 Build a schedule

working days

Start date End date

Market and customer

research

Define goals and audience 3 days 07/09/2024 10/09/2024

Website development and

Nguyễn Minh Hiếu (Leader) Project management

Website construction and design

Dương Thị Luyến Market research and customers Dương Quang Vinh Search Engine Optimization

Chapter I: Development and Analysis of the Target

Product

1 Product Idea

1.1 Overview of the Product

- Product: The proposed product is a website designed to

facilitate the assignment and management of quizzes for students in an educational setting This system

streamlines the process of delivering, completing, and evaluating quizzes, making it more efficient for both teachers and students

- Product Value and Benefits Provided:

- Functionality for Teachers:

+ The website allows teachers to assign quizzes to

students through an online platform, eliminating the needfor paper-based or manual processes

+ Teachers can monitor and analyze the scores achieved

by each student, enabling them to assess academic performance and identify areas where students may needadditional support

- Functionality for Students:

+ Students can access and complete the quizzes assigned

to them in a convenient and user-friendly interface

+ The system provides immediate feedback on their

performance, enabling students to review their scores andunderstand their progress in real-time

- Category: This product falls under the category

of educational technology, specifically within the domain of online assessment systems designed

to evaluate academic proficiency and progress.

1.2 Product Description:

- The proposed quiz website is a comprehensive online platform that supports both teaching and learning objectives It has the following

key functionalities:

+ For Teachers:

- Teachers can create, customize, and assign quizzes tailored to their

specific subject matter or curriculum

- The platform offers tools to track student performance, including

score summaries and detailed analysis for each student

- By using this system, teachers can save time and effort in grading

and focus more on instructional activities

+ For Students:

- Students can log in to the platform to view and complete quizzes

assigned to them at any time and from any location, promoting flexibility and accessibility

- The platform records and displays scores after quiz completion,

helping students identify their strengths and weaknesses

- Students can use the website to practice and improve their skills,

ultimately contributing to better academic outcomes

- Overall, the quiz website aims to enhance the educational

experience by leveraging technology to simplify the process of assessment and feedback, making it more engaging and effective for both educators and learners This product is expected to address the growing need for digital solutions in education, particularly in an era where online learning is becoming increasingly prevalent

Chapter II : Processes 2.1.Development process

The development process outlines the key stages required to transform an idea into a functional, deployable application This structured approach ensures that each aspect of the project is systematically addressed, from initial conception to final packaging The process can be broken down into the following phases:

2.1.1 Idea Phase

 Objective Definition: This step involves defining the purpose

and goals of the project It’s crucial to have a clear

understanding of what the project aims to achieve to ensure that all development work is aligned with the overall objectives

 Brainstorming: Conduct brainstorming sessions to generate

ideas, determine features, and outline the scope of the project

 Feasibility Analysis: Evaluate whether the project is

achievable with the available resources, skills, and

technologies This may involve assessing time constraints, technical challenges, and budget considerations

2.1.2 Analysis and Design (AnD)

 Requirement Gathering: Collect all necessary information

regarding the project requirements This could involve meeting with stakeholders, conducting user interviews, or researching similar projects

 System Design: Design the system architecture to define how

various components of the application will interact This includes creating flow diagrams, data models, and architecture diagrams

 Database Design: Design the database structure to ensure

efficient data storage and retrieval This involves defining entities, relationships, and deciding on data types and indexing where necessary

 UI/UX Design: If the application includes a user interface,

design wireframes and mockups for the user experience This step is essential to create an intuitive and visually appealing user interface that aligns with project goals

2.1.3 Development

 Backend Development: Implement server-side logic and

application programming interfaces (APIs) to handle data processing, user authentication, and other functionalities This includes coding with the chosen backend language, such as Python with the Flask framework

 Frontend Development: Develop the client-side of the

application using HTML, CSS, and JavaScript Ensure that the frontend communicates effectively with the backend and provides a responsive and user-friendly experience

 Version Control: Use a version control system (e.g., Git) to

track code changes, collaborate with other developers, and manage different versions of the project

2.1.4 Package

 Code Compilation: Compile and organize code files into a

structured package that’s ready for deployment This may include minifying code, combining files, and ensuring all dependencies are correctly configured

 Environment Configuration: Set up configurations for

different environments (e.g., development, testing, and production) This could involve setting environment variables, configuring database connections, and adjusting settings to suitthe deployment environment

 Documentation: Document the code, system architecture, and

configurations to provide clear instructions for deployment and future maintenance This step is crucial for ensuring that other developers or stakeholders can understand and work with the codebase

 Testing and Debugging: Conduct tests to ensure that the

package is free from errors and performs as expected Testing may include unit tests, integration tests, and user acceptance testing (UAT) to identify and fix any issues

2.1.5 Pre-learn

Technology Preparation: Prior to actual development, it is

important to prepare by learning or reviewing the required tools and technologies This phase ensures the development team is familiar with the tools, libraries, and frameworks that will be used in the project Key technologies in this project include:

 Python: Used for backend logic, ensuring that the team is

familiar with Python syntax, libraries, and best practices for backend development

 Flask: As the chosen web framework, Flask enables the

development of web applications Familiarity with Flask is essential for routing, handling requests, and integrating with other components

 SQLite: As the database management system, SQLite provides

a lightweight, file-based solution for storing and retrieving data The team should understand SQLite’s structure, SQL query

syntax, and best practices for using a relational database within

a web application

 HTML & CSS: HTML and CSS form the foundation of frontend

development HTML is used to structure content, while CSS is used to style it These skills are essential for creating

responsive and visually appealing user interfaces

o Ensure the quiz data is not accessible without

authorization if expanded for user accounts

2.2.2 Testing During Development (Unit Testing)

Backend Unit Testing

1 Use PyTest or unittest for the following:

Database Operations:

- Test Case: Adding a quiz to the database

- Expected Result: The quiz is stored in the database.

2 Form Submission (/save_quiz):

- Mock the request.form object to simulate quiz creation

3 Scoring Logic (/submit_exam):

- Expected Result: The score is calculated correctly.

Frontend Unit Testing

Testing API Endpoints

 Use Postman or PyTest for API tests

1 Endpoint: /save_quiz

- Test sending valid and invalid data

- Test Case

2 Endpoint: /submit_exam

- Verify user responses are correctly scored

Frontend and Backend Integration

 Simulate a user completing the quiz:

- Select answers and submit

- Verify the result page displays correct scores

2.2.4 Pre-Deployment (System Testing)

Test Scenarios

 Complete Quiz Flow:

- User creates a quiz

- User takes the quiz

- User submits the quiz and views the result

 Edge Cases:

- Submitting a quiz without selecting answers

- Handling duplicate quiz questions

Error Handling:

 Ensure error pages (e.g., 404, 500) render correctly.

2.2.5 Post-Deployment (Maintenance Testing)

Regression Testing

 After adding a leaderboard feature, test if the existing scoring system works as expected

Security Testing

 Ensure SQL injection is not possible (e.g., via /save_quiz form)

Example Test Cases Table

Test Case

ID

Description Steps Expected Outcome

TC001 Add a quiz Submit a form with valid data

TC005 Load test (concurrent

users)

Simulate 50 users taking the quiz simultaneously

App handles concurrent users gracefully

In this project, we used several tools and technologies for different aspects of the deployment:

 Ubuntu (Linux OS):

A robust and widely used operating system for hosting web applications

 ufw (Uncomplicated Firewall):

A user-friendly firewall tool to manage and secure access to the server

 Nginx Logs:

Logs for monitoring web server activity

(/var/log/nginx/access.log and /var/log/nginx/error.log)

 systemctl and journalctl:

Tools for managing and checking the status and logs of serviceslike Gunicorn and Nginx

A system monitoring tool for checking server resource usage

2.3.2 Setting Up the Ubuntu Server

The first step is preparing the Ubuntu server After gaining access via SSH, ensure the system is up to date by running:

sudo apt update && sudo apt upgrade -y

Additionally, install essential tools such as Git, Python3, and pip:

sudo apt install python3 python3-pip python3-venv git -yThis environment provides the foundation for installing and managing the Flask-based quiz app and its dependencies

2.3.3 Installing Nginx

Nginx serves as the web server and reverse proxy for the Flask app Install Nginx with:sudo apt install nginx -y

After installation, enable and start Nginx:

sudo systemctl enable nginx

sudo systemctl start nginx

To confirm that Nginx is working, access the server's IP in a browser The default Nginx welcome page will appear

2.3.4 Cloning and Setting Up the Quiz App

The quiz app is typically hosted on a version control system like GitHub Clone the repository to the server:

cd quizapp

Set up a virtual environment to isolate dependencies:

python3 -m venv venv

source venv/bin/activate

pip install -r requirements.txt

Run the app locally to verify its functionality:

flask run

2.3.5 Deploying Flask with Gunicorn

Gunicorn, a Python WSGI server, is used to serve the Flask app in production Install it within the virtual environment:

pip install gunicorn

Test Gunicorn with the Flask app:

gunicorn -w 4 -b 127.0.0.1:8000 quizapp:app

2.3.6 Configuring Nginx as a Reverse Proxy

To make the app accessible over the web, Nginx is configured as a reverse proxy to route requests to Gunicorn

Create a server block:

sudo nano /etc/nginx/sites-available/quizapp

Add the configuration:

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme;

sudo systemctl reload nginx

2.3.7 Securing the App with HTTPS

Securing the app with SSL ensures data encryption Use Certbot to acquire and configure a Let's Encrypt SSL certificate:

sudo apt install certbot python3-certbot-nginx -y

sudo certbot –nginx

Certbot will automatically configure HTTPS for the app Test by visiting the domain using https:// quizapp.com

2.3.8 Automating Gunicorn with systemd

To ensure Gunicorn runs on server boot, create a systemd service file:

sudo nano /etc/systemd/system/quizapp.service

[Install]

Start and enable the service:

sudo systemctl start quizapp

sudo systemctl enable quizapp

Check the service status:

sudo systemctl status quizapp

2.3.9 Final Testing and Monitoring

After completing the deployment, test the app by visiting your domain in a web browser Ensure the app is accessible and HTTPS is enabled Monitor server performance and logs for any errors :

Nginx logs:

sudo tail -f /var/log/nginx/access.log

sudo tail -f /var/log/nginx/error.log

 Technical Operations:

o Frontend: The interface where users interact.

o Backend: The part that processes information and

generates questions based on algorithms or artificial intelligence

o Database: Stores essential information such as the

question bank, topics, difficulty levels, etc

o Improving algorithms to make questions more creative or less predictable

 System Upgrades:

o Increasing processing speed as user traffic grows

o Securing user information and preventing cyberattacks

o Integrating new technologies such as AI or natural language processing to enhance question quality

 Performance Monitoring:

o Measuring page load speed, response time, and user satisfaction

Chapter III : Demo Application

3 Website design and user experience 3.1 Website and content

a) Teacher main UI.

b) Student main UI.

c) Function Description.

- Login function

 User authentication: Allows users to log into the system to authenticate their identity, helping to secure and manage access rights.

 Access personal information: After logging in, users can access personal information and data, including test results or related information.

 Error notification: If users enter incorrect login information, the system will notify them of errors for correction.

- Account registration function

 New account registration: Allows users to create a new account with a username and password.

 Password authentication: The system requires re-entering the password to ensure that the user remembers and enters it correctly.

 Duplicate account notification: If the username is already in use, the system will notify the user of an error so that they can choose another name.

- Take quiz function

 Access test questions: Users can participate in tests with multiple choice questions set up by the system.

 Score recording: After completing the test, the system will calculate and save the user's score.

 Instant results: After submitting the test, the system will

display the score and the number of correct questions, helping users grasp the test performance immediately.