Mobile & Desktop: Cross-Plattform with Electron and Cordova – an Introduction

Mobile & Desktop: Cross-Plattform with Electron and Cordova – an Introduction

Find my slides for my presentation "Mobile & Desktop: Cross-Platform with Electron and Cordova – an Introduction" here

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

September 26, 2019
Tweet

Transcript

  1. Cross-Platform with

  2. Cross-Platform with

  3. Let us talk about

  4. None
  5. Mobile Desktop Web

  6. so much more

  7. Server Client HTTP WS

  8. None
  9. None
  10. None
  11. None
  12. Server Client HTTP WS

  13. None
  14. None
  15. “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.”
  16. Cordova Application

  17. Cordova Application Web App

  18. Cordova Application Web App HTML Rendering (WebView)

  19. Cordova Application Web App HTML APIs HTML Rendering (WebView) Cordova

    APIs
  20. Cordova Application Web App Plugins HTML APIs HTML Rendering (WebView)

    Cordova APIs Camera Battery Contacts Device Geolocation Media Vibration Splashscreen Dialogs Custom Cordova native APIs
  21. 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 …
  22. > npm install cordova -g

  23. > cordova create myFirstApp

  24. None
  25. Information Features Plugins Settings

  26. > cordova plugin add cordova-plugin-camera --save

  27. None
  28. > cordova platform add android

  29. > cordova build

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

    activated
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Demo

  37. None
  38. None
  39. "Electron is a tool for building Cross- Platform Desktop Apps

    with Javascript, Html and CSS"
  40. None
  41. None
  42. None
  43. None
  44. None
  45. > npm install electron -g

  46. None
  47. index.js

  48. index.html

  49. > electron .

  50. None
  51. None
  52. Process Main Render

  53. Process Main Render

  54. None
  55. None
  56. None
  57. None
  58. None
  59. Communication

  60. IPC

  61. renderer.js

  62. index.js

  63. Operating System

  64. None
  65. index.js

  66. index.js

  67. > npm install ngx-electron

  68. service.ts

  69. > npm install electron-packager -g

  70. > electron-packager .temp/desktop

  71. > electron-packager .temp/desktop --platform=linux, win32

  72. Automatic updates Crash reports Content tracing Installation packages

  73. None
  74. Demo

  75. “Cross-Platform? What about variation points?"

  76. Dependency Injection

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. Demo

  85. One Code every platform

  86. One Codebase every platform

  87. Fabian Gosebrink https://offering.solutions https://github.com/FabianGosebrink/Basta-2019-Cross-Platform-Cordova-Electron-Angular https://fabian-gosebrink.com @FabianGosebrink

  88. THANK YOU !!!