Engineering Field Report

一個人 + AI agent 交付完整商業 App

從 PRD、API、後台、iOS、Android 到 QA 回報修正,把「跨平台團隊」壓縮成一套可驗證的 agent workflow。

1人類負責決策、驗收與收斂問題
2行動平台:TestFlight 與 internal test
3主要產品面:API、後台、App 端
4核心技術棧:Go、Web、Swift、Kotlin
AI
System Complexity

它不是單一 app,而是一組互相牽動的產品系統。

Admin後台頁面、權限、訂單、內容與營運管理
APIApp API、Admin API、Auth、付款 callback
iOSSwift app、Figma 對齊、TestFlight 發佈
AndroidKotlin app、Swift 邏輯轉譯、internal test 發佈
$ delivery-surface --list
admin-api / app-api / auth / payments / admin-web / ios / android / qa-loop / deploy
Feature Map

功能面一展開,agent 要處理的是完整營運後台與使用者流程。

商品與課程

方案、首購方案、課程、期課、匯入、日曆、課程選項

交易與營運

購物車、金流結帳、付款 callback、訂單、電子發票、優惠、退款狀態

人員與權限

用戶、老師、場館、後台使用者、角色、稽核紀錄

延伸流程

預約、簽到、租借教室、設備、活動報名與票券

CRUD 不是終點 跨資源關聯 付款與訂單狀態 電子發票串接 營運例外處理 行動端一致性
Commerce Loop

真正的複雜度在「可以收錢、開發票、對帳、處理例外」。

Checkout

App 端送出購物車、付款方式與發票資料,後端建立訂單與 payment。

Payment Gateway

串接第三方金流,支援信用卡、ATM、超商代碼/條碼等付款資訊。

Callback

接收付款結果、驗證來源、記錄原始 callback、更新付款與訂單狀態。

Fulfillment

付款成功後發放方案、更新使用權益,並讓後台可查詢與追蹤。

電子發票

個人、公司戶、會員載具、手機條碼、自然人憑證,開立失敗要可追蹤。

後台營運

訂單列表、付款狀態、金流編號、發票狀態、作廢與例外處理。

測試難點

金流 callback、發票加解密、非同步狀態、0 元訂單、取消與退款情境。

Tech Stack

技術選型沒有追求炫技,重點是 agent 能理解、能 build、能測。

面向
API
後台
iOS
Android
語言
Go
HTML / CSS / JavaScript
Swift
Kotlin
框架
Gin / GORM
jQuery / Bootstrap style
UIKit / native app
Native Android
驗證
unit test / curl
agent-browser E2E
build / simulator screenshot
build / emulator screenshot
發佈
GitHub Actions
同 API deployment
TestFlight
Internal test
Thesis

重點不是「AI 幫忙寫 code」,而是把交付流程設計到 agent 可以接手。

可部署、可測試、可回報、可切任務,agent 才能從工具變成協作者。
PRD to task Parallel agents Local API tests Browser E2E Simulator screenshots Asana QA loop
Prerequisite 1

先把 API 與後台部署自動化,agent 才能交付到可測環境。

push main

GitHub Actions

主分支觸發部署流程,避免人工 SSH 上機操作成為瓶頸。

fetch

EC2 checkout

伺服器拉最新 main,確保環境與 repo 狀態一致。

deploy

Blue-Green

用部署腳本切換服務,降低發佈風險。

verify

Health check

部署完成後用服務狀態與 logs 追蹤問題。

Prerequisite 2

行動端也要能自動送測,不然 agent 做完還是回到人工發包。

iOS
  • Build archive
  • 簽章與版本號處理
  • 上傳 TestFlight
  • QA 可直接拿最新 build
Android
  • Gradle build
  • 產生測試版 artifact
  • 送 Google Play Console internal test
  • 讓跨平台修正能快速驗收
$ mobile-release-loop
code -> build -> upload -> QA install -> Asana feedback
Automation Flow

整個工作流程是一張自動化 flow chart,不是單次 prompt。

