Best Search(ベストサーチ)
- Best Searchではユーザが入力したキーワードでGitHubのリポジトリを検索することができます。
- 検索して取得したリポジトリのデータは、詳細画面で確認することができます。
- ディスプレイモード(ライト・ダーク)にも対応しており、設定を保存することができるため、アプリを終了しても次回起動時に設定を引き継ぐことができます。
デモ動画
環境
- Flutter 3.3.0 • channel stable • https://github.com/flutter/flutter.git
- Framework • revision ffccd96b62 • 2022-08-29 17:28:57 -0700
- Engine • revision 5e9e0e0aa8
- Tools • Dart 2.18.0 • DevTools 2.15.0
対象 OSバージョン
| OS Version | |
|---|---|
| iOS | 11.0 ~ 15.2 |
| Android | 4.1 ~ 12 |
Flutter SDK 3.3.0(stable)の更新に伴い、iOSの最小対象OSバージョンのテンプレートが11.0に引き上げられました。 私の実行環境では、OS Version 9.0の環境を用意することができなかったため、テンプレート通り11.0に設定しました。m( )m
実行方法
-
本プロジェクトではfvmを使用しているため、fvmをインストールされている方はinstallコマンドがご利用できます。
fvm installそれ以外の方は、Flutter SDKを3.3.0(stable)に設定していただけますよう、よろしくお願いします。
-
git clone で取り込む
git clone git@github.com:trm11tkr/github-repo-search.git -
本プロジェクト下でflutter clean
flutter clean -
本プロジェクト下でflutter pub get
flutter pub getAndroid
-
ビルドを指定してfutter runを実行(引数なしの場合debugでビルドされます)
- release
flutter run --release
- release
- debug
flutter run --debug
iOS
- App Silicon Macをお使いの方(Intel Macの方は6に進んでください)
- iosディレクトリに移動
cd ios - Rosetta2経由でpodをinstall
arch -x86_64 pod install - Runner.xcworkspaceを開いて
- iosディレクトリに移動
- TargetsのRunner -> Signing & CapabilitiesのTeamを設定
- 署名をご自身のApple IDに設定
- ビルドを指定してfutter runを実行(引数なしの場合debugでビルドされます)
- release（シミュレータの方は実行できません）
flutter run --release
- release（シミュレータの方は実行できません）
- debug
flutter run --debugアプリの詳細
アプリ名
ローカル設定 アプリ名 ja ベストサーチ en Best Search
アプリアイコン
各画面
GitHubリポジトリ
| リポジトリ一覧 | リポジトリ詳細 |
|---|---|
 |
 |
GitHubリポジトリ(ダークモード)
| リポジトリ一覧（ダークモード） | リポジトリ詳細（ダークモード） |
|---|---|
 |
 |
ソートモード選択
| iOS | Android |
|---|---|
 |
 |
その他
| 検索結果が0件 | 初回エラー画面 | 設定画面 |
|---|---|---|
 |
 |
 |
横画面対応
| 検索画面 | リポジトリ詳細画面 |
|---|---|
 |
 |
| 設定画面 | 検索結果0件画面 |
 |
 |
多言語対応(en, ja)
| 一部のみ抜粋 | レポジトリ一覧(en) | リポジトリ詳細(en) | 設定(en) |
|---|---|---|---|
 |
 |
 |
アニメーション
- タイルをタップすると、ディスプレイモードの変更と共にアイコンが1回転します。
アピールポイント
コーディングにおいて
- Issueやプルリクエスト、コメントなど、レビューしていただくことやチーム開発などを意識しました。
- ローカルDB(SharedPreferences)を活用しました。
- extensionをたくさん活用しました。
- apiエラーのハンドリングを丁寧に行いました。
- いくつか、今回のプロジェクトで初めて挑戦してみました。
- GitHub Actionsによる静的解析
- 多言語対応
- API通信によるページング処理
UI/UX
- 言語の色をGitHubで設定されているものを利用することでUIがすごく向上したと思います。
- アニメーション。
- ページング処理においてローディングやエラー時にユーザに煩わしさを感じさせない挙動を意識しました。
- 検索画面における横画面はどうしても圧迫感があるので、AppBarを非表示にしました。
- 詳細画面のデザインにこだわりました。（是非横画面にしてみてください！）
- 並び順をユーザが選択できるようにしました。