Cross Platform Apps with Cordova, Electron and Angular

Cr -Platfor -App
Electro , Cordov
& Angular
wit

View Slide

Cr Platfor

View Slide

Ma

View Slide

Ma
Window

View Slide

Ma
Window
Lin

View Slide

Mobil

View Slide

Mobil
Desktop

View Slide

Mobil
Desktop
Web

View Slide

s
muc
mor ...

View Slide

Jav scrip

View Slide

T scrip

View Slide

View Slide

Server
Clien

View Slide

Server
Clien
HTTP WS

View Slide

View Slide

Cordov

View Slide

Apache Cordova is an open-
source mobile development
framework. It allows you to use
standard web technologies -
HTML5, CSS3, and JavaScript for
cross-platform development.
"
"

View Slide

View Slide

$ npm install cordova -

View Slide

$ cordova create myFirstAp

View Slide

├── www
│ ├── css
│ │ └── index.cs
│ ├── img
│ │ └── logo.png
│ ├── js
│ │ └── index.js
│ └── index.html
├── .gitignore
├── config.xml
└── package.json
1
2
3
4
5
6
7
8
9
10
11

View Slide

├── www
│ ├── css
│ ├── img
│ ├── js
1
2
3
4
5
6
7
8
9
10
11
├── www
1
│ ├── css
2
3
│ ├── img
4
5
│ ├── js
6
7
8
9
10
11

View Slide

├── www
│ ├── css
│ ├── img
│ ├── js
1
2
3
4
5
6
7
8
9
10
11
├── www
1
│ ├── css
2
3
│ ├── img
4
5
│ ├── js
6
7
8
9
10
11
│ ├── css
│ ├── img
│ ├── js
├── www
1
2
3
4
5
6
7
8
9
10
11

View Slide

├── www
│ ├── css
│ ├── img
│ ├── js
1
2
3
4
5
6
7
8
9
10
11
├── www
1
│ ├── css
2
3
│ ├── img
4
5
│ ├── js
6
7
8
9
10
11
│ ├── css
│ ├── img
│ ├── js
├── www
1
2
3
4
5
6
7
8
9
10
11
├── www
1
│ ├── css
2
3
│ ├── img
4
5
│ ├── js
6
7
8
9
10
11

View Slide

Gatherr
Gatherr - Demo Application

Offering Solutions Software

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

g p g
Offering Solutions Software
6

7

8
9

10
11

12

13

14

15

16

17
18
19
20
21
22

23
24

25
26

27

28

29

30

31

32
33

34

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18
19
20
21
22

23
24

25
26

27

28

29

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22
23
24

25
26

27

28

29

30

31

32
33

34

35

36

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18
19
20
21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22
23
24

25
26

27

28

29

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24
25
26

27

28

29

30

31

32
33

34

35

36

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18
19
20
21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22
23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24
25
26

27

28

29

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26
27
28
29
30
31
32
33

34

35

36

View Slide

Gatherr

1

2
3
4
5
6
7
8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9
10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11
12
13
14
15
16
17
18

19

20

21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18
19
20
21
22

23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22
23
24

25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24
25
26

27

28

29

1

2
Gatherr
3
4

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26
27
28
29

8
9

10
11

12

13

14

15

16

17
18

19

20

21
22

23
24

25
26

27

28

29

30

31

32
33
34
35

36

View Slide

$ cordova plugin add cordova-plugin-came

View Slide

cordova platform add androi
cordova platform add ios
cordova build
1
2
3
4

View Slide

cordova build
1
2
3
4
1
2
3
cordova build
4

View Slide

cordova build
1
2
3
4
1
2
3
cordova build
4
1
2
3
cordova build
4

View Slide

cordova build
1
2
3
4
1
2
3
cordova build
4
1
2
3
cordova build
4 cordova build
1
2
3
4

View Slide

View Slide

Dem

View Slide

Electro

View Slide

Electron is a tool for building Cross-
Platform Desktop Apps with
Javascript, Html and CSS
"
"

View Slide

View Slide

Chromiu

View Slide

View Slide

an man mor ...

View Slide

$ npm install electron -

View Slide

├── index.html
├── index.js

View Slide

{
"name": "your-app",
"version": "0.1.0",
"main": "index.js",
"scripts": {
"start": "electron ."
}
}
1
2
3
4
5
6
7
8

View Slide

{
"name": "your-app",
"version": "0.1.0",
"main": "index.js",
"scripts": {
}
}
1
2
3
4
5
6
7
8
"main": "index.js",
{
1
"name": "your-app",
2
"version": "0.1.0",
3
4
"scripts": {
5
6
}
7
}
8

View Slide

const { app, BrowserWindow } = require('electron'
createWindow = () => {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
win.loadFile('index.html');
};
app.whenReady().then(createWindow);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17

View Slide

width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

View Slide

width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
};
15
16
17

View Slide

width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
};
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17

View Slide

width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
width: 800,
height: 600,
webPreferences: {
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
};
15
16
17
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17 app.whenReady().then(createWindow);
1
2
3
4
5
width: 800,
6
height: 600,
7
webPreferences: {
8
9
},
10
});
11
12
13
14
};
15
16
17

View Slide

Hello World!

Hello World!

1
2
3
4
5
6
7
8
9
10

View Slide

$ electron .

View Slide

View Slide

Process
Mai

View Slide

Process
Renderer

View Slide

View Slide

├── assets
│ ...
├── 6.2c6c97b8608a85a82adc.js
├── common.42c8477e0640407ae045.js
├── favicon.ico
├── icon.ico
├── index.js
├── main.8bb24261aa275d6a43db.js
├── package.json
├── polyfills-es5.739d51467cc1d8efbfae.js
├── polyfills.ef4ae634e106e395892c.js
├── runtime.061b6e0597d9fe17b937.js
├── scripts.82aad45f2fad02beee3c.js
├── styles.f503a9ab21b5d570c8af.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

├── assets
│ ...
├── 6.2c6c97b8608a85a82adc.js
├── common.42c8477e0640407ae045.js
├── icon.ico
├── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── assets
│ ...
├── 6.2c6c97b8608a85a82adc.js
├── common.42c8477e0640407ae045.js
1
2
3
4
5
├── icon.ico
6
7
├── index.js
8
9
10
11
12
13
14
15

View Slide

├── assets
│ ...
├── 6.2c6c97b8608a85a82adc.js
├── common.42c8477e0640407ae045.js
├── icon.ico
├── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── assets
│ ...
├── 6.2c6c97b8608a85a82adc.js
├── common.42c8477e0640407ae045.js
1
2
3
4
5
├── icon.ico
6
7
├── index.js
8
9
10
11
12
13
14
15
├── icon.ico
├── index.js
├── assets
1
│ ...
2
├── 6.2c6c97b8608a85a82adc.js
3
├── common.42c8477e0640407ae045.js
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

View Slide

Communicatio

View Slide

Communicatio
IPC

View Slide

mai proces
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) =>
console.log(arg) // prints "ping"
event.reply('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) =>
event.returnValue = 'pong'
})
1
2
3
4
5
6
7
8
9
10
11

View Slide

mai proces
})
})
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
})
6
7
8
9
10
})
11

View Slide

mai proces
})
})
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
})
6
7
8
9
10
})
11
})
1
2
3
4
5
6
7
8
9
10
})
11

View Slide

mai proces
})
})
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
})
6
7
8
9
10
})
11
})
1
2
3
4
5
6
7
8
9
10
})
11
})
1
2
3
4
5
})
6
7
8
9
10
11

View Slide

renderer proces
const { ipcRenderer } = require('electron');
// prints "pong"
console.log(ipcRenderer.sendSync('synchronous-message', 'ping'
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
1
2
3
4
5
6
7
8
9
10

View Slide

renderer proces
// prints "pong"
})
1
2
3
4
5
6
7
8
9
10
1
2
// prints "pong"
3
4
5
6
7
})
8
9
10

View Slide

renderer proces
// prints "pong"
})
1
2
3
4
5
6
7
8
9
10
1
2
// prints "pong"
3
4
5
6
7
})
8
9
10
// prints "pong"
1
2
3
4
5
6
7
})
8
9
10

View Slide

renderer proces
// prints "pong"
})
1
2
3
4
5
6
7
8
9
10
1
2
// prints "pong"
3
4
5
6
7
})
8
9
10
// prints "pong"
1
2
3
4
5
6
7
})
8
9
10
})
1
2
// prints "pong"
3
4
5
6
7
8
9
10

View Slide

mai proces
var os = require('os')
var cpus = os.cpus();
1
2
3

View Slide

mai proces
1
2
3
1
2
3

View Slide

mai proces
1
2
3
1
2
3 var cpus = os.cpus();
1
2
3

View Slide

mai proces
let startSendCpuValues = () => {
setInterval(() => {
cpuValues.getCPUUsage(percentage => {
if (mainWindow) {
mainWindow.webContents.send(
'newCpuValue',
(percentage * 100).toFixed(2)
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

mai proces
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

mai proces
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
});
1
setInterval(() => {
2
3
if (mainWindow) {
4
5
'newCpuValue',
6
7
);
8
}
9
10
}, 1000);
11
};
12

View Slide

mai proces
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
setInterval(() => {
if (mainWindow) {
'newCpuValue',
);
}
});
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
});
1
setInterval(() => {
2
3
if (mainWindow) {
4
5
'newCpuValue',
6
7
);
8
}
9
10
}, 1000);
11
};
12
'newCpuValue',
);
1
setInterval(() => {
2
3
if (mainWindow) {
4
5
6
7
8
}
9
});
10
}, 1000);
11
};
12

