Promotion
Summer Promotion - NCC Diploma ($1000 discount for registration fee) / UoG Degree ($2000 Early Bird discount)
Web Development

網頁系統程式開發課程 ReactJS + NodeJS

課程概覽

Diploma in Web System Development
(React + Node + AI)
網頁系統程式開發文憑課程

Card image

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

導師簡介

Dannis Mok

who has rich experience in business web and apps system development and have over 20 years of teaching experience. He has great passion in learning and teaching new technologies and his teaching style is clear to point and can explain complex technologies in simple terms. He has delivered various workshops and classes for different corporate, government departments and local universities and is the principal lecturer for NCC Education and University of Greenwich. Besides BSc degree in IT, he also got a MBA, MSc in IT and MSc in Telecommunication degree.

相關專業認證
  • Microsoft MCSE, MCDBA
  • Microsoft Certified System Developer
  • Microsoft Office Specialist Master
  • Cisco CCNA,CCDA,CCNP,CCDP
  • Sun Microsystems – Certified Java Programmer
  • Oracle – Certified Database Professional
  • Linux - LPI Level 1 & 2
  • CompTIA Data+
  • Microsoft Certified: Power BI Data Analyst Associate
  • Python Institute: Certified Associate Python Programmer
相關教學經驗
  • 為積金局 (MPF) IT 員工提供 Android 及 iPhone 視像培訓課程
  • 為香港教育局提供 Android 培訓課程予中學電腦科導師
  • 為香港教育大學 IT 員工提供 Cordova 跨平台流動程式開發課程
  • 為房屋署員工 IT 員工提供 HTML5 跨平台流動程式開發課程
  • 為房屋署員工 IT 員工提供 Android 及 iPhone 平台流動程式開發課程
  • 為香格里拉大酒店IT 員工提供 Android 流動程式開發課程
  • 為勞工處提供 HTML5 遊戲培訓課程及電子商店培訓課程
  • 為中國銀行IT 員工提供 Android 及 iPhone 流動程式開發課程
  • 為香港郵政IT 員工提供 Angular 8 程式開發課程
  • 為 VTC 職業訓練局提供各種各類 IT 培訓課程
  • 為醫管局員工 IT 員工提供跨平台流動程式開發課程

視像課程內容

了面授課堂,同學亦可重溫課程錄影片段, 觀看期為期一年 ,可在家無限重播。 另外所有相關教學短片亦可觀看一年無限期重播 , 務必明道同學掌握相關技術。

Introduction to DialogFlow ES (17m:01s)
NodeJS and ReactJS System Demo (6m)

課程內容

本課程由3個部分所組成,學員可因應自己需求導讀個別單元或整個課程。

Back End Development

NodeJS + MongoDB

NodeJS 是一個新進的後台製作方案,特色是利用一套程式語言 JavaScript 便可開發前台及後台的所有功能。 NodeJS 可配搭不同類型的資料庫, 如果配搭 NoSQL Database (MongoDB) 便可以方便網站系統無限擴張 (scalable), 突破傳統資料庫的限制。此方案亦方便用家設計 Web Service,透過 REST API 設計風格, 便可讓瀏覽器或流動應用程式 (Mobile Apps) 直接接駁存取資料。

NodeJS and MongoDB Banner

NodeJS Logo

Certificate in Node and MongoDB Web Development (CNM2023)

適合初學者修讀,無需任何經驗,由淺入深教學

  • 5th Jul 2024
  • 7:00pm - 9:30pm
  • Every Friday
  • 4 lessons

$1,680

What you can learn ?

  • Learn how to use new JavaScript features
  • Learn how to setup the NodeJS project and its modules
  • Learn how to setup the Express web server
  • Learn how to design the NoSQL database (MongoDB)
  • Learn how to create the collections and documents
  • Learn how to use the MVC architecture
  • Learn how to connect to use Mongoose to connect database
  • Learn how to use the middlewares to enhance functions
  • Learn how to use the controllers for separating functions
  • Learn how to use the CRUD operations with the database
  • Learn how to use the sessions for security
NodeJS
TechnologyIntroduction
NodeJS NodeJS 是一個 Javascript 執行環境, 讓開發者可利用 Javascript開發後台系統。 使用者可以不再學習其他語言便可利用 Javascript一併開發前後台程式。 再配合強大的程式庫,可架構出任何種類的 Server 架構。
MongoDB MongoDB 是一個以文件導向的資料庫架構, 開發者不用預先設定資料庫結構。使用者可隨意新增及刪除文件。 文件的格式亦可以隨意改變,適合大數據資料儲存。

COURSE OUTLINE

  • 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

  • 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

  • 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
  • Form Handling and stores values in Component state
  • 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 Development

React + BootStrap

React JS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫, 是用介面組件(Components) 這觀念用來架構介面。 概念是將網頁切割成不同的 component, 每個component包含自己的網頁內容,設計風格及相關程式碼, 網站人員便可以輕鬆利用 component 組成不同的網站設計,使前台開發更有規模以及更容易管理。開發者可自行開發組件或利用已經建立的第三方組件用來建構網站, 是最先進的 Web design 技術及趨勢。

Web Front End Development Course

ReactJS Logo

Certificate in ReactJS Web Deveopment (CRE2023)

