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


課程介紹

本課程將教授學員利用 Javascript 建立全功能的網站系統, 學員只需要一套語言便可以開發出前後台各樣功能。 我們會利用 NoSQL 資料庫儲存文件,不再侷限於資料表格式的規範。 利用 Node.JS 及 Express 建立網站後台系統,可利用強大的程式庫,輕鬆配搭出不同類型的後台系統需要。 再利用 React.JS 寫出豐富及反應敏捷的前台系統,透過 REST API 將前後台功能整合起來。 學員掌握技術後可輕鬆建立不同的前後台應用軟件,應付各種開發的需要。

課程目標

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

面授 + 視像

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

Example blog post alt

Back End Technologies - Express Web Server

面授 + 視像

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

其他資料

面授或即時網上授課內容

共有6堂。導師會帶領學員利用 NodeJS, Express, MongoDB, ReactJS 建立出完整的資訊系統,學員可藉著上堂時間發問及由導師協助解決技術上的疑難。


Back End Technologies (NodeJS, Express and MongoDB)

Lesson 1:

  • Environment Setup - Setup NodeJS and Express
  • Setup Express as the web server
  • Understanding the request and response objects
  • Using various middlewares for supporting Express
  • Handling static resources like images, CSS styles and other scripts
  • Using the template engine (EJS) to render different pages
  • Create the common templates to compose the web pages

Lesson 2:

  • Environment Setup - Setup MongoDB and MongoDB Compass
  • Understanding NoSQL database
  • Create an NoSQL database and collections
  • Insert, Update, Delete document in the collection
  • Query and filter data from collections
  • Integrating MongoDB with NodeJS
  • Using Mongoose as the interface with MongoDB

Lesson 3:

  • Understanding REST and MVC(Model-View-Controller) architectures
  • Create various REST API endpoints for communications
  • Using Postman to test the API end points
  • Using Mongoose to setup the Models for the database
  • Setup various Controllers for different endpoints
  • Using EJS to build various Views
  • Creating a CRUD (Create/Read/Update/Delete) system using REST API

Front End Technologies (ReactJS)

Lesson 1:

  • Using JavaScript ES6 new features
  • Using Modules and Classes to organize codes
  • Using Arrow, Map and Filter function
  • Understanding the Promises
  • Getting remote data using fetch and axios library
  • Environment Setup - Setup React
  • Understanding React architecture

Lesson 2:

  • Creating the React Components using JSX
  • Using class based or function based components
  • Build the component tree using component nesting
  • Using state for component internal storage
  • Using props to customize the components
  • Understanding event handling
  • Using the life cycle of the component

Lesson 3:

  • Understanding hooks used in components
  • Using useState to manage states
  • Using useEffect for life cycle management and remote data access
  • Using useRef to locate any element in the page
  • Using useContext for global state management
  • Building forms to interact with the backend system
  • Using services classes to call the REST API

視像課程內容

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

FAQ 常問問題

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

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

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

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

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

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

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

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

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

More Questions?