Creating a Sample Flask Web App for Tracking Updates

Welcome back to our blog series on deploying web applications! In our previous post, we walked you through setting up a simple Flask site on a Proxmox server. If you haven’t read it yet, we highly recommend checking it out here.

Today, we’re taking the next step in our journey. This tutorial will guide you through creating a dynamic web app using Flask, specifically designed to track daily updates in MB for Arch-based distributions.

This app will not only help you visualize your update data but also provide a practical example of how to build and deploy a useful web application. By the end of this guide, you’ll have a fully functional web app ready for real-world use. Let’s dive in!

1) Set Up Your Flask Environment

Start your new LXC Debian 12 container and issue this command:

  1. create a Python virtual environment to keep your dependencies isolated.
    Here’s how to do that:
    • apt install python3 python3-flask python3-venv
  2. Create and activate the virtual environment:
    Navigate to your project directory and run:
    • python3 -m venv venv
  3. Then, activate it:
    • source venv/bin/activate

Ensure you have Flask installed in your environment. If you need help, see yesterday’s blog which covers the steps in detail

If you’d like to learn how to set up a Python virtual environment (which is highly recommended for managing dependencies), please read our guide on Setting Up a Python Virtual Environment and Dependencies.

2) Create the Project Structure

Create a directory for your project and set up the following structure:

flask_update_tracker/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    └── style.css

3) Create app.py

This is the main file where your Flask application will run. Here’s the code for app.py:

from flask import Flask, render_template, request, redirect, url_for
import pandas as pd
import os

app = Flask(__name__)
DATA_FILE = 'update_data.csv'

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        data = []
        for i in range(42):  # Assuming 6 rows x 7 columns
            mb = request.form.get(f'day_{i}', '')
            data.append(mb)
        df = pd.DataFrame([data], columns=[f'Day {i+1}' for i in range(42)])
        df.to_csv(DATA_FILE, index=False)
        return redirect(url_for('index'))
    
    if os.path.exists(DATA_FILE):
        df = pd.read_csv(DATA_FILE)
        data = df.fillna('').values.flatten().tolist()
    else:
        data = [''] * 42
    
    return render_template('index.html', data=data)

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

4. Create index.html

This HTML file will create a form to input and display the data. Place it in the templates directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CachyOS Update Tracker</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>CachyOS Update Tracker</h1>
    <form method="post">
        <table>
            <tr>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
                <th>Sun</th>
            </tr>
            {% for row in range(6) %}
            <tr>
                {% for col in range(7) %}
                <td>
                    <input type="text" name="day_{{ loop.index0 + row * 7 }}" value="{{ data[loop.index0 + row * 7] }}" placeholder="0.00">
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>
        <button type="submit">Save</button>
    </form>
</body>
</html>

5) Create style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}

h1 {
    margin-top: 20px;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

input[type="text"] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

6) Running the Application

Navigate to the project directory and run the Flask app:

python3 app.py

Visit http://yourserveripaddress:5000/ in your web browser to see your Flask application in action.

FLASK app that tracks numbers
Actual screenshot of the Flask app we just created.

Additional Enhancements

  1. Graphical Visualization: For plotting data, you can use libraries like Matplotlib or Plotly and integrate them with Flask to generate visualizations dynamically.
  2. Authentication: Implement user authentication to secure access to the data.
  3. Data Validation: Add validation to ensure that the input data is in the correct format.

This sample web app allows users to track daily updates and save the data. It serves as a starting point for more advanced features and customizations.

Happy Coding

Congratulations on completing the setup of your Flask web app! We hope this tutorial has inspired you to further explore web development with Flask. As you continue to build and refine your applications, remember that practice and experimentation are key to mastering these skills.

If you encounter any challenges or have questions about this tutorial, please don’t hesitate to leave a comment below. We’re here to help and would love to hear about your experiences. Happy coding, and we look forward to seeing what you create next!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.