關於

距離 Flutter Formosa 2024 已經過了一段時間，Flutter Formosa 2024 是台灣第一次的 Flutter 研討會，有許多業界的大佬演講，很高興能夠報名參加，雖然交流時間我都只敢待在自己座位上偷聽(?)但是還是在精彩的演講中學到許多，得到很多寶貴的經驗，尤其是 Web 開發的部分特別有共鳴。

概要與心得

挑選了幾篇比較有興趣的演講做整理。

利用 ATDD 改善開發流程

這個演講邀請到了負責 LINE 購物 APP 開發的 Technical Project Lead，主要在分享透過 ATDD (驗收測試驅動開發) 來幫助改善開發流程。

重點

使用 ATDD 之前可能會遇到的問題：

Long-lived Feature Branches：跨 sprint 的功能開發，功能完成才 merge。
- 合併時出現大量的衝突。
- 解決衝突耗費且易出錯。
遺漏撰寫 Unit Tests：優先開發功能，接著才撰寫 unit tests。
- 難以保證程式碼品質。
- 難以及時發現錯誤。
- 降低程式碼的可維護性。

而兩個問題的解決的方向如下：

Long-lived Feature Branches
- 利用驗收標準 (Acceptance Criteria, AC) 將 user story 拆解更小且可驗證的 subtasks。
- 使用 feature toggle 保護 merge 回 main 的 PRs。
遺漏撰寫 Unit Tests
- 功能的 PRs 一定要包含 unit tests。
- Test-Driven Development (TDD)。

ATDD (驗收測試驅動開發) 就是結合了 驗收標準 (AC) 以及 Test-Driven Development (TDD) ，強調在開發人員開始撰寫程式碼之前撰寫驗收測試，並將 user story 依照 驗收標準 (AC) 拆解成一個一個部份處理，因為每個 AC 的改動不大，因此開發之後可以放心的 merge，並且每個部份也都包含了 unit tests。

ATDD 的優點：

明確的開發目標和流程一致性。
可操作且人性化的測試敘述。
縱向測試覆蓋和驗收標準對應性。
減少測試窮舉。

名詞解釋

hybrid app：演講中提到 LINE 購物 APP 是 hybrid app，指的是原生App和Web App 的結合體，首頁和搜尋等功能是 native 的畫面，而點進去產品則是使用 WebView 來顯示。
Unit Tests：針對程式模組來進行正確性檢驗的測試工作，程式單元通常是指單個程式、函式、過程等，也有可能是針對某個特定功能做測試。
feature toggle：軟體開發中的一種技術，可以在在執行程式期間隱藏、啟用或禁用特定功能進行測試 (像是一個開關)，而其他使用者不會被啟用該功能和受到它的影響。
PRs：Pull Request，請求合併。
驗收測試：從系統的外部視角做檢查，確保產品符合業務需求和用戶期望，通常包含 Given (前提條件)、When (操作) 以及 Then (預期結果)。

AI x Flutter 新時代的交互體驗

此演講由 KryptoGO 的 Flutter Team Lead 主講，提到了如何將 LLM 與 Flutter 結合使用。

重點

集成型 AI (ex: Github Copilot, Memo, Cursor)
- 語言的局限性終究會帶來 UX 體驗的破壞

要將 AI 整合進入產品中，主要有兩個面向，改善輸入方式 和 提升輸出質量。
改善輸入方式：

自然語言輸入：簡化操作步驟。
- 語音輸入 (ex:Speech to Text, Whisper package)。
多模態輸入：支持文本、語音、圖片等多種輸入方式。
- 語音輸入的不同語調。
- 圖片輸入：OCR 判斷人物情緒或是環境訊息。
意圖釐清：協助使用者提升輸入的質量。
- 可以幫助用戶釐清自己的問題，甚至讓用戶得到意料之外的答案。

提升輸出質量：

優化 AI 輸出：Fine Tune。
- 優化 System Prompt
  - 明確定義角色和目標。
  - 設定行為準則。
  - 指定輸出格式。
  - 設置知識範圍。
  - 錯誤處理指南。
- Fine Tune 模型
  - 準備高質量對話範例進行訓練。
動態畫面渲染。
- 配合 dynamic_widget library，可以實時的讓 AI 幫我們產生 widget。
- 優點：可以隨時生產新畫面。
- 缺點：畫面、風格不容易控制。
Function Call：與 AI 功能串連。
- 賦予 AI 可以去呼叫的程式中的方法的能力 (ex: Rive 互動式動畫)。

架構建議：AI 進步的速度實在太快，盡量讓設計可以多兼容更多 AI 模型。

名詞解釋

UX：User Experience，使用者體驗。
System Prompt：系統指令或背景設定，定義 AI 助手的行為、知識範圍、人格特徵等。

關於 Mobile Developer 用 Flutter 去寫 Web 這檔事

這個演講主要關於使用 Flutter 去寫 Web 的一些細節與開發軟體的差異等。

重點

網頁前端不能隨便打後端的 API - CORS error
- 解決方式：
  - ```
  flutter run -d chrome --web-browser-flag "--disable-web-security"
```
- 將網頁框架改為 html。
麵包屑 - 導覽標記。
瀏覽器的分頁功能引發問題
- 多個分頁重複登入。
版面設計
- 必須滿足不同分頁大小。
善用開發者工具 (DevTool)
- 看 print
- 看 API call
- 看 shared preferences