使用 Nuxt2 和 Firestore 建立一個新聞服務

用全新的 Nuxt2、 Firestore 和 Vue Material 建立一個完整的、前端到後端的全新新聞聚合器

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

  • 如何在建構自己的 Nuxt 應用程式中實現核心 Nuxt 概念(中介軟體、外掛、模組頁面 / 路由等)
  • 在建立一個專業的、完整的應用程式的背景下,學習使用各種 Nuxt / Vue 功能的實用面
  • 使用本課程所涉及的技術 / 材料,在製作很酷的、實用的網路應用程式時激發更多好主意
  • 迅速(但是徹底)建立一個 Nuxt 專案 – 從開始到結束

要求

  • 一些 Es6 JavaScript 的經驗(首選,但不是必需的)
  • 熟悉基本的 Vue 概念 (即 v-for、v-model、v-bind、v-on)

課程說明

有興趣用 Nuxt 和 Firestore 建構令人印象深刻的、實用的單頁 / 伺服器渲染( server-rendered )應用程式嗎? 這堂課為此設計!

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

  • 用 Nuxt 2、 FirestoreVue Material 建立一個完整的新聞提要 / 聚合器,從第一行程式碼到上網佈署
  • 完整的 CRUD 功能(建立、讀取、更新、刪除),採用新的實時 NoSQL Firestore 資料庫
  • 全面的整合 News API,以便動態地獲取世界各地的頭條新聞(按新聞類別、國家、新聞來源等)
  • 新增搜尋的功能,根據搜尋條件、日期和各種準則
  • 建立使用者能將標題加書籤並添加到其個人內容來源的功能
  • 在我們的應用程式中將實時新聞標題轉換成分開單獨的頁面,使用者可以對此發表評論
  • 使用 axios (Nuxt 模組、代理、設定標題)製作 HTTP 請求的廣泛教學
  • 內建 Nuxt data-fetching (資料抓取),以非同步資料( asyncData )和拿取( fetch ) 的方法
  • 使用 Nuxt 外掛以讓第三方程式庫( libraries )配合我們的 Nuxt 應用程式
  • 對新聞文章實施喜歡(liking ) / 同意加讚( upvoting )等使用者評論的功能
  • 用 Cookies 和 LocalStorage 做 JSON Web Tokens 的認證與會話( session )管理
  • 使用 Firebase Auth REST API使用者身份驗證
  • 在我們的登入和註冊表單用 Vuelidate 進行表單驗證
  • 用 Vuex 做狀態(state )管理,以簡單、直接的模式
  • 利用材料設計程式庫 Vue Material 建立具有吸引力、響應性強、功能豐富的使用者介面
  • Vue 路由器的基本特性(關於 Nuxt)
  • 建構 Nuxt 中介軟體( middleware )功能,作為身份驗證檢查和導航守衛
  • 使用 Vue 過濾器將日期 / 時間值以流行的軟體套件 date-fns格式化
  • ES6 / 7 上進行大量的工作,尤其是非同步( async ) / 等待( await )函數
  • 有用的瀏覽器工具,如 Vue / Nuxt Dev Tools
  • 運用 create-nuxt-app CLI 引導( Bootstrapping )新的 Nuxt 2 專案
  • 使用全球佈署服務將已完成的新聞應用佈署到網路
  • 還有更多!

我們將在這課程中建立什麼?

我們將建立一個叫做 NuxtNews 的實時新聞源( news feed ),使用者可以在這裡看到來自世界各地的新聞標題,通過搜尋條件、日期和搜尋條件,使用者可以他們的國家、新聞類別、新聞來源來選擇新聞標題,然後在我們的 APP 裡看看這些標題。 當用戶經過身份驗證(使用 JSON Web token 和 Firebase Auth REST API)時,將可把他們想要儲存的標題加書籤,並放入他們自己的個性化新聞源中,評論他們選擇的文章,並讓其他使用者在這些個人標題頁面上加喜歡( like) /贊成( upvote )評論。

這真的是一個功能齊全的應用程式,在這個過程中你將學到許許多多的 Nuxt / Vue 概念,所以讓我們開始吧!

目標受眾

  • 希望用 Nuxt 建構令人印象深刻的下一級應用程式的開發者
  • 想要應用技能開發 Nuxt 應用程式的 Vue 開發者
  • JavaScript 開發人員,有興趣做轉變,跳躍到流行的 JS 程式庫的伺服器端(Nuxt / Next JS)
  • 想要建立一個很酷的、實用的網路應用程式的軟體工程師

講師簡介

Reed Barger  全端 Web 開發人員

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

英文字幕:有

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

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

Sponsored by Udemy

也許你會有興趣

Soft & Share 工具市集

  • 開發樣板
  • 這是 Soft & Share 新推出的服務 – 工具市集,收集了一些軟體服務/工具的優惠方案,歡迎來逛逛!

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

 

發表迴響

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

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: