Upload Flask app

Dockerfile

@@ -3,16 +3,11 @@ FROM python:3.9-slim
 
 # Thiết lập biến môi trường để Python không tạo các file pyc
 ENV PYTHONDONTWRITEBYTECODE=1
-
-# Thiết lập biến môi trường để Python không buffer output
 ENV PYTHONUNBUFFERED=1
 
-# Tạo và đặt thư mục làm việc cho ứng dụng Flask
+# Tạo và đặt thư mục làm việc cho ứng dụng FastAPI
 WORKDIR /app
 
-# Tạo thư mục instance với quyền truy cập phù hợp
-RUN mkdir -p /app/instance && chmod -R 755 /app/instance
-
 # Sao chép file requirements.txt vào container
 COPY requirements.txt /app/
 
@@ -22,8 +17,8 @@ RUN pip install --no-cache-dir -r requirements.txt
 # Sao chép toàn bộ mã nguồn ứng dụng vào container
 COPY . /app/
 
-# Expose port 5000 for Flask
+# Expose port 5000 for FastAPI
 EXPOSE 5000
 
-# Chạy ứng dụng Flask bằng Gunicorn
-CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:5000", "app:app"]
+# Chạy ứng dụng FastAPI bằng Uvicorn
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "5000"]

app.py

@@ -1,33 +1,44 @@
-from flask import Flask, request, jsonify, render_template
-from models import db, WifiSignal
+from fastapi import FastAPI, HTTPException, Depends, Request
+from fastapi.responses import HTMLResponse
+from fastapi.templating import Jinja2Templates
+from sqlalchemy.orm import Session
+from sqlalchemy import create_engine, Column, Integer, Float, String, DateTime
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
 from datetime import datetime, timedelta
 import random
 import folium
 from folium.plugins import MarkerCluster
-from flasgger import Swagger
-
-# Chỉ định đường dẫn instance_path hợp lệ
-app = Flask(__name__, instance_path='/tmp')
-
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
-app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-
-# Khởi tạo Swagger
-swagger = Swagger(app)
-
-db.init_app(app)
-
-@app.route('/api/generate-data', methods=['POST'])
-def generate_data():
-    """
-    Generate demo data.
-    ---
-    tags:
-      - Data Management
-    responses:
-      201:
-        description: Demo data generated successfully
-    """
+
+DATABASE_URL = "sqlite:///./database.db"
+
+engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+class WifiSignal(Base):
+    __tablename__ = "wifi_signal"
+    id = Column(Integer, primary_key=True, index=True)
+    latitude = Column(Float, index=True)
+    longitude = Column(Float, index=True)
+    timestamp = Column(DateTime, index=True)
+    signal_strength = Column(Integer)
+
+Base.metadata.create_all(bind=engine)
+
+app = FastAPI()
+templates = Jinja2Templates(directory="templates")
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+@app.post("/api/generate-data")
+def generate_data(db: Session = Depends(get_db)):
     base_latitude = 35.6837
     base_longitude = 139.6805
     start_date = datetime(2024, 8, 1)
@@ -50,82 +61,38 @@ def generate_data():
             signal_strength=random_signal_strength
         )
 
-        db.session.add(wifi_signal)
-
-    db.session.commit()
-    return jsonify({"message": "Demo data generated successfully"}), 201
-
-@app.route('/api/delete-data', methods=['DELETE'])
-def delete_data():
-    """
-    Delete all data in the database.
-    ---
-    tags:
-      - Data Management
-    responses:
-      200:
-        description: All data deleted successfully
-      500:
-        description: An error occurred
-    """
+        db.add(wifi_signal)
+
+    db.commit()
+    return {"message": "Demo data generated successfully"}
+
+@app.delete("/api/delete-data")
+def delete_data(db: Session = Depends(get_db)):
     try:
-        num_rows_deleted = db.session.query(WifiSignal).delete()
-        db.session.commit()
-        return jsonify({"message": f"Deleted {num_rows_deleted} rows from the database."}), 200
+        num_rows_deleted = db.query(WifiSignal).delete()
+        db.commit()
+        return {"message": f"Deleted {num_rows_deleted} rows from the database."}
     except Exception as e:
-        db.session.rollback()
-        return jsonify({"message": f"An error occurred: {str(e)}"}), 500
-
-@app.route('/api/upload', methods=['POST'])
-def upload_data():
-    """
-    Upload WiFi signal data.
-    ---
-    tags:
-      - Data Management
-    parameters:
-      - name: body
-        in: body
-        required: true
-        schema:
-          type: object
-          properties:
-            latitude:
-              type: number
-              example: 35.6895
-            longitude:
-              type: number
-              example: 139.6917
-            timestamp:
-              type: string
-              example: "2024-08-29 14:30:00"
-            signal_strength:
-              type: integer
-              example: 42
-    responses:
-      201:
-        description: Data uploaded successfully
-      400:
-        description: Invalid input
-    """
-    data = request.json
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"An error occurred: {str(e)}")
+
+@app.post("/api/upload")
+def upload_data(request: Request, db: Session = Depends(get_db)):
+    data = request.json()
     latitude = data.get('latitude')
     longitude = data.get('longitude')
     timestamp = datetime.strptime(data.get('timestamp'), '%Y-%m-%d %H:%M:%S')
     signal_strength = data.get('signal_strength')
     
     wifi_signal = WifiSignal(latitude=latitude, longitude=longitude, timestamp=timestamp, signal_strength=signal_strength)
-    db.session.add(wifi_signal)
-    db.session.commit()
+    db.add(wifi_signal)
+    db.commit()
     
-    return jsonify({"message": "Data uploaded successfully"}), 201
-
-@app.route('/', methods=['GET'])
-def show_map():
-    start_date = request.args.get('start_date')
-    end_date = request.args.get('end_date')
+    return {"message": "Data uploaded successfully"}
 
-    query = WifiSignal.query
+@app.get("/", response_class=HTMLResponse)
+def show_map(request: Request, start_date: str = None, end_date: str = None, db: Session = Depends(get_db)):
+    query = db.query(WifiSignal)
 
     if start_date and end_date:
         start_datetime = datetime.strptime(start_date, '%Y-%m-%d')
@@ -159,9 +126,4 @@ def show_map():
         ).add_to(marker_cluster)
     
     map_html = m._repr_html_()
-    return render_template('map.html', map_html=map_html)
-
-if __name__ == '__main__':
-    with app.app_context():
-        db.create_all()
-    app.run(debug=True)
+    return templates.TemplateResponse("map.html", {"request": request, "map_html": map_html, "start_date": start_date, "end_date": end_date})

requirements.txt

@@ -1,7 +1,5 @@
-Flask==2.2.5
-Flask-SQLAlchemy==3.0.3
-Flasgger==0.9.5
+fastapi==0.95.1
+uvicorn==0.22.0
+sqlalchemy==1.4.22
 folium==0.13.0
-gunicorn==20.1.0
-
-
+jinja2==3.1.2

templates/map.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signal Tracker Map</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+        }
+        #map {
+            width: 80%;
+            height: 500px;
+            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
+            margin-bottom: 150px; /* Thêm khoảng cách phía dưới bản đồ */
+        }
+        .filter-form {
+            margin-bottom: 20px;
+            background: white;
+            padding: 15px;
+            border-radius: 5px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            display: flex;
+            justify-content: center;
+        }
+        .title {
+            margin-bottom: 20px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">Signal Tracker Map</h1>
+        <form class="filter-form" id="date-form" method="GET" action="/">
+            <div class="row g-3 align-items-center">
+                <div class="col-auto">
+                    <label for="start_date" class="col-form-label">Start Date:</label>
+                </div>
+                <div class="col-auto">
+                    <input type="date" id="start_date" name="start_date" class="form-control" 
+                           value="{{ start_date or '' }}">
+                </div>
+                <div class="col-auto">
+                    <label for="end_date" class="col-form-label">End Date:</label>
+                </div>
+                <div class="col-auto">
+                    <input type="date" id="end_date" name="end_date" class="form-control" 
+                           value="{{ end_date or '' }}">
+                </div>
+            </div>
+        </form>
+        <div id="map">
+            {{ map_html|safe }}
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
+    <!-- Bootstrap JS (Optional) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // JavaScript để tự động submit form khi thay đổi ngày nếu cả hai ngày đều có giá trị
+        function updateMapIfDatesFilled() {
+            const startDate = document.getElementById('start_date').value;
+            const endDate = document.getElementById('end_date').value;
+
+            if (startDate && endDate) {
+                document.getElementById('date-form').submit();
+            }
+        }
+
+        document.getElementById('start_date').addEventListener('change', updateMapIfDatesFilled);
+        document.getElementById('end_date').addEventListener('change', updateMapIfDatesFilled);
+    </script>
+</body>
+</html>