Health Monitoring Wearable Project In Flask

Creating an advanced-level Health Monitoring Wearable project using Flask and Bootstrap 5 involves designing a robust database structure, implementing Flask routes, and creating responsive and interactive web pages. Below is a detailed guide:

1. Database Structure

The database will store users, wearable devices, health data, and other related data. We'll use SQLAlchemy (an ORM for Flask) to manage the database.

Database Models


from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
db = SQLAlchemy()
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    email = db.Column(db.String(100), unique=True, nullable=False)
    password = db.Column(db.String(200), nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
    devices = db.relationship('Device', backref='user', lazy=True)
    health_data = db.relationship('HealthData', backref='user', lazy=True)
class Device(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    device_id = db.Column(db.String(100), unique=True, nullable=False)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    health_data = db.relationship('HealthData', backref='device', lazy=True)
class HealthData(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    device_id = db.Column(db.Integer, db.ForeignKey('device.id'), nullable=False)
    heart_rate = db.Column(db.Float, nullable=False)
    blood_pressure = db.Column(db.Float, nullable=False)
    oxygen_level = db.Column(db.Float, nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

2. Flask Application Structure

Organize the project into the following structure:


health_monitoring_wearable/
│
├── app/
│   ├── __init__.py
│   ├── models.py
│   ├── routes/
│   │   ├── auth.py
│   │   ├── devices.py
│   │   ├── health_data.py
│   │   └── main.py
│   ├── templates/
│   │   ├── base.html
│   │   ├── index.html
│   │   ├── login.html
│   │   ├── register.html
│   │   ├── dashboard.html
│   │   ├── add_device.html
│   │   ├── view_devices.html
│   │   ├── view_health_data.html
│   │   └── view_user_data.html
│   ├── static/
│   │   ├── css/
│   │   │   └── styles.css
│   │   └── js/
│   │       └── scripts.js
│   └── utils.py
│
├── config.py
├── requirements.txt
└── run.py

3. Flask Application Code

app/init.py


from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager
db = SQLAlchemy()
login_manager = LoginManager()
def create_app():
    app = Flask(__name__)
    app.config.from_pyfile('config.py')
    db.init_app(app)
    login_manager.init_app(app)
    login_manager.login_view = 'auth.login'
    from .routes.auth import auth_bp
    from .routes.devices import devices_bp
    from .routes.health_data import health_data_bp
    from .routes.main import main_bp
    app.register_blueprint(auth_bp)
    app.register_blueprint(devices_bp)
    app.register_blueprint(health_data_bp)
    app.register_blueprint(main_bp)
    return app

config.py


import os
basedir = os.path.abspath(os.path.dirname(__file__))
class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or 'your-secret-key'
    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or \
        'sqlite:///' + os.path.join(basedir, 'health_monitoring_wearable.db')
    SQLALCHEMY_TRACK_MODIFICATIONS = False

run.py


from app import create_app, db
app = create_app()
if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

4. Flask Routes

routes/auth.py


from flask import Blueprint, render_template, redirect, url_for, flash
from flask_login import login_user, logout_user, login_required, current_user
from .forms import LoginForm, RegistrationForm
from ..models import User, db
auth_bp = Blueprint('auth', __name__)
@auth_bp.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('Registration successful! You can now log in.')
        return redirect(url_for('auth.login'))
    return render_template('register.html', form=form)
@auth_bp.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user and user.password == form.password.data:  # Replace with hashed password check
            login_user(user)
            return redirect(url_for('main.dashboard'))
        flash('Login failed. Check your email and password.')
    return render_template('login.html', form=form)
@auth_bp.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('main.index'))

routes/devices.py


from flask import Blueprint, render_template, redirect, url_for, flash
from flask_login import login_required, current_user
from ..models import Device, db
from ..forms import DeviceForm
devices_bp = Blueprint('devices', __name__)
@devices_bp.route('/add_device', methods=['GET', 'POST'])
@login_required
def add_device():
    form = DeviceForm()
    if form.validate_on_submit():
        device = Device(device_id=form.device_id.data, user_id=current_user.id)
        db.session.add(device)
        db.session.commit()
        flash('Device added successfully!')
        return redirect(url_for('devices.view_devices'))
    return render_template('add_device.html', form=form)
@devices_bp.route('/devices')
@login_required
def view_devices():
    devices = Device.query.filter_by(user_id=current_user.id).all()
    return render_template('view_devices.html', devices=devices)

routes/health_data.py


from flask import Blueprint, render_template, redirect, url_for, flash
from flask_login import login_required, current_user
from ..models import HealthData, Device, db
from ..forms import HealthDataForm
health_data_bp = Blueprint('health_data', __name__)
@health_data_bp.route('/add_health_data', methods=['GET', 'POST'])
@login_required
def add_health_data():
    form = HealthDataForm()
    form.device.choices = [(d.id, d.device_id) for d in Device.query.filter_by(user_id=current_user.id).all()]
    if form.validate_on_submit():
        health_data = HealthData(user_id=current_user.id, device_id=form.device.data,
                                 heart_rate=form.heart_rate.data, blood_pressure=form.blood_pressure.data,
                                 oxygen_level=form.oxygen_level.data)
        db.session.add(health_data)
        db.session.commit()
        flash('Health data added successfully!')
        return redirect(url_for('health_data.view_health_data'))
    return render_template('add_health_data.html', form=form)
@health_data_bp.route('/health_data')
@login_required
def view_health_data():
    health_data = HealthData.query.filter_by(user_id=current_user.id).all()
    return render_template('view_health_data.html', health_data=health_data)

routes/main.py


from flask import Blueprint, render_template
from flask_login import login_required
main_bp = Blueprint('main', __name__)
@main_bp.route('/')
def index():
    return render_template('index.html')
@main_bp.route('/dashboard')
@login_required
def dashboard():
    return render_template('dashboard.html')

5. HTML Templates with Bootstrap 5

templates/base.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <title>{% block title %}Health Monitoring Wearable{% endblock %}</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">Health Monitoring Wearable</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    {% if current_user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('main.dashboard') }}">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('devices.view_devices') }}">View Devices</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('health_data.view_health_data') }}">View Health Data</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.register') }}">Register</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-4">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="alert alert-info">
                    {% for message in messages %}
                        <p>{{ message }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

templates/index.html


{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Welcome to the Health Monitoring Wearable System</h1>
<p>Monitor your health effectively with our wearable devices!</p>
{% endblock %}

templates/dashboard.html


{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h2>Dashboard</h2>
<p>Welcome, {{ current_user.username }}!</p>
{% endblock %}

templates/add_device.html


{% extends 'base.html' %}
{% block title %}Add Device{% endblock %}
{% block content %}
<h2>Add Device</h2>
<form method="POST">
    {{ form.hidden_tag() }}
    <div class="mb-3">
        {{ form.device_id.label(class="form-label") }}
        {{ form.device_id(class="form-control") }}
    </div>
    <button type="submit" class="btn btn-primary">Add Device</button>
</form>
{% endblock %}

templates/view_devices.html


{% extends 'base.html' %}
{% block title %}View Devices{% endblock %}
{% block content %}
<h2>Your Devices</h2>
<table class="table">
    <thead>
        <tr>
            <th scope="col">Device ID</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for device in devices %}
        <tr>
            <td>{{ device.device_id }}</td>
            <td>
                <a href="{{ url_for('health_data.add_health_data', device_id=device.id) }}" class="btn btn-secondary">Add Health Data</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

templates/add_health_data.html


{% extends 'base.html' %}
{% block title %}Add Health Data{% endblock %}
{% block content %}
<h2>Add Health Data</h2>
<form method="POST">
    {{ form.hidden_tag() }}
    <div class="mb-3">
        {{ form.device.label(class="form-label") }}
        {{ form.device(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.heart_rate.label(class="form-label") }}
        {{ form.heart_rate(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.blood_pressure.label(class="form-label") }}
        {{ form.blood_pressure(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.oxygen_level.label(class="form-label") }}
        {{ form.oxygen_level(class="form-control") }}
    </div>
    <button type="submit" class="btn btn-primary">Add Health Data</button>
</form>
{% endblock %}

templates/view_health_data.html


{% extends 'base.html' %}
{% block title %}View Health Data{% endblock %}
{% block content %}
<h2>Your Health Data</h2>
<table class="table">
   <thead>
       <tr>
           <th scope="col">Device ID</th>
           <th scope="col">Heart Rate</th>
           <th scope="col">Blood Pressure</th>
           <th scope="col">Oxygen Level</th>
           <th scope="col">Date</th>
       </tr>
   </thead>
   <tbody>
       {% for data in health_data %}
       <tr>
           <td>{{ data.device.device_id }}</td>
           <td>{{ data.heart_rate }}</td>
           <td>{{ data.blood_pressure }}</td>
           <td>{{ data.oxygen_level }}</td>
           <td>{{ data.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
       </tr>
       {% endfor %}
   </tbody>
</table>
{% endblock %}

templates/register.html


{% extends 'base.html' %}
{% block title %}Register{% endblock %}
{% block content %}
<h2>Register</h2>
<form method="POST">
    {{ form.hidden_tag() }}
    <div class="mb-3">
        {{ form.username.label(class="form-label") }}
        {{ form.username(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.email.label(class="form-label") }}
        {{ form.email(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.password.label(class="form-label") }}
        {{ form.password(class="form-control") }}
    </div>
    <button type="submit" class="btn btn-primary">Register</button>
</form>
{% endblock %}

templates/login.html


{% extends 'base.html' %}
{% block title %}Login{% endblock %}
{% block content %}
<h2>Login</h2>
<form method="POST">
    {{ form.hidden_tag() }}
    <div class="mb-3">
        {{ form.email.label(class="form-label") }}
        {{ form.email(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.password.label(class="form-label") }}
        {{ form.password(class="form-control") }}
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>
{% endblock %}

6. Forms for Flask-WTF


forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, FloatField, SubmitField, SelectField
from wtforms.validators import DataRequired, Email, Length
class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=50)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = StringField('Password', validators=[DataRequired(), Length(min=6, max=200)])
    submit = SubmitField('Register')
class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = StringField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')
class DeviceForm(FlaskForm):
    device_id = StringField('Device ID', validators=[DataRequired()])
    submit = SubmitField('Add Device')
class HealthDataForm(FlaskForm):
    device = SelectField('Device', coerce=int, validators=[DataRequired()])
    heart_rate = FloatField('Heart Rate', validators=[DataRequired()])
    blood_pressure = FloatField('Blood Pressure', validators=[DataRequired()])
    oxygen_level = FloatField('Oxygen Level', validators=[DataRequired()])
    submit = SubmitField('Add Health Data')

7. Static Files

static/css/styles.css


body {
    background-color: #f8f9fa;
}
.navbar {
    margin-bottom: 20px;
}
.table {
    margin-top: 20px;
}

8. JavaScript (if needed)

static/js/scripts.js


// Custom JavaScript can be added here

9. Running the Application

To run the application, ensure you have the required packages installed as specified in requirements.txt, then execute:


python run.py

This structure and code provide a comprehensive foundation for an advanced Health Monitoring Wearable project using Flask and Bootstrap 5, allowing for user management, device management, and health data tracking functionality. The application is designed to be scalable and maintainable, with a clear separation of concerns between models, routes, and templates.