fbpx

JAMstack 和 React 電子商務完整指南

掌握下一代全端架構:使用 React、Gatsby 和 Strapi 實現最佳速度、安全性和可擴展性。

報名參加課程更新 coupon code

從這 79 小時的課程,你會學到

  • 創建尖端的全端應用程式,同時使用 JAMstack 增強你的開發人員體驗
  • 實施具有實時庫存、最愛收藏夾、評論和訂閱的綜合電子商務架構
  • 使用我們的靜態站點生成器 Gatsby 簡化性能、安全性和可訪問性,並以程式編輯的方式創建頁面
  • 使用我們的無頭 CMS Strapi 輕鬆管理內容並通過 API 自動提供內容,從而大大簡化後端開發
  • 使用由 Stripe 提供支持的完全客製化的購物車和結帳系統為客戶提供服務,允許用戶保存付款方式並訪問訂單歷史記錄
  • 將 JWT 身份驗證工作流程整合到註冊/登錄、忘記/重置密碼,並與社交媒體整合
  • 通過使用功能組件、React Hooks 和 React Context API 採用現代 React 最佳實踐
  • 利用 GraphQL 的強大功能以及 Strapi 和 Gatsby 兩者的原生支持與後端資料無縫互動
  • 將我們的專案從開發部署到 AWS 和 Netlify 上的實時生產應用程式
  • 通過使用 react-spring 和 react-lottie 添加動畫,為你的應用程式注入活力
  • 通過搜索引擎優化 (SEO) 和強大的自動圖像優化擴大你的覆蓋範圍並提高性能
  • 從龐大的組件程式庫中訪問組件,應用強大的 JSS 樣式解決方案,將常用樣式整合到主題中,並通過響應式設計根據螢幕大小調整樣式和佈局 – 所有這些都使用 Material-UI

要求

覺得 udemy 內建筆記功能太陽春?

可以使用 LN+ 幫助你使用 Notion 替代 udemy 內建的筆記功能

LN+ 會幫助你將課程影片與 notion 筆記關聯起來,所以你也不用去煩惱筆記在哪裡?或是要如何整理寫過的筆記

以下的影片示範你會看到透過 LN+ 的幫助,讓 notion 筆記視窗跟你在觀看的課程影片同步切換

課程說明

準備好跟著任何線上課程建構最現代、最全面、功能最豐富的全端電子商務平台!在本課程結束時,你將完全有信心自己構建具有複雜功能的大型應用程式。

超過 475 節課的內容超過 75 小時,這是一個完整的全端大師班!我將向你介紹有關基於下一代 JAMstack 架構,從頭開始建構功能強大的全端應用程式的所有知識。

JAMstack 是 Web 應用程式架構演進的下一步。它解決了傳統全端應用程式的許多限制和挫折。與傳統堆棧不同,JAMstack 不是特地組的特定工具,例如 MERN。相反,JAMstack 是一組概念,是如何構建現代全端應用程式以增強性能、安全性和可擴展性同時顯著改善開發人員體驗的理念。這意味著給我們的用戶更好的軟體,且讓自己能更輕鬆寫程式碼。

也就是有許多使用不同的工具集的 JAMstack 。對於我們的 JAMstack,我們將使用 React 與 Gatsby、Material-UI、Strapi、Stripe 和 Netlify。我們將使用這些工具創建一個生產就緒的電子商務平台,該平台比任何其他線上課程上所說的都更全面、功能更豐富!我們的專案包括你可以想像的關於在線銷售產品的所有內容,例如將產品分類、應用自定義排序和過濾、留下評論、將產品添加到最愛收藏夾列表以及訂閱以定期交付產品!為了啟用所有這些強大的功能,我們將整合一個完整的身份驗證系統,包括登錄/註冊、忘記/重置密碼和社交媒體身份驗證。這還將包括建立一個用戶設置頁面,允許用戶更改他們的密碼以及任何存儲的運輸或付款資訊。然後我們只需要構建我們完全自訂的購物車和結帳流程,讓我們的客戶實際使用他們的信用卡進行購買,並在他們的電子郵件中接收收據。

這是一個龐大的專案,它將指導你完成將複雜功能分解為可管理的分步行動計劃的過程。你將學會思考大型專案以及如何做出以後簡化系統的架構決策。即使本課程專注於電子商務,你將學會所有的基礎概念,轉用到每個全端專案。

