Colin's Blog
[파이썬] 웹 프레임워크를 이용한 실시간 주문 추적 시스템

주문 추적 시스템은 매우 중요한 기능을 가진 아이템입니다. 실시간으로 주문 상태를 추적할 수 있다면 고객들은 주문이 어디에 있는지 정확히 파악할 수 있고, 상점들은 주문 처리 단계를 관리하기 용이해집니다. 이러한 주문 추적 시스템을 웹 프레임워크를 이용하여 구현해 보겠습니다.

웹 프레임워크 선택

Python에서는 다양한 웹 프레임워크가 있지만, 이번 예제에서는 Flask를 사용하겠습니다. Flask는 가볍고 간단하며 확장성이 높은 웹 프레임워크로 알려져 있습니다.

데이터베이스 구조 설계

주문 추적 시스템을 구현하기 위해 먼저 데이터베이스 구조를 설계해야 합니다. 여기서는 간단한 구조를 사용하겠습니다. 주문을 나타내기 위해 Order라는 테이블을 만들고, 주문의 상태를 나타내기 위한 Status라는 테이블을 만들겠습니다.

CREATE TABLE Order (
    id INT PRIMARY KEY,
    order_number VARCHAR(50),
    status_id INT,
    FOREIGN KEY (status_id) REFERENCES Status(id)
);

CREATE TABLE Status (
    id INT PRIMARY KEY,
    name VARCHAR(50)
);

Flask 앱 구현

Flask 앱을 구현하기 위해 먼저 app.py라는 파일을 생성하고 다음과 같이 작성합니다.

from flask import Flask, render_template, jsonify

app = Flask(__name__)

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

@app.route('/orders')
def get_orders():
    orders = [
        {'id': 1, 'order_number': 'ORD001', 'status': 'Processing'},
        {'id': 2, 'order_number': 'ORD002', 'status': 'Delivered'},
        {'id': 3, 'order_number': 'ORD003', 'status': 'Cancelled'}
    ]
    return jsonify(orders)

if __name__ == '__main__':
    app.run()

위 코드에서는 Flask의 Flask 클래스를 사용하여 앱을 만들고, /와 /orders 경로에 대한 라우팅 함수를 정의하였습니다. / 경로에 접속하면 index.html 템플릿을, /orders 경로에 접속하면 주문 리스트를 JSON 형태로 반환합니다.

Frontend 구현

Frontend 부분은 간단한 주문 추적 시스템을 만들기 위해 HTML과 JavaScript를 사용하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Order Tracking System</title>
</head>
<body>
    <h1>Order Tracking System</h1>
    <table id="order-table">
        <tr>
            <th>ID</th>
            <th>Order Number</th>
            <th>Status</th>
        </tr>
        <tr id="order-row-template" style="display: none;">
            <td class="order-id"></td>
            <td class="order-number"></td>
            <td class="order-status"></td>
        </tr>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $.getJSON('/orders', function(data) {
                $.each(data, function(i, order) {
                    var row = $('#order-row-template').clone();
                    row.removeAttr('id');
                    row.find('.order-id').text(order.id);
                    row.find('.order-number').text(order.order_number);
                    row.find('.order-status').text(order.status);
                    row.show();

                    $('#order-table').append(row);
                });
            });
        });
    </script>
</body>
</html>

위 코드에서는 order-table이라는 테이블 요소를 만들고, order-row-template이라는 숨겨진 템플릿으로부터 주문 데이터를 받아와 테이블에 추가합니다. 이 때, AJAX를 사용하여 /orders 경로에 GET 요청을 보내고, 서버에서 반환되는 주문 데이터를 화면에 동적으로 표시합니다.

실행

이제 Flask 앱을 실행해 보겠습니다. 터미널에서 다음 명령을 실행합니다.

$ flask run

웹 브라우저에서 http://localhost:5000에 접속하면 주문 추적 시스템이 작동하는 것을 확인할 수 있습니다.

마무리

위 예제는 간단한 웹 프레임워크인 Flask를 사용하여 실시간 주문 추적 시스템을 구현하는 방법을 보여주었습니다. 실제로는 데이터베이스와 연동하고, 주문 상태 갱신을 위한 API 엔드포인트를 추가하는 등 더 복잡한 기능을 구현해야 할 수도 있습니다. 하지만 이 예제는 Flask와 웹 프레임워크를 이용한 실시간 주문 추적 시스템 개발의 기본적인 틀을 제공합니다.

© 2018 Colin. All rights reserved.