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
220
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
310
Electron Now
zcbenz
2
630
Electron Now(日本語)
zcbenz
3
910
a community story of Electron
zcbenz
0
170
Evolution of Electron - NodeFest 2016
zcbenz
7
15k
Practice on embedding Node.js into Atom Editor
zcbenz
24
10k
node-webkit: app runtime based on Chromium and node.js
zcbenz
248
190k
Other Decks in Programming
See All in Programming
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Jakarta EE meets AI
ivargrimstad
1
500
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
140
A New Era of Testing
mannodermaus
2
510
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
360
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
250
今インフラ技術をイチから学び直すなら
yuhta28
1
140
2024 컴포즈 정원사
jisungbin
0
150
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
The Invisible Side of Design
smashingmag
295
50k
GraphQLとの向き合い方2022年版
quramy
43
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Designing for Performance
lara
604
68k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
What's new in Ruby 2.0
geeforr
340
31k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Why Our Code Smells
bkeepers
PRO
334
56k
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 ▸ ۱
ᨀᨀ