Unisoft Education Centre

Diploma in Web System Development (React + Node + AI)

Enquire Now

Course Information

  • 7 Jun 2024 (Fri) - 26 Jul 2024 (Fri) 7:00 PM - 9:30 PM
Registration period
10 May 2024 (Fri) - 7 Jun 2024 (Fri)
HKD 2,980
Study Mode
20 Hour(s)
九龍佐敦德興街11-12號 興富中心5樓501室 (佐敦港鐵站E出口)

Course Overview

隨著 AI 世代的來臨,製作網頁系統程式已經是開發人員必須掌握的技術。 本課程會由淺入深,教授學員如何以最新技術開發 Node 及 React Web System。 除此之外, 亦會教授如何利用各種各類的雲端服務,去創造具備人工智能的網頁程式。

- 利用一套程式語言 Javascript 同時開發網站前台 React 及後台 Node 功能
- 同時學習關聯式資料庫 (MySQL) 及 NoSQL 資料庫 (MongoDB)
- 利用 Google Dialogflow 為網頁加入智能機械人對話程式
- 整合前後台技術建立具備 CRUD 的功能的完整系統, 如會員系統及內容管理系統

Course Information : https://uec.edu.hk/diploma_in_web_system_development
Course Enquiry / Contact us Whatsapp : https://wa.me/85290455522


- 課程分為2部分 - 面授課程 + Video課程
- 面授課程 - 逢星期五上課,共8堂
- 學員可選擇 "面授" 或 " Live Online Learning" 模式上課
- 學員可重溫每堂課堂錄影
- 本校加設 "remote control" 操作方式,透過此方式可令" Live Online Learning" 模式上課的學員能使用學校電腦進行實習,導師亦會即時作出指導
- 課堂錄影 及 Video課程的觀看時限為期12個月

What You’ll Learn

課程代碼: DWS2023

面授課程 + Video課程

Node and MongoDB - 面授課程

NodeJS Basics

1.1 Introducing JavaScript and its basic syntax
1.2 Installing NodeJS and Visual Studio Code
1.3 Downloading and installing various modules using npm
1.4 Create New NodeJS project
1.5 Understanding various files in NodeJS project
1.6 Using the basic modules like http, url and fs
1.7 Create a basic NodeJS web server
1.8 Understanding the Request and Response objects
1.9 Reading files and images using fs module
1.10 Showing different pages using url module
1.11 Sending Data using GET method
1.12 Receiving Data via Query String
1.13 Sending Data using POST method
1.14 Receiving Data via Form POST
1.15 Uploading files and process it using formidable module
1.16 Using AJAX to send data
1.17 Installing the Express web framework
1.18 Setup the static folder in Express
1.19 Using Express routing to load different pages

2. MongoDB Database

2.1 Understanding MongoDB (NoSQL and document based)
2.2 Installing the MongoDB
2.3 Create and Drop the Database
2.4 Create and Drop the Collections
2.5 Create Document using InsertOne and InsertMany
2.6 Understanding the ObjectID for each document
2.7 Query the Collection by using various operators
2.8 Sorting and Limiting the Query Result
2.9 Updating the document using Update, UpdateOne or UpdateMany
2.10 Deleting the document using DeleteOne or DeleteMany
2.11 Grouping the document using Aggregrate
2.12 Building the relationship using Embedded or Referenced Documents
2.13 Using NodeJS to connect MongoDB
2.14 Create the CRUD operation in MongoDB using NodeJS

3. NodeJS System Development

3.1 Understanding the Mongoose packages for Object Data Modeling
3.2 Creating the Mongoose schema and model
3.3 Using NodeJS to connect Mongoose
3.4 Create the CRUD operations using Mongoose using NodeJS
3.5 Understanding the EJS template engines for page rendering
3.6 Introducing the MVC (Model + View + Controller) architecture
3.7 Creating various controllers for CRUD
3.8 Introducing the Middleware concept
3.9 Creating the Data Validation Middleware
3.10 Indroducing the Session concept
3.11 Form Handling and stores values in Component state
3.12 Using the Session to implement security
3.13 Create a user collection and controllers for login and logout
3.14 Create a middleware to protect pages which require authentication

ReactJS - 面授課程


1.1 Create New React Project
1.2 Understanding various files in React Project
1.3 Introducing React Component
1.4 Create your first React Component
1.5 Introducing JSX (JavaScript XML) as the rendering language
1.6 Rendering variables and functions in JSX
1.7 Using map functions to render array and objects
1.8 Conditionally Rendering Components


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


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

NodeJS + MongoDB + React + Heroku Integration Project - Video課程 :

Google DialogFlow Chatbot Integration Project - Video課程 :
- Setup Basic DialogFlow ES Services
- Collect Data from Dialog
- Integrate with NodeJS and Deploy to Web

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed