成功技巧
這份指南涵蓋了使用 PWA Kit 成功開發的關鍵技術技巧。
一般來說,PWA Kit 開發人員應熟悉:
- 建置通用 React.js 應用程式。
- 在 ES6 JavaScript 中進行編碼。
- 使用 CSS 設定 UI 元件樣式。
- 使用 RESTful API,例如 Salesforce Commerce API。
- 以 Node.js 和 Express.js 開發網路應用程式。
- 使用 npm 管理套件和執行指令碼。
若您熟悉以上流程,那您已準備好直接開始了!以下是使用 PWA Kit 建置網店應用程式時,會用到的更全面技能清單。若您對其中有任何地方不熟悉,也別擔心。使用 PWA Kit 會帶來許多機會,讓您愉快地學習各種熱門的新技術!
PWA Kit 應用程式是以新式 JavaScript 編寫而成。就連您的 CSS 也是以 JavaScript 寫出來的!
無頭式商務應用程式會頻繁發出網路要求,因此瞭解 fetch() 十分重要。我們建議使用在瀏覽器和 Node.js 環境中都可以工作的通用擷取庫 (例如 cross-fetch)。如要獲得最大效能,您必須能夠使用 Promises 和 async 及 await 編寫非同步程式碼。
- 線上課程:Modern JavaScript From The Beginning (從頭開始瞭解新式 JavaScript)
- 線上課程:JavaScript Concurrency (JavaScript 並行)
- MDN:Fetch API - Web API
fetch()
備忘錄- Express.js 網頁伺服器
- 如何偵錯 Node.js 應用程式
- 管理 npm 套件
- 使用 npm-run-scripts
React 是所有 PWA Kit 應用程式的基礎。官方 React 文件是絕佳的起點。這份文件讓人獲益良多,我們建議您閱讀所有內容!若需要以重點方式學習 React,試著將重心放在元件、Props、轉譯週期、狀態管理,包括在 React 16.8 推出的 Hook 等新概念。
- 線上課程:Modern React (新式 React)
- Components and Props – React (元件和 Props – React)
- State Management (狀態管理)
- State and Synchronizing with Effects (狀態和與效果同步)
- Context (內容)
- Error Boundaries (錯誤範圍)
- Hook:快速入門、教學、參照概觀
- Server Side Rendering (伺服器端轉譯)
- Hydration
- 以 React DevTools 進行偵錯
- React 擴充程式,如 react-router 和 react-helmet
您的應用程式使用 API 從 Salesforce Commerce Cloud 獲得所有商務資料。您應熟悉一般 RESTful API,特別是 B2C Commerce API 和 Open Commerce API (OCAPI)。
- Commerce API Reference (Commerce API 參照)
- B2C Commerce Developer Sandbox REST API
視您的專案詳情而定,擁有下列領域的其他知識和技巧會是寶貴的資產: