Apps/Web Development

行動應用程式 +
網頁系統開發課程
Android + iOS + React + Node + AI 迎接 AI 新世代

課程概覽

Professional Diploma in Apps Web Cloud Development

行動應用程式 + 網頁系統開發
專業文憑課程

AI Course

  • 利用一套程式語言 Javascript 同時開發網站前台 React 及後台 Node 功能
  • 同時學習關聯式資料庫 (MySQL) 及 NoSQL 資料庫 (MongoDB)
  • 利用 Google Dialogflow 為網頁加入智能機械人對話程式
  • 整合前後台技術建立具備 CRUD 的功能的完整系統, 如會員系統及內容管理系統
  • 同時學習 iPhone 以及 Android Apps 製作,比較兩大陣營解決問題的方法。
  • 利用最新程式語言 Kotlin 開發 Android Apps,Google打算用此取代 Java 的地位。
  • 使用 UIKit 及 Swift UI 兩大介面系統同時開發 iPhone Apps。
  • 使用 Google Firebase 及 Apple Core ML 機械學習雲端服務 ,製作具備 AI 功能的 Apps。

導師簡介

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)
Introduction to Machine Learning (01m:33s)
iOS CoreData Introduction (04m:08s)

課程內容

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

Android Live

Android Development

本課程將教授學員利用 Kotlin 去開發 Android Apps。 首先介紹的 Kotlin 的基本語法,然後逐步了解 Android Apps的架構及組成部分。 學習利用 Android的 UI Wigdet 建立單頁或多頁的 Apps,接受資料輸入,傳輸資料給不同部件,處理資料及儲存資料等各種操作。更會學習如何下載文字或影像檔案,最後更加與雲端服務 Firebase整合。

Mobile Apps Course Banner

Android Logo

Certificate in Android Apps Development (CAA2023)

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

  • 11th Jun 2024
  • 7:00pm - 9:30pm
  • Every Tuesday
  • 4 lessons

$1,680

What you can learn ?

  • Learn how to use Kotlin to write basic program
  • Learn how to use Kotlin new features for programming
  • Learn how to build the layout of an Android Apps
  • Learn how to connect 2 or more Activities in Android Apps
  • Learn how to transfer data between Activities
  • Learn how to store data in SharedPreferences
  • Learn how to receive data input from user
  • Learn how to use the dialog and toast to feedback user
  • Learn how to use Intent to give instruction to OS
  • Learn how to list out items using RecyclerView and ListView
  • Learn how to connect to Internet to download text and images
  • Learn how to use the Fragment to build the UI
  • Learn how to use the SQLite Database to perform the CRUD operations
  • Learn how to integrate Firebase services to Android
Android
TechnologyIntroduction
Kotlin Kotlin 是一套類似 Java 的新一代程式語言,修補了其他程式語言的缺點。是Android 程式開發的首選語言。
Firebase 是由Google提供的一個支援Apps後勤服務的雲端平台。 它能夠提供各式各樣的不同雲端服務, 例如資料庫儲存及通訊功能

COURSE OUTLINE

  • Understanding the Android Apps project structure and file usages
  • Creating the Android Phone Emulator for testing
  • Understanding Kotlin language and the Android Studio
  • Learn how to use variables, decision making, looping and data structures
  • Learn the methods and object oriented feature of Kotlin
  • Understanding Android Apps structure and related files
  • Design the user interface using the layout file and the widgets
  • Understanding the Life cycle of Android Activity
  • Android Resource Management (String, Color, Drawable)
  • Use of Logcat for debugging and monitoring

  • Displaying text and image using TextView and ImageView
  • Receiving user input using EditText and Radio Button
  • Receiving user input using RatingBar and Switch
  • Using Button to trigger event and setup event handling
  • Use of Implicit Intent to dial phone or send SMS
  • Use of Explicit Intent to launch another Activity and passing data
  • Use of Spinner and ListView to display structured data
  • Use of RecyclerView and CardView to display unlimited data
  • Creating Toast and Alert Dialog Box for notification

  • Storing and getting back data using SharedPreferences
  • Setting static and dynamic permission for web access
  • Understanding WebView for presenting web pages
  • Downloading Image and Text from Internet
  • Decoding JSON data received from Web Services
  • Using external library to help to connect to Internet
  • Understanding the Fragment and its application
  • Build the static and dynamic Fragments
  • Passing data between Fragments

  • Understanding SQLite Database
  • Create the SQLite Database
  • Adding data to the SQLite Database
  • Removing data from the SQLite Database
  • Updating data in the SQLite Database
  • Listing and searching data using SQLite Database
  • Understanding Firebase Web Services
  • Integrating Firebase with Android Apps
  • Build and deploy the project to Google Play Store

IOS Live

iOS Development

本課程將教授學員利用 Swift 去開發 IOS Apps。 首先介紹的 Swift 的基本語法,然後逐步了解 IOS Apps的架構及組成部分。 學習利用 IOS 的 UI Wigdet 建立單頁或多頁的 Apps,接受資料輸入,傳輸資料給不同部件,處理資料及儲存資料等各種操作。更會學習如何下載文字或影像檔案,最後更加與雲端服務 Firebase整合。

Swift Banner

IOS Logo

Certificate in iOS Apps Development (CIA2023)

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

  • 14th May 2024
  • 7:00pm - 9:30pm
  • Every Tuesday
  • 4 lessons

$1,680

