FocusFlow α Sprint Blog (Part 5) - User Report Module & Multi-Device Data Sync

FOCUS_2025_SE 2025-12-21 17:03:26

FocusFlow Alpha Sprint Blog (Part 5)

🚀 User Report Module & Multi-Device Data Sync

Yitan Fang
Fuzhou University (832302110) | Maynooth University (23125578)

📋 Table of Contents

1. 📊 Project Overview

1.1 Basic Information

Item	Details
Course Link	2025 Fall - Software Engineering Class
Assignment	Team Project - Alpha Sprint Blog
Team Name	FocusFlow
Sprint Goal	Finalizing the Alpha phase, delivering User Study Reports and Cross-Platform Data Sync.
References	IEEE Std 830-1998, GB/T 8567-2006

1.2 Sprint Burndown Chart

During this sprint cycle, we focused on tackling the challenges of data visualization and backend synchronization. The chart below illustrates the team's remaining effort (Story Points) over time.

💡 Insight:
As seen in the chart, we encountered technical bottlenecks in the middle of the sprint (flattened curve), but through intensive team collaboration in the final days, we successfully returned to the ideal burndown path.

Figure 1.1 Alpha Sprint Burndown Chart

2. 💻 Feature Implementation Demo

We have completed the deep development of the "Study Report" and deployed the "Data Synchronization" feature. Through responsive design (RWD) and backend sync mechanisms, we ensure a seamless user experience across PC and mobile devices.

2.1 User Study Report (PC View)

The Study Report is a core feature helping users review their progress. The system uses a card-based layout and trend charts to visualize learning status.

⏱️ Duration: Statistics on cumulative focus time.
✅ Task: Displays the number of completed tasks.
🔥 Continuous Check-in: Highlights the current streak (e.g., "1 day") to gamify habit formation.
📈 Completion Rate: Shows the percentage of tasks completed and calculates the week-over-week growth (e.g., "5% increase").
📅 7-Day Trend: The central chart provides a visual timeline tracking focus and check-ins over the past week.

Figure 2.1 PC Report Interface: Displaying core metrics and learning trends

2.2 Multi-Device Sync & Adaptation (Mobile View)

To support users in various scenarios (commuting, library, etc.), we implemented real-time cloud synchronization and mobile adaptation.

🔄 Data Consistency: Whether on a widescreen PC or a vertical mobile screen, core data remains consistent (sub-second synchronization).
📱 Responsive Layout: The mobile view automatically switches to a Card Stack Layout, optimizing font size and touch interaction for single-handed use.

Figure 2.2 Mobile Adaptation: Vertical layout with real-time data sync

3. 🛠️ Git Commit Records

Our development process strictly follows the Git Flow workflow. Below are the commit records for the core features (Report Module & Data Sync).

Figure 3.1 GitHub Commit History (Report & Sync features)

Key Commits Explanation:

Feature: Report Visualization
- Content: Completed ReportController logic, implemented backend encapsulation for ECharts data.
- Status: ✅ Merged into main.
Feature: Mobile Responsive Layout
- Content: Optimized CSS Media Queries to achieve mobile adaptation for the dashboard and report pages.
- Status: ✅ Verified.

4. 📝 Core Code Analysis

This task involved significant data aggregation and backend logic. Below is an analysis of the key code segments.

4.1 Data Layer: Statistical Logic (`models.py`)

# Aggregate logic for user report data
def get_user_report_stats(user_id):
    today = datetime.now().date()
    
    # 1. Calculate streak days (Reusing previous logic)
    streak_days = calculate_streak(user_id)
    
    # 2. Statistics for today/cumulative focus time
    # 💡 Optimization: Use SQL SUM aggregation to improve performance 
    # and avoid iterating through large datasets in the application layer.
    focus_stats = db.execute('''
        SELECT 
            SUM(duration) as total_minutes,
            COUNT(*) as session_count
        FROM focus_sessions 
        WHERE user_id = ?
    ''', (user_id,)).fetchone()
    
    # 3. Calculate Week-over-Week (WoW) growth
    last_week_stats = get_last_week_stats(user_id)
    growth_rate = calculate_growth(focus_stats['total_minutes'], last_week_stats['total_minutes'])
    
    return {
        "streak": streak_days,
        "total_focus": focus_stats['total_minutes'] or 0,
        "growth_rate": growth_rate,
        "completed_tasks": count_completed_tasks(user_id)
    }

4.2 Interface Layer: Sync & Adaptation (`app.py`)

@app.route('/report', methods=['GET'])
@login_required
def report_page():
    user_id = session.get('user_id')
    
    # Fetch pre-calculated statistical data from backend
    stats = get_user_report_stats(user_id)
    
    # Get 7-day trend data for frontend chart rendering
    trend_data = get_7day_trend(user_id)
    
    # Render template. The Jinja2 engine combined with Bootstrap
    # will handle the responsive layout classes automatically.
    return render_template('report.html', 
                           stats=stats, 
                           trend_data=json.dumps(trend_data),
                           user=get_current_user())

5. 🚩 Sprint Summary

5.1 Delivered Artifacts

Visual Report Dashboard: Dynamic dashboard including Duration, Tasks, Streak, and Growth Rate.
Multi-Device Adaptation: Seamless PC/Mobile switching based on the Bootstrap grid system.
Data Consistency: Unified backend API design ensuring real-time synchronization across devices.

5.2 Technical Challenges & Solutions

Challenge	Solution
📉 Mobile Chart Adaptation	Widescreen charts looked crowded on phones. Fix: Used CSS Media Queries to detect screen width, hiding non-essential axis labels and adjusting chart height on mobile.
⚡ Aggregation Performance	Page load slowed down as records increased. Fix: Introduced a caching mechanism to cache historical data (prior to "today") and only calculate today's increments in real-time.
🔄 State Synchronization	PC did not refresh after mobile operations. Fix: Adopted an AJAX polling mechanism to periodically check data versions on the frontend.