Electron項(xiàng)目開發(fā)實(shí)戰(zhàn)
定 價(jià):119 元
- 作者:[美]丹尼斯·維卡 著 張弢 譯
- 出版時(shí)間:2022/3/1
- ISBN:9787302598077
- 出 版 社:清華大學(xué)出版社
- 中圖法分類:TP311.561
- 頁碼:376
- 紙張:
- 版次:1
- 開本:
《Electron項(xiàng)目開發(fā)實(shí)戰(zhàn)》詳細(xì)闡述了與Electron項(xiàng)目開發(fā)相關(guān)的基本解決方案,主要包括構(gòu)建Markdown編輯器,與Angular、React和Vue集成,構(gòu)建屏幕截圖剪裁工具,制作2D游戲,構(gòu)建音樂播放器,分析、Bug跟蹤和許可機(jī)制,利用Firebase構(gòu)建群聊應(yīng)用程序,構(gòu)建eBook編輯器和生成器,構(gòu)建桌面數(shù)字錢包等內(nèi)容。此外,本書還提供了相應(yīng)的示例、代碼,以幫助讀者進(jìn)一步理解相關(guān)方案的實(shí)現(xiàn)過程。
本書適合作為高等院校計(jì)算機(jī)及相關(guān)專業(yè)的教材和教學(xué)參考書,也可作為相關(guān)開發(fā)人員的自學(xué)用書和參考手冊
前 言
本書將引領(lǐng)讀者設(shè)置、配置、構(gòu)建和發(fā)布Electron應(yīng)用程序,并提供進(jìn)一步的實(shí)戰(zhàn)經(jīng)驗(yàn)。其間,我們將構(gòu)建多個(gè)項(xiàng)目、處理各種挑戰(zhàn)和問題,并將JavaScript框架與底層工具鏈集成。
適用讀者
本書面向初學(xué)者或有經(jīng)驗(yàn)的Web開發(fā)人員。讀者應(yīng)具備HTML、CSS和JavaScript方面的基礎(chǔ)知識,并熟悉React、Angular或Vue.js框架之一。
另外,本書不要求桌面開發(fā)方面的前期知識。
本書內(nèi)容
第1章準(zhǔn)備開發(fā)環(huán)境并開始Electron開發(fā)。
第2章引領(lǐng)讀者熟悉典型Electron應(yīng)用程序的主要構(gòu)造模塊。
第3章介紹前端JavaScript框架,如Angular、React.js和Vue.js,以及如何將其集成至Electron應(yīng)用程序中,以構(gòu)建跨平臺的桌面應(yīng)用程序,進(jìn)而通過站點(diǎn)共享代碼庫。
第4章考查如何與Electron中的本地圖像捕捉API協(xié)調(diào)工作、系統(tǒng)托盤集成和鍵盤處理機(jī)制。
第 5 章討論一個(gè)有趣的JavaScript游戲引擎,并處理游戲循環(huán)、加載外資源,以及處理Main和Renderer進(jìn)程間的通信。
第6章將構(gòu)建一個(gè)包含播放列表和定制專輯封面的桌面音樂播放器。
第7章針對在生產(chǎn)中監(jiān)控Electron應(yīng)用程序、跟蹤錯(cuò)誤和崩潰、分析實(shí)時(shí)用戶群提供了必要的信息。
第 8 章創(chuàng)建一個(gè)具有群聊功能的Electron應(yīng)用程序,針對移動應(yīng)用程序集成Google Firebase服務(wù)、配置Google Authentication,并在云中存儲應(yīng)用程序數(shù)據(jù)。
第9章將創(chuàng)建一個(gè)簡單的跨平臺圖書編輯器,并利用Docker生成PDF和ePub圖書,隨后在獨(dú)立的Electron窗口中預(yù)覽PDF文件。
第 10 章將開發(fā)一個(gè)簡單的數(shù)字錢包應(yīng)用程序(與外部服務(wù)集成),并連接至運(yùn)行于本地的服務(wù)器。
發(fā)布周期
從2019年5月13日開始,Electron項(xiàng)目的發(fā)布周期改為12周。讀者可訪問官方文檔查看詳細(xì)內(nèi)容,對應(yīng)網(wǎng)址為https://electronjs.org/blog/12-week-cadence。
縮短發(fā)布周期意味著我們可更快地獲取新特性、修復(fù)Bug和安全問題。當(dāng)然,這也意味著,本書出版后很可能會發(fā)布新的Electron版本。
好消息是,Electron團(tuán)隊(duì)支持近的3個(gè)主要版本。對此,讀者可訪問https://electronjs. org/docs/tutorial/support#supported-versions查看時(shí)間表和更多細(xì)節(jié)內(nèi)容。另外,通過輸入下列命令,我們還可以方便地將應(yīng)用程序項(xiàng)目更新至Electron的版本:
npm install electron@latest
關(guān)于每個(gè)版本的詳細(xì)信息,這里建議關(guān)注Electron團(tuán)隊(duì)的博客,對應(yīng)網(wǎng)址為https:// www.electronjs.org/blog。
背景知識
讀者應(yīng)了解Node.js(https://nodejs.org/en/)及其基本命令,如npm install。
偏好Angular的讀者需要了解與Angular CLI相關(guān)的細(xì)節(jié)信息(https://cli.angular.io/)及其命令。
針對React開發(fā),讀者應(yīng)了解Create React App(https://github.com/facebook/create-react- app)工具。
對于Electron開發(fā),當(dāng)使用Vue.js框架時(shí),Vue CLI(https://cli.vuejs.org/)應(yīng)用程序文檔包含了豐富的細(xì)節(jié)信息和示例。
下載示例代碼文件
讀者可訪問www.packt.com并通過個(gè)人賬戶下載本書的示例代碼文件。無論讀者在何處購買了本書,均可訪問www.packt.com/support,經(jīng)注冊后我們會直接將相關(guān)文件通過電子郵件的方式發(fā)送給您。
下載代碼文件的具體操作步驟如下。
(1)訪問www.packt.com并注冊。
(2)選擇Support選項(xiàng)卡。
(3)單擊Code Downloads。
(4)在Search搜索框中輸入書名。
當(dāng)文件下載完畢后,可利用下列軟件的版本解壓或析取文件夾中的內(nèi)容。
? WinRAR/7-Zip(Windows環(huán)境)。
? Zipeg/iZip/UnRarX(Mac環(huán)境)。
? 7-Zip/PeaZip(Linux環(huán)境)。
另外,本書的代碼包也托管于GitHub上,對應(yīng)網(wǎng)址為https://github.com/PacktPublishing/ Electron-Projects。若代碼被更新,現(xiàn)有的GitHub庫也會保持同步更新。
讀者還可訪問https://github.com/PacktPublishing/并從對應(yīng)分類中查看其他代碼包和視頻內(nèi)容。
圖標(biāo)表示警告或重要的注意事項(xiàng)。
圖標(biāo)表示提示信息和操作技巧。
讀者反饋和客戶支持
歡迎讀者對本書提出建議或意見。
對此,讀者可向customercare@packtpub.com發(fā)送郵件,并以書名作為郵件標(biāo)題。
勘誤表
盡管我們希望做到盡善盡美,但不足依然在所難免。如果讀者發(fā)現(xiàn)謬誤之處,無論是文字錯(cuò)誤抑或代碼錯(cuò)誤,還望不吝賜教。對此,讀者可訪問http://www.packtpub.com/submit- errata,選取對應(yīng)書籍,輸入并提交相關(guān)問題的詳細(xì)內(nèi)容。
版權(quán)須知
一直以來,互聯(lián)網(wǎng)上的版權(quán)問題從未間斷,Packt出版社對此類問題異常重視。若讀者在互聯(lián)網(wǎng)上發(fā)現(xiàn)本書任意形式的副本,請告知我們網(wǎng)絡(luò)地址或網(wǎng)站名稱,我們將對此予以處理。關(guān)于盜版問題,讀者可發(fā)送郵件至copyright@packtpub.com。
若讀者針對某項(xiàng)技術(shù)具有專家級的見解,抑或計(jì)劃撰寫書籍或完善某部著作的出版工作,可訪問authors.packtpub.com。
問題解答
若讀者對本書有任何疑問,均可發(fā)送郵件至questions@packtpub.com,我們將竭誠為您服務(wù)。
潘瀟,公司高級技術(shù)經(jīng)理,主要負(fù)責(zé)前端方向,同時(shí)負(fù)責(zé)跨技術(shù)棧的技術(shù)管理工作。從事前端方向8年,在前端業(yè)務(wù)研發(fā)和管理上有一定的經(jīng)驗(yàn)。同時(shí)對其他技術(shù)方向如客戶端開發(fā)等,也有不少涉獵。其中使用Electron進(jìn)行夸端開發(fā)有3年,對Electron的基礎(chǔ)知識、特性、優(yōu)化及進(jìn)階使用有一定心得。
目 錄
第1章 構(gòu)建第1個(gè)Electron應(yīng)用程序 1
1.1 技術(shù)需求 1
1.2 Electron是什么 1
1.3 準(zhǔn)備開發(fā)環(huán)境 2
1.3.1 安裝Visual Studio Code 2
1.3.2 針對macOS設(shè)置環(huán)境 3
1.3.3 針對Ubuntu Linux設(shè)置環(huán)境 5
1.3.4 針對Windows設(shè)置環(huán)境 6
1.3.5 在Windows上安裝Node.js 7
1.4 創(chuàng)建一個(gè)簡單的應(yīng)用程序 8
1.5 多平臺的打包機(jī)制 13
1.5.1 macOS包機(jī)制 13
1.5.2 Ubuntu包機(jī)制 16
1.5.3 Windows的包機(jī)制 18
1.6 本章小結(jié) 20
第2章 構(gòu)建Markdown編輯器 21
2.1 技術(shù)需求 21
2.2 配置新的項(xiàng)目 22
2.3 適配屏幕尺寸 26
2.4 集成應(yīng)用程序菜單 28
2.4.1 創(chuàng)建一個(gè)自定義菜單項(xiàng) 29
2.4.2 定義菜單項(xiàng)角色 32
2.4.3 菜單分隔符 33
2.4.4 鍵盤加速鍵 35
2.4.5 特定平臺的菜單 36
2.4.6 配置菜單中的應(yīng)用程序名稱 38
2.4.7 隱藏菜單項(xiàng) 39
2.4.8 進(jìn)程間的消息發(fā)送 41
2.4.9 將文件保存至本地系統(tǒng) 46
2.4.10 從本地系統(tǒng)中加載文件 53
2.4.11 創(chuàng)建一個(gè)文件菜單 57
2.5 添加拖曳功能 59
2.6 支持自動更新功能 62
2.7 修改應(yīng)用程序的標(biāo)題 71
2.8 本章小結(jié) 72
第3章 與Angular、React和Vue集成 73
3.1 技術(shù)需求 73
3.2 利用Angular構(gòu)建Electron應(yīng)用程序 73
3.2.1 生成Angular項(xiàng)目 74
3.2.2 將Angular項(xiàng)目與Electron集成 76
3.2.3 配置實(shí)時(shí)重載 81
3.2.4 設(shè)置生產(chǎn)版本 83
3.2.5 設(shè)置條件加載 85
3.2.6 使用Angular Material組件 87
3.2.7 Anguar路由機(jī)制 91
3.3 利用React構(gòu)建Electron應(yīng)用程序 98
3.3.1 創(chuàng)建React項(xiàng)目 98
3.3.2 實(shí)時(shí)重載 102
3.3.3 設(shè)置產(chǎn)品發(fā)布版本 105
3.3.4 設(shè)置條件加載 107
3.3.5 使用Blueprint UI工具箱 108
3.4 利用Vue.js構(gòu)建Electron應(yīng)用程序 113
3.4.1 創(chuàng)建一個(gè)Vue配置文件 117
3.4.2 實(shí)時(shí)重載 119
3.4.3 產(chǎn)品發(fā)布版本 121
3.4.4 設(shè)置條件加載 122
3.4.5 添加路由機(jī)制 123
3.4.6 配置Vue Material 125
3.5 本章小結(jié) 129
第4章 構(gòu)建屏幕截圖剪裁工具 131
4.1 技術(shù)需求 131
4.2 準(zhǔn)備項(xiàng)目 132
4.3 配置無框窗口 133
4.3.1 macOS的附加選項(xiàng) 135
4.3.2 使用隱藏的titleBarStyle 135
4.3.3 titleBarStyle屬性的hiddenInset值 136
4.3.4 titleBarStyle的customButtonsOnHover值 137
4.4 透明窗口 138
4.5 可拖曳的應(yīng)用程序窗口 141
4.6 添加截圖工具欄按鈕 142
4.7 使用desktopCapturer API 144
4.8 計(jì)算主顯示尺寸 145
4.9 生成并保存縮略圖 146
4.10 重置圖像尺寸并剪裁圖像 148
4.11 測試應(yīng)用程序的行為 151
4.12 集成系統(tǒng)托盤 152
4.13 啟動時(shí)隱藏主應(yīng)用程序菜單 154
4.14 注冊全局鍵盤快捷方式 155
4.15 本章小結(jié) 157
第5章 制作2D游戲 159
5.1 技術(shù)需求 159
5.2 配置游戲項(xiàng)目 160
5.3 運(yùn)行Hello World示例 163
5.4 渲染背景圖像 166
5.5 禁止窗口尺寸變化 168
5.6 渲染精靈對象 168
5.7 縮放精靈對象 169
5.8 處理鍵盤輸入 171
5.9 根據(jù)方向翻轉(zhuǎn)飛船對象 173
5.10 控制精靈對象的坐標(biāo) 174
5.11 控制精靈對象的速度 177
5.12 本章小結(jié) 179
第6章 構(gòu)建音樂播放器 181
6.1 技術(shù)需求 181
6.2 創(chuàng)建項(xiàng)目 182
6.3 音樂播放器組件 184
6.3.1 下載音樂文件 185
6.3.2 基本的播放器設(shè)置 188
6.3.3 樣式按鈕 192
6.4 播放控制按鈕 195
6.4.1 Stop按鈕 195
6.4.2 靜音和非靜音按鈕 197
6.4.3 音量按鈕 199
6.5 實(shí)現(xiàn)歌曲的進(jìn)度欄 202
6.6 顯示音樂元數(shù)據(jù) 203
6.7 改進(jìn)用戶界面 208
6.8 終的結(jié)構(gòu) 210
6.9 本章小結(jié) 213
第7章 分析、Bug跟蹤和許可機(jī)制 215
7.1 技術(shù)需求 215
7.2 連接分析和跟蹤機(jī)制 216
7.3 構(gòu)建自身方案或使用已有服務(wù) 216
7.3.1 創(chuàng)建自己的分析服務(wù) 217
7.3.2 使用第三方分析服務(wù) 217
7.4 針對Electron應(yīng)用程序使用Nucleus 218
7.5 創(chuàng)建一個(gè)新的Nucleus賬戶 219
7.6 創(chuàng)建基于跟蹤支持的新項(xiàng)目 222
7.7 安裝Nucleus Electron庫 224
7.8 查看實(shí)時(shí)分析數(shù)據(jù) 226
7.9 禁用每個(gè)用戶請求的跟蹤機(jī)制 230
7.10 驗(yàn)證實(shí)時(shí)用戶統(tǒng)計(jì)結(jié)果 231
7.11 支持離線模式 232
7.12 處理應(yīng)用程序更新 232
7.13 加載全局服務(wù)器設(shè)置 235
7.14 許可檢查機(jī)制和政策 237
7.14.1 創(chuàng)建新策略和許可 237
7.14.2 檢查應(yīng)用程序中的證書 240
7.15 本章小結(jié) 241
第8章 利用Firebase構(gòu)建群聊應(yīng)用程序 243
8.1 技術(shù)需求 243
8.2 創(chuàng)建一個(gè)Angular項(xiàng)目 245
8.3 創(chuàng)建新的Firebase賬戶 248
8.4 創(chuàng)建一個(gè)Firebase應(yīng)用程序 252
8.5 配置Angular Material組件 254
8.5.1 添加Browser Animations模塊 255
8.5.2 配置默認(rèn)的主題 255
8.5.3 添加Material Icons庫 255
8.5.4 添加導(dǎo)航欄 256
8.5.5 利用材質(zhì)工具欄測試應(yīng)用程序 257
8.6 構(gòu)建登錄對話框 258
8.6.1 實(shí)現(xiàn)Material界面 259
8.6.2 錯(cuò)誤處理機(jī)制 261
8.6.3 準(zhǔn)備聊天組件占位符 262
8.7 將登錄對話框連接至Firebase Authentication 263
8.7.1 啟用注冊供應(yīng)商 264
8.7.2 創(chuàng)建示例賬戶 266
8.7.3 集成Login對話框和Firebase 268
8.8 配置實(shí)時(shí)數(shù)據(jù)庫 271
8.9 渲染聊天群列表 275
8.10 實(shí)現(xiàn)群消息頁面 279
8.11 顯示群消息 281
8.12 發(fā)送群消息 285
8.12.1 更新消息列表界面 288
8.12.2 進(jìn)一步改進(jìn) 288
8.13 驗(yàn)證Electron Shell 289
8.14 本章小結(jié) 290
第9章 構(gòu)建eBook編輯器和生成器 291
9.1 技術(shù)需求 291
9.2 創(chuàng)建項(xiàng)目結(jié)構(gòu) 292
9.2.1 生成新的React應(yīng)用程序 292
9.2.2 安裝編輯器組件 293
9.2.3 測試Web應(yīng)用程序 298
9.2.4 與Electron Shell集成 300
9.3 升級代碼并使用React Hooks 301
9.4 控制鍵盤快捷方式 302
9.4.1 加載文件 303
9.4.2 保存文件 306
9.5 集成應(yīng)用程序菜單 308
9.6 設(shè)置電子書生成器 311
9.6.1 安裝Docker 312
9.6.2 運(yùn)行Pandoc容器 315
9.6.3 將文檔發(fā)送至主進(jìn)程(Node.js) 317
9.7 從Electron中調(diào)用Docker命令 320
9.7.1 將標(biāo)記文本發(fā)送至Node.js進(jìn)程 320
9.7.2 將標(biāo)記文本保存至本地磁盤 320
9.8 生成PDF電子書 323
9.9 生成ePub電子書 325
9.10 本章小結(jié) 328
第10章 構(gòu)建桌面數(shù)字錢包 329
10.1 技術(shù)需求 329
10.2 利用React生成項(xiàng)目 330
10.3 集成Ant Design庫 332
10.4 設(shè)置個(gè)人以太坊區(qū)塊鏈 334
10.5 配置Ethereum JavaScript API 338
10.6 顯示以太坊節(jié)點(diǎn)信息 340
10.6.1 獲取節(jié)點(diǎn)信息 340
10.6.2 在Header中渲染節(jié)點(diǎn)信息 341
10.7 集成應(yīng)用程序菜單 342
10.8 渲染賬戶列表 344
10.9 顯示賬戶余額 347
10.10 將以太轉(zhuǎn)至另一個(gè)賬戶中 350
10.11 打包應(yīng)用程序并發(fā)布 355
10.12 本章小結(jié) 358