TODO App: Main Screen UI, API & Data Guide

by Admin 43 views
TODO App - Main Screen Documentation

Hey guys! Let's dive into the main screen of our TODO App. This is where all the magic happens – where you see your tasks, manage them, and keep your life organized! This documentation will cover everything from the UI components to the API integrations and local storage strategies.

Overview

The TODO App main screen is your go-to place for task management. It displays all your pending tasks and allows you to perform full CRUD (Create, Read, Update, Delete) operations. It's designed to sync with a REST API for seamless server updates and uses Hive for local storage, ensuring you can use it even when you're offline. Cool, right?

UI Components

The user interface (UI) is structured to be intuitive and easy to use. Let's break down the key components:

Header Section

The header section prominently displays the app's title, which is simply “TODO APP.” The styling, including fonts, colors, and spacing, strictly adheres to the Figma design specifications to maintain a consistent and professional look.

Task List Section

This section is the heart of the main screen. The task list section is a scrollable container displaying individual task items. Each task item is presented as a white rounded card, enhanced with a subtle shadow to provide a sense of depth. Inside each card, the task title is displayed in a distinctive purple/blue color, making it easily noticeable. Below the title, the task subtitle or description is shown in gray, providing additional context and details about the task. On the right side of each task item, you'll find action buttons that allow users to interact with the task directly. When there are no tasks available, an appropriate empty state message is displayed to inform users that they need to add some tasks. This ensures a user-friendly experience, even when starting with a clean slate.

Task Item Actions

Each task item comes with three action buttons, giving you quick access to manage your tasks:

  1. Edit Button: Represented by a pencil icon, this button navigates you to the Edit Todo screen, where you can modify the task details.
  2. Delete Button: Shown as a trash icon, this button deletes the task. A confirmation dialog pops up to make sure you don't accidentally delete something important.
  3. Complete Button: Displayed as a checkmark icon, this button marks the task as completed, updating its status in the UI and the backend.

Bottom Navigation

The bottom navigation provides easy access to different sections of the app:

  • Add Button: A Floating Action Button (FAB) with a “+” icon, allowing you to quickly add new tasks.
  • Tab Bar: Two tabs at the bottom: “All” (currently selected) and “Completed.” This lets you switch between viewing all tasks and only the completed ones. The styling follows the purple/blue theme from the Figma design, keeping everything consistent.

API Integration

Our TODO App uses a REST API to keep your tasks in sync across devices and with the server. Let's look at how it's set up.

API Configuration

  • Base URL: https://task-manager-api3.p.rapidapi.com/
  • Headers Required:
    • x-rapidapi-host: task-manager-api3.p.rapidapi.com
    • x-rapidapi-key: 7d744c6ef6msh6295387dee9a9e0p1f763djsndf07a261252a
    • Content-Type: application/json (for POST/PUT requests)

API Endpoints

1. Get All Tasks

  • Method: GET
  • Endpoint: /
  • Purpose: Fetches all tasks from the server, ensuring you have the latest list.
  • Response: An array of task objects.

2. Create Task

  • Method: POST

  • Endpoint: /

  • Body:

    {
  "title": "Task title",
  "description": "Task description",
  "status": "pendiente"
}

3. Update Task

  • Method: PUT
  • Endpoint: /{taskId}
  • Body: Updated task object

4. Delete Task

  • Method: DELETE
  • Endpoint: /{taskId}
  • Body: Empty object {}

Data Models

Task Model

The Task model is a Dart class that represents a task in the app. It includes the following properties:

class Task {
  String id;
  String title;
  String description;
  String status; // "pendiente" or "completado"
}

State Management (Provider)

We use the Provider package for state management, which helps keep our app reactive and organized. State management is crucial for handling data changes and ensuring the UI updates accordingly.

TaskProvider Class

The TaskProvider class manages the application state and handles API calls. Here’s what it does:

  • Purpose: To manage application state and API calls, providing a centralized location for data handling.
  • Key Properties:
    • List<Task> tasks: The current list of tasks.
    • bool isLoading: An indicator for loading states.
    • String errorMessage: For error handling.

