====== Mobile Frontend Development - Guidelines ====== Join us for the Green Code Hackathon, where innovation meets sustainability! This exciting event invites students and tech enthusiasts to create impactful, eco-friendly mobile apps using Flutter. Let's code for a greener future and make a positive change together! ==== Table of Contents ==== 1. Why Flutter? 2. Technology Selection 3. Detailed guidelines for developing App using Flutter 4. Tips for Better User Experience 5. Criteria for Green Coding 6. [[ixc2024:tech:tools:green-tools| Green Tools]] - Green Tools 7. [[ixc2024:tech:tools:measurement-rubrics| Measurement Rubrics]] - Measurement Rubrics ==== Why Flutter ? ==== {{:ixc2024:tech:mfrontend:comparison.png?400|}} ==== Technology Selection ==== To ensure a smooth and effective development process for your Flutter-based mobile app focused on frontend development, we have outlined the necessary technologies and provided detailed guidelines for each part of the implementation. This will help you efficiently create your project while incorporating green coding practices. === Frontend Development: === **Flutter:** For building the cross-platform mobile application. **Dart:** The programming language used with Flutter. === Version Control and Collaboration: === **GitHub:** For code hosting and version control. **Git:** For version control === IDE: === Android Studio or Visual Studio Code ===== Prerequisites ===== Before going to any further, we highly recommend watching this tutorial if you are new to flutter Flutter Beginner Course: https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ ===== Detailed Guidelines for creating Mobile App using Flutter ===== Flutter is an open-source UI toolkit created by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. The framework allows for fast development, expressive and flexible UI, and a native performance. === 1. Project Setup and Environment === **Guidelines:** * Install Flutter: Ensure Flutter SDK is installed on your machine. Follow the [[https://docs.flutter.dev/get-started/install|Installation Guide]] for your OS * Setup IDE: Use Android Studio or Visual Studio Code with the Flutter and Dart plugins installed. **Resources:** * Flutter Setup Youtube: https://youtu.be/KdO9B_CZmzo?si=uz89OfwogCivcklI * Flutter PDF Tutorial [[https://www.tutorialspoint.com/flutter/flutter_tutorial.pdf | PDF Doc ]] * Flutter & Dart Crash Course: https://youtu.be/CzRQ9mnmh44?si=ZM2gaDSGM1rqlCGH * Flutter Documentation: [[https://docs.flutter.dev/get-started/install | Getting Started]] * Flutter YouTube Channel: [[https://www.youtube.com/c/flutterdev | Flutter Channel]] === 2. User Interface Design === **Guidelines:** * Design Principles: Follow Material Design principles for a consistent and intuitive UI. * Widgets: Use Flutter’s rich set of widgets for building flexible layouts. * Navigation: Implement navigation using Navigator and Routes. **Resources:** * Flutter Widgets: [[https://docs.flutter.dev/ui/widgets| Widget Catalog]] * Flutter Layouts: [[https://docs.flutter.dev/ui/layout | Building Layouts]] * Navigation: [[https://docs.flutter.dev/ui/navigation | Flutter Navigation]] **Efficient practices to implement User Interface Design:** * Best Design Patterns: Flutter Design Patterns: [[https://www.coders.dev/blog/efficient-ui-development-with-flutter-design-patterns.html | Flutter Design Patterns]] * Efficient UI Practices: [[https://medium.com/@dihsar/flutter-ui-best-practices-creating-beautiful-and-maintainable-user-interfaces-ceca992bc210 | UI Best Practices]] === 3. State Management === **Guidelines:** * Provider Package: Use the Provider package for managing state. * Stateful Widgets: Understand when to use Stateful vs Stateless widgets. **Resources:** * State Management: [[https://docs.flutter.dev/data-and-backend/state-mgmt/simple | Managing State]] * Provider: [[https://pub.dev/packages/provider | Provider Docs]] **Efficient practices for State Management:** * State Management Best Practices: [[https://medium.com/@flutterdynasty/mastering-state-management-in-flutter-a-comprehensive-guide-7a0b6131312a | Mastering State Management]] === 4. Networking and Data Handling === **Guidelines:** * HTTP Requests: Use the http package for making API calls. * JSON Parsing: Parse JSON data to Dart objects and vice versa . * Error Handling: Implement proper error handling for network requests. **Resources:** * Networking: [[https://docs.flutter.dev/cookbook/networking/fetch-data | Fetching Data]] * JSON Parsing: [[https://docs.flutter.dev/data-and-backend/serialization/json | JSON and Serialization]] **Efficient practices for API Data Handling:** * Efficient API Data Handling: [[https://medium.com/@bensatriya3/efficient-api-data-handling-in-flutter-implementing-pagination-with-provider-772462f95a18 | Efficient Data Handling in Flutter]] === 5. Real-Time Updates and Notifications === **Guidelines:** * Firebase Integration: Use Firebase for real-time updates and push notifications. * Cloud Messaging: Implement Firebase Cloud Messaging (FCM) for push notifications. **Resources:** * Firebase: [[https://docs.flutter.dev/data-and-backend/firebase | Firebase for Flutter]] * Real-Time Database: [[https://firebase.google.com/docs/database/flutter/start | Using Firebase Realtime Database]] * Push Notifications: [[https://firebase.flutter.dev/docs/messaging/overview/ | FCM for Flutter]] **Efficient practices to implement Flutter Notification:** * Best Practices for Notifications: [[https://medium.com/@shubhamsoni82422/mastering-flutter-notifications-a-guide-to-awesome-notification-package-part-i-step-by-step-4bda734d114a | Mastering Flutter Notifications]] === 6. Location Services and Mapping === **Guidelines:** * Geolocation: Use the geolocator package to get the device’s current location. * Maps Integration: Integrate Google Maps using the google_maps_flutter package. **Resources:** * Geolocation: [[https://pub.dev/packages/geolocator | Geolocator Documentation]] * Google Maps: [[https://pub.dev/packages/google_maps_flutter | Google Maps for Flutter]] **Efficient practices for implementing Location Services:** * Location Services in Flutter: [[https://medium.com/swlh/working-with-geolocation-and-geocoding-in-flutter-and-integration-with-maps-16fb0bc35ede | Working with Location in Flutter]] === 7. Testing and Version Control === **Guidelines:** * Testing: Test your app for possible bugs. * CI/CD: Setup continuous integration and deployment with GitHub Actions or similar services. **Resources:** * Git: [[https://git-scm.com/doc | Git Documentation]] * Github Guides: [[https://docs.github.com/en/rest/guides | GitHub Guides]] * Testing in Flutter: [[https://docs.flutter.dev/testing/testing-plugins | Flutter Tests]] ==== Criteria for Green Coding ==== To ensure your Flutter mobile app development aligns with green and sustainable coding practices, consider the following constraints: === 1. Energy Efficiency === Minimize the energy consumption of your app to reduce the environmental impact. **Guideline:** Optimize the app’s performance to consume less battery power. Use efficient algorithms and data structures, reduce the number of background processes, and limit the frequency of network requests. === 2. Minimal Resource Usage === Reduce the amount of resources your app consumes, such as memory and storage. **Guideline:** Optimize your code to be as lean as possible. Use lazy loading techniques, compress images, and clean up unused resources regularly. === 3. Network Efficiency === Limit the amount of data your app transfers over the network to reduce energy consumption and carbon footprint. **Guideline:** Implement data caching and offline capabilities to minimize network requests. Use efficient data formats (e.g., JSON instead of XML) and optimize API calls to transfer only necessary data. === 4. Code Reusability === Promote code reusability to avoid redundant coding efforts and save development resources. **Guideline:** Use modular design principles, create reusable components and libraries, and adhere to DRY (Don't Repeat Yourself) principles to minimize code duplication. === 5. User Device Impact === Minimize the impact your app has on users' devices. **Guideline:** Optimize your app to run smoothly on a wide range of devices, particularly low-end ones. Avoid unnecessary features that can slow down performance or drain the battery quickly. ==== Tips for Better User Experience ==== {{:ixc2024:tech:mfrontend:wew.png?400|}} By following these guidelines, participants can effectively develop the mobile front end using Flutter, leveraging its robust ecosystem and powerful features to create impactful and user-friendly application. === 1. Useful === The app must fulfill a real need and provide meaningful value to the user. Ensure the core functionality directly addresses the target user's needs, focusing on delivering practical and relevant solutions. **Guideline:** Optimize the app to perform efficiently without unnecessary features that consume extra resources. === 2. Usable === The app should be easy to use and intuitive, allowing users to achieve their goals effectively. Conduct usability testing to identify and fix any user interface issues, ensuring a smooth and efficient user experience. **Guideline:** Ensure that the app's usability does not compromise its energy efficiency by avoiding unnecessary animations and transitions that can drain battery life. === 3. Findable === Information and features should be easy to locate within the app. Implement a clear navigation structure and search functionality so users can quickly find what they are looking for without frustration. **Guideline:** Efficient navigation reduces the time the app is active, which in turn saves energy. === 4. Credible === The app should be trustworthy and reliable. Ensure data security, privacy, and consistent performance to build user trust and maintain the app’s credibility. **Guideline:** Use secure, lightweight protocols to minimize data usage and processing power, thereby reducing energy consumption. === 5. Desirable === The app should appeal to users aesthetically and emotionally. Use appealing design elements and interactive features that engage users and create a positive emotional connection with the app. **Guideline:** Balance the design elements to ensure they do not overly consume resources or reduce performance. === 6. Accessible === The app should be usable by people with a wide range of abilities and disabilities. Follow accessibility standards such as WCAG (Web Content Accessibility Guidelines) to make the app inclusive and accessible to all users. **Guideline:** Implement accessibility features that are optimized to run efficiently on all devices. === 7. Valuable === The app should deliver value to both the users and the business. Ensure the app meets user needs while aligning with business goals, providing benefits that justify its use and support overall objectives. **Guideline:** Maintain a lean codebase and efficient backend services to ensure that the app runs smoothly without consuming unnecessary resources. ===== Submission Requirements ===== * Public Github Repository for the App * Demo Video of App ===== Good Luck with your Green Coding Hacathon 😊 ===== Code the Future: Innovate Today for a Greener Tomorrow!