fbpx

Gatsby JS & Firebase: 混合的 Gatsby 即時 + 靜態網站

Contents

使用即時 firestore、雲端功能、儲存、授權、 Gatsby + React hooks & GraphQL 建立 Gatsby JS 靜態網站( Static Site )。

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

  • 增加你作為一個 React 開發人員的價值
  • 瞭解 Gatsby
  • 設定 Gatsby 以便從儲存在 Firebase 中的資料生成頁面
  • 使用 firestore 實施即時聊天/評論部分
  • 使用 firebase 身份驗證服務提供註冊和登入功能
  • 使用 firebase 雲端函數進行伺服器端身份驗證
  • 在雲端儲存中使用 firebase 雲端函數來上傳檔案
  • 瞭解如何使用 Gatsby JS 應用程式中的 GraphQL 查詢 firestore 資料

要求

基本理解 React、git、終端命令和 npm 是必需的,其他一切都將在課程中說明

課程說明

作為一個前端/React JS/Gatsby 開發人員,你想增加自己的價值嗎?

那麼這個 React Hooks 的 Gatsby JS & Firestore 課程就是為你準備的!

學習運用 Firebase 的 Gatsby.JS 框架來提升你的 React 能力 – 這是一個非常棒的混合堆棧( HYBRID stack ),我們可以在 Gatsby.JS 中從 firestore 中儲存的資料生成靜態頁面,同時也支援動態和即時功能,比如登入/註冊和即時聊天和評論

我們將建立 “Gatsby book club” – 我們將研究如何使用 GraphiQL 瀏覽器工具通過 GraphQL 在 Gatsby 中查詢 Firestore 資料

我們將設定 Gatsby 以基於儲存在 firestore 中的資料建構靜態網站( Static Site  ),並基於 GraphQL 查詢建構 firebase 雲端儲存。我們將使用 firestore 的即時功能為每本書實施即時聊天/評論部分,並將使用 firebase 身份驗證服務為 Gatsby 應用程式提供即時註冊和登入功能。

一個應用程式沒有管理部分就不完整,所以我們將在我們的 Gatsby 應用程式實現一個管理部分,允許管理員建立新的作者和新的書籍,以及使用附有 firebase 雲端儲存的 firebase 雲端功能實現檔案上傳功能。

一旦我們完成了我們的 Gatsby 應用程式,我們將看看如何使用 Netlify 部署 Gatsby 網站的實時運作版本,並實施一個在添加新書時 Gatsby 網站會自動重建。

用 Gatsby 快速超越競爭!

Gatsby.js 建立有可能的速度最快網站。與其給予請求後等待生成頁面,Gatsby 預先建立多個頁面並將它們提到全球伺服器雲端(我們將使用 Netlify) – 隨時可以在你的使用者面前呈現,無論他們在哪裡。

Gatsby 的一些優勢包括:

  • 無需等待 API 反應
  • 無需等待根據請求的資料呈現元件
  • 不需載入旋轉器( spinners )!
  • 無需等待伺服器編譯一個頁面餵給瀏覽器 – 這些頁面已經由 Gatsby 預先編譯,並且可以立即提供給你的使用者!

我們肯定會在這 Gatsby 課程涵蓋非常多的資訊!

學生們對這門課的看法:

⭐️⭐️⭐️⭐️⭐️ “這個 Gatsby.js 課程的創作非常出色。強烈推薦中級 React.js 開發人員來上。”- Siegfred Balona

⭐️⭐️⭐️⭐️⭐️ “對於已經熟悉 React 的開發人員來說,這是一個非常好的課程。我花了 4 天時間才完成課程。它涵蓋了 Gatsby 的許多很實用的部分,可以立即適用於實戰專案。我必然會從 Tom 那裡學到更多的課程。” – Ye Joo Park

⭐️⭐️⭐️⭐️⭐️ “講師的闡述清楚明瞭,課程很好地被建立。我建議你事先了解關於 Gasby 的要點,因為這裡有許多半進階的 Gatsby 技巧(這是一個很好的學習)。” – Ole Ulrik Skipperud

目標受眾

  • 希望增加自己作為 React/前端開發人員價值的 Web 開發人員
  • 希望學習如何使用 Firebase 特性(如 firestore、雲端功能和雲端儲存)的 Web 開發人員
  • 想要學習 GraphQL 並使用 GraphQL 查詢 Firestore 資料的 React 開發人員
  • 想要學習如何使用 Gatsby 框架生成靜態網站的 React 開發人員

講師簡介

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

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

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

英文字幕:有

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

🙌 如何有效率地管理 ChatGPT 輸出與整理自己的 ChatGPT 提示( prompts )使用情境?LN+ for Web 已經針對 ChatGPT 的整合做最佳化


🙌 讓 Notion AI 成為你線上學習的得力助手,詳細操作請參考 – 使用 Notion AI 功能來為 udemy 的課程做摘要總結


  • 點選這個優惠連結 課程特價 | Udemy 永久擁有課程 NT370 起( 請登入 Udemy|按過“優惠連結”後到”報名參加課程“連結網頁做更新 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣


不受 FB 演算法影響,歡迎透過 e-mail 訂閱網站更新

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: