Cross Platform Apps with Cordova, Electron and Angular

Angular is a very powerful and popular platform for writing modern applications with Typescript for the web. However, with most Angular applications comes the point where you want to make the application available not only on the web but also on other platforms such as mobile systems and the desktop. A new implementation for each system can be very complex. In this talk Fabian Gosebrink shows how to develop an angular application in a way that it can be ported to mobile systems with Cordova and to the desktop with Electron. The native functions of the platforms are also addressed so that in the end a code base for all platforms can be used.

Transcript

1. Cr -Platfor -App Electro , Cordov & Angular wit
2. Cr Platfor
3. Ma
4. Ma Window
5. Ma Window Lin
6. Mobil
7. Mobil Desktop
8. Mobil Desktop Web
9. s muc mor ...
10. Jav scrip
11. T scrip
14. Server Clien
15. Server Clien
16. Server Clien HTTP WS
18. Cordov
19. 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. " "
21. $ npm install cordova -
22. $ cordova create myFirstAp
23. ├── 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
24. ├── 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 ├── www 1 │ ├── css 2 │ │ └── index.cs 3 │ ├── img 4 │ │ └── logo.png 5 │ ├── js 6 │ │ └── index.js 7 │ └── index.html 8 ├── .gitignore 9 ├── config.xml 10 └── package.json 11
25. ├── 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 ├── www 1 │ ├── css 2 │ │ └── index.cs 3 │ ├── img 4 │ │ └── logo.png 5 │ ├── js 6 │ │ └── index.js 7 │ └── index.html 8 ├── .gitignore 9 ├── config.xml 10 └── package.json 11 │ ├── css │ │ └── index.cs │ ├── img │ │ └── logo.png │ ├── js │ │ └── index.js │ └── index.html ├── www 1 2 3 4 5 6 7 8 ├── .gitignore 9 ├── config.xml 10 └── package.json 11
26. ├── 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 ├── www 1 │ ├── css 2 │ │ └── index.cs 3 │ ├── img 4 │ │ └── logo.png 5 │ ├── js 6 │ │ └── index.js 7 │ └── index.html 8 ├── .gitignore 9 ├── config.xml 10 └── package.json 11 │ ├── css │ │ └── index.cs │ ├── img │ │ └── logo.png │ ├── js │ │ └── index.js │ └── index.html ├── www 1 2 3 4 5 6 7 8 ├── .gitignore 9 ├── config.xml 10 └── package.json 11 ├── config.xml ├── www 1 │ ├── css 2 │ │ └── index.cs 3 │ ├── img 4 │ │ └── logo.png 5 │ ├── js 6 │ │ └── index.js 7 │ └── index.html 8 ├── .gitignore 9 10 └── package.json 11
27. <?xml version='1.0' encoding='utf-8'?> <widget id="com.offering.solutions" ...> <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solutions"> Offering Solutions Software </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <engine name="android" spec="~9.0.0" /> <plugin name="cordova-plugin-camera" spec="~4.0.2" /> <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> <variable name="URL_SCHEME" value="gatherrapp" /> <variable name="ANDROID_SCHEME" value=" " /> <variable name="ANDROID_HOST" value=" " /> <variable name="ANDROID_PATHPREFIX" value="/" /> </plugin> <preference name="Scheme" value="https" /> <preference name="android-minSdkVersion" value="22" /> </widget> 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
28. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29
29. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29
30. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29
31. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <platform name="android"> <allow-intent href="market:*" /> </platform> g p g Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 19 20 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <variable name="ANDROID_HOST" value=" " /> 30 <variable name="ANDROID_PATHPREFIX" value="/" /> 31 </plugin> 32 33 <preference name="Scheme" value="https" /> 34
32. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <platform name="android"> <allow-intent href="market:*" /> </platform> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 19 20 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <engine name="android" spec="~9.0.0" /> <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <variable name="ANDROID_HOST" value=" " /> 30 <variable name="ANDROID_PATHPREFIX" value="/" /> 31 </plugin> 32 33 <preference name="Scheme" value="https" /> 34 <preference name="android-minSdkVersion" value="22" /> 35 </widget> 36
33. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <platform name="android"> <allow-intent href="market:*" /> </platform> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 19 20 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <engine name="android" spec="~9.0.0" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <variable name="ANDROID_HOST" value=" " /> 30 <variable name="ANDROID_PATHPREFIX" value="/" /> 31 </plugin> 32 33 <preference name="Scheme" value="https" /> 34 <preference name="android-minSdkVersion" value="22" /> 35 </widget> 36
34. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <platform name="android"> <allow-intent href="market:*" /> </platform> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 19 20 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <engine name="android" spec="~9.0.0" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> <variable name="URL_SCHEME" value="gatherrapp" /> <variable name="ANDROID_SCHEME" value=" " /> <variable name="ANDROID_HOST" value=" " /> <variable name="ANDROID_PATHPREFIX" value="/" /> </plugin> <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 27 28 29 30 31 32 33 <preference name="Scheme" value="https" /> 34 <preference name="android-minSdkVersion" value="22" /> 35 </widget> 36
35. <name>Gatherr</name> <description>Gatherr - Demo Application</description> <author email="mail@offering.solutions" href="https://offering.solution Offering Solutions Software </author> <content src="index.html" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 3 4 5 6 7 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <access origin="*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <allow-intent href="gettogetherapp:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 12 13 14 15 16 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <platform name="android"> <allow-intent href="market:*" /> </platform> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 19 20 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <engine name="android" spec="~9.0.0" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> <variable name="URL_SCHEME" value="gatherrapp" /> <variable name="ANDROID_SCHEME" value=" " /> <?xml version='1.0' encoding='utf-8'?> 1 <widget id="com.offering.solutions" ...> 2 <name>Gatherr</name> 3 <description>Gatherr - Demo Application</description> 4 <author email="mail@offering.solutions" href="https://offering.solution 5 Offering Solutions Software 6 </author> 7 <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 27 28 29 <preference name="Scheme" value="https" /> <preference name="android-minSdkVersion" value="22" /> <content src="index.html" /> 8 9 <access origin="*" /> 10 11 <allow-intent href="gettogetherapp:*" /> 12 <allow-intent href="http://*/*" /> 13 <allow-intent href="https://*/*" /> 14 <allow-intent href="tel:*" /> 15 <allow-intent href="mailto:*" /> 16 <allow-intent href="geo:*" /> 17 18 <platform name="android"> 19 <allow-intent href="market:*" /> 20 </platform> 21 22 <engine name="android" spec="~9.0.0" /> 23 24 <plugin name="cordova-plugin-camera" spec="~4.0.2" /> 25 26 <plugin name="cordova-plugin-customurlscheme" spec="^4.3.0"> 27 <variable name="URL_SCHEME" value="gatherrapp" /> 28 <variable name="ANDROID_SCHEME" value=" " /> 29 <variable name="ANDROID_HOST" value=" " /> 30 <variable name="ANDROID_PATHPREFIX" value="/" /> 31 </plugin> 32 33 34 35 </widget> 36
36. $ cordova plugin add cordova-plugin-came
37. cordova platform add androi cordova platform add ios cordova build 1 2 3 4
38. cordova platform add androi cordova platform add ios cordova build 1 2 3 4 cordova platform add androi 1 cordova platform add ios 2 3 cordova build 4
39. cordova platform add androi cordova platform add ios cordova build 1 2 3 4 cordova platform add androi 1 cordova platform add ios 2 3 cordova build 4 cordova platform add ios cordova platform add androi 1 2 3 cordova build 4
40. cordova platform add androi cordova platform add ios cordova build 1 2 3 4 cordova platform add androi 1 cordova platform add ios 2 3 cordova build 4 cordova platform add ios cordova platform add androi 1 2 3 cordova build 4 cordova build cordova platform add androi 1 cordova platform add ios 2 3 4
46. Dem
47. Electro
48. Electron is a tool for building Cross- Platform Desktop Apps with Javascript, Html and CSS " "
51. Chromiu
54. an man mor ...
55. $ npm install electron -
56. ├── index.html ├── index.js └── package.json
57. { "name": "your-app", "version": "0.1.0", "main": "index.js", "scripts": { "start": "electron ." } } 1 2 3 4 5 6 7 8
58. { "name": "your-app", "version": "0.1.0", "main": "index.js", "scripts": { "start": "electron ." } } 1 2 3 4 5 6 7 8 "main": "index.js", { 1 "name": "your-app", 2 "version": "0.1.0", 3 4 "scripts": { 5 "start": "electron ." 6 } 7 } 8
59. 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
60. 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 const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17
61. 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 const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 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'); }; const { app, BrowserWindow } = require('electron' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 app.whenReady().then(createWindow); 17
62. 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 const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 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'); }; const { app, BrowserWindow } = require('electron' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 app.whenReady().then(createWindow); 17 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 5 6 7 8 9 10 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17
63. 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 const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 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'); }; const { app, BrowserWindow } = require('electron' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 app.whenReady().then(createWindow); 17 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 5 6 7 8 9 10 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 win.loadFile('index.html'); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 14 }; 15 16 app.whenReady().then(createWindow); 17
64. 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 const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 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'); }; const { app, BrowserWindow } = require('electron' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 app.whenReady().then(createWindow); 17 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 5 6 7 8 9 10 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 app.whenReady().then(createWindow); 17 win.loadFile('index.html'); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 14 }; 15 16 app.whenReady().then(createWindow); 17 app.whenReady().then(createWindow); const { app, BrowserWindow } = require('electron' 1 2 createWindow = () => { 3 // Create the browser window. 4 const win = new BrowserWindow({ 5 width: 800, 6 height: 600, 7 webPreferences: { 8 nodeIntegration: true, 9 }, 10 }); 11 12 // and load the index.html of the app. 13 win.loadFile('index.html'); 14 }; 15 16 17
65. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> 1 2 3 4 5 6 7 8 9 10
66. $ electron .
69. Process Mai
70. Process Renderer
74. ├── assets │ ... ├── 6.2c6c97b8608a85a82adc.js ├── common.42c8477e0640407ae045.js ├── favicon.ico ├── icon.ico ├── index.html ├── 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
75. ├── assets │ ... ├── 6.2c6c97b8608a85a82adc.js ├── common.42c8477e0640407ae045.js ├── favicon.ico ├── icon.ico ├── index.html ├── 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 ├── assets │ ... ├── 6.2c6c97b8608a85a82adc.js ├── common.42c8477e0640407ae045.js ├── favicon.ico ├── index.html ├── main.8bb24261aa275d6a43db.js ├── polyfills-es5.739d51467cc1d8efbfae.js ├── polyfills.ef4ae634e106e395892c.js ├── runtime.061b6e0597d9fe17b937.js ├── scripts.82aad45f2fad02beee3c.js ├── styles.f503a9ab21b5d570c8af.css 1 2 3 4 5 ├── icon.ico 6 7 ├── index.js 8 9 ├── package.json 10 11 12 13 14 15
76. ├── assets │ ... ├── 6.2c6c97b8608a85a82adc.js ├── common.42c8477e0640407ae045.js ├── favicon.ico ├── icon.ico ├── index.html ├── 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 ├── assets │ ... ├── 6.2c6c97b8608a85a82adc.js ├── common.42c8477e0640407ae045.js ├── favicon.ico ├── index.html ├── main.8bb24261aa275d6a43db.js ├── polyfills-es5.739d51467cc1d8efbfae.js ├── polyfills.ef4ae634e106e395892c.js ├── runtime.061b6e0597d9fe17b937.js ├── scripts.82aad45f2fad02beee3c.js ├── styles.f503a9ab21b5d570c8af.css 1 2 3 4 5 ├── icon.ico 6 7 ├── index.js 8 9 ├── package.json 10 11 12 13 14 15 ├── icon.ico ├── index.js ├── package.json ├── assets 1 │ ... 2 ├── 6.2c6c97b8608a85a82adc.js 3 ├── common.42c8477e0640407ae045.js 4 ├── favicon.ico 5 6 ├── index.html 7 8 ├── main.8bb24261aa275d6a43db.js 9 10 ├── polyfills-es5.739d51467cc1d8efbfae.js 11 ├── polyfills.ef4ae634e106e395892c.js 12 ├── runtime.061b6e0597d9fe17b937.js 13 ├── scripts.82aad45f2fad02beee3c.js 14 ├── styles.f503a9ab21b5d570c8af.css 15
78. Communicatio
79. Communicatio IPC
80. 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) => console.log(arg) // prints "ping" event.returnValue = 'pong' }) 1 2 3 4 5 6 7 8 9 10 11
81. 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) => console.log(arg) // prints "ping" event.returnValue = 'pong' }) 1 2 3 4 5 6 7 8 9 10 11 const { ipcMain } = require('electron') 1 2 ipcMain.on('asynchronous-message', (event, arg) => 3 console.log(arg) // prints "ping" 4 event.reply('asynchronous-reply', 'pong') 5 }) 6 7 ipcMain.on('synchronous-message', (event, arg) => 8 console.log(arg) // prints "ping" 9 event.returnValue = 'pong' 10 }) 11
82. 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) => console.log(arg) // prints "ping" event.returnValue = 'pong' }) 1 2 3 4 5 6 7 8 9 10 11 const { ipcMain } = require('electron') 1 2 ipcMain.on('asynchronous-message', (event, arg) => 3 console.log(arg) // prints "ping" 4 event.reply('asynchronous-reply', 'pong') 5 }) 6 7 ipcMain.on('synchronous-message', (event, arg) => 8 console.log(arg) // prints "ping" 9 event.returnValue = 'pong' 10 }) 11 ipcMain.on('asynchronous-message', (event, arg) => console.log(arg) // prints "ping" event.reply('asynchronous-reply', 'pong') }) const { ipcMain } = require('electron') 1 2 3 4 5 6 7 ipcMain.on('synchronous-message', (event, arg) => 8 console.log(arg) // prints "ping" 9 event.returnValue = 'pong' 10 }) 11
83. 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) => console.log(arg) // prints "ping" event.returnValue = 'pong' }) 1 2 3 4 5 6 7 8 9 10 11 const { ipcMain } = require('electron') 1 2 ipcMain.on('asynchronous-message', (event, arg) => 3 console.log(arg) // prints "ping" 4 event.reply('asynchronous-reply', 'pong') 5 }) 6 7 ipcMain.on('synchronous-message', (event, arg) => 8 console.log(arg) // prints "ping" 9 event.returnValue = 'pong' 10 }) 11 ipcMain.on('asynchronous-message', (event, arg) => console.log(arg) // prints "ping" event.reply('asynchronous-reply', 'pong') }) const { ipcMain } = require('electron') 1 2 3 4 5 6 7 ipcMain.on('synchronous-message', (event, arg) => 8 console.log(arg) // prints "ping" 9 event.returnValue = 'pong' 10 }) 11 ipcMain.on('synchronous-message', (event, arg) => console.log(arg) // prints "ping" event.returnValue = 'pong' }) const { ipcMain } = require('electron') 1 2 ipcMain.on('asynchronous-message', (event, arg) => 3 console.log(arg) // prints "ping" 4 event.reply('asynchronous-reply', 'pong') 5 }) 6 7 8 9 10 11
84. 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
85. 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 const { ipcRenderer } = require('electron'); 1 2 // prints "pong" 3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping' 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 9 ipcRenderer.send('asynchronous-message', 'ping') 10
86. 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 const { ipcRenderer } = require('electron'); 1 2 // prints "pong" 3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping' 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 9 ipcRenderer.send('asynchronous-message', 'ping') 10 // prints "pong" console.log(ipcRenderer.sendSync('synchronous-message', 'ping' const { ipcRenderer } = require('electron'); 1 2 3 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 9 ipcRenderer.send('asynchronous-message', 'ping') 10
87. 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 const { ipcRenderer } = require('electron'); 1 2 // prints "pong" 3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping' 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 9 ipcRenderer.send('asynchronous-message', 'ping') 10 // prints "pong" console.log(ipcRenderer.sendSync('synchronous-message', 'ping' const { ipcRenderer } = require('electron'); 1 2 3 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 9 ipcRenderer.send('asynchronous-message', 'ping') 10 ipcRenderer.on('asynchronous-reply', (event, arg) => { console.log(arg) // prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping') const { ipcRenderer } = require('electron'); 1 2 // prints "pong" 3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping' 4 5 6 7 8 9 10
88. mai proces var os = require('os') var cpus = os.cpus(); 1 2 3
89. mai proces var os = require('os') var cpus = os.cpus(); 1 2 3 var os = require('os') 1 2 var cpus = os.cpus(); 3
90. mai proces var os = require('os') var cpus = os.cpus(); 1 2 3 var os = require('os') 1 2 var cpus = os.cpus(); 3 var cpus = os.cpus(); var os = require('os') 1 2 3
91. 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
92. 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 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
93. 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 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 cpuValues.getCPUUsage(percentage => { }); let startSendCpuValues = () => { 1 setInterval(() => { 2 3 if (mainWindow) { 4 mainWindow.webContents.send( 5 'newCpuValue', 6 (percentage * 100).toFixed(2) 7 ); 8 } 9 10 }, 1000); 11 }; 12
94. 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 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 cpuValues.getCPUUsage(percentage => { }); let startSendCpuValues = () => { 1 setInterval(() => { 2 3 if (mainWindow) { 4 mainWindow.webContents.send( 5 'newCpuValue', 6 (percentage * 100).toFixed(2) 7 ); 8 } 9 10 }, 1000); 11 }; 12 mainWindow.webContents.send( 'newCpuValue', (percentage * 100).toFixed(2) ); let startSendCpuValues = () => { 1 setInterval(() => { 2 cpuValues.getCPUUsage(percentage => { 3 if (mainWindow) { 4 5 6 7 8 } 9 }); 10 }, 1000); 11 }; 12
95. renderer proces @Injectable({ providedIn: 'root' }) export class CpuValueService { private onNewCpuValue = new Subject<string>(); 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
96. renderer proces @Injectable({ providedIn: 'root' }) export class CpuValueService { private onNewCpuValue = new Subject<string>(); 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 constructor(private electronService: ElectronService) { if (environment.desktop) { this.registerCpuEvent(); } } @Injectable({ providedIn: root }) 1 export class CpuValueService { 2 private onNewCpuValue = new Subject<string>(); 3 4 get newCpuValue(){ 5 return this.onNewCpuValue.asObservable(); 6 } 7 8 9 10 11 12 13 14 private registerCpuEvent() { 15 if (this.electronService.ipcRenderer) { 16 this.electronService.ipcRenderer.on( 17 'newCpuValue', 18 (event: any, data: any) => { 19 this.onNewCpuValue.next(data); 20 } 21
97. renderer proces @Injectable({ providedIn: 'root' }) export class CpuValueService { private onNewCpuValue = new Subject<string>(); 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 constructor(private electronService: ElectronService) { if (environment.desktop) { this.registerCpuEvent(); } } @Injectable({ providedIn: 'root' }) 1 export class CpuValueService { 2 private onNewCpuValue = new Subject<string>(); 3 4 get newCpuValue(){ 5 return this.onNewCpuValue.asObservable(); 6 } 7 8 9 10 11 12 13 14 private registerCpuEvent() { 15 if (this.electronService.ipcRenderer) { 16 this.electronService.ipcRenderer.on( 17 'newCpuValue', 18 private registerCpuEvent() { if (this.electronService.ipcRenderer) { this.electronService.ipcRenderer.on( 'newCpuValue', (event: any, data: any) => { this.onNewCpuValue.next(data); } ); } } } 7 8 constructor(private electronService: ElectronService) { 9 if (environment.desktop) { 10 this.registerCpuEvent(); 11 } 12 } 13 14 15 16 17 18 19 20 21 22 23 24 } 25
98. renderer proces @Injectable({ providedIn: 'root' }) export class CpuValueService { private onNewCpuValue = new Subject<string>(); 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 constructor(private electronService: ElectronService) { if (environment.desktop) { this.registerCpuEvent(); } } @Injectable({ providedIn: 'root' }) 1 export class CpuValueService { 2 private onNewCpuValue = new Subject<string>(); 3 4 get newCpuValue(){ 5 return this.onNewCpuValue.asObservable(); 6 } 7 8 9 10 11 12 13 14 private registerCpuEvent() { 15 if (this.electronService.ipcRenderer) { 16 this.electronService.ipcRenderer.on( 17 'newCpuValue', 18 private registerCpuEvent() { if (this.electronService.ipcRenderer) { this.electronService.ipcRenderer.on( 'newCpuValue', @Injectable({ providedIn: 'root' }) 1 export class CpuValueService { 2 private onNewCpuValue = new Subject<string>(); 3 4 get newCpuValue(){ 5 return this.onNewCpuValue.asObservable(); 6 } 7 8 constructor(private electronService: ElectronService) { 9 if (environment.desktop) { 10 this.registerCpuEvent(); 11 } 12 } 13 14 15 16 17 18 private onNewCpuValue = new Subject<string>(); get newCpuValue(){ return this.onNewCpuValue.asObservable(); } @Injectable({ providedIn: 'root' }) 1 export class CpuValueService { 2 3 4 5 6 7 8 constructor(private electronService: ElectronService) { 9 if (environment.desktop) { 10 this.registerCpuEvent(); 11 } 12 } 13 14 private registerCpuEvent() { 15 if (this.electronService.ipcRenderer) { 16 this.electronService.ipcRenderer.on( 17 'newCpuValue', 18
99. $ npm install electron-packager
100. $ electron-packager .temp/deskto
101. $ electron-packager .temp/desktop --platform=linux, wi
102. Automatic Updates Crash Reports Content Tracing Installation Packages
104. Dem
105. What about variation points? " "
107. Dependenc Injectio
108. @Injectable({ providedIn: 'root', }) export abstract class AbstractCameraService { abstract getPhoto(...): Observable<Photo>; } 1 2 3 4 5 6
109. @Injectable({ providedIn: 'root', useFactory: cameraFactory, deps: [PlatformInformationService], }) export abstract class AbstractCameraService { abstract getPhoto(...): Observable<Photo>; } 1 2 3 4 5 6 7 8
110. export function cameraFactory( platformInformationService: PlatformInformationService ): AbstractCameraService { return platformInformationService.isMobile ? new MobileCameraService() : new DesktopCameraService(); } @Injectable({ providedIn: 'root', useFactory: cameraFactory, deps: [PlatformInformationService], }) export abstract class AbstractCameraService { abstract getPhoto(...): Observable<Photo>; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
111. 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
112. 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 import { AbstractCameraService, Photo } from '@workspace/features/camera'; 1 2 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 constructor( 8 private cameraService: AbstractCameraService 9 ) {} 10 11 pictureClicked() { 12 this.cameraService.getPhoto() 13 .subscribe((result: Photo) => { 14 // ... 15 }); 16 } 17 } 18
113. 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 import { AbstractCameraService, Photo } from '@workspace/features/camera'; 1 2 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 constructor( 8 private cameraService: AbstractCameraService 9 ) {} 10 11 pictureClicked() { 12 this.cameraService.getPhoto() 13 .subscribe((result: Photo) => { 14 // ... 15 }); 16 } 17 } 18 constructor( private cameraService: AbstractCameraService ) {} import { 1 AbstractCameraService, Photo 2 } from '@workspace/features/camera'; 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 8 9 10 11 pictureClicked() { 12 this.cameraService.getPhoto() 13 .subscribe((result: Photo) => { 14 // ... 15 }); 16 } 17 } 18
114. 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 import { AbstractCameraService, Photo } from '@workspace/features/camera'; 1 2 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 constructor( 8 private cameraService: AbstractCameraService 9 ) {} 10 11 pictureClicked() { 12 this.cameraService.getPhoto() 13 .subscribe((result: Photo) => { 14 // ... 15 }); 16 } 17 } 18 constructor( private cameraService: AbstractCameraService ) {} import { 1 AbstractCameraService, Photo 2 } from '@workspace/features/camera'; 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 8 9 10 11 pictureClicked() { 12 this.cameraService.getPhoto() 13 .subscribe((result: Photo) => { 14 // ... 15 }); 16 } 17 } 18 pictureClicked() { this.cameraService.getPhoto() .subscribe((result: Photo) => { // ... }); } import { 1 AbstractCameraService, Photo 2 } from '@workspace/features/camera'; 3 4 @Component({ ... }) 5 export class ProfileDetailsComponent { 6 7 constructor( 8 private cameraService: AbstractCameraService 9 ) {} 10 11 12 13 14 15 16 17 } 18
116. Securit
117. Mobil Desktop Web
118. OAut 2 OIDC
119. https://bit.ly/3mMHyKY
120. Alternative
122. Progressiv Web App
124. Progressiv Web App
125. Cr -Platfor -App Electro , Cordov & Angular wit
127. an yo !