第一週的最終章~擦啦！昨天完成了一個初始化的專案、一套清晰的架構藍圖，以及Riverpod這個強大的狀態管理核心。讓App像是一個擁有骨架的機器人，但它還沒有與世界溝通的感官。

今天的任務就是為它安裝上「耳朵」和「大腦的翻譯中樞」，接下來，將完成整個專案中最關鍵的一次連結測試：讓Flutter App首次呼叫我們在n8n中精心打造的Webhook API，並成功接收、解析回傳的數據。

步驟一：數據的翻譯官 —— 用Dart Model定義資料結構

n8n API回傳的是JSON格式的數據，它本質上只是一段文字。為了讓 Flutter/Dart能以型別安全 (Type-Safe)、程式碼友好的方式來使用這些數據，我們需要先建立一個「翻譯官」—— 一個 Dart 資料模型 (Data Model)。

這個Model的作用，就是告訴 App：「嘿，從 API 拿回來的數據，會長得像這個樣子，它有標題、有連結、有摘要...」。

根據昨天的架構，在lib/data/models/資料夾下，建立一個新檔案 inspiration_model.dart。

步驟二：專業的信差 —— 使用dio套件發出網路請求

• 安裝dio套件：有了翻譯官，我們還需要一位專業的「信差」去API那裡取回信件（數據）。雖然Flutter內建了http套件，但社群更廣泛使用的是功能更強大、更穩定的dio套件。它提供了更豐富的功能，如攔截器、取消請求、更完善的錯誤處理等。(這個昨天我也一同安裝好了)

• 建立 Datasource：在 lib/data/datasources/ 資料夾下，建立 inspiration_api_datasource.dart。這個檔案將專門負責所有與我們的n8n API互動的邏輯。

注意，這次裡面要使用n8n Production URL！

步驟三：通電測試 —— 在Console中見證奇蹟

譯官和信差都已就位，是時候進行第一次通訊測試了！我們將暫時修改lib/main.dart，加入一個按鈕，點擊它時就去呼叫 API，並將結果印在網頁的Console中。

總結與第一週回顧：

透過建立Dart Model和Datasource，我們的Flutter App成功地與n8n API進行了第一次對話，並理解了它傳回的數據。嗚呼～完成了第一週「後端建構與基礎奠定」的收官。

回顧這週，從一個靈感出發，搭建了n8n環境，建立了一套包含篩選、解析、AI摘要的完整自動化工作流，並最終將其封裝成一個穩定的 API。接著，我又初始化了Flutter專案，規劃了清晰的架構，並在今天，打通了前後端的任督二脈。

明日預告：用Flutter實現卡片UI

明天將進入30天做一個極簡App的第二週，專注於UI與互動體驗。我們將把今天還靜靜躺在Console裡的數據，變成螢幕上用戶可以滑動、可以互動的精美卡片。祝App誕生順利！

【哈囉你好：）感謝你的閱讀！其他我會常出沒的地方：Threads】