Versions Compared

Old Version 2

changes.mady.by.user Unknown User (zl942)

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (zl469)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Technology Stacks

DIAPER Cohort (mobile app) built with Flutter, flutter material, and TDesign

Before diving into codes, getting familiar with these documents is highly recommended. 

Flutter Architecture

layers

UI

Material

IOS Simulator

Xcode

Android Simulator

Android Studio

Getting Started

In order to run the mobile app locally, follow the steps below:

  1. Install Xcode from App Store
  2. Install Flutter
    1. Use the response from flutter doctor  to guide you through any other necessary installations (e.g., Android Studio, Chrome, CocoaPods, etc.)
    2. If you encounter the "Bad CPU type in executable" error with flutter doctor , maybe this would help
    3. If you have trouble installing Cocoapods with ruby, try installing with brew install cocoapods 
  3. Pull the frontend-mobile repo from https://github.com/DIAPER-Project
  4. For local testing and development, use the test server by switching the server URL to https://mobile-test.diaper-project.com:5001/api in dev-mobile/lib/helper/API.dart .
    1. Note: the server URL may get updates in the future, please refer to the infra team/documentation for the new server url.
  5. Once flutter doctor  yields no error, proceed with the following steps in https://flutter.dev/docs/get-started/editor to build and run the app
    1. Navigate to the dev-mobile  directory.
    2. Simulation (two ways)
      1. You need to first open the iOS simulator by running open -a Simulator  in the terminal and then run flutter run .
      2. In VSCode, in the bottom toolbar, click "No Device," choose "iPhone 13" from the top drop-down menu, then run flutter run  in the terminal.

Overall Flutter Project Structure:

Image Added

lib/: Structure:

Image Added

Uploading to TestFlight

You will first need to open the workspace (frontend-mobile/dev-mobile/ios/Runner.xcworkspace) in Xcode. 

Here are two very helpful and detailed guides. 

  1. From flutter
  2. This Medium post has some more screenshots that you may find useful to refer to

You may find them confusing, and indeed not all sections in the tutorials are relevant. The only necessary steps are:

  1. Modify the project settings
    • Follow the guide thoroughly
    • Make sure the signing setting is correct.
    • Image Added
  2. Execute each step under the section "Submit App to TestFlight for the First time" in the Medium post.
    • When building the App, set the Runner to be any iOS device.
    • Make sure to update the Build  number to be the proper version when submittingImage Added
    • During Re-sign Runner  step when distributing App, if you encounter Missing private key  error in the below screenshot, refer to Distribution certificate / private key not installed - Stack Overflow. 
    • Image Added
  2.  
    • During Archive, if flutter.h not found, 
      1. Remove ios/Flutter/Flutter.podspec: rm ios/Flutter/Flutter.podspec
      2. flutter clean
      3. flutter run

Now Archive again, the problem should be fixed.


Once the app has been uploaded, go to App Store Connect and log in, you can find the new build (may take a while after uploading from Xcode) as in the screenshot. 

  • Click "Manage" and choose "None of the algorithms mentioned above"

Image AddedImage Added

  • Now you can click into the up-to-date build and invite testers

Image Added

Then, download the app TestFlight from the App store and Redeem Diaper Cohort with the TestFlight invitation code. There, you can play with your most recent build.

Implementation flow: 

  1. 📖 Understand the project structure: This initial step ensures you have a clear understanding of the existing codebase, project architecture, and dependencies, which is crucial for effective implementation.

  2. 🎨 Implement the feature: You focus on developing the new feature, following best practices, and ensuring it meets the project's requirements and specifications.

  3. 🏭 Reconstruct the implementations to achieve scalability and readability by decoupling the UI and Logic: After the implementation, refactor the code to separate the user interface (UI) from the business logic. This decoupling enhances code maintainability, scalability, and readability.

  4. 🙋 Start a Pull Request & Review request to the admin: Submit your changes through a pull request, inviting the project admin and team members to review your code. This step ensures that your implementation is scrutinized for quality, adherence to standards, and potential issues.

  5. 🧰 Fix highlighted issues: Address any feedback or issues raised during the code review. This collaborative process helps to catch bugs, improve code quality, and ensure the feature integrates smoothly with the existing codebase.

  6. ✅ Merge: Once all issues are resolved and the code review is approved, merge your changes into the main codebase. This final step deploys your feature and makes it available for use in the project.

Overall Flutter Project Structure:

Image Removed

lib/: Structure:

...