fbpx

在 90 分鐘內使用 React 和 GraphQL 建立一個線上商店

課程簡介

從頭開始建立一個完整的電子商務應用程式,使用 React、GraphQL、Stripe 和 Headless CMS Strapi

課程介紹:English 简中

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

  • 用 React 和 GraphQL 建立電子商務應用程式
  • 使用 Headless CMS Strapi 在非常短的時間內製作全端( full-stack )應用程式
  • 瞭解如何使用 react-stripe-components 將支付服務 Stripe 與 React 應用程式整合
  • 用郵件客戶端 SendGrid 傳送電子郵件給你的 React 應用程式使用者
  • 建構具有吸引力的行動第一使用者介面,使用新的來自 Pinterest、Gestalt 的 React 元件程式庫
  • 用 Heroku 和 Now 一起將 React 應用佈署到 web

要求

  • 一些  React  的經驗(即用過 React Create App 建立了幾個專案)
  • 先前對 ES6 特性的瞭解將有幫助(擴充套件運算子、解構、物件速記語法)

課程說明

有興趣在創紀錄的時間內用 React 和 GraphQL 建構令人印象深刻的全端應用? 這就是你的課程!

以下是我們將要討論的內容:

  • 建立一個完整的電子商務應用程式,從頭開始使用 React、GraphQL、Stripe 和 Headless CMS Strapi
  • 在客戶端和伺服器上編寫和執行 GraphQL 查詢
  • 使用 GraphQL 執行精確的查詢和搜尋操作
  • 用 Stripe 處理信用卡支付和建立訂單
  • 使用 React-Stripe Components 程式庫整合 Stripe 與 React
  • 使用 Headless CMS Strapi 進行閃電般快速地專案建立和原型設計
  •  JWT 使用者認證做登入( sign in ) / 註冊( sign up )
  • 用 email 服務 /API SendGrid 向用戶傳送電子郵件
  • 建構獨特的、有吸引力的、行動第一的使用者介面( UI ) 使用新的 React Component 程式庫、Gestalt
  • 為已驗證的使用者建 React 裡的私有路由
  • 使用 LocalStorage API 進行廣泛的工作以儲存客戶端上的資料
  • 給我們的使用者 Toast 通知,反饋使用者的成功或錯誤的行為
  • 用程式庫 React Spinners 自訂載入動畫
  • 使用 CSS Flexbox響應式設計( Responsive Design )
  • React Router 4( 路由 params、歷史物件、withRouter、NavLinks 等)的基本運作
  • 使用 ES6 / 7進行了大量的工作,特別是非同步 / 等待函數(連帶錯誤處理)
  • 使用 HerokuNow 將應用程式佈署到網路
  • 還有更多!

這門課程的內容是什麼?

在整個過程中,我們將建立一個叫做 BrewHaha 的線上商店,這是一個電子商務應用程式,允許使用者按需求訂購飲料。

這將是一個從頭開始的全端應用程式,由 React 和 GraphQL 在 Node API 上建立的工具 Strapi。 我們將建立並使用 MLab 託管的 MongoDB 資料庫。 它將利用行業知名的工具,如 Stripe 處理 React app 內的信用卡支付,並採用電子郵件客戶端 SendGrid 傳送電子郵件給我們的使用者,在他們執行完某些行動(比如付款)後傳送電子郵件。

我們為什麼能快速建構我們的應用程式 (90分鐘內)?

讓我們的應用程式快速開發出來的祕訣是通過 Headless CMS – Strapi 的幫助。 它是一個工具,只需一個命令,將建立一個完整的 Node API 和管理面板,和我們的資料互動。 最後,這將使得使用 React (和所有 JavaScript 程式庫)建構完整的應用程式變得更加容易。 我們不需要為我們未來建立的專案重新設計輪子——我們在應用程式中需要做的基本事情(資料管理、角色和權限、認證)將變得更加容易

在建立我們的應用程式時,我們不會走捷徑。 到最後,我們將真正擁有一個完整的應用程式,我們可以將它佈署到網路上,讓訪問者註冊,新增產品到他們的購物車上,檢視他們的商品,並處理他們的信用卡支付!

什麼是 Headless CMS?

Headless 指的是缺少一個前端; 換句話說,一個 Headless 的 CMS 不能給我們的應用程式客戶端進行互動(我們將在 React 中做) ,它給我們提供了一種更好的方式來處理我們應用程式中的資料,如你將於課程中見到。 CMS 是 Content Managment System (內容管理系統)。 它為我們提供了一個豐富的、直觀的介面,在我們的專案中管理內容! 輕鬆地建立新的資料型別,管理使用者的角色和權限; 一般來說,給我們在一個方便的地方對我們的應用程式進行廣泛的控制。

如果你以前沒做過內容管理系統,那麼你就來對地方了。 我會告訴你如何用 Strapi 起始和執行,建立一個 Node 後端和完整的 API,在我們的應用程式中訂製外掛和功能,並且快速的提高效能。

目標受眾

  • 任何擁有至少兩個月 JavaScript 程式庫 React 經驗的人
  • 有興趣製作實用的真實應用程式的初學/中級 React 開發人員
  • 在尋找如何快速做專案建構和原型的 Web 開發人員
  • 希望開始(或繼續)使用 React 和 GraphQL 建構應用程式的開發人員

講師簡介

Reed Barger  全端 Web 開發人員 ( 更多講師主講課程介紹 )

我是一個充滿熱情的網頁開發者,熱衷於學習和教授我所知道的東西。 我相信通過實踐學習,這種哲學在我教授的每一門課程中都有體現。 我喜歡探索新的網路技術,我的課程專注於給你在今日快速發展的行業中擁有優勢。

英文字幕:有

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

優惠資訊

如何購買這門課程比較划算?可以參考課程合購優惠方案


報名參加課程

Sponsored by Udemy

也許你會有興趣

 歡迎使用 e-mail 訂閱 Soft & Share 

發表迴響

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: