AI Agentic Coding Flutter Apps 開發證書課程
影片課程隨時開始。

教學如何透過指令安裝 NVM，並利用其管理與安裝特定版本的 Node.js。

解說如何在 Windows 進階系統設定中，將 Flutter 的 BIN 路徑加入系統環境變數。

在 VS Code 中開啟 Command Prompt，執行 OpenCode 檢查各項軟體是否正確安裝。

透過 VS Code 建立 test.dart 檔案，撰寫 Hello 程式並講解自動儲存功能。

教學如何使用 cd 指令在命令提示字元 (CMD) 中於各個資料夾層級之間切換。

修改 Dart 程式以接收使用者輸入，並運用 if 條件判斷使用者的年齡層。

介紹物件導向概念，使用 Class 定義生果與使用者，並將資料存入陣列結構中。

講解如何使用 flutter create 指令，生成一個完整的 Flutter 專案資料夾結構。

示範透過指令讓 Flutter App 運行，並在 Chrome 瀏覽器中檢視預設的應用程式畫面。

引導學員手動輸入 StatelessWidget 及 build 方法，理解 Flutter 的語法要求與排版。

探討手動打字時常見的語法錯誤，並觀察除錯畫面以學習修復未宣告或拼字錯誤。

介紹 Widget Tree 概念，並套用 Scaffold 與 AppBar 來建立應用程式的基礎框架與標題列。

示範安裝 Flutter 擴充套件以提供語法提示，並介紹 GitHub Copilot 輔助開發工具。

講解如何開啟VS Code並載入全新的Flutter專案資料夾以準備開發。

介紹刪除預設程式碼，並利用AI生成Scaffold與AppBar的應用程式基本結構。

示範如何修改介面元件的字體大小、顏色以及加上外框裝飾。

指導將下載的圖片放入專案中的images資料夾，並透過Image元件顯示。

解說當UI排版發生溢出時的警告訊息，並將錯誤代碼交由AI快速修復。

利用Stateful Widget建立文字輸入框，讓使用者輸入名稱與電子郵件資料。

添加多個按鈕元件，並透過點擊事件來動態切換畫面上顯示的圖片內容。

擴展輸入介面包含單選與多選框，並製作能一次清空所有輸入資料的按鈕。

使用Navigator組件將使用者從第一頁推送至第二頁，並介紹返回底頁的概念。

加入BottomNavigationBar，讓使用者能在應用程式下方點選切換不同功能頁面。

示範如何將使用者在第一頁輸入的名稱，當作參數傳遞並顯示於第二個頁面上。

建立可滾動的ListView長條清單介面，顯示水果清單的名稱、價格與詳細描述。

將清單結合購物車邏輯，讓使用者選擇商品後能將資料動態同步至購物車頁面。

引導下載並安裝內建AI輔助的Cursor IDE，並透過GitHub登入進行後續開發。

說明當免費AI額度耗盡時，如何到相關平台註冊並儲值以獲取API Key繼續撰寫程式碼。

講師帶領學員使用Command Prompt輸入flutter create指令來建立名為Apps 3的新專案。

示範在VS Code中開啟剛剛建立的專案資料夾，並開啟Terminal準備進行開發環境的設定。

講解Firebase作為應用程式後端的作用，並指導學員至Firebase官方網站註冊與建立雲端專案。

介紹Authentication功能，並帶領學員率先啟用Email與密碼作為基本的登入驗證提供者。

引導學員建立Cloud Firestore資料庫，並設定為測試模式(Test Mode)以便於開發期間進行資料存取。

說明Firestore中Collection等同於關聯式資料庫的Table，而Document則等同於Record的概念。

教授如何透過指令下載與登入Firebase Command Line介面，將Flutter專案與Firebase雲端環境接駁。

介紹切換至DeepSeek平台取得API Key的方法，並說明如何利用支付寶小額儲值以啟用AI輔助寫程式功能。

示範在VS Code中使用快捷鍵全選Providers，搜尋並輸入API Key以切換至DeepSeek AI模型。

當AI生成的介面混亂時，講師示範如何利用截圖工具抽取文字，以確保連接Firebase的程式碼正確無誤。

透過提示詞建立Product List介面，並詳細核對UI程式碼中的變數與Firestore中設定的價格等欄位名稱。

示範於Firebase後台直接新增一筆資料，證明無需重新整理前端APP便會透過串流即時顯示新資料。

講師指導如何撰寫Prompt，在產品清單每列加入Update與Delete按鈕，並於刪除前彈出確認對話框。

統整產品CRUD與使用者管理介面，利用AI快速生成完整的Login頁面作為進入系統的閘口。

課程尾聲特別叮嚀資訊安全的重要性，親自示範將不再使用的API Key刪除與廢棄以防遭人盜用。

概述本節課將使用MCP協定接駁Figma與GitHub Actions來開發Apps。

指導使用flutter create指令建立全新的基礎應用程式資料夾。

解說MCP如何讓AI代理(Agent)獲取擴充工具並執行實際動作。

登入GitHub並至開發者設定中生成Personal Access Token。

尋找並修改OpenCode.json設定檔以寫入GitHub的認證密鑰。

教導如何使用特定提示詞測試AI是否能成功讀取GitHub倉庫資料。

進入Figma安全性設定頁面，生成專屬的個人存取權杖。

在Figma中建立iPhone 16尺寸的畫布並新增簡單的UI元素。

利用Prompt指示AI讀取Figma檔案，並直接覆寫Flutter的main.dart。

介紹如何在Figma Community尋找並複製免費的Material Design UI套件。

建立workflows資料夾與YAML設定檔，準備雲端自動建置環境。

在命令提示字元執行熱重啟，於本機確認AI生成的App介面是否正確。

示範使用git add、commit及push指令將專案上傳至GitHub。

檢視GitHub Actions的建置狀態，並下載自動打包完成的Android APK檔。