JAMstack 的核心原則之一是只提供靜態生成的檔案。傳統上,在 React 中,就像 create-react-app 一樣,託管專案的伺服器會發送 JavaScript 包給客戶端瀏覽器處理和呈現。我們將使用靜態站點生成器 Gatsby 來扭轉這個過程。 Gatsby 將獲取我們的 React 程式碼並為我們生成生成的靜態 HTML 檔,這些檔可以直接提供給我們的用戶,以獲得閃電般的性能和更高的安全性。 Gatsby 是一個非常強大和廣泛的系統,具有非常有用的功能,例如程序化頁面創建、自動可訪問性增強和強大的圖像優化。

我們將看到 Material-UI 如何最大化我們的生產力,並降低使用 React 構建令人難以置信的界面的複雜性。我們將通過使用其龐大的組件程式庫(包含大多數 Web 應用程式中的所有常見元素)來減少樣板( boilerplate ) 並開始更快地工作。然後,我們可以使用 Material-UI 的樣式系統將我們的設計變為現實,以完全地自訂那些組件和其用來調整常用樣式的主題系統。幫助我們展示我們的辛勤工作的是在螢幕上始終如一地安排我們的組件的佈局系統。最後,響應式設計系統確保我們的設計在最大的螢幕到最小的行動設備上看起來都很完美。 Material-UI 擁有我們使用 JAMstack 構建令人驚嘆的前端所需的一切。

Strapi 是後端開發的未來。 Strapi 是一個無頭 CMS,它單槍匹馬地徹底改變並簡化了所有後端流程。無頭 CMS 還將 JAMstack 站點中的後端與前端分離,這更加靈活和可維護。 Strapi 為我們提供了一個非常簡單的用戶界面來管理我們的後端內容和資料,然後使用基於 JWT 的整合身份驗證系統自動創建 API,該系統具有與該內容互動的角色和權限。在傳統的全端架構中,創建資料庫模型來表示你的內容、輸入所有資料、創建 API 以提供該內容,以及為這些 API 配置安全和身份驗證都是完全獨立的任務,需要數天甚至數週才能完成。如果你從未做過全端或後端開發,我很難讓你真正了解這些任務的複雜性!大多數全端課程會讓你手動完成所有這些過程,因為至今為止還沒看到其他方法!

多虧了 Strapi,所有繁瑣且重複的程式碼都將立即自動化。但是,對於需要更進階配置的專案,所有底層資料庫模型都是完整且可訂製的。 Strapi 支持大多數主要資料庫,但我們將在本課程中使用 MongoDB,儘管由於 Strapi 的抽象 (abstractions ),這並沒有太大的區別。 Strapi 也是開源的,並且使用 React 構建,因此它是完全可訂製和可擴展的。 Strapi 是 JAMstack 上最好的無頭 CMS!

Stripe 是領先的在線商家支付處理器之一,並被 Lyft、Shopify 和 Zoom 等科技巨頭使用。 Stripe 是最靈活、最強大的支付 API 之一,具有廣泛而詳盡的文件。使用 Stripe Elements,你可以在幾秒鐘內設置一個安全的信用卡字段,Stripe PaymentIntents API 支持我們完全自定義的結帳流程來完成訂單。使用 Stripe 可以實現安全保存客戶付款資訊以供將來使用和跟蹤訂單歷史記錄等功能。

一旦我們的專案建成後,我們會將其部署為 Netlify 上的實時生產網站。 Netlify 毫無疑問是 JAMstack 網站的最佳託管平台。他們的首席執行官兼聯合創始人 Mathias Biilmann 實際上創造了這個詞!這意味著 Netlify 專門針對 JAMstack 站點進行了優化,通過自動應用我們的 JAMstack 最佳實踐(如原子部署、快取失效、使用 CDN 和基於 git 的 CI/CD)來提供尖端的性能、安全性和可擴展性。

我們還將涵蓋額外的主題,例如 React 中的 SEO、React Hooks、React 上下文、使用動畫創建流暢且引人入勝的界面、分頁、webhook、查詢字符串、表格資料、表單處理等等!

課程內容包括:

  • 了解下一代全端架構 JAMstack 背後的動機和理念
  • 通過學習 JAMstack,增加你在工作場所的機會和市場競爭力並領先一步
  • 通過使用功能組件、React Hooks 和 React Context API 採用現代 React 最佳實踐
  • 使用 Gatsby、Strapi 和 Material-UI 設置新專案
  • 像在實際工作環境中一樣僅基於設計檔工作
  • 使用無頭 CMS Strapi 簡化和自動化後端開發
  • 使用我們的靜態站點生成器 Gatsby 提高性能和安全性
  • 通過掌握 Material-UI 的集中樣式系統為你的應用程式創建主題
  • 學習如何使用響應式設計來確保你的應用程式在任何螢幕尺寸上都看起來完美!
  • 使用 Material-UI 網格系統完美對齊複雜的佈局
  • 將基於 JWT 的身份驗證系統與登錄/註冊、忘記/重置密碼、用戶設置和社交媒體整合
  • 構建由 Stripe 提供支持的完全定制的購物車和結帳系統
  • 保存多組運輸和付款資訊以供將來使用
  • 使用 react-lottie 和 react-spring 的動畫為你的應用程式注入活力
  • 完善你的 UI/UX 設計直覺並查看實際操作中的概念
  • 以編寫程式的方式發送電子郵件以處理收據、確認或重置密碼等事件
  • 使用 Gatsby 外掛在 React 應用程序式中自動化搜索引擎優化 (SEO)
  • 使用增強的伺服器配置和自定義域名將 Gatsby 前端部署到 Netlify 並將 Strapi 後端部署到 AWS
  • 強大的圖像優化技術,例如延遲加載、特定設備大小調整和自動轉換為下一代格式
  • 了解 MVC 模型以及如何將其用作 JAMstack 中的心理框架

除了終生訪問超過 75 小時的內容外,你還可以主動 Q/A 輕鬆獲得支持。

你沒有什麼可失去的——本課程提供 30 天退款保證,如果你不完全滿意!

JAMstack 是 Web 開發的未來,因此通過學習構建功能強大的下一代全端應用程式,在 React 開發人員中脫穎而出並脫穎而出。

目標受眾

  • 想要通過學習下一代應用程是架構 JAMstack 來領先一步的 React 開發人員。
  • React 開發人員:正在尋找一種更簡單、更快速的方式來啟動和運行乾淨、一致設計的應用程式。
  • React 開發人員:感覺自己了解 React,但在構建精美網站之前仍有更多需要學習。
  • React 開發人員:希望通過從頭開始構建綜合在線商店來了解電子商務。
  • 想要在後端資料和前端用戶界面之間構建複雜互動的 React 開發人員。
  • React 開發人員:希望使用尖端、簡化的工作流程來構建功能強大、完整的全端應用程式。
  • 想要掌握響應式設計並使他們的應用程式在任何螢幕尺寸上看起來都完美的 React 開發人員。
  • React 開發人員:有興趣將用戶身份驗證添加到他們的應用程式中,包括社交媒體整合。
  • React 開發人員:希望在實踐中更好地理解 UI/UX 設計原則。
  • React 開發人員:需要技能來幫助他們在典型開發人員中脫穎而出。
  • React 開發人員:對構建具有專業設計的流暢、流暢的應用程式感興趣。
  • React 開發人員:希望能夠構建任何交給他們的網站設計。
  • 想要將一個巨大的全端生產應用程式添加到他們的產品組合中的 React 開發人員。
  • 對希望進一步學習並將技能提升到新水平的初學者和專家做出反應。
  • 剛剛開始並正在尋找下一步的 React 開發人員。
  • 正在尋找現代架構具有基本 React 知識的全端開發人員。
  • 全端開發人員:尋求比傳統單體應用程式的挫折更好的開發人員體驗。
  • 全端開發人員:希望最大限度地提高其應用程式的性能、安全性和可擴展性。
  • 具有 React 經驗的後端開發人員:希望簡化他們的工作流程並自動化重複流程。
  • 後端開發人員:正在尋找一種更簡單的方法來在幾分鐘而不是幾天內構建具有角色和權限的強大 API。

講師簡介

Zachary Reece 軟體創業家

嘿!我是Zachary Reece,一個來自堪薩斯州威奇托的創業公司創始人。我在9歲的時候就開始建立網站,從圖書館的書中自學HTML和網際網路的知識。從那時起,我把所有的時間都花在學習UI/UX/圖形設計、數學、哲學,當然還有計算機科學。

現在,我繼續在低水平上研究JavaScript,以最佳化我所建立的 Web 和行動應用程式,同時開始研究我的第一個基於機器學習的應用程式。

我在21歲時創辦了一家定製軟體公司–Arc Development,為中西部地區帶來了快速、實惠和美觀的軟體。我希望能在Udemy這裡把我在整個過程中學到的技能傳授給我的學生們

英文字幕:有

  • 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

報名參加課程更新 coupon code

Sponsored by Udemy


追蹤 Soft & Share

✍ 不受社群推薦演算法影響,建議 Telegram/Discord/e-mail

幫我們個小忙!

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: