使用 Angular 8 ﹑Node.js 和 MariaDB 開發 Web 應用程式實戰課程

透過使用 Angular Universal,Node.js,Sequelize 和 MariaDB 建立自己的 SEO 友好部落格來學習建構真實世界的 Web 應用程式。

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

  • 從頭開始使用 Angular(Universal) 建立一個 web 應用程式
  • 使用 Node.js 在後端實現一個 web 服務
  • 使用關聯式資料庫MariaDB 管理系統
  • 使用 JSON Web Tokens (JWT)實現身份驗證
  • 使用 Sequelize 做物件關聯對映 ( ORM )
  • 使用 IISNode 在 windows server 上釋出 web 應用程式
  • 實現 HTTP 攔截器( Interceptors )
  • 使用 Angular Route Guards 限制元件訪問
  • Implement a JavaScript Middleware 實現一個 JavaScript 中介軟體
  • 使用 Facebook 共享的偵錯程式
  • 如何更新你的web 應用程式到一個新的 Angular 版本

要求

課程說明

我知道你在想什麼。 又一個 Angular 課程? 我保證這個課程不一樣!

在這個課程中,我們不會包含 Angular 的絕對基礎,讓我們誠實以對-在那裡已經有足夠多的 Angular 課程。

相反,我們將專注於使用 Angular 和 Node.js 提供的工具建構一個真實的 web 應用程式。

我們將建立一個 SEO 友好的部落格,這意味著我們將使用 Angular Universal 建立一個伺服器端渲染前端。

在後端,我們將使用 Node.js 建立 web 服務,我們將資料儲存在 MariaDB 中,並將物件對映到資料庫中,我們將使用物件關係對映程式庫-Sequelize 。

最後,我們在一個具有 IISNode 的 windows server 上釋出整個程式。

Web 應用程式本身將是一個部落格,可以擴展到一個大的新聞或雜誌網頁應用程式。

我們從顯示一些文章開始,然後我們將建構一個管理儀表板,其中包含身份驗證(我們使用 JSON Web token 來更具體化)和建立新文章、修改它們等選項。

讓我們更深入地看看你在這門課程中將學到什麼:

基礎部落格

在這一部分,我們將開始我們的 Angular 專案和開發部落格,以便它將離線工作-沒有任何網路服務或資料庫。 實際上,如果你想在你的 Angular 應用程式中新增你所有的部落格文章,你可以釋出這個部落格。

Meta & Open Graph Tags

正如標題可能已經暗示,這裡我們將新增元標籤( meta tags )和開放圖形標籤。 因此,搜尋引擎和社交媒體平台需要找到你的部落格,並在分享文章時正確顯示這些資訊。

但是請記住,如果你堅持使用客戶端呈現的 Angular 應用程式,那麼這些標記將不一定能夠運作。 Google 承諾能夠抓取客戶端呈現的 Angular web 應用程式,但是根據許多部落格和開發者的經驗,我們還沒有達到這個水平。

除此之外,社交媒體平台仍然需要適當的原始碼或標籤來正確地蒐集你的網站。

Angular Universal

一個簡短但重要的部分-我們將在這裡實現伺服器端渲染(SSR)。 這就是 Angular Universal 的意義所在。 當你完成伺服器端渲染後,你的標記將在您的部落格源碼中可用,你的頁面渲染速度也會快得多。

後端使用 Node.js

是時候做後端了。 我們將建立一個新的專案,使用 Node.js 的 web 服務。 現在這些文章將來自 web 服務。

使用 MariaDB & Sequelize 為資料庫 & ORM

我們擴展了 web 服務,並最終將我們的 web 應用程式與資料庫連線起來,這樣文章現在就儲存在 MariaDB 中了。 此外,我們將使用 Sequelize 在模型和資料庫表之間進行物件關聯對映。

管理儀表板

本質上,部落格與所有層都可以運作。 我們有客戶端、 web 服務和資料庫。 但是新增新文章和修改它們有點麻煩。 因此,讓我們新增一個管理面板,在這裡我們可以獲得所有文章的概述,以及我們可以在哪裡建立、更新和刪除它們——這意味著建構所有 CRUD 操作。

認證

管理儀表盤工作正常,但直到現在,每個人都可以使用它。 在本節中,我們通過新增使用 JSON web 令牌的身份驗證來改變這一點。 此外,我們還將介紹 Angular 攔截器、路由守衛和一個小型中介軟體。

IISNode

最後,我們可以部署我們的部落格。 在本節中,你將學習如何在具有 IIS 服務的 Windows 伺服器上建構和釋出 Angular Universal 客戶端和 Node web 服務。

我們使用什麼工具?

我們在本課程中使用的所有工具都是免費的。

  • Visual Studio Code ——微軟為 Windows、 Linux 和 macOS 開發的原始碼編輯器。 我們將為 Angular 客戶端應用程式和 Node.js web 服務使用這個程式碼編輯器。
  • HeidiSQL – 一個免費的開源管理工具,我們將與 MariaDB 一起使用和安裝。 它非常適合檢視我們要儲存在資料庫中的資料。
  • Postman-API 測試的最佳選擇。 在本課程的後面部分,我們將使用 Postman 運行對 Node.js web 服務的 API 呼叫。
  • Google Chrome-沒有必要使用谷歌瀏覽器,任何帶有開發工具的網頁瀏覽器在這裡都很有用。 我們將使用開發人員工具進行控制台輸出,並檢查 web 應用程式的 HTML。
  • Git-這一個是完全可選的。 我推薦使用 Git 作為原始碼控制。 你可以在本地端使用它,或者把你的程式碼推送到類似 GitHub 的雲端服務上。 例如,本課程中完整的程式碼可以在 GitHub 上找到。

這門課是為誰而設的?

本課程適合..。

  • 已經對 Angular 有點經驗了
  • 想用 Angular 和 Node.js 來提高自己的水平
  • 學習使用 Angular、 Node.js、 MariaDB 和 Sequelize 從頭開始建構最新的網路應用程式的技能
  • … 希望建立一個作品組合網站或私人部落格完全不使用任何第三方服務

講師是誰?

Patrick 是一個有經驗的網頁開發者,在這個領域已經工作了超過15年。 擁有幾門關於 Udemy 的課程,超過30,000名學生和超過3,000條評論,他知道你在一門關於網路開發的課程中尋找什麼。 他在德國一家市場研究公司擔任全職開發人員,在 Udemy 和 YouTube 上教授線上課程,還舉辦一對一的線上講座。 讓我們看看,其他學生是怎麼說的:

⭐⭐⭐⭐⭐

“Patrick 是一位非常有天賦的程式設計師和教育家。 他毫不費力地編寫程式碼,並且出色地解釋了概念、程式碼結構以及所有內容如何相互作用。 他很有耐心,樂於助人,能夠有效地與初學者和具有更高級技能的人合作。 如果您想學習程式設計的任何方面,你一定要聯繫 Patrick。 他是我合作過的最好的教練之一,我給他最高的推薦” – Mike

⭐⭐⭐⭐⭐

“非常好,節奏輕鬆,簡單易懂! 這是適合初學者和中級開發人員的好課程。 謝謝你!” -Tri

⭐⭐⭐⭐⭐

“快速且有用的課程可協助人們快速了解 WCF RESTful 服務。 我喜歡這門課程,因為 Patrick 教練直接抓住了主題的核心,而沒有進行不必要的討論。 當人們在課程上花費的時間有限時,這就是最理想的課程。 非常好的課程! 謝謝你!” – Sundararajan

⭐⭐⭐⭐⭐

“Patrick 是一位出色的教練,因為他很有條理,了解自己的知識,並花時間詳細解釋一切。 對於 WCF 新手開發者來說很棒的課程 !” – Evarardo

⭐⭐⭐⭐⭐

“我喜歡這種節奏、逐條介紹的簡單性以及作者說話的節奏和清晰度。 很不錯!” – Stephen

⭐⭐⭐⭐⭐

Something something something something something

“喜歡你一次透過一個短視頻完成每個步驟的方式 – 讓它更有意義,並且在需要時更容易消化和分解。 也感謝您對他人問題的全面答覆! 幹得好,我期待看到更多這樣的視訊,因為我從你身上學到了很多東西! 感謝大家的辛勤工作和奉獻!” – Adrienne

⭐⭐⭐⭐⭐

“單頁應用程式(SPA)已經成為Web應用程式專案的一個非常重要的要求。 本課程為我提供了一個關於如何創建“SPA”的很好的例子。 涵蓋了從建立專案、HTML 頁面、每個檔案的詳細建立直到部署的整個過程。 非常好。 我向跟我一樣開始使用 SPA 概念的系統分析師推薦它。 如果你的解決方案中的某些資訊不起作用,那是因為你做錯了什麼。 一切都很好,教練很清晰,給我們提供了良好而完整的資訊。 對我來說,這門課非常棒。” – Michel

⭐⭐⭐⭐⭐

“一如既往,Patrick God 的課程是一個不錯的學習選擇。我有機會觀看他的其他課程,我不得不說,我選擇這個人做了正確的事情。他非常直率,說話很好,讓我快速了解我需要的一切.” – Paulo

目標受眾

  • 每個想要學習如何使用 Angular,node.js,Sequelize 和 MariaDB 建構一個對 SEO 友好的 web 應用程式的人
  • 想透過 Angular & node.js 提升自己技術的學生

講師簡介

Patrick God 熱情的軟體開發者和線上教師

寫程式碼是我的動力。 無中生有地開發軟體是我真正熱愛的一項技能,我想與你分享這種製作東西的驚人感覺。

十幾歲的時候,我開始學習幾種程式語言,從我第一次在 Commodore 64上玩遊戲開始,我就一直想要開發軟體。 在我的學士學位和碩士學位期間,我加入了各種公司,專業開發桌面和網路應用程式以及視訊遊戲,並且一直渴望提高我的技能,我已經從事這項工作超過15年了。

對於我來說,編寫和教授程式碼最重要的部分就是玩得開心。 如果某些方法對你有效,並且結果是可維護的,並且你對你的結果感到樂趣,那麼你正在以正確的方式做它。 我不在乎你是否總是使用鍵盤或者時不時地切換到滑鼠,所謂的最佳實踐並不總是最好的或者最實際的,我想教你開發一種在業界中可行的軟體,一種適合你的並且能讓你開心的軟體。

英文字幕:有

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

  • Udemy 永久擁有課程 許多課程約 NT400(點擊連結看更多)
  • 年訂閱每月 NT350 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
  • Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
  • 手機上點選優惠連結看到的價格比電腦上看到的貴
  • $代表當地貨幣, 如在台灣為 NT
  • 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現

報名參加課程

Sponsored by Udemy


也許你會有興趣


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

發表迴響

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

由 WordPress.com 建置.

Up ↑

探索更多來自 Soft & Share 的內容

立即訂閱即可持續閱讀,還能取得所有封存文章。

Continue reading