Sprint 4 - ISIS-3510-Mobiles/Flutter GitHub Wiki

• Description: Implement all features from Sprint 2 and Sprint 3 if not done already. If any feature needs to be modified or improved based on feedback from the oral exam, make those adjustments.

• Issue: During the feedback session, it was highlighted that the caching system did not function properly when viewing a profile in airplane mode.
• Resolution: The caching system has been updated to ensure that profile data can be accessed seamlessly, even in offline mode. This update enhances the app’s ability to provide a consistent user experience without interruptions.
• Verification: A demonstration of the fixed caching system while viewing a profile in airplane mode has been recorded.

• Issue: It was noted that the app lacked dynamic labels for data input fields in both the login and register views.
• Resolution: Dynamic labels have been added to improve the user experience by providing real-time feedback while the user is inputting data. This feature ensures that users have clear guidance as they fill out forms, enhancing the overall usability of these views.
• Verification: Screenshots and a video showcasing the implementation of dynamic labels in the login and register views are provided.

• Issue: Analyzing the importance of profile customization based on user interaction data required clearer visual representation to understand its impact on engagement and personalization in EcoStyle.
• Resolution: Data related to profile picture updates was visualized using Tableau, highlighting metrics such as the number of users who utilized the feature and the average number of profile picture changes per user. This visualization enables a deeper understanding of how profile customization contributes to user experience and retention.
• Verification: Tableau dashboards illustrating the data analysis and insights are included. These dashboards demonstrate key patterns, such as the proportion of users engaging with the feature and the frequency of profile updates, supporting the importance of customization for user engagement.

• Issue: Lorem ipsum in checkout view
• Resolution: Fetched data from logged in user.
• Verification:

EcoStyle offers a unique, holistic platform that brings together students, faculty, and administrative staff, creating a vibrant community-driven marketplace for second-hand clothing. The platform's core value proposition is built around three main pillars: affordability, sustainability, and community engagement.

1. Community-Driven: Unlike existing second-hand platforms, EcoStyle is tailored specifically to universities, allowing students, faculty, and admin staff to interact and build trust within a closed, reliable ecosystem. By connecting users from the same institution, it fosters a sense of belonging and security, ensuring transparency in transactions.

2. Sustainability Insights: EcoStyle sets itself apart by integrating real-time sustainability tracking that quantifies the environmental impact of each purchase. Users can track the amount of waste they've reduced, carbon emissions saved, and other eco-friendly metrics. This data-driven approach not only reinforces the platform’s mission but also rewards users for making environmentally conscious decisions, offering incentives like badges or discounts for sustainable shopping behaviors.

3. DIY Inspiration: Beyond buying and selling, EcoStyle fosters creativity and sustainability through DIY inspiration. Users can access tutorials, upcycling ideas, and creative tips on how to repurpose their second-hand finds, making EcoStyle more than just a marketplace—it's a hub for promoting sustainable fashion practices.

4. Affordability with a Personalized Touch: Unlike traditional second-hand marketplaces, EcoStyle includes curated recommendations based on users’ style preferences, ensuring a seamless shopping experience. By focusing on affordability and convenience, EcoStyle becomes an easy choice for students and faculty alike, looking to maintain their style without breaking the bank.

5. Trust through Verified Users: Each member of the EcoStyle community is linked to their university, whether student, faculty, or admin, creating an additional layer of trust and accountability. Verified sellers and buyer ratings further enhance the platform’s reliability, making it safer than broader public marketplaces.

In essence, EcoStyle is more than just a second-hand clothing app; it's a community-powered platform that empowers users to make ethical, affordable, and eco-friendly fashion choices while connecting with peers across the university. The combination of sustainability tracking, community engagement, and creative resources make it a distinctive and compelling alternative to existing solutions in the market.

Instead of re-rendering the entire screen when a user selects a payment method, only the affected widget (in this case, the payment method section) is updated. This is achieved by using state management techniques to trigger targeted UI updates. By implementing a StatefulWidget specifically for the payment method section, the rest of the checkout screen remains unaffected, ensuring that only the minimal necessary UI components are re-rendered.

This targeted re-rendering leads to reduced unnecessary rebuilds of the entire checkout screen, improving the application's performance. By limiting the scope of the state updates, the app becomes more responsive, providing a smoother user experience when users select or switch between payment methods. This is particularly important on resource-constrained devices, as it minimizes performance bottlenecks.

1. Reduced Overdraw:
   • What is Overdraw? Overdraw happens when the GPU has to render pixels that are later covered by other pixels, leading to unnecessary rendering and additional processing.
   • How Targeted Updates Help: In the traditional approach, when the entire screen is rebuilt, the GPU renders the entire widget tree, including parts of the screen that are not affected by the state change. By optimizing the state management to only rebuild the payment method section, we minimize the number of layers that need to be rendered. This reduction in layers reduces the amount of overdraw.
   • Impact: The GPU can focus its rendering efforts on a smaller portion of the UI, leading to a significant reduction in overdraw, which in turn enhances performance and responsiveness. Overdraw: GPU:

Continuing with the optimizations, a comprehensive GPU Rendering Analysis identified inefficiencies like excessive overdraw and prolonged frame rendering times, which were negatively affecting responsiveness. Overdraw—where pixels are rendered multiple times unnecessarily—was specifically addressed in the Orders and Profile views. By optimizing the widget tree, reducing overlapping layers, and ensuring that rendering tasks are focused only on visible and relevant UI components, GPU workload was significantly reduced. Additional adjustments, such as flattening widget hierarchies and employing efficient scrolling mechanisms, resulted in smoother animations and more stable frame rates across the app.

We also fixed overdrawn across the new deals view, the list view and the detail view.

In parallel, Memory Management enhancements were applied to minimize excessive memory consumption and prevent potential leaks. Optimized data caching strategies, including efficient use of shared_preferences for storing local data, were implemented to ensure responsiveness even in offline scenarios. Lazy loading techniques for UI components and assets further reduced memory overhead by loading only the content needed at any given moment. Unused resources and assets were cleared proactively, ensuring the app runs efficiently, even on resource-constrained devices. Together, these GPU, overdraw, and memory management optimizations contribute to a faster, more stable, and responsive user experience.

2. Lower CPU Usage:
   • CPU Load in Full Screen Rebuilds: When the entire screen is rebuilt on every state change, the CPU is responsible for recalculating and re-rendering the entire widget tree. This can be highly resource-intensive, especially for complex screens with numerous widgets and dynamic content. As a result, devices with limited processing power may struggle to keep up, leading to sluggish performance, dropped frames, and a less responsive UI.
   • Targeted Updates: By isolating state changes to only the relevant part of the UI (e.g., the payment method section), the CPU workload is significantly reduced. This targeted update approach ensures that only a specific widget subtree is rebuilt, rather than the entire widget hierarchy. Consequently, the CPU performs fewer calculations, optimizing the rendering process and conserving processing power.
   • Improved Frame Rate Stability: With fewer resources dedicated to unnecessary computations, the CPU can maintain a stable frame rate, even during high-load scenarios or repeated state updates. This reduces the risk of dropped frames and visual stutters, ensuring a smoother and more responsive user experience.
   • Impact on User Experience: By decreasing the CPU’s workload, the overall app performance improves, especially on older or lower-end devices. The UI remains fluid and responsive during interactions, such as selecting a payment method or making changes to the checkout process. This efficiency not only enhances user satisfaction but also extends device battery life by preventing excessive CPU usage.
   • Scalability Benefits: Lower CPU usage enables the app to handle more complex features and larger data sets without a proportional increase in resource demands. This ensures the app can scale efficiently as it grows in functionality or supports more demanding use cases in the future.

3. Reduced Memory Usage:
   • Memory Overhead of Full Rebuilds: Every time a full screen rebuild occurs, the application holds onto memory to manage the entire widget tree and its state. This can lead to increased memory consumption, especially when complex screens are being rebuilt frequently.
   • Targeted Updates: With optimized state management, only the widgets that need to change are updated, and their state is recalculated in isolation. This results in a reduction in memory usage, as the app does not need to store and manage the entire widget tree's state at once.
   • Impact: By minimizing the memory footprint of the app, it reduces the likelihood of memory-related performance issues like slowdowns, excessive memory usage, or even crashes due to memory pressure.

