devonfw-forge / devonfw4flutter-mts-app

Large-Scale Flutter Reference Application. An Extension of DevonFw's My Thai Star Project

Contents

• Creation Context
• Purpose
• Previous Related Work
• Covered Topics
• Architecture
• Screens
  • Original Angular
  • New Flutter
• Set-Up (With Mock Data)
• Set-Up (With own Back-End)

Creation Context

This project is part of a Bachelor Thesis written by a student in the Bachelor of Science Program “Computer Science and Media Technology” at Technical University Cologne. The work was executed in collaboration with Capgemini Cologne. Capgemini’s DevonFw open-source initiative maintains the “My Thai Star” application as a reference project for using a brought range of technologies in a large-scale context. Parts of that application where recreated using Flutter for this thesis.

Purpose

1. The Thesis itself outlines the creation process of this repository, which design decisions were made and why. The Thesis is published through the TH Köln digital publishing service and freely available for anyone.
2. This repository is a fully documented, large-scale Flutter application. I did my best to document the reasons behind the design decisions in-code as well.

Related Work

• The Thesis documenting the development process in great detail.
• A guide on developing large-scale applications using Flutter.
• A small-scale application to test some of the recommendations made by the guide.

Covered Topics

• Comparing State-Management Solutions
• The BLoC Pattern
  • Recommendations for Designing BLoCs
• Layered Architecture
• The Repository Pattern
• Object Equality in Dart
• The Advantages of Immutability
• Dependency Injection
• Service Locators
• Project Structure
• Modularization
• Localization
• Form Validation

Architecture

Screens

Original Angular

New Flutter

Set-Up (With Mock Data)

The easiest way to set-up the application. It will only have a limited set of features and use local mock data. A good option if you only wanna check out the code.

You will need

• Flutter
• Git
• Android Virtual Device (AVD)

Step 1

Clone this repository.

git clone https://github.com/devonfw-forge/devonfw4flutter-mts-app.git

Step 2

Make sure the lib/configuration.dart looks like this:

static final bool useMockData = true;

Step 3

Run the Flutter My Thai Star Application in your AVD.

Set-Up (With own Back-End)

This repository is only a Front-End component for the existing My Thai Star application. Thus you will need to host a My Thai Star Back-End component for the application to fully work. This set-up is the most tedious, but it will enable you to use every feature of the My Thai Star Flutter application.

You will need

• Flutter
• Git
• Android Virtual Device (AVD)
• Docker

Step 1

Clone this repository.

git clone https://github.com/devonfw-forge/devonfw4flutter-mts-app.git

Step 2

Get a My Thai Star Back-End. The easiest way is to clone this fork I made where I already exposed the Back-End ports.

git clone https://github.com/Fasust/my-thai-star.git

Step 3

In the My Thai Star project cloned in step 2, run the following command in the root of the directory. Be sure you are on the master branch of the repository.

docker-compose up

This will boot up the whole My Thai Star application with exposed ports on the Back-End. You can verify if is running by going to http://127.0.0.1:8081/restaurant in your browser. You should see the My Thai Star Angular Front-End.

Step 4

Make sure the lib/configuration.dart looks like this:

static final String baseUrl = "http://10.0.2.2:8082/";
static final bool useMockData = false;

Step 5

Run the Flutter My Thai Star Application in your AVD. It should now be able to communicate with the Back-End in the docker container.