進度條

線上程式教學課程: Electron 跨平台桌面程式,建立點餐系統與裝置控制

想要打包你的應用程式讓客戶一鍵安裝?不了解如何用電腦操作你的 Ardiono 裝置?讓我們藉由實作餐廳點餐系統,統整前端、後端、桌面應用、手機與裝置驅動,帶你把所學技術與知識串接起來吧!

最後更新時間: 2024/05

Loading

特價 NT$: 3600

原價 NT$: 6000

優惠至:2024/12/15

課程包含:

終生於平台觀看 詳情

6個章節,78堂影片

18小時以上的課程時間

本課程未在其他平台上架。


信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率 查看支援銀行

(信用卡不留卡號,Paypal需非台灣)

課程敘述

Electron.js 為目前跨平台桌面應用程式(Desktop Application)最流行的解決方案,開發商為 Github (已被微軟收購),以 Node.js 為基底建立而成,所以只要會 HTML, CSS JavaScript 就可以完成一個可以同時可以安裝於 Windows 和 MacOS 的桌面應用程式。解決在 Windows 上面必須要 C# 而 MacOS 上面必須要會 Swift / Objective-c 才能完成應用程式的困境。

 

Electron.js 基於 Node.js 特性,故在畫面上面是由 HTML / CSS 繪製而成,而在功能上面除了一般瀏覽器應用功能外,也包含了 Node.js 和 Electron.js 所製作的功能函式庫,使得使用體驗比起與操作網站還是有所不同,包含一般應用程式的優點與網頁開發般的畫面彈性。同時也可以使用前端的框架製作畫面,例如 React.js 、Vue.js 和 Angular

 

延伸閱讀:想寫桌面程式卻無從下手?Electron 讓你橫跨Windows MacOS與Linux 無煩惱!

 

此外,Node.js 本身是可以與 C++ (包含 C語言) 函式庫互動。因此如果有需要跟硬體裝置互動的話,可以自行利用 C++ 與 C 語言製作使用者層的驅動程式,之後串接回 Electron.js 應用程式,輕鬆達成硬體與應用程式的複合型應用。

 

延伸閱讀:Node.js 是什麼?NPM又是什麼?為什麼前端與後端都需要用它們呢?

 

本課程將從基礎的 HTML CSS JavaScript 複習開始帶出 Electron.js 與 Node.js 的使用邏輯,接著將以實作範例 - 製作出餐廳點餐系統為範例,並且與「雲端伺服器 Server」溝通來模擬現實世界的應用程式。現在的系統多半是多裝置互動,可能同時擁有給客人用的平板手機版本與給店員與老闆用的桌面管理系統,所以如何透過伺服器來同步資料是一個相當重要的議題。

 

此外,結帳系統通常會外接許多硬體裝置,我們這邊通過最簡單且最通用的通訊協定 RS 232 來示範如何驅動市售「餐廳出單機」與示範如何讓 Arduino 跟 Electron.js 應用程式互動。以此了解當你接收到一個硬體裝置的時候,要如何才能跟現有應用程式做互動。並且了解如何用 Arduino 驅動桌面應用程式,和如何用桌面應用程式驅動 Arduino。

 

知名使用 Electron 製作的「桌面版」應用程式有:

Visual Studio CodePostman、WhatsAppSkypeSlackFigma

點我看全部列表

課程難度

初級,此課程需要一點基本程式經驗。

請參閱課程需求

課程需求

1. 熟悉HTML (點我看課程)

2. 使用過CSS 與 Javascript

3. 有一台電腦(Windows & MacOS皆可)

4. 有一顆不畏懼艱難的心

 

非必要,但會幫助學習

1. 擁有與瞭解如何建立 Web API 網站

2. 了解如何撰寫 C 語言程式

3. 擁有一台 Arduino, 並且了解如何使用他。

 

課程目標

1. 學會利用 Electron.js 開發跨平台桌面程式

2. 了解 Node.js 作為腳本語言的使用方式

3. 了解 Electron.js 和 Node.js 如何與 C 語言函式庫溝通

4. 學會如何製作跟 Server (伺服器) 溝通的 Electron.js 應用程式

5. 學會如何驅動市售硬體裝置 (RS232)

6. 學會如何與自製硬體裝置互動 (Arduino)

7. 學會如何與手機同步 (網路)。

 

課程特點

橫跨多個領域的整合技術通常個別技術都不算非常複雜,但是因為需要了解的範圍很廣所以通常相對少人有能力製作一定強度的整合應用。本課程探討範圍橫跨:網頁前端伺服器後端跨平台桌面程式使用者層驅動程式手機應用程式裝置應用開發,屬於整合型課程。

不過課程進行最低限度需求為了解 HTML CSS 和 JavaScript 而不用全部都會,不了解的領域可以藉由老師的實作示範,並且取用其結果來繼續進行。不同議題章節是分開的,所以不用擔心做到一半卡住無法進行。

(課程撰寫部分只會包含:HTML CSS JavaScript 和少部分 C語言,C語言還不會的話可以取用老師製作出來的函式庫繼續進行課程,不用擔心。後端伺服器和 iOS 手機應用程式都是事先做好的程式,只要依照課程指示使用即可。)

第一章 (總長1.4小時)

Electron 課程介紹與環境設定安裝
keyboard_arrow_down
  • play_arrow

    01. Electron.js 與課程介紹

    11:25
  • play_arrow

    02. 章節介紹與開始課程前須要先瞭解的事

    05:46
  • play_arrow

    03. [Windows] 安裝Node.js與npm

    07:16
  • play_arrow

    04. [MacOS] 安裝Node.js與npm

    05:43
  • play_arrow

    05. [Windows] 開發環境介紹與建立 Hello World應用程式

    20:16
  • play_arrow

    06. [MacOS] 開發環境介紹與建立 Hello World應用程式

    13:14
  • play_arrow

    07. Electron 基本架構解析, 了解 Hello World 程式是如何運作

    20:12

第二章 (總長5.3小時)

[補充] Node.js 與 NPM 基礎
keyboard_arrow_down
  • play_arrow

    01. Node.js 執行 JavaScript 的方式

    08:21
  • play_arrow

    02. Node.js 文件 API 導覽與 require 函數介紹

    13:43
  • play_arrow

    03. require 函數介紹(二), Builtin modules 內建函式庫

    09:29
  • lock

    04. npm 介紹(一), npm 官網與套件頁面導覽介紹

    09:02
  • lock

    05. npm 介紹(二), 使用npm install 安裝套件, 以產生 uuid module為例

    09:26
  • lock

    06. [可略過] npm 官網文件頁面導覽介紹

    07:05
  • lock

    07. package.json 介紹(一), 建立 package.json, npm install 與 npm module scope 簡介

    18:13
  • lock

    08. package.json 介紹(二), npm cli run scripts 介紹與全域node_module指令的陷阱

    16:59
  • lock

    09. package.json 介紹(三), npm install 與 module 版本管理, 以與 nodejs 同時使用兩種 jQuery 版本與 jsdom 為例

    22:15
  • lock

    10. package.json 介紹(四), 利用 git 與本地端路徑安裝 node_module

    11:11
  • lock

    11. [補充] 簡易的電腦運作原理

    10:58
  • lock

    12. [補充] 簡易的Process 介紹與占用記憶體示範

    13:20
  • lock

    13. Node API 支援度標示介紹

    05:15
  • lock

    14. 全域物件 Global objects 的使用介紹

    08:45
  • lock

    15. Path 的使用介紹

    11:16
  • lock

    16. File System (fs) 的使用介紹, 不是只有讀寫檔案而已

    11:04
  • lock

    17. 讀寫檔案與非同步議題 (fs)

    17:27
  • play_arrow

    18. 讀寫csv 檔, 文字檔案串流 Stream 基本介紹(readline, createReadStream, csv-parse )

    27:46
  • lock

    19. EventEmitter 的基本使用與非同步處理(event, async)

    21:16
  • lock

    20. Process 與其 event, 簡單介紹 stdin, stdout 與 stderr

    19:29
  • lock

    21. Event Loop 概念, 單執行緒下Nodejs 是如何執行非同步的動作與原理 (tick, phases)

    19:34
  • lock

    22. Promise, Async Await 實作與複習

    13:09
  • lock

    23. web api 與 postman 簡介, 使用 Nodejs 發出 http request(node-fetch)

    11:01

第三章 (總長5.1小時)

Electron 基本函數與 UI 製作
keyboard_arrow_down
  • play_arrow

    01. Electron 基本函數與 UI 製作章節介紹

    03:42
  • play_arrow

    02. 建立空白 Electron 程式, 了解各段程式執行的時間點

    21:32
  • play_arrow

    03. 加入程式變動自動更新方便開發(reload, watch, electron-reload)

    06:26
  • play_arrow

    04. BrowserWindow基本設定(一), 調整視窗大小, menu 與開發者工具

    12:22
  • lock

    05. 介紹 Electron 畫面製作的優勢, 加入初始化 CSS

    10:55
  • lock

    06. 響應式畫面(一), 使用 Flex 製作等比例縮放

    17:05
  • lock

    07. 響應式畫面(二), 利用 @media breakpoint 來實現畫面響應

    12:47
  • lock

    08. 加入且簡單介紹Bootstrap 5 來實現畫面響應

    18:26
  • lock

    09. 利用 CSS 製作類似 VSCode 左右切版的版型

    14:38
  • lock

    10. 製作 Left menu 分頁切換功能

    17:14
  • lock

    11. 加入 SVG icon, 修正 e.target 與 e.currentTarget 之間的錯誤

    09:06
  • lock

    12. 加入檔案讀取功能, 顯示文件檔內容於 Electron 畫面

    10:56
  • lock

    13. 動態增減 Tab 分頁

    20:08
  • lock

    14. 介紹 Context Isolation 安全性機制, 合併讀取檔案與 Tab 分頁功能

    16:47
  • lock

    15. 整理分頁 CSS

    12:32
  • lock

    16. 利用自製樣板系統練習 html 組合

    13:37
  • lock

    17. 加入 webpack, 編譯 sass 與 javascript 檔給瀏覽器元件使用

    15:29
  • lock

    18. 利用 webpack 與 html-loader 預處理 html 樣板

    24:09
  • lock

    19. Electron API 文件導覽

    10:06
  • lock

    20. 製作不規則無邊框應用程式

    08:19
  • lock

    21. ipc 機制介紹, 利用 ipc 機制關閉 child browser window (ipcMain, ipcRenderer)

    18:06
  • lock

    22. 使用作業系統剪貼板機制, 跨程式複製貼上文字與HTML 格式

    09:42

第四章 (總長4.0小時)

實作範例 - 點餐系統功能來講解 (包含後端 Server伺服器溝通)
keyboard_arrow_down
  • lock

    01. 建立空白 Electron 程式包含各類別檔案位置與 Webpack 設定(concurrently)

    15:39
  • lock

    02. 設定 BrowserWindow 參數, 自動抓取螢幕大小來設定(Screen)

    14:34
  • play_arrow

    03. 餐飲點餐系統初步概念說明

    06:23
  • lock

    04. 建立客製化 Menu 與基本使用講解(Menu, MenuItem)

    11:43
  • lock

    05. 利用 ipc 機制切換畫面與功能

    23:52
  • lock

    06. 加入Bootstrap 5 切分畫面與連結前端初始化程式

    19:25
  • lock

    07. 加入商品列表, 與連結細項跳出窗

    11:17
  • lock

    08. 加入商品細項選擇, 加入購買清單

    24:04
  • lock

    09. 購買清單UI 切版與 JavaScript 模擬 private property 實作

    11:06
  • lock

    10. 完成購買清單加入與顯示功能, 引入Model 層的實作簡化開發

    24:19
  • lock

    11. 完成建立訂單與加入 Service 概念

    21:49
  • lock

    12. 建立 Product Model 與 Service 拆解功能

    16:39
  • lock

    13. 建立 Category Model 讓 Product 與 Category 有關聯性

    14:22
  • lock

    14. 抽象化功能, 加入 tabs 分頁

    22:31
  • 章節尚未完全完結,我們會持續更新!!

第五章 (總長1.6小時)

硬體裝置操作,與電腦外接裝置互動控制
keyboard_arrow_down
  • play_arrow

    01. [補充] Arduino 介紹, 為何我們選用 Arduino 做練習

    20:05
  • lock

    02. [補充] Arduino 連接電腦介紹與注意事項

    09:34
  • lock

    03. [補充][Windows] Arduino IDE 下載與基本使用教學

    07:39
  • lock

    04. 簡介 GPIO, 並列埠 Parallel Port, 序列埠 Serial port的原理與用途

    18:43
  • lock

    05. 簡介硬體 Protocol, 軟體 Protocol 和 Driver 驅動程式的關係

    17:10
  • lock

    06. 基本 UART 程式示範, 傳送指令控制 Arduino 動作

    12:16
  • lock

    07. 利用 NodeJS 傳送與接收 UART 訊息與 Arduino 溝通

    10:45
  • 章節尚未完全完結,我們會持續更新!!

第六章 (總長1.0小時)

打包與部署,了解跨平台安裝要注意的事項
keyboard_arrow_down
  • lock

    01. [Windows] 產出 Electron Windows APP 與安裝檔, 解決 squirrel nuspec 錯誤

    13:06
  • lock

    02. 設定完整開發環境與 Electron Forge 共用

    09:35
  • lock

    03. 打包排除不必要檔案, 避開 regex 造成的陷阱

    13:50
  • lock

    04. 安裝程式後儲存檔案位置探討測試

    13:29
  • lock

    05. [Windows] 解決 squirrel 安裝開啟兩次問題與了解其用途

    11:37

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師,但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司,範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設,手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷:
進度條 技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台 網站架構設計與建置
HelloStudy 楓禾留遊學網 設計與建置
Funlock 放樂工作室真實密室逃脫遊戲  - 魔鏡迷城 電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師