Build desktop apps with HTML/CSS/JavaScript (IOSC 第七週讀書會)

Electron 是 Github 團隊開發的跨平台桌面應用程式(cross platform desktop application)開發工具，基於 io.js 與 chromium, 允許使用前端技術(HTML/CSS/JavaScript) 與 io.js(node.js) 來開發可運行在 Linux, OS X, Windows 的 desktop apps.

Transcript

1. Build desktop apps Build desktop apps with HTML / CSS / JavaScript with HTML / CSS / JavaScript LHUIOSC / @Jhen
2. slides.com/jhen-jiehong/iosc-7-week
3. ⻯⿓龍華資訊開源社 ⻯⿓龍華資訊開源社 LHU Information Open Source Community fb.com/groups/lhuiosc
4. About me About me Jhen / 洪振傑 senior student, IM work on FuGood ( ) JS full-stack / MyBigDay jhen.tw developer@jhen.me github (jhen0409) facebook (jhenjie.hong)
5. ⾃自由分享、討論時間 ⾃自由分享、討論時間
6. Electron Electron formerly known as Atom Shell Build cross platform desktop apps with web technologies Technical differences to NW.js (formerly node-webkit)
7. , June 21, 2014 source
8. Chromium + io.js Chromium + io.js chromuim io.js (還沒開始寫你的程式就佔了 100 多M)
9. Atom
10. Visual Studio Code
11. Install Install use io.js nvm install iojs-v2 npm install -g electron-prebuilt download add to $PATH use 'electron' command github.com/atom/electron/releases
12. First app First app quick start
13. files files package.json main.js index.html
14. API for Main process API for Main process app browser-window dialog global-shortcut ipc menu menu-item power-monitor tray
15. API for Renderer process API for Renderer process ipc remote web-frame File object webview
16. API for both process API for both process clipboard crash-reporter screen shell
17. process process 間如何溝通 間如何溝通? ? IPC (Inter-Process Communication) use 'ipc' module renderer -> main ipc.send('asynchronous', 'message') main -> renderer BrowserWindow.webContents.send('asynchronous', 'message')
18. use DevTools? use DevTools? BrowserWindow.openDevTools({ detach: true }); add DevTools extension? BrowserWindow.addDevToolsExtension(path);
19. save app data save app data reference use embedded databases SQLite NeDB ...... app.getPath(name)
20. Thanks Thanks