Key Methods

  1. fetchTasks(): Gets tasks from the API and updates local storage. This method is essential for initializing the task list and keeping it up-to-date.
  2. addTask(Task task): Creates a new task via the API. It handles sending the new task data to the server and updating the local state.
  3. updateTask(String id, Task task): Updates an existing task using the API. This method ensures any changes made to a task are reflected on the server.
  4. deleteTask(String id): Deletes a task from the API and local storage. It removes the task from both the server and the local app data.
  5. completeTask(String id): Marks a task as completed. This method updates the task status and reflects the change in the UI.
  6. syncWithServer(): Syncs local changes when connectivity is restored. This is crucial for ensuring that any offline changes are eventually synced with the server.

Local Storage (Hive)

Hive is our local storage solution, perfect for offline functionality and faster loading times.

Purpose

  • Offline functionality when the network is unavailable.
  • Faster app loading with cached data.
  • Temporary storage for pending API operations.

Implementation

  • Box Name: 'tasks'
  • Data Type: Task model with Hive adapters
  • Sync Strategy:
    • Load from Hive on app start.
    • Fetch from the API and update Hive when online.
    • Queue offline operations for later sync.

Functional Requirements

Let's break down what the app needs to do functionally.

1. Task Display

The app needs to display all pending tasks in chronological order, showing the newest tasks first. It should clearly show the task title and description. A pull-to-refresh functionality should be implemented to allow users to manually refresh the task list. The app should also handle the empty state gracefully, displaying a message when there are no tasks.

2. Task Actions

  • Edit: Navigates to the Edit Todo screen with task data pre-filled.
  • Delete: Shows a confirmation dialog before deleting a task to prevent accidental deletions.
  • Complete: Moves the task to the completed status and updates the UI immediately.
  • Add: Navigates to the Add Todo screen, allowing users to create new tasks.

3. Offline Functionality

  • The app should work without an internet connection, displaying cached tasks from Hive storage.
  • CRUD operations should be queued for later synchronization when the connection is restored.
  • An offline indicator should be displayed to inform users when the app is in offline mode.

4. Error Handling

  • The app should handle network timeouts gracefully, informing users when a request takes too long.
  • API error responses should be properly handled, displaying user-friendly messages.
  • Invalid data validation should be implemented to prevent errors caused by incorrect data.
  • User-friendly error messages should be displayed to help users understand and resolve issues.

5. Loading States

  • A loading indicator should be displayed during API calls to provide feedback to the user.
  • Skeleton loading should be used for a better UX, showing a placeholder UI while data is loading.
  • Smooth transitions between states should be implemented to create a seamless user experience.

Navigation Flow

  • To Add Todo: Tap the FAB button → Navigate to the Add Todo screen.
  • To Edit Todo: Tap the edit icon → Navigate to the Edit Todo screen with task data.
  • To Completed Tasks: Tap the “Completed” tab → Navigate to the Completed Tasks screen.
  • Back to Main: Return from other screens using the back button.

Technical Implementation Notes

Flutter Packages Required

  • provider: For state management.
  • http: For API communication.
  • hive: For local storage.
  • hive_flutter: For Hive Flutter integration.
  • connectivity_plus: For network connectivity detection.

Architecture Pattern

  • MVVM (Model-View-ViewModel) pattern with Provider.
  • Separation of concerns: UI, Business Logic, Data Layer.
  • Repository pattern for data management.

Performance Considerations

  • Implement pagination for large task lists to improve performance.
  • Optimize Hive operations to ensure fast read and write times.
  • Use efficient list rendering (ListView.builder) to handle large lists of tasks.
  • Implement proper dispose methods to prevent memory leaks.

There you have it! A complete guide to the TODO App's main screen. You now know how the UI is structured, how the API integration works, and how we manage data locally. Keep up the great work, and happy coding!