Echte Cross-Plattform-Anwendungen mit Cordova, Electron und Angular

Angular gibt Webentwicklern eine Plattform, mit der Applikationen nicht nur für das Web geschrieben werden können. Auch durch mobile Endgeräte wie Smartphones oder Tablets sowie durch den Desktop werden Line-of-Business-(LOB-)Apps von Benutzern konsumiert und sind nicht mehr wegzudenken. Hat man den Angular-Code einmal geschrieben, braucht es nicht mehr viel, um die Applikation auf das Smartphone oder den Desktop zu bringen. In diesem Talk zeigt Fabian Gosebrink, wie man eine bestehende Angular-Applikation mit wenigen Schritten mittels Cordova auf ein mobiles Endgerät portieren und auch native Features von Smartphones verwenden kann. Mithilfe von Electron wird auch der Desktop als Plattform adressiert, sodass am Ende eine Angular-Codebasis alle Plattformen bedienen und die Anwendung über jedes Endgerät genutzt werden kann. Echtes Cross-Plattform eben.

Transcript

6. Server Client HTTP WS
14. https://www.lachschon.de/item/149764-Luck/
16. “[…] enables software programmers to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone."
17. Cordova Application Mobile System Web App Plugins HTML APIs OS API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
18. Cordova Application Mobile System Web App Plugins HTML APIs OS API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
19. Cordova Application Mobile System Web App Plugins HTML APIs OS API OS API HTML Rendering (WebView) Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs Amazon Fire Blackberry Tizen FirefoxOS …
20. > npm install cordova -g
21. > cordova create myFirstApp
23. Information Features Plugins Settings
25. > cordova platform add android
26. > cordova build
27. deviceready pause resume backbutton menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton activated
36. "Electron is a tool for building Cross- Platform Desktop Apps with Javascript, Html and CSS" Anybody I don’t know when
42. > npm install electron -g
44. index.js
45. index.html
46. > electron .
57. renderer.js
58. index.js
61. index.js
62. index.js
63. > npm install ngx-electron
64. service.ts
65. > npm install electron-packager -g
66. > electron-packager .temp/desktop
67. > electron-packager .temp/desktop --platform=linux, win32
68. •Automatic updates •Crash reports •Content tracing •Installation packages
71. “Cross-Platform? What about variation points?"
83. @FabianGosebrink
87. https://offering.solutions http://developer-academy.ch https://fabian-gosebrink.com @FabianGosebrink