Google Doc PRD產品需求、流程、規格與驗收方向
Split Tasks拆成 API、Admin、iOS、Android、QA 任務
Asana Queue任務狀態、留言、附件、驗收條件
Agent Dispatchagent 讀 task,決定進 API / Admin / Mobile repo
Implement改 code、補測試、接 API、處理 UI 狀態
Local Verifyunit test、curl、browser E2E、simulator screenshot
Push Codecommit / push 觸發平台部署
Auto DeployAPI/Admin、TestFlight、internal test
QA Install & Test測試最新 build,回報問題到 Asana
Clarify / Fix模糊則追問,清楚則回到 agent 修正
Ready狀態移動、comment 完成、交回驗收
repo-aware execution
deployable output
feedback returns to Asana
Input Pipeline

需求不是丟給 agent,而是進入一個可重跑的開發 cycle。

Task
Operating
System
PRDGoogle Doc 定義需求與流程
Split切 API / Admin / iOS / Android
Asana任務、驗收、狀態集中
Agent讀任務、搜尋 repo、實作
Verify測試、截圖、E2E 回饋
Refine補問、修正、更新任務
Cycle 的目的

把模糊需求轉成 agent 能執行、能驗收、能回報的工程單位。

人類的位置

決定優先序、判斷 tradeoff、處理模糊需求,不負責逐行操作。

Agent 的位置

在明確邊界內讀 code、改 code、跑測試、回報結果。

Parallel Work

Agent 分頭做,但靠相同任務系統與測試訊號收斂。

讀 Asana

理解需求、留言、附件、驗收條件。

建立 API

model、migration、handler、service、unit test。

建立後台

頁面、表單、狀態、API 串接、權限。

本地驗證

curl + local API + agent-browser E2E。

$ agent task inspect
scope: backend + admin
checks: go test ./... / curl / browser e2e
Backend/Admin Loop

後台不是「看起來有畫面」就完成,而是要用瀏覽器跑完整 E2E。

Code建立 API contract、service、handler、後台頁面。
Unit測核心邏輯、資料狀態、邊界條件。
curl打 local API 驗證 request、response、錯誤碼。
Browseragent-browser 操作後台,測表單與真實 UI。
Patch把失敗案例回饋成下一輪修正。
$ verify-admin-change
go test ./internal/...
curl localhost/api...
agent-browser run scenario...
Simulator Build

本地 build 模擬器的目的,是讓 agent 取得「實際 rendering」而不是猜 UI。

Select Device固定 iOS simulator / Android emulator,避免截圖尺寸與字體差異。
Build用 Xcode/Gradle 編譯 debug build,確認 code 真能跑。
Install把 app 安裝到 simulator/emulator,清狀態或保留登入狀態。
Drive用 Maestro 走到指定畫面,處理權限、登入、popup。
Capture截圖、log、失敗點一起回給 agent 修正。
$ local-visual-check
build debug -> boot simulator -> install app -> run Maestro flow -> capture screenshot
iOS Phase 1
Figma-driven first pass
Native Swift implementation

用 Figma API 抓圖與規格,第一輪可以做到約 70%。

Layout、色彩、字級、間距、元件階層,多數能被 agent 從設計稿推導出來;真正卡的是細節與狀態。

Prompt Bottleneck

前期靠人類下 prompt 微調 UI,成本很快升高。

70%

第一輪很快

但越接近設計稿,越需要精準描述差異。

問題不是 agent 不會改,而是 feedback 太主觀
  • 「再往下一點」不等於可驗證需求
  • 人類很難完整描述 spacing、alignment、state 差異
  • UI 微調容易在同一 session 內反覆繞圈
  • 缺少客觀截圖比對時,agent 容易自認完成
iOS Phase 2

後期改成 build 模擬器截圖,再跟 Figma 比對後回饋修正。

Visual
Feedback
Loop
Figma目標畫面與規格來源
Build編譯 Swift app 到 simulator
Capture抓實際 rendering 截圖
Compare列出 spacing / state 差異
Patch修 constraints、字級、狀態
Repeat直到差異可接受

把「感覺不像」變成「這些像素、狀態、元件不一致」。

$ visual-loop
figma target -> simulator screenshot
compare -> actionable deltas -> patch
Android Strategy

Android 不是從零重做,而是讓 agent 讀 Swift code 轉 Kotlin。

輸入

iOS 已完成的畫面結構、API flow、狀態機、文案與 edge cases。

輸出

Kotlin native implementation,完成度約 90%,再靠 emulator 截圖修細節。

$ translate-platform --source swift --target kotlin
reuse: api contract / view state / copy / validation
rebuild: native layout / navigation / platform behavior
Android Loop

完成度 90% 後,剩下 10% 通常是平台細節與視覺誤差。

Build emulator

確認 Kotlin code 可以實際跑,不只停在靜態編譯。

Screenshot diff

對照 Figma 與 iOS 行為,找出間距、scroll、dialog、表單狀態差異。

Regression pass

用 Maestro 或人工 QA 流程覆蓋核心路徑。

Kotlin Gradle Emulator Screenshot feedback Internal test
iOS Build Details

iOS 有兩條 build 路徑:本地模擬器驗證,以及 CI 簽章上 TestFlight。

Local simulator

選固定 Xcode 與 simulator,build debug app,安裝後用 Maestro 走畫面並截圖。

Release build

CI 選 Xcode、安裝 certificate、provisioning profile、App Store Connect API key。

Fastlane

更新 build number、設定 manual signing、build app,最後 upload TestFlight。

$ ios-release-pipeline
xcode-select -> keychain/cert -> provisioning profile -> fastlane build_app -> upload_to_testflight
Android Build Details

Android 同樣分成本地 emulator 驗證,以及 CI 產 AAB 發 internal test。

Local emulator

用 Gradle build debug/release variant,安裝到 emulator,再用 Maestro 跑 E2E 與截圖。

Release AAB

CI 設 JDK 17、Gradle cache、解 google-services 與 release keystore,執行 bundleRelease。

Internal test

把 AAB artifact 上傳到 Google Play internal track,QA 從測試通道安裝。

$ android-release-pipeline
setup JDK 17 -> decode secrets -> ./gradlew bundleRelease -> upload AAB -> internal track
Build Pain Points

Build 模擬器很有用,但它本身也會製造 context 與穩定性問題。

環境漂移

Xcode 版本、iOS runtime、Android SDK、JDK、Gradle cache 不一致,都可能讓 agent 追錯問題。

簽章與 secrets

release build 需要 certificate、profile、keystore、API key;本地 agent 通常不能直接碰完整機密。

時間成本

clean build、啟動模擬器、安裝 app、跑 E2E 都慢,容易拖長 feedback loop。

做法

把 build 指令、裝置、API 環境、測試帳號、Maestro flow 都固定化,讓 agent 少做猜測。

取捨

小 UI 改動可用局部 build + 截圖;高風險交易流程才跑完整 E2E 與發佈驗收。

App E2E

App E2E 用 Maestro 跑真機型流程,目標是驗證「使用者真的走得完」。

Launch清狀態啟動 app,處理通知權限與 debug login。
Navigate等首頁、切 tab、進購買點數或課程詳情。
Interact點方案、滾條款、同意 popup、填表單。
Assert等待文字、確認狀態、檢查關鍵 UI 出現。
Capture每個重要節點截圖,失敗時回給 agent 分析。
$ maestro test
launchApp -> Debug Login -> 首頁 -> 購買點數 -> 結帳 -> 發票資訊 -> ECPay WebView
E2E Coverage

真正有價值的 E2E,是挑會跨系統的高風險路徑。

登入與首頁

debug login、首頁載入、通知權限、tab navigation,先確認 app 可操作。

課程與預約

課程詳情、期課顯示、點數 popup、取消紀錄,測 API 資料與 UI 狀態一致。

結帳與發票

購買點數、條款 popup、個人/公司戶發票、載具欄位、ECPay WebView。

iOS

流程可深入到金流信用卡表單,填卡號、效期、CVV、姓名、手機與 email。

Android

流程進到 ECPay WebView 即截圖停止,避免在 production-like 環境真的扣款。

共同策略

用截圖當 proof,讓 agent 能看實際畫面,而不是只看文字 log。

E2E Demo

Demo:用 E2E test 自動輸入第三方支付頁資訊。

Maestro payment flow
測試目的

確認 app 能從結帳進入第三方支付 WebView,並自動操作付款表單。

Agent 可用訊號

