八年開源，GSY 用五種技術開發了同一個 Github 客戶端，這次輪到 AI + Compose

之所以 2025 了 GSYGithubApp 還能迎來 Jetpack Compose 版本的開源，主要還是依賴於 AI 的強大：github.com/CarGuo/GSYG…。

GSY 系列專案做早是從 2016 年開始做的開源，其中大家最為熟悉的應該是 GSYVideoPlayer，它也是維護至今最長的專案，而 GSYGithubApp 系列最早是在 2017 年 11 月開源，至今正好是八年，而近日這個專案也正式開源了 GSYGithubApp 的 Jetpack Compose 版本：

GSYGithubApp 誕生之初 Github 的官方客戶端還沒有出來，而當時因為做開源也有些時間，所以在日常中沒有一個應用其實挺不方便，正好那時候剛學 React Native 沒多久，所以 2017 年第一個 GSYGithubApp 就作為練手專案誕生了，之後陸續隨著接觸的技術棧變化，開源的版本也越來越多，它們開源的順序依次是：

• React Native github.com/CarGuo/GSYG…
• Weex github.com/CarGuo/GSYG…
• Android Kotlin View github.com/CarGuo/GSYG…
• Flutter github.com/CarGuo/GSYG…
• Android Jetpack Compose github.com/CarGuo/GSYG…

而其實隨著 Github 官方的 App 發布後，GSYGithubApp 存在的意義就變了：它更多是成為一個完整的技術學習專案，並提供同款技術對比的一個目的。

另外過去的時候，閒魚就曾用過 GSYGithubApp 的 React Native 版本和 Flutter 版本做過一些性能對比測試：

而之所以選擇做 Github 客戶端也是因為這個，這能讓它成為一個完整的 App 開源專案，Github API 相對穩定並且豐富，流程從登入，使用者，倉庫，Issue ，輸入輸出，資料庫等都能覆蓋，能讓開源專案涉及的內容更全面。

當然，個人經歷有限，隨著時間推移，其實 GSYGithubApp 在過去挺長的時間裡，除了 Flutter 版本外，其他版本都是處於「放（qi）生（keng）」狀態，直到 2025 AI 的能力大幅提升之後，它們才又迎來了更新：

• React Native 版本目前更新到 0.82 ，說實話就算是有 AI ，從 0.61 升級到 0.82 也是一個挺讓人「絕望」的體驗，詳細可見：用 AI 把一個五年前的 RN 專案，從 0.61.3 升級到 0.74.0 是一種什麼樣的體驗
• Android Kotlin View 版本，在 AI 的幫助下，終於成功升級到可以在最新 Android Studio 和 Gradle 環境運行
• Weex 版本，嗯，還是處於「放（qi）生（keng）」狀態，懂得都懂

所以在感受到 AI 強大的輔助能力後，我就覺得也許可以再來個 Jetpack Compose 版本的 GSYGithubApp 專案，而實際上零零散散開發直到開源，大概也就是兩週的時間，其中 80% 以上都是 AI 完成：

當然，這個速度主要也是因為需求明確，原型已經有了，給 AI 參考的資料就多了，基本上也算是熟悉的領域，大部分只需給 AI 投喂好資料，初始結構直接讓 AI 參考官方的 android/androidify 專案，制定好路線和方向，整體還是相當省心的：

當然，這裡面就不得不提開發過程中給 AI 指定 rules 的必要性，因為 AI 實際上很多時候並不會全局考慮你的專案結構，每次需求對他有限的 Context 來說，大多數時候都只會局限性的考慮問題，這時候在開發過程中根據 AI 的調性配置相應的規則還是很重要的，例如通用的模板和生成規則就很有必要：

這些規則不是說你一開始就要有，而是在 AI 開發過程中，在已經有一定程式碼的情況下，就可以讓 AI 讀取現有的結構去生成，還有就是 AI 的腦回路大多數時候只和它訓練時的數據綁定，所以有些新的東西，就需要你明說，一些它經常錯的東西，就需要你明確的羅列出來：

