Big Idea 1.1 & 1.2: Collaboration, Program Function, and Purpose

Teamwork and methods like SCRUM and Kanban:

The project involves a collaborative team working on both the frontend and backend components. Using methods like SCRUM or Kanban could help in efficiently managing tasks, bugs, and development progress.

Writing and improving code:

The frontend (HTML, CSS, JavaScript) and backend (Flask with Python) work together to create a competitive drawing timer. Code is continuously improved, for example, by managing the canvas drawing (frontend) and handling user data, timers, and game state (backend).

Important coding tools:

Tools such as Flask for the backend, JavaScript for the frontend, and version control (e.g., Git) are likely used to manage the development process and ensure stability.

Blind Trace Challenge:

The frontend allows users to draw based on random words, and the backend validates the timing and stores the results. It would be crucial to understand the flow between these components even without fully seeing one at first.

Big Idea 1.3: Program Design and Development

Connecting frontend and backend:

The frontend makes use of HTTP requests (via fetch) to communicate with the backend API endpoints, such as starting/stopping the timer and fetching competition results. For example, the frontend requests the timer to start using /api/competition/timer and updates the timer UI accordingly.

Making apps better:

Enhancements are made in both the UI (adding color picker, brush size) and the backend (error handling, timer control). For example, the backend manages the timer state and competition data, while the frontend dynamically adjusts based on these changes.

Creating design plans:

The frontend design includes a structured layout for the competition, with elements like the timer, word display, drawing canvas, and results table. The backend ensures the game logic works as expected by managing the timer and game state.

Writing clear comments in code:

Both frontend and backend code include comments explaining the logic behind different actions, such as handling the drawing events and the backend’s timer and database functionality.

Big Idea 1.4: Debugging Code and Fixing Errors

Fixing backend issues:

Backend issues, like invalid data handling or failed API calls, are caught and returned with clear error messages. For example, if the duration is not provided or invalid, a 400 error with an explanation is returned.

Fixing frontend issues:

The frontend provides robust error handling by showing messages (e.g., “Failed to start timer”) and ensuring the UI updates based on the backend state.

Tracing errors throughout the program:

Errors are tracked both in the frontend (through the showError function) and backend (logging in the except blocks of the backend).

Testing to catch bugs:

The system tests user input (e.g., checking if the timer duration is valid) and ensures that actions like saving drawings or updating the timer happen as expected. The frontend and backend should also be tested to ensure proper data handling.

Big Idea 2: Data Management and Storage

Managing databases with SQLite:

The backend utilizes a database (via SQLAlchemy) to store results of the competition (Time model). This allows the backend to retrieve and display results ordered by the fastest completion.

Getting and showing data:

The backend sends data (e.g., the timer status, results, and timer details) to the frontend, which displays it to the user in real time.

Keeping data safe:

User data and competition results are handled with care in the backend, ensuring that actions like deleting entries are restricted to authorized users (e.g., admins).

Saving backups to prevent loss:

Data persistence is ensured through the database, and data is stored securely by the backend.

Big Idea 4: Internet and Deployment

Ways to launch your project online:

The project can be deployed online using a platform like Heroku, AWS, or DigitalOcean, with both the frontend and backend accessible via HTTP.

Using HTTP and RESTful APIs:

The backend exposes RESTful APIs (POST, GET, PUT, and DELETE) that are consumed by the frontend to perform operations like starting/stopping the timer and fetching results.

Securing your project:

The backend uses token_required decorators to ensure that actions like starting/stopping the timer are authenticated and only accessible by logged-in users.

Making your project faster:

Timers are handled asynchronously with threading to prevent blocking the main thread. The backend sends updates only when necessary (e.g., via periodic timer checks).

Tracking performance and errors:

Errors are logged and displayed for the user when the API requests fail. The frontend also provides error messages and tracks UI updates to reflect the correct state.

PPR Requirements: Frontend and Backend

Component A: Program Code

Segment 1: Procedure (Sequencing and Selection)

The program follows a structured procedure, ensuring tasks are carried out in a specific sequence to ensure smooth functionality.

  1. Frontend Sequence:
    • Initialization: The user interface (UI) is loaded, and necessary elements like the drawing canvas, timer, and word display are rendered.
    • Starting Timer: The user clicks the “Start Timer” button, triggering a frontend request via the fetch API to the backend to initiate the timer.
    • Drawing Phase: As the timer counts down, the user is able to draw on the canvas. Drawing events are captured and passed to the backend for validation.
    • End Timer: When the timer ends, the frontend sends a request to the backend to record the results and display them to the user.
  2. Backend Sequence:
    • Timer Start: The backend receives a request to start the timer and initializes a timer object with a given duration.
    • Data Handling: As the frontend sends drawing data, the backend validates and stores the results in a database (via SQLAlchemy).
    • Timer End: When the timer finishes, the backend records the final results (time taken) and sends this information back to the frontend.

Segment 3 & 4: List Usage

Storing Data in a List

  • Frontend:
    • The frontend uses an array to temporarily store drawing data (e.g., stroke coordinates, brush color, and size). The array is updated each time a new stroke is drawn on the canvas.
    • Example: 
      let drawingData = []; // Array to store drawing events

function captureDrawingEvent(x, y, color, size) {
    drawingData.push({ x, y, color, size }); // Store each stroke event
}
  • Backend:
    • The backend uses a list (or array) to temporarily hold incoming drawing data before validating and storing it in the database.
    • Example (Python): 
      drawing_data = []  # List to temporarily hold drawing data

def store_drawing_data(x, y, color, size):
    drawing_data.append({'x': x, 'y': y, 'color': color, 'size': size})  # Store incoming data

Using Data from the List

  • Frontend:
    • After the drawing phase ends, the drawing data is sent to the backend for validation. The frontend fetches the results from the backend and displays the total drawing time, along with the performance metrics (e.g., fastest time, score).
    • Example: 
      fetch('/api/competition/results')
    .then(response => response.json())
    .then(results => {
        displayResults(results);  // Display competition results
    });
  • Backend:
    • The backend processes the stored drawing data from the list, calculates the competition results, and sends them to the frontend.
    • Example (Python): 
      def process_drawing_results():
    # Process stored drawing data and calculate competition results
    results = {"time_taken": calculate_time(drawing_data)}  # Example result calculation
    return results

Conclusion

In this project:

  • Frontend uses lists to store real-time drawing data and interacts with the backend to send and receive competition results.
  • Backend manages the list of drawing data and processes it to store competition results in a database, making use of Python’s list data structure and SQLAlchemy for persistence.

By following this procedure, we ensure smooth sequencing and data handling for both the frontend and backend components of the project.