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

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

最後更新時間： 2021/10

特價 NT$: 2900

原價 NT$: 6000

優惠至：2024/04/28

課程包含:

終生於平台觀看詳情

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 Code、Postman、WhatsApp、Skype、Slack、Figma。

點我看全部列表

課程難度

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

請參閱課程需求

課程需求

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 課程介紹與環境設定安裝

01. Electron.js 與課程介紹
11:25
02. 章節介紹與開始課程前須要先瞭解的事
05:46
03. [Windows] 安裝Node.js與npm
07:16
04. [MacOS] 安裝Node.js與npm
05:43
05. [Windows] 開發環境介紹與建立 Hello World應用程式
20:16
06. [MacOS] 開發環境介紹與建立 Hello World應用程式
13:14
07. Electron 基本架構解析, 了解 Hello World 程式是如何運作
20:12

第二章 (總長5.3小時)

[補充] Node.js 與 NPM 基礎

01. Node.js 執行 JavaScript 的方式
08:21
02. Node.js 文件 API 導覽與 require 函數介紹
13:43
03. require 函數介紹(二), Builtin modules 內建函式庫
09:29
04. npm 介紹(一), npm 官網與套件頁面導覽介紹
09:02
05. npm 介紹(二), 使用npm install 安裝套件, 以產生 uuid module為例
09:26
06. [可略過] npm 官網文件頁面導覽介紹
07:05
07. package.json 介紹(一), 建立 package.json, npm install 與 npm module scope 簡介
18:13
08. package.json 介紹(二), npm cli run scripts 介紹與全域node_module指令的陷阱
16:59
09. package.json 介紹(三), npm install 與 module 版本管理, 以與 nodejs 同時使用兩種 jQuery 版本與 jsdom 為例
22:15
10. package.json 介紹(四), 利用 git 與本地端路徑安裝 node_module
11:11
11. [補充] 簡易的電腦運作原理
10:58
12. [補充] 簡易的Process 介紹與占用記憶體示範
13:20
13. Node API 支援度標示介紹
05:15
14. 全域物件 Global objects 的使用介紹
08:45
15. Path 的使用介紹
11:16
16. File System (fs) 的使用介紹, 不是只有讀寫檔案而已
11:04
17. 讀寫檔案與非同步議題 (fs)
17:27
18. 讀寫csv 檔, 文字檔案串流 Stream 基本介紹(readline, createReadStream, csv-parse )
27:46
19. EventEmitter 的基本使用與非同步處理(event, async)
21:16
20. Process 與其 event, 簡單介紹 stdin, stdout 與 stderr
19:29
21. Event Loop 概念, 單執行緒下Nodejs 是如何執行非同步的動作與原理 (tick, phases)
19:34
22. Promise, Async Await 實作與複習
13:09
23. web api 與 postman 簡介, 使用 Nodejs 發出 http request(node-fetch)
11:01

第三章 (總長5.1小時)

Electron 基本函數與 UI 製作

01. Electron 基本函數與 UI 製作章節介紹
03:42
02. 建立空白 Electron 程式, 了解各段程式執行的時間點
21:32
03. 加入程式變動自動更新方便開發(reload, watch, electron-reload)
06:26
04. BrowserWindow基本設定(一), 調整視窗大小, menu 與開發者工具
12:22
05. 介紹 Electron 畫面製作的優勢, 加入初始化 CSS
10:55
06. 響應式畫面(一), 使用 Flex 製作等比例縮放
17:05
07. 響應式畫面(二), 利用 @media breakpoint 來實現畫面響應
12:47
08. 加入且簡單介紹Bootstrap 5 來實現畫面響應
18:26
09. 利用 CSS 製作類似 VSCode 左右切版的版型
14:38
10. 製作 Left menu 分頁切換功能
17:14
11. 加入 SVG icon, 修正 e.target 與 e.currentTarget 之間的錯誤
09:06
12. 加入檔案讀取功能, 顯示文件檔內容於 Electron 畫面
10:56
13. 動態增減 Tab 分頁
20:08
14. 介紹 Context Isolation 安全性機制, 合併讀取檔案與 Tab 分頁功能
16:47
15. 整理分頁 CSS
12:32
16. 利用自製樣板系統練習 html 組合
13:37
17. 加入 webpack, 編譯 sass 與 javascript 檔給瀏覽器元件使用
15:29
18. 利用 webpack 與 html-loader 預處理 html 樣板
24:09
19. Electron API 文件導覽
10:06
20. 製作不規則無邊框應用程式
08:19
21. ipc 機制介紹, 利用 ipc 機制關閉 child browser window (ipcMain, ipcRenderer)
18:06
22. 使用作業系統剪貼板機制, 跨程式複製貼上文字與HTML 格式
09:42

第四章 (總長4.0小時)

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

01. 建立空白 Electron 程式包含各類別檔案位置與 Webpack 設定(concurrently)
15:39
02. 設定 BrowserWindow 參數, 自動抓取螢幕大小來設定(Screen)
14:34
03. 餐飲點餐系統初步概念說明
06:23
04. 建立客製化 Menu 與基本使用講解(Menu, MenuItem)
11:43
05. 利用 ipc 機制切換畫面與功能
23:52
06. 加入Bootstrap 5 切分畫面與連結前端初始化程式
19:25
07. 加入商品列表, 與連結細項跳出窗
11:17
08. 加入商品細項選擇, 加入購買清單
24:04
09. 購買清單UI 切版與 JavaScript 模擬 private property 實作
11:06
10. 完成購買清單加入與顯示功能, 引入Model 層的實作簡化開發
24:19
11. 完成建立訂單與加入 Service 概念
21:49
12. 建立 Product Model 與 Service 拆解功能
16:39
13. 建立 Category Model 讓 Product 與 Category 有關聯性
14:22
14. 抽象化功能, 加入 tabs 分頁
22:31
章節尚未完全完結，我們會持續更新!!

第五章 (總長1.6小時)

硬體裝置操作，與電腦外接裝置互動控制

01. [補充] Arduino 介紹, 為何我們選用 Arduino 做練習
20:05
02. [補充] Arduino 連接電腦介紹與注意事項
09:34
03. [補充][Windows] Arduino IDE 下載與基本使用教學
07:39
04. 簡介 GPIO, 並列埠 Parallel Port, 序列埠 Serial port的原理與用途
18:43
05. 簡介硬體 Protocol, 軟體 Protocol 和 Driver 驅動程式的關係
17:10
06. 基本 UART 程式示範, 傳送指令控制 Arduino 動作
12:16
07. 利用 NodeJS 傳送與接收 UART 訊息與 Arduino 溝通
10:45
章節尚未完全完結，我們會持續更新!!

第六章 (總長1.0小時)

打包與部署，了解跨平台安裝要注意的事項

01. [Windows] 產出 Electron Windows APP 與安裝檔, 解決 squirrel nuspec 錯誤
13:06
02. 設定完整開發環境與 Electron Forge 共用
09:35
03. 打包排除不必要檔案, 避開 regex 造成的陷阱
13:50
04. 安裝程式後儲存檔案位置探討測試
13:29
05. [Windows] 解決 squirrel 安裝開啟兩次問題與了解其用途
11:37

課程講師

縱裕

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

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

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