Downloaded 36 times
Uploaded byBrainhub
JavaScript and Desktop Apps - Introduction to Electron
The document provides a brief introduction to creating desktop applications using Electron and JavaScript, including setting up an HTTP server and creating windows. It outlines necessary packages, sample code for handling the main process and renderer process, and resources for further learning. Additionally, it lists Electron APIs and mentions the distribution of the app using electron-packager.
JavaScript and Desktop Apps - Introduction to Electron
- 1. JavaScript and desktopapps Short introduction to Electron environment
- 2.
- 3.
- 4.
- 5. // Load thehttp module to create an http server. var http = require('http'); // Configure our HTTP server to respond with Hello World to all requests. var server = http.createServer(function (request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello Worldn"); }); // Listen on port 8000, IP defaults to 127.0.0.1 server.listen(8000); // Put a friendly message on the terminal console.log("Server running at http://127.0.0.1:8000/"); https://howtonode.org/hello-node
- 6.
- 7.
- 9.
- 10. OK, but howto start?
- 11. Necessary packages npm install--save electron
- 12. Main process Node API Creatingwindows Renderer process UI HTML CSS JavaScript IPC Resources extensive tasks
- 13. Resources extensive tasks Creating windows Mainprocess Node API Renderer process UI HTML CSS JavaScript IPC Renderer process Renderer process Renderer process
- 14. app.js const app =require('electron').app; const createWindow = require('./createWindow.js'); app.on('ready', createWindow); app.on('window-all-closed', function() { app.quit(); });
- 15. createWindow.js const BrowserWindow =require('electron').BrowserWindow; const path = require('path'); const url = require('url'); let mainWindow = null; module.exports = function createWindow() { mainWindow = new BrowserWindow({width: 1024, height: 768}); mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true, })); mainWindow.webContents.openDevTools(); mainWindow.on('closed', function() { mainWindow = null; }); }; module.exports.mainWindow = mainWindow;
- 16. index.html <!DOCTYPE html> <html> <head> <meta charset=”UTF-8”> <title>HelloWorld!</title> </head> <body> <h1>Hello World!</h1> <button id=”some-button”></button> <div id=”some-div”></div> </body> <script> require(‘./renderer.js’); </script> </html>
- 17. renderer.js // react, knockout,favorite framework :)
- 18. renderer.js // react, knockout,favorite framework :) // COMMUNICATION with main process!
- 19.
- 20. Native modules inElectron
- 21.
- 22. Necessary packages npm install--save-dev electron-rebuild ./node_modules/.bin/electron-rebuild
- 23.
- 24. Necessary packages npm install--global electron-packager electron-packager dist
- 25.
- 26. Electron API ● Accelerator ●app ● autoUpdater ● BrowserWindow ● clipboard ● Cookies ● crashReporter ● desktopCapturer ● dialog ● DownloadItem ● EnvironmentVariables ● globalShortcut ● ipcMain/ipcRenderer ● Locales ● Menu, MenuItem ● net ● powerMonitor ● process ● systemPreferences ● Tray
- 27.