Session/8

README.md

@@ -1,3 +1,37 @@
-# flutter_training
+# ゆめみ　Flutter研修課題
 
-A new Flutter project.
+テンプレート
+
+- https://github.com/yumemi-inc/flutter-training-template
+
+## 環境構築
+
+*リポジトリをクローン
+
+```
+git clone https://github.com/mqkotoo/flutter_training.git
+```
+
+* 作業ディレクトリを変更する
+
+```
+cd flutter_training
+```
+
+* fvmに指定されたバージョンのFlutterをインストールする
+
+```
+fvm install
+```
+
+* 依存パッケージをインストールする
+
+```
+fvm flutter pub get
+```
+
+* ビルドラン
+
+```
+fvm flutter run
+```

analysis_options.yaml

@@ -3,3 +3,7 @@ include: package:blendthink_lints/recommended.yaml
 linter:
   rules:
     sort_pub_dependencies: false
+
+analyzer:
+  plugins:
+    - custom_lint

doc/ARCHITECTURE.md

@@ -0,0 +1,94 @@
+## アーキテクチャ
+
+今回のプロジェクトではあえて、いわゆるアーキテクチャというような大掛かりな設計はせずに、[`WeatherStateNotifier`](../lib/state/weather_state.dart)
+という、天気の取得操作、結果を管理するプロバイダーを作成し、Viewレイヤとやりとりするだけのシンプルな設計にしました。
+
+### ルール
+
+* Stateレイヤでなんらかの状態を操作して保管する。
+* Viewレイヤから`ref.read`してStateの操作、`ref.watch`してStateの表示を行う。
+* Stateレイヤのロジックが肥大する場合はServiceレイヤに移動させる。
+
+上記のルールに基づいて開発を進めました。
+
+### モチベーション
+
+* 今回のような規模が小さいプロジェクトに、たくさんレイヤーがあるアーキテクチャを採用すると無駄なレイヤーが増え、複雑化する。
+* 無理やり一定のアーキテクチャの型にはめると、個人的にはまだアーキテクチャの知識が浅いので、実際の必要性を感じることなく形だけのアーキテクチャになる可能性がある。
+* 簡潔でシンプルでわかりやすい。（主観になりますが。。）
+
+
+## View
+
+* 天気の表示、エラーのダイアログを表示。 天気を取得するボタンを提供。
+
+### WeatherPage
+
+* アプリのメイン画面
+* `Reload`ボタンを押して、`weatherStateProvider`をreadして、天気の取得処理を行う。
+* `weatherStateProvider`で天気取得に失敗した場合は、エラーメッセージを表示する。
+
+### WeatherForecastPanel
+
+* 天気の情報、気温等を表示しているコンポネント。
+* `weatherStateNotifierProvider`をwatchして、天気の状態を表示する。
+
+## State
+
+* 天気の情報を取得し取得した天気のデータを保持するメソッドを提供
+
+### WeatherStateNotifier
+
+* 天気の取得が成功したらそのデータを格納し、失敗した場合は、`onError`関数を引数で受け取る。
+
+## Service
+
+* `WeatherStateNotifier`での処理が肥大化したので天気を取得する処理はここに移動した。
+
+## Model
+
+* 天気情報やリクエストを送るモデルを定義、変換処理等を定義
+
+### WeatherCondition
+
+* 天気のステータスを定義、取得した天気に応じてイメージを返すextensionを定義
+
+### WeatherForecast
+
+* 天気の情報、最低気温、最高気温、日にちを定義
+* データの変換処理を定義
+
+### WeatherRequest
+
+* リクエストを送るクラスを定義
+
+```mermaid
+flowchart TB
+  subgraph Arrows
+    direction LR
+    start1[ ] -..->|read| stop1[ ]
+    style start1 height:0px;
+    style stop1 height:0px;
+    start2[ ] --->|listen| stop2[ ]
+    style start2 height:0px;
+    style stop2 height:0px;
+    start3[ ] ===>|watch| stop3[ ]
+    style start3 height:0px;
+    style stop3 height:0px;
+  end
+  subgraph Type
+    direction TB
+    ConsumerWidget((widget));
+    Provider[[provider]];
+  end
+
+  weatherStateProvider[["weatherStateProvider"]];
+  weatherServiceProvider[["weatherServiceProvider"]];
+  yumemiWeatherClientProvider[["yumemiWeatherClientProvider"]];
+  WeatherForecast((WeatherForecast));
+  WeatherPage((WeatherPage));
+
+  weatherStateProvider ==> WeatherForecast;
+  weatherStateProvider -.-> WeatherPage;
+  yumemiWeatherClientProvider ==> weatherServiceProvider;
+```

doc/graph.md

@@ -0,0 +1,30 @@
+```mermaid
+flowchart TB
+  subgraph Arrows
+    direction LR
+    start1[ ] -..->|read| stop1[ ]
+    style start1 height:0px;
+    style stop1 height:0px;
+    start2[ ] --->|listen| stop2[ ]
+    style start2 height:0px;
+    style stop2 height:0px;
+    start3[ ] ===>|watch| stop3[ ]
+    style start3 height:0px;
+    style stop3 height:0px;
+  end
+  subgraph Type
+    direction TB
+    ConsumerWidget((widget));
+    Provider[[provider]];
+  end
+
+  weatherStateProvider[["weatherStateProvider"]];
+  weatherServiceProvider[["weatherServiceProvider"]];
+  yumemiWeatherClientProvider[["yumemiWeatherClientProvider"]];
+  WeatherForecast((WeatherForecast));
+  WeatherPage((WeatherPage));
+
+  weatherStateProvider ==> WeatherForecast;
+  weatherStateProvider -.-> WeatherPage;
+  yumemiWeatherClientProvider ==> weatherServiceProvider;
+```

lib/main.dart

@@ -1,8 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_training/view/launch_page.dart';
 
 void main() {
-  runApp(const MainApp());
+  WidgetsFlutterBinding.ensureInitialized();
+  runApp(
+    const ProviderScope(
+      child: MainApp(),
+    ),
+  );
 }
 
 class MainApp extends StatelessWidget {

lib/model/weather_data.dart → lib/model/weather_forecast.dart

@@ -1,19 +1,19 @@
 import 'package:flutter_training/model/weather_condition.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
-part 'weather_data.freezed.dart';
+part 'weather_forecast.freezed.dart';
 
-part 'weather_data.g.dart';
+part 'weather_forecast.g.dart';
 
 @freezed
-class WeatherData with _$WeatherData {
-  const factory WeatherData({
+class WeatherForecast with _$WeatherForecast {
+  const factory WeatherForecast({
     required WeatherCondition weatherCondition,
     required int maxTemperature,
     required int minTemperature,
     required DateTime date,
-  }) = _WeatherData;
+  }) = _WeatherForecast;
 
-  factory WeatherData.fromJson(Map<String, dynamic> json) =>
-      _$WeatherDataFromJson(json);
+  factory WeatherForecast.fromJson(Map<String, dynamic> json) =>
+      _$WeatherForecastFromJson(json);
 }