fbpx

應用 GraphQL 做 Vue 的全端開發 – 終極指南

以 Vue、 GraphQL、 Apollo 2、 Vuex 和 Vuetify 創建一個完整的如 Pinterest / Instagram 般的全端應用

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

  • 深入瞭解如何使用阿波羅伺服器2( Apollo Server 2 )和阿波羅推進器( Apollo Boost  )建立強大的全端應用程式
  • 瞭解如何使用 Apollo / GraphQL 處理客戶端和伺服器上的錯誤
  • 能夠實現基於會話( session-based )的 JWT 身份驗證到 GraphQL 應用程式
  • 整合 Apollo 與 Vuex 以做到更可靠和可擴充的狀態管理( state management )
  • Vue-Apollo 使用 Vue-Apollo 實現無限滑動( scrolling )功能
  • 使用 Heroku 和 Netlify 佈署全端 JavaScript / GraphQL 應用程式
  • 學習如何在客戶端和伺服器上編寫 GraphQL 語言中的查詢( queries )和突變( mutations )
  • 使用許多有用的 MongoDB 方法( methods )和功能( features )
  • 能夠使用 Vuetify CSS 框架建立富吸引力的精緻 UI
  • 熟悉所有最好的 ES6 / 7特性,如非同步 / 等待( async / await )、解構( destructuring )、展開運算符( spread operators )、箭頭函式( arrow functions )等

要求

  • Vue 的基本瞭解
  • 對 ES6 JavaScript 有基本理解將會有所幫助,但這並不是必須的

課程說明

包括阿波羅伺服器2( Apollo Server 2 )、阿波羅推進器 ( Apollo Boost )和非常新的 Vue CLI 3!

有興趣用 Vue 和 GraphQL 建構下一個級別的應用? 不要再看了!
這門課程是你學習的一站全包指南。

  • 使用 Vue 和 GraphQL / Apollo 2完成 CRUD 功能(建立、讀取、更新和刪除)
  • 最新最棒的阿波羅( Apollo )工具: Apollo Server 2 、 Apollo Boost 和 Vue Apollo
  • 使用新的 Vue CLI 3 建立 / 臨時架  Vue 應用程式、新增外掛並佈署到 Web
  • GraphQL 語法,包括型別 (僅大小無方向的純量 / 物件) ,並使用 typeDefs 建立模式( schemas )
  • 在客戶端和伺服器上編寫和執行 GraphQL 查詢( queries )和突變( mutations )
  • 基本的 Apollo  功能,比如更新功能、樂觀回應( optimistic responses )和重新獲得查詢( refetching queries )
  • 使用新的 AuthorizationError 和 formatErrors 功能著手 Apollo Server 2錯誤處理
  • 基於角色的使用者身份驗證JSON Web 令牌( Token )
  • 用 Vuex 與 ApolloClient 配合做狀態管理( state management )
  • 使用 Vuetify ( Vue 的材質設計組成程式庫 ) 的行動優先( mobile-first )設計做出令人驚嘆 UI
  • 在 Vuetify 的幫助下做表單驗證( Form Validation )
  • Vue 路由器 (包括保護路由、頁面轉換、路由器道具和動態片段)
  • 使用許多 MongoDB 方法( methods )和運算符( operators )來建解析器( resolvers )
  • 使用 MongoDB 搜尋功能( Search Functionality )
  • 進階的 GraphQL 功能,例如無限滑動( infinite scrolling )
  • GraphQL 速記( shorthands )讓模式( schemas )和查詢( queries )簡潔,比如輸入( inputs )和片段( fragments )
  • 在 Chrome/Firefox Vue 開發工具擴展套件到 Vue / Vuex / Apollo 除錯上大量工作
  • 使用 service Now 佈署 Vue / GraphQL 應用程式
  • 高階使用者介面( UI )技巧,包括通知載入骨架
  • 還有更多

我們要建什麼? 課程基於什麼製作?

整個課程在實際應用的背景下,我們將真實地從第一行程式碼開始到佈署在網路上實際做給你看。

我們將建立一個叫做 VueShare 的圖片分享社交應用程式,類似於 Pinterest 或 Instagram。應用程式經過驗證的使用者將能夠喜歡/不喜歡、分享、評論、搜尋、編輯和刪除和圖片相關的貼文。

跟著我們前進,這門課程將如何發展?

在課程開始的時候,我們將討論開始所需的 GraphQL / Apollo 基本概念,然後深入建立我們的應用程式。 我們將建構我們的後端,包含建立一個 GraphQL 伺服器和資料庫(由 MLab 託管) ,以及如何使用 MongoDB 編寫解析器函式( resolver functions )。 然後我們將轉移到前端,建立我們的 Vue 應用程式,並將它與後端連接起來,開發一個介面,用 Vue、 Vuetify 和 Vue Apollo / Vuex 建立客戶端功能。 我們將學習如何使用 Apollo 來編寫和執行查詢( queries )和突變( mutations )來獲取和修改我們需要的資訊。 一旦我們學過並整合我們應用程式的所有基本功能(如上所列) ,我們將繼續將我們的應用佈署到網路上。 在佈署之後,對於那些想要堅持使他們的應用真正準備好的人,我們將介紹一些很酷的功能,使我們的應用更加實用、吸引力和可靠。

我想盡我所能使這門課儘可能全面,同時提供你以互動方式學習新技術的快車道。 GraphQL 在網路開發社群是一個令人興奮的新技術,且新的 Apollo 釋出,如 Apollo Server 2 和 Apollo Boost,使得運用 GraphQL 比以往任何時候都更加容易。

現在是開始使用 GraphQL 的最佳時機,尤其是作為一個 JavaScript 開發者。 加入這個課程,讓我們開始吧!

目標受眾

任何想學習如何使用 Vue 和 GraphQL 建構全端應用程式的人

講師簡介

Reed Barger  全端 Web 開發人員

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

英文字幕:有

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

參加課程 ♥找優惠折扣碼?

Sponsored by Udemy

也許你會有興趣

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

發表迴響

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: