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