| 結果一覧(light) | 結果一覧(dark) |
|---|---|
 |
 |
| 詳細(light) | 詳細(dark) |
|---|---|
 |
 |
| 結果なし | エラー | 通信エラー |
|---|---|---|
 |
 |
 |
デモ
2023-07-27.11.53.12.mov
- 何かしらのキーワードを入力できる
- 入力したキーワードで GitHub のリポジトリを検索できる
- 検索結果は一覧で概要（リポジトリ名）を表示する
- 検索結果のアイテムをタップしたら、該当リポジトリの詳細（リポジトリ名、オーナーアイコン、プロジェクト言語、Star 数、Watcher 数、Fork 数、Issue 数）を表示する
- エラー発生時の処理
- 画面回転・様々な画面サイズ対応
- Theme の適切な利用・ダークモードの対応
- 多言語対応 (英語、日本語)
- 検索結果の並び替え
- IDE: Android Studio Electric Eel | 2022.1.1
- Flutter: 3.7.9
- Dart: 2.19.6
- サポートするプラットフォーム →iOS/Android
flutter_riverpod: ^2.3.2
- GitHub ActionsによるCI
- flutter_riverpod -状態管理
- freezed_annotation -freezedファイル生成
- http -apiの実装
- intl -言語、数字の成形
- json_annotation -jsonの変換
- shimmer -ロード画面の実装
- shared_preferences -テーマの保存
- flutter_localizations -多言語対応
- device_preview -各サイズの画面でUIの確認
- flutter_launcher_icons -アプリアイコン
- visibility_detector -レンダリングを感知、ページングに使用
----dev----
- flutter_test -テスト
- flutter_lints -静的解析
- build_runner -ファイルの生成
- freezed -immutableなクラス作成、json変換を簡単に
- json_serializable -jsonの変換
- mockito -データをモック化してテスト
- import_sorter -importの整列
- integration_test -統合テスト
・CODE WITH ANDREA を主に参考にしました
＊Application層は今回ない
├── lib
│ ├── main.dart # アプリのエントリーポイント
│ ├── domain # ドメイン、データのモデル定義
│ ├── constant # 今回はアプリ内で使う色を定義
│ ├── repository # httpでの外部とのやりとり、メソッドの定義
│ ├── generated # 多言語ファイル生成用のディレクトリ
│ ├── l10n # 多言語対応
│ ├── theme # テーマの提供、永続化
│ ├── provider # 状態を管理
│ ├── presentation # 見た目
│ ├── detail # 詳細ページ（widgetも含む）
│ └── search # 検索ページ（widgetも含む）
・クローン
git clone https://github.com/mqkotoo/github_search_study.git
・fvm読み込み
fvm install
・依存関係を読み込む（多言語対応も読み込まれます）
fvm flutter pub get
・freezed等のコード生成
fvm flutter pub run build_runner build -d
・ビルドラン
fvm flutter run
- データモデルの変換テスト
- データ取得メソッドのテスト
- テーマのテスト（初期状態、切り替え、テーマの記憶）
- 多言語対応のテスト
- 通信がない状態で適切にエラーハンドリングされているかのテスト
- 空文字でエラーが返るかテスト
- 通信、空文字以外のエラーがUIで正常に処理されているか（今回の場合はリクエスト過多が基本）
- ワード検索したら、想定の内容が表示されるか
- 画面遷移後に想定の内容が表示されるか
- ソート機能のテスト
- 検索フォームのテスト
- 検索ワードの入力、検索結果をタップすると画面遷移することを確認
- ワード検索したら、想定の内容が表示されるか
- 画面遷移後に想定の内容が表示されるか
- ウィジェットテストだけでなく、device_previewを使っていろんな画面の大きさでも画面が崩れないか
- 各画面で視認性が落ちていないか
- OSの仕様で崩れていないか
- 横画面になっても崩れないか
- 特に横画面でSafeAreaを干渉していないか
- ユーザーの端末の設定でテキストが大きくなっても画面が崩れないか
- 多言語対応に関して、タイポがないか
- 表現がおかしくないか
- 他の言語にしても画面が崩れないか
developもしくはmainブランチにプルリクエストが出された時に発火する- インポートがeffective dart推奨のように整列されてあるか
- フォーマットが崩れていないか →基本的には保存時に自動フォーマットしています。
- build_runnerでのファイルの生成
- 静的解析に引っかかっていないか
- テストを全て通過するか
- iOSビルド、ファイルのアップロード
- issueドリブンで開発をしました。
- プルリクエストベースで開発をして、安全に運用しました
- FutureProviderを使ってパフォーマンスを意識した
- 一回でのリストの取得数を減らして表示速度を早くした
- いろんな大きさの画面でも崩れないUIを意識しました
- 検索結果の並び替え機能をつけました
- GitHub上で見れるようにリンクを設けました
- 可読性を意識して、widgetの切り分けをしました
- コメントで読みやすいようにしました
- シンプルで使いやすい、スタイリッシュなデザインを意識しました
- ユーザーが次のアクションがわかりやすいよう、ロードをshimmerにしました（スタイリッシュでもある）
- あえて、スプラッシュ画面を入れませんでした（iPhoneのメモアプリなど、簡単にすぐ使いたいものには入れない方が良いと思う）
- 多言語対応は他のアプリに倣ってアプリ内では操作できないようにした
- アーキテクチャの理解が甘いため、もっと勉強する必要がある
- CIをつかってテストを初めてやってみたが、便利さが感じられて、品質を保証しやすいなと思った
- テストコードを初めてちゃんと書いたので、コードの書き方で不備や無駄、どこをどれくらいの粒度でテストするかなどは、まだ勉強していく必要がある
- 1機能に1テストできるだけ書くことを意識したんですが、コードが変わってもアプリが動くことをテストできて安全に開発を進めることができることを感じたので、これからも続けていきたいとおもった
アニメーションにはLottieFilesを使用しました。
使用させていただいた、アニメーションは以下です。