3. Architectural Overview - Purplewells/WattWise GitHub Wiki

Architectural Sequence of a High-Level Process Flow

This sequence diagram illustrates the core flow and the interaction between key system components or actors over time. It’s especially useful in the early stages of planning or pitching a system.

High-Level Design

sequenceDiagram
    participant User
    participant MobileApp
    participant SmartMeter
    participant Backend
    participant PaymentGateway
    participant NotificationSystem

    SmartMeter->>Backend: Send usage & balance data
    Backend->>MobileApp: Update dashboard (usage + credit)
    MobileApp->>User: Display real-time data

    User->>MobileApp: Initiates top-up
    MobileApp->>PaymentGateway: Send payment request
    PaymentGateway-->>Backend: Confirm payment
    Backend->>SmartMeter: Update credit balance
    Backend->>NotificationSystem: Trigger success notification
    NotificationSystem-->>User: SMS/push: "Top-up successful"

2: Detailed Level Sequence Design Visualisation

This includes more internal services, like the analytics engine, credit monitor, and MoMo API.

⚡ WattWise: Detailed Sequence Diagram

sequenceDiagram
    participant User
    participant MobileApp
    participant BackendAPI
    participant IoTMeter
    participant PaymentGateway
    participant SMSService

    %% Real-time Usage Fetch
    User->>MobileApp: Open app
    MobileApp->>BackendAPI: Request usage & balance
    BackendAPI->>IoTMeter: Fetch current reading
    IoTMeter-->>BackendAPI: Send usage + credit data
    BackendAPI-->>MobileApp: Return data
    MobileApp-->>User: Show dashboard

    %% Low Credit Detection
    BackendAPI->>BackendAPI: Check if credit < threshold
    alt Credit is low
        BackendAPI->>SMSService: Send low credit SMS
        SMSService-->>User: "Your balance is below 10 GHS"
    end

    %% Top-Up Flow
    User->>MobileApp: Tap "Top-Up" (10 GHS)
    MobileApp->>PaymentGateway: Initiate MoMo payment
    PaymentGateway-->>MobileApp: Confirm payment success
    MobileApp->>BackendAPI: Update credit balance
    BackendAPI->>IoTMeter: Apply new credit
    IoTMeter-->>BackendAPI: Confirm credit update
    BackendAPI-->>MobileApp: Refresh dashboard
    MobileApp-->>User: Show updated balance

    %% Tamper/Event Log (Optional)
    IoTMeter-->>BackendAPI: Alert - Tamper or Outage detected
    BackendAPI->>SMSService: Notify admin or landlord

How the System Works (Overview)

• User opens the WattWise mobile app
• The app requests real-time data from the backend
• The backend queries the IoT Smart Meter
• Meter sends consumption data
• The backend returns it to the app for display
• If credit is low, system triggers alert
• User may initiate a Mobile Money top-up
• Upon payment confirmation, credit is updated and reflected in the system

We use sequence diagrams in our modelling processes to clarify the flow process, align stakeholders, define the scope, establish a foundation for technical design, and improve team collaboration.