Skip to main content

Shopify 開發大師班介紹

歡迎來到 Shopify 開發大師班 —— 這是使用 Agentic Coding 的力量來建構現代 Shopify 應用程式、主題和整合的權威課程。這不是一般的 Shopify 教學。我們將從根本上改變你對軟體開發的思維方式，結合 Shopify 強大的平台與 Claude Code 及 Model Context Protocol (MCP)。

本課程適合誰​

本課程為三類重疊的受眾而設計：

  • 想要學習程式設計的商家。 你經營一間 Shopify 商店，你已經厭倦了為幾乎能滿足需求的應用程式付費。你有一些技術好奇心，但可能沒有電腦科學學位。Agentic Coding 是你的倍力器 —— 它讓你在 AI 的協助下建構真正的功能，即使你仍在學習基礎知識。

  • Shopify 新手開發者。 你了解 JavaScript、React 或其他語言，但從未在 Shopify 平台上建構過。你需要了解整個生態系統 —— API、擴充點、Partner Dashboard、部署模式 —— 而且你想要快速學會。

  • 對 AI 感興趣的建構者。 你聽說過 AI 輔助程式設計，但你想要超越自動完成。你想了解一個 AI 代理能夠閱讀文件、呼叫 API、執行 shell 命令，並自主建構完整功能是什麼意思。你想看看 MCP 伺服器如何將 Claude Code 變成 Shopify 開發的強力工具。

無需 Shopify 先備經驗

雖然我們進度很快，但每個概念都從第一原理開始解釋。如果你能閱讀 JavaScript 並操作終端機，你就具備了開始所需的一切。

什麼是 Agentic Coding？​

傳統的 AI 程式設計助手建議下一行程式碼。Agentic Coding 則根本不同。像 Claude Code 這樣的 Agentic Coding 系統可以：

  1. 理解上下文 —— 閱讀你的整個專案、文件和 API schema
  2. 規劃多步驟解決方案 —— 將複雜功能分解為實作步驟
  3. 自主執行 —— 執行命令、建立檔案、安裝相依套件、呼叫 API
  4. 根據回饋迭代 —— 閱讀錯誤訊息、修復 bug，並持續改進直到解決方案可行
  5. 從工具中學習 —— 使用 MCP 伺服器存取即時 Shopify 資料、文件等

可以把它想像成拼字檢查器和共同作者之間的差異。Claude Code 不僅僅修正你的錯字 —— 它幫助你撰寫整本書。

Claude Code + MCP 範式轉變​

Claude Code 是 Anthropic 基於 CLI 的程式設計代理。你在終端機中執行它，它可以完全存取你的檔案系統、shell 和開發工具。但真正讓它在 Shopify 開發中如此強大的是 Model Context Protocol (MCP)。

MCP 是一個開放標準，讓 AI 代理透過統一的協定連接到外部工具和資料來源。對於 Shopify 開發，這意味著 Claude Code 可以：

  • 即時查詢你的 Shopify 商店的 Admin API
  • 閱讀最新的 Shopify 文件
  • 檢查你的主題檔案並建議 Liquid 改進
  • 執行 Shopify CLI 命令來搭建、測試和部署
  • 存取你商店的產品目錄、訂單和客戶資料

這是一個範式轉變。你不再需要在文件標籤頁、API 探索器和編輯器之間切換，只需描述你想要什麼，Claude Code 就會找出如何建構它 —— 並且可以即時存取你的實際商店資料。

課程路線圖​

大師班分為八個模組，每個模組都建立在前一個的基礎上：

模組重點關鍵成果
入門環境、工具、第一個應用程式在開發商店上執行 Shopify 應用程式
Shopify 基礎平台架構、API、Liquid、Hydrogen、Functions深入了解 Shopify 生態系統
Claude Code 與 ShopifyCLI 工作流程、提示工程、自主編碼高效的 Agentic 開發工作流程
MCP 深入探討協定內部機制、建構伺服器、Shopify MCP 工具為你的工作流程客製化 MCP 伺服器
Agentic 模式AI 輔助 Shopify 開發的設計模式常見任務的可重複模式
建構應用程式完整應用程式開發，含嵌入式 UI、webhooks、計費正式環境就緒的 Shopify 應用程式
進階主題Functions、Checkout UI、B2B、Markets、Shopify Plus進階平台功能
部署與營運CI/CD、監控、應用程式審核、擴展應用程式上架到 Shopify App Store

學習目標​

完成本課程後，你將能夠：

  • 使用 Remix、Polaris 和 App Bridge 建構並部署 Shopify 應用程式
  • 使用 Liquid、Online Store 2.0 sections 和 JSON 範本建立自訂主題
  • 有效使用 Claude Code 作為 Shopify 開發的 Agentic Coding 夥伴
  • 建構 MCP 伺服器，將 Claude Code 連接到 Shopify 的 API 和你的自訂工具
  • 用 JavaScript 和 Rust 編寫 Shopify Functions，擴展結帳、折扣和運費
  • 使用 React、Remix 和 Storefront API 設計 Hydrogen 店面
  • 了解 Partner 生態系統，包括應用程式審核、計費和收益分成
  • 應用 Agentic 設計模式，使 AI 輔助開發可靠且可重複

先決條件​

開始之前，請確保你有：

  • 一台電腦，執行 macOS、Linux 或 Windows（建議使用 WSL2）
  • 基本 JavaScript 知識 —— 變數、函式、async/await、模組
  • 終端機操作能力 —— 你應該能夠瀏覽目錄和執行命令
  • Shopify Partner 帳戶 —— 可在 partners.shopify.com 免費建立
  • Anthropic API 金鑰 —— Claude Code 所需，可在 console.anthropic.com 取得
  • Node.js 20 或更新版本 —— 我們將在下一課中介紹安裝方式
你不需要成為專家

關於 Agentic Coding 最大的誤解是你需要成為專業程式設計師才能使用它。事實恰恰相反 —— Claude Code 對於仍在學習的人最具變革性。這就像有一位資深開發者全天候與你進行配對程式設計。

如何使用本課程​

每一課包含：

  • 概念說明，附帶圖表和實際場景
  • 實作練習，你可以在終端機中跟著操作
  • 程式碼範例，可直接複製貼上，並針對當前 Shopify API 版本進行測試
  • Claude Code 提示，展示如何在每項任務中運用 Agentic Coding
  • 檢查點問題，在繼續之前驗證你的理解

我們建議第一次閱讀時按照模組順序進行。之後，將本課程作為參考 —— 在需要時跳到任何章節。

保管好你的 API 金鑰

在整個課程中，你將使用 Shopify API 憑證和 Anthropic API 金鑰。絕對不要將這些提交到版本控制。我們將在環境設置課程中展示如何正確使用環境變數和 .env 檔案。

準備好開始了嗎？讓我們設置你的開發環境。