提示與交付

提示與交付

如何從 AI 建構工具得到更好的成果，並把它做出來的東西安全地推上正式環境。

• 如何在 Google Play 上架 App：Play Console 的實際步驟 — 如何在 Google Play 上架 App：開發者帳號、建立 App、商店資訊、App 內容表單、12 位測試者的封閉測試，以及正式版發布。
• 如何在 App Store 上架 App：從 TestFlight 到審核通過 — 如何在 App Store 上架 App：開發者計畫、App Store Connect、TestFlight、商店頁面、App 隱私權資訊、送審與被拒原因一次看懂。
• 如何使用 Google AI Studio：Playground、Build 模式與 Gemini 的 Vibe Coding — 如何使用 Google AI Studio：在 Playground 測試 Gemini、取得 API 金鑰、用 Build 模式 vibe coding 做 App，以及何時該改用全端建置工具。
• Vibe Coding 安全嗎？真正的風險與發布前必查的事項 — Vibe coding 安全嗎？可以很安全。說明真正的風險（資料外洩、金鑰外露、濫用）、如何保管機密，以及發布前 30 分鐘的檢查清單。
• 新手的 Vibe Coding 教學：一步一步開始 — 給完全新手的 Vibe Coding 教學：選擇工具、寫出第一個提示、測試、修正並發布一個小型 App，一個下午就能完成。不需要寫程式。
• 30 個可直接複製的 Vibe Coding 提示（速查表） — 30 個可直接複製貼上的 Vibe Coding 提示，依階段分類：首次建置、規劃、設計、資料、修正錯誤、測試、安全與發布。
• 用 ChatGPT 進行 Vibe Coding：Canvas、Codex 與在 ChatGPT 中建置 App — 如何用 ChatGPT 進行 Vibe Coding：在對話中快速做原型、用 Codex 處理真正的程式碼庫，以及使用 Mythex 從 ChatGPT 建置附資料庫的託管 App。
• 用 Claude 進行 Vibe Coding：Claude 對話、Claude Code 與透過 Claude 製作 App — 用 Claude 進行 Vibe Coding 的三種方式：在 Claude 對話中快速做出 App、在你的專案中使用 Claude Code，以及透過 MCP 從 Claude 建置並發布完整的 App。
• 如何讓網站支援行動裝置（響應式設計） — 讓任何網站都能在手機上正常運作：viewport 標籤、行動優先的版面、彈性圖片、可點擊的目標區域、表格與表單，以及提示詞與測試檢查清單。
• 如何在你的網站新增部落格：選項、SEO 與設定 — 如何為你的網站新增部落格：Markdown 檔案、內建編輯器與 CMS 的比較，子資料夾與子網域的選擇，SEO 基礎，以及用 AI 建置的提示範例。
• 如何在你的網站新增聯絡表單（確保真的收得到訊息） — 如何新增真正能運作的聯絡表單：儲存訊息、收到電子郵件通知、阻擋垃圾訊息，並避免無聲無息遺失詢問的常見錯誤。附提示範例。
• 如何為你的應用程式加入資料庫（避免日後資料遺失） — 如何為你做的應用程式加入資料庫：何時需要、Postgres 與託管選項比較、資料表設計、可用的提示詞，以及會造成資料遺失的錯誤。
• 如何為你的應用程式加入 AI 功能 — 用 LLM API 為你的應用程式加入摘要、聊天、資料擷取與分類功能，同時確保金鑰安全、成本可控，並讓輸出結果值得信賴。
• 如何為你的應用程式加入分析工具：GA4、重視隱私的工具與產品分析 — 如何為你的網站或應用程式加入分析工具：Google Analytics 4、重視隱私的工具與產品分析的比較、該追蹤什麼、Cookie 同意，以及可用的提示詞。
• 如何為你的網站加入 Cookie 同意機制 — 加入一個會阻擋腳本、直到訪客同意才載入的 Cookie 橫幅：哪些需要同意、CMP 與自建比較、Google 同意模式與檢查清單。非法律意見。
• 如何為你的網站或應用程式加入深色模式（沒有閃白） — 如何加入深色模式：跟隨系統設定或加入切換按鈕、使用色彩權杖、避免載入時閃白，並檢查對比度。附提示詞。
• 如何為你的應用程式加入檔案上傳：儲存、限制與安全性 — 如何讓使用者在你的應用程式中上傳圖片與文件：檔案應存放在哪裡、大小與類型限制、私人檔案、可用的提示詞，以及常見錯誤。
• 如何為你的應用程式加入登入功能：密碼、魔術連結、Google 與角色 — 如何為你做的應用程式加入使用者登入：電子郵件與密碼、魔術連結、使用 Google 登入、角色與權限，以及保持工作階段安全。
• 如何為你的應用程式加入地圖：嵌入式地圖、互動地圖與門市查詢 — 如何為你的應用程式加入地圖：免費嵌入與 Google Maps、Mapbox 或 Leaflet 的比較、API 金鑰、免費用量限制、地理編碼、提示詞與常見錯誤。
• 如何為應用程式或網站加入多種語言 — 讓你的應用程式支援多種語言：翻譯檔、語言切換器、各語言專屬網址、hreflang、日期與貨幣、從右到左的版面，以及內容翻譯。
• 如何為應用程式加入通知：應用程式內、電子郵件與推播 — 為網頁應用程式加入通知：比較應用程式內鈴鐺、電子郵件與網頁推播，說明如何儲存與發送、使用者偏好設定，以及容易惹惱使用者的錯誤。
• 如何為應用程式加入付款功能：結帳、訂閱與 Webhook — 如何在你建置的應用程式中收款：Stripe 付款連結、Checkout 與訂閱的比較，Webhook、測試模式、正式上線，以及稅務須知。
• 如何為應用程式加入角色型存取控制（RBAC） — 安全地為應用程式加入角色與權限：選擇模型、儲存角色、在伺服器上檢查每個請求，並測試使用者無法看見他人的資料。
• 如何為應用程式加入搜尋：從簡單篩選到全文搜尋 — 如何為應用程式加入搜尋：簡單篩選、資料庫全文搜尋或代管搜尋引擎，該選哪一種、建議使用的提示詞，以及應避免的錯誤。
• 如何用 Stripe 加入訂閱功能：方案、試用、Webhook 與付款失敗 — 用 Stripe 加入定期計費：訂閱模式的 Checkout、試用期、客戶入口網站、需要處理的 Webhook 事件，以及信用卡扣款失敗時該怎麼辦。
• 如何為應用程式加入雙重驗證 — 逐步為應用程式加入 2FA：驗證器應用程式代碼、通行密鑰與簡訊的比較，註冊流程、備用代碼、伺服器端檢查，以及應避免的錯誤。
• 如何備份你的 App 資料庫（並確實還原） — 小型 App 的資料庫備份實用指南：該備份什麼、pg_dump 如何運作、多久備份一次、副本存哪裡，以及如何測試還原。
• 如何建立 REST API：設計、安全與部署 — 一步步建立 REST API：資源與路由、HTTP 方法與狀態碼、驗證、身份驗證、分頁、速率限制、文件與部署。
• 如何把自訂網域連接到你的應用程式或網站 — 如何把自己的網域連接到應用程式或網站：購買網域、該新增哪些 DNS 紀錄、HTTPS、www 與根網域的差別，以及如何修正常見錯誤。
• 如何把 Google 試算表連接到你的應用程式 — 在應用程式中讀寫 Google 試算表：服務帳戶、OAuth 與 API 金鑰的比較，Sheets API 的呼叫方式、配額、公式安全，以及何時該改用資料庫。
• 如何除錯 AI 建立的應用程式：一套實用方法 — 逐步修正 AI 建立的應用程式錯誤：重現問題、閱讀錯誤訊息、使用瀏覽器開發人員工具、清楚描述問題，以及在必要時還原版本。
• 如何用 AI 設計一個好看的 App — 讓 AI 設計出有質感、不流於制式的 App：蒐集參考案例、定義設計方向、控制間距、字型與配色，並有效地反覆調整。
• 如何匯出並自行託管 AI 建置的 App — 如何取出 AI 建置 App 的程式碼並在其他地方執行：匯出或同步到 GitHub、機密資料、搬移資料庫，以及選擇託管服務。
• 如何修正部署網站或 App 後出現的 404 錯誤 — 本機頁面正常，部署後卻出現 404？逐步修正 SPA 路由的後備規則、結尾斜線、區分大小寫的路徑、缺少的建置檔案與 API 路由。
• 如何修正網頁 App 出現的空白白頁 — 網頁 App 為何會顯示空白白頁，以及如何修正：閱讀主控台、找出缺少的檔案與錯誤的基礎路徑、設定環境變數，並修正當機與路由問題。
• 如何修正 CORS 錯誤（以及為什麼會發生） — CORS 錯誤是什麼意思、瀏覽器為何會阻擋跨來源請求，以及如何在伺服器端修正（包括預檢與憑證），或改用同來源的 API。
• 如何把 Claude API 整合進你的 App — 把 Anthropic 的 Claude API 加入你的 App：API 金鑰、Messages API、系統提示、串流、429 與 529 等錯誤、支出上限，以及安全的伺服器端呼叫。
• 如何把 OpenAI API 整合進你的 App — 安全地把 OpenAI API 加入你的 App：API 金鑰與專案、Responses API、伺服器端呼叫、串流、支出上限、速率限制與錯誤處理。
• 如何在不弄壞 AI 建構 App 的情況下持續迭代 — 一次只改一小部分，持續改善 AI 建構的 App：描述你看到的問題、大改動先規劃、測試每一則提示，並在失敗時回退，而不是一直疊加修正。
• 如何在你的 App 中妥善保管 API 金鑰 — 讓 API 金鑰遠離你的程式碼、瀏覽器與聊天視窗：存為機密、只在伺服器端使用、限制權限，並輪替任何外洩的金鑰。
• 如何讓你的網站無障礙：WCAG 2.2 入門指南 — 讓每個人都能使用你的網站：語意化 HTML、鍵盤操作、對比度、替代文字、表單與焦點，依 WCAG 2.2 AA 檢查，並附檢查清單。
• 如何讓網站更快：實用檢查清單 — 先測量再修正拖慢網站的原因：圖片、JavaScript、字型、第三方腳本與伺服器回應。附 Core Web Vitals 目標與 AI 提示詞。
• 如何遷移 WordPress 網站而不遺失內容或排名 — 將 WordPress 網站遷移到新平台：列出網址、匯出文章與媒體、重建設計、匯入內容、設定 301 轉址，並安全地切換 DNS。
• 如何從 Lovable 遷移到 Mythex（程式碼、資料與網域） — 逐步將 Lovable App 遷移到 Mythex：透過 GitHub 取出程式碼，決定後端與資料的去向，匯入後重新設定密鑰，最後正式上線。
• 如何降低 App 的主機託管費用 — 降低 App 的託管帳單：找出正在運行的項目、讓閒置的 App 與資料庫休眠、停止持續輪詢、縮減頻寬，並移除沒人使用的東西。
• 如何審查 AI 產生的程式碼 — 審查 AI 撰寫程式碼的實用方法：先檢查改了什麼，再測試行為，然後查看是否缺少權限檢查、機密外洩，以及不存在的 API。
• 如何在網頁 App 中執行背景工作：佇列、排程器與 Cron — 如何在網頁 App 中執行背景與排程工作：程序內任務、資料庫佇列、託管工作服務與外部排程器，並誠實說明各自的取捨。
• 如何從你的應用程式寄送電子郵件（並確保進入收件匣） — 讓應用程式寄出的郵件確實進入收件匣：交易型與行銷型郵件的差異、選擇寄送服務商、設定 SPF、DKIM 與 DMARC，以及送達率基本功。
• 如何為你的應用程式建置預備環境（Staging） — 建置預備環境：為你的應用程式準備第二份副本，擁有自己的資料庫、測試金鑰與網址，讓你在真實用戶看到之前先檢查變更。
• 如何在你的網站上設定 Google Analytics 4 — 逐步設定 Google Analytics 4：帳戶、資源、網頁資料串流、Google 代碼、單頁應用程式的頁面瀏覽、重要事件與同意設定。
• 如何為你的網站設定 Google 搜尋主控台 — 將你的網站加入 Google 搜尋主控台：選擇網域或網址前置字元資源、驗證擁有權、提交網站地圖，並閱讀真正重要的報告。
• 如何將 AI 原型推進到正式上線 — 把 AI 打造的原型變成真正可靠的應用程式：測試、資安、錯誤監控、備份、效能，以及順暢的交接。
• 如何在上線前測試你的應用程式：實用的上線前計畫 — 小型應用程式的上線前測試計畫：測試主要使用流程、邊界情況、權限、手機、付款與正式網址，並附上完成用的檢查清單。
• 如何搭配 AI 建置的應用程式使用 Git — 搭配 AI 建置的應用程式使用 Git：每次有效的修改後都提交、寫清楚的提交訊息、高風險的工作使用分支，並在 AI 弄壞東西時安全地復原。
• 如何與開發者合作處理 AI 建置的應用程式 — 邀請開發者加入你用 AI 建置的應用程式：提供程式碼存取權與背景資訊、約定誰負責哪些修改、清楚界定工作範圍，並保有所有權。
• 如何撰寫好的錯誤回報（給 AI 或開發者） — 撰寫能一次就被修好的錯誤回報：清楚的標題、精確的步驟、預期與實際結果、錯誤訊息、環境資訊，以及一張截圖。
• 如何為 AI 應用程式建置工具撰寫提示詞（附前後對照範例） — 為 AI 應用程式建置工具撰寫提示詞的模式：該寫什麼、不該寫什麼、前後對照範例，以及如何逐步迭代，讓它做出你想要的東西。
• 如何撰寫使用者故事（附範例與驗收條件） — 撰寫開發者與 AI 建置者能據以行動的使用者故事：「作為／我想要／以便」格式、驗收條件、拆分方法，以及好與壞的範例。
• AI 建置應用程式的安全檢查清單：上線前該檢查什麼 — AI 建置應用程式的實用安全檢查清單：登入與權限、密鑰、輸入驗證、每位使用者的資料、速率限制、相依套件與備份。
• AI 建置網站的 SEO：真正重要的是什麼 — 為什麼 AI 建置的單頁應用程式在搜尋中可能表現不佳，以及如何修正：預先渲染、標題與 meta 標籤、網站地圖、結構化資料、速度與內容。