Electron Workshop - Shanghai 2016

The slides for the Electron workshop at Shanghai HACK×FDU.

Transcript

1. ՗ᵭ୏ত
   ਍ԟᖫٟELECTRONଫአ
   ELECTRON WORKSHOP 2016 SHANGHAI
   

   View Slide

2. ELECTRON WORKSHOP
   ىԭ౯
   ▸ ᩶౮
   ▸ ڠ᭜ԧElectron໛ຝ
   ▸ ࣁGitHubૡ֢
   ▸ ཻᬨىဳғhttps://github.com/zcbenz
   

   View Slide

3. ELECTRON WORKSHOP
   ᬯེWORKSHOPጱፓຽ
   ▸ ԧᥴElectronጱचᏐᎣᦩ
   ▸ ൫ୌঅᖫٟElectronଫአጱሾह
   ▸ ਍ԟElectronଫአጱच๜ຝ຅
   ▸ ᛔ૩ᖫٟӞӻElectronଫአ
   

   View Slide

4. ELECTRON WORKSHOP
   ▸ Electronݢզਖ਼ᗑᶭ಑۱౮ໟᶎଫአ
   ▸ ֵአChromium֢ԅ୚ක
   ▸ رᦜࣁᗑᶭӾֵአNode.js
   ▸ ൉׀ԧӞॺJavaScript APIӨᔮᕹԻ԰
   ՋԍฎELECTRON
   

   View Slide

5. ELECTRON WORKSHOP
   ग़ᬰᑕຝ຅
   Ԇᬰᑕ
   ᗑᶭ ᗑᶭ … … …
   

   View Slide

6. ELECTRON WORKSHOP
   ֵአNODE.JSഴګݱӻᬰᑕ
   Ԇᬰᑕ
   ᗑᶭ … … …
   Node.js
   Node.js
   Node.js
   ᗑᶭ Node.js
   

   View Slide

7. ELECTRON WORKSHOP
   ᗑᶭԏᳵፘ԰ᵍᐶ҅Ԇᬰᑕ޾ᗑᶭአIPC᭗מ
   Ԇᬰᑕ
   ᗑᶭ … … …
   Node.js
   Node.js
   Node.js
   ᗑᶭ Node.js
   IPCᬰᑕᳵ᭗מ
   

   View Slide

8. ELECTRON WORKSHOP
   ਞᤰELECTRONጱٵ॓ૡ֢
   ▸ ਞᤰNode.js
   ▸ ਥᗑғ

   https://nodejs.org/en/
   ▸ Ӿࢵ᳒؟ғ

   https://npm.taobao.org/mirrors/node/
   v6.7.0/
   

   View Slide

9. 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/
   ▸ ౲ᘏ޸եᤈӥғ
   

   View Slide

10. ELECTRON WORKSHOP
    ಑୏ELECTRON
    

    View Slide

11. ELECTRON WORKSHOP
    ӥ᫹QUICK START
    ▸ ಑୏https://github.com/electron/electron-quick-start
    ▸ ӥ᫹ZIP෈կғ
    

    View Slide

12. ELECTRON WORKSHOP
    ಑୏QUICK START
    ೒೫
    

    View Slide

13. ELECTRON WORKSHOP
    ಑୏QUICK START
    

    View Slide

14. ELECTRON WORKSHOP
    ELECTRONଫአጱच๜ᕮ຅
    quick-start
    package.json
    main.js
    index.html
    renderer.js
    {
    "name":"electron-quick-start",
    "version":"0.0.1",
    "main":"main.js"
    }
    ଫአጱݷᑍ
    ଫአጱᇇ๜
    ଫአጱفݗ෈կ
    

    View Slide

15. 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ཛྷࣘ
    

    View Slide

16. 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)
    ؙਂᑻݗ੒᨝ጱݒᰁ
    

    View Slide

17. 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)
    ڠୌӞӻᑻݗ
    

    View Slide

18. 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
    

    View Slide

19. 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)
    ಑୏୏ݎᘏૡٍ
    

    View Slide

20. 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)
    ࣁଫአ᫹فਠ౮෸ڠୌᑻݗ
    

    View Slide

21. ELECTRON WORKSHOP
    ELECTRONଫአጱच๜ᕮ຅
    quick-start
    package.json
    main.js
    index.html
    renderer.js
    
    Hello World!
    We are using node
    <br/>document.write(process.versions.node)<br/>
    
    <br/>require('./renderer.js')<br/>
    

    View Slide

22. ELECTRON WORKSHOP
    ELECTRONଫአጱच๜ᕮ຅
    quick-start
    package.json
    main.js
    index.html
    renderer.js // ᬯӻ෈կ᯾ᶎՋԍ᮷ဌํ֦҅ݢզࣁᬯ᯾ᶎֵአNode.jsጱAPI
    

    View Slide

23. ELECTRON WORKSHOP
    ಑۱ELECTRONଫአ
    ▸ ਞᤰelectron-packagerғ
    npm install -g electron-packager
    electron-packager . --platform=win32 --arch=x64 —version=1.4.3
    ▸ ಑۱
    

    View Slide

24. ᨀᨀ
    

    View Slide