這裡大部分都是使用 Android Studio 的 Gemini for businesses 完成，部分是 Copilot Web Agent 和 Claude 完成，另外，新版的 Android Studio Otter 2 Feature Android Studio 的 Agent 模式也開始配備了 Android 知識庫，從而顯著提高準確性並減少錯誤信息。

這意味著，Agent 不再僅僅依賴於其訓練數據，而是可以在回答使用者問題之前主動查閱來自官方來源（例如 Android 開發者文檔、Firebase、Google Developers 和 Kotlin 文檔）的最新文檔。

當然，最終程式碼還是需要人審核，咱也不懂，為什麼它增加個多語言的時候，會刪掉某個標籤，加個 camera 做什麼？

當然，在這個過程裡，你還能見到嘴硬的 AI 開始推卸責任，不得不說 AI 的擬人化越來越真實：

而對於專案的架構，我們也可以透過 AI 來完成，例如 https://deepwiki.com/ ，只需要透過 https://deepwiki.com/CarGuo/GSYGithubAppCompose ，我們就可以得到一份專案的架構報告，並且你還可以透過它繼續詢問相關問題：

另外，透過 AI 我們也可以生成對應的結構實現，例如以下就是透過 Gemini 生成的手繪圖示例：

架構圖

┌─────────────────────────────────────────────────────────────────────────┐
│                          GSYGithubAppCompose                            │
│                       (Jetpack Compose + MVVM)                          │
└─────────────────────────────────────────────────────────────────────────┘
                                    │
                ┌───────────────────┼───────────────────┐
                │                   │                   │
        ┌───────▼────────┐   ┌──────▼──────┐    ┌───────▼────────┐
        │  Presentation  │   │    Data     │    │      Core      │
        │     Layer      │   │    Layer    │    │     Layer      │
        └────────────────┘   └─────────────┘    └────────────────┘
                │                   │                   │
        ┌───────▼────────┐   ┌──────▼──────┐    ┌───────▼────────┐
        │   feature/*    │   │    data     │    │  core/network  │
        │                │   │             │    │  core/database │
        │ - welcome      │   │ Repository  │    │  core/common   │
        │ - login        │   │   Pattern   │    │  core/ui       │
        │ - home         │   │             │    └────────────────┘
        │ - dynamic      │   │ - User      │
        │ - trending     │   │ - Event     │
        │ - profile      │   │ - Repo      │
        │ - search       │   └─────────────┘
        │ - detail       │
        │ - code         │
        │ - issue        │
        │ - push         │
        │ - list         │
        │ - notification │
        │ - info         │
        └────────────────┘

模組依賴關係圖

                                    ┌─────────┐
                                    │   app   │
                                    └────┬────┘
                                         │
                 ┌───────────────────────┼────────────────────────┐
                 │                       │                        │
          ┌───────▼──────┐         ┌─────▼─────┐          ┌──────▼──────┐
          │  feature/*  │         │    data   │          │   core/ui   │
          │             │         │           │          │             │
          │所有功能模組  │◄────────┤Repository │          │  通用UI組件  │
          │             │         │           │          │             │
          └───────┬──────┘         └─────┬─────┘          └──────┬──────┘
                 │                      │                       │
                 │              ┌───────┼────────┐              │
                 │              │       │        │              │
                 └──────────────┼───────┼────────┼──────────────┘
                                │       │        │
                    ┌───────────▼─┐  ┌──▼────────▼──┐  ┌─────────────┐
                    │core/network │  │core/database │  │core/common  │
                    │             │  │              │  │             │
                    │ Retrofit    │  │    Room      │  │ DataStore   │
                    │ Apollo      │  │    Entity    │  │   Token     │
                    │ Model       │  │    DAO       │  │  Resources  │
                    └─────────────┘  └──────────────┘  └─────────────┘
依賴規則：
  app          → feature/*, core/ui, data
  feature/*    → data, core/ui, core/common
  data         → core/network, core/database, core/common
  core/ui      → core/common
  core/network → (獨立模組)
  core/database→ (獨立模組)
  core/common  → (獨立模組)

技術架構圖

┌─────────────────────────────────────────────────────────────────────┐
│                         技術棧 (Tech Stack)                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  UI層                  Jetpack Compose + Material <span>3</span>                 │
│                        Navigation Compose                           │
│                        Coil (圖片加載)                               │
│  ├─────────────────────────────────────────────────────────────┤    │
│                                                                     │
│  狀態管理              StateFlow + ViewModel                         │
│                        Kotlin Coroutines + <span>Flow</span>                     │
│  ├─────────────────────────────────────────────────────────────┤    │
│                                                                     │
│  依賴注入              Hilt (Dagger <span>2</span>)                               │
│  ├─────────────────────────────────────────────────────────────┤    │
│                                                                     │
│  網路層                Retrofit <span>2</span> + OkHttp                           │
│                        Apollo GraphQL                               │
│                        Gson / Kotlinx Serialization                 │
│  ├─────────────────────────────────────────────────────────────┤    │
│                                                                     │
│  資料庫層              Room Database                                 │
│                        DataStore (替代 SharedPreferences)            │
│  ├─────────────────────────────────────────────────────────────┤    │
│                                                                     │
│  架構模式              MVVM + Repository Pattern                     │
│                        Clean Architecture                           │
│                        Unidirectional Data <span>Flow</span>                     │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

數據流向圖

┌──────────────┐        ┌──────────────┐        ┌──────────────┐
│              │        │              │        │              │
│   Screen     │◄───────┤  ViewModel   │◄───────┤  Repository  │
│  (Compose)   │ State  │   (MVVM)     │  <span>Flow</span>  │   (Data)     │
│              │        │              │        │              │
└──────┬───────┘        └──────┬───────┘        └──────┬───────┘
       │                       │                       │
       │ User Action           │ Business Logic        │ Data Source
       │                       │                       │
       ▼                       ▼                       ▼
┌──────────────┐        ┌──────────────┐        ┌──────────────┐
│              │        │              │        │              │
│   onClick    │───────►│  <span>loadData</span>()  │───────►│  Network /   │
│   onRefresh  │ Event  │  <span>refresh</span>()   │ Call   │  Database    │
│              │        │              │         │              │
└──────────────┘        └──────────────┘        └──────────────┘

數據流：

1. 使用者操作觸發 UI 事件
2. ViewModel 處理業務邏輯
3. Repository 協調數據源（網路/資料庫）
4. 數據透過 <span>Flow</span> 返回到 ViewModel
5. ViewModel 更新 UiState
6. UI 自動重組顯示新狀態

分層職責

可以看到，AI 確實可以大大提高開發的效率，不僅「救活」了已經荒廢的老專案，在新專案的迭代上也起到了很大的幫助，這也是為什麼 2025 了還能有 GSYGithubAppCompose 的原因。

事實上現在 GSYGithubApp 系列專案存在的意義也就是學習和對比，而 GSYGithubAppCompose 的意義，還體現在 AI 的應用和專案維護上，如何更好使用 AI 去維護一個專案，這對於程式員來說，還是有一定的必要的，畢竟 2025 作為開發者，真的離不開 AI。

當然，如果你是 Android 原生開發，還沒用上 Compose ，那 GSYGithubAppCompose 或者也值得了解下？畢竟如果 Compose 會了，約等於 Compose MultiPlatform 也會了不是麼？當然，你也可以說，AI 會就行🤭 。

最後

最後，借著 AI 的風，這次也把所有專案的 Logo 形象都統一，從五個 GSYGithubApp ，到 gsy_flutter_book 文章合集專案，再到 GSYVideoPlayer 播放器和 gsy_flutter_demo 示例專案，現在全都統一使用這個 logo ，雖然沒什麼設計感，但是我很滿意：

再結合 AI ，一個看起來很顛的視頻效果就這麼出來了：

連結

• github.com/CarGuo/
• github.com/CarGuo/GSYG…

原文出處：https://juejin.cn/post/7585645111876632603