錄影搭配 Maestro flow、截圖與失敗點,比單純文字描述更容易定位問題。

安全邊界

高風險付款流程要明確定義停在哪一步,避免測試環境與正式環境混淆。

E2E Difficulties

App E2E 最難的不是寫腳本,而是讓測試穩定、可重現、可解讀。

非同步與等待

首頁載入、API 回應、動畫、WebView 轉場都需要 extended wait;等太短 flaky,等太長拖慢 feedback。

第三方 WebView

金流頁 DOM 不受 app 控制,文字可能變、popup 可能擋住、測試環境提示會中斷流程。

資料與環境

測試帳號、方案資料、付款狀態、發票欄位、build 指向的 API 都會影響結果。

Agent 常見卡點

看到錄影或失敗截圖,但不知道當時帳號狀態、API payload、前一步是否真的成功。

改善方式

每段 flow 都留 screenshot、使用穩定文字/id、把測試停在安全邊界,並把環境條件寫進 ticket。

QA Loop

QA 回報進 Asana,agent 再把修正流程跑完。

QA
Repair
Loop
ReportQA 回報問題與截圖
Analyzeagent 定位 API / Admin / App
Clarify模糊時 comment 追問
Fix修正並補測試
Deploypush 觸發自動部署
Update移動 Asana 狀態並回覆
模糊 ticket 不硬做

agent 先 comment 追問,避免修錯方向。

修正不等於完成

要測試、push、等自動部署,再交回 QA。

Asana 是狀態機

任務狀態、測試結果、回覆紀錄形成下一輪輸入。

Delivery Loop

每次修正都要回到部署與 ticket 狀態,否則只是本地改好了。

Commit

留下清楚變更與測試紀錄。

Push

觸發 API、後台或 app 發佈流程。

Monitor

確認 GitHub Action 與部署結果。

Asana update

移動狀態,comment 說明修正與驗證方式。

$ close-ticket
tests: passed
deploy: completed
status: ready for QA
comment: fixed + verification notes
Main Limitation

Agent 的品質高度依賴 context;context 不夠,後面都會歪掉。

!

最大風險

任務資訊不足時,agent 會用推測補洞;看似有做事,但方向可能一開始就錯。

$ task context check
asana: expected behavior missing
video: hard to map tap path to code state
reproduction: not deterministic
warning: agent fills gaps with assumptions
result: lower-quality fix or wrong target
Context Failure Modes

前期品質不穩,常常不是 code 能力問題,而是任務理解不足。

Asana ticket 太薄

只有一句「這裡怪怪的」或缺少 expected / actual,agent 很難判斷要改產品邏輯還是 UI。

錄影不好吃

影片能看到現象,但不一定能抽出可重現步驟、資料狀態、裝置條件與觸發點。

缺少定位資訊

沒有頁面、帳號狀態、API payload、截圖時間點,agent 只能靠搜尋與猜測補 context。

$ better-ticket-template
expected / actual / steps / account state / screenshot / API payload / target build
Experiments

試過兩種補強驗證的方法,各有代價。

Sub-agent 跑測試
  • 速度快,可在同一輪開發平行執行
  • 適合 local API test 與後台 E2E
  • 但上下文仍接近,盲點可能相似
另一個 agent pull 後驗收
  • 品質較好,像真正 reviewer / QA
  • 能從乾淨環境重跑測試
  • 但時間成本很高,不適合每張小 ticket
Takeaways

AI agent 可以放大獨立開發者,但前提是工程流程先被設計好。

1. 自動化是地基

沒有自動部署與可重跑測試,agent 寫得再快也很難可靠交付。

2. 任務要可驗收

PRD 要拆成具體 Asana task,並帶有完成定義與測試路徑。

3. 回饋要客觀

截圖、E2E、curl、CI 狀態,比主觀 prompt 更能讓 agent 收斂。

人類從寫每一行 code,轉成設計約束、檢查結果、決定取捨。
Closing

下一步不是更多 prompt,而是更好的交付系統。

把需求、測試、部署、QA、回報全部做成 agent 能操作的介面,才是讓一個人交付完整產品的關鍵。

$ final lesson
design the loop, then let agents run inside it
← back to /slides