What you can learn ?

  • Learn how to Swift to write basic program
  • Learn how to build the layout using Storyboard and Scenes
  • Learn how to use Segue to connect 2 or more ViewControllers
  • Learn how to use the Navigation controllers and TabBar controllers
  • Learn how to transfer data between different controllers
  • Learn how to receive data input from user
  • Learn how to store data using UserDefaults
  • Learn how to list out items using TableView
  • Learn how to connect to Internet to download text and images
  • Learn how to use the SQLite database to perform the CRUD operations
  • Learn how to integrate Firebase services to IOS
IOS
TechnologyIntroduction
Swift Swift是蘋果新開發程式語言,是用來撰寫MAC OS/OS X、iOS、watch OS和tvOS的語言之一。 2014年,其在蘋果開發者年會(WWDC)發布。設計Swift時,蘋果公司有意讓Swift與Objective-C共存在蘋果公司的作業系統上。
Firebase 是由Google提供的一個支援Apps後勤服務的雲端平台。 它能夠提供各式各樣的不同雲端服務, 例如資料庫儲存及通訊功能

COURSE OUTLINE

  • Understanding Swift Language and the Xcode IDE
  • Learn how to use variables, decision making, looping and data structures
  • Learn how to use optional variables
  • Learn the methods and object oriented feature of Swift
  • Understanding Views, View Hierarchy and View Controllers
  • Understanding the Life cycle of ViewController
  • Using IBOutlets to access UI widget properties
  • Using IBActions to setup the event listener
  • Using UILabel and UIImageView for display information
  • Using NSLog for debugging and monitoring

  • Displaying text and image using TextView and ImageView
  • Receiving user input using TextField and SegmentControl
  • Receiving user input using Switch and Slider
  • Using Button to trigger event and setup event handling
  • Understanding AutoLayout for handling different devices and orientation
  • Using Storyboards, Segues and Transitions
  • Link up multiple pages using manual Segue.
  • Use of Navigation Controller to navigate to different Scenes
  • Passing data between different ViewControllers
  • Using TabBar Controller for building tab based applications

  • Storing and getting back data using UserDefaults
  • Understanding TableView for displaying structured data
  • Understanding WebView for presenting web pages
  • Web Server Communication using Background Thread
  • Setting Apps Transport Security for web access
  • Understanding JSON data format for communications
  • Downloading text, image and JSON data using URL and URLRequest
  • Downloading text, image and JSON data using URLSession
  • Use the LocationManager to find location of the user
  • Display and use the Map by using the MapKit

  • Understanding CoreData objects for data storage
  • Design the Entities to represent tables in CoreData
  • Adding data to CoreData
  • Removing data from CoreData
  • Updating data in CoreData
  • Listing and searching data in CoreData
  • Understanding Firebase Web Services
  • Downloading text, image and JSON data using URLSession
  • Integrating Firebase with IOS Apps
  • Build and deploy the project to Apple Store

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)

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

  • 10th May 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

ReactJS Logo

Certificate in ReactJS Web Deveopment (CRE2023)

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

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

web Front End Development

MongoDB Express React NodeJS

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 聊天機械人功能

ChatBot

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


c) AI Applications with Android and IOS

可以透過 Firebase ML Kit 和 Apple Core ML 識別訊息是否是垃圾訊息, 偵測圖片中的臉孔、辨識重要的臉部特徵,例如人臉是否微笑,它的左/右眼是打開還是關閉等,亦可製造文字辨識器,透過鏡頭抽取相片內的文字,轉化為可編輯的文字。

Google MLKit

Apple CoreML

本部分課程適合已有基本 Android 及 iOS 開發經驗的同學修讀, 會利用兩大平台的雲端 AI 服務, 建立四個不同的 project, 製作過程將會詳細錄影, 可以根據影片學習如何建立以下四個不同應用範疇的 Apps。

Text Recognition AI Course

文字辨識

Object Detection AI Course

偵測及追蹤物件

QR Code Scanning AI course

QR Code / 條碼掃描

Face detection AI course

臉部偵測


What you can learn ?

  • Learn how to detect the objects in images using IOS or Android
  • Learn how to scan text in images using IOS or Android
  • Learn how to detect face features in images using IOS an Android
  • Learn how to scan bar codes in images using IOS or Android
AI
TechnologyIntroduction
Apple CoreML CoreML是Apple一個機器學習框架 (Machine Learning Framework),為了讓開發者不需要花費過多時間去深入瞭解神經網絡以及機器學習的相關知識,也能將機器學習運用在app的製作上。
Google ML Kit ML Kit 指的就是「機器學習工具」(Machine Learning Kit),支援文字辨識功能、臉部偵測功能、條碼掃瞄功能、圖片標籤和地標辨識功能,而且在 iOS 和 Android 系統都可以使用。

COURSE OUTLINE

  • Introduction to Machine Learning Concepts
  • Create an Android Project to Take Photo
  • Create a Firebase Project and Connect to Android Project
  • Add the Text Recognition SDK to Android Project
  • Add the Image Labeling function to the Apps
  • Add the Face Detection SDK to Android Project
  • Add the Face Detection Code and Test the Results
  • Add the Code for Text Recognition
  • Add the Barcode Scanning SDK to Android Project
  • Add the Barcode Scanning Code and Test the Results

  • Create Xcode project and link to Firebase Project
  • Install the ML library as CocoaPod
  • Add the Image Labelling functions to the App
  • Install the Face Detection package
  • Add the code for Face Detection
  • Install and Add Text Recognition packages
  • Change to detect Chinese language

  • Preparing the Xcode Project for CoreML
  • Add the code for using the CoreML to classify the object in the image
  • Implement the function of picking image
  • Implement the function of taking photo with real device

Enroll Course
  課程學費:
$4,980
  每期學費:
$2,490 x 2
 開課時間:
2024-05-10
逢星期二,五
查詢問題    21361234    90455522