適合初學者修讀,無需任何經驗,由淺入深教學

  • 2nd Aug 2024
  • 7:00pm - 9:30pm
  • Every Friday
  • 4 lessons

$1,680

What you can learn ?

  • Learn what is ReactJS
  • Learn the new features of JavaScript
  • Learn how to design a React component
  • Learn how to use JSX for rendering
  • Learn how to use props to pass information
  • Learn how to use state for storing states
  • Learn how to use Promise and axios to send request
  • Learn how to use design ReactJS component tree
  • Learn how to use various hooks to enhance functions
  • Learn how to use React router to load components
  • Learn how to use React Bootstrap to style web pages
Front End 2
TechnologyIntroduction
ReactJS ReactJS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫, 是用介面組件(Components) 這觀念用來架構介面。 開發者可自行開發組件或利用已經建立的第三方組件用來建構網站, 是最先進的 Web design 技術及趨勢
Bootstrap BootStrap 是一套跨瀏覽器的CSS framework ,可快速製作出適合不同裝置及尺寸的回彈性網頁介面。

COURSE OUTLINE

  • 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

  • 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

  • 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


Extra Video

Extra Learning Videos

本部分為額外錄影教學片段,適合已有基本 React 及 Node 開發經驗的同學修讀。 會利用 React 及 Node 建立一個具備 CRUD 功能的完整系統,並會教授如何上載至雲端公大眾使用。

a) NodeJS + MongoDB + React + Heroku Integration Project

NodeJS + MongoDB + React + Heroku Integration Project

MERN Logo

Building CRUD system using NodeJS Backend and React Frontend

本部分為視像課程, 學員需具備 Node, MongoDB 和 React基本知識。

  • 3.5 hrs
  • Video Course

What you can learn ?

  • Learn what is the MERN stack
  • Learn how to setup the NodeJS project
  • Learn how to setup the MongoDB and Mongoose
  • Learn how to setup the models to connect database
  • Learn how to setup the ReactJS project
  • Learn how to setup the REST API in NodeJS
  • Learn how to call the REST API in ReactJS
  • Learn how to setup the controllers to handle requests
  • Learn how to setup the CRUD functions
  • Learn how to deploy the back end to Heroku cloud
  • Learn how to deploy the front end to Netify cloud
Project
TechnologyIntroduction
NodeJS NodeJS 是一個 Javascript 執行環境, 讓開發者可利用 Javascript開發後台系統。 使用者可以不再學習其他語言便可利用 Javascript一併開發前後台程式。 再配合強大的程式庫,可架構出任何種類的 Server 架構。
ReactJS ReactJS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫, 是用介面組件(Components) 這觀念用來架構介面。 開發者可自行開發組件或利用已經建立的第三方組件用來建構網站, 是最先進的 Web design 技術及趨勢
MongoDB MongoDB 是一個以文件導向的資料庫架構, 開發者不用預先設定資料庫結構。使用者可隨意新增及刪除文件。 文件的格式亦可以隨意改變,適合大數據資料儲存。
ExpressJS Express 是 NodeJS 上一個最出名及最多人使用的 Web Server程式庫。 透過樣板 (Template) 能建構出各種各類的網頁。 開發者能夠輕易透過路由系統 (Routing) 建立各種網絡 REST API, 讓使用者能夠輕鬆存取背後的資料庫。
MongoDB Altas 是一個用來安置 MongoDB 資料庫的雲端服務
HeroKu HeroKu (在Amazon AWS 上構建) 是一個用來安置各種後台系統的雲端服務而
Netify Netify 是一個用來安置各種前台系統的雲端服務

COURSE OUTLINE

  • 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 adding the registration

  • 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 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


b) Google DialogFlow Chatbot Integration Project

本部分為額外錄影教學片段,適合已有基本 React 及 Node 開發經驗的同學修讀。 會利用 Google Dialogflow 協助網站加入 AI 聊天機械人功能

AI Chatbot development

Dialogflow Logo

Building ChatBot using Google DialogFlow and NodeJS

本部分為視像課程, 學員需具備 Node, MongoDB 和 React基本知識。

  • 2 hrs
  • Video Course

What you can learn ?

  • Learn what is the Google DialogFlow
  • Learn how to setup the Agent
  • Learn how to setup the Intent
  • Learn how to add the training phases to Intent
  • Learn how to match the Intent and give responses
  • Learn how to use Entities to extract values from dialog
  • Learn how to store the information in the NodeJS
  • Learn how to integrate the Chatbox in your website
Project
TechnologyIntroduction
DialogFlow Dialogflow 是一項屬於Google的開發工具,提供基於自然語言對話的人機互動技術。

COURSE OUTLINE

  • Introduction to DialogFlow ES
  • Create an Agent and test default Intents
  • Create the Intents and extracts the parameters
  • Connecting the NodeJS to use the remote database

  • Create the custom Entity to capture the parameters
  • Add Follow Up Intents and use the Context
  • Add Custom Follow Up Intent and Context
  • Passing parameter values through the Context

  • Integrate DialogFlow into Website
  • Use Google Cloud Functions as Fulfillment
  • Create WebHook Web Service using NodeJS


Enroll Now
  課程學費:
$2,980
 開課時間:
2024-7-5
逢星期五
查詢問題    21361234    90455522