fbpx

Gatsby JS & Shopify:Gatsby 電子商務網站[Gatsby 2021]

Gatsby 電子商務堆疊 – 使用 Gatsby JS 和 Shopify lite 來建立 Gatsby 電子商務商店(附有動態購物車和結賬!)。

報名參加課程更新 coupon code

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

  • 學習 Gatsby
  • 學習如何使用 Shopify
  • 使用 GraphQL 從 Gatsby 查詢 Shopify 資料
  • 使用 Gatsby 和 GraphQL 建立一個功能齊全的電子商務網站
  • 使用 React 風格的元件來設計我們的網站
  • 建立一個行動優先的響應式電子商務佈局
  • 為我們的產品建立一個動態購物車和動態庫存檢查

要求

課程說明

你想提高你的 React JS 技能,增加你作為前端開發的價值嗎?

  • “Gatsby 讓你用你的資料建立極快的網站,無論其來源如何。將你的網站從傳統的 CMS 中解放出來,並飛向未來。”

在這個課程中,我們將建立一個 HYBRID 動態+靜態的 Gatsby 電子商務網站,使用 Shopify 來管理我們的產品資料和訂單。

透過學習帶有 Shopify 後台的 Gatsby.js 來提高你的 React 技能集! Gatsby JS 使用 React JS 和 GraphQL 從一個給定的資料集生成和建立靜態頁面。本課程將探討如何設定 Shopify 來管理我們的產品和客戶訂單,同時使用 GatsbyJS 從Shopify 資料中生成一個極快的伺服器渲染的 React 網站。

在本課程中,我們將建立一個功能齊全的電子商務網站,研究 GatsbyJS 和 Shopify 的初始設定和開發,在 Gatsby 中基於 Shopify 產品和收集的資料建立 React 元件,用 GraphQL 查詢 Shopify 資料以自動生成靜態頁面。

我們還將建立一個動態購物車和庫存檢查,以確保產品是即時可用的。

我們將研究如何使用 GraphiQL 瀏覽器工具用 GraphQL 查詢 Shopify 資料。一旦我們熟悉並適應了 GatsbyJS 和 Shopify的開發,我們將繼續使用 Netlify 建立和部署一個即時網站,每次我們更新 Shopify 後台的內容時,都會重新建立靜態網頁。

建議你有 React 的基本知識。我們將涵蓋 Gatsby.js、Shopify、GraphQL 和 styled-components 的所有其他內容。

用 Gatsby 加速超越競爭對手

Gatsby.js 可以建立最快的網站。Gatsby 不是在請求時等待生成頁面,而是預先建構頁面,並將其提升到全球伺服器雲端(我們將使用 Netlify 來實現)–無論你的使用者在哪裡,都可以立即交付給他們。

使用Gatsby的一些優勢包括。

  • 無需等待 API 響應
  • 無需等待根據請求的資料渲染元件
  • 無需載入旋轉器
  • 無需等待伺服器編譯頁面以提供給瀏覽器–這些頁面已經被 Gatsby 預先編譯,並準備好即時提供給你的使用者!

在這個 Gatsby 課程中,我們當然涵蓋了很多內容!

目標受眾

  • 希望提高自身價值和技能的 React 開發者
  • 想在遊戲中領先並比普通開發者學習更多知識的 React 開發者
  • 想快速生成和建立電子商務網站的開發者

講師簡介

Tom Phillips 前端網頁專家和行動開發者  ( 更多講師主講課程介紹 )  

多年來,Tom Phillips 一直在英國開發前端網頁和行動應用程式。 在這段時間裡,他不得不為初級開發人員準備並教授最新的前端網頁框架的多門課程,並在初級開發人員的早期指導他們。 通過這樣做,Tom 找到了有效的方法來教授和打破許多開發人員在嘗試開始新框架時所面臨的常見複雜問題,特別是在這樣一個迅速變化的領域,作為前端網頁開發。 現在他把這些方法應用到他的 Udemy 課程中了!

早在 Tom 自己還是個初級開發人員的時候,他很幸運地受到了這個領域專家的指導。 這使得他在職涯中得到了迅速的進步,並且在他作為專家的前端開發人員的時候理解和建構了多個大型專案。 現在 Tom 正在扮演專家的角色與責任,分享他的知識。 通過參加 Tom的一門課程,獲得與 Tom 一樣的指導並在前端網頁開發中快速追蹤你的理解和知識。

英文字幕:有

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

報名參加課程更新 coupon code

Sponsored by Udemy

也許你會有興趣

找其它課程?試看看 Soft & Share 網站搜尋引擎

✍ 搜尋結果太多?可參考 Soft & Share 搜尋引擎使用技巧


追蹤 Soft & Share

幫我們個小忙!

Comments are closed.

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: