Node.js 網站開發 with React.js

0 seconds of 2 minutes, 16 secondsVolume 0%

00:00

02:16

Node.js 網站開發 with React.js

Node.js 網站開發課程，學習 Node.js 核心概念，掌握檔案＆資料庫操作、Server side render 等概念，接著帶你認識 React.js、Redux 框架使用，作為前端的 framework，帶你做出簡易的論壇網站。

Hahow AI 學習升級

56.4 k 的人也在觀看

3.1

(21)

關於課程

課程包含

包含 1 章 38 單元、2 項作業

課程時長

5 時 58 分鐘

課程總人數

323 位同學

觀看限制

不限觀看次數，還會附贈完課證書

學習升級

Hahow AI 學習助教

無需額外付費

即時問答、重點整理、測驗理解，讓知識派上用場

課程內容

Node.js在物聯網方面大量使用，以及大量的 NPM 模組與社群支持，並且把 Javascript 從一個瀏覽器端語言進化，更添加了操作 Buffer 與控制硬體、檔案，Addon等功能，而因為與網頁前端發使用相同語言，所以相信未來仍會吸引不少開發者投入相關 Node.js 開發。

Node js Development 課程主視覺，以 Node.js 標誌與 JavaScript 圖示為核心，搭配工具、資料庫及設定齒輪圖示，呈現 Node.js 開發主題。

課程介紹

此次課程會先將 Node.js 的基本核心模組以範例的方式介紹，並且講述常用的第三方模組與工具，最後會帶入 React.js，使用其來當前端的框架，並開發一個論壇類型的 Node.js 網站（結合WebSocket、Redis、MongoDB、React.js 與 Material UI ），過程中會簡介 Vim 編輯器以及Linux 相關指令，最後會介紹到 CI 以及自動部署機器人。

1.首先會先以範例的方式講解 Node.js 核心模組

2.介紹部分常用到的 Node.js 第三方模組

3.介紹 Node.js 相關web框架與資料庫間之操作

4.講解 React.js 與 Material UI

5.開發實作網站

6.部屬網站到AWS EC2

7.後端安全

8.CI、Gitflow、Telegram Bot

Node.js模組介紹

Node.js 教材第 10 頁介紹「文件操作」，示範使用 require("fs") 載入檔案系統，透過 fs.readFileSync 與 fs.writeFileSync 將 class1.js 複製為 class2.js，並提醒同步寫法容易造成記憶體溢出與阻塞。

React.js 與 Redux 開發

文章列表網頁介面顯示「使用者：1」與「發表文章」按鈕，列出「這是測試文章」、「ok」、「test2」、「oa」及作者、最後修改時間；右側 Chrome DevTools Console 顯示 USER_INFO 狀態物件。

即時聊天介面顯示使用者 IamX、IamZ、IamC 依序發送「hi」，時間分別為 11:1:31、11:1:35、11:1:40；右上角可見三個彩色頭像。

使用Material UI

Material-UI 介紹頁首，展示立體幾何標誌與標題，並寫有「A Set of React Components that Implement Google's Material Design」及「DEMO」按鈕。

Node.js API文件撰寫

Swagger Editor 顯示名為「<bit>」的 API 文件，版本為 Swagger 2.0，主機為 localhost:3001；GET /getArticle 端點用於取得所有文章，回應碼 200，資料結構為 ArrayOfPersons。

MongoDB、MySQL、Redis 資料庫操作

Node.js 資料庫套件使用範例拼圖，包含 mysql 的安裝與連線程式碼、Mongoose 的 MongoDB 物件建模介面，以及 redis 的安裝、用法與指令操作示範。

HTTPS 教學與配置

Travis CI

Travis CI 的持續整合介面，顯示 green-eggs/ham 專案 master 分支 build passing，測試結果為 209 passed；提交由 Sven Fuchs 完成，執行時間 53 秒，並呈現建置日誌。

Jenkins CI

Jenkins 的 Insight Scan Summary 顯示已識別 27 個開源元件，發現 34 個安全性警示與 8 個授權警示；漏洞分級為 Critical 4、Severe 27、Moderate 3，包含目錄遍歷、CSRF 與 MITM 風險。

常見問題

Q：需要先學會基本 Javascript 與 CSS 嗎

A：課程中雖然會詳細講解各個 Function 的功能及原理，但還是建議有一點基礎會比較好理解喔

Q：需要準備什麼嗎

A：安裝一個文字編輯器即可（課程使用 VSCode ）

講師介紹

軟體開發者，喜好種植物與慢跑。

哪些人適合這堂課？

對程式有興趣，曾經接觸過任一種程式語言，以及想了解更多關於網站架設相關之前端、後端概念的同學。

你可以學到

1.學習 Node.js 核心概念，包含檔案與資料庫操作、Server side render、Promise、Async 以及 ES6 等相關概念 2.React.js、Redux 框架使用。 3.了解Web安全機制與快取 4.做出簡單論壇網站（包含使用者登入註冊、發表文章、文章留言、文章搜尋、用戶聊天室等） 5.結合 Telegram Bot 讓每次 git commit 時顯示訊息在 Telegram message 中

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

電腦

需要具備的背景知識

HTML、CSS、JavaScript 與基本程式邏輯

單元一覽

1 章 38 單元｜總時長 358 分鐘

全部收合

本課程不分章節

單元 1 - Node.js 安裝與 NPM 使用