4. Improved Responsiveness:
   • UI Responsiveness with Full Rebuilds: Every time the state changes (e.g., a payment method is selected), rebuilding the entire screen means that the user has to wait for the UI to be redrawn. This can cause noticeable lag or delays, which can disrupt the user's flow and lead to frustration.
   • Targeted Updates for Faster Rendering: By using state management to trigger updates only for the payment method section, the UI can immediately reflect the user's action, without waiting for the entire screen to be redrawn. This creates a more fluid experience, where the UI feels more responsive to user inputs.
   • Impact: The app becomes much more responsive, enhancing the overall user experience by providing near-instant feedback when interacting with the payment method selection.

Optimizing payment method selection through targeted state updates not only improves the user experience by reducing overdraw, CPU usage, and memory overhead but also significantly enhances overall performance. By ensuring that only the affected portion of the screen is rebuilt, rather than the entire screen, the app runs more efficiently, even on resource-constrained devices. This makes the app more scalable, user-friendly, and performant in various real-world conditions.

• login and profile
• cart and checkout
• list and detail for products

• Edit profile and email cache for login
• Sustainability, add items and Cart local storage
• Multi threading to load items faster

• a. Multi-threading/Concurrency Strategy:
  • Description: The team enhanced the feature for displaying upcoming events in the Ecostyle app by incorporating multi-threading using Futures. They used asynchronous programming to fetch event data from Firebase in parallel with other tasks, ensuring that the UI remains responsive while data is being retrieved. By leveraging FutureBuilder widgets, they handled multiple asynchronous calls (such as checking for network connectivity and fetching event details) concurrently, improving the app's performance. The use of Futures also ensured that the event data is fetched without blocking the main thread, providing a smoother and more efficient user experience even with large datasets or slow network conditions.

• b. Local Storage Strategy:
  • Description: The team optimized the EcoStyle app by integrating local memory storage to enhance the functionality of the ListItemsView. They implemented a caching mechanism to store details of the last five viewed items directly on the device, ensuring quick access without relying on network requests. Additionally, they used local storage to save user preferences, allowing the app to retain these preferences even when the application is closed. Upon reopening, the app leverages this stored data to sort and display products based on the user’s interests, ensuring a consistent and personalized experience.

// Cargar datos desde local storage
  Future<void> _loadRecentlyViewedItems() async {
    final prefs = await SharedPreferences.getInstance();
    final String? storedItems = prefs.getString('recentlyViewedItems');
    if (storedItems != null) {
      setState(() {
        recentlyViewedItems = List<Map<String, dynamic>>.from(
          jsonDecode(storedItems),
        );
      });
    }
  }

// Guardar datos en local storage
Future<void> _saveRecentlyViewedItems() async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setString('recentlyViewedItems', jsonEncode(recentlyViewedItems));
}

