832401106_ChenXin_First Assignment——Front-End and Back-End Separated Calculator System

Table of Contents

• Repository Links
• PSP Table
• Product Demo
• Design and Implementation
• Key Code Explanation
• Problems and Lessons Learned
• Deployment Notes

Repository Links

1. Live Project Website：https://laid-band-dow-begin.trycloudflare.com/
2. Frontend Repository: https://gitee.com/xena2006/832401106_calculator_frontend
3. Backend Repository: https://gitee.com/xena2006/832401106_calculator_backend
4. Frontend Code Style: https://gitee.com/xena2006/832401106_calculator_frontend/blob/main/codestyle.md
5. Backend Code Style: https://gitee.com/xena2006/832401106_calculator_backend/blob/main/codestyle.md

PSP Table

Product Demo

For each test below, run the calculator locally, take a screenshot.

1. Basic Operation & Precedence Test

Test basic operator precedence, input 1+2*3, get result 7, which means the precedence handling works correctly, and the history record is added successfully.

2. Parentheses Priority Test

Test parentheses priority, input (1+2)*3, get result 9, which means parentheses priority works correctly, the inner part is calculated first.

3. Negative Number Test

Test unary minus, input 3*-2, get result -6, which means we can correctly distinguish minus operator and negative sign, negative number calculation works.

4. Decimal Operation Test

Test decimal operation, input 1.5+2.5, get result 4, decimal calculation works normally, supports floating point numbers.

5. Error Handling Test

Test divide by zero error, input 1/0, get error prompt, which means we can handle invalid operations correctly, avoid program crash.

6. History Persistence Test

Test history persistence, after calculating multiple records, refresh the page, the history records are not lost, which means the database persistence works correctly.

7. Delete History Test

Test delete history, after clicking the delete button, the corresponding history record is removed successfully, the list updates automatically, delete function works.

8.Invalid expressions

Design and Implementation

1. Overall Architecture

This project strictly follows the frontend-backend separation architecture:

• Frontend: Only responsible for UI interaction, sending HTTP requests, and displaying results, no calculation logic at frontend
• Backend: Responsible for expression parsing & calculation, database operations, providing REST API
• Database: Backend uses SQLite to store calculation history, ensures data persistence.

Architecture Diagram:

flowchart TD
    A["Frontend Browser"] -->|"HTTP/JSON Request"| B["Backend FastAPI Service"]
    B -->|"SQLite"| C["SQLite Database"]

2. Function Structure

flowchart LR
    subgraph FE["Frontend"]
        A["UI Input & Interaction"]
        B["API Request Wrapper"]
        C["Result & History UI"]
    end
    subgraph BE["Backend"]
        D["Expression Parsing"]
        E["REST API Interfaces"]
        F["DB CRUD Operations"]
    end
    A --> B --> E
    E --> D
    E --> F
    F --> E
    E --> B --> C

3. API Interface Design

We designed 3 core APIs:

1. POST /api/calculate: Submit expression, calculate and save history
2. GET /api/history: Get all calculation history
3. DELETE /api/history/{id}: Delete specified history record

4. Database Design

History table structure:
| Field | Type | Description |
| ---- | ---- | ---- |
| id | INTEGER | Primary key, auto increment |
| expression | TEXT | The calculation expression |
| result | REAL | Calculation result |
| created_at | TIMESTAMP | Calculation time, default current time |

5. Calculation Module Design

The calculation module uses Shunting-yard algorithm, converts infix expression to postfix expression, then calculates the postfix expression. This way we can safely handle operator precedence and parentheses, we never use eval(), which avoids security issues.

Key Code Explanation

1. Expression Parsing Algorithm

The core Shunting-yard algorithm, handles precedence and parentheses:

def shunting_yard(self, tokens):
    output = []
    operators = []
    for token in tokens:
        if re.match(r'\d+\.?\d*', token):
            output.append(token)
        elif token == '(':
            operators.append(token)
        elif token == ')':
            while operators and operators[-1] != '(':
                output.append(operators.pop())
            operators.pop()
        else:
            while operators and operators[-1] != '(' and self.precedence[operators[-1]] >= self.precedence[token]:
                output.append(operators.pop())
            operators.append(token)
    while operators:
        output.append(operators.pop())
    return output

This algorithm automatically handles operator precedence, for example * has higher priority than +, so multiplication will be calculated first, and it also handles parentheses priority.

2.Unary Minus Handling

We distinguish minus operator and negative sign during tokenization, for example the - in 3*-2 is a negative sign, not a minus operator:

if token == '-':
    if i == 0 or tokens[i-1] in '+-*/(':
        processed_tokens.append('u-')
    else:
        processed_tokens.append('-')

This way we can handle negative numbers correctly.

Problems and Lessons Learned

Problems Encountered

1. At first I made a mistake in git config command, which caused commit failure, I fixed it by correcting the command.
2. For deployment, ngrok can not connect due to domestic network restriction, so I used local test to verify the functions.
3. Gitee Pages service for personal repositories has been shut down, so I use cloudflared to expose both frontend static page and backend API to public network. The frontend static web page is served locally and exposed via cloudflared tunnel.

Lessons Learned

Through this assignment, I mastered the development workflow of frontend-backend separation, understood the division of responsibilities between frontend and backend. I learned the classic expression parsing algorithm, also learned how to use FastAPI and basic git operations, I have a deeper understanding of software engineering development process.

Deployment Notes

• Gitee Pages service for personal repositories has been shut down, so I use cloudflared tunnel to expose both frontend static page and backend API to public network.
• Frontend static web page is served locally and exposed via cloudflared tunnel, backend API is also exposed via cloudflared.