Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Electron Workshop - Shanghai 2016
Search
Cheng Zhao
October 14, 2016
Programming
0
250
Electron Workshop - Shanghai 2016
The slides for the Electron workshop at Shanghai HACK×FDU.
Cheng Zhao
October 14, 2016
Tweet
Share
More Decks by Cheng Zhao
See All by Cheng Zhao
Electron.js in 2019 (中文/Simplified Chinese)
zcbenz
0
410
Electron Now
zcbenz
2
710
Electron Now(日本語)
zcbenz
3
1k
a community story of Electron
zcbenz
0
190
Evolution of Electron - NodeFest 2016
zcbenz
7
15k
Practice on embedding Node.js into Atom Editor
zcbenz
24
11k
node-webkit: app runtime based on Chromium and node.js
zcbenz
248
190k
Other Decks in Programming
See All in Programming
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Caude codeで爆速開発
codelynx
0
100
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
2
380
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
140
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
効率的な開発手段として VRTを活用する
ishkawa
1
180
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
3
540
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Producing Creativity
orderedlist
PRO
346
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building Applications with DynamoDB
mza
95
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
It's Worth the Effort
3n
185
28k
Transcript
ᵭত ԟᖫٟELECTRONଫአ ELECTRON WORKSHOP 2016 SHANGHAI
ELECTRON WORKSHOP ىԭ౯ ▸ ᩶౮ ▸ ڠ᭜ԧElectronຝ ▸ ࣁGitHubૡ֢ ▸
ཻᬨىဳғhttps://github.com/zcbenz
ELECTRON WORKSHOP ᬯེWORKSHOPጱፓຽ ▸ ԧᥴElectronጱचᏐᎣᦩ ▸ ൫ୌঅᖫٟElectronଫአጱሾह ▸ ԟElectronଫአጱचຝ ▸
ᛔ૩ᖫٟӞӻElectronଫአ
ELECTRON WORKSHOP ▸ Electronݢզਖ਼ᗑᶭ۱౮ໟᶎଫአ ▸ ֵአChromium֢ԅක ▸ رᦜࣁᗑᶭӾֵአNode.js ▸ ׀ԧӞॺJavaScript
APIӨᔮᕹԻ ՋԍฎELECTRON
ELECTRON WORKSHOP ग़ᬰᑕຝ Ԇᬰᑕ ᗑᶭ ᗑᶭ … … …
ELECTRON WORKSHOP ֵአNODE.JSഴګݱӻᬰᑕ Ԇᬰᑕ ᗑᶭ … … … Node.js Node.js
Node.js ᗑᶭ Node.js
ELECTRON WORKSHOP ᗑᶭԏᳵፘᵍᐶ҅ԆᬰᑕᗑᶭአIPC᭗מ Ԇᬰᑕ ᗑᶭ … … … Node.js Node.js
Node.js ᗑᶭ Node.js IPCᬰᑕᳵ᭗מ
ELECTRON WORKSHOP ਞᤰELECTRONጱٵ॓ૡ֢ ▸ ਞᤰNode.js ▸ ਥᗑғ https://nodejs.org/en/ ▸ Ӿࢵ᳒؟ғ
https://npm.taobao.org/mirrors/node/ v6.7.0/
ELECTRON WORKSHOP ਞᤰELECTRON npm config set registry https://registry.npm.taobao.org set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
npm install -g electron ▸ Ӿࢵ᳒؟ӥғ https://npm.taobao.org/mirrors/ electron/1.4.3/ ▸ ᘏեᤈӥғ
ELECTRON WORKSHOP ELECTRON
ELECTRON WORKSHOP ӥQUICK START ▸ https://github.com/electron/electron-quick-start ▸ ӥZIPկғ
ELECTRON WORKSHOP QUICK START ೫
ELECTRON WORKSHOP QUICK START
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js { "name":"electron-quick-start",
"version":"0.0.1", "main":"main.js" } ଫአጱݷᑍ ଫአጱᇇ ଫአጱفݗկ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) አElectronཛྷࣘ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ؙਂᑻݗጱݒᰁ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ڠୌӞӻᑻݗ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ࣁᑻݗٖف୮ڹፓ୯ӥጱindex.html
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ݎᘏૡٍ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js const electron
= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL(`file://${__dirname}/index.html`) mainWindow.webContents.openDevTools() } app.on('ready', createWindow) ࣁଫአفਠ౮ڠୌᑻݗ
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js <body> <h1>Hello
World!</h1> We are using node <script> document.write(process.versions.node) </script> </body> <script> require('./renderer.js') </script>
ELECTRON WORKSHOP ELECTRONଫአጱचᕮ quick-start package.json main.js index.html renderer.js // ᬯӻկ᯾ᶎՋԍ᮷ဌํ֦҅ݢզࣁᬯ᯾ᶎֵአNode.jsጱAPI
ELECTRON WORKSHOP ۱ELECTRONଫአ ▸ ਞᤰelectron-packagerғ npm install -g electron-packager electron-packager
. --platform=win32 --arch=x64 —version=1.4.3 ▸ ۱
ᨀᨀ