develop desktop apps with electron

27
JS - Electron Eueung Mulyana http://eueung.github.io/js/electron JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 27

Upload: eueung-mulyana

Post on 08-Jan-2017

697 views

Category:

Software


3 download

TRANSCRIPT

Page 1: Develop Desktop Apps with Electron

JS - ElectronEueung Mulyana

http://eueung.github.io/js/electronJS CodeLabs | Attribution-ShareAlike CC BY-SA

1 / 27

Page 2: Develop Desktop Apps with Electron

Agenda

Electron Quick Start, Boilerplate

Angular.JS Todo @ Electron

Electron + Photon

Photon Angular Todo-App

2 / 27

Page 3: Develop Desktop Apps with Electron

Electron Quick Startatom/electron-quick-start

3 / 27

Page 4: Develop Desktop Apps with Electron

package.json + main.js + index.html4 / 27

Page 5: Develop Desktop Apps with Electron

package.json

{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron main.js" }, "repository": { "type": "git", "url": "git+https://github.com/atom/electron-quick-start.git" }, "keywords": [ "Electron", "quick", "start", "tutorial" ], "author": "GitHub", "license": "CC0-1.0", "bugs": { "url": "https://github.com/atom/electron-quick-start/issues" }, "homepage": "https://github.com/atom/electron-quick-start#readme" "devDependencies": { "electron-prebuilt": "̂0.36.0" }}

main.js

'use strict';const electron = require('electron');const app = electron.app; const BrowserWindow = electron.BrowserWindow; //--------------------------------------let mainWindow;//--------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//--------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600});

mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.webContents.openDevTools();

mainWindow.on('closed', function() { mainWindow = null; });});

5 / 27

Page 6: Develop Desktop Apps with Electron

Electron Quick Startpackage.json + main.js + index.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <script></script> </head>

<body> <h1>Hello World!</h1> We are using node <script> Chrome <script> </ and Electron <script> </body></html>

document.write(process.versions.node)document.write(process.versions.chrome)

document.write(process.versions.electron)

6 / 27

Page 7: Develop Desktop Apps with Electron

Electron Boilerplatesindresorhus/electron-boilerplate

7 / 27

Page 8: Develop Desktop Apps with Electron

package.json + index.js + index.html + index.css8 / 27

Page 9: Develop Desktop Apps with Electron

package.json

{ "name": "app", "productName": "App", "version": "0.0.0", "description": "", "license": "MIT", "repository": "user/repo", "author": { "name": "", "email": "", "url": "" }, "electronVersion": "0.36.0", "scripts": { "test": "xo", "start": "electron .", "build": "electron-packager . $npm_package_productName --out=dist --ignore='̂/dist$' --prune --asar --all --version=$npm_package_electronVersion" }, "files": [ "index.js", "index.html", "index.css" ], "keywords": [ "electron-app", "electron" ], ...}

... "dependencies": { "electron-debug": "̂0.5.0" }, "devDependencies": { "electron-packager": "̂5.0.0", "electron-prebuilt": "̂0.36.0", "xo": "̂0.12.0" }, "xo": { "esnext": true, "envs": [ "node", "browser" ] }

9 / 27

Page 10: Develop Desktop Apps with Electron

index.js

'use strict';const electron = require('electron');const app = electron.app;//-------------------------------require('crash-reporter').start();require('electron-debug')();//-------------------------------let mainWindow;//-------------------------------function onClosed() { mainWindow = null; }//-------------------------------function createMainWindow() { const win = new electron.BrowserWindow({ width: 800, height:

win.loadURL(̀file://${__dirname}/index.html̀); win.on('closed', onClosed);

return win;}//-------------------------------app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});//-------------------------------app.on('activate', () => { if (!mainWindow) { mainWindow = createMainWindow(); }});//-------------------------------app.on('ready', () => { mainWindow = createMainWindow(); });

10 / 27

Page 11: Develop Desktop Apps with Electron

Angular.JS Todo @ Electron

11 / 27

Page 12: Develop Desktop Apps with Electron

12 / 27

Page 13: Develop Desktop Apps with Electron

13 / 27

Page 14: Develop Desktop Apps with Electron

{ "name": "app-03", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "devDependencies": { "electron-prebuilt": "̂0.36.0" }, "dependencies": { "lowdb": "̂0.11.2" }}

package.json

main.js

'use strict';const electron = require('electron');const app = electron.app; const BrowserWindow = electron.BrowserWindow; //--------------------------------------let mainWindow;//--------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//--------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600});

mainWindow.loadURL('file://' + __dirname + '/angular-offline-todo.html' mainWindow.setMenu(null);

mainWindow.on('closed', function() { mainWindow = null; });});

14 / 27

Page 15: Develop Desktop Apps with Electron

(function () { 'use strict';

angular.module('todoApp', []) .controller('todoListController', [TodoListController]);

function TodoListController() { var todoList = this; todoList.todos = []; var low = require('lowdb'); var storage = require('lowdb/file-sync'); todoList.db = low('app-03/db.json', { storage }); getAllTodos();

todoList.addTodo = function() { var varid = todoList.db('todos').size(); while(todoList.db('todos').find({ id: varid })) { varid +=

var data = { id: varid, text: todoList.todoText, done: todoList.db('todos').push(data);

todoList.todos.push(data); todoList.todoText = ''; };

todoList.remaining = function() { var count = 0; angular.forEach(todoList.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; };

angular-offline-todo.js

todoList.archive = function() { var oldTodos = todoList.todos; todoList.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) todoList.todos.push(todo); }); };

todoList.updDone = function(idx){ var data = todoList.db('todos') .chain() .find({ id: todoList.todos[idx].id }) .assign({ done: todoList.todos[idx].done}) .value(); };

function getAllTodos() { todoList.todos = todoList.db('todos').cloneDeep(); }; }

})();

15 / 27

Page 16: Develop Desktop Apps with Electron

<!doctype html><html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></ <!-- <script src="angular-offline-todo-service.js"></script> --> <script src="angular-offline-todo.js"></script> <link rel="stylesheet" href="angular-offline-todo.css"> </head> <body> <h2>Todo</h2> <div ng-controller="todoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining [ <a href="" ng-click="todoList.archive()">archive</a <ul class="unstyled"> <li ng-repeat="todo in todoList.todos track by $index" <input type="checkbox" ng-model="todo.done" ng-click <span class="done-{{todo.done}}">{{todo.text}}</span </li> </ul> <form ng-submit="todoList.addTodo()"> <input type="text" ng-model="todoList.todoText" size placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add" </form> </div> </body></html>

angular-offline-todo.html

16 / 27

Page 17: Develop Desktop Apps with Electron

Electron + Photon

17 / 27

Page 18: Develop Desktop Apps with Electron

18 / 27

Page 19: Develop Desktop Apps with Electron

Photon Template App

{ "name": "proton-template-app", "version": "1.0.0", "description": "A simple template app for Proton", "main": "app.js", "author": "Connor Sears", "scripts": { "start": "electron ." }}

package.json

app.js

var app = require('app'); var BrowserWindow = require('browser-window'); //-------------------------------------var mainWindow = null;//-------------------------------------app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); }});//-------------------------------------app.on('ready', function() { mainWindow = new BrowserWindow({ width: 800, height: 600, 'min-width': 480, 'min-height': 360, 'accept-first-mouse': true, 'title-bar-style': 'hidden' });

mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.setMenu(null);

mainWindow.on('closed', function() { mainWindow = null; });});

19 / 27

Page 20: Develop Desktop Apps with Electron

Photon Template Apppackage.json + app.js

index.html + js/menu.js

var remote = require('remote')var Menu = remote.require('menu')var MenuItem = remote.require('menu-item')//---------------------------------var menu = new Menu()menu.append(new MenuItem({ label: 'Delete', click: function() { alert('Deleted') }}));//---------------------------------menu.append(new MenuItem({ label: 'More Info...', click: function() { alert('Here is more information') }}));//---------------------------------window.addEventListener('contextmenu', function (e) { e.preventDefault(); menu.popup(remote.getCurrentWindow());}, false);

