Diploma in Full Stack Web System Development
(MongoDB + Express + React + Node)


課程介紹

本課程將由淺入深教授學員利用 Javascript 建立全功能的網站系統, 學員只需要學習一套語言便可以開發出前後台個樣功能。 我們會利用望 MongoDB NoSQL 資料庫儲存文件,不再侷限於資料表格的規範。 利用 NodeJS 及 Express 建立網站的後台系統,透過各種各樣的 Modules 和 Middleware 輕鬆配搭出不同類型的後台系統需要。 前台系統則使用 ReactJS 寫出豐富及反應敏捷的以 Component 為主要設計單位的系統,配合不同的 hooks 來加強前台系統的功能。 再利用 REST API 透過 REST API 將前後台功能整合起來。 最後更將MongoDB資料庫,NodeJS後台及 ReactJS前台三部分分別移上雲端服務,令系統能開放給大眾使用。 ** 附上完整程式碼及 Lecture Notes 可供下載。

課程目標

       本課程適合需要學習 網站系統開發人士設,學員可同時學習前端和後端的程式開發, 由淺入深去理解前端和後端相關科技、前台技術主要涉及介面設計美化網站系統及如何作出不同的互動效果, 後台技術則以資料庫設計及程式設計為主。 學員可結合兩方面的技術建構出一個完整的資訊系統,例如POS系統,庫存系統,學校管理系統,人力資源系統等。

課程結構

Example blog post alt

Front-End Technologies - ReactJS

視像

React JS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫, 是用介面組件(Components) 這觀念用來架構介面。 開發者可自行開發組件或利用已經建立的第三方組件用來建構網站, 是最先進的 Web design 技術及趨勢

Example blog post alt

Back-End Technologies - MongoDB

視像

MongoDB 是一個以文件導向的資料庫架構, 開發者不用預先設定資料庫結構。使用者可隨意新增及刪除文件。 文件的格式亦可以隨意改變,適合大數據資料儲存。

Example blog post alt

Back-End Technologies - NodeJS

視像

NodeJS 是一個 Javascript 執行環境, 讓開發者可利用 Javascript開發後台系統。 使用者可以不再學習其他語言便可利用 Javascript一併開發前後台程式。 再配合強大的程式庫,可架構出任何種類的 Server 架構。

Example blog post alt

Back End Technologies - Express Web Server

視像

Express 是 NodeJS 上一個最出名及最多人使用的 Web Server程式庫。 透過樣板 (Template) 能建構出各種各類的網頁。 開發者能夠輕易透過路由系統 (Routing) 建立各種網絡 REST API, 讓使用者能夠輕鬆存取背後的資料庫。

Example blog post alt

Cloud Technologies - Mongodb Altas

視像

是一個用來安置 MongoDB 資料庫的雲端服務

Example blog post alt

Cloud Technologies - Heroku

視像

是一個用來安置各種後台系統的雲端服務

Example blog post alt

Cloud Technologies - Netify

視像

是一個用來安置各種前台系統的雲端服務

其他資料

即時網上授課內容

共有六堂面授課堂錄影,每堂大約2.5小時。導師會帶領學員利用 NodeJS, Express, MongoDB, ReactJS 建立出完整的資訊系統,學員可藉著上堂時間發問及由導師協助解決技術上的疑難。

另加3.5小時補充課堂錄影,詳細說明建立完整系統並上傳到雲端的各個步驟及流程。


Back End Technologies (NodeJS, Express and MongoDB)

NodeJS Basic:

  • Introducing JavaScript and its basic syntax
  • Installing NodeJS and Visual Studio Code
  • Downloading and installing various modules using npm
  • Create New NodeJS project
  • Understanding various files in NodeJS project
  • Using the basic modules like http, url and fs
  • Create a basic NodeJS web server
  • Understanding the Request and Response objects
  • Reading files and images using fs module
  • Showing different pages using url module
  • Sending Data using GET method
  • Receiving Data via Query String
  • Sending Data using POST method
  • Receiving Data via Form POST
  • Uploading files and process it using formidable module
  • Using AJAX to send data
  • Installing the Express web framework
  • Setup the static folder in Express
  • Using Express routing to load different pages

MongoDB Basic:

  • Understanding MongoDB (NoSQL and document based)
  • Installing the MongoDB
  • Create and Drop the Database
  • Create and Drop the Collections
  • Create Document using InsertOne and InsertMany
  • Understanding the ObjectID for each document
  • Query the Collection by using various operators
  • Sorting and Limiting the Query Result
  • Updating the document using Update, UpdateOne or UpdateMany
  • Deleting the document using DeleteOne or DeleteMany
  • Grouping the document using Aggregrate
  • Building the relationship using Embedded or Referenced Documents
  • Using NodeJS to connect MongoDB
  • Create the CRUD operation in MongoDB using NodeJS

Full System Development without React:

  • Understanding the Mongoose packages for Object Data Modeling
  • Creating the Mongoose schema and model
  • Using NodeJS to connect Mongoose
  • Create the CRUD operations using Mongoose using NodeJS
  • Understanding the EJS template engines for page rendering
  • Introducing the MVC (Model + View + Controller) architecture
  • Creating various controllers for CRUD
  • Introducing the Middleware concept
  • Creating the Data Validation Middleware
  • Indroducing the Session concept
  • Using the Session to implement security
  • Create a user collection and controllers for login and logout
  • Create a middleware to protect pages which require authentication

Front End Technologies (ReactJS)

ReactJS Basic

  • Create New React Project
  • Understanding various files in React Project
  • Introducing React Component
  • Create your first React Component
  • Introducing JSX (JavaScript XML) as the rendering language
  • Rendering variables and functions in JSX
  • Using map functions to render array and objects
  • Conditionally Rendering Components

Hooks and Remote Access

  • Create State in Components using useState hook
  • Avoiding Infinite Rendering by incorrect function calls
  • Form Handling and stores values in Component state
  • Building the Component Tree using Child Components
  • Export and Import the Components
  • Execute functions automatically using useEffect hook
  • Fetching remote using fetch and axios libraries
  • Understanding the concept of Promise object
  • Testing how to call the public remote API

Other Hooks, Routing and Styling

  • Using useRef to persist values between rendering
  • Using useRef to access DOM elements
  • Using createContext and useContext to build global state
  • Understanding Facebook's Flux pattern
  • Using useReducer to implement the Flux pattern
  • Using useMemo and useCallback to avoid unnecessary rendering
  • Using React Router to load different components
  • Setup the Routing Tables
  • Adding the Link for loading each component
  • Passing data by useLocation and useParams hooks
  • Using React Bootstrap to style the components

Integrating NodeJS and ReactJS

NodeJS backend system

  • Design the system architecture for the complete system
  • Create the NodeJS backend system
  • Installing the CORS module for cross domain API calls
  • Installing the Express-Upload module for file upload
  • Create an registration database and create the Mongoose models
  • Create the API for retreiving all the registrations
  • Create the API for retreiving a single registration
  • Create the API for deleting the registration
  • Create the API for updating the registration
  • Create the API for updating the registration

ReactJS frontend system

  • Create the ReactJS frontend system
  • Set the Environment Variables
  • Create the Component for listing all the registration
  • Create the Component for showing the single registration
  • Create the Component for adding a new registration
  • Create the Component for searching the registration
  • Create the Component for updating the registration

Porting to Cloud

  • Porting the Mongodb database to the cloud service (Mongodb Altas)
  • Registering an account in Mongodb Altas
  • Setup the database and the access permission
  • Connecting the NodeJS to use the remote database
  • Porting the NodeJS backend to the cloud service (Heroku)
  • Registering an account in Heroku
  • Prepare the NodeJS project for uploading
  • Deploying the NodeJS backend using Git
  • Porting the ReactJS frontend to the cloud service (Netify)
  • Registering an account in Netify
  • Build the production version of the ReactJS frontend
  • Deploing the ReactJS frondend to Netify

視像課程內容

視像部分約共有 18 小時,視像課程為期12 個月,學員有充裕的時間去不斷重溫及重播相關技術課程片段,務求令自己掌握相關技術。

學員可以以下示範戶口登入學習系統以瞭解更多內容

登入戶口: demonode

登入密碼: demopass

Login

FAQ 常問問題

我們只需有基本電腦操作能力便可。我們會假設學員只有基本電腦知識,所以會由基本的程式語言教起,學員可重複翻看片段去鞏固自己的知識

基本上用廣東話教學配以英文專有名詞

於課堂有錄影片段所以學員可重看片段便可補回進度。

在上堂時,導師會要求學員一起完成各種各類的電腦操作實驗。導師會與學員一起完成所有的實驗並解釋背後的原理。

學員需上課並達出席率80%便可獲得證書。

所有視像課程均有原始碼,學員可下載相關程式碼以便操作。

學員只需一部較為快的電腦便可安裝所有軟件,所有軟件都是免費的。電腦建議為i5或以上,越快越好。iPhone 的課程需要一部 MAC 機。

導師已有接近十年教授 Web / Apps 開發經驗。除了教授公開班外,亦為各大專院校及公私營機構開班教授相關課程, 例如教育學院、教育局、房屋署、香格里拉酒店。最近更獲強積金局採納電子教材為官方教學材料,質素有所保證。 。

上課時間由七時開始至9時45分。一星期上堂一天。上課地點則為佐敦地鐵站側的商業大廈,由地鐵站至本中心只需約步行數分鐘。

More Questions?