void _viewItem(BuildContext context, Map<String, dynamic> item) {
    _getUserLocation();
    //_logCategoryView(item['category']); // Llama a la función para enviar el evento

    List<Map<String, dynamic>> orderedItems = _orderByLocation(userPosition, original_items);
    setState(() {
      // Agrega el producto a la lista de últimos vistos
      if (recentlyViewedItems.length >= 5) {
        recentlyViewedItems.removeAt(0); // Elimina el más antiguo si ya hay 5
      }
      recentlyViewedItems.add(item);
      _saveRecentlyViewedItems(); // Guardar cambios
     [...]

• c. Caching Strategy:

  • Description: Caching Strategy in the Orders View of EcoStyle To ensure the availability of order information even when offline, a caching strategy has been implemented in the EcoStyle app. This feature uses the shared_preferences library to locally store the order data retrieved from Firebase, allowing users to access the data without an internet connection.

When the app starts, it checks for cached order data. If the data is available, it loads and processes it to convert date fields into DateTime objects. If there is no cached data or if an internet connection is active, the app retrieves the data from Firebase, saves it to the cache, and then displays it.

Future<void> _loadOrders() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String? cachedOrders = prefs.getString('cachedOrders');

  if (cachedOrders != null) {
    // Load data from cache
    List<Map<String, dynamic>> cachedList = List<Map<String, dynamic>>.from(
      json.decode(cachedOrders).map((item) => Map<String, dynamic>.from(item)),
    );
    // Convert stored date strings back to DateTime objects
    cachedList = cachedList.map((order) {
      if (order['orderDate'] != null) {
        order['orderDate'] = DateTime.parse(order['orderDate']);
      }
      return order;
    }).toList();

    setState(() {
      orders = cachedList;
      isLoading = false;
    });
  }
}

• d. Eventual Connectivity Strategy:

Eventual Connectivity Strategy To enhance the app's performance and usability, we implemented a memory cache that ensures the app retains data even when connectivity is lost. This strategy allows the app to provide a seamless user experience by storing essential information locally when it's loaded, so users can access it even when offline. We utilized local storage with the help of SharedPreferences to store cached data securely and efficiently.

For example, in the Orders View, when the orders are fetched from Firebase, they are cached in memory. If the user loses connectivity, the app can still load the cached data and display the orders without interruption. Similarly, in the Profile View, user data is stored locally, allowing users to view their profile information even when offline. This strategy ensures that the app remains functional and user-friendly, providing a robust offline experience.

here's an example:

Future<void> _loadUserProfile() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String? cachedProfile = prefs.getString('cachedProfile');

  if (cachedProfile != null) {
    // Load cached profile data
    Map<String, dynamic> cachedData = Map<String, dynamic>.from(
      json.decode(cachedProfile),
    );

    setState(() {
      userProfile = cachedData;
      isLoading = false;
    });
  }
}

• Events View: The Events view in the Ecostyle app displays a list of upcoming sustainability-related events, showing essential details such as the event title, date, time, location, and description. Each event is presented in a card with a green background, allowing users to easily browse and learn more about the events.

• Discounts View: The Discount View is designed to showcase special product promotions grouped into bundles for easy discovery and purchase. Upon entering this view, users are presented with a list of curated bundles, each displayed as an interactive card featuring an image of the included products, the total price, and any promotional details (e.g., "2x1" or "Exclusive Discount"). Each bundle card highlights key information such as the product names, original prices and discount price, allowing users to quickly evaluate the offer. The layout is intuitive and visually engaging, ensuring users can effortlessly browse and select the best deals.

• Orders View: The Orders View is designed to present a comprehensive overview of the user's past orders. Upon entering this view, users are greeted with a list of their orders, displaying key details such as the order date, total amount, status, and payment method. Each order is represented as a card that users can tap to get more information. The view includes an intuitive layout with sections that display images and information about the items in each order, enabling users to quickly scan their past purchases. The app leverages caching to ensure that users can access their order data even when offline, providing a seamless experience regardless of connectivity.

• Order Detail View: The Order Detail View offers an in-depth look at a specific order. When a user taps on an order in the Orders View, they are navigated to the Order Detail View, which displays comprehensive information about that particular order. This includes a breakdown of each item, its image, title, and price, as well as any additional details like item quantities or special notes. The view is designed with user engagement in mind, ensuring that all relevant information is easy to read and visually appealing. This detail view can be accessed offline due to the caching strategy implemented, allowing users to review their order history without interruption.

• Description:

• User Engagement Metrics: Track user interactions with the Events feature. This includes the number of views, clicks, and shares of event details, as well as the number of users who sign up or RSVP for events.
• User Feedback: Gather qualitative data through surveys, in-app feedback forms, or user interviews to understand how users perceive the Events feature.
• User Retention and Behavior: Analyze retention rates and app behavior data to identify if users who engage with events are more likely to return to the app.

• Event Popularity Analysis: Analyze which events receive the most engagement (e.g., views, sign-ups, etc.) and whether the type of event (e.g., sustainability conference vs. clothing swap) correlates with higher user engagement.
• User Feedback Sentiment Analysis: Evaluate the sentiment of feedback to determine if users find the feature useful, confusing, or unnecessary.
• Comparative Analysis: Compare user engagement with the Events feature against other key features in the app (e.g., product browsing, shopping cart usage) to assess the feature's relative importance.

• Benefits of Keeping the Events Feature:
  • Identify how events help build community engagement around sustainability initiatives, foster brand loyalty, or increase app usage.
  • Highlight how the feature contributes to achieving app goals (e.g., increasing user participation in eco-friendly activities, promoting environmental awareness).
• Drawbacks of Keeping the Events Feature:
  • Assess if the feature creates clutter, diverts attention from more critical features, or adds complexity without substantial user engagement.
  • Investigate if users are overwhelmed by too many events or if they fail to see value in the feature.
• Benefits of Removing/Redesigning the Events Feature:
  • Determine if simplifying the feature or removing it would streamline the user experience, reduce app complexity, or redirect resources toward more impactful features.
  • Consider if redesigning the feature to be more personalized or localized (e.g., suggesting events based on user preferences) could improve engagement.
• Drawbacks of Removing/Redesigning the Events Feature:
  • Evaluate the potential loss of a community-building tool and how it might affect brand identity or user loyalty.
  • Assess if removing the feature could alienate users who value sustainability events and reduce the app's overall appeal.

• Based on the data analysis and impact assessment, provide recommendations for whether to keep, remove, or redesign the Events feature.
• Suggest possible improvements if the feature should be retained (e.g., better event curation, enhanced notifications, more interactive features).
• Provide rationale based on user behavior data, engagement trends, and business objectives.

• Propose an ongoing evaluation strategy to monitor how changes to the Events feature (if any) affect user behavior and engagement.
• Recommend A/B testing for any redesigns or new feature variants to ensure that the changes have a positive impact.

• Are users more likely to view detailed information about orders or simply browse their order list? And do users frequently use the offline capability of the Orders View?

By analyzing user behavior, we have determined whether users are interested in in-depth order details or if a simpler summary view is sufficient. Additionally, we have assessed how valuable the caching strategy is for maintaining usability without internet connectivity.

• User Engagement Metrics: We have tracked user interactions with the Orders View, including the number of times users open the Orders View, how often they click on order details, and how often they browse through the order list without tapping on individual items.
• Offline Capability Usage: We have measured how frequently users access and view orders without an internet connection to understand the offline functionality's effectiveness.
• User Feedback: We have collected qualitative data through in-app feedback forms and surveys to gather insights into users’ satisfaction with the Orders View and its offline capabilities.
• User Retention and Behavior: We analyzed the retention rates of users who frequently interact with the Orders View compared to those who do not. We also tracked how this feature impacted overall app usage and session length.

• Engagement Pattern Analysis: We determined whether users are more likely to view detailed information about their orders or if they prefer to browse through a summary list. Interaction rates for each type of view were analyzed to identify user preferences.
• Offline Capability Utilization Analysis: We identified how often users relied on the offline feature and assessed whether this usage justified its inclusion and potential improvements.
• User Feedback Sentiment Analysis: We reviewed feedback to gauge whether users find the Orders View and its offline capability useful or if they feel it is redundant.
• Comparative Analysis: We compared the engagement data of the Orders View to other views, such as the Profile View, to understand its relative importance and influence on user behavior.

• Enhances the user experience by providing quick access to order details, supporting decision-making, and promoting user trust in the app.
• The offline feature supports users who may have intermittent connectivity, ensuring they can still view their past orders.

• Evaluated whether the offline functionality created additional development and maintenance complexity or if it was underutilized.
• Assessed if the Orders View distracted from more important features or contributed to user overload.

• Determined if simplifying the Orders View to show only essential order information or redesigning it to make it more interactive would improve user engagement and streamline the app's interface.
• Considered whether reducing the offline capabilities would free up resources for other critical features or improvements.

• Evaluated the impact on user satisfaction if the Orders View was removed or simplified too much, potentially reducing user loyalty.
• Assessed the loss of convenience for users who frequently used the Orders View, particularly those who relied on the offline functionality.

• Keep the Orders View and Offline Capability: Based on data analysis and user behavior, we have decided to retain the feature as user engagement metrics indicate its value, and feedback supports its continued use.
• Improve the Orders View: Since engagement data showed a preference for the order list over detailed views, we have simplified the layout and enhanced search and filtering options. The offline feature was optimized for better performance to meet user needs.
• Redesign Strategy: The Orders View was redesigned with a focus on enhancing the user experience while maintaining functionality both online and offline, leading to a more streamlined and effective feature.

• User Engagement Metrics: Track user interactions with the Wishlist feature, including the number of items added, removed, and purchased from the Wishlist. Measure how frequently users access their Wishlist and the average time spent in this section.
• User Feedback: Gather qualitative data through in-app surveys, user interviews, or reviews to understand how users perceive the Wishlist feature, its ease of use, and its value.
• Conversion Tracking: Monitor how often items saved to the Wishlist are eventually purchased compared to items not added to the Wishlist.
• Demographic Insights: Analyze the usage of the Wishlist feature across different user segments (e.g., frequent shoppers vs. casual browsers, age groups) to identify patterns.
• Behavioral Analysis: Identify whether users who engage with the Wishlist are more likely to spend more time in the app, make repeat purchases, or explore other features.

• Wishlist Utilization Analysis: Examine how many users actively use the Wishlist feature and the average number of items saved per user. Determine if the Wishlist is primarily used for future purchases, price tracking, or as a way to bookmark items.
• User Feedback Sentiment Analysis: Evaluate feedback to identify recurring themes, such as satisfaction, frustrations, or desired improvements (e.g., better organization, notifications for discounts on Wishlist items).
• Purchase Behavior Correlation: Compare conversion rates of Wishlist items versus non-Wishlist items to assess its impact on user purchasing decisions.
• Feature Comparison: Assess the Wishlist's performance against other related features (e.g., Shopping Cart or Recently Viewed Items) to understand its relative importance to users.

• Benefits of Keeping the Wishlist Feature:
  • Identify how the Wishlist helps users organize desired items, track potential purchases, and enhance their shopping experience.
  • Highlight its role in increasing user retention by encouraging users to return to the app to review or purchase saved items.
  • Evaluate how it contributes to higher sales or conversion rates by allowing users to monitor price changes or promotions.
• Drawbacks of Keeping the Wishlist Feature:
  • Assess whether the feature creates unnecessary clutter or complexity for users who don’t actively use it.
  • Investigate if maintaining the feature consumes significant development or operational resources without delivering proportional value.
• Benefits of Removing/Redesigning the Wishlist Feature:
  • Determine if removing the feature would simplify the user interface, reduce app complexity, or redirect resources toward more impactful features.
  • Explore redesigning the Wishlist to include features like price alerts, sharing capabilities, or better organization (e.g., categorizing saved items) to improve usability and engagement.
• Drawbacks of Removing/Redesigning the Wishlist Feature:
  • Evaluate the risk of alienating loyal users who rely on the Wishlist as part of their shopping experience.
  • Assess potential revenue loss if the Wishlist is a significant driver of conversions or repeat visits to the app.

• Based on data analysis, recommend whether to retain, remove, or redesign the Wishlist feature. For example:
  • If retaining: Suggest improvements, such as integrating price drop alerts, enabling Wishlist sharing, or adding personalized recommendations based on saved items.
  • If redesigning: Propose features like grouping Wishlist items by category, enhancing the UI/UX for easier navigation, or providing contextual notifications (e.g., restocks or limited-time deals).
  • If removing: Provide strategies to migrate Wishlist users to alternative app features, like "Favorites" or "Recently Viewed Items," to minimize user disruption.
• Ensure recommendations align with business objectives, user engagement trends, and overall app goals.

• Propose ongoing tracking of Wishlist-related metrics, such as engagement and conversion rates, to measure the impact of any changes.
• Recommend A/B testing for new Wishlist designs or features to validate their effectiveness before full implementation.
• Suggest periodic user surveys to gauge satisfaction and identify new user needs or preferences related to the Wishlist feature.