js/menu.js

20 / 27

Page 21: Develop Desktop Apps with Electron

index.html

<!DOCTYPE html>

<head> <title>Photon</title> <link rel="stylesheet" href="../css/photon.min.css"> <script src="js/menu.js" charset="utf-8"></script> </head> <body> <div class="window">

<header class="toolbar toolbar-header"> <h1 class="title">Photon</h1> </header>

<div class="window-content"> <div class="pane-group"> ... </div> </div> </div> </body></html>

<html>

<div class="pane pane-sm sidebar"> <nav class="nav-group"> <h5 class="nav-group-title">Favorites</h5> <span class="nav-group-item"> <span class="icon icon-home" <span class="nav-group-item active"> <span class="icon icon-light-up" <span class="nav-group-item"> <span class="icon icon-download" <span class="nav-group-item"> <span class="icon icon-folder" <span class="nav-group-item"> <span class="icon icon-window" <span class="nav-group-item"> <span class="icon icon-signal" <span class="nav-group-item"> <span class="icon icon-monitor" </nav></div>

<div class="pane"> <table class="table-striped"> <thead> <tr> <th>Name</th> <th>Kind</th> <th>Date Modified</th </thead> <tbody> <tr> <td>bars.scss</td> <td>Document</td> <td>Oct 13, 2015 ... <tr> <td>base.scss</td> <td>Document</td> <td>Oct 13, 2015

</tbody> </table></div>

21 / 27

Page 22: Develop Desktop Apps with Electron

Photon Angular Todo-App

22 / 27

Page 23: Develop Desktop Apps with Electron

23 / 27

Page 24: Develop Desktop Apps with Electron

# angular-offline-todo.css

.margin10 { margin: 10px; width: inherit !important;}

# app.jsmainWindow.loadURL('file://' + __dirname + '/angular-offline-todo.html'

# angular-offline-todo.jstodoList.db = low('app-05/app/db.json', { storage }); Minor Changes

app.js

angular-offline-todo.js

angular-offline-todo.css

24 / 27

Page 25: Develop Desktop Apps with Electron

angular-offline-todo.html

<!doctype html><html ng-app="todoApp"> <head> <script src="bower_components/angular/angular.min.js"></ <script src="angular-offline-todo.js"></script> <link rel="stylesheet" href="angular-offline-todo.css">

<link rel="stylesheet" href="../css/photon.min.css"> <script src="js/menu.js" charset="utf-8"></script> </head> <body>

<div class="window" ng-controller="todoListController as todoList"

<header class="toolbar toolbar-header"> <h1 class="title">Photon Angular Todo.App</h1> </header>

... </div>

</body></html>

<div class="window-content"> <div class="pane-group">

<table class="table-striped"> <thead> <tr> <th>DONE</th> <th>Todo</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todoList.todos track by $index" <td><input type="checkbox" ng-model="todo.done" ng-click <td><span class="done-{{todo.done}}">{{todo.text}} </tr> </tbody> </table>

</div></div>

<footer class="toolbar toolbar-footer"> <div class="toolbar-actions"> <form ng-submit="todoList.addTodo()"> <span class="pull-left margin10">{{todoList.remaining()}} of {{todoList.todos.length}} remaining [

<input class="form-control btn btn-primary pull-right margin10" <input type="text" class="form-control pull-right margin10" placeholder="add new todo here"> </form> </div></footer>

25 / 27

Page 26: Develop Desktop Apps with Electron

References1. Electron2. sindresorhus/awesome-electron3. Photon · Components

26 / 27

Page 27: Develop Desktop Apps with Electron

ENDEueung Mulyana

http://eueung.github.io/js/electronJS CodeLabs | Attribution-ShareAlike CC BY-SA

27 / 27