Cross Platform Apps with Cordova, Electron and Angular

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.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

September 24, 2020
Tweet

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

  12. None
  13. None
  14. Server Clien

  15. Server Clien

  16. Server Clien HTTP WS

  17. None
  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. " "
  20. None
  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
  41. None
  42. None
  43. None
  44. None
  45. None
  46. Dem

  47. Electro

  48. Electron is a tool for building Cross- Platform Desktop Apps

    with Javascript, Html and CSS " "
  49. None
  50. None
  51. Chromiu

  52. None
  53. None
  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 .

  67. None
  68. None
  69. Process Mai

  70. Process Renderer

  71. None
  72. None
  73. None
  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
  77. None
  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

  103. None
  104. Dem

  105. What about variation points? " "

  106. None
  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
  115. None
  116. Securit

  117. Mobil Desktop Web

  118. OAut 2 OIDC

  119. https://bit.ly/3mMHyKY

  120. Alternative

  121. None
  122. Progressiv Web App

  123. None
  124. Progressiv Web App

  125. Cr -Platfor -App Electro , Cordov & Angular wit

  126. None
  127. an yo !