Assignment 2

abubaka 2023-10-20 21:12:27

Headline

Project Source address
PSP
Design and Process
Frontend:
Backend:
Video Presentation:
Future Improvement:
Overall Conlusion:

Project Source address

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
Assignment Requirements	Construct a back-end seperation calculator
Objectives of This Assignment	Accomplish the objectives of seperate the UI part and data storing part
MU STU ID and FZU STU ID	21124388_832101330

github link here: https://github.com/wangdreamfeet/tutorial

PSP

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	30	30
Development
• Analysis	40	40
• Design Spec	45	45
• Design Review	40	40
• Coding Standard	60	60
• Design	20	20
• Coding	60	90
• Code Review	20	30
• Test	45	45
Reporting
• Test Repor	15	20
• Size Measurement	20	20
• Postmortem & Process Improvement Plan
Sum	395	440

Design and Process

Frontend:

The first step is to design the user interface of the calculator, including layout, buttons, input field, and history display area. Then, create a visual representation of the calculator using HTML, CSS, and JavaScript. Implement JavaScript functions to handle user input, such as appending numbers and operators to the input field, handling decimal points, and handling backspace/delete functionality. Then, we need to implement JavaScript functions to perform basic arithmetic operations addition, subtraction, multiplication, division, trigonometric functions, logarithmic functions, exponential functions, and power functions. What's more, utilize JavaScript's Math object for the calculations. Update the input field with the calculated results. Also, implement a mechanism to display and update the history of calculations. Apply CSS styles to make the calculator visually appealing and responsive. Ensure that the calculator looks good and functions well on different devices and screen sizes.

HTML CODE:

<!DOCTYPE html>
<html>

<head>
    <title>计算器</title>
    <style>
        .calculator {
            width: 300px;
            margin: 20px auto;
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }

        .calculator input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
        }

        .calculator input[type="submit"] {
            width: 100%;
            padding: 5px;
        }

        .calculator .result {
            margin-top: 10px;
            font-weight: bold;
        }

        .calculator .history {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        .calculator .history h3 {
            margin-top: 0;
        }

        .calculator .history ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .calculator .history li {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="calculator">
        <h1>计算器</h1>
        <form id="calculatorForm">
            <input type="text" id="expression" name="expression" required><br>
            <input type="button" value="1" onclick="appendToExpression('1')">
            <input type="button" value="2" onclick="appendToExpression('2')">
            <input type="button" value="3" onclick="appendToExpression('3')">
            <input type="button" value="+" onclick="appendToExpression('+')"><br>
            <input type="button" value="4" onclick="appendToExpression('4')">
            <input type="button" value="5" onclick="appendToExpression('5')">
            <input type="button" value="6" onclick="appendToExpression('6')">
            <input type="button" value="-" onclick="appendToExpression('-')"><br>
            <input type="button" value="7" onclick="appendToExpression('7')">
            <input type="button" value="8" onclick="appendToExpression('8')">
            <input type="button" value="9" onclick="appendToExpression('9')">
            <input type="button" value="*" onclick="appendToExpression('*')"><br>
            <input type="button" value="0" onclick="appendToExpression('0')">
            <input type="button" value="." onclick="appendToExpression('.')">
            <input type="button" value="^" onclick="appendToExpression('**')">
            <input type="button" value="/" onclick="appendToExpression('/')"><br>
            <input type="button" value="sin" onclick="appendToExpression('Math.sin(')">
            <input type="button" value="cos" onclick="appendToExpression('Math.cos(')">
            <input type="button" value="tan" onclick="appendToExpression('Math.tan(')">
            <input type="button" value="log" onclick="appendToExpression('Math.log(')"><br>
            <input type="submit" value="calculate">
        </form>
        <div class="result" id="result"></div>
        <div class="history">
            <h3>历史记录</h3>
            <ul id="historyList"></ul>
        </div>
    </div>

    <script>
        document.getElementById('calculatorForm').addEventListener('submit', function (event) {
            event.preventDefault(); 

            var expression = document.getElementById('expression').value;

            fetch('/calculate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ expression: expression })
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').textContent = 'result: ' + data.result;
                    document.getElementById('expression').value = ''; // 清空输入框
                    loadHistory();
                });
        });

        function appendToExpression(value) {
            document.getElementById('expression').value += value;
        }

        function loadHistory() {
            fetch('/history')
                .then(response => response.json())
                .then(data => {
                    var historyList = document.getElementById('historyList');
                    historyList.innerHTML = '';

                    data.forEach(item => {
                        var listItem = document.createElement('li');
                        listItem.textContent = item;
                        historyList.appendChild(listItem);
                    });
                });
        }

        loadHistory();
    </script>
</body>

</html>

The differences compared with the previous task are API and loading history part.

API:

We need to pay attension on the code which for the API, It contains event listeners and functions that handle user interactions and perform calculations. I use the fetch() API to make HTTP requests to the backend server. It sends the expression entered by the user to the /calculate endpoint as a POST request. The response from the server is processed, and the result is displayed on the web page.

Loading history part of HTML:

The code also includes a function loadHistory() that retrieves the calculation history from the /history endpoint and displays it on the page. Finally, the JavaScript code invokes the loadHistory() function to load and display the history when the page is loaded.

Backend:

API Design: Design the API endpoints that the frontend will use to communicate with the backend. Determine the required endpoints for performing calculations, storing history, and clearing history.

Server Setup: Set up a server environment using a backend framework such as Node.js with Express.js. Install the necessary dependencies for the server.

API Implementation: Implement the API endpoints defined earlier. Create route handlers in the backend to handle incoming requests from the frontend, perform the required calculations, store history data, and respond with the results.

Data Storage: Decide on the storage mechanism for the calculator history data. You can use a database like MySQL, MongoDB, or a simple file system to store the history records.

Data Retrieval: Implement functionality to retrieve the history data from the storage mechanism and send it back to the frontend when requested.

Deployment: Deploy the backend server to a hosting platform or server. Ensure that it is accessible and properly configured for handling frontend requests.

FLASK CODE:

from flask import Flask, render_template, request, jsonify
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate  
from flask_cors import CORS 

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///calculator.db'  
app.config['TEMPLATES_AUTO_RELOAD'] = True  
db = SQLAlchemy(app)
migrate = Migrate(app, db)
CORS(app)

class Calculation(db.Model):
    __tablename__ = 'calculator'
    id = db.Column(db.Integer, primary_key=True)
    expression = db.Column(db.String(100))
    result = db.Column(db.Float)

with app.app_context():
    db.create_all()

@app.route('/')
def index():
    return render_template('history.html')

@app.route('/save_result', methods=['POST'])
def save_result():
    data = request.get_json()
    expression = data.get('expression')
    result = data.get('result')

    calculation = Calculation(expression=expression, result=result)
    db.session.add(calculation)
    db.session.commit()

    return jsonify({'success': True})

@app.route('/get_history')
def get_history():
    calculations = Calculation.query.all()
    history = [f'{calculation.expression} = {calculation.result}' for calculation in calculations]
    return jsonify({'success': True, 'history': history})

@app.route('/history')
def history():
    calculations = Calculation.query.all()
    return render_template('history.html', calculations=calculations)


@app.route('/clear_history', methods=['GET', 'POST'])
def clear_history():
    Calculation.query.delete()
    db.session.commit()
    return jsonify({'success': True})


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=4000, debug=True)

The provided code is a Flask web application that serves as a calculator. It uses a stack-based approach to evaluate mathematical expressions and supports basic arithmetic operations, trigonometric functions, exponentiation, and logarithm. When a calculation request is received from the calculator interface, the application evaluates the expression using the calculate_expression() function. If the expression is valid, the result is returned and saved to a file for history tracking. The application also provides endpoints to retrieve the last calculation result and the calculation history.

Video Presentation:

Future Improvement:

We can also develop some advanced function to build this web calculator more professional such as factorial and many stuffs.

Overall Conlusion:

In this project, i've learnt how to gain familiarity with the Flask framework and learn how to create routes, handle HTTP requests, and return responses. And I knew how to utilize API to provide access to data stored in databases.

...全文