The latest articles on DEV Community by Lettucech (@lettucech). https://dev.to/lettucech https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3375834%2Fc58d9a7b-8c3f-47c1-af5f-424ee9efac65.jpeg https://dev.to/lettucech en Lettucech Thu, 09 Oct 2025 08:56:09 +0000 https://dev.to/lettucech/tai-chang-bu-kan-ep2-android-mvi-yao-dian-25bl https://dev.to/lettucech/tai-chang-bu-kan-ep2-android-mvi-yao-dian-25bl <blockquote> <p>由 AI 協肋生成，文筆可能會有不順暢的情況出現。</p> </blockquote> <h1> 到底在說什麼？ </h1> <p>MVI (Model-View-Intent) 是 Android 複雜頁面或多人協作專案的<strong>頂級解方</strong>。</p> <ul> <li>核心精髓： UDF (單向數據流) 永遠只朝一個方向跑，確保狀態可預測。</li> <li>MVI = 狀態即真理： 整個畫面只依賴一個唯一的、不可變的 State 物件。</li> <li>現代化對應： <ul> <li>Intent：使用者在 Composable 上的所有動作。</li> <li>View Model：負責處理 Intent，並釋出新的 State。</li> <li>Composable：純粹的畫面渲染器 (Render)，只讀 State。</li> </ul> </li> </ul> <h1> MVI 的黃金循環 </h1> <p>MVI 就像一個不斷運轉的單向輸送帶，所有資料都不能逆流。</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpuhr1n21ydf1se87lb2o.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpuhr1n21ydf1se87lb2o.png" alt=" " width="800" height="187"></a></p> <h1> 簡短程式碼示例 (概念模型) </h1> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>物件</th> <th>從屬關係</th> </tr> </thead> <tbody> <tr> <td>ScreenState</td> <td>ViewModel</td> </tr> <tr> <td>ScreenEvent</td> <td>ViewModel</td> </tr> <tr> <td>ScreenIntent</td> <td>ViewModel</td> </tr> <tr> <td>ContentState</td> <td>View</td> </tr> <tr> <td>ContentIntent</td> <td>View</td> </tr> </tbody> </table></div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>元件</th> <th>資料流向</th> <th>關鍵實作</th> </tr> </thead> <tbody> <tr> <td>ViewModel</td> <td>發出 <code>ScreenState</code> / <code>ScreenEvent</code> </td> <td> <code>StateFlow</code> (持續狀態), <code>SharedFlow</code> (一次性事件)</td> </tr> <tr> <td>Screen Controller</td> <td>向下傳遞 <code>ContentState</code><br>向上傳遞<code>ScreenIntent</code><br>接收 <code>ScreenEvent</code> </td> <td> <code>LaunchedEffect(viewModel.event)</code><br><code>viewModel.onIntent(ClickDetails)</code> <br><code>viewModel.state.collectAsStateWithLifecycle()</code> </td> </tr> <tr> <td>View</td> <td>接收 <code>ContentState</code><br>發出 <code>ContentIntent</code> </td> <td><code>Button(onClick = { ... send Intent })</code></td> </tr> </tbody> </table></div> Lettucech Mon, 21 Jul 2025 18:55:19 +0000 https://dev.to/lettucech/tai-chang-bu-kan-ep1-android-app-architecture-ji-ben-pan-46ah https://dev.to/lettucech/tai-chang-bu-kan-ep1-android-app-architecture-ji-ben-pan-46ah <h1> 到底在說什麼？ </h1> <p>Android App Architecture，俗一點就是把各file分好職責，安放在合理的package內。即使個人project也建議應用，對project管理絕對有利。這裡已預設大家會使用MVVM或MVI pattern，如果不是的話...</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0qkvtgnlrlr9cu3nvcmk.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0qkvtgnlrlr9cu3nvcmk.png" alt="meme" width="800" height="314"></a></p> <h1> 為什麼需要？ </h1> <ul> <li>職責清晰。界面不對找UI，資料不對找repository。</li> <li>有利多人同時開發</li> <li>有利testing/mocking。<del>API還未上線也能開發。🥲</del> </li> <li>跟modularization相輔相乘</li> </ul> <h1> Project裡有什麼？ </h1> <h2> UI Layer </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>UI</td> <td>泛指<code>View</code>/<code>Fragment</code>/<code>Activity</code>/<code>Composable</code>等等。在Android世界，也有部份充當controller的角色。</td> </tr> <tr> <td>View Model</td> <td>管理state，執行business logic，從repository等等存取UI需要的資料。</td> </tr> </tbody> </table></div> <h2> Domain Layer </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>Model</td> <td>定義物件。如果App自己沒有很強的獨立世界觀，一般會跟services共用。</td> </tr> <tr> <td>Use Case</td> <td>提供封裝好的business logic，供不同的view model重用。</td> </tr> <tr> <td>Repository</td> <td>根據business需要，從service等存取資料。</td> </tr> </tbody> </table></div> <h2> Data Layer </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>名稱</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td>Service</td> <td>觸發API，存取database/cache等等。</td> </tr> </tbody> </table></div> <h1> 具體的例子呢？ </h1> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>src/ ├── MainActivity (coordinate all layers to make app works) ├── ui/ │ ├── CheckoutScreen │ └── CheckoutViewModel ├── domain/ │ ├── Cart (model) │ ├── CartRepository (interface) │ └── CalculateTotalAmountUseCase └── data/ ├── RemoteCartRepository (implementation) └── OrderService </code></pre> </div> <h1> 必需遵守clean architecture的原則，否則破功 </h1> <p>允許的關係只有:</p> <ul> <li> <code>MainActivity</code> -&gt; <code>ui/*</code> </li> <li> <code>MainActivity</code> -&gt; <code>domain/*</code> </li> <li> <code>MainActivity</code> -&gt; <code>data/*</code> </li> <li> <code>ui/*</code> -&gt; <code>domain/*</code> </li> <li> <code>data/*</code> -&gt; <code>domain/*</code> </li> </ul> <h1> 結尾 </h1> <p>現在，參照提供的例子，試想像一下當中每一個module是如何跟其他module溝通。它們的角色又是負責了什麼？看看自己有沒有真正理解好architecture!</p>