今天的作品在 Expo Go 裡預覽，啟動視窗關掉就打不開。這是開發的第一步。
電腦瀏覽器只是備用預覽。要在自己的手機上按過，才算數。
Stitch 畫出來的按鈕不會存資料。功能要讓 Codex 做出來、你親手驗收。
課前準備
目標：上課前，你的 iPhone 已經打開過起始版 App。這樣當天不用排隊下載，可以專心做作品。
這幾種狀況請先告訴老師，當天會幫你安排備用方式：
- 只能用公司電腦，或沒有管理員權限（Windows 安裝 Codex 需要管理員核准）。
- 電腦是 Chromebook 或 iPad；或 Mac 系統低於 macOS 14。
- iPhone 系統低於 iOS 16.4，或沒有 iPhone。
1. 準備四個帳號
- 帳號
2. 安裝與登入
- 安裝 ChatGPT 桌面版（Codex 在裡面）
Windows：打開 Microsoft Store，搜尋「ChatGPT」，安裝開發者是 OpenAI 的那一個。Mac：到 chatgpt.com/download 下載。只從官方來源下載；名稱有「Classic」的是舊版，不要裝。
登入後，從上方的選單切換到 Codex。
- iPhone 安裝 Expo Go
App Store 搜尋「Expo Go」安裝。打開後點右上角的頭像，登入剛才的 Expo 帳號。
3. 讓 Codex 幫你準備環境
- 建立一個空資料夾，名字叫 workshop
Windows：打開檔案總管 →「本機」→「Windows (C:)」→ 新增資料夾 → 命名為
workshop，也就是C:\workshop。Mac：Finder → 上方選單「前往」→「個人專屬資料夾」→ 新增檔案夾 → 命名為
workshop。不要放在 OneDrive、iCloud 雲端同步的資料夾（例如桌面、文件），安裝時會被同步拖慢甚至失敗。
- 在 Codex 打開這個資料夾
在 Codex 新增專案（或選擇資料夾），選剛才的
workshop。權限保持預設，也就是「做事前會先問你」的模式。 - 貼上下面這段提示詞，送出
Codex 會自己檢查電腦、下載起始版、補上 Node.js、安裝套件，最後一步一步帶你在手機上打開。全程大約 5–15 分鐘，看網路速度。
Codex 會問你「要不要允許」。看清楚它要做什麼再按：
- 可以允許：從 nodejs.org、registry.npmjs.org、codeload.github.com 下載；在 workshop 資料夾或 RayWorkshop 資料夾裡寫入檔案；執行 npm、npx。
- 不要允許，先問老師：刪除檔案、要你的密碼、關閉防火牆或防毒、安裝 Git／Xcode／WSL 之類的大型工具、付費。
4. 在 iPhone 上打開
- 雙擊專案裡的「啟動App」
Windows 是
啟動App.cmd，Mac 是啟動App.command。第一次會打開瀏覽器請你登入 Expo，登入完回到黑色視窗。這個視窗之後要一直開著，關掉手機就打不開。Mac 若說「無法打開，因為來自未識別的開發者」：按住 Control 點一下檔案 → 選「打開」。
- Windows 防火牆：只允許「私人網路」
第一次啟動時，Windows 可能問要不要允許 Node.js 連線。在自己家裡：勾「私人網路」→ 允許存取。手機連不上時，再到「設定 → 網路和網際網路 → Wi-Fi → 你家網路的內容 → 網路設定檔類型」改成「私人」。教室的網路，當天老師會說明。
如果要求管理員密碼而你沒有：按取消，記下來告訴老師，不要想辦法繞過。
- 用 iPhone 的「相機」掃視窗裡的 QR Code
電腦和手機要連同一個 Wi-Fi。點畫面上出現的提示，用 Expo Go 開啟。Expo Go 問「尋找並連接區域網路上的裝置」時，按好。
- 看到這個畫面就成功了
告訴 Codex「手機看到畫面了」，它會幫你做最後確認。
- 課前完成確認
卡住了也沒關係，先看 卡住了怎麼辦，或把 Codex 的最後回報截圖給老師。上課當天會提早開放環境協助。
今天的流程
每段都是：老師示範幾分鐘 → 你動手 → 在畫面上親手確認。講課不會超過 10 分鐘。
卡住的規則：先問同桌 → 舉手 → 同一個問題卡 5 分鐘，就換備案繼續上課，助教在旁邊處理。不是你的錯，多半是環境的事。
AI Studio：說一句話就有作品
目標：不裝任何東西，用說話做出一個能新增、能保存的小工具，體驗「我說、AI 做、我驗收」。
- 打開 aistudio.google.com/apps
用 Google 帳號登入，找到 Build（建立 App）的輸入框。
- 貼上 P01，送出，等它做完
大約一到兩分鐘。等待時看看它在做什麼。
- 親手驗收
在右邊的預覽新增「完成我的第一個作品」→ 重新整理預覽 → 確認那一筆還在。
- 只改一件事：貼上 P02
標題改好、舊資料還在，才算成功。AI 說「完成了」不算數，畫面說了才算。
- 過關
不要按發布或分享，也不要貼私人日記、客戶資料或任何密碼。生成超過 5 分鐘沒結果，先看老師的示範，稍後再試。
做完之後：剛剛發生了什麼
你用中文描述 → AI 寫出網頁程式 → 瀏覽器把它跑起來。資料存在這台電腦的這個瀏覽器裡，不是雲端，換一台電腦就看不到。
「AI 幫我寫程式」和「App 裡面有 AI 功能」是兩回事。今天只做前者，所以不需要 API 金鑰，也不用付 API 費用。
網頁在瀏覽器裡跑；手機 App 裝在手機上，用手機的按鈕、鍵盤和儲存空間。接下來我們要做的是後者，所以要先想清楚、先畫畫面。
想清楚：一頁需求
目標：讓 AI 訪問你，整理出一頁需求文件（PRD）。最重要的一行是「今天不做什麼」。
- 打開 ChatGPT 或 Gemini，貼上 P03
任何一個聊天 AI 都可以。它會一次問你一個問題。
- 用你自己的生活回答
你什麼時候會想記一件小事？現在都怎麼記？全班先用同一個骨架：每筆紀錄只有標題、內容、分類。想做別的題材（書摘、運動、靈感…），先記在最後，第 07 段再換。
- 同桌交換看
對方看得懂「今天不做的功能」嗎？每條驗收能不能在手機上實際按出來？
- 先留在聊天視窗
第 04 段會把它交給 Codex。
好的驗收長這樣：「標題空白時按儲存，畫面會說明原因、不會存進去。」
不好的驗收：「好用」、「流暢」。按不出來的，AI 也做不出來。
- 過關
Stitch：先把畫面畫出來
目標：做出清單、新增／編輯兩個畫面，刪掉 AI 多畫的東西，下載成 ZIP。
- 打開 stitch.withgoogle.com
用 Google 帳號登入，選手機（App）版面。
- 貼上 P04，等它畫出兩個畫面
- 找出 AI 多畫的東西
頭像、底部分頁、日曆、裝飾標語、重複的按鈕…把你看到的寫進 P05 的【】裡，再送出。
- 匯出 ZIP
用匯出（Export）下載 ZIP，留在「下載」資料夾就好，第 04 段 Codex 會去拿。找不到匯出或失敗超過 3 分鐘：直接截兩張畫面圖。
設計稿不等於功能。畫面上的儲存按鈕還不會存任何東西。Stitch 匯出的 HTML 也不能直接變成 iPhone App，Codex 會照著它的樣子，用 App 的元件重新做。
環境還沒準備好的人：這段最後 5 分鐘，把 P00 環境準備提示詞貼給 Codex，休息前把它問的「允許」按掉，讓它在你休息時工作。
Codex 進場：讓它讀懂你
目標：啟動視窗開著、手機看得到起始畫面；Codex 讀了你的需求和設計，用白話講對了你要什麼。
- 在 Codex 打開 workshop 資料夾，貼 P06 開工檢查
它說「可以雙擊啟動App 了」，就雙擊啟動檔，手機用 Expo Go 打開。
- 貼 P07，把你的 PRD 和 Stitch ZIP 交給它
把第 02 段的 PRD 從聊天視窗複製，貼在 P07 最下面那條線下面。Mac 可能跳出「想要取用『下載項目』檔案夾」，按允許；不想給權限，就把 ZIP 拖進 workshop 資料夾，告訴 Codex 檔案在哪。
- 貼 P08，讓它先講它理解了什麼
講錯的地方直接糾正它。它講對了，你回「開始」，才進入下一段。
AGENTS.md 是給 Codex 的專案規則：用什麼工具、不能升級什麼、每次改完要檢查什麼。起始版已經寫好了，Codex 每次都會先讀。這就是原課程講的 Skills 概念：把做事的規矩寫下來給 AI。
Expo 官方也有給 Codex 的外掛，課堂上不安裝，原因和安裝方式在 第 10 段最後。
- 過關
第一版：在 iPhone 上動起來
目標：在自己的 iPhone 上新增一筆紀錄；再加上編輯、刪除和分類。
今天最重要的節奏：一次只叫 AI 做一件事 → 等它做完 → 在手機上按一次 → 再交下一件。
- 貼 P09：只做清單和新增
Codex 改完，Expo Go 會自動更新。沒更新就搖一搖手機，按 Reload。這一步重新載入後資料消失是正常的，保存在第 06 段才做。
- 在手機上新增一筆
標題空白按儲存，應該會被擋下；填好標題再存，回到清單看到它。
- 貼 P10：編輯、刪除、分類
照 Codex 列的步驟，在手機上逐一按過。
- 過關（在 iPhone 上）
20 分鐘後手機和電腦都還沒有畫面：舉手，助教接手，你先看同桌的。30 分鐘還不行，休息時改用完成版（P17），不丟臉，後面一樣能做自己的版本。
記得住：保存與完成點
目標：關掉 App 再打開，資料還在；並且存一個「完成點」，之後改壞了可以回來。
- 貼 P11：本機保存
- 驗收
新增一筆 → 搖一搖手機 → Reload → 還在。再把 Expo Go 從背景完全滑掉，重新打開作品 → 還在。
- 貼 P12：建立完成點
電腦有 Git 就用 Git；沒有就存成 ZIP。兩種都可以，不要為了 Git 卡住。
資料存在這支手機上，不是雲端。電腦瀏覽器預覽的資料是另一份，兩邊不會同步。刪掉 Expo Go 或清除資料，紀錄就會消失。今天只用測試資料。
- 過關
變成你的：換題材＋一個小功能
目標：把 App 換成你自己的題材，再加一個 40 分鐘內做得完的小功能，而且原本的功能都沒壞。
- 貼 P13：換題材
把【】換成你的題材、名稱、三個分類和顏色。
- 先寫一句驗收，再貼 P14
例如：「在清單上方輸入關鍵字，只顯示標題含有這個字的紀錄；清空後回到全部。」
- 剩 10 分鐘就停
不再加新東西，先確認新增、編輯、刪除、分類、保存都還能用。
| 適合今天 | 先不要 |
|---|---|
| 標題搜尋 | 登入、會員 |
| 最新／最舊排序 | 付款、訂閱 |
| 今天新增了幾筆 | 雲端同步、多人共用 |
| 置頂一筆 | 接 AI API |
| 每筆加一個心情符號 | 推播通知、需要裝新套件的功能 |
互相找 bug
目標：和同桌交換手機，照八項驗收按一遍；找到問題，用正確的方式回報給 Codex 並修好一個。
- 八項驗收
不要只說「壞了」。告訴 Codex 四件事：你做了什麼、預期會怎樣、實際怎樣、在哪裡看到。截圖可以直接貼進 Codex。
展示與帶回家
目標：用 60 秒介紹你的 App；確認你回家後能自己把它打開。
60 秒展示
- 我做了什麼
App 名稱，一句話說它幫誰解決什麼。
- 現場操作一次
新增一筆、切一下分類。
- 我加的功能
還有下一步想做什麼。
重啟練習
- 關掉啟動視窗
手機上的 Expo Go 會打不開作品。這是正常的：預覽需要電腦一直開著。
- 重新雙擊「啟動App」
手機再掃一次，或在 Expo Go 首頁的最近專案點進去。
- 貼 P18：寫 NEXT.md 並建立完成點
確認你知道專案資料夾在哪裡。帶回家的是整個資料夾，不只是聊天紀錄。
上架路線（只講，不做）
今天停在第一階。後面每一階都需要帳號、建置和更多測試，今天不登入付款、不申請憑證、不送審。
在 Expo Go 裡打開，需要電腦開著。
今天在這裡development build：裝得進手機、有自己的圖示。
Apple 的測試分發，邀請朋友安裝試用。
正式上架，任何人都能下載。
你會需要
- Apple Developer Program：年費會員，價格以 Apple 官方當時公告為準。今天的預覽不需要。
- Expo 的 EAS Build：在雲端幫你建置 iOS App，所以 Windows 也能走這條路。方案與額度以 Expo 官方為準。
- Mac 與 Xcode：本機跑 iOS 模擬器才需要；Windows 不能跑 Apple 的模擬器，用實體 iPhone 測試即可。
送審前要補的事
- App 圖示、實機截圖、名稱與介紹、聯絡方式。
- 隱私政策與資料收集說明，要符合程式實際的行為，不能照抄別人的。
- 用實機測試鍵盤、長文字、錯誤情況和資料保存。
- 加了登入、付款、追蹤或第三方服務，審核要求也會跟著變。審核不保證通過，也不保證時間。
建議的課後順序
- 先把核心功能和資料保護做穩，每次改完都在手機上驗收。
- 做 development build，裝成自己的 App。
- TestFlight 給幾個朋友試用，收集回饋。
- 補齊商店資料，最後才送審。
延伸閱讀（官方）
- Expo：Development builds
- Expo：EAS Build
- Expo：提交到 Apple App Store
- Apple：App Store Connect 說明
- Apple：App Review Guidelines
進階：Expo 官方的 Codex 外掛
Expo 有一包給 Codex 的官方技能（skills），能讓 Codex 更熟悉 Expo 的寫法、上架流程與 SDK 升級。在 Codex 輸入 /plugins 選擇 expo，或在終端機執行 codex plugin add expo@openai-curated。
課堂上不安裝：它會建議加入新的套件（例如 expo-router、@expo/ui）或使用 EAS 雲端服務，對今天兩個畫面的小 App 沒必要，而且每多一次安裝就多一個卡關點。課後要繼續做大，再裝它。起始版的 AGENTS.md 已寫明：就算裝了外掛，也先遵守專案規則。
卡住了怎麼辦
先找你的症狀。照做還不行，就舉手；不要自己關掉防火牆、刪掉專案重來，或臨時付費升級。
Windows 裝不起 ChatGPT 桌面版／要求管理員密碼安裝時出現需要系統管理員核准
Windows 版安裝需要管理員權限，公司管控的電腦通常裝不了。請改用自己的電腦。當天無法解決時，和同桌共用一台，或使用老師準備的備用電腦，你自己的手機一樣可以掃碼。
Codex 說額度用完了usage limit、稍後再試
額度有時間窗口，等一段時間會恢復，可在 Codex 的設定裡看剩餘用量。課堂上先和同桌輪流用一台，或改用完成版只做小修改。要不要升級方案由你自己決定，課堂不要求。
Codex 一直問要不要允許approve、允許、需要網路權限
這是安全機制，正常。可以允許：從 nodejs.org、npm、codeload.github.com 下載；在 workshop 或 RayWorkshop 資料夾寫入；執行 npm、npx。不要允許：刪除檔案、要你的密碼、關掉防火牆或防毒、安裝 Git／Xcode／WSL、付費。看不懂它要做什麼，就先問它「這一步要做什麼、為什麼」。
下載或安裝套件很慢npm ci 一直跑、卡在下載
第一次安裝要下載幾百 MB，教室網路慢時可能要十幾分鐘。不要中斷、不要重複執行。超過 15 分鐘沒有進度，告訴助教，改用備用電腦或晚點再裝，先繼續上課。
雙擊「啟動App」沒反應、閃一下就關掉找不到 Node.js、無法打開
- 畫面說「找不到 Node.js」：先回 Codex 貼 P00 環境準備。
- Mac 說「來自未識別的開發者」：按住 Control 點一下檔案 →「打開」。
- Mac 說沒有權限執行：請 Codex「讓 啟動App.command 可以執行」。
- 其他情況：把視窗裡的文字整段複製（或截圖）貼給 Codex。
iPhone 掃了 QR Code 打不開、一直轉圈連不到開發伺服器
- 啟動視窗還開著嗎？
- 電腦和手機連的是同一個 Wi-Fi 嗎？（不要一個用行動網路）
- Expo Go 有「區域網路」權限嗎？iPhone 設定 → 隱私權與安全性 → 區域網路 → 打開 Expo Go。
- Windows：防火牆有沒有允許 Node.js 的「私人網路」？這個 Wi-Fi 是不是被設成「公用」？
- 有些公共或訪客 Wi-Fi 會擋住裝置互連。教室裡請改連老師提供的網路。
還是不行：關掉啟動視窗，改雙擊專案裡的「備用連線App」。它透過 Expo 的公開通道連線，手機不用和電腦在同一個網路，也不用改防火牆，只是比較慢。
再不行，貼 P16 讓 Codex 幫你一步步診斷；5 分鐘內不行，先用電腦瀏覽器預覽繼續上課（不算 iPhone 驗收），助教處理。
Expo Go 說要登入You need to be signed in to Expo Go and Expo CLI
2026/9 起的規定：實體 iPhone 上，電腦端和 Expo Go 要登入同一個 Expo 帳號。啟動視窗會顯示電腦登入的帳號；Expo Go 點右上角頭像登入同一個，再按 Try Again。換過帳號的話，關掉啟動視窗重新雙擊。
Expo Go 說版本不相容SDK、incompatible、需要更新
不要讓 Codex 升級專案。截圖給老師：工作坊鎖定 Expo SDK 57，老師會確認你手機上 Expo Go 的版本。
手機畫面沒有更新改了程式卻沒變
確認啟動視窗還開著；搖一搖手機打開 Expo Go 選單，按 Reload；還是沒變，問 Codex「改動有沒有存檔、有沒有打包錯誤」。
手機出現紅色錯誤畫面Error、Something went wrong
截圖，用 P15 的格式回報給 Codex。不要要求它「整個重做」。
改壞了，想回到之前的版本完成點、復原
跟 Codex 說：「回到最近一次完成點的版本，回去之前先把目前的狀態另外存一份。」所以每做好一個功能就要存完成點（P12）。
電腦瀏覽器和手機的資料不一樣不同步
正常。資料存在各自的裝置裡，不是雲端。
PowerShell 說 npm.ps1 無法載入execution policy
不用改系統設定。請 Codex 改用 npm.cmd、npx.cmd，啟動檔已經是這樣寫的。
說 8081 埠被占用Port 8081 is being used
可能有另一個啟動視窗還開著。關掉多的那個；或在提示問要不要換埠時按 Y，然後用新的 QR Code。
AI Studio 或 Stitch 一直在生成等很久沒結果
等 5 分鐘。還沒好就先看老師的示範專案，晚點再重送一次，不要一直重複送出。
進度落後，想直接用完成版救援
建立一個新的空資料夾（例如 C:\workshop-完成版），在 Codex 打開它，貼 P17。原本的資料夾不要動。完成版有清單、新增、編輯、刪除、分類和保存，你可以直接從第 07 段開始做自己的版本。
提示詞總表
全部提示詞依上課順序排好。【】裡的字要換成你的內容；其他照貼就好。
名詞小抄
下載與驗證範圍
Codex 會照提示詞自己下載。網路受限、需要手動處理時才用下面的連結；下載後一定要先解壓縮，不要在壓縮檔裡直接打開。
這份教材實際測過什麼
| 項目 | 狀態 |
|---|---|
| 雲端 Windows（新建中文名稱一般使用者、沒有 Node 和 Git）：免安裝 Node 驗章、下載起始版、雙擊啟動、產出 iPhone 版程式 | 已通過 |
| 雲端 Windows：雙擊「備用連線App」，經 Expo 公開通道連線 | 已通過 |
| Codex 照 P00 在沒有 Node 的電腦上自己準備好環境；再照 P08–P11 做出能保存的 App（Mac） | 已通過 |
| 完成版：新增、空白驗證、編輯、分類、刪除、保存的網頁自動測試；iOS 模擬器上的 Expo Go 操作 | 已通過 |
| 學員自己的 Windows 電腦上，ChatGPT 桌面版 Codex 從安裝到手機打開的完整流程 | 課前由你實測 |
| 實體 iPhone：Expo 帳號登入、掃碼、中文輸入、保存 | 課前由你實測 |
| 教室 Wi-Fi 讓手機連到電腦 | 當天現場確認 |
電腦瀏覽器測試、雲端 Windows 測試和模擬器測試，都不等於你的 iPhone 已經通過。工作坊鎖定 Expo SDK 57（Expo 57.0.26、React Native 0.86.3），請不要升級。