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

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.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

September 27, 2018
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. Server Client HTTP WS

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. https://www.lachschon.de/item/149764-Luck/

  15. None
  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

  22. None
  23. Information Features Plugins Settings

  24. None
  25. > cordova platform add android

  26. > cordova build

  27. deviceready pause resume backbutton menubutton searchbutton startcallbutton endcallbutton volumedownbutton volumeupbutton

    activated
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. "Electron is a tool for building Cross- Platform Desktop Apps

    with Javascript, Html and CSS" Anybody I don’t know when
  37. None
  38. None
  39. None
  40. None
  41. None
  42. > npm install electron -g

  43. None
  44. index.js

  45. index.html

  46. > electron .

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. renderer.js

  58. index.js

  59. None
  60. None
  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

  69. None
  70. None
  71. “Cross-Platform? What about variation points?"

  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. @FabianGosebrink

  84. None
  85. None
  86. None
  87. https://offering.solutions http://developer-academy.ch https://fabian-gosebrink.com @FabianGosebrink