View Slide

renderer proces
@Injectable({ providedIn: 'root' })
export class CpuValueService {
private onNewCpuValue = new Subject();
get newCpuValue(){
return this.onNewCpuValue.asObservable();
}
constructor(private electronService: ElectronService) {
if (environment.desktop) {
this.registerCpuEvent();
}
}
private registerCpuEvent() {
if (this.electronService.ipcRenderer) {
this.electronService.ipcRenderer.on(
'newCpuValue',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

renderer proces
get newCpuValue(){
}
}
}
'newCpuValue',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
}
@Injectable({ providedIn: root })
1
2
3
4
get newCpuValue(){
5
6
}
7
8
9
10
11
12
13
14
15
16
17
'newCpuValue',
18
(event: any, data: any) => {
19
this.onNewCpuValue.next(data);
20
}
21

View Slide

renderer proces
get newCpuValue(){
}
}
}
'newCpuValue',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
}
1
2
3
4
get newCpuValue(){
5
6
}
7
8
9
10
11
12
13
14
15
16
17
'newCpuValue',
18
'newCpuValue',
(event: any, data: any) => {
this.onNewCpuValue.next(data);
}
);
}
}
}
7
8
9
10
11
}
12
}
13
14
15
16
17
18
19
20
21
22
23
24
}
25

View Slide

renderer proces
get newCpuValue(){
}
}
}
'newCpuValue',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
}
}
1
2
3
4
get newCpuValue(){
5
6
}
7
8
9
10
11
12
13
14
15
16
17
'newCpuValue',
18
'newCpuValue',
1
2
3
4
get newCpuValue(){
5
6
}
7
8
9
10
11
}
12
}
13
14
15
16
17
18
get newCpuValue(){
}
1
2
3
4
5
6
7
8
9
10
11
}
12
}
13
14
15
16
17
'newCpuValue',
18

View Slide

$ npm install electron-packager

View Slide

$ electron-packager .temp/deskto

View Slide

$ electron-packager .temp/desktop --platform=linux, wi

View Slide

Automatic Updates
Crash Reports
Content Tracing
Installation Packages

View Slide

View Slide

Dem

View Slide

What about variation points?
"
"

View Slide

View Slide

Dependenc Injectio

View Slide

@Injectable({
providedIn: 'root',
})
export abstract class AbstractCameraService {
abstract getPhoto(...): Observable;
}
1
2
3
4
5
6

View Slide

@Injectable({
providedIn: 'root',
useFactory: cameraFactory,
deps: [PlatformInformationService],
})
}
1
2
3
4
5
6
7
8

View Slide

export function cameraFactory(
platformInformationService: PlatformInformationService
): AbstractCameraService {
return platformInformationService.isMobile
? new MobileCameraService()
: new DesktopCameraService();
}
@Injectable({
providedIn: 'root',
useFactory: cameraFactory,
deps: [PlatformInformationService],
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

View Slide

import {
AbstractCameraService, Photo
} from '@workspace/features/camera';
@Component({ ... })
export class ProfileDetailsComponent {
constructor(
private cameraService: AbstractCameraService
) {}
pictureClicked() {
this.cameraService.getPhoto()
.subscribe((result: Photo) => {
// ...
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

View Slide

import {
@Component({ ... })
constructor(
) {}
pictureClicked() {
// ...
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
1
2
3
4
@Component({ ... })
5
6
7
constructor(
8
9
) {}
10
11
pictureClicked() {
12
13
14
// ...
15
});
16
}
17
}
18

View Slide

import {
@Component({ ... })
constructor(
) {}
pictureClicked() {
// ...
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
1
2
3
4
@Component({ ... })
5
6
7
constructor(
8
9
) {}
10
11
pictureClicked() {
12
13
14
// ...
15
});
16
}
17
}
18
constructor(
) {}
import {
1
2
3
4
@Component({ ... })
5
6
7
8
9
10
11
pictureClicked() {
12
13
14
// ...
15
});
16
}
17
}
18

View Slide

import {
@Component({ ... })
constructor(
) {}
pictureClicked() {
// ...
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {
1
2
3
4
@Component({ ... })
5
6
7
constructor(
8
9
) {}
10
11
pictureClicked() {
12
13
14
// ...
15
});
16
}
17
}
18
constructor(
) {}
import {
1
2
3
4
@Component({ ... })
5
6
7
8
9
10
11
pictureClicked() {
12
13
14
// ...
15
});
16
}
17
}
18
pictureClicked() {
// ...
});
}
import {
1
2
3
4
@Component({ ... })
5
6
7
constructor(
8
9
) {}
10
11
12
13
14
15
16
17
}
18

View Slide

Cross Platform Apps with Cordova, Electron and Angular

Cross Platform Apps with Cordova, Electron and Angular

Fabian Gosebrink

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript